Refactor EventForm component for improved readability and maintainability

src/components/EventForm.vue

@@ -21,12 +21,23 @@
               <option value="date">Datum</option>
               <option value="weekday">Wochentag</option>
               <option value="interval">Intervall</option>
+              <option value="bulk">Bulk-Datum</option>
             </select>
           </td>
         </tr>
         <tr v-if="dateMode === 'date' || dateMode === 'interval'">
           <td><label for="date">Datum:</label></td>
-          <td><input type="date" id="date" v-model="eventData.date"></td>
+          <td>
+            <input type="date" id="date" v-model="eventData.date">
+          </td>
+        </tr>
+        <tr v-if="dateMode === 'bulk'">
+          <td><label for="bulkDates">Bulk-Daten:</label></td>
+          <td>
+            <textarea id="bulkDates" v-model="bulkDates"
+              placeholder="Mehrere Daten, z.B. 2025-08-13,2025-08-20 oder je Zeile ein Datum"></textarea>
+            <div style="font-size: 0.9em; color: #888;">Mehrere Daten mit Komma oder Zeilenumbruch trennen</div>
+          </td>
         </tr>
         <tr v-if="dateMode === 'weekday' || dateMode === 'interval'">
           <td><label for="dayOfWeek">Wochentag:</label></td>
@@ -84,7 +95,9 @@
           </td>
         </tr>
         <tr>
-          <td colspan="2"><button type="submit">Speichern</button></td>
+          <td colspan="2">
+            <button type="submit">Speichern</button>
+          </td>
         </tr>
       </table>
     </form>
@@ -147,6 +160,8 @@ export default {
       onHomepage: false,
       assignedImage: null,
       imageFilename: '',
+      bulkDates: '',
+      bulkDates: '',
     };
   },
   watch: {
@@ -192,23 +207,35 @@ export default {
     formatTime,
     async saveEvent() {
       try {
-        const payload = {
+        const basePayload = {
           ...this.eventData,
           eventTypeId: this.selectedEventType ? this.selectedEventType.id : null,
           institution_id: this.selectedInstitution ? this.selectedInstitution.id : null,
           event_place_id: this.selectedEventPlace ? this.selectedEventPlace.id : null,
-          contactPersonIds: this.selectedContactPersons.map(person => person.id)
+          contactPersonIds: this.selectedContactPersons.map(person => person.id),
+          dayOfWeek: this.eventData.dayOfWeek ? this.eventData.dayOfWeek.value ?? -1 : -1,
+          relatedImage: this.assignedImage,
+          alsoOnHomepage: this.onHomepage ? 1 : 0
         };
-        payload.dayOfWeek = payload.dayOfWeek ? payload.dayOfWeek.value ?? -1 : -1;
+        if (this.dateMode === 'bulk' && this.bulkDates) {
-        payload.relatedImage = this.assignedImage;
+          // Split by comma or newline, trim, filter valid dates
-        payload.alsoOnHomepage = this.onHomepage ? 1 : 0;
+          const dates = this.bulkDates.split(/,|\n/).map(d => d.trim()).filter(d => /^\d{4}-\d{2}-\d{2}$/.test(d));
-        let response;
+          const results = [];
-        if (this.eventData.id) {
+          for (const date of dates) {
-          response = await axios.put(`/events/${this.eventData.id}`, payload);
+            const payload = { ...basePayload, date };
+            const response = await axios.post('/events', payload);
+            results.push(response.data);
+          }
+          this.$emit('saved', results);
         } else {
-          response = await axios.post('/events', payload);
+          let response;
+          if (this.eventData.id) {
+            response = await axios.put(`/events/${this.eventData.id}`, basePayload);
+          } else {
+            response = await axios.post('/events', basePayload);
+          }
+          this.$emit('saved', response.data);
         }
-        this.$emit('saved', response.data);
       } catch (error) {
         console.error('Failed to save event:', error);
       }
@@ -293,5 +320,4 @@ button {
   max-height: 50px;
   object-fit: contain;
 }
-
 </style>