chapter-organizer/WebApp/Components/Features/Events/Details.razor

@page "/events/details"
@attribute [Authorize]
@using Microsoft.EntityFrameworkCore
@using WebApp.Components.Shared.Components
@inject AppDbContext context
@inject NavigationManager NavigationManager
@inject IJSRuntime JSRuntime

@if (eventdefinition is null)
{
    <MudText><em>Loading...</em></MudText>
    return;
}

<PageHeader
    Title="Details"
    Subtitle="Event Definition"
    ShowBackButton="true"
    BackButtonUrl="@(ReturnUrl ?? "/events")">
    <ActionButtons>
        <div class="no-print">
            <MudButton StartIcon="@Icons.Material.Filled.Print"
                       OnClick="PrintPage"
                       Variant="Variant.Outlined">Print</MudButton>
            <MudButton StartIcon="@Icons.Material.Filled.Edit" Href="@($"/events/edit?id={eventdefinition.Id}")" Variant="Variant.Outlined">Edit</MudButton>
        </div>
    </ActionButtons>
</PageHeader>

<MudPaper Elevation="2" Class="pa-3 pa-md-6">
    <MudText Typo="Typo.h5" Class="mb-4">Basic Information</MudText>
    <MudGrid Spacing="3">
        <MudItem xs="12" sm="6" md="4">
            <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Name</MudText>
            <MudText Typo="Typo.body1">@eventdefinition.Name</MudText>
        </MudItem>
        <MudItem xs="12" sm="6" md="4">
            <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Short Name</MudText>
            <MudText Typo="Typo.body1">@eventdefinition.ShortName</MudText>
        </MudItem>
        <MudItem xs="12" sm="6" md="4">
            <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Event Format</MudText>
            <MudText Typo="Typo.body1">@eventdefinition.EventFormat</MudText>
        </MudItem>
        <MudItem xs="12" sm="6" md="4">
            <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Min Team Size</MudText>
            <MudText Typo="Typo.body1">@eventdefinition.MinTeamSize</MudText>
        </MudItem>
        <MudItem xs="12" sm="6" md="4">
            <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Max Team Size</MudText>
            <MudText Typo="Typo.body1">@eventdefinition.MaxTeamSize</MudText>
        </MudItem>
        <MudItem xs="12" sm="6" md="4">
            <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Level of Effort</MudText>
            <MudText Typo="Typo.body1">@eventdefinition.LevelOfEffort</MudText>
        </MudItem>
    </MudGrid>

    <MudDivider Class="my-6" />

    <MudText Typo="Typo.h5" Class="mb-4">Competition Details</MudText>
    <MudGrid Spacing="3">
        <MudItem xs="12" sm="6" md="4">
            <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Chapter Eligibility Count (State)</MudText>
            <MudText Typo="Typo.body1">@eventdefinition.ChapterEligibilityCountState</MudText>
        </MudItem>
        <MudItem xs="12" sm="6" md="4">
            <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Regional Event</MudText>
            <MudText Typo="Typo.body1">@eventdefinition.RegionalEvent</MudText>
        </MudItem>
        <MudItem xs="12" sm="6" md="4">
            <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Presubmission Required</MudText>
            <MudText Typo="Typo.body1">@eventdefinition.Presubmission</MudText>
        </MudItem>
        <MudItem xs="12">
            <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Semifinalist Activity</MudText>
            <MudText Typo="Typo.body1">@eventdefinition.SemifinalistActivity</MudText>
        </MudItem>
    </MudGrid>

    <MudDivider Class="my-6" />

    <MudText Typo="Typo.h5" Class="mb-4">Additional Information</MudText>
    <MudGrid Spacing="3">
        <MudItem xs="12">
            <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Eligibility</MudText>
            <MudText Typo="Typo.body1">@eventdefinition.Eligibility</MudText>
        </MudItem>
        <MudItem xs="12">
            <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Theme</MudText>
            <MudText Typo="Typo.body1">@eventdefinition.Theme</MudText>
        </MudItem>
        <MudItem xs="12">
            <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Description</MudText>
            <MudText Typo="Typo.body1">@eventdefinition.Description</MudText>
        </MudItem>
        <MudItem xs="12">
            <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Documentation</MudText>
            <MudText Typo="Typo.body1">@eventdefinition.Documentation</MudText>
        </MudItem>
        <MudItem xs="12">
            <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Notes</MudText>
            <MudText Typo="Typo.body1">@eventdefinition.Notes</MudText>
        </MudItem>
        <MudItem xs="12">
            <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Related Careers</MudText>
            @if (eventdefinition.RelatedCareers?.Any() == true)
            {
                <ul style="margin-top: 8px; padding-left: 20px;">
                    @foreach (var career in eventdefinition.RelatedCareers.OrderBy(c => c.Name))
                    {
                        <li style="margin-bottom: 4px;"><MudText Typo="Typo.body1">@career.Name</MudText></li>
                    }
                </ul>
            }
            else
            {
                <MudText Typo="Typo.body1" Class="mud-text-secondary">None</MudText>
            }
        </MudItem>
    </MudGrid>
</MudPaper>

@code {
    private EventDefinition? eventdefinition;

    [SupplyParameterFromQuery]
    private int Id { get; set; }

    [SupplyParameterFromQuery]
    private string? ReturnUrl { get; set; }

    protected override async Task OnInitializedAsync()
    {
        eventdefinition = await context.Events
            .Include(e => e.RelatedCareers)
            .FirstOrDefaultAsync(m => m.Id == Id);

        if (eventdefinition is null)
        {
            NavigationManager.NavigateTo("notfound");
        }
    }

    private async Task PrintPage()
    {
        await JSRuntime.InvokeVoidAsync("window.print");
    }
}