sync

src/App.vue

@@ -1,63 +1,38 @@
-<script lang="ts">
+<script setup lang="ts">
+import type { Paper, Search, Filter } from '@/types'
+import { papers, topics, papersfetch } from '@/store'
 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'
+import { onMounted } from 'vue'
 
-export type Papers = {
-  body: string
-  content: string
-  name: string
-  resolution: string
-  originator: string
-  paper_type: string
-  published_at: string
-  reference: string
-  url: string
-}
-
-export default {
-  components: {
-    MainMenu,
-    SearchBar,
-    FilterView,
-    FooterMenu,
-  },
-  data() {
-    return {
-      applicationName: this.applicationName,
-      cityName: this.cityName,
-      search: {
+const applicationName: string = 'Stadtratmonitor'
+const cityName: string = 'Leipzig'
+let search: Search = {
   value: '',
   type: '',
-      },
-      filter: {
+}
+let filter: Filter = {
   type: {
     key: '',
     value: '',
   },
   originator: '',
-      },
-      apiUri: 'https://raw.githubusercontent.com/CodeforLeipzig/stadtratmonitor/master/input.json', 
-      papers: [] as Papers[],
-    }
-  },
-  methods: {
-    async fetchData() {
-      this.papers = await (await fetch(this.apiUri)).json()
-    }, 
-  },
-  created() {
-    this.fetchData()
-  },
 }
+onMounted (() => papersfetch() )
+/* onMounted(() => topics.process() ) */
 </script>
 
 <template>
   <header class="w-screen flex flex-col place-content-center bg-background-100 dark:bg-background-900 text-text-900 dark:text-text-100">
     <div class="flex flex-row place-content-center">
       <h1 class="p-2 text-xl">
-        <RouterLink to="/">{{ applicationName }} {{ cityName }}</RouterLink></h1>
+        <RouterLink
+          to="/"
+          >{{ applicationName }} {{ cityName }}
+        </RouterLink>
+      </h1>
       <MainMenu />
     </div>
     <SearchBar
@@ -67,11 +42,12 @@ export default {
   </header>
 
   <main class="flex flex-row max-w-5xl m-auto">
+    {{ papers }}
     <RouterView
-      :papers="papers"
       :search="search"
       :filter="filter"
-    ></RouterView>
+      >
+    </RouterView>
   </main>
   <footer>
     <!-- <FooterMenu /> -->

src/components/papers/FilterSidebar.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { Paper, Filter } from '@/types'
+import { computed, onUpdated } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute()
+
+const props = defineProps<{
+  papers: Array<Paper>,
+}>()
+const paperTypes = [
+  {
+    value: 'Anfrage',
+    key: 'F',
+  }, {
+    value: 'Einwohneranfrage',
+    key: 'EF',
+  }, {
+    value: 'Antrag',
+    key: 'A',
+  }, {
+    value: 'Antwort zur Anfrage',
+    key: 'AW',
+  }, {
+    value: 'Änderungsantrag',
+    key: 'ÄA',
+  }, {
+    value: 'Beschlussvorlage',
+    key: 'DS',
+  }, {
+    value: 'Informationsvorlage',
+    key: 'Ifo',
+  }, {
+    value: 'Neufassung',
+    key: 'NF',
+  }, {
+    value: 'Petition',
+    key: 'P',
+  }, {
+    value: 'Verwaltungsstandpunkt',
+    key: 'VSP',
+  }, {
+    value: 'Wichtige Angelegenheit',
+    key: 'WA',
+  },
+]
+const filter: Filter = {
+  type: {
+    key: '',
+    value: '',
+  },
+  originator: '',
+}
+const paperOriginators = computed(() => {
+  return [...new Set(props.papers?.map((paper: Paper) => paper.originator))].sort()
+})
+/* const paperType = computed(() => {
+  return paperTypes.filter((type) => type.key == )
+}) */
+onUpdated(() => {
+  route.$emit('filter', filter)
+})
+</script>
+
+<template>
+  <form class="mr-4 mt-4">
+    <fieldset class="flex flex-row mb-4">
+      <legend>Kategorie</legend>
+      <select
+        class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
+        v-model="filter.type"
+        >
+        <option
+          v-for="(type, i) of paperTypes"
+          :key="i"
+          :value="type"
+          >{{ type.value }}
+        </option>
+      </select>
+      <button 
+        class="pl-2"
+        @click.prevent="filter.type = { key: '', value: ''}"
+        title="zurücksetzen"
+        >✖
+      </button>
+    </fieldset>
+    <fieldset class="flex flex-row mb-4">
+      <legend>Einreicher</legend>
+      <select 
+        class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
+        v-model="filter.originator">
+        <option
+          v-for="(originator, i) of paperOriginators"
+          :key="i"
+          >{{ originator }}
+        </option>
+      </select>
+      <button 
+        class="pl-2"
+        @click.prevent="filter.originator = ''"
+        title="zurücksetzen"
+        >✖
+      </button>
+    </fieldset>
+  </form>
+</template>

src/components/papers/FilterView.vue

@@ -1,116 +0,0 @@
-<script lang="ts">
-export default {
-  updated() {
-    this.$emit('filter', this.filter)
-  },
-  data() {
-    return {
-      paperTypes: [
-        {
-          value: 'Anfrage',
-          key: 'F',
-        },
-        {
-          value: 'Einwohneranfrage',
-          key: 'EF',
-        },
-        {
-          value: 'Antrag',
-          key: 'A',
-        },
-        {
-          value: 'Antwort zur Anfrage',
-          key: 'AW',
-        },
-        {
-          value: 'Änderungsantrag',
-          key: 'ÄA',
-        },
-        {
-          value: 'Beschlussvorlage',
-          key: 'DS',
-        },
-        {
-          value: 'Informationsvorlage',
-          key: 'Ifo',
-        },
-        {
-          value: 'Neufassung',
-          key: 'NF',
-        },
-        {
-          value: 'Petition',
-          key: 'P',
-        },
-        {
-          value: 'Verwaltungsstandpunkt',
-          key: 'VSP',
-        },
-        {
-          value: 'Wichtige Angelegenheit',
-          key: 'WA',
-        },
-      ],
-      filter: {
-        type: {
-          key: '',
-          value: '',
-        },
-        originator: '',
-      },
-    }
-  },
-  props: {
-    papers: Array<any>,
-  },
-  computed: {
-    paperOriginators() {
-      return [...new Set(this.papers?.map((paper: any) => paper.originator))].sort()
-    },
-    /* paperType() {
-      return this.paperTypes.filter((type) => type.key == )
-    }, */
-  },
-  methods: {
-
-  }
-}
-</script>
-
-<template>
-  <form class="mr-4 mt-4">
-    <fieldset class="flex flex-row mb-4">
-      <legend>Kategorie</legend>
-      <select
-        class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
-        v-model="filter.type">
-        <option
-          v-for="(type, i) of paperTypes"
-          :key="i"
-          :value="type"
-          >{{ type.value }}
-        </option>
-      </select>
-      <button 
-        class="pl-2"
-        @click.prevent="filter.type = { key: '', value: ''}"
-        title="zurücksetzen"
-        >✖
-      </button>
-    </fieldset>
-    <fieldset class="flex flex-row mb-4">
-      <legend>Einreicher</legend>
-      <select 
-        class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
-        v-model="filter.originator">
-        <option v-for="(originator, i) of paperOriginators" :key="i">{{ originator }}</option>
-      </select>
-      <button 
-        class="pl-2"
-        @click.prevent="filter.originator = ''"
-        title="zurücksetzen"
-        >✖
-      </button>
-    </fieldset>
-  </form>
-</template>

src/components/papers/PaperItem.vue

@@ -1,8 +1,6 @@
-<script lang="ts">
-export default {
-}
+<script setup lang="ts">
 </script>
 
 <template>
-    <div></div>
+  Paper
 </template>

src/components/papers/TopicList.vue

@@ -1,19 +1,18 @@
-<script lang="ts">
-import { type Papers } from '@/App.vue'
+<script setup lang="ts">
+import type { Topic, Search, Filter } from '@/types'
+import { computed } from 'vue';
 
-export default {
-  props: {
-    search: Object,
-    filter: Object,
-    topics: Array<Object>,
-  },
-  computed: {
-    filteredData(): Array<Object> {
-      const paperQuery: String = this.search?.value
-      let filteredTopics: Array<Object> = this.topics as Array<Object>
-      /* if (paperQuery !== '') {
+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(paperQuery.toLowerCase()) || paper.content.toLowerCase().includes(paperQuery.toLowerCase()) || paper.reference.toLowerCase().includes(paperQuery.toLowerCase())
+      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 !== '') {
@@ -27,41 +26,36 @@ export default {
     })
   } */
   return filteredTopics
-    }, 
-  },
-  methods: {
-    openPaper() {
+})
+const filteredDataLength = computed(() => {
+  if (filteredData.value !== undefined) {
+    return Object.keys(filteredData).length
+  } else {
+    return 0
+  }
+})
 
-    },
-    date(paperDate: string) {
+function date(paperDate: Date) {
   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="filteredDataLength"
     class="w-full grid grid-flow-row gap-2 my-2"
   >
     <p>Wir konnten {{ filteredDataLength }} Einträge finden</p>
-    {{ filteredData }}
     <li 
       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">{{ 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>
+        <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> -->
       </article>
     </li>
   </ul>

src/main.ts

@@ -8,9 +8,6 @@ const app = createApp(App)
 
 app.config.globalProperties = {
   ...app.config.globalProperties,
-  apiUri: 'https://joergreichert.de/srm/input.json',
-  applicationName: 'Stadtratmonitor',
-  cityName: 'Leipzig',
   mainMenuEntries: {
     0: {
       name: 'Themen',

src/router/index.ts

@@ -2,16 +2,28 @@ import { createRouter, createWebHistory } from 'vue-router'
 import Landing from '@/views/TheLanding.vue'
 
 const routes: Array<any> = [
-    { path: '/', name: 'landing', component: Landing },
   {
+    path: '/', 
+    name: 'landing', 
+    component: Landing
+  }, {
     path: '/themen/', 
     name: 'topics',
     component: ()=>import("@/views/TheTopics.vue"),
-        props: { topics: true },
+    props: { topics: true, search: true },
+  }, {
+    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")
   },
-    { 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") },
 ]
 
 const router: any = createRouter({

src/store/index.ts

@@ -0,0 +1,34 @@
+import { reactive, ref } from 'vue'
+import type { Paper, Topic } from '@/types'
+
+const apiUrl: URL = new URL('https://raw.githubusercontent.com/CodeforLeipzig/stadtratmonitor/master/input.json')
+
+export let papers: Array<Paper> = reactive([])
+export let topics: Array<Topic> = reactive([])
+
+export async function papersfetch() {
+  papers = await (await fetch(apiUrl)).json()
+  /* const topicReferences = await [...new Set(papers?.map((paper: Paper) => paper.reference))]
+  topics = await topicReferences.map( (reference: string) => {
+    return {
+      'reference': reference, 
+      'papers': papers?.filter( (paper: Paper) => paper.reference === reference),
+    }
+  }) */
+}
+
+/* export function paperprocess() */
+
+/* export const test = reactive({
+  testi: papers.papers, 
+  funk() {
+    return [...new Set(papers.papers?.map((paper: Paper) => paper.reference))]
+  }
+}) */
+
+/* export const  = reactive({
+  topics: Array<Topic>,
+  topicReferences: Set<String>,
+  async process() {
+  },
+}) */

src/types.ts

@@ -0,0 +1,29 @@
+export interface Topic {
+  reference: string,
+  papers: Array<Paper>,
+}
+
+export interface Paper {
+  body: string,
+  content: string,
+  name: string,
+  resolution: any,
+  originator: string,
+  paper_type: string,
+  published_at: string,
+  reference: string,
+  url: string,
+}
+
+export interface Search {
+  value: string,
+  type: string,
+}
+
+export interface Filter {
+  type: {
+    key: string,
+    value: string,
+  },
+  originator: string,
+}

src/views/TheAbout.vue

@@ -1,5 +1,4 @@
-<script lang="ts">
-export default {}
+<script setup lang="ts">
 </script>
 
 <template>

src/views/TheDocumentation.vue

@@ -1,5 +1,4 @@
-<script lang="ts">
-export default {}
+<script setup lang="ts">
 </script>
 
 <template>

src/views/TheImprint.vue

@@ -1,5 +1,4 @@
-<script lang="ts">
-export default {}
+<script setup lang="ts">
 </script>
 
 <template>

src/views/TheLanding.vue

@@ -1,5 +1,4 @@
-<script lang="ts">
-export default {}
+<script setup lang="ts">
 </script>
 
 <template>

src/views/TheMap.vue

@@ -1,5 +1,4 @@
-<script lang="ts">
-export default {}
+<script setup lang="ts">
 </script>
 
 <template>

src/views/TheTopics.vue

@@ -1,39 +1,31 @@
-<script lang="ts">
-import FilterView from '@/components/papers/FilterView.vue'
+<script setup lang="ts">
+import type { Topic, Paper, Search, Filter } from '@/types'
+import { papers } from '@/store'
+import { computed } from 'vue';
+import FilterSidebar from '@/components/papers/FilterSidebar.vue'
 import TopicList from '@/components/papers/TopicList.vue'
 
-export default {
-  components: {
-    FilterView,
-    TopicList,
-  },
-  computed: {
-    topics(): Array<Object> {
-      const topicReferences = [...new Set(this.papers?.map((paper: any) => paper.reference))]
-      return topicReferences.map( (ref: String) => {
+const props = defineProps<{
+  search: Search,
+  filter: Filter,
+}>()
+const topics = computed(() => {
+  const topicReferences = [...new Set(papers.papers?.map((paper: Paper) => paper.reference))]
+  return topicReferences.map( (reference: string) => {
     return {
-          'ref': ref, 
-          'papers': this.papers?.filter( (paper: any) => paper.reference === ref) as Object,
+      'reference': reference, 
+      'papers': papers.papers?.filter( (paper: Paper) => paper.reference === reference),
     }
-      })
-    }, 
-  }, 
-  props: {
-    papers: Array,
-    search: Object,
-    filter: Object,
-  }
-}
+  }) as Array<Topic>
+})
 </script>
 
 <template>
-  <FilterView
-      @filter="(filter: any) => filter = filter"
-      :papers="papers"
+  <FilterSidebar
+    @filter="(filter: Filter) => filter = filter"
   />
   <TopicList
-    :topics="topics"
-    :search="search"
-    :filter="filter"
-  ></TopicList>
+    :searchProp="search"
+    :filterProp="filter"
+  />
 </template>

src/views/TopicShow.vue

@@ -1,17 +1,19 @@
-<script lang="ts">
-export default {
-  computed: {
-    topicId() {
-      return this.$route.params.id
-    },
-    topic() {
-      this.papers?.find( (paper: any) => paper.reference == this.topicId )
-    }
-  },
-  props: {
-    papers: Array,
-  },
-}
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Paper } from '@/types'
+import { useRouter, useRoute } from 'vue-router'
+
+const props = defineProps({
+  papers: Array<Paper>,
+})
+const router = useRouter()
+const route = useRoute()
+const topicId = computed(() => {
+  return route.params.id
+})
+const topic = computed(() => {
+  props.papers?.find( (paper: any) => paper.reference == topicId )
+})
 </script>
 
 <template>

stadtratmonitor-vue.code-workspace

@@ -0,0 +1,8 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {}
+}

tsconfig.app.json

@@ -7,6 +7,6 @@
     "baseUrl": ".",
     "paths": {
       "@/*": [ "./src/*" ]
-    }
+    },
   }
 }