Moonlight/Moonlight/Shared/Views/Admin/Subscriptions/Edit.razor

@page "/admin/subscriptions/edit/{Id:int}"
@using Moonlight.App.Models.Forms
@using Moonlight.App.Models.Misc
@using Moonlight.App.Repositories
@using Moonlight.App.Services
@using Moonlight.App.Database.Entities
@using Mappy.Net

@inject NavigationManager NavigationManager
@inject SubscriptionRepository SubscriptionRepository
@inject SubscriptionService SubscriptionService

@attribute [PermissionRequired(nameof(Permissions.AdminSubscriptionEdit))]

<div class="card card-body p-10">
    <LazyLoader Load="Load">
        @if (Subscription == null)
        {
            <div class="alert alert-danger">
                No subscription with this id has been found
            </div>
        }
        else
        {
            <SmartForm Model="Model" OnValidSubmit="OnSubmit">
                <label class="form-label">
                    <TL>Name</TL>
                </label>
                <div class="input-group mb-5">
                    <InputText @bind-Value="Model.Name" class="form-control"></InputText>
                </div>
                <label class="form-label">
                    <TL>Description</TL>
                </label>
                <div class="input-group mb-5">
                    <InputTextArea @bind-Value="Model.Description" class="form-control"></InputTextArea>
                </div>
                <label class="form-label">
                    <TL>Price</TL>
                </label>
                <div class="input-group mb-5">
                    <InputNumber @bind-Value="Model.Price" class="form-control"></InputNumber>
                </div>
                <label class="form-label">
                    <TL>Currency</TL>
                </label>
                <div class="input-group mb-5">
                    <select @bind="Model.Currency" class="form-select">
                        @foreach (var currency in (Currency[])Enum.GetValues(typeof(Currency)))
                        {
                            if (Model.Currency == currency)
                            {
                                <option value="@(currency)" selected="">@(currency)</option>
                            }
                            else
                            {
                                <option value="@(currency)">@(currency)</option>
                            }
                        }
                    </select>
                </div>
                <label class="form-label">
                    <TL>Duration</TL>
                </label>
                <div class="input-group mb-5">
                    <InputNumber @bind-Value="Model.Duration" class="form-control"></InputNumber>
                </div>

                <div>
                    @foreach (var limitPart in Limits.Chunk(3))
                    {
                        <div class="row row-cols-3 mb-5">
                            @foreach (var limit in limitPart)
                            {
                                <div class="col">
                                    <div class="card card-body border">
                                        <label class="form-label">
                                            <TL>Identifier</TL>
                                        </label>
                                        <div class="input-group mb-5">
                                            <input @bind="limit.Identifier" type="text" class="form-control">
                                        </div>
                                        <label class="form-label">
                                            <TL>Amount</TL>
                                        </label>
                                        <div class="input-group mb-5">
                                            <input @bind="limit.Amount" type="number" class="form-control">
                                        </div>
                                        <div class="d-flex flex-column mb-15 fv-row">
                                            <div class="fs-5 fw-bold form-label mb-3">
                                                <TL>Options</TL>
                                            </div>
                                            <div class="table-responsive">
                                                <div class="dataTables_wrapper dt-bootstrap4 no-footer">
                                                    <div class="table-responsive">
                                                        <table class="table align-middle table-row-dashed fw-semibold fs-6 gy-5 dataTable no-footer">
                                                            <thead>
                                                            <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                                                <th class="pt-0 sorting_disabled">
                                                                    <TL>Key</TL>
                                                                </th>
                                                                <th class="pt-0 sorting_disabled">
                                                                    <TL>Value</TL>
                                                                </th>
                                                                <th class="pt-0 text-end sorting_disabled">
                                                                    <TL>Remove</TL>
                                                                </th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            @foreach (var option in limit.Options)
                                                            {
                                                                <tr class="odd">
                                                                    <td>
                                                                        <input @bind="option.Key" type="text" class="form-control form-control-solid">
                                                                    </td>
                                                                    <td>
                                                                        <input @bind="option.Value" type="text" class="form-control form-control-solid">
                                                                    </td>
                                                                    <td class="text-end">
                                                                        <button @onclick="() => limit.Options.Remove(option)" type="button" class="btn btn-icon btn-flex btn-active-light-primary w-30px h-30px me-3" data-kt-action="field_remove">
                                                                            <i class="bx bx-trash"></i>
                                                                        </button>
                                                                    </td>
                                                                </tr>
                                                            }
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start"></div>
                                                        <div class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="btn-group mt-5">
                                                <button @onclick:preventDefault @onclick="() => limit.Options.Add(new())" type="button" class="btn btn-light-primary me-auto">Add option</button>
                                                <button @onclick:preventDefault @onclick="() => Limits.Remove(limit)" class="btn btn-danger float-end">
                                                    <i class="bx bx-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            }
                        </div>
                    }
                </div>

                <div class="float-end">
                    <button @onclick:preventDefault @onclick="() => Limits.Add(new())" class="btn btn-primary">
                        <TL>Add new limit</TL>
                    </button>
                    <button type="submit" class="btn btn-success">
                        <TL>Save subscription</TL>
                    </button>
                </div>
            </SmartForm>
        }
    </LazyLoader>
</div>

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

    private Subscription? Subscription;

    private SubscriptionDataModel Model = new();
    private List<SubscriptionLimit> Limits = new();

    private async Task OnSubmit()
    {
        Subscription = Mapper.Map(Subscription, Model);
        await SubscriptionService.Update(Subscription!);

        await SubscriptionService.UpdateLimits(Subscription!, Limits.ToArray());

        NavigationManager.NavigateTo("/admin/subscriptions");
    }

    private async Task Load(LazyLoader arg)
    {
        Subscription = SubscriptionRepository
            .Get()
            .FirstOrDefault(x => x.Id == Id);

        if (Subscription != null)
        {
            Model = Mapper.Map<SubscriptionDataModel>(Subscription);

            Limits = (await SubscriptionService.GetLimits(Subscription)).ToList();
        }
    }
}