From 8fc8b0677d129dad468d315eb4226501c5601e21 Mon Sep 17 00:00:00 2001
From: Francis Pion <francispion@hotmail.com>
Date: Thu, 4 Jan 2024 22:01:29 -0500
Subject: [PATCH] Implemented roster item removal. (#16)

---
 .../Commands/RemoveRosterItemCommand.cs       |  5 ++
 .../RemoveRosterItemCommandHandler.cs         | 20 +++++
 .../Roster/PokemonRosterService.cs            |  5 ++
 .../Roster/IPokemonRosterService.cs           |  1 +
 .../Roster/IPokemonRosterRepository.cs        |  1 +
 .../Repositories/PokemonRosterRepository.cs   | 11 +++
 .../Controllers/PokemonRosterController.cs    | 14 ++-
 backend/src/PokeData/appsettings.json         |  2 +-
 frontend/.env.development                     |  2 +-
 frontend/src/api/roster.ts                    |  6 +-
 frontend/src/components/RosterEditModal.vue   | 86 +++++++------------
 frontend/src/components/RosterRemoveModal.vue | 52 +++++++++++
 frontend/src/components/RosterSelection.vue   |  4 +-
 frontend/src/fontAwesome.ts                   | 14 ++-
 frontend/src/views/RosterView.vue             | 27 ++++--
 15 files changed, 183 insertions(+), 67 deletions(-)
 create mode 100644 backend/src/PokeData.Application/Roster/Commands/RemoveRosterItemCommand.cs
 create mode 100644 backend/src/PokeData.Application/Roster/Commands/RemoveRosterItemCommandHandler.cs
 create mode 100644 frontend/src/components/RosterRemoveModal.vue

diff --git a/backend/src/PokeData.Application/Roster/Commands/RemoveRosterItemCommand.cs b/backend/src/PokeData.Application/Roster/Commands/RemoveRosterItemCommand.cs
new file mode 100644
index 0000000..9ab074d
--- /dev/null
+++ b/backend/src/PokeData.Application/Roster/Commands/RemoveRosterItemCommand.cs
@@ -0,0 +1,5 @@
+using MediatR;
+
+namespace PokeData.Application.Roster.Commands;
+
+internal record RemoveRosterItemCommand(ushort SpeciesId) : IRequest<Unit>;
diff --git a/backend/src/PokeData.Application/Roster/Commands/RemoveRosterItemCommandHandler.cs b/backend/src/PokeData.Application/Roster/Commands/RemoveRosterItemCommandHandler.cs
new file mode 100644
index 0000000..d4edf74
--- /dev/null
+++ b/backend/src/PokeData.Application/Roster/Commands/RemoveRosterItemCommandHandler.cs
@@ -0,0 +1,20 @@
+using MediatR;
+using PokeData.Domain.Roster;
+
+namespace PokeData.Application.Roster.Commands;
+
+internal class RemoveRosterItemCommandHandler : IRequestHandler<RemoveRosterItemCommand, Unit>
+{
+  private readonly IPokemonRosterRepository _rosterRepository;
+
+  public RemoveRosterItemCommandHandler(IPokemonRosterRepository rosterRepository)
+  {
+    _rosterRepository = rosterRepository;
+  }
+
+  public async Task<Unit> Handle(RemoveRosterItemCommand command, CancellationToken cancellationToken)
+  {
+    await _rosterRepository.DeleteAsync(command.SpeciesId, cancellationToken);
+    return Unit.Value;
+  }
+}
diff --git a/backend/src/PokeData.Application/Roster/PokemonRosterService.cs b/backend/src/PokeData.Application/Roster/PokemonRosterService.cs
index 270394a..714f22f 100644
--- a/backend/src/PokeData.Application/Roster/PokemonRosterService.cs
+++ b/backend/src/PokeData.Application/Roster/PokemonRosterService.cs
@@ -19,6 +19,11 @@ public async Task<PokemonRoster> GetAsync(CancellationToken cancellationToken)
     return await _mediator.Send(new ReadPokemonRosterQuery(), cancellationToken);
   }
 
+  public async Task RemoveItemAsync(ushort speciesId, CancellationToken cancellationToken)
+  {
+    await _mediator.Send(new RemoveRosterItemCommand(speciesId), cancellationToken);
+  }
+
   public async Task SaveItemAsync(ushort speciesId, SaveRosterItemPayload payload, CancellationToken cancellationToken)
   {
     await _mediator.Send(new SaveRosterItemCommand(speciesId, payload), cancellationToken);
diff --git a/backend/src/PokeData.Contracts/Roster/IPokemonRosterService.cs b/backend/src/PokeData.Contracts/Roster/IPokemonRosterService.cs
index 963588d..ecb3462 100644
--- a/backend/src/PokeData.Contracts/Roster/IPokemonRosterService.cs
+++ b/backend/src/PokeData.Contracts/Roster/IPokemonRosterService.cs
@@ -3,5 +3,6 @@
 public interface IPokemonRosterService
 {
   Task<PokemonRoster> GetAsync(CancellationToken cancellationToken = default);
+  Task RemoveItemAsync(ushort speciesId, CancellationToken cancellationToken = default);
   Task SaveItemAsync(ushort speciesId, SaveRosterItemPayload payload, CancellationToken cancellationToken = default);
 }
diff --git a/backend/src/PokeData.Domain/Roster/IPokemonRosterRepository.cs b/backend/src/PokeData.Domain/Roster/IPokemonRosterRepository.cs
index 788ac14..35a7872 100644
--- a/backend/src/PokeData.Domain/Roster/IPokemonRosterRepository.cs
+++ b/backend/src/PokeData.Domain/Roster/IPokemonRosterRepository.cs
@@ -2,5 +2,6 @@
 
 public interface IPokemonRosterRepository
 {
+  Task DeleteAsync(ushort speciesId, CancellationToken cancellationToken = default);
   Task SaveAsync(PokemonRoster roster, CancellationToken cancellationToken = default);
 }
diff --git a/backend/src/PokeData.EntityFrameworkCore.Relational/Repositories/PokemonRosterRepository.cs b/backend/src/PokeData.EntityFrameworkCore.Relational/Repositories/PokemonRosterRepository.cs
index c5e519d..5cdf626 100644
--- a/backend/src/PokeData.EntityFrameworkCore.Relational/Repositories/PokemonRosterRepository.cs
+++ b/backend/src/PokeData.EntityFrameworkCore.Relational/Repositories/PokemonRosterRepository.cs
@@ -13,6 +13,17 @@ public PokemonRosterRepository(PokemonContext context)
     _context = context;
   }
 
+  public async Task DeleteAsync(ushort speciesId, CancellationToken cancellationToken)
+  {
+    PokemonRosterEntity? entity = await _context.PokemonRoster
+      .SingleOrDefaultAsync(x => x.PokemonSpeciesId == speciesId, cancellationToken);
+    if (entity != null)
+    {
+      _context.PokemonRoster.Remove(entity);
+      await _context.SaveChangesAsync(cancellationToken);
+    }
+  }
+
   public async Task SaveAsync(PokemonRoster roster, CancellationToken cancellationToken)
   {
     PokemonRosterEntity? entity = await _context.PokemonRoster
diff --git a/backend/src/PokeData/Controllers/PokemonRosterController.cs b/backend/src/PokeData/Controllers/PokemonRosterController.cs
index 2adc5d5..3dc99d9 100644
--- a/backend/src/PokeData/Controllers/PokemonRosterController.cs
+++ b/backend/src/PokeData/Controllers/PokemonRosterController.cs
@@ -20,17 +20,27 @@ public async Task<ActionResult<PokemonRoster>> GetAsync(CancellationToken cancel
     return Ok(await _rosterService.GetAsync(cancellationToken));
   }
 
+  [HttpDelete("{speciesId}")]
+  public async Task<ActionResult<SavedRosterItem>> RemoveAsync(ushort speciesId, CancellationToken cancellationToken)
+  {
+    await _rosterService.RemoveItemAsync(speciesId, cancellationToken);
+    return Ok(await GetSavedRosterItemAsync(speciesId, cancellationToken));
+  }
+
   [HttpPut("{speciesId}")]
   public async Task<ActionResult<SavedRosterItem>> SaveAsync(ushort speciesId, [FromBody] SaveRosterItemPayload payload, CancellationToken cancellationToken)
   {
     await _rosterService.SaveItemAsync(speciesId, payload, cancellationToken);
+    return Ok(await GetSavedRosterItemAsync(speciesId, cancellationToken));
+  }
 
+  private async Task<SavedRosterItem> GetSavedRosterItemAsync(ushort speciesId, CancellationToken cancellationToken)
+  {
     PokemonRoster roster = await _rosterService.GetAsync(cancellationToken);
-    SavedRosterItem result = new()
+    return new SavedRosterItem
     {
       Item = roster.Items.Single(item => item.SpeciesId == speciesId),
       Stats = roster.Stats
     };
-    return Ok(result);
   }
 }
diff --git a/backend/src/PokeData/appsettings.json b/backend/src/PokeData/appsettings.json
index 43a6f45..211579b 100644
--- a/backend/src/PokeData/appsettings.json
+++ b/backend/src/PokeData/appsettings.json
@@ -7,7 +7,7 @@
   },
   "Cors": {
     "AllowedOrigins": [],
-    "AllowedMethods": [ "GET", "POST", "PUT" ],
+    "AllowedMethods": [ "DELETE", "GET", "POST", "PUT" ],
     "AllowedHeaders": [ "Content-Type" ],
     "AllowCredentials": false
   },
diff --git a/frontend/.env.development b/frontend/.env.development
index 8565615..332aebf 100644
--- a/frontend/.env.development
+++ b/frontend/.env.development
@@ -1,2 +1,2 @@
 __VITE_APP_API_BASE_URL="http://localhost:43551/"
-VITE_APP_API_BASE_URL="https://localhost:32770/"
\ No newline at end of file
+VITE_APP_API_BASE_URL="https://localhost:32772/"
\ No newline at end of file
diff --git a/frontend/src/api/roster.ts b/frontend/src/api/roster.ts
index 47bf14a..86aab96 100644
--- a/frontend/src/api/roster.ts
+++ b/frontend/src/api/roster.ts
@@ -1,10 +1,14 @@
 import type { PokemonRoster, SaveRosterItemPayload, SavedRosterItem } from "@/types/roster";
-import { get, put } from ".";
+import { _delete, get, put } from ".";
 
 export async function readRoster(): Promise<PokemonRoster> {
   return (await get<PokemonRoster>("/pokemon/roster")).data;
 }
 
+export async function removeRosterItem(speciesId: number): Promise<SavedRosterItem> {
+  return (await _delete<SavedRosterItem>(`/pokemon/roster/${speciesId}`)).data;
+}
+
 export async function saveRosterItem(speciesId: number, payload: SaveRosterItemPayload): Promise<SavedRosterItem> {
   return (await put<SaveRosterItemPayload, SavedRosterItem>(`/pokemon/roster/${speciesId}`, payload)).data;
 }
diff --git a/frontend/src/components/RosterEditModal.vue b/frontend/src/components/RosterEditModal.vue
index eb99f36..8bdad4c 100644
--- a/frontend/src/components/RosterEditModal.vue
+++ b/frontend/src/components/RosterEditModal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { TarButton, TarCheckbox, TarModal } from "logitar-vue3-ui";
-import { computed, inject, onMounted, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 
 import PokemonCategoryInput from "./PokemonCategoryInput.vue";
 import PokemonNameInput from "./PokemonNameInput.vue";
@@ -11,16 +11,12 @@ import RosterItem from "./RosterItem.vue";
 import SearchNumberInput from "./SearchNumberInput.vue";
 import SearchResultSelect from "./SearchResultSelect.vue";
 import SearchTextInput from "./SearchTextInput.vue";
-import type { PokemonType } from "@/types/pokemon";
 import type { RosterInfo, RosterItem as RosterItemType, SaveRosterItemPayload, SavedRosterItem } from "@/types/roster";
 import { saveRosterItem } from "@/api/roster";
-import { searchPokemonTypes } from "@/api/pokemon";
-import { toastsKey, type ToastUtils } from "@/App";
 
 const defaults = {
   payload: { number: 0, name: "", category: "", region: "", primaryType: "", secondaryType: "", isBaby: false, isLegendary: false, isMythical: false },
 };
-const toasts = inject(toastsKey) as ToastUtils;
 
 const props = defineProps<{
   item?: RosterItemType;
@@ -33,7 +29,6 @@ const payload = ref<SaveRosterItemPayload>({ ...defaults.payload });
 const searchNumber = ref<number>(0);
 const searchText = ref<string>();
 const selectedPokemon = ref<number>();
-const types = ref<PokemonType[]>([]);
 
 const hasChanges = computed<boolean>(() => {
   const left = payload.value;
@@ -82,9 +77,8 @@ async function submit(): Promise<void> {
   if (!loading.value && props.item) {
     loading.value = true;
     try {
-      const saved = await saveRosterItem(props.item?.speciesId, payload.value);
+      const saved = await saveRosterItem(props.item.speciesId, payload.value);
       emit("saved", saved);
-      toasts.success({ text: "The roster item has been saved successfully." });
       loading.value = false;
       modal.value.hide();
     } catch (e: unknown) {
@@ -109,18 +103,6 @@ watch(
 );
 watch(searchNumber, () => (selectedPokemon.value = undefined));
 watch(searchText, () => (selectedPokemon.value = undefined));
-
-onMounted(async () => {
-  types.value = (
-    await searchPokemonTypes({
-      numberIn: [],
-      search: { terms: [], operator: "And" },
-      sort: [{ field: "DisplayName", isDescending: false }],
-      skip: 0,
-      limit: 0,
-    })
-  ).items;
-});
 </script>
 
 <template>
@@ -140,44 +122,42 @@ onMounted(async () => {
       </div>
       <SearchResultSelect :items="items" :search-number="searchNumber" :search-text="searchText" v-model="selectedPokemon" @selected="onSelected" />
       <h4>Properties</h4>
-      <form @submit.prevent="submit" @reset.prevent="reset">
-        <div class="row">
-          <div class="col">
-            <PokemonNumberInput required v-model="payload.number" />
-          </div>
-          <div class="col">
-            <PokemonNameInput required v-model="payload.name" />
-          </div>
+      <div class="row">
+        <div class="col">
+          <PokemonNumberInput required v-model="payload.number" />
         </div>
-        <div class="row">
-          <div class="col">
-            <PokemonCategoryInput v-model="payload.category" />
-          </div>
-          <div class="col">
-            <RegionSelect required v-model="payload.region" />
-          </div>
+        <div class="col">
+          <PokemonNameInput required v-model="payload.name" />
         </div>
-        <div class="row">
-          <div class="col">
-            <PokemonTypeSelect :exclude="[payload.secondaryType ?? '']" id="primary-type" label="Primary Type" required v-model="payload.primaryType" />
-          </div>
-          <div class="col">
-            <PokemonTypeSelect :exclude="[payload.primaryType]" id="secondary-type" label="Secondary Type" required v-model="payload.secondaryType" />
-          </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <PokemonCategoryInput v-model="payload.category" />
         </div>
-        <div class="row">
-          <div class="col">
-            <TarCheckbox id="is-baby" label="Is Baby?" v-model="payload.isBaby" />
-            <TarCheckbox id="is-legendary" label="Is Legendary?" v-model="payload.isLegendary" />
-            <TarCheckbox id="is-mythical" label="Is Mythical?" v-model="payload.isMythical" />
-          </div>
-          <div class="col">
-            <div class="my-3 text-end">
-              <TarButton :disabled="loading" :icon="['fas', 'times']" text="Reset" type="reset" variant="warning" />
-            </div>
+        <div class="col">
+          <RegionSelect required v-model="payload.region" />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <PokemonTypeSelect :exclude="[payload.secondaryType ?? '']" id="primary-type" label="Primary Type" required v-model="payload.primaryType" />
+        </div>
+        <div class="col">
+          <PokemonTypeSelect :exclude="[payload.primaryType]" id="secondary-type" label="Secondary Type" v-model="payload.secondaryType" />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <TarCheckbox id="is-baby" label="Is Baby?" v-model="payload.isBaby" />
+          <TarCheckbox id="is-legendary" label="Is Legendary?" v-model="payload.isLegendary" />
+          <TarCheckbox id="is-mythical" label="Is Mythical?" v-model="payload.isMythical" />
+        </div>
+        <div class="col">
+          <div class="my-3 text-end">
+            <TarButton :disabled="loading" :icon="['fas', 'times']" text="Reset" type="reset" variant="warning" />
           </div>
         </div>
-      </form>
+      </div>
       <template #footer>
         <TarButton :icon="['fas', 'ban']" text="Cancel" variant="secondary" @click="modal.hide()" />
         <TarButton :disabled="loading || !hasChanges" :icon="['fas', 'floppy-disk']" :loading="loading" text="Save" type="submit" />
diff --git a/frontend/src/components/RosterRemoveModal.vue b/frontend/src/components/RosterRemoveModal.vue
new file mode 100644
index 0000000..8b005f3
--- /dev/null
+++ b/frontend/src/components/RosterRemoveModal.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { TarButton, TarModal } from "logitar-vue3-ui";
+import { ref } from "vue";
+
+import RosterItem from "./RosterItem.vue";
+import type { RosterItem as RosterItemType, SavedRosterItem } from "@/types/roster";
+import { removeRosterItem } from "@/api/roster";
+
+const props = defineProps<{
+  item?: RosterItemType;
+}>();
+
+const loading = ref<boolean>(false);
+const modal = ref<InstanceType<typeof TarModal>>();
+
+const emit = defineEmits<{
+  (e: "removed", item: SavedRosterItem): void;
+}>();
+
+async function onRemove(): Promise<void> {
+  if (!loading.value && props.item) {
+    loading.value = true;
+    try {
+      const removed = await removeRosterItem(props.item.speciesId);
+      emit("removed", removed);
+      loading.value = false;
+      modal.value.hide();
+    } catch (e: unknown) {
+      loading.value = false;
+      throw e;
+    }
+  }
+}
+
+function show(): void {
+  modal.value.show();
+}
+defineExpose({ show });
+</script>
+
+<template>
+  <TarModal ref="modal" title="Remove Pokémon">
+    <template v-if="item?.destination">
+      <p>Do you really want to remove the following Pokémon from the roster?</p>
+      <RosterItem :pokemon="item.destination" />
+    </template>
+    <template #footer>
+      <TarButton :icon="['fas', 'ban']" text="Cancel" variant="secondary" @click="modal.hide()" />
+      <TarButton :disabled="loading" :icon="['fas', 'trash-can']" :loading="loading" text="Remove" variant="danger" @click="onRemove" />
+    </template>
+  </TarModal>
+</template>
diff --git a/frontend/src/components/RosterSelection.vue b/frontend/src/components/RosterSelection.vue
index ac97c0f..a6f80a2 100644
--- a/frontend/src/components/RosterSelection.vue
+++ b/frontend/src/components/RosterSelection.vue
@@ -9,6 +9,7 @@ defineProps<{
 }>();
 
 defineEmits<{
+  (e: "removed", pokemon: RosterItemType): void;
   (e: "selected", pokemon: RosterItemType): void;
 }>();
 </script>
@@ -37,8 +38,7 @@ defineEmits<{
           <div class="text-end">
             <template v-if="item.destination">
               <TarButton class="me-2" :icon="['fas', 'pen-to-square']" text="Edit" variant="primary" @click="$emit('selected', item)" />
-              <TarButton disabled :icon="['fas', 'times']" text="Remove" variant="danger" />
-              <!-- TODO(fpion): complete Remove -->
+              <TarButton :icon="['fas', 'trash-can']" text="Remove" variant="danger" @click="$emit('removed', item)" />
             </template>
             <TarButton v-else :icon="['fas', 'plus']" text="Add" variant="success" @click="$emit('selected', item)" />
           </div>
diff --git a/frontend/src/fontAwesome.ts b/frontend/src/fontAwesome.ts
index c6dd620..5622b42 100644
--- a/frontend/src/fontAwesome.ts
+++ b/frontend/src/fontAwesome.ts
@@ -1,4 +1,14 @@
-import { faArrowUpRightFromSquare, faArrowsRotate, faBan, faCheck, faFloppyDisk, faPenToSquare, faPlus, faTimes } from "@fortawesome/free-solid-svg-icons";
+import {
+  faArrowUpRightFromSquare,
+  faArrowsRotate,
+  faBan,
+  faCheck,
+  faFloppyDisk,
+  faPenToSquare,
+  faPlus,
+  faTimes,
+  faTrashCan,
+} from "@fortawesome/free-solid-svg-icons";
 import { library } from "@fortawesome/fontawesome-svg-core";
 
-library.add(faArrowUpRightFromSquare, faArrowsRotate, faBan, faCheck, faFloppyDisk, faPenToSquare, faPlus, faTimes);
+library.add(faArrowUpRightFromSquare, faArrowsRotate, faBan, faCheck, faFloppyDisk, faPenToSquare, faPlus, faTimes, faTrashCan);
diff --git a/frontend/src/views/RosterView.vue b/frontend/src/views/RosterView.vue
index 0d214fc..7f674d7 100644
--- a/frontend/src/views/RosterView.vue
+++ b/frontend/src/views/RosterView.vue
@@ -1,17 +1,22 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { inject, onMounted, ref } from "vue";
 import { TarButton, TarTab, TarTabs } from "logitar-vue3-ui";
 
 import RosterEditModal from "@/components/RosterEditModal.vue";
+import RosterRemoveModal from "@/components/RosterRemoveModal.vue";
 import RosterSelection from "@/components/RosterSelection.vue";
 import RosterStatistics from "@/components/RosterStatistics.vue";
 import type { PokemonRoster, RosterItem, SavedRosterItem } from "@/types/roster";
 import { readRoster } from "@/api/roster";
+import { toastsKey, type ToastUtils } from "@/App";
+
+const toasts = inject(toastsKey) as ToastUtils;
 
 const loading = ref<boolean>(false);
 const roster = ref<PokemonRoster>();
 const selectedItem = ref<RosterItem>();
 const editModal = ref<InstanceType<typeof RosterEditModal>>();
+const removeModal = ref<InstanceType<typeof RosterRemoveModal>>();
 
 async function refresh(): Promise<void> {
   if (!loading.value) {
@@ -26,7 +31,7 @@ async function refresh(): Promise<void> {
   }
 }
 
-function onSave(saved: SavedRosterItem): void {
+function updateRoster(saved: SavedRosterItem): void {
   if (roster.value) {
     const index = roster.value.items.findIndex((item) => item.speciesId === selectedItem.value?.speciesId);
     if (index >= 0) {
@@ -35,7 +40,18 @@ function onSave(saved: SavedRosterItem): void {
     roster.value.stats = saved.stats;
   }
 }
-
+function onRemoved(saved: SavedRosterItem): void {
+  updateRoster(saved);
+  toasts.success({ text: "The roster item has been removed successfully." });
+}
+function onRemoving(item: RosterItem): void {
+  selectedItem.value = item;
+  removeModal.value?.show();
+}
+function onSaved(saved: SavedRosterItem): void {
+  updateRoster(saved);
+  toasts.success({ text: "The roster item has been saved successfully." });
+}
 function onSelected(item: RosterItem): void {
   selectedItem.value = item;
   editModal.value?.show();
@@ -52,8 +68,9 @@ onMounted(refresh);
     </div>
     <TarTabs v-if="roster">
       <TarTab active title="Selection">
-        <RosterSelection :items="roster.items" @selected="onSelected" />
-        <RosterEditModal :item="selectedItem" :items="roster.items" ref="editModal" @saved="onSave" />
+        <RosterSelection :items="roster.items" @removed="onRemoving" @selected="onSelected" />
+        <RosterEditModal :item="selectedItem" :items="roster.items" ref="editModal" @saved="onSaved" />
+        <RosterRemoveModal :item="selectedItem" ref="removeModal" @removed="onRemoved" />
       </TarTab>
       <TarTab title="Statistics">
         <RosterStatistics :statistics="roster.stats" />