Delete functionality added and pokemon rows are being correctly identified where necessary (by Id versus PokemonId).

This commit is contained in:
Kira Jiroux 2025-02-18 17:54:52 -05:00
parent 1c93b7aa25
commit c1c865328b
5 changed files with 54 additions and 16 deletions

View File

@ -11,5 +11,6 @@ namespace Portfolio.Application.Services.PokemonService
{
Task<List<Pokemon>> GetAllPokemonAsync();
Task AddPokemonAsync(Pokemon pokemon);
Task DeletePokemonAsync(int pokemonId);
}
}

View File

@ -22,6 +22,10 @@ namespace Portfolio.Application.Services.PokemonService
{
await _pokemonRepository.AddPokemonAsync(pokemon);
}
public async Task DeletePokemonAsync(int pokemonId)
{
await _pokemonRepository.DeletePokemonAsync(pokemonId);
}
public async Task<List<Pokemon>> GetAllPokemonAsync()
{

View File

@ -10,5 +10,7 @@ namespace Portfolio.Domain.Features.Pokemon
{
Task<List<Pokemon>> GetAllPokemonsAsync();
Task AddPokemonAsync(Pokemon pokemon);
Task DeletePokemonAsync(int pokemonId);
}
}

View File

@ -26,5 +26,14 @@ namespace Portfolio.Infrastructure.Repositories
_context.Pokemons.Add(pokemon);
await _context.SaveChangesAsync();
}
public async Task DeletePokemonAsync(int pokemonId)
{
var pokemon = await _context.Pokemons.FindAsync(pokemonId);
if (pokemon != null)
{
_context.Pokemons.Remove(pokemon);
await _context.SaveChangesAsync();
}
}
}
}

View File

@ -1,6 +1,7 @@
@page "/pokemonsleep"
@inject IPokemonService PokemonService
@inject IJSRuntime JS
@attribute [StreamRendering]
@rendermode InteractiveServer
@ -121,9 +122,13 @@ else
string BaseURL = $"/pokemon_images/normal/{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}.png";
string ShinyURL = $"/pokemon_images/shiny/{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}.png";
<td style="text-align: center;">
<img style="width: 90px; height: 90px; cursor: pointer;"
src="@(isShiny[pokemon.PokemonId] ? ShinyURL : BaseURL)"
@onclick="() => ToggleImage(pokemon.PokemonId)" />
<div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
<div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
<img class="front" src="/pokemon_images/normal/@(pokemon.IsVariation ? $"{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}" : pokemon.PokemonId).png" />
<img class="back" src="/pokemon_images/shiny/@(pokemon.IsVariation ? $"{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}" : pokemon.PokemonId).png" />
</div>
</div>
</td>
}
else // Base Case
@ -131,8 +136,8 @@ else
string BaseURL = $"/pokemon_images/normal/{pokemon.PokemonId}.png"; ;
string ShinyURL = $"/pokemon_images/shiny/{pokemon.PokemonId}.png";
<td style="text-align: center;">
<div class="flip-container" @onclick="() => ToggleImage(pokemon.PokemonId)">
<div class="flipper @(isShiny[pokemon.PokemonId] ? "flipped" : "")">
<div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
<div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
<img class="front" src="/pokemon_images/normal/@(pokemon.IsVariation ? $"{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}" : pokemon.PokemonId).png" />
<img class="back" src="/pokemon_images/shiny/@(pokemon.IsVariation ? $"{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}" : pokemon.PokemonId).png" />
@ -168,13 +173,14 @@ else
<td style="padding-right: 30px; vertical-align: auto;">@pokemon.Speciality</td>
<!-- Section 6: Delete Button -->
<td style="vertical-align: auto;">
<a asp-controller="Pokemon" asp-action="PokemonDelete" asp-route-Id="@pokemon.Id" class="btn btn-danger" style="border-radius: 15px 50px 30px 5px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
<td>
<button class="btn btn-danger" @onclick="() => ConfirmDelete(pokemon.Id)">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-trash" viewBox="0 0 16 16">
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z" />
<path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z" />
</svg>
</a>
</button>
</td>
</tr>
@ -203,18 +209,34 @@ else
// Initialize dictionary with false (show base image first)
foreach (var pokemon in pokemons)
{
isShiny[pokemon.PokemonId] = false;
isShiny[pokemon.Id] = false;
}
}
}
private void ToggleImage(int pokemonId)
private void ToggleImage(int Id)
{
if (isShiny.ContainsKey(pokemonId))
if (isShiny.ContainsKey(Id))
{
isShiny[pokemonId] = !isShiny[pokemonId];
isShiny[Id] = !isShiny[Id];
}
}
private async Task ConfirmDelete(int Id)
{
bool confirm = await JS.InvokeAsync<bool>("confirm", "Are you sure you want to delete this Pokémon?");
if (confirm)
{
await DeletePokemon(Id);
}
}
private async Task DeletePokemon(int Id)
{
await PokemonService.DeletePokemonAsync(Id);
pokemons.RemoveAll(p => p.Id == Id); // Remove from the list locally
StateHasChanged(); // Refresh the UI
}
}