sync

src/App.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import MainMenu from '@/components/MainMenu.vue'
 import SearchBar from '@/components/SearchBar.vue'
+import FilterView from './components/papers/FilterView.vue'
 import FooterMenu from '@/components/FooterMenu.vue'
 
 export type Papers = {
@@ -19,6 +20,7 @@ export default {
   components: {
     MainMenu,
     SearchBar,
+    FilterView,
     FooterMenu,
   },
   data() {
@@ -29,12 +31,15 @@ export default {
         value: '',
         type: '',
       },
-      apiUri: 'https://raw.githubusercontent.com/CodeforLeipzig/stadtratmonitor/master/input.json', 
-      papers: [] as Papers[],
-      paperFilter: {
-        type: '',
+      filter: {
+        type: {
+          key: '',
+          value: '',
+        },
         originator: '',
       },
+      apiUri: 'https://raw.githubusercontent.com/CodeforLeipzig/stadtratmonitor/master/input.json', 
+      papers: [] as Papers[],
     }
   },
   methods: {
@@ -64,7 +69,11 @@ export default {
   <main class="flex flex-row max-w-5xl m-auto">
 
   </main>
-    <RouterView :papers="papers"></RouterView>
+    <RouterView
+      :papers="papers"
+      :search="search"
+      :filter="filter"
+    ></RouterView>
   <footer>
     <!-- <FooterMenu /> -->
   </footer>

src/components/papers/FilterView.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
   updated() {
-    this.$emit('paperFilter', this.paperFilter)
+    this.$emit('filter', this.filter)
   },
   data() {
     return {
@@ -51,7 +51,7 @@ export default {
           key: 'WA',
         },
       ],
-      paperFilter: {
+      filter: {
         type: {
           key: '',
           value: '',
@@ -83,7 +83,7 @@ export default {
       <legend>Kategorie</legend>
       <select
         class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
-        v-model="paperFilter.type">
+        v-model="filter.type">
         <option
           v-for="(type, i) of paperTypes"
           :key="i"
@@ -93,7 +93,7 @@ export default {
       </select>
       <button 
         class="pl-2"
-        @click.prevent="paperFilter.type = { key: '', value: ''}"
+        @click.prevent="filter.type = { key: '', value: ''}"
         title="zurücksetzen"
         >✖
       </button>
@@ -102,12 +102,12 @@ export default {
       <legend>Einreicher</legend>
       <select 
         class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
-        v-model="paperFilter.originator">
+        v-model="filter.originator">
         <option v-for="(originator, i) of paperOriginators" :key="i">{{ originator }}</option>
       </select>
       <button 
         class="pl-2"
-        @click.prevent="paperFilter.originator = ''"
+        @click.prevent="filter.originator = ''"
         title="zurücksetzen"
         >✖
       </button>

src/components/papers/TopicList.vue

@@ -3,30 +3,30 @@ import { type Papers } from '@/App.vue'
 
 export default {
   props: {
-    papers: Array<any>,
-    paperQuery: Object,
-    paperFilter: Object,
+    search: Object,
+    filter: Object,
+    topics: Object,
   },
   computed: {
     filteredData() {
-      const paperQuery: String = this.paperQuery?.value
-      let filteredPapers: Papers[] = this.papers
+      const paperQuery: String = this.search?.value
+      let filteredTopics: any = this.topics?.paper
       if (paperQuery !== '') {
-        filteredPapers = this.papers.filter((paper) => {
+        filteredTopics = this.topics?.paper.filter((paper: any) => {
           return paper.name.toLowerCase().includes(paperQuery.toLowerCase()) || paper.content.toLowerCase().includes(paperQuery.toLowerCase()) || paper.reference.toLowerCase().includes(paperQuery.toLowerCase())
         })
       }
-      if (this.paperFilter?.type !== '') {
-        filteredPapers = filteredPapers.filter((paper) => {
-          return paper.reference.includes(this.paperFilter?.type.key) && paper.paper_type.includes(this.paperFilter?.type.value)
+      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 (this.paperFilter?.originator !== '') {
-        filteredPapers = filteredPapers.filter((paper) => {
-          return paper.originator.includes(this.paperFilter?.originator)
+      if (this.filter?.originator !== '') {
+        filteredTopics = filteredTopics.filter((topic: any) => {
+          return topic.originator.includes(this.filter?.originator)
         })
       }
-      return filteredPapers
+      return filteredTopics
     }, 
   },
   methods: {
@@ -43,7 +43,7 @@ export default {
 
 <template>
   <ul
-    v-if="filteredData.length"
+    v-if="filteredData"
     class="w-full grid grid-flow-row gap-2 my-2"
   >
     <p>Wir konnten {{ filteredData.length }} Einträge finden</p>
@@ -60,11 +60,11 @@ export default {
       </article>
     </li>
   </ul>
-  <p
+<!--   <p
     class="flex place-content-center my-60 text-lg"
-    v-else-if="papers.length"
+    v-else-if="topics?.length"
     >Für dieses Anfrage liegen uns keine Ergebnisse vor.
-  </p>
+  </p> -->
   <p
     class="flex place-content-center my-60 text-lg"
     v-else

src/router/index.ts

@@ -3,7 +3,11 @@ import Landing from '@/views/TheLanding.vue'
 
 const routes: Array<any> = [
     { path: '/', name: 'landing', component: Landing },
-    { path: '/themen/', name: 'topics', component: ()=>import("@/views/TheTopics.vue") },
+    {
+        path: '/themen/', 
+        name: 'topics',
+        component: ()=>import("@/views/TheTopics.vue"),
+    },
     { path: '/themen/:reference', name: 'topics.show', component: ()=>import("@/views/TopicsShow.vue") },
     { path: '/karte', name: 'map', component: ()=>import("@/views/TheMap.vue") },
     { path: '/doku', name: 'documentation', component: ()=>import("@/views/TheDocumentation.vue") },

src/views/TheTopics.vue

@@ -1,33 +1,39 @@
 <script lang="ts">
 import FilterView from '@/components/papers/FilterView.vue'
-import PaperList from '@/components/papers/PaperList.vue'
+import TopicList from '@/components/papers/TopicList.vue'
 
 export default {
   components: {
     FilterView,
-    PaperList,
-  },
-  data() {
-    return {
-      papers: this.papers,
-    }
+    TopicList,
   },
   computed: {
     topics() {
-      return [...new Set(this.papers?.map((paper: any) => paper.reference))]
-    }
+      const topicReferences = [...new Set(this.papers?.map((paper: any) => paper.reference))]
+      return topicReferences.map( (entry: any) => {
+        return {
+          'ref': entry, 
+          'paper': this.papers?.find( (paper: any) => paper.reference == entry)
+        }
+      })
+    }, 
+  }, 
+  props: {
+    papers: Array,
+    search: Object,
+    filter: Object,
   }
 }
 </script>
 
 <template>
   <FilterView
-    @paperFilter="(filter) => paperFilter = filter"
-    :papers="papers"
-  />
-  <PaperList
-    :paperQuery="search"
-    :paperFilter="paperFilter"
-  />
-  {{ topics }}
+      @filter="(filter: any) => filter = filter"
+      :papers="papers"
+    />
+  <TopicList
+    :topics="topics"
+    :search="search"
+    :filter="filter"
+  ></TopicList>
 </template>

src/views/TopicShow.vue

@@ -8,6 +8,9 @@ export default {
       this.papers?.find( (paper: any) => paper.reference == this.topicId )
     }
   },
+  props: {
+    papers: Array,
+  },
 }
 </script>