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

Improve Event Ranking Editor

Browse Source
This commit is contained in:
James Kolpack
2025-12-07 00:00:57 -05:00
parent abd4840ec1
commit 8289b7139a
1 changed files with 50 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebApp/Components/Features/Students/EventRankingEdit.razor
+50 -23
View File
@@ -5,6 +5,8 @@
@using WebApp.Models @using WebApp.Models
@inject AppDbContext Context @inject AppDbContext Context
@inject NavigationManager NavigationManager @inject NavigationManager NavigationManager
@inject ISnackbar Snackbar
@inject ILogger<EventRankingEdit> Logger
<PageTitle>Student Event Ranks - TSA Chapter Organizer</PageTitle> <PageTitle>Student Event Ranks - TSA Chapter Organizer</PageTitle>
@@ -17,35 +19,66 @@
} }
else else
{ {
<MudText Typo="Typo.h4">@_student.Name</MudText> <MudText Typo="Typo.h4" Class="mb-2">@_student.Name</MudText>
<MudText Color="Color.Warning">Warning: drag and drop is currently a bit squirrely - double check!</MudText>
<MudButton StartIcon="@Icons.Material.Filled.ArrowBack" Href="students/event-ranking">Back</MudButton> <div class="mb-4">
<MudButton StartIcon="@Icons.Material.Filled.Save" OnClick="Save">Save</MudButton> <MudButton StartIcon="@Icons.Material.Filled.ArrowBack" Href="students/event-ranking" Variant="Variant.Outlined" Class="mr-2">Back</MudButton>
<MudButton StartIcon="@Icons.Material.Filled.Save" OnClick="Save" Color="Color.Primary" Variant="Variant.Filled">Save Rankings</MudButton>
</div>
/* https://github.com/AlexNek/BlazorSortableList */ @* https://github.com/AlexNek/BlazorSortableList *@
<MudGrid> <MudGrid Class="mt-2">
<MudItem xs="6" md="4" xl="3" Class="ranked-event-column"> <MudItem xs="12" md="6" xl="4">
<SortableList <MudPaper Class="pa-3 mb-3" Elevation="0">
<div class="d-flex align-center mb-1">
<MudIcon Icon="@Icons.Material.Filled.FormatListNumbered" Class="mr-2" Color="Color.Primary" />
<MudText Typo="Typo.h6" Color="Color.Primary">Ranked Events</MudText>
</div>
<MudText Typo="Typo.caption" Color="Color.Secondary">Drag events here in order of preference</MudText>
</MudPaper>
<SortableList
Group="GroupId" Id="ListId1" Context="item" Group="GroupId" Id="ListId1" Context="item"
Items="_rankedEvents" OnRemove="RankedEventsRemove" OnUpdate="Update"> Items="_rankedEvents" OnRemove="RankedEventsRemove" OnUpdate="Update">
<SortableItemTemplate> <SortableItemTemplate>
<MudCard Outlined="true"> <MudCard Outlined="true" Class="mb-2">
<MudCardContent>@item.Name</MudCardContent> <MudCardContent Class="pa-2">
<div class="d-flex align-center">
<MudBadge Content="@(_rankedEvents.IndexOf(item) + 1)" Color="Color.Primary" Overlap="true" Class="mr-3">
<MudIcon Icon="@Icons.Material.Filled.DragIndicator" />
</MudBadge>
<div class="flex-grow-1">
<MudText Typo="Typo.body2"><strong>@item.Name</strong></MudText>
<MudText Typo="Typo.caption">
@AppIcons.EventAttributes(item) @AppIcons.EventEffort(item)
</MudText>
</div>
</div>
</MudCardContent>
</MudCard> </MudCard>
</SortableItemTemplate> </SortableItemTemplate>
</SortableList> </SortableList>
</MudItem> </MudItem>
<MudItem xs="6" md="4" xl="3"> <MudItem xs="12" md="6" xl="4">
<MudPaper Class="pa-3 mb-3" Elevation="0">
<div class="d-flex align-center mb-1">
<MudIcon Icon="@AppIcons.Events" Class="mr-2" />
<MudText Typo="Typo.h6">Available Events</MudText>
</div>
<MudText Typo="Typo.caption" Color="Color.Secondary">Drag events to rank them</MudText>
</MudPaper>
<SortableList <SortableList
Group="GroupId" Id="ListId2" Context="item" Group="GroupId" Id="ListId2" Context="item"
Items="_availableEvents" OnRemove="AvailableEventsRemove" Sort="false"> Items="_availableEvents" OnRemove="AvailableEventsRemove" Sort="false">
<SortableItemTemplate> <SortableItemTemplate>
<MudCard Outlined="true"> <MudCard Outlined="true" Class="mb-2">
<MudCardContent>@item.Name</MudCardContent> <MudCardContent Class="pa-2">
<MudText Typo="Typo.body2"><strong>@item.Name</strong></MudText>
<MudText Typo="Typo.caption">
@AppIcons.EventAttributes(item) @AppIcons.EventEffort(item)
</MudText>
</MudCardContent>
</MudCard> </MudCard>
</SortableItemTemplate> </SortableItemTemplate>
</SortableList> </SortableList>
</MudItem> </MudItem>
</MudGrid> </MudGrid>
@@ -66,8 +99,6 @@
public List<EventDefinition> _rankedEvents = []; public List<EventDefinition> _rankedEvents = [];
public List<EventDefinition> _availableEvents = []; public List<EventDefinition> _availableEvents = [];
SharedSortableListGroup _group;
private void RankedEventsRemove((int oldIndex, int newIndex) indices) private void RankedEventsRemove((int oldIndex, int newIndex) indices)
{ {
// get the item at the old index in list 1 // get the item at the old index in list 1
@@ -105,10 +136,6 @@
_rankedEvents = _student.EventRankings.OrderBy(e => e.Rank).Select(e => e.EventDefinition).ToList(); _rankedEvents = _student.EventRankings.OrderBy(e => e.Rank).Select(e => e.EventDefinition).ToList();
_availableEvents = _events.Where(e => !_rankedEvents.Contains(e)).ToList(); _availableEvents = _events.Where(e => !_rankedEvents.Contains(e)).ToList();
_group = new SharedSortableListGroup(StateHasChanged);
_group.AddModel(ListId1, new SortableListModel<EventDefinition>(_rankedEvents) { Group = GroupId });
_group.AddModel(ListId2, new SortableListModel<EventDefinition>(_availableEvents) { Group = GroupId });
} }
private void Update((int oldIndex, int newIndex) indices) private void Update((int oldIndex, int newIndex) indices)
@@ -152,15 +179,15 @@
} }
Context.Students.Update(_student); Context.Students.Update(_student);
await Context.SaveChangesAsync(); await Context.SaveChangesAsync();
Snackbar.Add($"Event rankings saved for {_student.Name}", Severity.Success);
NavigationManager.NavigateTo("/students/event-ranking"); NavigationManager.NavigateTo("/students/event-ranking");
} }
catch (Exception e) catch (Exception e)
{ {
Console.WriteLine(e); Snackbar.Add("Error saving rankings. Please try again.", Severity.Error);
throw; Logger.LogError(e, "Error saving event rankings for student {StudentId}", StudentId);
} }
} }
} }