74 lines
2.3 KiB
Vue
74 lines
2.3 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import type { Client, HistoryEntry } from '~/types'
|
||
|
|
|
||
|
|
definePageMeta({ middleware: 'auth' })
|
||
|
|
|
||
|
|
const route = useRoute()
|
||
|
|
const clientId = Number(route.params.id)
|
||
|
|
|
||
|
|
const { fetchClient } = useClient()
|
||
|
|
const { entries, fetchEntries } = useHistory(clientId)
|
||
|
|
|
||
|
|
const client = ref<Client | null>(null)
|
||
|
|
client.value = await fetchClient(clientId)
|
||
|
|
await fetchEntries()
|
||
|
|
|
||
|
|
const labelMap: Record<string, string> = {
|
||
|
|
phone_call: 'Telefonat',
|
||
|
|
consultation: 'Beratungsgespräch',
|
||
|
|
recommendation: 'Empfehlung',
|
||
|
|
instruction: 'Anweisung',
|
||
|
|
remark: 'Bemerkung',
|
||
|
|
other: 'Sonstiges',
|
||
|
|
}
|
||
|
|
|
||
|
|
const formatDate = (iso: string) =>
|
||
|
|
new Date(iso).toLocaleString('de-DE', { dateStyle: 'short', timeStyle: 'short' })
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
window.print()
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div v-if="client" class="print-page p-8 max-w-3xl mx-auto font-sans text-sm text-gray-900">
|
||
|
|
<h1 class="text-lg font-bold mb-1">Mandantenakte</h1>
|
||
|
|
<p class="text-gray-500 mb-6 text-xs">Gedruckt: {{ new Date().toLocaleString('de-DE') }}</p>
|
||
|
|
|
||
|
|
<table class="w-full mb-6 border-collapse text-sm">
|
||
|
|
<tr class="border-b border-gray-200">
|
||
|
|
<td class="py-1 text-gray-500 w-40">Mandantennummer</td>
|
||
|
|
<td class="py-1 font-mono">{{ client.client_number }}</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="border-b border-gray-200">
|
||
|
|
<td class="py-1 text-gray-500">Name</td>
|
||
|
|
<td class="py-1">{{ client.name }}</td>
|
||
|
|
</tr>
|
||
|
|
<template v-for="(val, key) in client.notes" :key="key">
|
||
|
|
<tr class="border-b border-gray-200">
|
||
|
|
<td class="py-1 text-gray-500">{{ key }}</td>
|
||
|
|
<td class="py-1">{{ val }}</td>
|
||
|
|
</tr>
|
||
|
|
</template>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h2 class="font-semibold mb-3">Verlauf</h2>
|
||
|
|
<div v-for="entry in entries" :key="entry.id" class="mb-4 border-t border-gray-200 pt-3">
|
||
|
|
<div class="flex gap-3 text-xs text-gray-500 mb-1">
|
||
|
|
<span class="font-medium text-gray-700">{{ labelMap[entry.type] ?? entry.type }}</span>
|
||
|
|
<span>{{ formatDate(entry.created_at) }}</span>
|
||
|
|
<span>{{ entry.author_name }}</span>
|
||
|
|
</div>
|
||
|
|
<p class="whitespace-pre-wrap text-gray-800">{{ entry.body }}</p>
|
||
|
|
</div>
|
||
|
|
<p v-if="entries.length === 0" class="text-gray-400 italic">Keine Einträge.</p>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
@media print {
|
||
|
|
.print-page { padding: 0; }
|
||
|
|
@page { margin: 2cm; }
|
||
|
|
}
|
||
|
|
</style>
|