97 lines
2.2 KiB
Vue
97 lines
2.2 KiB
Vue
<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> |