From 37d8fdaca295fa5937f754950974128f1ea5cf93 Mon Sep 17 00:00:00 2001
From: Kira Jiroux <microsoft.com@kirajiroux.com>
Date: Tue, 23 Sep 2025 17:17:25 -0400
Subject: [PATCH] Made form slightly better by activating it onchange rather
 than by onclick. Much more responsive, not absolutely certain it works. But!
 did put back in a pseudo delete button. It works, but not perfect.

---
 .../Pokemon Components/PokemonForm.razor      | 78 ++++++++++---------
 .../Pokemon Components/PokemonForm.razor.cs   |  1 +
 .../Pokemon Components/PokemonForm.razor.css  |  2 -
 .../Pokemon Components/PokemonTable.razor     | 13 ++--
 .../Pages/Pokemon Pages/PokemonCreate.razor   |  2 +-
 .../Pokemon Pages/PokemonCreate.razor.css     |  7 +-
 6 files changed, 50 insertions(+), 53 deletions(-)

diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonForm.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonForm.razor
index 7537f3a..688f09d 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonForm.razor	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonForm.razor	
@@ -16,11 +16,13 @@
                                  placeholder="Pokedex #"
                                  id="PokemonId"
                                  @bind-Value="NewPokemon.PokemonId"
+                                 @onchange="@SendPokemon"
                                  class="form-control "
                                  type="number" />
                     <InputText placeholder="Pokemon Name"
                                id="PokemonName"
                                @bind-Value="NewPokemon.PokemonName"
+                               @onchange="@SendPokemon"
                                class="form-control w-50 rounded-end" />
                 </div>
             </div>
@@ -30,11 +32,13 @@
                 <InputCheckbox id="IsVariation"
                                @bind-Value="NewPokemon.IsVariation"
                                @onclick="@Toggle"
+                               @onchange="@SendPokemon"
                                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"
+                           @onchange="@SendPokemon"
                            class="form-control rounded-end"
                            hidden="@HideLabel" />
             </div>
@@ -46,7 +50,7 @@
             <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">
+                    <InputSelect id="PokemonType" @bind-Value="NewPokemon.PokemonType" @onchange="@SendPokemon" class="form-select rounded-end">
                         <option disabled value="" selected>Select...</option>
                         @foreach (var pt in PokemonTypes)
                         {
@@ -65,7 +69,7 @@
                         <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">
+                        <InputSelect id="SleepType" @bind-Value="NewPokemon.SleepType" @onchange="@SendPokemon" class="form-select rounded-bottom">
                             <option disabled value="" selected>Select...</option>
                             @foreach (var st in SleepTypes)
                             {
@@ -80,7 +84,7 @@
                         <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">
+                        <InputSelect id="Speciality" @bind-Value="NewPokemon.Speciality" @onchange="@SendPokemon" class="form-select rounded-bottom">
                             <option disabled value="" selected>Select...</option>
                             @foreach (var sp in Specialities)
                             {
@@ -98,13 +102,13 @@
             <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" />
+                    <InputText id="ImageUrl" @bind-Value="NewPokemon.PokemonImageUrl" @onchange="@SendPokemon" 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" />
+                    <InputText id="ShinyImageUrl" @bind-Value="NewPokemon.PokemonShinyImageUrl" @onchange="@SendPokemon" class="form-control rounded-end" />
                 </div>
             </div>
 
@@ -112,7 +116,7 @@
             <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" />
+                    <InputText id="FlavorText" @bind-Value="NewPokemon.FlavorText" @onchange="@SendPokemon" class="form-control rounded-end" />
                 </div>
             </div>
 
@@ -127,23 +131,26 @@
             }
 
             <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"
+                            class="btn btn-danger rounded rounded-5 p-1"
                             @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 xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
+                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
+                            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708" />
+                        </svg>
+                    </button>
+                }
+                else
+                {
+                    <button type="button"
+                            class="btn btn-danger rounded rounded-5 p-1"
+                            
+                            disabled>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
+                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
+                            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708" />
                         </svg>
                     </button>
                 }
@@ -168,11 +175,13 @@ else if (formUse == "EDIT")
                                  placeholder="Pokedex #"
                                  id="PokemonId"
                                  @bind-Value="PokemonToEdit.PokemonId"
+                                 @onchange="@SendPokemon"
                                  class="form-control "
                                  type="number" />
                     <InputText placeholder="Pokemon Name"
                                id="PokemonName"
                                @bind-Value="PokemonToEdit.PokemonName"
+                               @onchange="@SendPokemon"
                                class="form-control w-50 rounded-end" />
                 </div>
             </div>
@@ -182,11 +191,13 @@ else if (formUse == "EDIT")
                 <InputCheckbox id="IsVariation"
                                @bind-Value="PokemonToEdit.IsVariation"
                                @onclick="@Toggle"
+                               @onchange="@SendPokemon"
                                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"
+                           @onchange="@SendPokemon"
                            class="form-control rounded-end"
                            hidden="@HideLabel" />
             </div>
@@ -198,7 +209,7 @@ else if (formUse == "EDIT")
             <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">
+                    <InputSelect id="PokemonType" @bind-Value="PokemonToEdit.PokemonType" class="form-select rounded-end" @onchange="@SendPokemon">
                         <option disabled value="" selected>Select...</option>
                         @foreach (var pt in PokemonTypes)
                         {
@@ -217,7 +228,7 @@ else if (formUse == "EDIT")
                         <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">
+                        <InputSelect id="SleepType" @bind-Value="PokemonToEdit.SleepType" class="form-select rounded-bottom" @onchange="@SendPokemon">
                             <option disabled value="" selected>Select...</option>
                             @foreach (var st in SleepTypes)
                             {
@@ -232,7 +243,7 @@ else if (formUse == "EDIT")
                         <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">
+                        <InputSelect id="Speciality" @bind-Value="PokemonToEdit.Speciality" class="form-select rounded-bottom" @onchange="@SendPokemon">
                             <option disabled value="" selected>Select...</option>
                             @foreach (var sp in Specialities)
                             {
@@ -250,13 +261,13 @@ else if (formUse == "EDIT")
             <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" />
+                    <InputText id="ImageUrl" @bind-Value="PokemonToEdit.PokemonImageUrl" class="form-control rounded-end" @onchange="@SendPokemon" />
                 </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" />
+                    <InputText id="ShinyImageUrl" @bind-Value="PokemonToEdit.PokemonShinyImageUrl" class="form-control rounded-end" @onchange="@SendPokemon" />
                 </div>
             </div>
 
@@ -264,7 +275,7 @@ else if (formUse == "EDIT")
             <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" />
+                    <InputText id="FlavorText" @bind-Value="PokemonToEdit.FlavorText" class="form-control rounded-end" @onchange="@SendPokemon" />
                 </div>
             </div>
 
@@ -279,23 +290,14 @@ else if (formUse == "EDIT")
             }
 
             <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"
+                            class="btn btn-danger rounded rounded-5 p-1"
                             @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 xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
+                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
+                            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708" />
                         </svg>
                     </button>
                 }
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonForm.razor.cs b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonForm.razor.cs
index 66194fd..6cbcfc5 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonForm.razor.cs	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonForm.razor.cs	
@@ -154,6 +154,7 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
                 };
 
                 await OnPokemonReady.InvokeAsync(edit);
+                Console.WriteLine(edit);
             }
 
         }
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonForm.razor.css b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonForm.razor.css
index 8cca838..70ae68b 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonForm.razor.css	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonForm.razor.css	
@@ -10,8 +10,6 @@ $display-font-sizes: (
 
 .pokemon-form-container {
     position: relative;
-    width: 100%;
-    max-width: 390px; /* Prevent it from getting too huge */
     aspect-ratio: 3 / 4; /* Maintains card shape dynamically */
     background-color: var(--bg-color);
     border-width: .5rem;
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor
index 8237713..69046d6 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor	
@@ -10,15 +10,15 @@
     
 </div>
 <!-- Table A: Desktop View-->
-<div class="container d-none d-md-block " style="height: 70vh;">
+<div class="container d-none d-md-block" style="height: 70vh;">
     <!-- Main UI -->
-    <div class="border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8 pokemontable  ">
+    <div class="border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8 pokemontable">
         <!-- Table Header -->
-        <div class="row bg-secondary bg-gradient py-3 border-0">
+        <div class="row bg-secondary bg-gradient py-3 border-0 rounded-top">
             <div class="d-flex align-items-center justify-content-between w-100 position-relative px-3">
 
                 <!-- Left: Search -->
-                <input class="form-control w-25 me-3"
+                <input class="form-control w-25 me-3 rounded rounded-5"
                        placeholder="Search Pokémon..."
                        @bind="SearchTerm"
                        @oninput="HandleSearch" />
@@ -104,7 +104,7 @@
                                     </td>
 
                                     <!-- Section 2: Pokemon # -->
-                                    <th class="" scope="row" style="cursor: default;">@pokemon.PokemonId ++ @pokemon.Id</th>
+                                    <th class="" scope="row" style="cursor: default;">@pokemon.PokemonId</th>
 
 
                                     <!-- Section 3: Pokemon Name -->
@@ -140,7 +140,8 @@
                                         <td class="" style="">
                                             <div class="d-flex justify-content-center">
                                                 <PokemonEditButton PokemonId="@pokemon.PokemonId" />
-
+                                                @*<button @onclick="() => ConfirmDelete(pokemon.Id)">Delete</button>*@
+                                                
                                             </div>
                                         </td>
                                     }
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor
index 62403e8..375af21 100644
--- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor	
+++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor	
@@ -80,7 +80,7 @@ else
 
         </div>
     </div>
-    <div class="d-flex justify-content-center">
+    <div class="d-flex justify-content-center pt-3">
         <div class="btn-group">
             <button @onclick="@HandleAdd" class="btn btn-primary rounded">Add Pokemon</button>
         </div>
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor.css b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor.css
index 62df338..4abbda3 100644
--- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor.css	
+++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor.css	
@@ -1,10 +1,5 @@
 .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;
+    max-width: 25rem;
 }