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 />
</header>
<main class="flex flex-row max-w-5xl m-auto">
<main class="max-w-5xl m-auto">
<RouterView>
</RouterView>
</main>

View file

@ -79,7 +79,9 @@ onUpdated(() => {
<article
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>
{{ date(topic.papers[0].published_at) }}:
<a

View file

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

View file

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

View file

@ -1,20 +1,51 @@
<script setup lang="ts">
/* import { computed } from 'vue'
import type { Paper } from '@/types'
import { useRoute } from 'vue-router'
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { state } from '@/stores';
import type { Topic } from '@/types';
const props = defineProps({
papers: Array<Paper>,
})
const router = useRouter()
const route = useRoute()
const topicId = computed(() => {
return route.params.id
const routeId = computed(() => {
return route.params.reference
})
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>
<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>