TSA/chapter-organizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor MeetingSchedule component to enhance time slot selection UI

Browse Source 
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.
This commit is contained in:
James Kolpack
2026-01-21 21:36:39 -05:00
parent 48861eb6a6
commit 6e2834f2be
1 changed files with 35 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebApp/Components/Features/MeetingSchedule/Index.razor
+35 -8
View File
@@ -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"
ValueChanged="async (int val) => await OnTimeSlotCountChanged(val)"
Label=""
Min="1"
Max="4"
Variant="Variant.Outlined"
Style="width: 80px;">
</MudNumericField>
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="0" Style="border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius);">
<MudIconButton Icon="@Icons.Material.Filled.Remove"
OnClick="DecrementTimeSlots"
Disabled="@(_parameters.TimeSlots <= 1)"
Size="Size.Small"
Variant="Variant.Text"
Style="border-radius: var(--mud-default-borderradius) 0 0 var(--mud-default-borderradius);" />
<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;