Add OpenAPI

src/components/CardFilterPanel.vue

@@ -0,0 +1,97 @@
+<template>
+  <Panel
+      header="Search"
+  >
+
+    <FloatLabel variant="in">
+      <InputText
+          id="in_label"
+          v-model="searchValue"
+          @update="$emit('update:modelValue', $event.target.value)"
+          autocomplete="off"
+      />
+      <label for="in_label">Search by Card name</label>
+    </FloatLabel>
+
+    <div
+        class="flex flex-row gap-2 mt-4"
+    >
+      <!-- Card Subtype-->
+      <Listbox
+          class="w-30"
+          v-model="selectedCardTypes"
+          :options="cardTypes"
+          multiple
+          optionLabel="name"
+      />
+
+      <!-- Monster Card Subtype-->
+      <Listbox
+          class="w-30"
+          v-model="selectedMonsterCardTypes"
+          :options="monsterCardTypes"
+          multiple
+          :disabled="!selectedCardTypes.map(type => type.name).includes('Monster')"
+      />
+
+      <!-- Trap Card Subtype-->
+      <Listbox
+          class="w-30"
+          v-model="selectedTrapCardTypes"
+          :options="trapCardTypes"
+          multiple
+          :disabled="!selectedCardTypes.map(type => type.name).includes('Trap')"
+      />
+
+      <!-- Spell Card Subtype-->
+      <Listbox
+          class="w-30"
+          v-model="selectedSpellCardTypes"
+          :options="spellCardTypes"
+          multiple
+          :disabled="!selectedCardTypes.map(type => type.name).includes('Spell')"
+      />
+    </div>
+  </Panel>
+</template>
+
+<script setup lang="ts">
+import {computed, type Ref, ref, watch} from "vue";
+import {MonsterCardType, SpellCardType, TrapCardType} from "../api/openapi";
+
+type StringCardType = {
+  name: 'Monster' | 'Trap' | 'Spell'
+};
+
+const searchValue: Ref<string> = defineModel({
+  required: true,
+})
+
+const selectedCardTypes: Ref<StringCardType[]> = ref([]);
+const selectedMonsterCardTypes: Ref<string[]> = ref([]);
+const selectedSpellCardTypes: Ref<string[]> = ref([]);
+const selectedTrapCardTypes: Ref<string[]> = ref([]);
+
+
+const cardTypes = ref([
+  {name: 'Monster'},
+  {name: 'Trap'},
+  {name: 'Spell'}
+]);
+
+const monsterCardTypes: Ref<string[]> = ref(
+    Object.values(MonsterCardType)
+);
+
+const spellCardTypes: Ref<string[]> = ref(
+    Object.values(SpellCardType)
+);
+
+const trapCardTypes: Ref<string[]> = ref(
+    Object.values(TrapCardType)
+);
+</script>
+
+<style scoped>
+
+</style>