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

Refactor ScheduledTeamsList component to enhance student exclusion UI

Browse Source 
This commit updates the ScheduledTeamsList.razor component by replacing the existing MudChip implementation with InteractiveChip for better user interaction when managing student exclusions. The logic for displaying excluded students has been simplified, improving the overall readability and maintainability of the code. Additionally, the hover functionality has been removed to streamline the user experience. These changes contribute to a more intuitive and responsive scheduling interface.
This commit is contained in:
James Kolpack
2026-01-14 09:50:16 -05:00
parent 27f08b3718
commit 68311f4012
3 changed files with 121 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebApp/Components/Features/MeetingSchedule/ScheduledTeamsList.razor
+17 -13
View File
@@ -55,29 +55,35 @@
AbsentStudents = AbsentStudents.ToList()
});
<MudStack Row="true" Spacing="0" AlignItems="AlignItems.Center"
Style="position: relative; display: inline-flex;"
@onmouseenter="@(() => _hoveredStudent = (team.Id, student.Id))"
@onmouseleave="@(() => _hoveredStudent = (null, null))">
<MudChip T="string"
Size="Size.Small"
@if (nonExcludedStudentCount > 1)
{
<InteractiveChip Size="Size.Small"
Color="@chipColor"
Variant="Variant.Outlined"
Style="@(isExcluded ? "opacity: 0.5;" : "")">
<MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
<ChildContent>
<span>@formattedName</span>
@if (_hoveredStudent == (team.Id, student.Id) && nonExcludedStudentCount > 1)
{
</ChildContent>
<ControlContent>
<MudIconButton Icon="@Icons.Material.Filled.Close"
Size="Size.Small"
Color="Color.Error"
Variant="Variant.Text"
OnClick="@(() => OnToggleStudentExclusion.InvokeAsync((team.Id, TimeSlotIndex, student.Id)))"
Style="padding: 0; min-width: 16px; width: 16px; height: 16px; margin-left: 4px;" />
</ControlContent>
</InteractiveChip>
}
</MudStack>
else
{
<MudChip T="string"
Size="Size.Small"
Color="@chipColor"
Variant="Variant.Outlined"
Style="@(isExcluded ? "opacity: 0.5;" : "")">
<span>@formattedName</span>
</MudChip>
</MudStack>
}
}
</MudStack>
</MudStack>
@@ -112,8 +118,6 @@
[Parameter]
public EventCallback<(int teamId, int timeSlotIndex, int studentId)> OnToggleStudentExclusion { get; set; }
private (int? teamId, int? studentId) _hoveredStudent = (null, null);
private bool IsStudentExcluded(int teamId, int timeSlotIndex, int studentId)
{
var key = (teamId, timeSlotIndex, studentId);
WebApp/Components/Features/Teams/Assignment.razor
+10 -7
View File
@@ -163,7 +163,7 @@
var isAssigned = context.Events.Contains(e);
var color = AppIcons.RankedEventColor(eventRank ?? 0);
var style = string.Empty;
var style = "border-style: solid;";
if (isAssigned)
{
@@ -183,10 +183,6 @@
style += $"border-color:{color}; border-width:medium; color:{Colors.Gray.Lighten1};";
}
<MudPaper Class="d-inline-flex align-center pa-2 mx-3 my-1 border-solid" Style="@(style)">
@e.ShortName&nbsp;
@AppIcons.EventAttributes(e)
@{
var isIncluded = _assignmentRequirements
.Find(ar =>
ar.EventDefinition == e
@@ -197,7 +193,13 @@
ar.EventDefinition == e
&& ar.Student == context.Student
&& ar.Requirement == Requirement.Exclude) == null;
}
<InteractiveChip WrapperClass="mx-3 my-1" Style="@style" Variant="Variant.Text">
<ChildContent>
@e.ShortName&nbsp;
@AppIcons.EventAttributes(e)
</ChildContent>
<ControlContent>
@if (isIncluded)
{
<MudTooltip Text="@($"Add requirement for {context.Student.FirstName} in {e.ShortName}")">
@@ -227,7 +229,8 @@
OnClick="() => RemoveRequireEvent(e, context.Student, Requirement.Exclude)"></MudIconButton>
</MudTooltip>
}
</MudPaper>
</ControlContent>
</InteractiveChip>
}
<MudDivider Style="border-width:3px" />
</td></MudTr>
WebApp/Components/Shared/Components/InteractiveChip.razor
+50
View File
@@ -0,0 +1,50 @@
@namespace WebApp.Components.Shared.Components
<MudStack Row="true" Spacing="0" AlignItems="AlignItems.Center"
Style="position: relative; display: inline-flex;"
Class="@WrapperClass"
@onmouseenter="@(() => _isHovered = true)"
@onmouseleave="@(() => _isHovered = false)">
<MudChip T="string"
Size="@Size"
Color="@Color"
Variant="@Variant"
Style="@Style"
Class="@Class">
<MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
@ChildContent
@if (_isHovered && ControlContent != null)
{
@ControlContent
}
</MudStack>
</MudChip>
</MudStack>
@code {
[Parameter]
public required RenderFragment ChildContent { get; set; }
[Parameter]
public RenderFragment? ControlContent { get; set; }
[Parameter]
public Size Size { get; set; } = Size.Small;
[Parameter]
public Color Color { get; set; } = Color.Default;
[Parameter]
public Variant Variant { get; set; } = Variant.Text;
[Parameter]
public string? Style { get; set; }
[Parameter]
public string? Class { get; set; }
[Parameter]
public string? WrapperClass { get; set; }
private bool _isHovered = false;
}