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

Refactor Calendar and Home components for improved navigation and user experience

Browse Source 
Updated the Calendar component's route from "/event-calendar" to "/calendar" for clarity. Enhanced the Home component to provide dynamic content based on the presence of students and teams, introducing new sections for "Getting Started" and "Team Building". Improved the DashboardCard component to support emphasized styling for better visual hierarchy. Updated the navigation menu to reflect these changes and ensure a more intuitive user experience.
This commit is contained in:
James Kolpack
2025-12-27 22:01:41 -05:00
parent c462ed4561
commit c9ef169989
4 changed files with 167 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebApp/Components/Features/Calendar/Index.razor
+1 -1
View File
@@ -1,4 +1,4 @@
@page "/event-calendar"
@page "/calendar"
@attribute [Authorize]
@using WebApp.Components.Shared.Components
@using WebApp.Models
WebApp/Components/Pages/Home.razor
+122 -23
View File
@@ -26,19 +26,56 @@
</div>
</MudPaper>
<MudPaper Elevation="0" Class="mb-6">
<MudText Typo="Typo.h4" Class="mb-2">Data</MudText>
</MudPaper>
<MudGrid>
<!-- Events Card -->
@if (!_hasStudents)
{
<!-- Getting Started: No students yet -->
<MudPaper Elevation="0" Class="mb-4">
<MudText Typo="Typo.h4" Color="Color.Primary">Getting Started</MudText>
<MudText Typo="Typo.body2" Color="Color.Secondary">Add your chapter's students to begin</MudText>
</MudPaper>
<MudGrid>
<DashboardCard Icon="@AppIcons.Student"
Title="Students"
Count="@_studentCount"
Subtitle="Add Students"
NavigateUrl="/students"
Emphasized="true">
<MudText Typo="Typo.caption" Class="mt-2">Import or add your chapter roster</MudText>
</DashboardCard>
<DashboardCard Icon="@AppIcons.Events"
Title="Events"
Count="@_eventCount"
Subtitle="Total Events"
Caption="@($"{_teamEventsCount} Team | {_individualEventsCount} Individual")"
NavigateUrl="/events" />
</MudGrid>
}
else if (!_hasTeams)
{
<!-- Team Building: Students exist but no teams yet -->
<MudPaper Elevation="0" Class="mb-4">
<MudText Typo="Typo.h4" Color="Color.Primary">Team Building</MudText>
<MudText Typo="Typo.body2" Color="Color.Secondary">Collect event rankings and build your teams</MudText>
</MudPaper>
<MudGrid>
<DashboardCard Icon="@AppIcons.EventRank"
Title="Event Ranking"
Caption="Collect student event preferences"
NavigateUrl="/students/event-ranking"
Emphasized="true"/>
<!-- Students Card -->
<DashboardCard Icon="@AppIcons.TeamAssignment"
Title="Team Assignment"
Caption="Build optimal teams"
NavigateUrl="/teams/assignment"
Emphasized="true"/>
</MudGrid>
<MudPaper Elevation="0" Class="my-4">
<MudText Typo="Typo.h4">Chapter Data</MudText>
</MudPaper>
<MudGrid>
<DashboardCard Icon="@AppIcons.Student"
Title="Students"
Count="@_studentCount"
@@ -50,33 +87,92 @@
<MudText Typo="Typo.caption">@((MarkupString)_gradeDistribution)</MudText>
</MudStack>
}
else
{
<MudText Typo="Typo.caption" Class="mt-2">No students yet</MudText>
}
</DashboardCard>
<!-- Teams Card -->
<DashboardCard Icon="@AppIcons.Events"
Title="Events"
Count="@_eventCount"
Subtitle="Total Events"
Caption="@($"{_teamEventsCount} Team | {_individualEventsCount} Individual")"
NavigateUrl="/events" />
</MudGrid>
}
else
{
<!-- Normal view: Students and teams exist -->
<MudPaper Elevation="0" Class="mb-4">
<MudText Typo="Typo.h4">Scheduling</MudText>
</MudPaper>
<MudGrid>
<DashboardCard Icon="@AppIcons.Scheduler"
Title="Meeting Schedule"
Caption="Optimize meeting times"
NavigateUrl="/meeting-schedule"/>
<DashboardCard Icon="@Icons.Material.Filled.Event"
Title="Event Calendar"
Caption="Conference schedules"
NavigateUrl="/calendar"/>
</MudGrid>
<MudPaper Elevation="0" Class="my-4">
<MudText Typo="Typo.h4">Teams & Registration</MudText>
</MudPaper>
<MudGrid>
<DashboardCard Icon="@Icons.Material.Filled.AppRegistration"
Title="Registration"
Caption="View student registrations"
NavigateUrl="/students/teams"/>
<DashboardCard Icon="@AppIcons.Teams"
Title="Teams"
Count="@_teamCount"
Subtitle="Total Teams"
Caption="@($"{_groupTeamsCount} Team | {_individualTeamsCount} Individual")"
NavigateUrl="/teams" />
</MudGrid>
<MudPaper Elevation="0" Class="my-6">
<MudText Typo="Typo.h4">Tools</MudText>
</MudPaper>
<MudGrid>
<!-- Meeting Schedule Card -->
<DashboardCard Icon="@AppIcons.Scheduler"
Title="Schedule"
Caption="Optimize meeting times"
NavigateUrl="/meeting-schedule"/>
</MudGrid>
<MudPaper Elevation="0" Class="my-4">
<MudText Typo="Typo.h4">Team Building</MudText>
</MudPaper>
<MudGrid>
<DashboardCard Icon="@AppIcons.EventRank"
Title="Event Ranking"
Caption="Student event preferences"
NavigateUrl="/students/event-ranking"/>
<DashboardCard Icon="@AppIcons.TeamAssignment"
Title="Team Assignment"
Caption="Build optimal teams"
NavigateUrl="/teams/assignment"/>
</MudGrid>
<MudPaper Elevation="0" Class="my-4">
<MudText Typo="Typo.h4">Chapter Data</MudText>
</MudPaper>
<MudGrid>
<DashboardCard Icon="@AppIcons.Student"
Title="Students"
Count="@_studentCount"
Subtitle="Active Students"
NavigateUrl="/students">
@if (!string.IsNullOrEmpty(_gradeDistribution) && _gradeDistribution != "No students yet")
{
<MudStack>
<MudText Typo="Typo.caption">@((MarkupString)_gradeDistribution)</MudText>
</MudStack>
}
</DashboardCard>
<DashboardCard Icon="@AppIcons.Events"
Title="Events"
Count="@_eventCount"
Subtitle="Total Events"
Caption="@($"{_teamEventsCount} Team | {_individualEventsCount} Individual")"
NavigateUrl="/events" />
</MudGrid>
}
@code {
private int _eventCount;
private int _individualEventsCount;
@@ -87,6 +183,9 @@
private int _individualTeamsCount;
private int _groupTeamsCount;
private bool _hasStudents => _studentCount > 0;
private bool _hasTeams => _teamCount > 0;
protected override async Task OnInitializedAsync()
{
await LoadStatistics();
WebApp/Components/Shared/Components/DashboardCard.razor
+7 -1
View File
@@ -1,7 +1,7 @@
@using Microsoft.AspNetCore.Components
<MudItem xs="12" sm="6" md="3">
<MudCard Elevation="4" Class="pa-4" Style="cursor: pointer; height: 100%;" @onclick="HandleClick">
<MudCard Elevation="@(Emphasized ? 8 : 4)" Class="@CardClass" Style="@CardStyle" @onclick="HandleClick">
<MudCardContent>
<div class="d-flex align-center mb-2">
<MudIcon Icon="@Icon" Size="Size.Large" Class="mr-2" />
@@ -33,8 +33,14 @@
[Parameter] public string? Caption { get; set; }
[Parameter] public RenderFragment? ChildContent { get; set; }
[Parameter] public string NavigateUrl { get; set; } = string.Empty;
[Parameter] public bool Emphasized { get; set; }
[Inject] private NavigationManager Navigation { get; set; } = default!;
private string CardClass => Emphasized ? "pa-4 emphasized-card" : "pa-4";
private string CardStyle => Emphasized
? "cursor: pointer; height: 100%; border: 2px solid var(--mud-palette-primary);"
: "cursor: pointer; height: 100%;";
private void HandleClick()
{
if (!string.IsNullOrEmpty(NavigateUrl))
WebApp/Components/Shared/Layout/NavMenu.razor
+16 -8
View File
@@ -7,25 +7,33 @@
<MudLink Typo="Typo.h6" Href="/" Class="px-4">TSA Chapter Organizer</MudLink>
<MudText Typo="Typo.body2" Class="px-4 mud-text-secondary">@Configuration["ChapterSettings:Name"]</MudText>
<MudDivider Class="my-2"/>
<MudNavLink Href="/events" Icon="@AppIcons.Events">Events</MudNavLink>
<MudNavLink Href="/students" Icon="@Icons.Material.Filled.People">Students</MudNavLink>
<MudNavGroup Title="Teams" Icon="@Icons.Material.Outlined.Groups" Expanded="true">
<MudNavLink Href="/teams" Match="NavLinkMatch.All" Icon="@AppIcons.Teams">Teams</MudNavLink>
<MudNavGroup Title="Scheduling" Icon="@Icons.Material.Filled.CalendarMonth" Expanded="true">
<MudNavLink Href="/meeting-schedule/" Icon="@AppIcons.Scheduler">Meeting Schedule</MudNavLink>
<MudNavLink Href="/calendar/" Icon="@Icons.Material.Filled.Event">Event Calendar</MudNavLink>
</MudNavGroup>
<MudNavGroup Title="Teams & Registration" Icon="@Icons.Material.Outlined.Groups" Expanded="true">
<MudNavLink Href="/students/teams" Icon="@Icons.Material.Filled.AppRegistration">Registration</MudNavLink>
<MudNavLink Href="/teams" Match="NavLinkMatch.All" Icon="@AppIcons.Teams">Teams</MudNavLink>
<MudNavLink Href="/teams/printout" Icon="@Icons.Material.Filled.Print">Print out</MudNavLink>
<MudNavLink Href="/teams/handout" Icon="@Icons.Material.Filled.Print">Handout</MudNavLink>
</MudNavGroup>
<MudNavLink Href="/meeting-schedule/" Icon="@AppIcons.Scheduler">Schedule</MudNavLink>
<MudNavLink Href="/event-calendar" Icon="@Icons.Material.Filled.CalendarMonth">Event Calendar</MudNavLink>
<MudNavGroup Title="Team Building" Icon="@Icons.Material.Filled.GroupAdd" Expanded="true">
<MudNavGroup Title="Team Building" Icon="@Icons.Material.Filled.GroupAdd" Expanded="false">
<MudNavLink Href="/students/event-ranking" Icon="@AppIcons.EventRank">Event Ranking</MudNavLink>
<MudNavLink Href="/teams/assignment" Icon="@AppIcons.TeamAssignment">Team Assignment</MudNavLink>
</MudNavGroup>
<MudNavGroup Title="Chapter Data" Icon="@Icons.Material.Filled.Storage" Expanded="false">
<MudNavLink Href="/students" Icon="@Icons.Material.Filled.People">Students</MudNavLink>
<MudNavLink Href="/events" Icon="@AppIcons.Events">Events</MudNavLink>
</MudNavGroup>
<AuthorizeView Roles="Administrator">
<MudDivider Class="my-2"/>
<MudNavLink Href="/settings/chapter" Icon="@Icons.Material.Filled.School">Chapter Settings</MudNavLink>
<MudNavLink Href="/settings/validation" Icon="@Icons.Material.Filled.Settings">Validation Settings</MudNavLink>
<MudNavLink Href="/settings/validation" Icon="@Icons.Material.Filled.Tune">Validation Settings</MudNavLink>
</AuthorizeView>
</MudNavMenu>
</MudPaper>