From a16d61fc60b65ded50a34f9179fe921a4211e9f9 Mon Sep 17 00:00:00 2001
From: Francis Pion <francispion@hotmail.com>
Date: Thu, 4 Jan 2024 22:42:54 -0500
Subject: [PATCH] Completed roster selection. (#17)

---
 frontend/.env.development                     |   4 +-
 frontend/src/assets/logitar-vue3-ui.css       | 125 +++++++++++++++++
 frontend/src/assets/style.css                 | 129 +-----------------
 frontend/src/components/PokemonTypeSelect.vue |  11 +-
 frontend/src/components/RegionSelect.vue      |  12 +-
 frontend/src/components/RosterSelection.vue   | 123 ++++++++++++-----
 frontend/src/components/SearchTextInput.vue   |  14 +-
 frontend/src/main.ts                          |   6 +-
 8 files changed, 248 insertions(+), 176 deletions(-)
 create mode 100644 frontend/src/assets/logitar-vue3-ui.css

diff --git a/frontend/.env.development b/frontend/.env.development
index 332aebf..b17af18 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:32772/"
\ No newline at end of file
+VITE_APP_API_BASE_URL="http://localhost:43551/"
+__VITE_APP_API_BASE_URL="https://localhost:32772/"
\ No newline at end of file
diff --git a/frontend/src/assets/logitar-vue3-ui.css b/frontend/src/assets/logitar-vue3-ui.css
new file mode 100644
index 0000000..bc18bf1
--- /dev/null
+++ b/frontend/src/assets/logitar-vue3-ui.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/assets/style.css b/frontend/src/assets/style.css
index bc18bf1..ae5b493 100644
--- a/frontend/src/assets/style.css
+++ b/frontend/src/assets/style.css
@@ -1,125 +1,6 @@
-.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;
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
 }
diff --git a/frontend/src/components/PokemonTypeSelect.vue b/frontend/src/components/PokemonTypeSelect.vue
index 86afb53..0374f06 100644
--- a/frontend/src/components/PokemonTypeSelect.vue
+++ b/frontend/src/components/PokemonTypeSelect.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TarSelect, type SelectOption, type SelectSize } from "logitar-vue3-ui";
+import { TarButton, TarSelect, type SelectOption, type SelectSize } from "logitar-vue3-ui";
 import { computed, onMounted, ref } from "vue";
 
 import type { PokemonType } from "@/types/pokemon";
@@ -7,6 +7,7 @@ import { searchPokemonTypes } from "@/api/pokemon";
 
 const props = withDefaults(
   defineProps<{
+    clear?: boolean;
     disabled?: boolean;
     exclude?: string[];
     floating?: boolean;
@@ -28,6 +29,7 @@ const props = withDefaults(
 
 const pokemonTypes = ref<PokemonType[]>([]);
 
+const clearId = computed<string>(() => `${props.id}-clear`);
 const options = computed<SelectOption[]>(() =>
   pokemonTypes.value
     .filter(({ uniqueName }) => !props.exclude.includes(uniqueName))
@@ -43,6 +45,7 @@ defineEmits<{
 
 <template>
   <TarSelect
+    :described-by="clear ? clearId : undefined"
     :disabled="disabled"
     :floating="floating"
     :id="id"
@@ -53,5 +56,9 @@ defineEmits<{
     :required="required"
     :size="size"
     @update:model-value="$emit('update:model-value', $event)"
-  />
+  >
+    <template v-if="clear" #append>
+      <TarButton :disabled="!modelValue" :icon="['fas', 'times']" :id="clearId" variant="danger" @click="$emit('update:model-value', '')" />
+    </template>
+  </TarSelect>
 </template>
diff --git a/frontend/src/components/RegionSelect.vue b/frontend/src/components/RegionSelect.vue
index c8d0a19..aad6bd2 100644
--- a/frontend/src/components/RegionSelect.vue
+++ b/frontend/src/components/RegionSelect.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { TarSelect, type SelectOption, type SelectSize } from "logitar-vue3-ui";
+import { TarButton, TarSelect, type SelectOption, type SelectSize } from "logitar-vue3-ui";
 import { computed, onMounted, ref } from "vue";
 
 import type { Region } from "@/types/region";
 import { searchRegions } from "@/api/region";
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
+    clear?: boolean;
     disabled?: boolean;
     floating?: boolean;
     id?: string;
@@ -26,6 +27,7 @@ withDefaults(
 
 const regions = ref<Region[]>([]);
 
+const clearId = computed<string>(() => `${props.id}-clear`);
 const options = computed<SelectOption[]>(() => regions.value.map(({ displayName, uniqueName }) => ({ text: displayName, value: uniqueName })));
 
 onMounted(async () => (regions.value = (await searchRegions({ sort: [{ field: "Number", isDescending: false }] })).items));
@@ -47,5 +49,9 @@ defineEmits<{
     :required="required"
     :size="size"
     @update:model-value="$emit('update:model-value', $event)"
-  />
+  >
+    <template v-if="clear" #append>
+      <TarButton :disabled="!modelValue" :icon="['fas', 'times']" :id="clearId" variant="danger" @click="$emit('update:model-value', '')" />
+    </template>
+  </TarSelect>
 </template>
diff --git a/frontend/src/components/RosterSelection.vue b/frontend/src/components/RosterSelection.vue
index a6f80a2..b853415 100644
--- a/frontend/src/components/RosterSelection.vue
+++ b/frontend/src/components/RosterSelection.vue
@@ -1,13 +1,55 @@
 <script setup lang="ts">
 import { TarButton } from "logitar-vue3-ui";
+import { computed, ref } from "vue";
 
+import PokemonTypeSelect from "./PokemonTypeSelect.vue";
+import RegionSelect from "./RegionSelect.vue";
 import RosterItem from "./RosterItem.vue";
+import SearchTextInput from "./SearchTextInput.vue";
 import type { RosterItem as RosterItemType } from "@/types/roster";
 
-defineProps<{
+const props = defineProps<{
   items: RosterItemType[];
 }>();
 
+const count = ref<number>(100);
+const region = ref<string>();
+const search = ref<string>();
+const type = ref<string>();
+
+const filteredItems = computed<RosterItemType[]>(() =>
+  props.items
+    .filter((item) => {
+      const terms: string[] = search.value?.split(" ") ?? [];
+      if (terms.length) {
+        for (const term of terms) {
+          const pattern = new RegExp(term, "i");
+          if (
+            !pattern.test(item.source.name) &&
+            (!item.source.category || !pattern.test(item.source.category)) &&
+            (!item.destination || (!pattern.test(item.destination.name) && (!item.destination.category || !pattern.test(item.destination.category))))
+          ) {
+            return false;
+          }
+        }
+      }
+
+      const types = [item.source.primaryType, item.source.secondaryType ?? "", item.destination?.primaryType ?? "", item.destination?.secondaryType ?? ""]
+        .filter((type) => type.length > 0)
+        .map((type) => type.toLowerCase());
+      if (type.value && !types.includes(type.value)) {
+        return false;
+      }
+
+      if (region.value && item.source.region.toLowerCase() !== region.value && item.destination?.region.toLowerCase() !== region.value) {
+        return false;
+      }
+
+      return true;
+    })
+    .slice(0, count.value),
+);
+
 defineEmits<{
   (e: "removed", pokemon: RosterItemType): void;
   (e: "selected", pokemon: RosterItemType): void;
@@ -15,35 +57,52 @@ defineEmits<{
 </script>
 
 <template>
-  <table class="table table-striped">
-    <thead>
-      <tr>
-        <th scope="col">Source</th>
-        <th scope="col">Destination</th>
-        <th scope="col">
-          <div class="text-end">Actions</div>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="item in items" :key="item.speciesId">
-        <td>
-          <RosterItem :pokemon="item.source" />
-        </td>
-        <td>
-          <RosterItem v-if="item.destination" :pokemon="item.destination" />
-          <template v-else>N/A</template>
-        </td>
-        <td>
-          <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 :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>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+  <div>
+    <div class="row">
+      <div class="col">
+        <SearchTextInput id="search" v-model="search" />
+      </div>
+      <div class="col">
+        <PokemonTypeSelect clear id="type-selection" v-model="type" />
+      </div>
+      <div class="col">
+        <RegionSelect clear id="region-selection" v-model="region" />
+      </div>
+    </div>
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th scope="col">Source</th>
+          <th scope="col">Destination</th>
+          <th scope="col">
+            <div class="text-end">Actions</div>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="item in filteredItems" :key="item.speciesId">
+          <td>
+            <RosterItem :pokemon="item.source" />
+          </td>
+          <td>
+            <RosterItem v-if="item.destination" :pokemon="item.destination" />
+            <template v-else>N/A</template>
+          </td>
+          <td>
+            <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 :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>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div v-if="count <= items.length" class="text-center">
+      <TarButton :icon="['fas', 'plus']" size="large" text="Show more results" @click="count += 100" />
+    </div>
+    <div class="mb-3"></div>
+  </div>
 </template>
diff --git a/frontend/src/components/SearchTextInput.vue b/frontend/src/components/SearchTextInput.vue
index 3326f02..4b51ace 100644
--- a/frontend/src/components/SearchTextInput.vue
+++ b/frontend/src/components/SearchTextInput.vue
@@ -20,6 +20,7 @@ const props = withDefaults(
   },
 );
 
+const clearId = computed<string>(() => `${props.id}-clear`);
 const inputPlaceholder = computed<string | undefined>(() => (props.floating ? props.placeholder ?? props.label : props.placeholder));
 
 defineEmits<{
@@ -29,7 +30,7 @@ defineEmits<{
 
 <template>
   <TarInput
-    described-by="clear-search-text"
+    :described-by="clearId"
     :disabled="disabled"
     :floating="floating"
     :label="label"
@@ -41,16 +42,7 @@ defineEmits<{
     @update:model-value="$emit('update:model-value', $event)"
   >
     <template #append>
-      <TarButton :icon="['fas', 'times']" id="clear-search-text" variant="danger" @click="$emit('update:model-value', undefined)" />
+      <TarButton :disabled="!modelValue" :icon="['fas', 'times']" :id="clearId" variant="danger" @click="$emit('update:model-value', undefined)" />
     </template>
   </TarInput>
 </template>
-
-<style scoped>
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
-  -webkit-appearance: none;
-}
-</style>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index f028021..f2ee32b 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -3,7 +3,9 @@ import "bootstrap/dist/css/bootstrap.min.css";
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 
-import "./assets/style.css"; // TODO(fpion): import from library
+import "./assets/logitar-vue3-ui.css"; // TODO(fpion): import from library
+import "./assets/style.css";
+
 import "./fontAwesome";
 import App from "./App.vue";
 import router from "./router";
@@ -29,4 +31,4 @@ app.config.errorHandler = (e) => {
 
 app.mount("#app");
 
-// Add to docker-compose.yml
+// TODO(fpion): add to docker-compose.yml