3900-MyRecipes-backup / Client / Pages / EditRecipe.razor
EditRecipe.razor
Raw
@page "/EditRecipe/{Id}"
@using Microsoft.AspNetCore.Authorization;
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
@using MyRecipes2.Shared;
@using System;
@using System.IO;
@using System.Text;
@inject HttpClient Http;
@inject AuthenticationStateProvider AuthenticationStateProvider;
@inject NavigationManager NavManager;

<!-- Recipe Name -->
<div class="col-md-12 col-lg-8">
    <div class="border-bottom p-1" style="margin-bottom: 1rem;">
        <div class="form-group row">
            <div class="input-group col-12">
                <input @bind="Name" class="form-control">
            </div>
            <span class="text-danger">
                @NameErrorText
            </span>
        </div>
    </div>


    <!-- Upload image input-->
    <ImageEditor @ref="imageEditor"></ImageEditor>

    <!-- Ingredients -->
    <div style="margin-bottom: 1rem; margin-top: 1rem;">
        <h2>Ingredients</h2>
    </div>
    <IngredientEditor @ref="ingredientEditor"></IngredientEditor>
    <!-- Method -->
    <div style="margin-bottom: 1rem;">
        <h2>Method</h2>
    </div>
    <MethodEditor @ref="methodEditor"></MethodEditor>

    <div style="margin-bottom: 1rem;">
        <h2>Meal Types</h2>
    </div>
    <MealTypeEditor @ref="mealTypeEditor"></MealTypeEditor>

    <button class="btn btn-success mt-2 mb-2" style="text-align:center;" @onclick="ClickUpdate">Save Changes</button>
</div>


@code {
    RecipeDto recipeDto { get; set; }

    ImageEditor imageEditor { get; set; }

    IngredientEditor ingredientEditor { get; set; }

    MethodEditor methodEditor { get; set; }

    MealTypeEditor mealTypeEditor { get; set; }

    private string Name { get; set; }

    private bool IsEditMode { get; set; }

    private string NameErrorText { get; set; }

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

    protected override async Task OnInitializedAsync()
    {
        recipeDto = await Http.GetFromJsonAsync<RecipeDto>($"Recipe/{Id}");
        imageEditor.SetImageId(recipeDto.ImageId);
        ingredientEditor.SetIngredients(recipeDto.Ingredients);
        methodEditor.SetMethodSteps(recipeDto.Method);
        mealTypeEditor.SetMealTypes(recipeDto.MealTypes);
        Name = recipeDto.Name;
    }

    protected bool IsValid()
    {
        bool result = true;
        if (string.IsNullOrWhiteSpace(Name))
        {
            NameErrorText = "Please enter a name";
            result = false;
        }

        return result;
    }

    protected async void ClickUpdate()
    {
        if (!IsValid()) return;

        CreateRecipeRequestDto request = new CreateRecipeRequestDto();
        request.Name = Name;
        request.Method = methodEditor.MethodSteps;
        request.Ingredients = ingredientEditor.Ingredients;
        request.ImageId = imageEditor.ImageId;
        request.MealTypes = mealTypeEditor.SelectedMealTypes;

        await Http.PutAsJsonAsync<CreateRecipeRequestDto>($"Recipe/{recipeDto.Id}", request);
        NavManager.NavigateTo($"ViewRecipe/{recipeDto.Id}");
    }

    protected void ClickEdit()
    {
        IsEditMode = true;
    }
}