Full CRUD for publications; link fruits to publications; upload per-fruit PDF descriptions and fruit images stored as BYTEA; fruit detail page shows publication descriptions and images. ImageOverlayDrawer for cover thumbnail full-size view. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
57 lines
1.8 KiB
Vue
57 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted } from 'vue'
|
|
import { usePublicationStore } from '../stores/publicationStore'
|
|
|
|
const store = usePublicationStore()
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
await store.fetchPublications()
|
|
} catch {
|
|
// error already set in store
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mx-auto max-w-4xl p-6">
|
|
<div class="mb-4 flex items-center justify-between">
|
|
<h1 class="text-2xl font-bold">Publikationen</h1>
|
|
<router-link
|
|
to="/publications/new"
|
|
class="rounded bg-green-600 px-4 py-2 text-white hover:bg-green-700"
|
|
>
|
|
Neue Publikation
|
|
</router-link>
|
|
</div>
|
|
|
|
<div v-if="store.loading" class="text-gray-500">Lade…</div>
|
|
<div v-else-if="store.error" class="text-red-600">{{ store.error }}</div>
|
|
<div v-else-if="store.publications.length === 0" class="text-gray-500">
|
|
Keine Publikationen vorhanden.
|
|
</div>
|
|
<table v-else class="w-full border-collapse text-sm">
|
|
<thead>
|
|
<tr class="bg-gray-100 text-left">
|
|
<th class="border px-3 py-2">Titel</th>
|
|
<th class="border px-3 py-2">Autor</th>
|
|
<th class="border px-3 py-2">OSDB Kürzel</th>
|
|
<th class="border px-3 py-2"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="pub in store.publications" :key="pub.id" class="hover:bg-gray-50">
|
|
<td class="border px-3 py-2">{{ pub.title }}</td>
|
|
<td class="border px-3 py-2">{{ pub.author ?? '—' }}</td>
|
|
<td class="border px-3 py-2 font-mono text-xs">{{ pub.osdb_pub_id }}</td>
|
|
<td class="border px-3 py-2">
|
|
<router-link :to="`/publications/${pub.id}`" class="text-blue-600 hover:underline">
|
|
Details
|
|
</router-link>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|