96 lines
2.2 KiB
Vue
96 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
|
|
definePageMeta({
|
|
requiresAuth: true
|
|
})
|
|
|
|
import { isUnauthorized } from "~/utils/auth"
|
|
import { ref, onMounted } from "vue"
|
|
|
|
const { loadToken } = useAuth()
|
|
const { apiFetch } = useApi()
|
|
const { owners, loadOwners } = useOwners()
|
|
|
|
const newOwnerName = ref("")
|
|
const loading = ref(false)
|
|
const error = ref("")
|
|
|
|
async function createOwner() {
|
|
if (!newOwnerName.value.trim()) return
|
|
|
|
try {
|
|
const result = await apiFetch("/owners", {
|
|
method: "POST",
|
|
body: {
|
|
name: newOwnerName.value
|
|
}
|
|
})
|
|
if (isUnauthorized(result)) {
|
|
return result
|
|
}
|
|
|
|
owners.value.push(result)
|
|
newOwnerName.value = ""
|
|
return result
|
|
} catch (e: any) {
|
|
error.value = e.message
|
|
}
|
|
}
|
|
|
|
onMounted( async () => {
|
|
loadToken()
|
|
if (isUnauthorized(await loadOwners())) return
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-6">
|
|
<h1 class="text-3xl font-bold">Owner Verwaltung</h1>
|
|
|
|
<div class="p-4 bg-white shadow rounded space-y-4">
|
|
<h2 class="text-xl font-semibold">Neuen Owner anlegen</h2>
|
|
|
|
<div class="flex gap-4">
|
|
<input
|
|
v-model="newOwnerName"
|
|
type="text"
|
|
placeholder="Owner Name"
|
|
class="border p-2 rounded flex-1"
|
|
/>
|
|
|
|
<button
|
|
@click="createOwner"
|
|
class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
|
|
>
|
|
Speichern
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-4 bg-white shadow rounded">
|
|
<h2 class="text-xl font-semibold mb-4">Owner Liste</h2>
|
|
|
|
<div v-if="loading">Lade Owner…</div>
|
|
<div v-if="error" class="text-red-600">{{ error }}</div>
|
|
|
|
<table class="w-full border-collapse">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="text-left p-2">ID</th>
|
|
<th class="text-left p-2">Name</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="owner in owners"
|
|
:key="owner.id"
|
|
class="border-b hover:bg-gray-50"
|
|
>
|
|
<td class="p-2">{{ owner.id }}</td>
|
|
<td class="p-2">{{ owner.name }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|