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>
<template>
<form class="mr-4 mt-4">
<label for="typeSelect">Kategorie</label>
<form class="mr-4 mt-4 flex flex-row gap-4">
<label class="hidden" for="typeSelect">Kategorie</label>
<div class="flex flex-row mb-4">
<select
id="typeSelect"
class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
v-model="filterType"
>
<option value="" selected disabled>Kategorie</option>
<option
v-for="(type, i) of paperTypes"
:key="i"
@ -82,18 +83,19 @@ onUpdated(() => {
</option>
</select>
<button
class="pl-2"
class="pl-1"
@click.prevent="resetFilterType()"
title="zurücksetzen"
>
</button>
</div>
<label for="originatorSelect">Einreicher</label>
<label class="hidden" for="originatorSelect">Einreicher</label>
<div class="flex flex-row mb-4">
<select
id="originatorSelect"
class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
v-model="filterOriginator">
<option value="" selected disabled>Einreicher</option>
<option
v-for="(originator, i) of paperOriginators"
:key="i"
@ -101,7 +103,7 @@ onUpdated(() => {
</option>
</select>
<button
class="pl-2"
class="pl-1"
@click.prevent="resetFilterOriginator()"
title="zurücksetzen"
>

View file

@ -51,46 +51,62 @@ const filteredData = computed(() => {
})
let filteredDataLength: number = 0
function objectLength(data: any) {
return Object.keys(data).length
async function objectLength(data: any) {
return await Object.keys(await data).length
}
function date(paperDate: string) {
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(() => {
filteredDataLength = objectLength(filteredData)
objectLength(filteredData).then((length) => {
filteredDataLength = length;
})
})
onUpdated(() => {
filteredDataLength = objectLength(filteredData)
objectLength(filteredData).then((length) => {
filteredDataLength = length;
})
})
</script>
<template>
<ul
v-if="filteredDataLength > 0"
class="w-full grid grid-flow-row gap-2 my-2"
>
<div class="flex flex-col mt-2">
<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
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"
>
<article
class="p-4 rounded-lg bg-background-100 dark:bg-background-900"
>
<RouterLink :to="'themen/' + topic.reference">
<p class="text-xl">{{ topic.papers[0].name }}</p>
</RouterLink>
<p>
{{ date(topic.papers[0].published_at) }}:
<div class="flex gap-3 flex-wrap">
<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"
>{{ date(topic.papers[0].published_at) }}</span>
<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
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"
class="text-secondary-button-600 dark:text-secondary-button-400"
>{{ topic.papers[0].paper_type}} von {{ topic.papers[0].originator }}
</a>
</p>
</article>
>Extern öffnen</a>
</div>
</li>
</ul>
<p
@ -103,4 +119,5 @@ onUpdated(() => {
v-else
>Da scheint etwas schief gelaufen zu sein.
</p>
</div>
</template>

View file

@ -7,9 +7,9 @@ import SearchBar from '@/components/SearchBar.vue'
<template>
<SearchBar />
<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 />
<TopicList class="grow" />
<TopicList />
</div>
</template>