implement basic topic view

This commit is contained in:
Vri 🌈 2023-06-30 13:54:53 +02:00
parent 44ffa3ac7d
commit 66e99a3775
Signed by: vrifox
GPG key ID: D40098E5B60B2197
5 changed files with 53 additions and 16 deletions

View file

@ -28,7 +28,7 @@ onMounted (async () => {
<SearchBar /> <SearchBar />
</header> </header>
<main class="flex flex-row max-w-5xl m-auto"> <main class="max-w-5xl m-auto">
<RouterView> <RouterView>
</RouterView> </RouterView>
</main> </main>

View file

@ -79,7 +79,9 @@ onUpdated(() => {
<article <article
class="p-4 rounded-lg bg-background-100 dark:bg-background-900" class="p-4 rounded-lg bg-background-100 dark:bg-background-900"
> >
<p class="text-xl">{{ topic.papers[0].name }}</p> <RouterLink :to="'themen/' + topic.reference">
<p class="text-xl">{{ topic.papers[0].name }}</p>
</RouterLink>
<p> <p>
{{ date(topic.papers[0].published_at) }}: {{ date(topic.papers[0].published_at) }}:
<a <a

View file

@ -13,7 +13,7 @@ const routes: Array<any> = [
}, { }, {
path: '/themen/:reference', path: '/themen/:reference',
name: 'topics.show', name: 'topics.show',
component: ()=>import("@/views/TopicsShow.vue") component: ()=>import("@/views/TopicShow.vue")
}, { }, {
path: '/karte', path: '/karte',
name: 'map', name: 'map',

View file

@ -4,6 +4,10 @@ import TopicList from '@/components/papers/TopicList.vue'
</script> </script>
<template> <template>
<FilterSidebar /> <div
<TopicList /> class="flex flex-row"
>
<FilterSidebar />
<TopicList />
</div>
</template> </template>

View file

@ -1,20 +1,51 @@
<script setup lang="ts"> <script setup lang="ts">
/* import { computed } from 'vue' import { computed } from 'vue'
import type { Paper } from '@/types' import { useRoute, useRouter } from 'vue-router';
import { useRoute } from 'vue-router' import { state } from '@/stores';
import type { Topic } from '@/types';
const props = defineProps({ const router = useRouter()
papers: Array<Paper>,
})
const route = useRoute() const route = useRoute()
const topicId = computed(() => {
return route.params.id const routeId = computed(() => {
return route.params.reference
}) })
const topic = computed(() => { const topic = computed(() => {
return props.papers?.find( (paper: any) => paper.reference == topicId.value ) return state.topics?.find( (topic: Topic) => topic.reference == routeId.value )
}) */ })
const firstPaper = computed(() => {
return topic.value?.papers[0]
})
function goBack() {
return router.go(-1)
}
</script> </script>
<template> <template>
{{ $route.name }} <div class="flex flex-row gap-4 justify-center mt-4">
<button
class="bg-background-100 dark:bg-background-900 p-4 rounded-lg"
@click.prevent="goBack()"
>🔙
</button>
<p>{{ topic?.papers[0].name }}</p>
<p>{{ routeId }}</p>
<a
class="bg-background-100 dark:bg-background-900 p-4 rounded-lg"
:href="firstPaper?.url"
>🔗
</a>
</div>
<div class="p-8 mt-10 bg-background-100 dark:bg-background-900 rounded-xl">
<p class="text-2xl">Dokumente</p>
<ul class="list-disc">
<li
v-for="(paper, i) of topic?.papers"
:key="i"
>
<p>{{ paper.name }}</p>
</li>
</ul>
</div>
</template> </template>