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

Refactor chip variants in event and team components for consistency

Browse Source 
This commit updates various components within the Events and MeetingSchedule features to utilize standardized chip variants defined in the AppIcons class. The changes include replacing hardcoded chip variants with calls to the new methods for event, team, and student chips, enhancing consistency across the UI. Additionally, the UnscheduledStudentsList component has been updated to include necessary using directives, improving code clarity. These modifications contribute to a more uniform and maintainable user interface.
This commit is contained in:
James Kolpack
2026-01-14 10:22:44 -05:00
parent 68311f4012
commit 5fdda08627
7 changed files with 102 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebApp/Components/Features/Events/Components/EventAttributes.razor
+1 -1
View File
@@ -4,7 +4,7 @@
{
<span class="numberCircle">@EventDefinition.LevelOfEffort</span>
} *@
<MudChip T="string" Color="Color.Default" Variant="Variant.Filled" Style="background-color: white; font-family: monospace; white-space: pre;">
<MudChip T="string" Color="Color.Default" Variant="@AppIcons.EventChipVariant()" Style="background-color: white; font-family: monospace; white-space: pre;">
@{
var loeIcon = AppIcons.LevelOfEffortIcon(EventDefinition.LevelOfEffort);
var loeColor = AppIcons.IconColors.GetValueOrDefault(loeIcon, "inherit");
WebApp/Components/Features/MeetingSchedule/ScheduledTeamsList.razor
+4 -3
View File
@@ -29,7 +29,8 @@
<div @onclick="@(() => OnToggleTeam.InvokeAsync(team))" style="cursor: pointer; display: inline-block;">
<MudChip T="string"
Size="Size.Small"
Color="Color.Default">
Color="Color.Default"
Variant="@AppIcons.TeamChipVariant()">
@team
</MudChip>
</div>
@@ -59,7 +60,7 @@
{
<InteractiveChip Size="Size.Small"
Color="@chipColor"
Variant="Variant.Outlined"
Variant="@AppIcons.StudentChipVariant()"
Style="@(isExcluded ? "opacity: 0.5;" : "")">
<ChildContent>
<span>@formattedName</span>
@@ -79,7 +80,7 @@
<MudChip T="string"
Size="Size.Small"
Color="@chipColor"
Variant="Variant.Outlined"
Variant="@AppIcons.StudentChipVariant()"
Style="@(isExcluded ? "opacity: 0.5;" : "")">
<span>@formattedName</span>
</MudChip>
WebApp/Components/Features/MeetingSchedule/UnscheduledStudentsList.razor
+4 -2
View File
@@ -1,5 +1,6 @@
@using Core.Calculation
@using Core.Utility
@using WebApp.Models
@if (UnscheduledStudents.Any())
{
@@ -18,7 +19,7 @@
}
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
<MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
<MudChip T="string" Size="Size.Small" Variant="Variant.Outlined" Class="font-style-italic">
<MudChip T="string" Size="Size.Small" Variant="@AppIcons.StudentChipVariant()" Class="font-style-italic">
@formattedName
</MudChip>
</MudStack>
@@ -40,7 +41,8 @@
<div @onclick="@(() => OnToggleTeam.InvokeAsync(unassignedTeam))" style="cursor: pointer; display: inline-block;">
<MudChip T="string"
Size="Size.Small"
Color="@chipColor">
Color="@chipColor"
Variant="@AppIcons.TeamChipVariant()">
@if (isScheduled)
{
<MudIcon Icon="@Icons.Material.Filled.Check" Size="Size.Small" Style="margin-right: 4px;" />
WebApp/Components/Features/Students/Registration.razor
+1
View File
@@ -94,6 +94,7 @@
<MudTooltip Text="@teamMembers">
<MudChip Size="Size.Small"
Color="Color.Default"
Variant="@AppIcons.TeamChipVariant()"
Href="@($"/teams/edit?id={team.Id}&returnUrl=/students/teams")"
Style="cursor: pointer;">
@team
WebApp/Components/Features/Teams/Assignment.razor
+76 -74
View File
@@ -153,85 +153,87 @@
.Concat(context.Events)
.Distinct();
}
@foreach (var e in
allStudentEvents
.OrderBy(e =>
context.Student.EventRankings
.Find(ser => ser.EventDefinition == e)?.Rank ?? 10))
{
var eventRank = context.Student.EventRankings.Find(er => er.EventDefinition == e)?.Rank;
var isAssigned = context.Events.Contains(e);
var color = AppIcons.RankedEventColor(eventRank ?? 0);
var style = "border-style: solid;";
if (isAssigned)
<MudStack Row="true" Spacing="1" Wrap="Wrap.Wrap" AlignItems="AlignItems.Center">
@foreach (var e in
allStudentEvents
.OrderBy(e =>
context.Student.EventRankings
.Find(ser => ser.EventDefinition == e)?.Rank ?? 10))
{
style += "border-color:black; border-width:thin;";
if (eventRank.HasValue)
var eventRank = context.Student.EventRankings.Find(er => er.EventDefinition == e)?.Rank;
var isAssigned = context.Events.Contains(e);
var color = AppIcons.RankedEventColor(eventRank ?? 0);
var style = "border-style: solid;";
if (isAssigned)
{
style += $"background:{color};";
if (eventRank == 1)
style += $"color:black";
style += "border-color:black; border-width:thin;";
if (eventRank.HasValue)
{
style += $"background:{color};";
if (eventRank == 1)
style += $"color:black";
}
else
style += $"background:{Colors.Gray.Lighten3};";
}
else
style += $"background:{Colors.Gray.Lighten3};";
{
if (eventRank.HasValue)
style += $"border-color:{color}; border-width:medium; color:{Colors.Gray.Lighten1};";
}
var isIncluded = _assignmentRequirements
.Find(ar =>
ar.EventDefinition == e
&& ar.Student == context.Student
&& ar.Requirement == Requirement.Include) == null;
var isExcluded = _assignmentRequirements
.Find(ar =>
ar.EventDefinition == e
&& ar.Student == context.Student
&& ar.Requirement == Requirement.Exclude) == null;
<InteractiveChip WrapperClass="my-1" Style="@style" Variant="@AppIcons.EventChipVariant()">
<ChildContent>
@e.ShortName&nbsp;
@AppIcons.EventAttributes(e)
</ChildContent>
<ControlContent>
@if (isIncluded)
{
<MudTooltip Text="@($"Add requirement for {context.Student.FirstName} in {e.ShortName}")">
<MudIconButton Icon="@Icons.Material.Outlined.ThumbUpAlt" Class="ml-3" Size="Size.Small" Color="Color.Default"
OnClick="() => RequireEvent(e, context.Student, Requirement.Include)"></MudIconButton>
</MudTooltip>
}
else
{
<MudTooltip Text="@($"Remove requirement for {context.Student.FirstName} in {e.ShortName}")">
<MudIconButton Icon="@Icons.Material.Filled.ThumbUpAlt" Class="ml-3" Size="Size.Small" Color="Color.Dark"
OnClick="() => RemoveRequireEvent(e, context.Student, Requirement.Include)"></MudIconButton>
</MudTooltip>
}
@if (isExcluded)
{
<MudTooltip Text="@($"Add restriction against {context.Student.FirstName} in {e.ShortName}")">
<MudIconButton Icon="@Icons.Material.Outlined.ThumbDownAlt" Size="Size.Small" Color="Color.Default"
OnClick="() => RequireEvent(e, context.Student, Requirement.Exclude)"></MudIconButton>
</MudTooltip>
}
else
{
<MudTooltip Text="@($"Remove restriction against {context.Student.FirstName} in {e.ShortName}")">
<MudIconButton Icon="@Icons.Material.Filled.ThumbDownAlt" Size="Size.Small" Color="Color.Dark"
OnClick="() => RemoveRequireEvent(e, context.Student, Requirement.Exclude)"></MudIconButton>
</MudTooltip>
}
</ControlContent>
</InteractiveChip>
}
else
{
if (eventRank.HasValue)
style += $"border-color:{color}; border-width:medium; color:{Colors.Gray.Lighten1};";
}
var isIncluded = _assignmentRequirements
.Find(ar =>
ar.EventDefinition == e
&& ar.Student == context.Student
&& ar.Requirement == Requirement.Include) == null;
var isExcluded = _assignmentRequirements
.Find(ar =>
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}")">
<MudIconButton Icon="@Icons.Material.Outlined.ThumbUpAlt" Class="ml-3" Size="Size.Small" Color="Color.Default"
OnClick="() => RequireEvent(e, context.Student, Requirement.Include)"></MudIconButton>
</MudTooltip>
}
else
{
<MudTooltip Text="@($"Remove requirement for {context.Student.FirstName} in {e.ShortName}")">
<MudIconButton Icon="@Icons.Material.Filled.ThumbUpAlt" Class="ml-3" Size="Size.Small" Color="Color.Dark"
OnClick="() => RemoveRequireEvent(e, context.Student, Requirement.Include)"></MudIconButton>
</MudTooltip>
}
@if (isExcluded)
{
<MudTooltip Text="@($"Add restriction against {context.Student.FirstName} in {e.ShortName}")">
<MudIconButton Icon="@Icons.Material.Outlined.ThumbDownAlt" Size="Size.Small" Color="Color.Default"
OnClick="() => RequireEvent(e, context.Student, Requirement.Exclude)"></MudIconButton>
</MudTooltip>
}
else
{
<MudTooltip Text="@($"Remove restriction against {context.Student.FirstName} in {e.ShortName}")">
<MudIconButton Icon="@Icons.Material.Filled.ThumbDownAlt" Size="Size.Small" Color="Color.Dark"
OnClick="() => RemoveRequireEvent(e, context.Student, Requirement.Exclude)"></MudIconButton>
</MudTooltip>
}
</ControlContent>
</InteractiveChip>
}
</MudStack>
<MudDivider Style="border-width:3px" />
</td></MudTr>
</ChildRowContent>
WebApp/Components/Features/Teams/Components/TeamStudents.razor
+1 -1
View File
@@ -17,7 +17,7 @@
<MudTooltip Text="@rankLabel">
<MudChip T="string"
Size="Size.Medium"
Variant="Variant.Outlined"
Variant="@AppIcons.StudentChipVariant()"
Class="mx-1 my-1">
@if (eventRank.HasValue)
{