Untitled

@page "/ingredientamount"
@inject IIngredientRepository ingredientRepository
@inject IIngredientAmountRepository ingrAmountRepository

<div class="col-12">
    <div class="row">
        <div class="col-6">
            List of ingredients 
            <TableTemplate Items="ListOfIngredients">
                <TableHeader>
                    <th>Name</th>
                    <th>Kcal</th>
                    <th>Action</th>
                </TableHeader>
                <RowTemplate Context="ingredient">
                    <td>@ingredient.Name</td>
                    <td>@ingredient.Kcal</td>
                    <td>
                        <button class="btn btn-primary" @onclick="@(()=>SetTheAmount(ingredient))">Add</button>
                    </td>
                </RowTemplate>
            </TableTemplate>
        </div>
        <div class="col-6">
            List of ingredients amount
            <br />
            @if (ListOfIngredientsAmount.Any())
            {
                <TableTemplate Items="ListOfIngredientsAmount">
                    <TableHeader>
                        <th>Name</th>
                        <th>Amount</th>
                        <th>Action</th>
                    </TableHeader>
                    <RowTemplate Context="ingredient">
                        <td>@ingredient.Ingredient.Name</td>
                        <td>@ingredient.Value</td>
                        <td>
                            <button class="btn btn-primary">Delete</button>
                        </td>
                    </RowTemplate>
                </TableTemplate>
            }
        </div>
    </div>
</div>
<div class="col-12">
    <div class="form-group">
        <EditForm Model="Amount" OnValidSubmit="SaveIngredientAmount">
            <InputNumber @bind-Value="Amount.Value" />

            <button class="btn btn-primary" type="submit">Save ingredient</button>
        </EditForm>
        @if (Amount.Ingredient != null)
        {
            <p>IngredientId: @Amount.Ingredient.Id | @Amount.Ingredient.Name | @Amount.Ingredient.Kcal | @Amount.Value </p>
        }
    </div>
</div>


@code {
    public IngredientAmount Amount { get; set; } = new IngredientAmount();

    public Ingredient Ingredient { get; set; } = new Ingredient();

    public List<Ingredient> ListOfIngredients { get; set; } = new List<Ingredient>();

    public List<IngredientAmount> ListOfIngredientsAmount { get; set; } = new List<IngredientAmount>();

    protected override async Task OnInitializedAsync()
    {
        ListOfIngredients = await ingredientRepository.GetListOfIngredients();
        ListOfIngredientsAmount = await ingrAmountRepository.GetListOfIngredientAmount();
    }

    private void SetTheAmount(Ingredient ingredient)
    {
        Amount.IngredientId = ingredient.Id;
        Amount.Ingredient = ingredient;
    }

    private async Task SaveIngredientAmount()
    {
        await ingrAmountRepository.CreateIngredient(Amount);

        ListOfIngredientsAmount = await ingrAmountRepository.GetListOfIngredientAmount();
        Amount = new IngredientAmount();
    }
}