reimplement originator filter

src/components/SearchBar.vue

@@ -4,6 +4,7 @@ import { onUpdated, ref } from 'vue';
 
 let searchValue = ref('')
 let searchType = ref('')
+
 function submit(type: string) { searchType = ref(type) }
 onUpdated(() => updateSearch(searchValue, searchType))
 </script>

src/components/papers/FilterSidebar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Paper, Filter } from '@/types'
 import { state, updateFilter } from '@/stores';
-import { computed, onUpdated } from 'vue';
+import { computed, onUpdated, reactive, ref } from 'vue';
 
 const paperTypes = [
   {
@@ -39,21 +39,28 @@ const paperTypes = [
     key: 'WA',
   },
 ]
-const filter: Filter = {
-  type: {
-    key: '',
-    value: '',
-  },
-  originator: '',
-}
+let filterTypeKey = ref('')
+let filterTypeValue = ref('')
+let filterType = reactive({
+  key: filterTypeKey.value,
+  value: filterTypeValue.value,
+})
+let filterOriginator = ref('')
+
 const paperOriginators = computed(() => {
   return [...new Set(state.papers?.map((paper: Paper) => paper.originator))].sort()
 })
 /* const paperType = computed(() => {
   return paperTypes.filter((type) => type.key == )
 }) */
+function resetFilterType() {
+  filterType = { key: '', value: '' }
+}
+function resetFilterOriginator() {
+  filterOriginator.value = ''
+}
 onUpdated(() => {
-  updateFilter(filter.type.key, filter.type.value, filter.originator)
+  updateFilter(filterTypeKey, filterTypeValue, filterOriginator)
 })
 </script>
 
@@ -63,7 +70,7 @@ onUpdated(() => {
       <legend>Kategorie</legend>
       <select
         class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
-        v-model="filter.type"
+        v-model="filterType"
         >
         <option
           v-for="(type, i) of paperTypes"
@@ -74,7 +81,7 @@ onUpdated(() => {
       </select>
       <button 
         class="pl-2"
-        @click.prevent="filter.type = { key: '', value: ''}"
+        @click.prevent="resetFilterType()"
         title="zurücksetzen"
         >✖
       </button>
@@ -83,7 +90,7 @@ onUpdated(() => {
       <legend>Einreicher</legend>
       <select 
         class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
-        v-model="filter.originator">
+        v-model="filterOriginator">
         <option
           v-for="(originator, i) of paperOriginators"
           :key="i"
@@ -92,7 +99,7 @@ onUpdated(() => {
       </select>
       <button 
         class="pl-2"
-        @click.prevent="filter.originator = ''"
+        @click.prevent="resetFilterOriginator()"
         title="zurücksetzen"
         >✖
       </button>

src/components/papers/TopicList.vue

@@ -1,34 +1,52 @@
 <script setup lang="ts">
 import { state } from '@/stores'
-import type { Topic } from '@/types';
+import type { Paper, Topic } from '@/types';
 import { computed, onMounted, onUpdated } from 'vue';
 
 const filteredData = computed(() => {
-  const searchValue: string = state.search.value;
+  const searchValue: string = state.search.value
+  const filterTypeKey: string = state.filter.type.key
+  const filterTypeValue: string = state.filter.type.value
+  const filterOriginator: string = state.filter.originator
   let filteredTopics = state.topics
 
   if (searchValue !== '') {
-    filteredTopics = state.topics?.filter((topic: Topic) => {
+    filteredTopics = filteredTopics.filter((topic: Topic) => {
       let includes = false
-      topic.papers?.filter((paper) => {
-        if (paper.name.toLowerCase().includes(searchValue.toLowerCase())
-        || paper.content.toLowerCase().includes(searchValue.toLowerCase())
-        || paper.reference.toLowerCase().includes(searchValue.toLowerCase())
-        ) { includes = true}
+
+      topic.papers?.filter((paper: Paper) => {
+        if (
+          paper.name.toLowerCase().includes(searchValue.toLowerCase())
+          || paper.content.toLowerCase().includes(searchValue.toLowerCase())
+          || paper.reference.toLowerCase().includes(searchValue.toLowerCase())
+        ) { includes = true }
       })
       return includes
     })
   }
-  /* if (this.filter?.type !== '') {
-    filteredTopics = filteredTopics.filter((topic: any) => {
-      return topic.reference.includes(this.filter?.type.key) && topic.paper_type.includes(this.filter?.type.value)
+  if (filterTypeKey !== '') {
+    filteredTopics = filteredTopics.filter((topic: Topic) => {
+      let includes = false
+
+      topic.papers?.filter((paper: Paper) => {
+        if (
+          paper.reference.toLowerCase().includes(filterTypeKey.toLowerCase())
+          && paper.paper_type.toLowerCase().includes(filterTypeValue.toLowerCase())
+        ) { includes = true }
+      })
+      return includes
     })
-  } */
-  /* if (this.filter?.originator !== '') {
-    filteredTopics = filteredTopics.filter((topic: any) => {
-      return topic.originator.includes(this.filter?.originator)
+  }
+  if (filterOriginator !== '') {
+    filteredTopics = filteredTopics.filter((topic: Topic) => {
+      let includes = false
+
+      topic.papers?.filter((paper: Paper) => {
+        if (paper.originator.toLocaleLowerCase().includes(filterOriginator.toLocaleLowerCase())) { includes = true }
+      })
+      return includes
     })
-  } */
+  }
   return filteredTopics
 })
 let filteredDataLength: number = 0

src/stores/index.ts

@@ -7,14 +7,14 @@ interface State {
   papers: Paper[],
   topics: Topic[],
   search: Search,
-  filter: Filter[],
+  filter: Filter,
 }
 
 export const state: State = reactive({
   papers: [],
   topics: [],
   search: { value: '', type: '' },
-  filter: [],
+  filter: { type: { key: '', value: '' }, originator: '',},
 })
 
 export async function fetchPapers() {
@@ -38,12 +38,12 @@ export function updateSearch(searchValue: Ref, searchType: Ref) {
   }
 }
 
-export function updateFilter(typeKey: string, typeValue: string, originator: string) {
-  state.filter = [{
+export function updateFilter(typeKey: Ref, typeValue: Ref, originator: Ref) {
+  state.filter = {
     type: {
-      key: typeKey,
-      value: typeValue,
+      key: typeKey.value,
+      value: typeValue.value,
     },
-    originator: originator,
-  }]
+    originator: originator.value,
+  }
 }