improve topic list

This commit is contained in:
Vri 🌈 2023-07-19 17:45:00 +02:00
parent 51a2501d98
commit cc546007a0
Signed by: vrifox
GPG key ID: D40098E5B60B2197
3 changed files with 62 additions and 43 deletions

View file

@ -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"
> >

View file

@ -51,46 +51,62 @@ 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>
<ul
v-if="filteredDataLength >= 0"
class="w-full grid grid-flow-row gap-4 my-2 grid-cols-1 md:grid-cols-2 2xl:grid-cols-3"
>
<li <li
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" v-for="(topic, i) in filteredData"
:key="i" :key="i"
> >
<article <div class="flex gap-3 flex-wrap">
class="p-4 rounded-lg bg-background-100 dark:bg-background-900" <span
> 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"
<RouterLink :to="'themen/' + topic.reference"> >{{ date(topic.papers[0].published_at) }}</span>
<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"
<p> >{{ topic.papers[0].originator }}</span>
{{ date(topic.papers[0].published_at) }}: </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>
</p>
</article>
</li> </li>
</ul> </ul>
<p <p
@ -103,4 +119,5 @@ onUpdated(() => {
v-else v-else
>Da scheint etwas schief gelaufen zu sein. >Da scheint etwas schief gelaufen zu sein.
</p> </p>
</div>
</template> </template>

View file

@ -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>