Biskilog_Accounting/Client/Pages/Product/Elements/ProductDialog.razor

@page "/products/{product}"
@using Biskilog_Accounting.Shared.CustomModels;
@using Biskilog_Accounting.Shared.Interfaces;
@inject IProduct m_productRepo
@inject ICalculator m_calculator

<RadzenCard Style="margin-bottom: 20px;">
    <div class="row" style="justify-content: end;height: 20px;display: grid;">
        <RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
            <RadzenSwitch @bind-Value="m_editMode" />
            <RadzenLabel Text="Edit Mode" />
        </RadzenStack>
    </div>
    <div class="row align-items-center" style="justify-content: center;">
        <img src="assets/img/box.png" style="width:200px;" />
    </div>
    @if (m_editMode)
    {
        <div class="row">
            <div class="col-md-6 align-items-center d-flex">
                <RadzenFieldset Text="Product Info" Style="width:100%;">
                    <div class="row">
                        <div class="col-md-4 align-items-center d-flex">
                            <RadzenLabel Text="Product Id" />
                        </div>
                        <div class="col-md-8">
                            <RadzenTextBox Disabled="true" style="width: 100%;" Name="pcode" @bind-Value=@(Product.Product!.Pcode) />
                        </div>
                    </div>
                    <div class="row" style="margin-top:5px;">
                        <div class="col-md-4 align-items-center d-flex">
                            <RadzenLabel Text="Product Name" />
                        </div>
                        <div class="col-md-8">
                            <RadzenTextBox Disabled="true" style="width: 100%;" Name="productName" @bind-Value=@(Product.Product!.ProductName) />
                        </div>
                    </div>

                    <div class="row" style="margin-top:5px;">
                        <div class="col-md-4 align-items-center d-flex">
                            <RadzenLabel Text="Description" /> <b></b>
                        </div>
                        <div class="col-md-8">
                            <RadzenTextArea Disabled="true" @bind-Value=@(Product.Product!.Pdesc) Cols="25" Rows="4" />
                        </div>
                    </div>

                </RadzenFieldset>
            </div>
            <div class="col-md-6">
                <RadzenFieldset Text="Other Units Of Measure">
                    <div class="row" style="justify-content: end;height: 20px;display: grid;">
                        <RadzenButton Icon="add_circle_outline" ButtonStyle="ButtonStyle.Light" />
                    </div>
                    <div class="row" style="margin-top:5px;">
                        <div class="col-md-6 align-items-center d-flex">
                            <RadzenLabel Text="Unit Of Measure" /> <b></b>
                        </div>
                        <div class="col-md-6 align-items-center d-flex">
                            <RadzenLabel Text="Quantity" /> <b></b>
                        </div>
                    </div>
                    @foreach (ProductUnits unit in Product.Units)
                    {
                        <div class="row" style="margin-top:5px;">
                            <div class="col-md-6 align-items-center d-flex">
                                <RadzenDropDown @bind-Value=@(unit.UnitCode) Data=@(m_productRepo.GetUnitofmeasures()) TextProperty="UnitName" ValueProperty="UnitCode" />
                            </div>
                            <div class="col-md-6 align-items-center d-flex">
                                <RadzenNumeric Placeholder="10" Step="1" @bind-Value=@(unit.QuantityUnit) />
                            </div>
                        </div>
                    }
                </RadzenFieldset>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 align-items-center d-flex">
                <RadzenFieldset Text="Base Unit" Style="width:100%;">
                    <div class="row">
                        <div class="col-md-4 align-items-center d-flex">
                            <RadzenLabel Text="Base Unit" />
                        </div>
                        <div class="col-md-8">
                            <RadzenDropDown @bind-Value=@(Product.BaseUnit) Data=@(m_productRepo.GetUnitofmeasures()) TextProperty="UnitName" ValueProperty="UnitCode" />
                        </div>
                    </div>
                </RadzenFieldset>
            </div>
            <div class="col-md-6">
                <RadzenFieldset Text="Re-order Level">
                    <div class="row">
                        <div class="col-md-6 align-items-center d-flex">
                            <RadzenLabel Text="Quantity" />
                        </div>
                        <div class="col-md-6 align-items-center d-flex">
                            <RadzenNumeric Placeholder="10" Step="1" @bind-Value=@(Product.Restocklevel!.WarnLevel) />
                        </div>
                    </div>
                    <div class="row" style="margin-top:5px;">
                        <div class="col-md-6 align-items-center d-flex">
                            <RadzenLabel Text="Unit Of Measure" />
                        </div>
                        <div class="col-md-6 align-items-center d-flex">
                            <RadzenDropDown @bind-Value=@(Product.Restocklevel!.Unit) Data=@(m_reorderUnits) TextProperty="UnitName" ValueProperty="UnitCode" />
                        </div>
                    </div>
                </RadzenFieldset>
            </div>
        </div>
        <div class="row" style="display:flex;justify-content:safe center;margin-top:10px;margin-bottom:10px;">
            <RadzenButton Text="Save" Style="width:fit-content;background-color:green;margin-right:10px;" />
            <RadzenButton Text="Cancel" Style="width:fit-content;background-color:Darkred;" />
        </div>
    }
    else
    {
        //Read Only View
        <RadzenFieldset Text="Product Info" Style="width:100%;">
            <div class="row">
                <div class="col-md-4 align-items-center d-flex">
                    <RadzenLabel Text="Product Id" />
                </div>
                <div class="col-md-8">
                    <RadzenTextBox Disabled="true" style="width: 100%;" Name="pcode" @bind-Value=@(Product.Product!.Pcode) />
                </div>
            </div>
            <div class="row" style="margin-top:5px;">
                <div class="col-md-4 align-items-center d-flex">
                    <RadzenLabel Text="Product Name" />
                </div>
                <div class="col-md-8">
                    <RadzenTextBox Disabled="true" style="width: 100%;" Name="productName" @bind-Value=@(Product.Product!.ProductName) />
                </div>
            </div>

            <div class="row" style="margin-top:5px;">
                <div class="col-md-4 align-items-center d-flex">
                    <RadzenLabel Text="Description" /> <b></b>
                </div>
                <div class="col-md-8">
                    <RadzenTextArea Disabled="true" @bind-Value=@(Product.Product!.Pdesc) Cols="45" Rows="4" />
                </div>
            </div>
            <div class="row" style="margin-top:5px;">
                <div class="col-md-4 align-items-center d-flex">
                    <RadzenLabel Text="Base Unit" /> <b></b>
                </div>
                <div class="col-md-8">
                    <RadzenTextBox Disabled="true" Value=@(m_productRepo.GetUnitName(Product.Product!.BaseUnit)) />
                </div>
            </div>
            <div class="row" style="margin-top:5px;">
                <div class="col-md-4 align-items-center d-flex">
                    <RadzenLabel Text="Quantity" /> <b></b>
                </div>
                <div class="col-md-8">
                    <RadzenNumeric Disabled="true" @bind-Value=@(Product.Stock!.Quantity) />
                </div>
            </div>
            <div class="row" style="margin-top:5px;">
                <RadzenDataGrid Data="@(Product.Units.OrderBy(t  => t.PriceUnit))" TItem="ProductUnits" GridLines="DataGridGridLines.Horizontal">
                    <Columns>
                        <RadzenDataGridColumn TItem="ProductUnits" Property="UnitCode" Title="Unit Of Measure">
                            <Template Context="detail">
                                @(m_productRepo.GetUnitName(detail.UnitCode))
                            </Template>
                        </RadzenDataGridColumn>
                        <RadzenDataGridColumn TItem="ProductUnits" Property="QuantityUnit" Title="Quantity" />
                        <RadzenDataGridColumn TItem="ProductUnits" Property="PriceUnit" Title="Price Per Unit">
                            <Template Context="detail">
                                @(m_calculator.FormatMoneyWithCurrency((double)detail.PriceUnit))
                            </Template>
                        </RadzenDataGridColumn>
                    </Columns>
                </RadzenDataGrid>
            </div>
        </RadzenFieldset>
        <div class="row" style="display:flex;justify-content:safe center;margin-top:10px;margin-bottom:10px;">
            <RadzenButton Text="Print Barcode" Style="width:fit-content;margin-right:10px;background-color:forestgreen;" />
            <RadzenButton Text="Print Tags" Style="width:fit-content;margin-right:10px;background-color:cornflowerblue;" />
            <RadzenButton Text="Add Stock" Style="width:fit-content;background-color:#435971;" />
        </div>
    }

</RadzenCard>