Completed roster selection. (#17)

Utar94 · Jan 5, 2024 · a16d61f · a16d61f
1 parent 8fc8b06
commit a16d61f
Show file tree

Hide file tree

Showing 8 changed files with 248 additions and 176 deletions.
diff --git 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/"
+VITE_APP_API_BASE_URL="http://localhost:43551/"
+__VITE_APP_API_BASE_URL="https://localhost:32772/"
diff --git a/frontend/src/assets/logitar-vue3-ui.css 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
@@ -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
@@ -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 { PokemonType } from "@/types/pokemon";
 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
@@ -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>