Made reusable PokemonForm to replace Add/Edit forms. Also, renamed Download button to better fit the schema. Plus additional decorative changes.
This commit is contained in:
Kira Jiroux
parent
d977e08650
commit
286b913832
|
|
@ -0,0 +1,12 @@
|
||||||
|
using Microsoft.AspNetCore.Components;
|
||||||
|
|
||||||
|
namespace Portfolio.WebUI.Server.Components.Component
|
||||||
|
{
|
||||||
|
public partial class Loading
|
||||||
|
{
|
||||||
|
[Parameter]
|
||||||
|
public string LoadingString { get; set; }
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,152 +0,0 @@
|
||||||
@inject IPokemonService PokemonService
|
|
||||||
|
|
||||||
|
|
||||||
<div class="create-container m-auto bg-info border border-5 border-info-subtle rounded-4 p-3">
|
|
||||||
<EditForm class="col" Model="NewPokemon">
|
|
||||||
<DataAnnotationsValidator />
|
|
||||||
|
|
||||||
<div class="bg-primary-subtle rounded"><p class="fs-3 fw-light text-center card-title">New Pokemon</p></div>
|
|
||||||
|
|
||||||
<!-- Pokemon Number and Name -->
|
|
||||||
<div class="row mt-1">
|
|
||||||
<div class="col input-group mb-2">
|
|
||||||
<span class="input-group-text text-sm-center rounded-start">#</span>
|
|
||||||
<InputNumber min="1"
|
|
||||||
placeholder="Pokedex #"
|
|
||||||
id="PokemonId"
|
|
||||||
@bind-Value="NewPokemon.PokemonId"
|
|
||||||
class="form-control "
|
|
||||||
type="number" />
|
|
||||||
<InputText placeholder="Pokemon Name"
|
|
||||||
id="PokemonName"
|
|
||||||
@bind-Value="NewPokemon.PokemonName"
|
|
||||||
class="form-control w-50 rounded-end" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Variation Check -->
|
|
||||||
<div class="d-flex flex-row justify-content-start input-group ">
|
|
||||||
<InputCheckbox id="IsVariation"
|
|
||||||
@bind-Value="NewPokemon.IsVariation"
|
|
||||||
@onclick="@Toggle"
|
|
||||||
class="form-check-input p-3 rounded" />
|
|
||||||
<span class="input-group-text ms-1 @GetRoundingClass()">Variation?</span>
|
|
||||||
<InputText placeholder="How So?"
|
|
||||||
id="VariationName"
|
|
||||||
@bind-Value="NewPokemon.VariationName"
|
|
||||||
class="form-control rounded-end"
|
|
||||||
hidden="@HideLabel" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- <br> -->
|
|
||||||
<div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
|
|
||||||
|
|
||||||
<!-- Pokemon Type -->
|
|
||||||
<div class="row mb-2">
|
|
||||||
<div class="input-group m-auto">
|
|
||||||
<span for="PokemonType" class="input-group-text rounded-start">Pokemon Type</span>
|
|
||||||
<InputSelect id="PokemonType" @bind-Value="NewPokemon.PokemonType" class="form-select rounded-end">
|
|
||||||
<option disabled value="" selected>Select...</option>
|
|
||||||
@foreach (var pt in PokemonTypes)
|
|
||||||
{
|
|
||||||
<option value="@pt">@pt</option>
|
|
||||||
}
|
|
||||||
</InputSelect>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pokemon Sleep Type, Specialty -->
|
|
||||||
<div class="row mb-3 mx-0">
|
|
||||||
<!-- Sleep Type -->
|
|
||||||
<div class="col ps-0 pe-1">
|
|
||||||
<div class="row input-group m-auto">
|
|
||||||
<span for="SleepType" class="input-group-text rounded-top">Sleep Type</span>
|
|
||||||
</div>
|
|
||||||
<div class="row input-group m-auto">
|
|
||||||
<InputSelect id="SleepType" @bind-Value="NewPokemon.SleepType" class="form-select rounded-bottom">
|
|
||||||
<option disabled value="" selected>Select...</option>
|
|
||||||
@foreach (var st in SleepTypes)
|
|
||||||
{
|
|
||||||
<option value="@st">@st</option>
|
|
||||||
}
|
|
||||||
</InputSelect>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Speciality -->
|
|
||||||
<div class="col ps-1 pe-0">
|
|
||||||
<div class="row input-group m-auto">
|
|
||||||
<span for="Speciality" class="input-group-text rounded-top">Specialty</span>
|
|
||||||
</div>
|
|
||||||
<div class="row input-group m-auto">
|
|
||||||
<InputSelect id="Speciality" @bind-Value="NewPokemon.Speciality" class="form-select rounded-bottom">
|
|
||||||
<option disabled value="" selected>Select...</option>
|
|
||||||
@foreach (var sp in Specialities)
|
|
||||||
{
|
|
||||||
<option value="@sp">@sp</option>
|
|
||||||
}
|
|
||||||
</InputSelect>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- <br> -->
|
|
||||||
<div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
|
|
||||||
|
|
||||||
<!-- Images -->
|
|
||||||
<div class="row mb-2">
|
|
||||||
<div class="input-group m-auto">
|
|
||||||
<span for="ImageUrl" class="input-group-text rounded-start">Base Image URL</span>
|
|
||||||
<InputText id="ImageUrl" @bind-Value="NewPokemon.PokemonImageUrl" class="form-control rounded-end" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row mb-2">
|
|
||||||
<div class="input-group m-auto">
|
|
||||||
<span for="ShinyImageUrl" class="input-group-text rounded-start">Shiny Image URL</span>
|
|
||||||
<InputText id="ShinyImageUrl" @bind-Value="NewPokemon.PokemonShinyImageUrl" class="form-control rounded-end" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Flavor -->
|
|
||||||
<div class="row mb-2">
|
|
||||||
<div class="input-group m-auto">
|
|
||||||
<span for="FlavorText" class="input-group-text rounded-start">Flavor Text</span>
|
|
||||||
<InputText id="FlavorText" @bind-Value="NewPokemon.FlavorText" class="form-control rounded-end" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- <br> -->
|
|
||||||
<div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
|
|
||||||
|
|
||||||
@if (showErrors && !IsComplete)
|
|
||||||
{
|
|
||||||
<div class="alert alert-warning mt-2">
|
|
||||||
Please complete: @string.Join(", ", MissingFields())
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
<div class="d-flex mt-3 justify-content-center gap-3">
|
|
||||||
<button type="button"
|
|
||||||
class="btn btn-primary rounded p-1 px-0"
|
|
||||||
@onclick="@SendPokemon"
|
|
||||||
disabled="@( !IsComplete )">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-arrow-up" viewBox="0 0 16 16">
|
|
||||||
<path d="M8 11a.5.5 0 0 0 .5-.5V6.707l1.146 1.147a.5.5 0 0 0 .708-.708l-2-2a.5.5 0 0 0-.708 0l-2 2a.5.5 0 1 0 .708.708L7.5 6.707V10.5a.5.5 0 0 0 .5.5" />
|
|
||||||
<path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
@if(mostRecentForm)
|
|
||||||
{
|
|
||||||
<button type="button"
|
|
||||||
class="btn btn-danger rounded p-1 px-0"
|
|
||||||
@onclick="@HandleRemove">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-minus" viewBox="0 0 16 16">
|
|
||||||
<path d="M5.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5" />
|
|
||||||
<path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</EditForm>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
@ -1,101 +0,0 @@
|
||||||
using Microsoft.AspNetCore.Components;
|
|
||||||
using Microsoft.AspNetCore.Components.Web;
|
|
||||||
using Microsoft.EntityFrameworkCore.Metadata.Internal;
|
|
||||||
using Portfolio.Application.Services.PokemonService;
|
|
||||||
using Portfolio.Domain.Features.Pokemon;
|
|
||||||
|
|
||||||
namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
|
||||||
{
|
|
||||||
public partial class PokemonAddForm
|
|
||||||
{
|
|
||||||
[Parameter]
|
|
||||||
public EventCallback<Pokemon> OnPokemonReady { get; set; }
|
|
||||||
[Parameter]
|
|
||||||
public EventCallback RemoveForm { get; set; }
|
|
||||||
[Parameter]
|
|
||||||
public bool mostRecentForm { get; set; }
|
|
||||||
|
|
||||||
protected static readonly string[] PokemonTypes = new[]
|
|
||||||
{
|
|
||||||
"Grass","Fire","Water","Normal","Flying","Bug","Poison","Electric","Ground","Rock","Ice",
|
|
||||||
"Steel","Fighting","Psychic","Dark","Fairy","Ghost","Dragon"
|
|
||||||
};
|
|
||||||
protected static readonly string[] SleepTypes = new[] { "Dozing", "Snoozing", "Slumbering" };
|
|
||||||
protected static readonly string[] Specialities = new[] { "Berries", "Ingredients", "Skills", "All" };
|
|
||||||
|
|
||||||
|
|
||||||
private bool HideLabel { get; set; } = true;
|
|
||||||
private bool showErrors { get; set; } = false;
|
|
||||||
|
|
||||||
private Pokemon NewPokemon = new Pokemon
|
|
||||||
{
|
|
||||||
PokemonId = 0, // Or any default ID logic
|
|
||||||
PokemonName = string.Empty, // Required fields cannot be null
|
|
||||||
SleepType = string.Empty,
|
|
||||||
Speciality = string.Empty,
|
|
||||||
IsVariation = false
|
|
||||||
};
|
|
||||||
|
|
||||||
private void Toggle() => HideLabel = !HideLabel;
|
|
||||||
|
|
||||||
|
|
||||||
private string GetRoundingClass()
|
|
||||||
{
|
|
||||||
if (!HideLabel) {
|
|
||||||
return "rounded-start";
|
|
||||||
}
|
|
||||||
return "rounded-start rounded-end";
|
|
||||||
}
|
|
||||||
|
|
||||||
// Minimal "complete" check (no data annotations needed)
|
|
||||||
private bool IsComplete =>
|
|
||||||
NewPokemon.PokemonId > 0 &&
|
|
||||||
!string.IsNullOrWhiteSpace(NewPokemon.PokemonName) &&
|
|
||||||
!string.IsNullOrWhiteSpace(NewPokemon.PokemonType) &&
|
|
||||||
!string.IsNullOrWhiteSpace(NewPokemon.SleepType) &&
|
|
||||||
!string.IsNullOrWhiteSpace(NewPokemon.Speciality) &&
|
|
||||||
(!NewPokemon.IsVariation || !string.IsNullOrWhiteSpace(NewPokemon.VariationName));
|
|
||||||
|
|
||||||
private IEnumerable<string> MissingFields()
|
|
||||||
{
|
|
||||||
if (NewPokemon.PokemonId <= 0) yield return "Pokédex #";
|
|
||||||
if (string.IsNullOrWhiteSpace(NewPokemon.PokemonName)) yield return "Name";
|
|
||||||
if (string.IsNullOrWhiteSpace(NewPokemon.PokemonType)) yield return "Type";
|
|
||||||
if (string.IsNullOrWhiteSpace(NewPokemon.SleepType)) yield return "Sleep Type";
|
|
||||||
if (string.IsNullOrWhiteSpace(NewPokemon.Speciality)) yield return "Specialty";
|
|
||||||
if (NewPokemon.IsVariation && string.IsNullOrWhiteSpace(NewPokemon.VariationName)) yield return "Variation Name";
|
|
||||||
}
|
|
||||||
|
|
||||||
private async Task HandleRemove()
|
|
||||||
{
|
|
||||||
await RemoveForm.InvokeAsync();
|
|
||||||
}
|
|
||||||
|
|
||||||
private async Task SendPokemon()
|
|
||||||
{
|
|
||||||
if (!IsComplete)
|
|
||||||
{
|
|
||||||
showErrors = true;
|
|
||||||
StateHasChanged();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Optionally send a copy to avoid later mutation by the child
|
|
||||||
var copy = new Pokemon
|
|
||||||
{
|
|
||||||
PokemonId = NewPokemon.PokemonId,
|
|
||||||
PokemonName = NewPokemon.PokemonName,
|
|
||||||
PokemonType = NewPokemon.PokemonType,
|
|
||||||
SleepType = NewPokemon.SleepType,
|
|
||||||
Speciality = NewPokemon.Speciality,
|
|
||||||
IsVariation = NewPokemon.IsVariation,
|
|
||||||
VariationName = NewPokemon.VariationName,
|
|
||||||
PokemonImageUrl = NewPokemon.PokemonImageUrl,
|
|
||||||
PokemonShinyImageUrl = NewPokemon.PokemonShinyImageUrl,
|
|
||||||
FlavorText = NewPokemon.FlavorText
|
|
||||||
};
|
|
||||||
|
|
||||||
await OnPokemonReady.InvokeAsync(copy);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -5,7 +5,7 @@ using System.Text.Json;
|
||||||
|
|
||||||
namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
||||||
{
|
{
|
||||||
partial class PokemonDownload
|
partial class PokemonDownloadButton
|
||||||
{
|
{
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public List<Pokemon> _Pokemon { get; set; }
|
public List<Pokemon> _Pokemon { get; set; }
|
||||||
|
|
@ -0,0 +1,306 @@
|
||||||
|
@inject IPokemonService PokemonService
|
||||||
|
|
||||||
|
@if(formUse == "ADD")
|
||||||
|
{
|
||||||
|
<div class="pokemon-form-container m-auto bg-info border border-5 border-info-subtle rounded-4 p-3">
|
||||||
|
<EditForm class="col" Model="NewPokemon">
|
||||||
|
<DataAnnotationsValidator />
|
||||||
|
|
||||||
|
<div class="bg-primary-subtle rounded"><p class="fs-3 fw-light text-center card-title">New Pokemon</p></div>
|
||||||
|
|
||||||
|
<!-- Pokemon Number and Name -->
|
||||||
|
<div class="row mt-1">
|
||||||
|
<div class="col input-group mb-2">
|
||||||
|
<span class="input-group-text text-sm-center rounded-start">#</span>
|
||||||
|
<InputNumber min="1"
|
||||||
|
placeholder="Pokedex #"
|
||||||
|
id="PokemonId"
|
||||||
|
@bind-Value="NewPokemon.PokemonId"
|
||||||
|
class="form-control "
|
||||||
|
type="number" />
|
||||||
|
<InputText placeholder="Pokemon Name"
|
||||||
|
id="PokemonName"
|
||||||
|
@bind-Value="NewPokemon.PokemonName"
|
||||||
|
class="form-control w-50 rounded-end" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Variation Check -->
|
||||||
|
<div class="d-flex flex-row justify-content-start input-group ">
|
||||||
|
<InputCheckbox id="IsVariation"
|
||||||
|
@bind-Value="NewPokemon.IsVariation"
|
||||||
|
@onclick="@Toggle"
|
||||||
|
class="form-check-input p-3 rounded" />
|
||||||
|
<span class="input-group-text ms-1 @GetRoundingClass()">Variation?</span>
|
||||||
|
<InputText placeholder="How So?"
|
||||||
|
id="VariationName"
|
||||||
|
@bind-Value="NewPokemon.VariationName"
|
||||||
|
class="form-control rounded-end"
|
||||||
|
hidden="@HideLabel" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <br> -->
|
||||||
|
<div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
|
||||||
|
|
||||||
|
<!-- Pokemon Type -->
|
||||||
|
<div class="row mb-2">
|
||||||
|
<div class="input-group m-auto">
|
||||||
|
<span for="PokemonType" class="input-group-text rounded-start">Pokemon Type</span>
|
||||||
|
<InputSelect id="PokemonType" @bind-Value="NewPokemon.PokemonType" class="form-select rounded-end">
|
||||||
|
<option disabled value="" selected>Select...</option>
|
||||||
|
@foreach (var pt in PokemonTypes)
|
||||||
|
{
|
||||||
|
<option value="@pt">@pt</option>
|
||||||
|
}
|
||||||
|
</InputSelect>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pokemon Sleep Type, Specialty -->
|
||||||
|
<div class="row mb-3 mx-0">
|
||||||
|
<!-- Sleep Type -->
|
||||||
|
<div class="col ps-0 pe-1">
|
||||||
|
<div class="row input-group m-auto">
|
||||||
|
<span for="SleepType" class="input-group-text rounded-top">Sleep Type</span>
|
||||||
|
</div>
|
||||||
|
<div class="row input-group m-auto">
|
||||||
|
<InputSelect id="SleepType" @bind-Value="NewPokemon.SleepType" class="form-select rounded-bottom">
|
||||||
|
<option disabled value="" selected>Select...</option>
|
||||||
|
@foreach (var st in SleepTypes)
|
||||||
|
{
|
||||||
|
<option value="@st">@st</option>
|
||||||
|
}
|
||||||
|
</InputSelect>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Speciality -->
|
||||||
|
<div class="col ps-1 pe-0">
|
||||||
|
<div class="row input-group m-auto">
|
||||||
|
<span for="Speciality" class="input-group-text rounded-top">Specialty</span>
|
||||||
|
</div>
|
||||||
|
<div class="row input-group m-auto">
|
||||||
|
<InputSelect id="Speciality" @bind-Value="NewPokemon.Speciality" class="form-select rounded-bottom">
|
||||||
|
<option disabled value="" selected>Select...</option>
|
||||||
|
@foreach (var sp in Specialities)
|
||||||
|
{
|
||||||
|
<option value="@sp">@sp</option>
|
||||||
|
}
|
||||||
|
</InputSelect>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <br> -->
|
||||||
|
<div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
|
||||||
|
|
||||||
|
<!-- Images -->
|
||||||
|
<div class="row mb-2">
|
||||||
|
<div class="input-group m-auto">
|
||||||
|
<span for="ImageUrl" class="input-group-text rounded-start">Base Image URL</span>
|
||||||
|
<InputText id="ImageUrl" @bind-Value="NewPokemon.PokemonImageUrl" class="form-control rounded-end" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row mb-2">
|
||||||
|
<div class="input-group m-auto">
|
||||||
|
<span for="ShinyImageUrl" class="input-group-text rounded-start">Shiny Image URL</span>
|
||||||
|
<InputText id="ShinyImageUrl" @bind-Value="NewPokemon.PokemonShinyImageUrl" class="form-control rounded-end" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Flavor -->
|
||||||
|
<div class="row mb-2">
|
||||||
|
<div class="input-group m-auto">
|
||||||
|
<span for="FlavorText" class="input-group-text rounded-start">Flavor Text</span>
|
||||||
|
<InputText id="FlavorText" @bind-Value="NewPokemon.FlavorText" class="form-control rounded-end" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <br> -->
|
||||||
|
<div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
|
||||||
|
|
||||||
|
@if (showErrors && !IsComplete)
|
||||||
|
{
|
||||||
|
<div class="alert alert-warning mt-2">
|
||||||
|
Please complete: @string.Join(", ", MissingFields())
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div class="d-flex mt-3 justify-content-center gap-3">
|
||||||
|
<button type="button"
|
||||||
|
class="btn btn-primary rounded p-1 px-0"
|
||||||
|
@onclick="@SendPokemon"
|
||||||
|
disabled="@( !IsComplete )">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-arrow-up" viewBox="0 0 16 16">
|
||||||
|
<path d="M8 11a.5.5 0 0 0 .5-.5V6.707l1.146 1.147a.5.5 0 0 0 .708-.708l-2-2a.5.5 0 0 0-.708 0l-2 2a.5.5 0 1 0 .708.708L7.5 6.707V10.5a.5.5 0 0 0 .5.5" />
|
||||||
|
<path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
@if (mostRecentForm)
|
||||||
|
{
|
||||||
|
<button type="button"
|
||||||
|
class="btn btn-danger rounded p-1 px-0"
|
||||||
|
@onclick="@HandleRemove">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-minus" viewBox="0 0 16 16">
|
||||||
|
<path d="M5.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5" />
|
||||||
|
<path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</EditForm>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
}
|
||||||
|
else if (formUse == "EDIT")
|
||||||
|
{
|
||||||
|
<div class="pokemon-form-container m-auto bg-info border border-5 border-info-subtle rounded-4 p-3">
|
||||||
|
<EditForm class="col" Model="PokemonToEdit">
|
||||||
|
<DataAnnotationsValidator />
|
||||||
|
|
||||||
|
<div class="bg-primary-subtle rounded"><p class="fs-3 fw-light text-center card-title">Edit Pokemon</p></div>
|
||||||
|
|
||||||
|
<!-- Pokemon Number and Name -->
|
||||||
|
<div class="row mt-1">
|
||||||
|
<div class="col input-group mb-2">
|
||||||
|
<span class="input-group-text text-sm-center rounded-start">#</span>
|
||||||
|
<InputNumber min="1"
|
||||||
|
placeholder="Pokedex #"
|
||||||
|
id="PokemonId"
|
||||||
|
@bind-Value="PokemonToEdit.PokemonId"
|
||||||
|
class="form-control "
|
||||||
|
type="number" />
|
||||||
|
<InputText placeholder="Pokemon Name"
|
||||||
|
id="PokemonName"
|
||||||
|
@bind-Value="PokemonToEdit.PokemonName"
|
||||||
|
class="form-control w-50 rounded-end" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Variation Check -->
|
||||||
|
<div class="d-flex flex-row justify-content-start input-group ">
|
||||||
|
<InputCheckbox id="IsVariation"
|
||||||
|
@bind-Value="PokemonToEdit.IsVariation"
|
||||||
|
@onclick="@Toggle"
|
||||||
|
class="form-check-input p-3 rounded" />
|
||||||
|
<span class="input-group-text ms-1 @GetRoundingClass()">Variation?</span>
|
||||||
|
<InputText placeholder="How So?"
|
||||||
|
id="VariationName"
|
||||||
|
@bind-Value="PokemonToEdit.VariationName"
|
||||||
|
class="form-control rounded-end"
|
||||||
|
hidden="@HideLabel" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <br> -->
|
||||||
|
<div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
|
||||||
|
|
||||||
|
<!-- Pokemon Type -->
|
||||||
|
<div class="row mb-2">
|
||||||
|
<div class="input-group m-auto">
|
||||||
|
<span for="PokemonType" class="input-group-text rounded-start">Pokemon Type</span>
|
||||||
|
<InputSelect id="PokemonType" @bind-Value="PokemonToEdit.PokemonType" class="form-select rounded-end">
|
||||||
|
<option disabled value="" selected>Select...</option>
|
||||||
|
@foreach (var pt in PokemonTypes)
|
||||||
|
{
|
||||||
|
<option value="@pt">@pt</option>
|
||||||
|
}
|
||||||
|
</InputSelect>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pokemon Sleep Type, Specialty -->
|
||||||
|
<div class="row mb-3 mx-0">
|
||||||
|
<!-- Sleep Type -->
|
||||||
|
<div class="col ps-0 pe-1">
|
||||||
|
<div class="row input-group m-auto">
|
||||||
|
<span for="SleepType" class="input-group-text rounded-top">Sleep Type</span>
|
||||||
|
</div>
|
||||||
|
<div class="row input-group m-auto">
|
||||||
|
<InputSelect id="SleepType" @bind-Value="PokemonToEdit.SleepType" class="form-select rounded-bottom">
|
||||||
|
<option disabled value="" selected>Select...</option>
|
||||||
|
@foreach (var st in SleepTypes)
|
||||||
|
{
|
||||||
|
<option value="@st">@st</option>
|
||||||
|
}
|
||||||
|
</InputSelect>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Speciality -->
|
||||||
|
<div class="col ps-1 pe-0">
|
||||||
|
<div class="row input-group m-auto">
|
||||||
|
<span for="Speciality" class="input-group-text rounded-top">Specialty</span>
|
||||||
|
</div>
|
||||||
|
<div class="row input-group m-auto">
|
||||||
|
<InputSelect id="Speciality" @bind-Value="PokemonToEdit.Speciality" class="form-select rounded-bottom">
|
||||||
|
<option disabled value="" selected>Select...</option>
|
||||||
|
@foreach (var sp in Specialities)
|
||||||
|
{
|
||||||
|
<option value="@sp">@sp</option>
|
||||||
|
}
|
||||||
|
</InputSelect>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <br> -->
|
||||||
|
<div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
|
||||||
|
|
||||||
|
<!-- Images -->
|
||||||
|
<div class="row mb-2">
|
||||||
|
<div class="input-group m-auto">
|
||||||
|
<span for="ImageUrl" class="input-group-text rounded-start">Base Image URL</span>
|
||||||
|
<InputText id="ImageUrl" @bind-Value="PokemonToEdit.PokemonImageUrl" class="form-control rounded-end" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row mb-2">
|
||||||
|
<div class="input-group m-auto">
|
||||||
|
<span for="ShinyImageUrl" class="input-group-text rounded-start">Shiny Image URL</span>
|
||||||
|
<InputText id="ShinyImageUrl" @bind-Value="PokemonToEdit.PokemonShinyImageUrl" class="form-control rounded-end" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Flavor -->
|
||||||
|
<div class="row mb-2">
|
||||||
|
<div class="input-group m-auto">
|
||||||
|
<span for="FlavorText" class="input-group-text rounded-start">Flavor Text</span>
|
||||||
|
<InputText id="FlavorText" @bind-Value="PokemonToEdit.FlavorText" class="form-control rounded-end" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <br> -->
|
||||||
|
<div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
|
||||||
|
|
||||||
|
@if (showErrors && !IsComplete)
|
||||||
|
{
|
||||||
|
<div class="alert alert-warning mt-2">
|
||||||
|
Please complete: @string.Join(", ", MissingFields())
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div class="d-flex mt-3 justify-content-center gap-3">
|
||||||
|
<button type="button"
|
||||||
|
class="btn btn-success rounded p-1 px-0"
|
||||||
|
@onclick="@SendPokemon"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-arrow-up" viewBox="0 0 16 16">
|
||||||
|
<path d="M8 11a.5.5 0 0 0 .5-.5V6.707l1.146 1.147a.5.5 0 0 0 .708-.708l-2-2a.5.5 0 0 0-.708 0l-2 2a.5.5 0 1 0 .708.708L7.5 6.707V10.5a.5.5 0 0 0 .5.5" />
|
||||||
|
<path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
@if (mostRecentForm)
|
||||||
|
{
|
||||||
|
<button type="button"
|
||||||
|
class="btn btn-warning rounded p-1 px-0"
|
||||||
|
@onclick="@HandleRemove">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-earmark-easel" viewBox="0 0 16 16">
|
||||||
|
<path d="M8.5 6a.5.5 0 1 0-1 0h-2A1.5 1.5 0 0 0 4 7.5v2A1.5 1.5 0 0 0 5.5 11h.473l-.447 1.342a.5.5 0 1 0 .948.316L7.027 11H7.5v1a.5.5 0 0 0 1 0v-1h.473l.553 1.658a.5.5 0 1 0 .948-.316L10.027 11h.473A1.5 1.5 0 0 0 12 9.5v-2A1.5 1.5 0 0 0 10.5 6zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5z" />
|
||||||
|
<path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</EditForm>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,161 @@
|
||||||
|
using Microsoft.AspNetCore.Components;
|
||||||
|
using Microsoft.AspNetCore.Components.Web;
|
||||||
|
using Microsoft.EntityFrameworkCore.Metadata.Internal;
|
||||||
|
using Portfolio.Application.Services.PokemonService;
|
||||||
|
using Portfolio.Domain.Features.Pokemon;
|
||||||
|
|
||||||
|
namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
||||||
|
{
|
||||||
|
public partial class PokemonForm
|
||||||
|
{
|
||||||
|
// To Add or Edit Pokemon
|
||||||
|
[Parameter]
|
||||||
|
public string formUse { get; set; }
|
||||||
|
|
||||||
|
|
||||||
|
[Parameter]
|
||||||
|
public EventCallback<Pokemon> OnPokemonReady { get; set; }
|
||||||
|
[Parameter]
|
||||||
|
public EventCallback RemoveForm { get; set; }
|
||||||
|
|
||||||
|
// When Adding
|
||||||
|
[Parameter]
|
||||||
|
public bool mostRecentForm { get; set; }
|
||||||
|
private Pokemon NewPokemon = new Pokemon
|
||||||
|
{
|
||||||
|
PokemonId = 0, // Or any default ID logic
|
||||||
|
PokemonName = string.Empty, // Required fields cannot be null
|
||||||
|
SleepType = string.Empty,
|
||||||
|
Speciality = string.Empty,
|
||||||
|
IsVariation = false
|
||||||
|
};
|
||||||
|
|
||||||
|
// When Editing
|
||||||
|
[Parameter]
|
||||||
|
public Pokemon? PokemonToEdit { get; set; }
|
||||||
|
private int PokemonToEditId { get; set; }
|
||||||
|
|
||||||
|
|
||||||
|
// General Form
|
||||||
|
protected static readonly string[] PokemonTypes = new[]
|
||||||
|
{
|
||||||
|
"Grass","Fire","Water","Normal","Flying","Bug","Poison","Electric","Ground","Rock","Ice",
|
||||||
|
"Steel","Fighting","Psychic","Dark","Fairy","Ghost","Dragon"
|
||||||
|
};
|
||||||
|
protected static readonly string[] SleepTypes = new[] { "Dozing", "Snoozing", "Slumbering" };
|
||||||
|
protected static readonly string[] Specialities = new[] { "Berries", "Ingredients", "Skills", "All" };
|
||||||
|
|
||||||
|
|
||||||
|
private bool HideLabel { get; set; }
|
||||||
|
private bool showErrors { get; set; } = false;
|
||||||
|
|
||||||
|
|
||||||
|
protected override async Task OnInitializedAsync()
|
||||||
|
{
|
||||||
|
if (formUse == "EDIT")
|
||||||
|
{
|
||||||
|
if (PokemonToEdit.IsVariation == true)
|
||||||
|
{
|
||||||
|
HideLabel = false;
|
||||||
|
}
|
||||||
|
PokemonToEditId = PokemonToEdit.Id;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
HideLabel = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
private void Toggle()
|
||||||
|
{
|
||||||
|
HideLabel = !HideLabel;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// CSS-function to get proper styling for form elements
|
||||||
|
private string GetRoundingClass()
|
||||||
|
{
|
||||||
|
if (!HideLabel)
|
||||||
|
{
|
||||||
|
return "rounded-start";
|
||||||
|
}
|
||||||
|
return "rounded-start rounded-end";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Minimal "complete" check (no data annotations needed)
|
||||||
|
private bool IsComplete =>
|
||||||
|
NewPokemon.PokemonId > 0 &&
|
||||||
|
!string.IsNullOrWhiteSpace(NewPokemon.PokemonName) &&
|
||||||
|
!string.IsNullOrWhiteSpace(NewPokemon.PokemonType) &&
|
||||||
|
!string.IsNullOrWhiteSpace(NewPokemon.SleepType) &&
|
||||||
|
!string.IsNullOrWhiteSpace(NewPokemon.Speciality) &&
|
||||||
|
(!NewPokemon.IsVariation || !string.IsNullOrWhiteSpace(NewPokemon.VariationName));
|
||||||
|
|
||||||
|
private IEnumerable<string> MissingFields()
|
||||||
|
{
|
||||||
|
if (NewPokemon.PokemonId <= 0) yield return "Pokédex #";
|
||||||
|
if (string.IsNullOrWhiteSpace(NewPokemon.PokemonName)) yield return "Name";
|
||||||
|
if (string.IsNullOrWhiteSpace(NewPokemon.PokemonType)) yield return "Type";
|
||||||
|
if (string.IsNullOrWhiteSpace(NewPokemon.SleepType)) yield return "Sleep Type";
|
||||||
|
if (string.IsNullOrWhiteSpace(NewPokemon.Speciality)) yield return "Specialty";
|
||||||
|
if (NewPokemon.IsVariation && string.IsNullOrWhiteSpace(NewPokemon.VariationName)) yield return "Variation Name";
|
||||||
|
}
|
||||||
|
|
||||||
|
private async Task HandleRemove()
|
||||||
|
{
|
||||||
|
await RemoveForm.InvokeAsync();
|
||||||
|
}
|
||||||
|
|
||||||
|
private async Task SendPokemon()
|
||||||
|
{
|
||||||
|
if(formUse == "ADD")
|
||||||
|
{
|
||||||
|
if (!IsComplete)
|
||||||
|
{
|
||||||
|
showErrors = true;
|
||||||
|
StateHasChanged();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Optionally send a copy to avoid later mutation by the child
|
||||||
|
var copy = new Pokemon
|
||||||
|
{
|
||||||
|
PokemonId = NewPokemon.PokemonId,
|
||||||
|
PokemonName = NewPokemon.PokemonName,
|
||||||
|
PokemonType = NewPokemon.PokemonType,
|
||||||
|
SleepType = NewPokemon.SleepType,
|
||||||
|
Speciality = NewPokemon.Speciality,
|
||||||
|
IsVariation = NewPokemon.IsVariation,
|
||||||
|
VariationName = NewPokemon.VariationName,
|
||||||
|
PokemonImageUrl = NewPokemon.PokemonImageUrl,
|
||||||
|
PokemonShinyImageUrl = NewPokemon.PokemonShinyImageUrl,
|
||||||
|
FlavorText = NewPokemon.FlavorText
|
||||||
|
};
|
||||||
|
|
||||||
|
await OnPokemonReady.InvokeAsync(copy);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
// Optionally send a copy to avoid later mutation by the child
|
||||||
|
var edit = new Pokemon
|
||||||
|
{
|
||||||
|
Id = PokemonToEditId,
|
||||||
|
PokemonId = PokemonToEdit.PokemonId,
|
||||||
|
PokemonName = PokemonToEdit.PokemonName,
|
||||||
|
PokemonType = PokemonToEdit.PokemonType,
|
||||||
|
SleepType = PokemonToEdit.SleepType,
|
||||||
|
Speciality = PokemonToEdit.Speciality,
|
||||||
|
IsVariation = PokemonToEdit.IsVariation,
|
||||||
|
VariationName = PokemonToEdit.VariationName,
|
||||||
|
PokemonImageUrl = PokemonToEdit.PokemonImageUrl,
|
||||||
|
PokemonShinyImageUrl = PokemonToEdit.PokemonShinyImageUrl,
|
||||||
|
FlavorText = PokemonToEdit.FlavorText
|
||||||
|
};
|
||||||
|
|
||||||
|
await OnPokemonReady.InvokeAsync(edit);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -8,7 +8,7 @@ $display-font-sizes: (
|
||||||
6: 2.5rem
|
6: 2.5rem
|
||||||
);
|
);
|
||||||
|
|
||||||
.create-container {
|
.pokemon-form-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 390px; /* Prevent it from getting too huge */
|
max-width: 390px; /* Prevent it from getting too huge */
|
||||||
|
|
@ -24,5 +24,4 @@ $display-font-sizes: (
|
||||||
.checkbox-styling {
|
.checkbox-styling {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
|
}
|
||||||
}
|
|
||||||
|
|
@ -21,7 +21,3 @@
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -33,7 +33,7 @@
|
||||||
<div class="badge bg-info">
|
<div class="badge bg-info">
|
||||||
<p class="statText mb-0">@(pokemons.Count()) Pokémon</p>
|
<p class="statText mb-0">@(pokemons.Count()) Pokémon</p>
|
||||||
</div>
|
</div>
|
||||||
<PokemonDownload _Pokemon="pokemons" />
|
<PokemonDownloadButton _Pokemon="pokemons" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -104,7 +104,7 @@
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<!-- Section 2: Pokemon # -->
|
<!-- Section 2: Pokemon # -->
|
||||||
<th class="" scope="row" style="cursor: default;">@pokemon.PokemonId</th>
|
<th class="" scope="row" style="cursor: default;">@pokemon.PokemonId ++ @pokemon.Id</th>
|
||||||
|
|
||||||
|
|
||||||
<!-- Section 3: Pokemon Name -->
|
<!-- Section 3: Pokemon Name -->
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,8 @@ else
|
||||||
|
|
||||||
<div class="mx-1 align-content-center">
|
<div class="mx-1 align-content-center">
|
||||||
<div class="addcard">
|
<div class="addcard">
|
||||||
<PokemonAddForm
|
<PokemonForm
|
||||||
|
formUse="ADD"
|
||||||
OnPokemonReady="ReceivePokemon1"
|
OnPokemonReady="ReceivePokemon1"
|
||||||
mostRecentForm=false
|
mostRecentForm=false
|
||||||
/>
|
/>
|
||||||
|
|
@ -44,9 +45,10 @@ else
|
||||||
{
|
{
|
||||||
<div class="mx-1 align-content-center">
|
<div class="mx-1 align-content-center">
|
||||||
<div class="addcard">
|
<div class="addcard">
|
||||||
<PokemonAddForm OnPokemonReady="ReceivePokemon2"
|
<PokemonForm OnPokemonReady="ReceivePokemon2"
|
||||||
RemoveForm="TogglePokemon2FormView"
|
formUse="ADD"
|
||||||
mostRecentForm="@pokemon2FormView" />
|
RemoveForm="TogglePokemon2FormView"
|
||||||
|
mostRecentForm="@pokemon2FormView" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mx-1 align-content-center">
|
<div class="mx-1 align-content-center">
|
||||||
|
|
@ -58,16 +60,18 @@ else
|
||||||
{
|
{
|
||||||
<div class="mx-1 align-content-center">
|
<div class="mx-1 align-content-center">
|
||||||
<div class="addcard">
|
<div class="addcard">
|
||||||
<PokemonAddForm OnPokemonReady="ReceivePokemon2"
|
<PokemonForm OnPokemonReady="ReceivePokemon2"
|
||||||
RemoveForm="TogglePokemon2FormView"
|
formUse="ADD"
|
||||||
mostRecentForm="@pokemon2FormView" />
|
RemoveForm="TogglePokemon2FormView"
|
||||||
|
mostRecentForm="@pokemon2FormView" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mx-1 align-content-center">
|
<div class="mx-1 align-content-center">
|
||||||
<div class="addcard">
|
<div class="addcard">
|
||||||
<PokemonAddForm OnPokemonReady="ReceivePokemon3"
|
<PokemonForm OnPokemonReady="ReceivePokemon3"
|
||||||
RemoveForm="TogglePokemon3FormView"
|
formUse="ADD"
|
||||||
mostRecentForm="@pokemon3FormView" />
|
RemoveForm="TogglePokemon3FormView"
|
||||||
|
mostRecentForm="@pokemon3FormView" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
@page "/pokemonsleep/edit/{id:int}"
|
@page "/pokemonsleep/edit/{id:int}"
|
||||||
@inject IPokemonService PokemonService
|
@inject IPokemonService PokemonService
|
||||||
@inject NavigationManager Navigation
|
@inject NavigationManager Navigation
|
||||||
@inject IJSRuntime JSRuntime
|
@inject IJSRuntime JS
|
||||||
|
|
||||||
@attribute [StreamRendering]
|
@attribute [StreamRendering]
|
||||||
@rendermode InteractiveServer
|
@rendermode InteractiveServer
|
||||||
|
|
@ -12,122 +12,33 @@
|
||||||
|
|
||||||
@if (pokemon == null)
|
@if (pokemon == null)
|
||||||
{
|
{
|
||||||
<p><em>Loading...</em></p>
|
<Loading />
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<!-- Total Componenet-->
|
|
||||||
<div class="w-50 mt-3 m-auto bg-info edit-container">
|
|
||||||
|
|
||||||
<!-- Header -->
|
<div class="container mx-0 px-0">
|
||||||
<div class="card-header bg-secondary ml-0 py-3 w-100 ">
|
<div class="row mt-5">
|
||||||
<div class="row">
|
<div class="d-flex justify-content-evenly h-100 p-0">
|
||||||
<div class="col-12 text-center">
|
|
||||||
<h2 class="text-info">Edit Pokémon</h2>
|
<div class="mx-1 align-content-center">
|
||||||
|
<div class="addcard">
|
||||||
|
<PokemonForm
|
||||||
|
formUse="EDIT"
|
||||||
|
OnPokemonReady="ReceivePokemon"
|
||||||
|
RemoveForm="Cancel"
|
||||||
|
mostRecentForm=true
|
||||||
|
PokemonToEdit="pokemon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- Body -->
|
<div class="d-flex justify-content-center">
|
||||||
<div class="p-3 w-100 flex-column ">
|
<div class="btn-group">
|
||||||
<EditForm class="col mb-3" Model="pokemon" OnValidSubmit="HandleSubmit">
|
<button @onclick="@HandleSubmit" class="btn btn-primary rounded">Edit Pokemon</button>
|
||||||
<DataAnnotationsValidator />
|
|
||||||
|
|
||||||
<!-- Dex Number and Name -->
|
|
||||||
<div class="row ">
|
|
||||||
<div class="col-sm-3 input-group mb-3">
|
|
||||||
<span for="PokemonId" class="input-group-text">#</span>
|
|
||||||
<InputNumber min="0" id="PokemonId" @bind-Value="pokemon.PokemonId" class="form-control" required disabled />
|
|
||||||
<InputText id="PokemonName" @bind-Value="pokemon.PokemonName" class="form-control w-75" required />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pokemon Type, Sleep Type, and Speciality -->
|
|
||||||
<div class="row">
|
|
||||||
<!-- Pokemon Type -->
|
|
||||||
<div class="col mb-3 m-auto">
|
|
||||||
<label for="PokemonType" class="form-label">Pokemon Type</label>
|
|
||||||
<InputSelect id="PokemonType" @bind-Value="pokemon.PokemonType" class="form-select">
|
|
||||||
<option dsabled value="">Select Type</option>
|
|
||||||
<option value="Grass">Grass</option>
|
|
||||||
<option value="Fire">Fire</option>
|
|
||||||
<option value="Water">Water</option>
|
|
||||||
<option value="Normal">Normal</option>
|
|
||||||
<option value="Flying">Flying</option>
|
|
||||||
<option value="Bug">Bug</option>
|
|
||||||
<option value="Poison">Poison</option>
|
|
||||||
<option value="Electric">Electric</option>
|
|
||||||
<option value="Ground">Ground</option>
|
|
||||||
<option value="Rock">Rock</option>
|
|
||||||
<option value="Ice">Ice</option>
|
|
||||||
<option value="Steel">Steel</option>
|
|
||||||
<option value="Fighting">Fighting</option>
|
|
||||||
<option value="Psychic">Psychic</option>
|
|
||||||
<option value="Dark">Dark</option>
|
|
||||||
<option value="Fairy">Fairy</option>
|
|
||||||
<option value="Ghost">Ghost</option>
|
|
||||||
<option value="Dragon">Dragon</option>
|
|
||||||
</InputSelect>
|
|
||||||
</div>
|
|
||||||
<!-- Sleep Type -->
|
|
||||||
<div class="col mb-3 m-auto">
|
|
||||||
<label for="SleepType" class="form-label">Sleep Type</label>
|
|
||||||
<InputSelect id="SleepType" @bind-Value="pokemon.SleepType" class="form-select">
|
|
||||||
<option value="Dozing">Dozing</option>
|
|
||||||
<option value="Snoozing">Snoozing</option>
|
|
||||||
<option value="Slumbering">Slumbering</option>
|
|
||||||
</InputSelect>
|
|
||||||
</div>
|
|
||||||
<!-- Speciality-->
|
|
||||||
<div class="col mb-3 m-auto">
|
|
||||||
<label for="Speciality" class="form-label">Specialty</label>
|
|
||||||
<InputSelect id="Speciality" @bind-Value="pokemon.Speciality" class="form-select">
|
|
||||||
<option value="Berries">Berries</option>
|
|
||||||
<option value="Ingredients">Ingredients</option>
|
|
||||||
<option value="Skills">Skills</option>
|
|
||||||
</InputSelect>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Variation Check -->
|
|
||||||
<div class="row">
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<!-- Variation Check -->
|
|
||||||
<div class=" d-inline-flex">
|
|
||||||
<InputCheckbox id="IsVariation" @bind-Value="pokemon.IsVariation" @onclick="@Toggle" class="form-check-input checkbox-styling p-3 mt-1" />
|
|
||||||
<span for="IsVariation" class="input-group-text m-1">Variation?</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Variation Region Input -->
|
|
||||||
<div class="w-75 mx-2 mt-1">
|
|
||||||
|
|
||||||
<InputText placeholder="What Variant? (Alolan, Paldean)" hidden="@HideLabel" id="VariationName" @bind-Value="pokemon.VariationName" class="form-control" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Image URL Input -->
|
|
||||||
<div class="row mb-3 m-auto">
|
|
||||||
<label for="ImageUrl" class="form-label">Base Image URL</label>
|
|
||||||
<InputText id="ImageUrl" @bind-Value="pokemon.PokemonImageUrl" class="form-control" />
|
|
||||||
</div>
|
|
||||||
<!-- Shiny Image URL Input -->
|
|
||||||
<div class="row mb-3 m-auto">
|
|
||||||
<label for="ImageUrl" class="form-label">Shiny Image URL</label>
|
|
||||||
<InputText id="ImageUrl" @bind-Value="pokemon.PokemonShinyImageUrl" class="form-control" />
|
|
||||||
</div>
|
|
||||||
<!-- Flavor Text Input -->
|
|
||||||
<div class="row mb-3 m-auto">
|
|
||||||
<label for="FlavorText" class="form-label">Flavor Text</label>
|
|
||||||
<InputText id="FlavorText" @bind-Value="pokemon.FlavorText" class="form-control" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Form Buttons -->
|
|
||||||
<div class="d-flex justify-content-between">
|
|
||||||
<button type="button" class="btn btn-secondary mb-3" @onclick="Cancel">Cancel</button>
|
|
||||||
<button type="submit" class="btn btn-primary mb-3">Save Changes</button>
|
|
||||||
</div>
|
|
||||||
</EditForm>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -14,16 +14,28 @@ namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
|
||||||
pokemon = await PokemonService.GetPokemonByIdAsync(Id);
|
pokemon = await PokemonService.GetPokemonByIdAsync(Id);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private async Task ReceivePokemon(Pokemon p)
|
||||||
|
{
|
||||||
|
// Save received pokemon as Pokemon 1
|
||||||
|
pokemon = p;
|
||||||
|
|
||||||
|
// Server console (Blazor Server)
|
||||||
|
Console.WriteLine($"[Pokemon 1] #{pokemon.PokemonId} {pokemon.PokemonName} | {pokemon.PokemonType} | {pokemon.SleepType} | {pokemon.Speciality} | Var:{pokemon.IsVariation} {pokemon.VariationName}");
|
||||||
|
|
||||||
|
// Browser console
|
||||||
|
await JS.InvokeVoidAsync("console.log", "Pokemon 1:", pokemon);
|
||||||
|
}
|
||||||
|
|
||||||
private async Task HandleSubmit()
|
private async Task HandleSubmit()
|
||||||
{
|
{
|
||||||
await PokemonService.UpdatePokemonAsync(pokemon);
|
await PokemonService.UpdatePokemonAsync(pokemon);
|
||||||
//Navigation.NavigateTo("/pokemonsleep");
|
//Navigation.NavigateTo("/pokemonsleep");
|
||||||
await JSRuntime.InvokeVoidAsync("history.back");
|
await JS.InvokeVoidAsync("history.back");
|
||||||
}
|
}
|
||||||
|
|
||||||
private async void Cancel()
|
private async void Cancel()
|
||||||
{
|
{
|
||||||
await JSRuntime.InvokeVoidAsync("history.back");
|
await JS.InvokeVoidAsync("history.back");
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,3 +5,13 @@
|
||||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(255,255, 255, 0.19);
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(255,255, 255, 0.19);
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.addcard {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 30rem;
|
||||||
|
flex: 0 0 auto; /* prevent flex shrink/grow */
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue