Search page fully working

src/components/ButtonCheckbox.vue

@@ -12,6 +12,7 @@ function onUpdate() {
   if (Array.isArray(props.modelValue) && props.value) {
     const newValue = [...props.modelValue]
 
+    console.log(newValue)
     if (isChecked.value) {
       newValue.splice(newValue.indexOf(props.value), 1)
     } else {

src/components/search/SearchForm.vue

@@ -12,12 +12,12 @@ interface Filters {
 const props = defineProps<{
   filters: Filters
 }>()
-const emit = defineEmits(['update:filters'])
+const emit = defineEmits<{ (e: 'update:filters', val: Filters): void }>()
 
 function updateName(name: string) {
   const obj = { ...props.filters, nameFilter: name }
   console.log(obj, name)
-  emit('update:filters', { filters: { ...props.filters, nameFilter: name } })
+  emit('update:filters', { ...props.filters, nameFilter: name })
 }
 
 function updateSeasons(seasonFilter: typeof props.filters.seasonFilter) {
@@ -35,11 +35,11 @@ function updateSkills(skillFilter: typeof props.filters.skillFilter) {
     <div class="column">
       <ItemSearch v-model="filters.nameFilter" />
     </div>
-    <!-- <div class="column">
-      <SeasonFilter :modelValue="filters.seasonFilter" @update:modelValue="updateSeasons" />
-    </div> -->
-    <!-- <div class="column">
+    <div class="column">
+      <SeasonFilter v-model="filters.seasonFilter" />
+    </div>
+    <div class="column">
       <SkillFilter v-model="filters.skillFilter" />
-    </div> -->
+    </div>
   </div>
 </template>

src/components/search/SeasonFilter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import SeasonIcon from '@/components/SeasonIcon.vue'
-import ButtonCheck from '@/components/ButtonCheckbox.vue'
+import ButtonCheckbox from '@/components/ButtonCheckbox.vue'
 import { useGeneralStore } from '@/store'
 
 interface ModelValue {
@@ -30,26 +30,26 @@ function updateExclusive(val: boolean) {
     <div class="field-body">
       <div class="field has-addons has-addons-centered">
         <div class="control" v-for="season in store.seasons" :key="season.order">
-          <button-check
+          <ButtonCheckbox
             :value="season.id"
-            :model-value="modelValue.selectedSeasons"
-            @click="updateSeasons"
+            :modelValue="modelValue.selectedSeasons"
+            @update:modelValue="updateSeasons"
           >
             <span class="icon is-small">
               <season-icon :season="season.id"></season-icon>
             </span>
-          </button-check>
+          </ButtonCheckbox>
         </div>
       </div>
       <div class="field">
         <div class="control is-expanded">
-          <button-check
+          <ButtonCheckbox
             class="is-fullwidth"
-            :model-value="modelValue.seasonExclusive"
-            @click="updateExclusive"
+            :modelValue="modelValue.seasonExclusive"
+            @update:modelValue="updateExclusive"
           >
             Exclusive
-          </button-check>
+          </ButtonCheckbox>
         </div>
       </div>
     </div>

src/components/search/SkillFilter.vue

@@ -1,3 +1,27 @@
+<script setup lang="ts">
+import SkillIcon from '@/components/SkillIcon.vue'
+import ButtonCheck from '@/components/ButtonCheckbox.vue'
+import { useGeneralStore } from '@/store'
+
+interface ModelValue {
+  selectedSkills: string[]
+  skillExclusive: boolean
+}
+
+const props = defineProps<{ modelValue: ModelValue }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: ModelValue): void }>()
+
+const store = useGeneralStore()
+
+function updateSkills(val: string[]) {
+  emit('update:modelValue', { ...props.modelValue, selectedSkills: val })
+}
+
+function updateExclusive(val: boolean) {
+  emit('update:modelValue', { ...props.modelValue, skillExclusive: val })
+}
+</script>
+
 <template>
   <div class="field is-horizontal">
     <div class="field-label is-normal">
@@ -5,68 +29,29 @@
     </div>
     <div class="field-body">
       <div class="field has-addons has-addons-centered">
-        <div class="control" v-for="skill in skills" :key="skill.id">
-          <button-check
+        <div class="control" v-for="skill in store.skills" :key="skill.id">
+          <ButtonCheckbox
             :value="skill.id"
-            :checked="value.selected_skills"
-            v-on:change="UpdateSkills"
+            :modelValue="modelValue.selectedSkills"
+            @update:modelValue="updateSkills"
           >
             <span class="icon is-small">
-              <skill-icon :skill="skill" />
+              <skill-icon :skill="skill.id" />
             </span>
-          </button-check>
+          </ButtonCheckbox>
         </div>
       </div>
       <div class="field">
         <div class="control is-expanded">
-          <button-check
+          <ButtonCheck
             class="is-fullwidth"
-            :checked="value.skill_exclusive"
-            v-on:change="UpdateExclusive"
+            :modelValue="modelValue.skillExclusive"
+            @update:modelValue="updateExclusive"
           >
             Exclusive
-          </button-check>
+          </ButtonCheck>
         </div>
       </div>
     </div>
   </div>
 </template>
-
-<script>
-import SkillIcon from '@/components/SkillIcon.vue'
-import ButtonCheck from '@/components/ButtonCheckbox.vue'
-export default {
-  name: 'skill-filter',
-  components: {
-    SkillIcon,
-    ButtonCheck
-  },
-  props: {
-    value: {
-      default() {
-        return {
-          selectedSkills: [],
-          skillExclusive: false
-        }
-      }
-    }
-  },
-  computed: {
-    skills() {
-      return this.$store.state.skills
-    }
-  },
-  methods: {
-    UpdateSkills(val) {
-      this.value.selected_skills = val
-      this.$emit('input', this.value)
-    },
-    UpdateExclusive(val) {
-      this.value.skill_exclusive = val
-      this.$emit('input', this.value)
-    }
-  }
-}
-</script>
-
-<style></style>

src/views/SearchView.vue

@@ -2,7 +2,6 @@
 import ItemCard from '@/components/item_card/ItemCard.vue'
 import ItemTable from '@/components/item_table/ItemTable.vue'
 import SearchForm from '@/components/search/SearchForm.vue'
-import ItemSearch from '@/components/search/ItemSearch.vue'
 import { useGeneralStore } from '@/store'
 import _ from 'lodash'
 import { computed, reactive } from 'vue'
@@ -87,17 +86,6 @@ const filteredItems = computed(() => {
 <template>
   <section class="section">
     <SearchForm v-model:filters="filters"></SearchForm>
-    <!-- <div class="columns">
-      <div class="column">
-        <ItemSearch v-model="filters.nameFilter" />
-      </div>
-      <div class="column">
-      <season-filter :value="seasonFilter" v-on:input="updateSeasons" />
-    </div>
-    <div class="column">
-      <skill-filter :value="skillFilter" v-on:input="updateSkills" />
-    </div>
-    </div> -->
     <section class="container">
       <div class="columns is-multiline">
         <item-table v-if="store.CompactView" :items="filteredItems" />