mandant-crm/frontend/components/history/HistoryForm.vue
Tim Stollberg e5e0be57da feat(frontend): scaffold Nuxt 3 CSR SPA with full auth + client/history UI
- Nuxt 3 CSR (ssr:false), @nuxtjs/tailwindcss, dev proxy to backend
- useAuth composable: CSRF cookie, XSRF token, login/logout/fetchUser
- auth middleware: redirects to /login if no session
- Login page, client list with search + create modal
- Client detail with editable name, dynamic notes (JSON), history feed
- History form with type select, inline edit/delete per entry
- Print layout at /clients/:id/print (calls window.print on mount)
- TypeScript interfaces: User, Client, HistoryEntry, PaginatedResponse
- German UI labels throughout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-23 17:33:39 +07:00

51 lines
1.7 KiB
Vue

<script setup lang="ts">
const emit = defineEmits<{ submit: [payload: { type: string; body: string }] }>()
const type = ref('phone_call')
const body = ref('')
const submitting = ref(false)
const types = [
{ value: 'phone_call', label: 'Telefonat' },
{ value: 'consultation', label: 'Beratungsgespräch' },
{ value: 'recommendation', label: 'Empfehlung' },
{ value: 'instruction', label: 'Anweisung' },
{ value: 'remark', label: 'Bemerkung' },
{ value: 'other', label: 'Sonstiges' },
]
const submit = async () => {
if (!body.value.trim()) return
submitting.value = true
emit('submit', { type: type.value, body: body.value })
body.value = ''
submitting.value = false
}
</script>
<template>
<form @submit.prevent="submit" class="border border-gray-200 bg-white p-4 space-y-3">
<div class="flex gap-3 items-start">
<div class="shrink-0">
<label class="block text-xs font-medium text-gray-600 mb-1">Typ</label>
<select v-model="type" class="border border-gray-300 px-2 py-1.5 text-sm">
<option v-for="t in types" :key="t.value" :value="t.value">{{ t.label }}</option>
</select>
</div>
<div class="flex-1">
<label class="block text-xs font-medium text-gray-600 mb-1">Eintrag</label>
<textarea
v-model="body"
rows="3"
placeholder="Notiz eingeben…"
class="w-full border border-gray-300 px-3 py-2 text-sm resize-y"
/>
</div>
</div>
<div class="flex justify-end">
<button type="submit" :disabled="submitting || !body.trim()" class="bg-blue-600 text-white px-4 py-1.5 text-sm hover:bg-blue-700 disabled:opacity-50">
Eintrag speichern
</button>
</div>
</form>
</template>