IGP-Fan-Reference/IGP/Pages/Notes/NotesPage.razor

@layout PageLayout

@inject INoteService NoteService
@implements IDisposable

@page "/notes"


@if (!NoteService.IsLoaded())
{
    <LoadingComponent></LoadingComponent>
}
else
{
    <LayoutMediumContentComponent>
        <WebsiteTitleComponent>Notes</WebsiteTitleComponent>

        <div class="section">
            <div for="noteSection">Section: </div>
            <div style="flex: 1"></div>
            <select @oninput="OnSectionChanged" style="background-color: #36393F; width: 250px; margin-right: 16px;" name="noteSection">
                <option value="All">All</option>

            </select>
        </div>

        <div class="notesContainer">
            @foreach (var note in NoteService.NoteModels) {
                if (note.IsHidden) {
                    continue;
                }
                if (selectedSection != "All" && note.Section != selectedSection) {
                    continue;
                }
                @if (note.IsPreAlpha) {
                    <AlertComponent Type=SeverityType.Warning>
                        <Title>Pre Alpha</Title>
                        <Message>This note refers to content that is in pre-alpha. It won't be accurate in future updates to IGP.</Message>
                    </AlertComponent>
                }
                <PaperComponent>
                    <div style="display: flex; flex-direction: row;">
                        <span style="font-weight: bold; font-style:italic;">@note.Section</span>
                        <div style="flex: 1"></div>
                        <span style="font-weight: bold; font-style:italic;">Last Updated on @note.LastUpdated</span>
                    </div>
                    <div>
                        <div id="@note.DEPRECATED_Id()" style="font-weight: bold; font-size: 1.4rem;">@note.Name</div>
                        
                        <div style="white-space:break-spaces;">@((MarkupString)note.Description)</div>
                    </div>
                </PaperComponent>
            }
        </div>
    </LayoutMediumContentComponent>
   
}
<style>
    .section {
        display: flex;
        width: 500px;
        flex-direction: row;
        padding: 4px;
        border: 2px solid black;
        background-color: var(--paper);
        justify-content: center;
        padding: 24px;
        border: 4px solid var(--paper-border);
        box-shadow: 0px 6px var(--paper-border);
    }

    .notesContainer {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .noteContainer {
        padding: 24px;
        border: 2px solid black;
        margin: auto;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: var(--paper);
    }
</style>

@code {

    string selectedSection = "All";

    protected override void OnInitialized()
    {
        NoteService.Subscribe(StateHasChanged);
        
        NoteService.Load();
    }
    
    
    public void Dispose()
    {
        NoteService.Unsubscribe(StateHasChanged);

    }
    

    void OnSectionChanged(ChangeEventArgs e) {
        selectedSection = e.Value.ToString();
        StateHasChanged();
    }
}