sync

src/components/FooterMenu.vue

@@ -1,21 +1,24 @@
-<script lang="ts">
-export default {
-  data() {
-    return {
-      menuEntries: this.footerMenuEntries,
-    }
+<script setup lang="ts">
+const entries = {
+  0: {
+    name: 'Impressum',
+    uri: '/impressum',
   }, 
+  1: {
+    name: 'Über diese Seite',
+    uri: '/über',
+  },
 }
 </script>
 
 <template>
   <ul class="flex flex-row place-content-center">
     <li
-      v-for="{entry, i} of menuEntries"
-      :key="i"
       class="p-2 place-content-center"
+      v-for="{entry, i} of entries"
+      :key="i"
     >
-      <a :href="entry.uri">{{ entry.name }}</a>
+      <RouterLink :to="entry.uri">{{ entry.name }}</RouterLink>
     </li>
   </ul>
 </template>

src/components/MainMenu.vue

@@ -1,10 +1,17 @@
-<script lang="ts">
-export default {
-  data() {
-    return {
-      entries: this.mainMenuEntries
-    }
-  }
+<script setup lang="ts">
+const entries = {
+  0: {
+    name: 'Themen',
+    uri: '/themen',
+  }, 
+  1: {
+    name: 'Karte',
+    uri: '/karte',
+  },
+  2: {
+    name: 'Dokumentation', 
+    uri: '/doku',
+  },
 }
 </script>
 

src/components/SearchBar.vue

@@ -1,23 +1,11 @@
-<script lang="ts">
-export default {
-  updated() {
-    this.$emit('searchQuery', this.search.value)
-  },
-  data() {
-    return {
-      search: {
-        value: '',
-        type: '',
-      },
-    }
-  },
-  methods: {
-    submit(type: string) {
-      this.search.type = type
-      this.$emit('searchSubmit', this.search.type)
-    }
-  },
-}
+<script setup lang="ts">
+import { updateSearch } from '@/stores';
+import { onUpdated, ref } from 'vue';
+
+let searchValue = ref('')
+let searchType = ref('')
+function submit(type: string) { searchType = ref(type) }
+onUpdated(() => updateSearch(searchValue, searchType))
 </script>
 
 <template>
@@ -27,7 +15,7 @@ export default {
         class="p-6 grow bg-transparent placeholder:text-text-300 dark:placeholder:text-text-700 text-2xl text-center focus-visible:outline focus-visible:outline-current"
         type="search"
         placeholder="z. B. Thema, Name, VII-EF-08640, …"
-        v-model="search.value"
+        v-model="searchValue"
         @keyup.alt.enter.exact="submit('assist')"
         @keyup.enter.exact="submit('filter')"
         />
@@ -48,4 +36,5 @@ export default {
       </div>
     </div>
   </form>
+  {{ searchValue + searchType }}
 </template>

src/components/papers/FilterSidebar.vue

@@ -1,13 +1,8 @@
 <script setup lang="ts">
 import type { Paper, Filter } from '@/types'
+import { state, updateFilter } from '@/stores';
 import { computed, onUpdated } from 'vue';
-import { useRoute } from 'vue-router';
 
-const route = useRoute()
-
-const props = defineProps<{
-  papers: Array<Paper>,
-}>()
 const paperTypes = [
   {
     value: 'Anfrage',
@@ -52,13 +47,13 @@ const filter: Filter = {
   originator: '',
 }
 const paperOriginators = computed(() => {
-  return [...new Set(props.papers?.map((paper: Paper) => paper.originator))].sort()
+  return [...new Set(state.papers?.map((paper: Paper) => paper.originator))].sort()
 })
 /* const paperType = computed(() => {
   return paperTypes.filter((type) => type.key == )
 }) */
 onUpdated(() => {
-  route.$emit('filter', filter)
+  updateFilter(filter.type.key, filter.type.value, filter.originator)
 })
 </script>
 

src/components/papers/TopicList.vue

@@ -1,49 +1,51 @@
 <script setup lang="ts">
-import type { Topic, Search, Filter } from '@/types'
-import { computed } from 'vue';
+import { state } from '@/stores'
+import type { Topic } from '@/types';
+import { computed, onMounted, onUpdated } from 'vue';
 
-const props = defineProps<{
-  topics: Array<Topic>,
-  search: Search,
-  filter: Filter,
-}>()
 const filteredData = computed(() => {
-  //const searchValue: string = search['value'];
-  let filteredTopics = props.topics
-  /* if (searchValue !== '') {
-    filteredTopics = this.topics?.filter((topic: Object) => {
-      return topic.papers?.filter().name.toLowerCase().includes(searchValue.toLowerCase()) || paper.content.toLowerCase().includes(searchValue.toLowerCase()) || paper.reference.toLowerCase().includes(searchValue.toLowerCase())
-    }) as Array<Object>
-  } */
-/*       if (this.filter?.type !== '') {
+  const searchValue: string = state.search.value;
+  let filteredTopics = state.topics
+  if (state.search.value !== '') {
+    filteredTopics = state.topics?.filter((topic: Topic) => {
+      return topic.papers?.filter((paper) => {
+        paper.name.toLowerCase().includes(searchValue.toLowerCase()) /* || paper.content.toLowerCase().includes(searchValue.toLowerCase()) || paper.reference.toLowerCase().includes(searchValue.toLowerCase()) */
+      })
+    })
+  }
+  /* 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.filter?.originator !== '') {
+  } */
+  /* if (this.filter?.originator !== '') {
     filteredTopics = filteredTopics.filter((topic: any) => {
       return topic.originator.includes(this.filter?.originator)
     })
   } */
   return filteredTopics
 })
-const filteredDataLength = computed(() => {
-  if (filteredData.value !== undefined) {
-    return Object.keys(filteredData).length
-  } else {
-    return 0
-  }
-})
+let filteredDataLength: number = 0
 
-function date(paperDate: Date) {
+function objectLength(data: any) {
+  return Object.keys(data).length
+}
+function date(paperDate: string) {
   const date = new Date(paperDate)
   return new Intl.DateTimeFormat('de-DE', { dateStyle: 'full' }).format(date)
 }
+onMounted(() => {
+  filteredDataLength = objectLength(filteredData)
+})
+onUpdated(() => {
+  filteredDataLength = objectLength(filteredData)
+})
 </script>
 
 <template>
+  {{ state.search.value }}
   <ul
-    v-if="filteredDataLength"
+    v-if="filteredDataLength > 0"
     class="w-full grid grid-flow-row gap-2 my-2"
   >
     <p>Wir konnten {{ filteredDataLength }} Einträge finden</p>
@@ -55,15 +57,15 @@ function date(paperDate: Date) {
         class="p-4 rounded-lg bg-background-100 dark:bg-background-900"
       >
         <h4 class="text-xl">{{ topic.papers[0].name }}</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> -->
+        <p>{{ date(topic.papers[0].published_at) }}: <a :href="topic.papers[0].url" class="text-secondary-button-500">{{ topic.papers[0].paper_type}} von {{ topic.papers[0].originator }}</a></p>
       </article>
     </li>
   </ul>
-<!--   <p
+  <p
     class="flex place-content-center my-60 text-lg"
-    v-else-if="topics?.length"
+    v-else-if="state.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