sync

src/App.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import MainMenu from './components/MainMenu.vue'
 import Search from './components/Search.vue'
+import Filter from './components/Filter.vue'
 import Papers from './components/Papers.vue'
 import FooterMenu from './components/FooterMenu.vue'
 
@@ -8,6 +9,7 @@ export default {
   components: {
     MainMenu,
     Search,
+    Filter,
     Papers,
     FooterMenu,
   },
@@ -19,10 +21,15 @@ export default {
         value: '',
         type: '',
       },
+      papers: [],
+      paperFilter: {
+        type: '',
+        originator: '',
+      },
     }
   }
 }
-</script>
+</script>search.value
 
 <template>
   <header class="w-screen flex flex-col place-content-center">
@@ -36,9 +43,16 @@ export default {
     />
   </header>
 
-  <main class="max-w-5xl m-auto">
-    <p>Ergebnisse für „{{ search.value }}/{{ search.type }}“</p>
-    <Papers :filterValue="search.value" />
+  <main class="flex flex-row max-w-5xl m-auto">
+    <Filter
+      @paperFilter="(filter) => paperFilter = filter"
+      :papers="papers"
+    />
+    <Papers
+      @papers="(p) => papers = p"
+      :filterValue="search.value"
+      :paperFilter="paperFilter"
+    />
   </main>
 
   <footer>

src/components/Filter.vue

@@ -0,0 +1,62 @@
+<script lang="ts">
+import { toValue } from 'vue'
+import { Papers } from './Papers.vue'
+
+export default {
+  updated() {
+    this.$emit('paperFilter', this.paperFilter)
+    /* this.paperFilter.type = this.paperTypes.key this.paperFilter.type. */
+  },
+  data() {
+    return {
+      paperTypes: [
+        {
+          key: 'DS',
+          value: 'Beschlussvorlage',
+        },
+        {
+          key: 'A',
+          value: 'Antrag',
+        }
+      ],
+      paperFilter: {
+        type: '',
+        originator: '',
+      },
+    }
+  },
+  props: {
+    papers: Array<Papers>,
+  },
+  computed: {
+    paperOriginators() {
+      return [...new Set(this.papers?.map((paper: Papers) => paper.originator))]
+    },
+    /* paperType() {
+      return this.paperTypes.filter((type) => type.key == )
+    }, */
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<template>
+  <form class="mr-4 mt-4">
+    <select
+      class="w-40"
+      v-model="paperFilter.type">
+      <option
+        v-for="(type, i) of paperTypes"
+        :key="i"
+        >{{ type.value }}
+      </option>
+    </select>
+    <select 
+      class="w-40"
+      v-model="paperFilter.originator">
+      <option v-for="(originator, i) of paperOriginators" :key="i">{{ originator }}</option>
+    </select>
+  </form>
+</template>

src/components/Papers.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-type Papers = {
+export type Papers = {
   body: string
   content: string
   name: string
@@ -15,6 +15,9 @@ export default {
   created() {
     this.fetchData()
   },
+  updated() {
+    this.$emit('papers', this.papers)
+  },
   data() {
     return {
       apiUri: 'https://raw.githubusercontent.com/CodeforLeipzig/stadtratmonitor/master/input.json', 
@@ -23,12 +26,22 @@ export default {
   }, 
   props: {
     filterValue: String,
+    paperFilter: Array,
   },
   computed: {
     filteredData() {
-      const filterValue: string = this.filterValue
-      let filteredPapers: Papers[] = []
-      filteredPapers = this.papers.filter((paper) => paper.name.includes(filterValue))
+      const filterValue: String = this.filterValue
+      let filteredPapers: Papers[] = this.papers
+      if (filterValue !== '') {
+        filteredPapers = this.papers.filter((paper) => {
+          return paper.name.toLowerCase().includes(filterValue.toLowerCase())
+        })
+      }
+      if (this.paperFilter?.type !== '') {
+        filteredPapers = filteredPapers.filter((paper) => {
+          return paper.reference.includes(this.paperFilter?.type)
+        })
+      }
       return filteredPapers
     }
   },
@@ -42,6 +55,7 @@ export default {
 </script>
 
 <template>
+  {{ paperFilter }}
   <ul v-if="filteredData.length">
     <li v-for="(paper, i) in filteredData" :key="i">
       <article