sync

src/App.vue

@@ -67,13 +67,12 @@ export default {
   </header>
 
   <main class="flex flex-row max-w-5xl m-auto">
-
-  </main>
     <RouterView
       :papers="papers"
       :search="search"
       :filter="filter"
     ></RouterView>
+  </main>
   <footer>
     <!-- <FooterMenu /> -->
   </footer>

src/components/papers/TopicList.vue

@@ -5,18 +5,18 @@ export default {
   props: {
     search: Object,
     filter: Object,
-    topics: Object,
+    topics: Array<Object>,
   },
   computed: {
-    filteredData() {
+    filteredData(): Array<Object> {
       const paperQuery: String = this.search?.value
-      let filteredTopics: any = this.topics?.paper
-      if (paperQuery !== '') {
-        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.filter?.type !== '') {
+      let filteredTopics: Array<Object> = this.topics as Array<Object>
+      /* if (paperQuery !== '') {
+        filteredTopics = this.topics?.filter((topic: Object) => {
+          return topic.papers?.filter().name.toLowerCase().includes(paperQuery.toLowerCase()) || paper.content.toLowerCase().includes(paperQuery.toLowerCase()) || paper.reference.toLowerCase().includes(paperQuery.toLowerCase())
+        }) as Array<Object>
+      } */
+/*       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)
         })
@@ -25,7 +25,7 @@ export default {
         filteredTopics = filteredTopics.filter((topic: any) => {
           return topic.originator.includes(this.filter?.originator)
         })
-      }
+      } */
       return filteredTopics
     }, 
   },
@@ -37,26 +37,31 @@ export default {
       const date = new Date(paperDate)
       return new Intl.DateTimeFormat('de-DE', { dateStyle: 'full' }).format(date)
     },
+    filteredDataLength(): Number {
+      return Object.keys(this.filteredData).length
+    },
   },
 }
 </script>
 
 <template>
+  {{ topics }}
   <ul
-    v-if="filteredData"
+    v-if="filteredDataLength"
     class="w-full grid grid-flow-row gap-2 my-2"
   >
-    <p>Wir konnten {{ filteredData.length }} Einträge finden</p>
+    <p>Wir konnten {{ filteredDataLength }} Einträge finden</p>
+    {{ filteredData }}
     <li 
-      v-for="(paper, i) in filteredData"
+      v-for="(topic, i) in filteredData"
       :key="i"
     >
       <article
         class="p-4 rounded-lg bg-background-100 dark:bg-background-900"
         @click.prevent="openPaper()"
       >
-        <h4 class="text-xl">{{ paper.name }}</h4>
-        <p>{{ date(paper.published_at) }}: <a :href="paper.url" class="text-secondary-button-500">{{ paper.paper_type}} von {{ paper.originator }}</a></p>
+        <h4 class="text-xl">{{ topic }}</h4>
+        <p>{{ date(topic.papers[0].published_at) }}: <a :href="topic.papers[0].url" class="text-secondary-button-500">{{ paper.paper_type}} von {{ paper.originator }}</a></p>
       </article>
     </li>
   </ul>

src/router/index.ts

@@ -7,6 +7,7 @@ const routes: Array<any> = [
         path: '/themen/', 
         name: 'topics',
         component: ()=>import("@/views/TheTopics.vue"),
+        props: { topics: true },
     },
     { path: '/themen/:reference', name: 'topics.show', component: ()=>import("@/views/TopicsShow.vue") },
     { path: '/karte', name: 'map', component: ()=>import("@/views/TheMap.vue") },

src/views/TheTopics.vue

@@ -8,12 +8,12 @@ export default {
     TopicList,
   },
   computed: {
-    topics() {
+    topics(): Array<Object> {
       const topicReferences = [...new Set(this.papers?.map((paper: any) => paper.reference))]
-      return topicReferences.map( (entry: any) => {
+      return topicReferences.map( (ref: String) => {
         return {
-          'ref': entry, 
-          'paper': this.papers?.find( (paper: any) => paper.reference == entry)
+          'ref': ref, 
+          'papers': this.papers?.filter( (paper: any) => paper.reference === ref) as Object,
         }
       })
     },