RackPeek/Shared.Rcl/Ups/UpsCardComponent.razor

@using RackPeek.Domain.Resources.Hardware.UpsUnits
@using RackPeek.Domain.Resources.Models
@using Shared.Rcl.Modals
@inject UpdateUpsUseCase UpdateUpsUseCase
@inject GetUpsUnitUseCase GetUpsUseCase
@inject DeleteUpsUseCase DeleteUseCase

<div class="border border-zinc-800 rounded p-4 bg-zinc-900">
    <div class="flex justify-between items-center mb-3">

        <div class="text-zinc-100 hover:text-emerald-300">
            <NavLink href="@($"/resources/hardware/{Ups.Name}")" class="block">
                @Ups.Name
            </NavLink>
        </div>

        <div class="flex gap-3 text-xs">
            @if (!_isEditing)
            {
                <button class="text-zinc-400 hover:text-zinc-200"
                        @onclick="BeginEdit">
                    Edit
                </button>

                <button class="text-red-400 hover:text-red-300 transition"
                        title="Delete UPS"
                        @onclick="ConfirmDelete">
                    Delete
                </button>
            }
            else
            {
                <button class="text-emerald-400 hover:text-emerald-300"
                        @onclick="Save">
                    Save
                </button>

                <button class="text-zinc-500 hover:text-zinc-300"
                        @onclick="Cancel">
                    Cancel
                </button>
            }
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">

        <!-- Model -->
        <div>
            <div class="text-zinc-400 mb-1">Model</div>
            @if (_isEditing)
            {
                <input class="input"
                       @bind="_edit.Model"/>
            }
            else if (!string.IsNullOrWhiteSpace(Ups.Model))
            {
                <div class="text-zinc-300">@Ups.Model</div>
            }
        </div>

        <!-- Capacity -->
        <div>
            <div class="text-zinc-400 mb-1">Capacity</div>
            @if (_isEditing)
            {
                <input type="number"
                       class="input"
                       @bind="_edit.Va"/>
            }
            else if (Ups.Va is not null)
            {
                <div class="text-zinc-300">@Ups.Va VA</div>
            }
        </div>
    </div>
</div>

<ConfirmModal
    IsOpen="_confirmDeleteOpen"
    IsOpenChanged="v => _confirmDeleteOpen = v"
    Title="Delete UPS"
    ConfirmText="Delete"
    ConfirmClass="bg-red-600 hover:bg-red-500"
    OnConfirm="DeleteUps">
    Are you sure you want to delete <strong>@Ups.Name</strong>?
</ConfirmModal>

@code {
    [Parameter][EditorRequired] public Ups Ups { get; set; } = default!;

    [Parameter] public EventCallback<string> OnDeleted { get; set; }

    bool _isEditing;
    bool _confirmDeleteOpen;

    UpsEditModel _edit = new();

    void BeginEdit()
    {
        _edit = UpsEditModel.From(Ups);
        _isEditing = true;
    }

    async Task Save()
    {
        _isEditing = false;

        await UpdateUpsUseCase.ExecuteAsync(
            Ups.Name,
            _edit.Model,
            _edit.Va);

        Ups = await GetUpsUseCase.ExecuteAsync(Ups.Name);
    }

    void Cancel()
    {
        _isEditing = false;
    }

    void ConfirmDelete()
    {
        _confirmDeleteOpen = true;
    }

    async Task DeleteUps()
    {
        _confirmDeleteOpen = false;

        await DeleteUseCase.ExecuteAsync(Ups.Name);

        if (OnDeleted.HasDelegate)
            await OnDeleted.InvokeAsync(Ups.Name);
    }

    public class UpsEditModel
    {
        public string? Model { get; set; }
        public int? Va { get; set; }

        public static UpsEditModel From(Ups ups)
        {
            return new UpsEditModel
            {
                Model = ups.Model,
                Va = ups.Va
            };
        }
    }

}