sync
This commit is contained in:
parent
92ab1d5d46
commit
71dc064ab6
GPG key ID:
D40098E5B60B2197
18 changed files with 316 additions and 289 deletions
106
src/components/papers/FilterSidebar.vue
Normal file
106
src/components/papers/FilterSidebar.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
<script lang="ts">
|
||||
export default {
|
||||
}
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div></div>
|
||||
Paper
|
||||
</template>
|
||||
|
|
@ -1,67 +1,61 @@
|
|||
<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 !== '') {
|
||||
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())
|
||||
}) as Array<Object>
|
||||
} */
|
||||
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 !== '') {
|
||||
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 !== '') {
|
||||
filteredTopics = filteredTopics.filter((topic: any) => {
|
||||
return topic.originator.includes(this.filter?.originator)
|
||||
})
|
||||
} */
|
||||
return filteredTopics
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openPaper() {
|
||||
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 !== '') {
|
||||
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
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
date(paperDate: string) {
|
||||
const date = new Date(paperDate)
|
||||
return new Intl.DateTimeFormat('de-DE', { dateStyle: 'full' }).format(date)
|
||||
},
|
||||
filteredDataLength(): Number {
|
||||
return Object.keys(this.filteredData).length
|
||||
},
|
||||
},
|
||||
function date(paperDate: Date) {
|
||||
const date = new Date(paperDate)
|
||||
return new Intl.DateTimeFormat('de-DE', { dateStyle: 'full' }).format(date)
|
||||
}
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue