IGP-Fan-Reference/Pages/Dialog/GlossaryDialogComponent.razor

@implements IDisposable;
@inject IGlossaryService glossaryService
@inject IGlossaryDialogService glossaryDialogService


<div class="dialogBackground" onclick="@CloseDialog">
    <div class="dialogContainer glossaryDialog"
         @onclick:preventDefault="true"
         @onclick:stopPropagation="true">

        @if (term == null)
        {
            <div>Term is null</div>
        }
        else
        {
            <div class="dialogHeader">
                @if (glossaryDialogService.HasHistory())
                {
                    <button class="backButton" @onclick="glossaryDialogService.BackDialog">
                        <div class="backButtonIcon"></div>
                    </button>
                }
                <div class="dialogTitle">
                    @term.Term
                </div>
                <div class="glossaryDialogCategory">@term.Category</div>
            </div>
            <div class="dialogContent">
                <div class="glossaryDefinition">@((MarkupString)RenderMarkdown(term.LongDefinition))</div>

                @if (term.RelatedEntityIds.Count > 0)
                {
                    <div class="glossaryRelatedSection">
                        <div class="glossaryRelatedTitle">Related Entities</div>
                        <div class="glossaryRelatedList">
                            @foreach (var entityId in term.RelatedEntityIds)
                            {
                                <EntityLabelComponent EntityId="@entityId"/>
                            }
                        </div>
                    </div>
                }

                @if (term.RelatedTermIds.Count > 0)
                {
                    <div class="glossaryRelatedSection">
                        <div class="glossaryRelatedTitle">Related Terms</div>
                        <div class="glossaryRelatedList">
                            @foreach (var relatedId in term.RelatedTermIds)
                            {
                                <GlossaryLabelComponent TermId="@relatedId"/>
                            }
                        </div>
                    </div>
                }
            </div>
            <div class="dialogFooter"></div>
        }
    </div>

</div>

<style>


    .pageContents * {
        filter: blur(2px);
    }


    .dialogBackground {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
    }

    .dialogContainer {
        margin-left: auto;
        margin-right: auto;
        margin-top: 64px;
        width: 800px;
        height: 600px;

        background-color: var(--background);
        border-width: var(--dialog-border-width);
        border-style: solid;
        border-color: var(--dialog-border-color);
        border-radius: var(--dialog-radius);


        box-shadow: 1px 2px 2px black;

    }

    .dialogHeader {
        width: 100%;
        background-color: var(--accent);
        border-top-left-radius: var(--dialog-radius);
        border-top-right-radius: var(--dialog-radius);
        border-bottom: 4px solid black;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .backButton {
        margin-left: 16px;
        padding: 12px;

        border: 1px solid var(--accent);
    }

    .backButton:hover {
        background-color: var(--primary-hover);
        border: 1px solid var(--primary-border-hover);
    }

    .backButtonIcon {
        height: 32px;
        width: 32px;
        border: solid white;
        border-width: 0 9px 9px 0;
        transform: rotate(135deg);
    }

    .dialogTitle {
        padding: 16px;
        font-size: 2rem;
        font-weight: bold;
    }

    .dialogContent {
        flex-grow: 1;
        padding: 6px;
        overflow-y: auto;
        overflow-x: hidden;

        height: 800px;
    }

    .dialogFooter {
        width: 100%;
        height: 6px;
        background-color: var(--paper);
    }

    .glossaryDialog {
        max-width: 600px;
    }

    .glossaryDialogCategory {
        font-size: 0.8rem;
        opacity: 0.7;
        margin-left: 12px;
    }

    .glossaryDefinition {
        line-height: 1.6;
    }

    .glossaryDefinition p {
        margin-bottom: 12px;
    }

    .glossaryRelatedSection {
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px solid var(--info-secondary-border);
    }

    .glossaryRelatedTitle {
        font-weight: 800;
        font-size: 1rem;
        margin-bottom: 8px;
    }

    .glossaryRelatedList {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
</style>

@code {
    private GlossaryTermModel? term;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        glossaryDialogService.Subscribe(OnUpdate);
        LoadTerm();
    }

    void IDisposable.Dispose()
    {
        glossaryDialogService.Unsubscribe(OnUpdate);
    }

    void OnUpdate()
    {
        LoadTerm();
        StateHasChanged();
    }

    void LoadTerm()
    {
        var id = glossaryDialogService.GetTermId();
        term = id != null ? glossaryService.GetTerm(id) : null;
    }

    void CloseDialog()
    {
        glossaryDialogService.CloseDialog();
    }

    string RenderMarkdown(string text)
    {
        return Markdown.ToHtml(text);
    }

}