Refactor MeetingSchedule component to enhance time slot selection UI

This commit updates the MeetingSchedule component by replacing the numeric field for time slot selection with a more user-friendly interface using MudIconButton components for incrementing and decrementing time slots. The new design improves usability by providing clear visual controls for adjusting the number of time slots, while maintaining the existing functionality of tracking time slot counts. This enhancement contributes to a better user experience in managing meeting schedules.

WebApp/Components/Features/MeetingSchedule/Index.razor

@@ -51,14 +51,25 @@
                         <MudPaper Elevation="0" Class="pa-1" Style="border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius);">
                             <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                                 <MudText Typo="Typo.body2">Time Slots</MudText>
-                                <MudNumericField Value="_parameters.TimeSlots"
+                                <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="0" Style="border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius);">
-                                                 ValueChanged="async (int val) => await OnTimeSlotCountChanged(val)"
+                                    <MudIconButton Icon="@Icons.Material.Filled.Remove" 
-                                                 Label=""
+                                                  OnClick="DecrementTimeSlots"
-                                                 Min="1" 
+                                                  Disabled="@(_parameters.TimeSlots <= 1)"
-                                                 Max="4"
+                                                  Size="Size.Small"
-                                                 Variant="Variant.Outlined"
+                                                  Variant="Variant.Text"
-                                                 Style="width: 80px;">
+                                                  Style="border-radius: var(--mud-default-borderradius) 0 0 var(--mud-default-borderradius);" />
-                                </MudNumericField>
+                                    <MudButton Disabled="true" 
+                                              Variant="Variant.Text"
+                                              Style="min-width: 50px; width: 50px; pointer-events: none; border-left: 1px solid var(--mud-palette-lines-default); border-right: 1px solid var(--mud-palette-lines-default); border-radius: 0;">
+                                        @_parameters.TimeSlots
+                                    </MudButton>
+                                    <MudIconButton Icon="@Icons.Material.Filled.Add" 
+                                                  OnClick="IncrementTimeSlots"
+                                                  Disabled="@(_parameters.TimeSlots >= 4)"
+                                                  Size="Size.Small"
+                                                  Variant="Variant.Text"
+                                                  Style="border-radius: 0 var(--mud-default-borderradius) var(--mud-default-borderradius) 0;" />
+                                </MudStack>
                             </MudStack>
                         </MudPaper>
                     </MudItem>
@@ -207,6 +218,22 @@
         await Task.CompletedTask;
     }
 
+    private async Task IncrementTimeSlots()
+    {
+        if (_parameters.TimeSlots < 4)
+        {
+            await OnTimeSlotCountChanged(_parameters.TimeSlots + 1);
+        }
+    }
+
+    private async Task DecrementTimeSlots()
+    {
+        if (_parameters.TimeSlots > 1)
+        {
+            await OnTimeSlotCountChanged(_parameters.TimeSlots - 1);
+        }
+    }
+
     private void OnExtendedTeamsChanged(IEnumerable<Team> teams)
     {
         _extendedTeams = teams;