53 lines
2 KiB
Vue
53 lines
2 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import type { Client } from '~/types'
|
||
|
|
|
||
|
|
const props = defineProps<{ client: Client; editing: boolean }>()
|
||
|
|
const emit = defineEmits<{ save: [notes: Record<string, string>] }>()
|
||
|
|
|
||
|
|
const localNotes = ref<Record<string, string>>({ ...props.client.notes })
|
||
|
|
const newKey = ref('')
|
||
|
|
const newVal = ref('')
|
||
|
|
|
||
|
|
const addField = () => {
|
||
|
|
if (!newKey.value.trim()) return
|
||
|
|
localNotes.value[newKey.value.trim()] = newVal.value
|
||
|
|
newKey.value = ''
|
||
|
|
newVal.value = ''
|
||
|
|
}
|
||
|
|
|
||
|
|
const removeField = (key: string) => {
|
||
|
|
const copy = { ...localNotes.value }
|
||
|
|
delete copy[key]
|
||
|
|
localNotes.value = copy
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<div v-if="!editing" class="space-y-1">
|
||
|
|
<div v-for="(val, key) in client.notes" :key="key" class="flex gap-4 text-sm">
|
||
|
|
<span class="text-gray-500 w-40 shrink-0">{{ key }}</span>
|
||
|
|
<span class="text-gray-800">{{ val }}</span>
|
||
|
|
</div>
|
||
|
|
<p v-if="!Object.keys(client.notes ?? {}).length" class="text-sm text-gray-400 italic">
|
||
|
|
Keine Felder konfiguriert.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div v-else class="space-y-2">
|
||
|
|
<div v-for="(val, key) in localNotes" :key="key" class="flex gap-2 items-center text-sm">
|
||
|
|
<span class="text-gray-600 w-40 shrink-0">{{ key }}</span>
|
||
|
|
<input v-model="localNotes[key]" class="flex-1 border border-gray-300 px-2 py-1 text-sm" />
|
||
|
|
<button @click="removeField(key)" class="text-red-500 text-xs hover:underline">Entfernen</button>
|
||
|
|
</div>
|
||
|
|
<div class="flex gap-2 items-center">
|
||
|
|
<input v-model="newKey" placeholder="Feldname" class="w-40 border border-gray-300 px-2 py-1 text-sm" />
|
||
|
|
<input v-model="newVal" placeholder="Wert" class="flex-1 border border-gray-300 px-2 py-1 text-sm" />
|
||
|
|
<button type="button" @click="addField" class="text-sm text-blue-600 hover:underline">Hinzufügen</button>
|
||
|
|
</div>
|
||
|
|
<button @click="emit('save', localNotes)" class="bg-blue-600 text-white px-3 py-1.5 text-sm hover:bg-blue-700">
|
||
|
|
Felder speichern
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|