implement originator filter

improve type filter selection
fix TypeScript errors
2023-06-16 15:30:38 +02:00 · 2023-06-16 15:30:19 +02:00 · 2023-06-16 15:29:40 +02:00 · 2023-06-16 15:29:25 +02:00 · 2023-06-16 15:27:45 +02:00 · 2023-06-16 15:27:35 +02:00
7 changed files with 178 additions and 101 deletions
--- a/index.html
+++ b/index.html
@ -6,7 +6,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stadtratmonitor</title>
  </head>
-  <body>
+  <body class="bg-background-50 dark:bg-background-950 text-text-950 dark:text-text-50">
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
--- a/src/App.vue
+++ b/src/App.vue
@ -29,11 +29,11 @@ export default {
    }
  }
 }
-</script>search.value
+</script>
 <template>
-  <header class="w-screen flex flex-col place-content-center">
+  <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 bg-amber-300 text-sky-700">
+    <div class="flex flex-row place-content-center">
      <h1 class="p-2 text-xl">{{ applicationName }} {{ cityName }}</h1>
      <MainMenu />
    </div>
@ -50,7 +50,7 @@ export default {
    />
    <Papers
      @papers="(p) => papers = p"
-      :filterValue="search.value"
+      :paperQuery="search"
      :paperFilter="paperFilter"
    />
  </main>
--- a/src/assets/base.css
+++ b/src/assets/base.css
@ -1,55 +1,3 @@
 /* color palette from <https://github.com/vuejs/theme> */
 :root {
  --vt-c-white: #ffffff;
  --vt-c-white-soft: #f8f8f8;
  --vt-c-white-mute: #f2f2f2;
  --vt-c-black: #181818;
  --vt-c-black-soft: #222222;
  --vt-c-black-mute: #282828;
  --vt-c-indigo: #2c3e50;
  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
  --vt-c-text-light-1: var(--vt-c-indigo);
  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
  --vt-c-text-dark-1: var(--vt-c-white);
  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
 }
 /* semantic color variables for this project */
 :root {
  --color-background: var(--vt-c-white);
  --color-background-soft: var(--vt-c-white-soft);
  --color-background-mute: var(--vt-c-white-mute);
  --color-border: var(--vt-c-divider-light-2);
  --color-border-hover: var(--vt-c-divider-light-1);
  --color-heading: var(--vt-c-text-light-1);
  --color-text: var(--vt-c-text-light-1);
  --section-gap: 160px;
 }
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--vt-c-black);
    --color-background-soft: var(--vt-c-black-soft);
    --color-background-mute: var(--vt-c-black-mute);
    --color-border: var(--vt-c-divider-dark-2);
    --color-border-hover: var(--vt-c-divider-dark-1);
    --color-heading: var(--vt-c-text-dark-1);
    --color-text: var(--vt-c-text-dark-2);
  }
 }
 *,
 *::before,
 *::after {
@ -60,13 +8,7 @@
 body {
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-background);
  transition: color 0.5s, background-color 0.5s;
  line-height: 1.6;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
--- a/src/components/Filter.vue
+++ b/src/components/Filter.vue
@ -1,26 +1,63 @@
 <script lang="ts">
-import { toValue } from 'vue'
+import { type Papers } from './Papers.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: 'Anfrage',
-          value: 'Beschlussvorlage',
+          key: 'F',
        },
        {
          value: 'Einwohneranfrage',
          key: 'EF',
        },
        {
          key: 'A',
          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',
        },
      ],
      paperFilter: {
-        type: '',
+        type: {
          key: '',
          value: '',
        },
        originator: '',
      },
    }
@ -44,19 +81,38 @@ export default {
 <template>
  <form class="mr-4 mt-4">
    <fieldset class="flex flex-row mb-4">
      <legend>Kategorie</legend>
      <select
-      class="w-40"
+        class="w-40 p-2 bg-background-100 rounded-lg"
        v-model="paperFilter.type">
        <option
          v-for="(type, i) of paperTypes"
          :key="i"
          :value="type"
          >{{ type.value }}
        </option>
      </select>
      <button 
        class="pl-2"
        @click.prevent="paperFilter.type = { key: '', value: ''}"
        title="zurücksetzen"
        >✖
      </button>
    </fieldset>
    <fieldset class="flex flex-row mb-4">
      <legend>Einreicher</legend>
      <select 
-      class="w-40"
+        class="w-40 p-2 bg-background-100 rounded-lg"
        v-model="paperFilter.originator">
        <option v-for="(originator, i) of paperOriginators" :key="i">{{ originator }}</option>
      </select>
      <button 
        class="pl-2"
        @click.prevent="paperFilter.originator = ''"
        title="zurücksetzen"
        >✖
      </button>
    </fieldset>
  </form>
 </template>
--- a/src/components/Papers.vue
+++ b/src/components/Papers.vue
@ -25,21 +25,26 @@ export default {
    }
  }, 
  props: {
-    filterValue: String,
+    paperQuery: Object,
-    paperFilter: Array,
+    paperFilter: Object,
  },
  computed: {
    filteredData() {
-      const filterValue: String = this.filterValue
+      const paperQuery: String = this.paperQuery?.value
      let filteredPapers: Papers[] = this.papers
-      if (filterValue !== '') {
+      if (paperQuery !== '') {
        filteredPapers = this.papers.filter((paper) => {
-          return paper.name.toLowerCase().includes(filterValue.toLowerCase())
+          return paper.name.toLowerCase().includes(paperQuery.toLowerCase())
        })
      }
      if (this.paperFilter?.type !== '') {
        filteredPapers = filteredPapers.filter((paper) => {
-          return paper.reference.includes(this.paperFilter?.type)
+          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
@ -55,8 +60,10 @@ export default {
 </script>
 <template>
-  {{ paperFilter }}
+  <ul
-  <ul v-if="filteredData.length">
+    v-if="filteredData.length"
    class="w-full"
  >
    <li v-for="(paper, i) in filteredData" :key="i">
      <article
        class="my-4 p-2 border border-solid border-amber-300 rounded-md"
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@ -21,29 +21,29 @@ export default {
 </script>
 <template>
-  <form class="sticky top-0 flex flex-row place-content-center bg-amber-200">
+  <form class="sticky top-0 flex flex-row place-content-center">
    <div class="flex flex-row w-full max-w-5xl">
      <input
-        class="p-6 grow bg-transparent placeholder:text-amber-400 text-sky-700 text-2xl text-center focus-visible:outline focus-visible:outline-current"
+        class="p-6 grow bg-transparent placeholder:text-text-200 text-2xl text-center focus-visible:outline focus-visible:outline-current"
        type="search"
-        placeholder="Suche z. B. nach XY"
+        placeholder="z. B. XY"
        v-model="search.value"
        @keyup.alt.enter.exact="submit('assist')"
        @keyup.enter.exact="submit('filter')"
        />
        <div class="flex flex-row p-4 place-content-center">
          <button
-          class="py-2 px-4 bg-amber-400 hover:bg-amber-500 rounded-l-lg border-r-2 border-amber-500 text-white"
+          class="py-2 px-4 bg-primary-button-500 hover:bg-primary-button-600 rounded-l-lg text-white"
          @click.prevent="submit('filter')"
          aria-keyshortcuts="Enter"
-          >Filter
+          >Suchen
        </button>
        <button
-          class="py-2 px-4 bg-amber-400 hover:bg-amber-500 rounded-r-lg text-white"
+          class="py-2 px-4 bg-secondary-button-500 hover:bg-secondary-button-600 rounded-r-lg text-white"
          @click.prevent="submit('assist')"
          aria-keyshortcuts="Alt+Enter"
          title="Tastenkürzel: Alt + Enter"
-          >Assistent
+          >Fragen
        </button>
      </div>
    </div>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,11 +1,83 @@
 /** @type {import('tailwindcss').Config} */
 const colors = require('tailwindcss/colors')
 export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
-    extend: {},
+    extend: {
      colors: {
        'text': { // hand-choosen
          50: '#FDFDFD',
          100: '#F3F3F6',
          200: '#DCDCE7',
          300: '#C0BFD9',
          400: '#AAA8CF',
          500: '#8A86BB',
          600: '#6C68A1',
          700: '#554F84',
          800: '#403B67',
          900: '#2C2849',
          950: '#1A182C',
        },
        'background': { // hand-choosen
          50: '#FDFDFD',
          100: '#F3F3F6',
          200: '#DCDCE7',
          300: '#C0BFD9',
          400: '#AAA8CF',
          500: '#8A86BB',
          600: '#6C68A1',
          700: '#554F84',
          800: '#403B67',
          900: '#2C2849',
          950: '#1A182C',
        },
        'primary-button': { // hand-choosen
          DEFAULT: '#1550A3',
          50: '#F7FBFF',
          100: '#B2DBFF',
          200: '#75B3F1',
          300: '#4185D2',
          400: '#2562B9',
          500: '#1550A3',
          600: '#0C428E',
          700: '#043078',
          800: '#012668',
          900: '#001E58',
          950: '#000C24',
        },
        'secondary-button': colors.slate,
        'accent': colors.amber,
 /*      'secondary-button': {
          DEFAULT: '#e2e5e9',
          100: '#d8dade',
          200: '#ced0d3',
          300: '#c4c6c8',
          400: '#babbbe',
          500: '#b0b1b3',
          600: '#a6a7a9',
          700: '#9c9d9e',
          800: '#939394',
          900: '#898a8a',
        },
        'accent': {
          DEFAULT: '#f8d841',
          100: '#fdf8df',
          200: '#fdf4cf',
          300: '#fcf1bf',
          400: '#fbedae',
          500: '#fbe99c',
          600: '#fae589',
          700: '#f9e175',
          800: '#f9dc5e',
          900: '#f8d841',
        }, */
      }
    }
  },
  plugins: [],
 }
Author	SHA1	Message	Date
vrifox	0ce9cbaeee	implement originator filter	2023-06-16 15:30:38 +02:00
vrifox	9bbb1f3e03	improve type filter selection	2023-06-16 15:30:19 +02:00
vrifox	d08a2cfdc2	fix TypeScript errors	2023-06-16 15:29:40 +02:00
vrifox	7203110a55	improve type filter	2023-06-16 15:29:25 +02:00
vrifox	8e852e7041	fix error	2023-06-16 15:27:45 +02:00
vrifox	2fb3aada97	add more filterTypes	2023-06-16 15:27:35 +02:00
vrifox	f21308a003	improve styles	2023-06-16 15:27:12 +02:00
vrifox	780bf270ef	improve text	2023-06-16 15:25:01 +02:00
vrifox	e5f28fede7	clarify variable name	2023-06-16 15:23:23 +02:00
vrifox	db6358b0b7	remove default styles	2023-06-16 15:20:02 +02:00
vrifox	98f8647b64	customize colors	2023-06-16 15:19:38 +02:00