Füge Ablaufdatum zu Kontaktpersonen hinzu: Implementiere die Möglichkeit, ein Ablaufdatum für Kontaktpersonen zu speichern und anzuzeigen. Aktualisiere die Filterlogik, um nur nicht abgelaufene Kontaktpersonen anzuzeigen, und passe die Benutzeroberfläche an, um das Ablaufdatum darzustellen.

src/components/ContactPersonForm.vue

@@ -20,6 +20,9 @@
       <label for="email">Email:</label>
       <input type="email" id="email" v-model="localContactPerson.email">
 
+      <label for="expiryDate">Ablaufdatum (optional):</label>
+      <input type="date" id="expiryDate" v-model="localContactPerson.expiryDate">
+
       <label for="positions">Positionen:</label>
       <multiselect 
         v-model="selectedPositions"
@@ -57,6 +60,7 @@ export default {
         zipcode: '',
         city: '',
         email: '',
+        expiryDate: null,
         positions: []
       })
     },
@@ -111,6 +115,7 @@ export default {
         zipcode: '',
         city: '',
         email: '',
+        expiryDate: null,
         positions: []
       };
       this.selectedPositions = [];

src/components/ContactRender.vue

@@ -1,7 +1,7 @@
 <template>
     <div v-if="config && config.style === 'box' && contacts && contacts.length && contacts.length > 0">
         <div v-for="contact in contacts" :key="contact.id" class="contact-box bottom-margin">
-            <p>{{ contact.name }}</p>
+            <p>{{ contact.name }} <span v-if="contact.expiryDate" class="expiry-date">(bis {{ formatDate(contact.expiryDate) }})</span></p>
             <p v-if="displayOptions.includes('phone')">Telefon: {{ contact.phone }}</p>
             <p v-if="displayOptions.includes('street')">Straße: {{ contact.street }}</p>
             <p v-if="displayOptions.includes('zipcode')">Postleitzahl: {{ contact.zipcode }}</p>
@@ -13,7 +13,7 @@
     </div>
     <span v-else-if="config.style === 'float' && contacts && contacts.length && contacts.length > 0">
         <span v-for="contact in contacts" :key="contact.id" class="bottom-margin">
-            {{ contact.name }}
+            {{ contact.name }}<span v-if="contact.expiryDate" class="expiry-date"> (bis {{ formatDate(contact.expiryDate) }})</span>
             <span v-if="displayOptions.includes('phone')">, Telefon: {{ contact.phone }}</span>
             <span v-if="displayOptions.includes('street')">, Straße: {{ contact.street }}</span>
             <span v-if="displayOptions.includes('zipcode')">, Postleitzahl: {{ contact.zipcode }}</span>
@@ -58,6 +58,17 @@ export default {
             this.loading = false;
         }
     },
+    methods: {
+        formatDate(dateString) {
+            if (!dateString) return '';
+            const date = new Date(dateString);
+            return date.toLocaleDateString('de-DE', {
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric'
+            });
+        }
+    }
 };
 </script>
 
@@ -68,4 +79,9 @@ export default {
 .bottom-margin {
     margin-bottom: 1rem;
 }
+.expiry-date {
+    font-size: 0.9em;
+    color: #666;
+    font-style: italic;
+}
 </style>

src/components/EventRender.vue

@@ -11,7 +11,7 @@
                             formatTime(event.endTime) }}</span> Uhr</div>
                     <div v-if="shouldDisplay('place')">{{ event.eventPlace?.name }}</div>
                     <div v-if="shouldDisplay('description')" class="description">{{ event.description }}</div>
-                    <div v-if="shouldDisplay('contactPerson')">{{event.contactPersons.map(cp => cp.name).join(', ')}}
+                    <div v-if="shouldDisplay('contactPerson')">{{event.contactPersons.map(cp => formatContactPerson(cp)).join(', ')}}
                     </div>
                     <div v-if="shouldDisplay('institution')">{{ event.institution?.name }}</div>
                     <div v-if="shouldDisplay('type')">{{ event.eventType?.caption }}</div>
@@ -28,7 +28,7 @@
                 formatTime(events[0].endTime) }}</span> Uhr</div>
             <div v-if="shouldDisplay('place')">{{ events[0].eventPlace?.name }}</div>
             <div v-if="shouldDisplay('description')" class="description">{{ events[0].description }}</div>
-            <div v-if="shouldDisplay('contactPerson')">{{events[0].contactPersons.map(cp => cp.name).join(', ')}}
+            <div v-if="shouldDisplay('contactPerson')">{{events[0].contactPersons.map(cp => formatContactPerson(cp)).join(', ')}}
             </div>
             <div v-if="shouldDisplay('institution')">{{ events[0].institution?.name }}</div>
             <div v-if="shouldDisplay('type')">{{ events[0].eventType?.caption }}</div>
@@ -102,6 +102,18 @@ export default {
             const path = '/images/uploads/' + response.data.filename;
             console.log(path);
             return path;
+        },
+        formatContactPerson(contactPerson) {
+            if (!contactPerson.expiryDate) {
+                return contactPerson.name;
+            }
+            const date = new Date(contactPerson.expiryDate);
+            const formattedDate = date.toLocaleDateString('de-DE', {
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric'
+            });
+            return `${contactPerson.name} (bis ${formattedDate})`;
         }
     }
 };