Add some local storage to save settings between

page reloads.
This commit is contained in:
2025-12-12 12:48:44 -05:00
parent aeafdcee1a
commit b465235096
9 changed files with 379 additions and 21 deletions
@@ -64,8 +64,8 @@ else
</MudPaper>
<div class="mt-4">
<MudButton StartIcon="@Icons.Material.Filled.Edit" Href="@($"/students/edit?id={student.Id}")" Variant="Variant.Filled" Color="Color.Primary">Edit</MudButton>
<MudButton StartIcon="@Icons.Material.Filled.ArrowBack" Href="/students" Variant="Variant.Text">Back to List</MudButton>
<MudButton StartIcon="@Icons.Material.Filled.Edit" Href="@($"/students/edit?id={student.Id}&returnUrl={ReturnUrl ?? "/students"}")" Variant="Variant.Filled" Color="Color.Primary">Edit</MudButton>
<MudButton StartIcon="@Icons.Material.Filled.ArrowBack" Href="@(ReturnUrl ?? "/students")" Variant="Variant.Text">Back to List</MudButton>
</div>
}
@@ -75,6 +75,9 @@ else
[SupplyParameterFromQuery]
private int Id { get; set; }
[SupplyParameterFromQuery]
private string? ReturnUrl { get; set; }
protected override async Task OnInitializedAsync()
{
student = await context.Students.FirstOrDefaultAsync(m => m.Id == Id);
@@ -45,7 +45,7 @@ else
</MudPaper>
</MudItem>
</MudGrid>
<MudButton StartIcon="@Icons.Material.Filled.ArrowBack" Href="students">Back</MudButton>
<MudButton StartIcon="@Icons.Material.Filled.ArrowBack" Href="@(ReturnUrl ?? "/students")">Back</MudButton>
<MudButton StartIcon="@Icons.Material.Filled.Save" OnClick="UpdateStudent">Save</MudButton>
</EditForm>
}
@@ -54,6 +54,9 @@ else
[SupplyParameterFromQuery]
private int Id { get; set; }
[SupplyParameterFromQuery]
private string? ReturnUrl { get; set; }
[SupplyParameterFromForm]
private Student? Student { get; set; }
@@ -92,7 +95,7 @@ else
}
}
NavigationManager.NavigateTo("/students");
NavigationManager.NavigateTo(ReturnUrl ?? "/students");
}
private bool StudentExists(int id)
@@ -32,8 +32,8 @@
</PropertyColumn>
<TemplateColumn>
<CellTemplate>
<CrudActions DetailsHref="@($"/students/details?id={context.Item!.Id}")"
EditHref="@($"/students/edit?id={context.Item!.Id}")"
<CrudActions DetailsHref="@($"/students/details?id={context.Item!.Id}&returnUrl=/students")"
EditHref="@($"/students/edit?id={context.Item!.Id}&returnUrl=/students")"
DeleteOnClick="() => DeleteStudent(context.Item!)">
</CrudActions>
</CellTemplate>
@@ -3,6 +3,7 @@
@using Microsoft.EntityFrameworkCore
@using WebApp.Models
@inject AppDbContext Context
@inject WebApp.LocalStorageService LocalStorage
<PageTitle>Registration - TSA Chapter Organizer</PageTitle>
@@ -23,10 +24,10 @@
<MudText Typo="Typo.body2" Style="margin-bottom: 8px;">
<strong>Show Columns:</strong>
<MudCheckBox Value="_showGrade" ValueChanged="(bool val) => { _showGrade = val; _gridKey++; StateHasChanged(); }" Label="Grade" Dense="true" Size="Size.Small" />
<MudCheckBox Value="_showRegionalId" ValueChanged="(bool val) => { _showRegionalId = val; _gridKey++; StateHasChanged(); }" Label="Regional ID" Dense="true" Size="Size.Small" />
<MudCheckBox Value="_showStateId" ValueChanged="(bool val) => { _showStateId = val; _gridKey++; StateHasChanged(); }" Label="State ID" Dense="true" Size="Size.Small" />
<MudCheckBox Value="_showNationalId" ValueChanged="(bool val) => { _showNationalId = val; _gridKey++; StateHasChanged(); }" Label="National ID" Dense="true" Size="Size.Small" />
<MudCheckBox Value="_showGrade" ValueChanged="async (bool val) => await OnColumnToggle(nameof(_showGrade), val, v => _showGrade = v)" Label="Grade" Dense="true" Size="Size.Small" />
<MudCheckBox Value="_showRegionalId" ValueChanged="async (bool val) => await OnColumnToggle(nameof(_showRegionalId), val, v => _showRegionalId = v)" Label="Regional ID" Dense="true" Size="Size.Small" />
<MudCheckBox Value="_showStateId" ValueChanged="async (bool val) => await OnColumnToggle(nameof(_showStateId), val, v => _showStateId = v)" Label="State ID" Dense="true" Size="Size.Small" />
<MudCheckBox Value="_showNationalId" ValueChanged="async (bool val) => await OnColumnToggle(nameof(_showNationalId), val, v => _showNationalId = v)" Label="National ID" Dense="true" Size="Size.Small" />
</MudText>
<MudDataGrid T="StudentTeamInfo" ServerData="ServerReload" @ref="_dataGrid" @key="_gridKey" Filterable="true" RowsPerPage="35">
@@ -34,6 +35,12 @@
<PropertyColumn Property="@(e => e.Student.LastName)" Title="Student" Sortable="true">
<CellTemplate>
@context.Item.Student.LastNameFirstName
<MudTooltip Text="Edit">
<MudIconButton Icon="@Icons.Material.Filled.Edit"
Size="Size.Small"
Href="@($"/students/edit?id={context.Item.Student.Id}&returnUrl=/students/teams")"
Style="margin-left: 4px;" />
</MudTooltip>
</CellTemplate>
</PropertyColumn>
@if (_showGrade)
@@ -94,6 +101,7 @@
private bool _showRegionalId;
private bool _showStateId;
private bool _showNationalId;
private bool _preferencesLoaded = false;
// TODO: Remove this workaround once MudBlazor fixes dynamic column ordering
// https://dev.to/the_real_slim_janey/get-in-line-customizing-column-order-in-mudblazor-3ail
@@ -103,6 +111,39 @@
// 3. Remove "@key="_gridKey"" attribute from MudDataGrid (line 32)
private int _gridKey = 0;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (!_preferencesLoaded)
{
await LoadColumnPreferences();
_preferencesLoaded = true;
_gridKey++; // Force grid recreation with loaded preferences
StateHasChanged();
}
}
protected override void OnInitialized()
{
// Reset flag when component is initialized/re-initialized
_preferencesLoaded = false;
}
private async Task LoadColumnPreferences()
{
_showGrade = await LocalStorage.GetBoolAsync("Registration_ShowGrade", false);
_showRegionalId = await LocalStorage.GetBoolAsync("Registration_ShowRegionalId", false);
_showStateId = await LocalStorage.GetBoolAsync("Registration_ShowStateId", false);
_showNationalId = await LocalStorage.GetBoolAsync("Registration_ShowNationalId", false);
}
private async Task OnColumnToggle(string columnName, bool value, Action<bool> setter)
{
setter(value);
_gridKey++;
await LocalStorage.SetBoolAsync($"Registration_{columnName}", value);
StateHasChanged();
}
private async Task ToggleRegionalFilter()
{
_showRegionalOnly = !_showRegionalOnly;