stadtratmonitor-vue/src/components/Papers.vue

<script lang="ts">
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 {
  created() {
    this.fetchData()
  },
  updated() {
    this.$emit('papers', this.papers)
  },
  data() {
    return {
      apiUri: 'https://raw.githubusercontent.com/CodeforLeipzig/stadtratmonitor/master/input.json', 
      papers: [] as Papers[],
    }
  }, 
  props: {
    paperQuery: Object,
    paperFilter: Object,
  },
  computed: {
    filteredData() {
      const paperQuery: String = this.paperQuery?.value
      let filteredPapers: Papers[] = this.papers
      if (paperQuery !== '') {
        filteredPapers = this.papers.filter((paper) => {
          return paper.name.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.paperFilter?.originator !== '') {
        filteredPapers = filteredPapers.filter((paper) => {
          return paper.originator.includes(this.paperFilter?.originator)
        })
      }
      return filteredPapers
    }
  },
  methods: {
    async fetchData() {
      this.papers = await (await fetch(this.apiUri)).json()
    }, 
    openPaper() {}
  },
}
</script>

<template>
  <ul
    v-if="filteredData.length"
    class="w-full grid grid-flow-row gap-2 my-2"
  >
    <li v-for="(paper, 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>{{ paper.published_at }}: {{ paper.paper_type}} von {{ paper.originator }}</p>
      </article>
    </li>
  </ul>
  <p
    class="flex place-content-center my-60 text-lg"
    v-else-if="papers.length"
    >Für dieses Anfrage liegen uns keine Ergebnisse vor.
  </p>
  <p
    class="flex place-content-center my-60 text-lg"
    v-else
    >Da scheint etwas schief gelaufen zu sein.
  </p>
</template>