From 45232be689ad5755c5365d5ef6483134e52fa65a Mon Sep 17 00:00:00 2001
From: olli <o.schwarten@osdata.org>
Date: Sun, 9 Nov 2025 11:50:30 +0100
Subject: [PATCH] feat: enhance contact management UI with improved layout and
 validation messages

---
 assets/js/views/ContactManagement.vue | 365 ++++++++++++--------------
 1 file changed, 169 insertions(+), 196 deletions(-)

diff --git a/assets/js/views/ContactManagement.vue b/assets/js/views/ContactManagement.vue
index 9c5b4d1..2738884 100644
--- a/assets/js/views/ContactManagement.vue
+++ b/assets/js/views/ContactManagement.vue
@@ -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>