mandant-crm/frontend/composables/useClient.ts
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

59 lines
1.8 KiB
TypeScript

import type { Client, PaginatedResponse } from '~/types'
export const useClient = () => {
const clients = useState<Client[]>('clients.list', () => [])
const searchQuery = ref('')
const getXsrfToken = (): string => {
const match = document.cookie.match(/XSRF-TOKEN=([^;]+)/)
return match ? decodeURIComponent(match[1]) : ''
}
const fetchClients = async (): Promise<void> => {
const response = await $fetch<PaginatedResponse<Client>>('/api/clients', {
credentials: 'include',
})
clients.value = response.data
}
const search = async (q: string): Promise<void> => {
if (!q.trim()) {
await fetchClients()
return
}
const response = await $fetch<{ data: Client[] }>('/api/search', {
query: { q },
credentials: 'include',
})
clients.value = response.data
}
const fetchClient = async (id: number): Promise<Client> => {
const response = await $fetch<{ data: Client }>(`/api/clients/${id}`, {
credentials: 'include',
})
return response.data
}
const createClient = async (payload: { client_number: string; name: string; notes?: Record<string, string> }): Promise<Client> => {
const response = await $fetch<{ data: Client }>('/api/clients', {
method: 'POST',
body: payload,
credentials: 'include',
headers: { 'X-XSRF-TOKEN': getXsrfToken() },
})
return response.data
}
const updateClient = async (id: number, payload: Partial<Pick<Client, 'name' | 'notes'>>): Promise<Client> => {
const response = await $fetch<{ data: Client }>(`/api/clients/${id}`, {
method: 'PUT',
body: payload,
credentials: 'include',
headers: { 'X-XSRF-TOKEN': getXsrfToken() },
})
return response.data
}
return { clients, searchQuery, fetchClients, search, fetchClient, createClient, updateClient }
}