improve topic list
This commit is contained in:
parent
51a2501d98
commit
cc546007a0
3 changed files with 62 additions and 43 deletions
|
@ -66,14 +66,15 @@ onUpdated(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<form class="mr-4 mt-4">
|
<form class="mr-4 mt-4 flex flex-row gap-4">
|
||||||
<label for="typeSelect">Kategorie</label>
|
<label class="hidden" for="typeSelect">Kategorie</label>
|
||||||
<div class="flex flex-row mb-4">
|
<div class="flex flex-row mb-4">
|
||||||
<select
|
<select
|
||||||
id="typeSelect"
|
id="typeSelect"
|
||||||
class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
|
class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
|
||||||
v-model="filterType"
|
v-model="filterType"
|
||||||
>
|
>
|
||||||
|
<option value="" selected disabled>Kategorie</option>
|
||||||
<option
|
<option
|
||||||
v-for="(type, i) of paperTypes"
|
v-for="(type, i) of paperTypes"
|
||||||
:key="i"
|
:key="i"
|
||||||
|
@ -82,18 +83,19 @@ onUpdated(() => {
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
<button
|
<button
|
||||||
class="pl-2"
|
class="pl-1"
|
||||||
@click.prevent="resetFilterType()"
|
@click.prevent="resetFilterType()"
|
||||||
title="zurücksetzen"
|
title="zurücksetzen"
|
||||||
>✖
|
>✖
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<label for="originatorSelect">Einreicher</label>
|
<label class="hidden" for="originatorSelect">Einreicher</label>
|
||||||
<div class="flex flex-row mb-4">
|
<div class="flex flex-row mb-4">
|
||||||
<select
|
<select
|
||||||
id="originatorSelect"
|
id="originatorSelect"
|
||||||
class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
|
class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
|
||||||
v-model="filterOriginator">
|
v-model="filterOriginator">
|
||||||
|
<option value="" selected disabled>Einreicher</option>
|
||||||
<option
|
<option
|
||||||
v-for="(originator, i) of paperOriginators"
|
v-for="(originator, i) of paperOriginators"
|
||||||
:key="i"
|
:key="i"
|
||||||
|
@ -101,7 +103,7 @@ onUpdated(() => {
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
<button
|
<button
|
||||||
class="pl-2"
|
class="pl-1"
|
||||||
@click.prevent="resetFilterOriginator()"
|
@click.prevent="resetFilterOriginator()"
|
||||||
title="zurücksetzen"
|
title="zurücksetzen"
|
||||||
>✖
|
>✖
|
||||||
|
|
|
@ -51,56 +51,73 @@ const filteredData = computed(() => {
|
||||||
})
|
})
|
||||||
let filteredDataLength: number = 0
|
let filteredDataLength: number = 0
|
||||||
|
|
||||||
function objectLength(data: any) {
|
async function objectLength(data: any) {
|
||||||
return Object.keys(data).length
|
return await Object.keys(await data).length
|
||||||
}
|
}
|
||||||
function date(paperDate: string) {
|
function date(paperDate: string) {
|
||||||
const date = new Date(paperDate)
|
const date = new Date(paperDate)
|
||||||
return new Intl.DateTimeFormat('de-DE', { dateStyle: 'full' }).format(date)
|
return new Intl.DateTimeFormat('de-DE', { dateStyle: 'long' }).format(date)
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
filteredDataLength = objectLength(filteredData)
|
objectLength(filteredData).then((length) => {
|
||||||
|
filteredDataLength = length;
|
||||||
|
})
|
||||||
})
|
})
|
||||||
onUpdated(() => {
|
onUpdated(() => {
|
||||||
filteredDataLength = objectLength(filteredData)
|
objectLength(filteredData).then((length) => {
|
||||||
|
filteredDataLength = length;
|
||||||
|
})
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ul
|
<div class="flex flex-col mt-2">
|
||||||
v-if="filteredDataLength > 0"
|
|
||||||
class="w-full grid grid-flow-row gap-2 my-2"
|
|
||||||
>
|
|
||||||
<p>Wir konnten {{ filteredDataLength }} Einträge finden</p>
|
<p>Wir konnten {{ filteredDataLength }} Einträge finden</p>
|
||||||
<li
|
<ul
|
||||||
v-for="(topic, i) in filteredData"
|
v-if="filteredDataLength >= 0"
|
||||||
:key="i"
|
class="w-full grid grid-flow-row gap-4 my-2 grid-cols-1 md:grid-cols-2 2xl:grid-cols-3"
|
||||||
>
|
>
|
||||||
<article
|
<li
|
||||||
class="p-4 rounded-lg bg-background-100 dark:bg-background-900"
|
class="flex flex-col px-6 py-4 gap-2 rounded-lg bg-background-100 dark:bg-background-900 max-w-md"
|
||||||
|
v-for="(topic, i) in filteredData"
|
||||||
|
:key="i"
|
||||||
>
|
>
|
||||||
<RouterLink :to="'themen/' + topic.reference">
|
<div class="flex gap-3 flex-wrap">
|
||||||
<p class="text-xl">{{ topic.papers[0].name }}</p>
|
<span
|
||||||
</RouterLink>
|
class="inline-block px-3 py-2 rounded-lg bg-background-200 dark:bg-background-800 text-text-700 dark:text-text-300 whitespace-nowrap"
|
||||||
<p>
|
>{{ date(topic.papers[0].published_at) }}</span>
|
||||||
{{ date(topic.papers[0].published_at) }}:
|
<span
|
||||||
|
class="inline-block px-3 py-2 rounded-lg bg-background-200 dark:bg-background-800 text-text-700 dark:text-text-300"
|
||||||
|
>{{ topic.papers[0].originator }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="my-2">
|
||||||
|
<p class="font-bold">{{ topic.papers[0].paper_type}}</p>
|
||||||
|
<RouterLink
|
||||||
|
class="text-2xl"
|
||||||
|
:to="'themen/' + topic.reference"
|
||||||
|
>{{ topic.papers[0].name }}</RouterLink>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row gap-3 mt-auto ml-auto">
|
||||||
|
<RouterLink
|
||||||
|
class="px-3 py-2 rounded-xl bg-primary-button-400 dark:bg-background-800 text-text-800 dark:text-text-200"
|
||||||
|
:to="'themen/' + topic.reference"
|
||||||
|
>Details</RouterLink>
|
||||||
<a
|
<a
|
||||||
|
class="px-3 py-2 rounded-xl bg-secondary-button-200 dark:bg-secondary-button-800 text-text-800 dark:text-text-200"
|
||||||
:href="topic.papers[0].url"
|
:href="topic.papers[0].url"
|
||||||
class="text-secondary-button-600 dark:text-secondary-button-400"
|
>Extern öffnen</a>
|
||||||
>{{ topic.papers[0].paper_type}} von {{ topic.papers[0].originator }}
|
</div>
|
||||||
</a>
|
</li>
|
||||||
</p>
|
</ul>
|
||||||
</article>
|
<p
|
||||||
</li>
|
class="flex place-content-center my-60 text-lg"
|
||||||
</ul>
|
v-else-if="state.topics?.length"
|
||||||
<p
|
>Für dieses Anfrage liegen uns keine Ergebnisse vor.
|
||||||
class="flex place-content-center my-60 text-lg"
|
</p>
|
||||||
v-else-if="state.topics?.length"
|
<p
|
||||||
>Für dieses Anfrage liegen uns keine Ergebnisse vor.
|
class="flex place-content-center my-60 text-lg"
|
||||||
</p>
|
v-else
|
||||||
<p
|
>Da scheint etwas schief gelaufen zu sein.
|
||||||
class="flex place-content-center my-60 text-lg"
|
</p>
|
||||||
v-else
|
</div>
|
||||||
>Da scheint etwas schief gelaufen zu sein.
|
|
||||||
</p>
|
|
||||||
</template>
|
</template>
|
|
@ -7,9 +7,9 @@ import SearchBar from '@/components/SearchBar.vue'
|
||||||
<template>
|
<template>
|
||||||
<SearchBar />
|
<SearchBar />
|
||||||
<div
|
<div
|
||||||
class="flex flex-row place-content-center xl:w-3/4 place-self-center"
|
class="flex flex-col place-content-center xl:w-3/4 place-self-center"
|
||||||
>
|
>
|
||||||
<FilterSidebar />
|
<FilterSidebar />
|
||||||
<TopicList class="grow" />
|
<TopicList />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
Loading…
Reference in a new issue