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">
-    <div class="flex flex-row place-content-center bg-amber-300 text-sky-700">
+  <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">{{ 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 { Papers } from './Papers.vue'
+import { type 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',
+          value: 'Anfrage',
+          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">
-    <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>
+    <fieldset class="flex flex-row mb-4">
+      <legend>Kategorie</legend>
+      <select
+        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 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,
-    paperFilter: Array,
+    paperQuery: Object,
+    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 v-if="filteredData.length">
+  <ul
+    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