blazor-calendar/BlazorApp/Pages/Event.razor

@page "/calendars/{calendarId:int}/events/{eventUid}"
@using System.Globalization
@inject Data.CalendarService _calendarService
@inject NavigationManager _navigationManager

<a href="/calendars/@CalendarId">
    <span class="oi oi-arrow-left"></span> Back
</a>

@if (_event == null)
{
    <p>
        <em>@(_notFound ? "Event not found" : "Loading...")</em>
    </p>
}
else
{
    <h1>Event</h1>

    <div>
        <strong>Summary: </strong>
        @if (_editing != Editing.Summary)
        {
            <span class="property-editable" @onclick="() => _editing = Editing.Summary">
                @_event.Summary
            </span>
        }
        else
        {
            <div>
                <input @bind="@_event.Summary"/>
                <button @onclick="UpdateEvent">Save</button>
            </div>
        }
    </div>

    <div>
        <strong>Start: </strong>
        @if (_editing != Editing.DtStart)
        {
            <span class="property-editable" @onclick="() => _editing = Editing.DtStart">
                @(_event.DtStart?.ToString(DtFormat) ?? "Unknown")
            </span>
        }
        else
        {
            <input @bind="@_event.DtStart" @bind:format="@DtFormat"/>
            <button @onclick="UpdateEvent">Save</button>
        }
    </div>

    <div>
        <strong>End: </strong>
        @if (_editing != Editing.CalculatedEnd)
        {
            <span class="property-editable" @onclick="() => _editing = Editing.CalculatedEnd">
                @(_event.CalculatedEnd?.ToString(DtFormat) ?? "Unknown")
            </span>
        }
        else
        {
            <input @bind="@_event.CalculatedEnd" @bind:format="@DtFormat"/>
            <button @onclick="UpdateEvent">Save</button>
        }
    </div>

    @if (_editing != Editing.Description)
    {
        <p class="event-description" @onclick="() => _editing = Editing.Description">
            @(_event.Description ?? "No description")
        </p>
    }
    else
    {
        <div>
            <textarea rows="30" cols="100" @bind="@_event.Description"></textarea>
            <button @onclick="UpdateEvent">Save</button>
        </div>
    }

    @if (!_confirmDelete)
    {
        <button class="btn btn-outline-danger" @onclick="DeleteEvent">Delete</button>
    }
    else
    {
        <button class="btn btn-danger" @onclick="DeleteEvent">Are you sure?</button>
    }
}

@code
{
    [Parameter]
    public int CalendarId { get; set; }

    [Parameter]
    public string EventUid { get; set; }

        const string DtFormat = "dd-MM-yyyy HH:mm:ss";

    private Data.Calendar _calendar;
    private Data.Event _event;

    private bool _notFound;
    private bool _confirmDelete;

    private enum Editing
    {
        Summary,
        DtStart,
        CalculatedEnd,
        Description,
    }

    private Editing? _editing;

    protected override async Task OnInitializedAsync()
    {
        _calendar = await Data.CalendarService.GetCalendarById(CalendarId);
        _event = await _calendar.GetEventByUid(EventUid);
        _notFound = _event == null;
    }

    private async Task UpdateEvent()
    {
        _event = await _calendar.UpdateEvent(_event);
        _editing = null;
    }

    private async Task DeleteEvent()
    {
        if (!_confirmDelete)
        {
            _confirmDelete = true;
            await Task.Delay(2000);
        }
        else
        {
            await _calendar.DeleteEvent(_event);
            _navigationManager.NavigateTo($"/calendars/{CalendarId}");
        }

        _confirmDelete = false;
    }
}