feat: enhance contact management UI with improved layout and validation messages
This commit is contained in:
parent
6f971be904
commit
45232be689
@ -192,59 +192,44 @@
|
||||
<!-- Basisdaten -->
|
||||
<Card class="mb-3">
|
||||
<template #title>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="pi pi-building text-primary"></i>
|
||||
<span>Basisdaten</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="formgrid grid">
|
||||
<div class="field col-12 md:col-8">
|
||||
<label for="companyName" class="block mb-2 font-medium">
|
||||
Firmenname <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<InputText
|
||||
id="companyName"
|
||||
v-model="editingContact.companyName"
|
||||
class="w-full"
|
||||
:class="{ 'p-invalid': submitted && !editingContact.companyName }"
|
||||
/>
|
||||
<small v-if="submitted && !editingContact.companyName" class="p-error">
|
||||
Firmenname ist erforderlich
|
||||
</small>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex flex-col gap-2 w-full md:w-2/3">
|
||||
<label for="companyName">Firmenname <span class="text-red-500">*</span></label>
|
||||
<InputText
|
||||
id="companyName"
|
||||
v-model="editingContact.companyName"
|
||||
:invalid="submitted && !editingContact.companyName"
|
||||
/>
|
||||
<small v-if="submitted && !editingContact.companyName" class="text-red-500">
|
||||
Firmenname ist erforderlich
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 w-full md:w-1/3">
|
||||
<label for="companyNumber">Kundennummer</label>
|
||||
<InputText id="companyNumber" v-model="editingContact.companyNumber" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="companyNumber" class="block mb-2 font-medium">Kundennummer</label>
|
||||
<InputText id="companyNumber" v-model="editingContact.companyNumber" class="w-full" />
|
||||
</div>
|
||||
|
||||
<div class="field col-12">
|
||||
<div class="flex gap-4">
|
||||
<div class="field-checkbox mb-0">
|
||||
<Checkbox
|
||||
inputId="isDebtor"
|
||||
v-model="editingContact.isDebtor"
|
||||
:binary="true"
|
||||
/>
|
||||
<label for="isDebtor" class="ml-2">Debitor</label>
|
||||
</div>
|
||||
<div class="field-checkbox mb-0">
|
||||
<Checkbox
|
||||
inputId="isCreditor"
|
||||
v-model="editingContact.isCreditor"
|
||||
:binary="true"
|
||||
/>
|
||||
<label for="isCreditor" class="ml-2">Kreditor</label>
|
||||
</div>
|
||||
<div class="field-checkbox mb-0">
|
||||
<Checkbox
|
||||
inputId="isActive"
|
||||
v-model="editingContact.isActive"
|
||||
:binary="true"
|
||||
/>
|
||||
<label for="isActive" class="ml-2">Aktiv</label>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox inputId="isDebtor" v-model="editingContact.isDebtor" :binary="true" />
|
||||
<label for="isDebtor">Debitor</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox inputId="isCreditor" v-model="editingContact.isCreditor" :binary="true" />
|
||||
<label for="isCreditor">Kreditor</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox inputId="isActive" v-model="editingContact.isActive" :binary="true" />
|
||||
<label for="isActive">Aktiv</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -254,31 +239,33 @@
|
||||
<!-- Adresse -->
|
||||
<Card class="mb-3">
|
||||
<template #title>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="pi pi-map-marker text-primary"></i>
|
||||
<span>Adresse</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="formgrid grid">
|
||||
<div class="field col-12">
|
||||
<label for="street" class="block mb-2 font-medium">Straße</label>
|
||||
<InputText id="street" v-model="editingContact.street" class="w-full" />
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="street">Straße</label>
|
||||
<InputText id="street" v-model="editingContact.street" />
|
||||
</div>
|
||||
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="zipCode" class="block mb-2 font-medium">PLZ</label>
|
||||
<InputText id="zipCode" v-model="editingContact.zipCode" class="w-full" />
|
||||
</div>
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex flex-col gap-2 w-full md:w-1/4">
|
||||
<label for="zipCode">PLZ</label>
|
||||
<InputText id="zipCode" v-model="editingContact.zipCode" />
|
||||
</div>
|
||||
|
||||
<div class="field col-12 md:col-5">
|
||||
<label for="city" class="block mb-2 font-medium">Ort</label>
|
||||
<InputText id="city" v-model="editingContact.city" class="w-full" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 w-full md:w-1/2">
|
||||
<label for="city">Ort</label>
|
||||
<InputText id="city" v-model="editingContact.city" />
|
||||
</div>
|
||||
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="country" class="block mb-2 font-medium">Land</label>
|
||||
<InputText id="country" v-model="editingContact.country" class="w-full" />
|
||||
<div class="flex flex-col gap-2 w-full md:w-1/4">
|
||||
<label for="country">Land</label>
|
||||
<InputText id="country" v-model="editingContact.country" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -287,31 +274,35 @@
|
||||
<!-- Kontaktdaten -->
|
||||
<Card class="mb-3">
|
||||
<template #title>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="pi pi-phone text-primary"></i>
|
||||
<span>Kontaktdaten</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="formgrid grid">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="phone" class="block mb-2 font-medium">Telefon</label>
|
||||
<InputText id="phone" v-model="editingContact.phone" class="w-full" />
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex flex-col gap-2 w-full">
|
||||
<label for="phone">Telefon</label>
|
||||
<InputText id="phone" v-model="editingContact.phone" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 w-full">
|
||||
<label for="fax">Fax</label>
|
||||
<InputText id="fax" v-model="editingContact.fax" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="fax" class="block mb-2 font-medium">Fax</label>
|
||||
<InputText id="fax" v-model="editingContact.fax" class="w-full" />
|
||||
</div>
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex flex-col gap-2 w-full">
|
||||
<label for="email">E-Mail</label>
|
||||
<InputText id="email" v-model="editingContact.email" type="email" />
|
||||
</div>
|
||||
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="email" class="block mb-2 font-medium">E-Mail</label>
|
||||
<InputText id="email" v-model="editingContact.email" type="email" class="w-full" />
|
||||
</div>
|
||||
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="website" class="block mb-2 font-medium">Website</label>
|
||||
<InputText id="website" v-model="editingContact.website" class="w-full" />
|
||||
<div class="flex flex-col gap-2 w-full">
|
||||
<label for="website">Website</label>
|
||||
<InputText id="website" v-model="editingContact.website" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -320,21 +311,21 @@
|
||||
<!-- Steuerdaten -->
|
||||
<Card class="mb-3">
|
||||
<template #title>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="pi pi-calculator text-primary"></i>
|
||||
<span>Steuerdaten</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="formgrid grid">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="taxNumber" class="block mb-2 font-medium">Steuernummer</label>
|
||||
<InputText id="taxNumber" v-model="editingContact.taxNumber" class="w-full" />
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex flex-col gap-2 w-full">
|
||||
<label for="taxNumber">Steuernummer</label>
|
||||
<InputText id="taxNumber" v-model="editingContact.taxNumber" />
|
||||
</div>
|
||||
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="vatNumber" class="block mb-2 font-medium">USt-IdNr.</label>
|
||||
<InputText id="vatNumber" v-model="editingContact.vatNumber" class="w-full" />
|
||||
<div class="flex flex-col gap-2 w-full">
|
||||
<label for="vatNumber">USt-IdNr.</label>
|
||||
<InputText id="vatNumber" v-model="editingContact.vatNumber" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -343,8 +334,8 @@
|
||||
<!-- Ansprechpartner -->
|
||||
<Card class="mb-3">
|
||||
<template #title>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="pi pi-users text-primary"></i>
|
||||
<span>Ansprechpartner</span>
|
||||
</div>
|
||||
@ -370,8 +361,8 @@
|
||||
class="mb-4"
|
||||
>
|
||||
<Divider v-if="index > 0" />
|
||||
<div class="formgrid grid">
|
||||
<div class="field col-12 flex justify-content-between align-items-center mb-3">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<h4 class="m-0 font-semibold">
|
||||
<i class="pi pi-user mr-2"></i>
|
||||
Ansprechpartner {{ index + 1 }}
|
||||
@ -387,105 +378,85 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field col-12 md:col-3">
|
||||
<label :for="'salutation-' + index" class="block mb-2 font-medium">
|
||||
Anrede
|
||||
</label>
|
||||
<Dropdown
|
||||
:id="'salutation-' + index"
|
||||
v-model="person.salutation"
|
||||
:options="salutations"
|
||||
placeholder="Wählen..."
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field col-12 md:col-3">
|
||||
<label :for="'title-' + index" class="block mb-2 font-medium">Titel</label>
|
||||
<InputText :id="'title-' + index" v-model="person.title" class="w-full" />
|
||||
</div>
|
||||
|
||||
<div class="field col-12 md:col-3">
|
||||
<label :for="'firstName-' + index" class="block mb-2 font-medium">
|
||||
Vorname <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<InputText
|
||||
:id="'firstName-' + index"
|
||||
v-model="person.firstName"
|
||||
class="w-full"
|
||||
:class="{ 'p-invalid': submitted && !person.firstName }"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field col-12 md:col-3">
|
||||
<label :for="'lastName-' + index" class="block mb-2 font-medium">
|
||||
Nachname <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<InputText
|
||||
:id="'lastName-' + index"
|
||||
v-model="person.lastName"
|
||||
class="w-full"
|
||||
:class="{ 'p-invalid': submitted && !person.lastName }"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field col-12 md:col-6">
|
||||
<label :for="'position-' + index" class="block mb-2 font-medium">
|
||||
Position
|
||||
</label>
|
||||
<InputText :id="'position-' + index" v-model="person.position" class="w-full" />
|
||||
</div>
|
||||
|
||||
<div class="field col-12 md:col-6">
|
||||
<label :for="'department-' + index" class="block mb-2 font-medium">
|
||||
Abteilung
|
||||
</label>
|
||||
<InputText
|
||||
:id="'department-' + index"
|
||||
v-model="person.department"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field col-12 md:col-4">
|
||||
<label :for="'personPhone-' + index" class="block mb-2 font-medium">
|
||||
Telefon
|
||||
</label>
|
||||
<InputText
|
||||
:id="'personPhone-' + index"
|
||||
v-model="person.phone"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field col-12 md:col-4">
|
||||
<label :for="'mobile-' + index" class="block mb-2 font-medium">Mobil</label>
|
||||
<InputText :id="'mobile-' + index" v-model="person.mobile" class="w-full" />
|
||||
</div>
|
||||
|
||||
<div class="field col-12 md:col-4">
|
||||
<label :for="'personEmail-' + index" class="block mb-2 font-medium">
|
||||
E-Mail
|
||||
</label>
|
||||
<InputText
|
||||
:id="'personEmail-' + index"
|
||||
v-model="person.email"
|
||||
type="email"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field col-12">
|
||||
<div class="field-checkbox mb-0">
|
||||
<Checkbox
|
||||
:inputId="'isPrimary-' + index"
|
||||
v-model="person.isPrimary"
|
||||
:binary="true"
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex flex-col gap-2 w-full md:w-1/4">
|
||||
<label :for="'salutation-' + index">Anrede</label>
|
||||
<Dropdown
|
||||
:id="'salutation-' + index"
|
||||
v-model="person.salutation"
|
||||
:options="salutations"
|
||||
placeholder="Wählen..."
|
||||
/>
|
||||
<label :for="'isPrimary-' + index" class="ml-2">
|
||||
Hauptansprechpartner
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 w-full md:w-1/4">
|
||||
<label :for="'title-' + index">Titel</label>
|
||||
<InputText :id="'title-' + index" v-model="person.title" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 w-full md:w-1/4">
|
||||
<label :for="'firstName-' + index">
|
||||
Vorname <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<InputText
|
||||
:id="'firstName-' + index"
|
||||
v-model="person.firstName"
|
||||
:invalid="submitted && !person.firstName"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 w-full md:w-1/4">
|
||||
<label :for="'lastName-' + index">
|
||||
Nachname <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<InputText
|
||||
:id="'lastName-' + index"
|
||||
v-model="person.lastName"
|
||||
:invalid="submitted && !person.lastName"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex flex-col gap-2 w-full">
|
||||
<label :for="'position-' + index">Position</label>
|
||||
<InputText :id="'position-' + index" v-model="person.position" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 w-full">
|
||||
<label :for="'department-' + index">Abteilung</label>
|
||||
<InputText :id="'department-' + index" v-model="person.department" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex flex-col gap-2 w-full">
|
||||
<label :for="'personPhone-' + index">Telefon</label>
|
||||
<InputText :id="'personPhone-' + index" v-model="person.phone" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 w-full">
|
||||
<label :for="'mobile-' + index">Mobil</label>
|
||||
<InputText :id="'mobile-' + index" v-model="person.mobile" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 w-full">
|
||||
<label :for="'personEmail-' + index">E-Mail</label>
|
||||
<InputText
|
||||
:id="'personEmail-' + index"
|
||||
v-model="person.email"
|
||||
type="email"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox
|
||||
:inputId="'isPrimary-' + index"
|
||||
v-model="person.isPrimary"
|
||||
:binary="true"
|
||||
/>
|
||||
<label :for="'isPrimary-' + index">Hauptansprechpartner</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -495,19 +466,21 @@
|
||||
<!-- Notizen -->
|
||||
<Card>
|
||||
<template #title>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="pi pi-comment text-primary"></i>
|
||||
<span>Notizen</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<Textarea
|
||||
id="notes"
|
||||
v-model="editingContact.notes"
|
||||
class="w-full"
|
||||
:rows="4"
|
||||
placeholder="Interne Notizen zu diesem Kontakt..."
|
||||
/>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="notes">Interne Notizen zu diesem Kontakt</label>
|
||||
<Textarea
|
||||
id="notes"
|
||||
v-model="editingContact.notes"
|
||||
:rows="4"
|
||||
placeholder="Interne Notizen..."
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user