From 5be09a78570c32d008dcea286069dcf02deb8d29 Mon Sep 17 00:00:00 2001
From: Francis Pion <francispion@hotmail.com>
Date: Thu, 4 Jan 2024 13:27:25 -0500
Subject: [PATCH] Code cleanup. (#14)

* Updated Logitar Vue3 UI.

* Removed a todo.

* Completed Toasts and error handling.

* Removed package-lock.json

* Removed package-log.json

* Returning the saved item.

* Using saved return item and exclude selected types.

* Added a refresh button.

* Fixed toasts.

* Fixed sorts and added an action column.

* Code clean-up.

* Code cleanup.
---
 frontend/package.json                        |   2 +-
 frontend/src/assets/style.css                | 125 +++++++++++++++++++
 frontend/src/components/RosterItemForm.vue   |   2 +-
 frontend/src/components/RosterSelection.vue  |   6 +-
 frontend/src/components/RosterStatistics.vue |  10 +-
 frontend/src/main.ts                         |   2 +-
 frontend/src/views/RosterView.vue            |   4 +-
 frontend/yarn.lock                           |   8 +-
 8 files changed, 142 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/assets/style.css

diff --git a/frontend/package.json b/frontend/package.json
index f6038eb..68555c0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,7 +22,7 @@
     "@fortawesome/vue-fontawesome": "^3.0.5",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.2",
-    "logitar-vue3-ui": "^2.0.2",
+    "logitar-vue3-ui": "^2.0.5",
     "pinia": "^2.1.7",
     "vue": "^3.3.11",
     "vue-router": "^4.2.5"
diff --git a/frontend/src/assets/style.css b/frontend/src/assets/style.css
new file mode 100644
index 0000000..bc18bf1
--- /dev/null
+++ b/frontend/src/assets/style.css
@@ -0,0 +1,125 @@
+.badge[data-v-4065aa16] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  flex-shrink: 0;
+  font-size: inherit;
+  font-weight: 400;
+  line-height: 1;
+  max-width: 100%;
+  text-align: center;
+  overflow: visible;
+  position: relative;
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+}
+button[data-v-19270d92]:disabled {
+  cursor: not-allowed !important;
+}
+.toast.toast-primary[data-v-b5177847] {
+  background-color: #e6f2ffd9;
+  border-color: #b8daffd9;
+  color: #004085;
+}
+.toast.toast-primary.toast-solid[data-v-b5177847] {
+  background-color: #e6f2ff;
+}
+.toast.toast-primary .toast-header[data-v-b5177847] {
+  color: #004085;
+  background-color: #cce5ffd9;
+  border-bottom-color: #b8daffd9;
+}
+.toast.toast-secondary[data-v-b5177847] {
+  background-color: #eff0f1d9;
+  border-color: #d6d8dbd9;
+  color: #383d41;
+}
+.toast.toast-secondary.toast-solid[data-v-b5177847] {
+  background-color: #eff0f1;
+}
+.toast.toast-secondary .toast-header[data-v-b5177847] {
+  color: #383d41;
+  background-color: #e2e3e5d9;
+  border-bottom-color: #d6d8dbd9;
+}
+.toast.toast-success[data-v-b5177847] {
+  background-color: #e6f5e9d9;
+  border-color: #c3e6cbd9;
+  color: #155724;
+}
+.toast.toast-success.toast-solid[data-v-b5177847] {
+  background-color: #e6f5e9;
+}
+.toast.toast-success .toast-header[data-v-b5177847] {
+  color: #155724;
+  background-color: #d4eddad9;
+  border-bottom-color: #c3e6cbd9;
+}
+.toast.toast-danger[data-v-b5177847] {
+  background-color: #fcedeed9;
+  border-color: #f5c6cbd9;
+  color: #721c24;
+}
+.toast.toast-danger.toast-solid[data-v-b5177847] {
+  background-color: #fcedee;
+}
+.toast.toast-danger .toast-header[data-v-b5177847] {
+  color: #721c24;
+  background-color: #f8d7dad9;
+  border-bottom-color: #f5c6cbd9;
+}
+.toast.toast-warning[data-v-b5177847] {
+  background-color: #fff9e7d9;
+  border-color: #ffeebad9;
+  color: #856404;
+}
+.toast.toast-warning.toast-solid[data-v-b5177847] {
+  background-color: #fff9e7;
+}
+.toast.toast-warning .toast-header[data-v-b5177847] {
+  color: #856404;
+  background-color: #fff3cdd9;
+  border-bottom-color: #ffeebad9;
+}
+.toast.toast-info[data-v-b5177847] {
+  background-color: #e5f4f7d9;
+  border-color: #bee5ebd9;
+  color: #0c5460;
+}
+.toast.toast-info.toast-solid[data-v-b5177847] {
+  background-color: #e5f4f7;
+}
+.toast.toast-info .toast-header[data-v-b5177847] {
+  color: #0c5460;
+  background-color: #d1ecf1d9;
+  border-bottom-color: #bee5ebd9;
+}
+.toast.toast-light[data-v-b5177847] {
+  background-color: #ffffffd9;
+  border-color: #fdfdfed9;
+  color: #818182;
+}
+.toast.toast-light.toast-solid[data-v-b5177847] {
+  background-color: #fff;
+}
+.toast.toast-light .toast-header[data-v-b5177847] {
+  color: #818182;
+  background-color: #fefefed9;
+  border-bottom-color: #fdfdfed9;
+}
+.toast.toast-dark[data-v-b5177847] {
+  background-color: #e3e5e5d9;
+  border-color: #c6c8cad9;
+  color: #1b1e21;
+}
+.toast.toast-dark.toast-solid[data-v-b5177847] {
+  background-color: #e3e5e5;
+}
+.toast.toast-dark .toast-header[data-v-b5177847] {
+  color: #1b1e21;
+  background-color: #d6d8d9d9;
+  border-bottom-color: #c6c8cad9;
+}
diff --git a/frontend/src/components/RosterItemForm.vue b/frontend/src/components/RosterItemForm.vue
index f6bac0f..ef351b4 100644
--- a/frontend/src/components/RosterItemForm.vue
+++ b/frontend/src/components/RosterItemForm.vue
@@ -155,7 +155,7 @@ onMounted(async () => {
             :disabled="types.length === 0"
             id="secondary-type"
             :value="payload.secondaryType || ''"
-            @input="payload.secondaryType = parsingUtils.parseNumber(($event.target as HTMLSelectElement).value) || 0"
+            @input="payload.secondaryType = parsingUtils.parseNumber(($event.target as HTMLSelectElement).value) || undefined"
           >
             <option value="">Select a Pokémon type</option>
             <option v-for="pokemonType in secondaryTypes" :key="pokemonType.number" :value="pokemonType.number">
diff --git a/frontend/src/components/RosterSelection.vue b/frontend/src/components/RosterSelection.vue
index df1c76b..38e1d2d 100644
--- a/frontend/src/components/RosterSelection.vue
+++ b/frontend/src/components/RosterSelection.vue
@@ -2,10 +2,10 @@
 import { TarButton } from "logitar-vue3-ui";
 
 import RosterItem from "./RosterItem.vue";
-import type { PokemonRoster, RosterItem as RosterItemType } from "@/types/roster";
+import type { RosterItem as RosterItemType } from "@/types/roster";
 
 defineProps<{
-  roster: PokemonRoster;
+  items: RosterItemType[];
 }>();
 
 defineEmits<{
@@ -23,7 +23,7 @@ defineEmits<{
       </tr>
     </thead>
     <tbody>
-      <tr v-for="item in roster.items" :key="item.speciesId">
+      <tr v-for="item in items" :key="item.speciesId">
         <td>
           <RosterItem :pokemon="item.source" />
         </td>
diff --git a/frontend/src/components/RosterStatistics.vue b/frontend/src/components/RosterStatistics.vue
index 33c3fff..68ef66f 100644
--- a/frontend/src/components/RosterStatistics.vue
+++ b/frontend/src/components/RosterStatistics.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { TarImage } from "logitar-vue3-ui";
 
-import type { PokemonRoster } from "@/types/roster";
+import type { RosterStatistics } from "@/types/roster";
 
 defineProps<{
-  roster: PokemonRoster;
+  statistics: RosterStatistics;
 }>();
 </script>
 
 <template>
   <div>
-    <p>Selected Pokémon: {{ roster.stats.count }}</p>
+    <p>Selected Pokémon: {{ statistics.count }}</p>
     <div class="row">
       <div class="col">
         <h2>Types</h2>
@@ -23,7 +23,7 @@ defineProps<{
             </tr>
           </thead>
           <tbody>
-            <tr v-for="pokemonType in roster.stats.types" :key="pokemonType.key">
+            <tr v-for="pokemonType in statistics.types" :key="pokemonType.key">
               <td>
                 <TarImage :src="`/img/types/${pokemonType.key.toLowerCase()}.png`" :alt="pokemonType.key" height="24" />
               </td>
@@ -44,7 +44,7 @@ defineProps<{
             </tr>
           </thead>
           <tbody>
-            <tr v-for="region in roster.stats.regions" :key="region.key">
+            <tr v-for="region in statistics.regions" :key="region.key">
               <td>{{ region.key }}</td>
               <td>{{ region.count }}</td>
               <td>{{ (region.percentage * 100).toFixed(2) }}%</td>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index d138ecd..25c14f7 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,9 +1,9 @@
 import "bootstrap";
 import "bootstrap/dist/css/bootstrap.min.css";
-// import "logitar-vue3-ui/dist/style.css"; // TODO(fpion): export css
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 
+import "./assets/style.css"; // TODO(fpion): import from library
 import "./fontAwesome";
 import App from "./App.vue";
 import router from "./router";
diff --git a/frontend/src/views/RosterView.vue b/frontend/src/views/RosterView.vue
index 5cbbbba..c05fa2a 100644
--- a/frontend/src/views/RosterView.vue
+++ b/frontend/src/views/RosterView.vue
@@ -46,13 +46,13 @@ onMounted(refresh);
     </div>
     <TarTabs v-if="roster">
       <TarTab active title="Selection">
-        <RosterSelection :roster="roster" @selected="source = $event" />
+        <RosterSelection :items="roster.items" @selected="source = $event" />
       </TarTab>
       <TarTab :disabled="!source" title="Edit">
         <RosterEdit v-if="source && roster" :item="source" :roster="roster" @saved="onSave" />
       </TarTab>
       <TarTab title="Statistics">
-        <RosterStatistics :roster="roster" />
+        <RosterStatistics :statistics="roster.stats" />
       </TarTab>
     </TarTabs>
   </main>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index c2f0069..060bdf9 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2152,10 +2152,10 @@ lodash@^4.17.21:
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-logitar-vue3-ui@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/logitar-vue3-ui/-/logitar-vue3-ui-2.0.2.tgz#784c0486ae1b4b6f458f279dc37797471b2a5cef"
-  integrity sha512-Vd/q7FiUa3kRVMusqTXJbXWb7aqKJJvrznLTyzx7dqT5w+agVwblp+rh//0Gu1AQlrQXWGdiqKScZeY6Es+EZw==
+logitar-vue3-ui@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/logitar-vue3-ui/-/logitar-vue3-ui-2.0.5.tgz#68e2b5b6726007dd41397d4d32ac8dbbeddf9b7c"
+  integrity sha512-7e6rE/6ledK9+BdrPHraOXneygLE9NEJnGXhFAuOJt/1UTdoxTN3iboU0GLX651y/9ULWFcdtKXTyyaNKc32Dw==
   dependencies:
     md5 "^2.3.0"
     nanoid "^5.0.4"