From 7ada3b62c49943ca7bb5fb08028b31c4419a4a5c Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Sun, 18 Jan 2026 23:10:44 +0100
Subject: [PATCH] Refactor Spieler management in Mannschaften component for
 improved usability

This commit replaces the text area for entering players with a dynamic list interface, allowing users to add, remove, and reorder players more intuitively. It introduces functionality for moving players between teams and enhances the overall user experience by providing clear feedback and controls. The data structure for players is updated to support these changes, ensuring better data handling during team management.
---
 pages/cms/mannschaften.vue | 300 ++++++++++++++++++++++++++++++++++---
 1 file changed, 280 insertions(+), 20 deletions(-)

diff --git a/pages/cms/mannschaften.vue b/pages/cms/mannschaften.vue
index 41fbb25..7af746c 100644
--- a/pages/cms/mannschaften.vue
+++ b/pages/cms/mannschaften.vue
@@ -242,18 +242,113 @@
 
           <div>
             <label class="block text-sm font-medium text-gray-700 mb-2">
-              Spieler (durch Semikolon getrennt)
+              Spieler
             </label>
-            <textarea
-              v-model="formData.spieler"
-              rows="4"
-              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
-              placeholder="Spieler 1; Spieler 2; Spieler 3"
-              :disabled="isSaving"
-            />
-            <p class="mt-1 text-xs text-gray-500">
-              Mehrere Spieler durch Semikolon (;) trennen
-            </p>
+            <div class="space-y-2">
+              <div
+                v-if="formData.spielerListe.length === 0"
+                class="text-sm text-gray-500"
+              >
+                Noch keine Spieler eingetragen.
+              </div>
+
+              <div
+                v-for="(spieler, index) in formData.spielerListe"
+                :key="spieler.id"
+                class="p-3 border border-gray-200 rounded-lg bg-white"
+              >
+                <div class="flex flex-col sm:flex-row sm:items-center gap-2">
+                  <input
+                    v-model="spieler.name"
+                    type="text"
+                    class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                    placeholder="Spielername"
+                    :disabled="isSaving"
+                  >
+
+                  <!-- Reihenfolge -->
+                  <div class="flex items-center gap-1">
+                    <button
+                      type="button"
+                      class="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                      title="Nach oben"
+                      :disabled="isSaving || index === 0"
+                      @click="moveSpielerUp(index)"
+                    >
+                      <ChevronUp :size="18" />
+                    </button>
+                    <button
+                      type="button"
+                      class="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                      title="Nach unten"
+                      :disabled="isSaving || index === formData.spielerListe.length - 1"
+                      @click="moveSpielerDown(index)"
+                    >
+                      <ChevronDown :size="18" />
+                    </button>
+                    <button
+                      type="button"
+                      class="p-2 border border-red-300 text-red-700 rounded-lg hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                      title="Spieler entfernen"
+                      :disabled="isSaving"
+                      @click="removeSpieler(spieler.id)"
+                    >
+                      <Trash2 :size="18" />
+                    </button>
+                  </div>
+                </div>
+
+                <!-- Verschieben -->
+                <div class="mt-2 flex flex-col sm:flex-row sm:items-center gap-2">
+                  <input
+                    v-model="moveTargetBySpielerId[spieler.id]"
+                    list="mannschaften-targets"
+                    type="text"
+                    class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                    placeholder="In andere Mannschaft verschieben…"
+                    :disabled="isSaving || !isEditing || otherMannschaften.length === 0"
+                  >
+                  <button
+                    type="button"
+                    class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                    :disabled="isSaving || !isEditing || otherMannschaften.length === 0 || !canMoveSpieler(spieler.id)"
+                    @click="moveSpielerToMannschaft(spieler.id)"
+                  >
+                    <ArrowRight
+                      :size="18"
+                      class="mr-2"
+                    />
+                    Verschieben
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <datalist id="mannschaften-targets">
+              <option
+                v-for="t in otherMannschaften"
+                :key="t.idx"
+                :value="t.name"
+              />
+            </datalist>
+
+            <div class="mt-3 flex items-center justify-between">
+              <button
+                type="button"
+                class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold rounded-lg transition-colors"
+                :disabled="isSaving"
+                @click="addSpieler()"
+              >
+                <Plus
+                  :size="18"
+                  class="mr-2"
+                />
+                Spieler hinzufügen
+              </button>
+              <p class="text-xs text-gray-500">
+                Reihenfolge per ↑/↓ ändern. Verschieben nur bei bestehenden Mannschaften.
+              </p>
+            </div>
           </div>
 
           <div>
@@ -309,8 +404,8 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
-import { Plus, Trash2, Loader2, AlertCircle, Pencil, Users } from 'lucide-vue-next'
+import { ref, onMounted, computed } from 'vue'
+import { Plus, Trash2, Loader2, AlertCircle, Pencil, Users, ChevronUp, ChevronDown, ArrowRight } from 'lucide-vue-next'
 
 const isLoading = ref(true)
 const isSaving = ref(false)
@@ -328,11 +423,71 @@ const formData = ref({
   heimspieltag: '',
   spielsystem: '',
   mannschaftsfuehrer: '',
-  spieler: '',
+  spielerListe: [],
   weitere_informationen_link: '',
   letzte_aktualisierung: ''
 })
 
+// Für Verschieben-UI (Combobox pro Spieler)
+const moveTargetBySpielerId = ref({})
+// Pending-Änderungen für andere Teams (wird erst beim Speichern angewendet)
+const pendingSpielerNamesByTeamIndex = ref({}) // { [index: number]: string[] }
+
+function nowIsoDate() {
+  return new Date().toISOString().split('T')[0]
+}
+
+function newSpielerItem(name = '') {
+  return {
+    id: `${Date.now()}-${Math.random().toString(16).slice(2)}`,
+    name
+  }
+}
+
+function parseSpielerString(spielerString) {
+  if (!spielerString) return []
+  return String(spielerString)
+    .split(';')
+    .map(s => s.trim())
+    .filter(Boolean)
+    .map(name => newSpielerItem(name))
+}
+
+function serializeSpielerList(spielerListe) {
+  return (spielerListe || [])
+    .map(s => (s?.name || '').trim())
+    .filter(Boolean)
+    .join('; ')
+}
+
+function serializeSpielerNames(spielerNames) {
+  return (spielerNames || [])
+    .map(s => String(s || '').trim())
+    .filter(Boolean)
+    .join('; ')
+}
+
+const otherMannschaften = computed(() => {
+  return mannschaften.value
+    .map((m, idx) => ({ idx, name: (m?.mannschaft || '').trim() }))
+    .filter(t => t.idx !== editingIndex.value && t.name)
+})
+
+function resetSpielerDraftState() {
+  moveTargetBySpielerId.value = {}
+  pendingSpielerNamesByTeamIndex.value = {}
+}
+
+function getPendingSpielerNamesForTeamIndex(teamIndex) {
+  if (pendingSpielerNamesByTeamIndex.value[teamIndex]) {
+    return pendingSpielerNamesByTeamIndex.value[teamIndex]
+  }
+  const existing = mannschaften.value[teamIndex]
+  const list = existing ? getSpielerListe(existing) : []
+  pendingSpielerNamesByTeamIndex.value[teamIndex] = [...list]
+  return pendingSpielerNamesByTeamIndex.value[teamIndex]
+}
+
 const loadMannschaften = async () => {
   isLoading.value = true
   try {
@@ -408,14 +563,15 @@ const openAddModal = () => {
     heimspieltag: '',
     spielsystem: '',
     mannschaftsfuehrer: '',
-    spieler: '',
+    spielerListe: [],
     weitere_informationen_link: '',
-    letzte_aktualisierung: new Date().toISOString().split('T')[0]
+    letzte_aktualisierung: nowIsoDate()
   }
   showModal.value = true
   errorMessage.value = ''
   isEditing.value = false
   editingIndex.value = -1
+  resetSpielerDraftState()
 }
 
 const closeModal = () => {
@@ -423,6 +579,7 @@ const closeModal = () => {
   errorMessage.value = ''
   isEditing.value = false
   editingIndex.value = -1
+  resetSpielerDraftState()
 }
 
 const openEditModal = (mannschaft, index) => {
@@ -434,14 +591,85 @@ const openEditModal = (mannschaft, index) => {
     heimspieltag: mannschaft.heimspieltag || '',
     spielsystem: mannschaft.spielsystem || '',
     mannschaftsfuehrer: mannschaft.mannschaftsfuehrer || '',
-    spieler: mannschaft.spieler || '',
+    spielerListe: parseSpielerString(mannschaft.spieler || ''),
     weitere_informationen_link: mannschaft.weitere_informationen_link || '',
-    letzte_aktualisierung: mannschaft.letzte_aktualisierung || new Date().toISOString().split('T')[0]
+    letzte_aktualisierung: mannschaft.letzte_aktualisierung || nowIsoDate()
   }
   isEditing.value = true
   editingIndex.value = index
   showModal.value = true
   errorMessage.value = ''
+  resetSpielerDraftState()
+}
+
+const addSpieler = () => {
+  formData.value.spielerListe.push(newSpielerItem(''))
+}
+
+const removeSpieler = (spielerId) => {
+  const idx = formData.value.spielerListe.findIndex(s => s.id === spielerId)
+  if (idx === -1) return
+  formData.value.spielerListe.splice(idx, 1)
+  if (moveTargetBySpielerId.value[spielerId]) {
+    delete moveTargetBySpielerId.value[spielerId]
+  }
+}
+
+const moveSpielerUp = (index) => {
+  if (index <= 0) return
+  const arr = formData.value.spielerListe
+  const item = arr[index]
+  arr.splice(index, 1)
+  arr.splice(index - 1, 0, item)
+}
+
+const moveSpielerDown = (index) => {
+  const arr = formData.value.spielerListe
+  if (index < 0 || index >= arr.length - 1) return
+  const item = arr[index]
+  arr.splice(index, 1)
+  arr.splice(index + 1, 0, item)
+}
+
+const canMoveSpieler = (spielerId) => {
+  const targetName = (moveTargetBySpielerId.value[spielerId] || '').trim()
+  return Boolean(targetName)
+}
+
+const moveSpielerToMannschaft = (spielerId) => {
+  if (!isEditing.value || editingIndex.value < 0) return
+
+  const targetName = (moveTargetBySpielerId.value[spielerId] || '').trim()
+  if (!targetName) return
+
+  const targetIndex = mannschaften.value.findIndex((m, idx) => {
+    if (idx === editingIndex.value) return false
+    return (m?.mannschaft || '').trim() === targetName
+  })
+
+  if (targetIndex === -1) {
+    errorMessage.value = 'Ziel-Mannschaft nicht gefunden. Bitte aus der Liste auswählen.'
+    return
+  }
+
+  const idx = formData.value.spielerListe.findIndex(s => s.id === spielerId)
+  if (idx === -1) return
+
+  const spielerName = (formData.value.spielerListe[idx]?.name || '').trim()
+  if (!spielerName) {
+    errorMessage.value = 'Bitte zuerst einen Spielernamen eintragen.'
+    return
+  }
+
+  // Entfernen aus aktueller Mannschaft
+  formData.value.spielerListe.splice(idx, 1)
+
+  // Hinzufügen zur Ziel-Mannschaft (pending; wird erst beim Speichern geschrieben)
+  const pendingList = getPendingSpielerNamesForTeamIndex(targetIndex)
+  pendingList.push(spielerName)
+
+  // UI zurücksetzen
+  delete moveTargetBySpielerId.value[spielerId]
 }
 
 const saveMannschaft = async () => {
@@ -449,12 +677,44 @@ const saveMannschaft = async () => {
   errorMessage.value = ''
 
   try {
+    const spielerString = serializeSpielerList(formData.value.spielerListe)
+    const updated = {
+      mannschaft: formData.value.mannschaft || '',
+      liga: formData.value.liga || '',
+      staffelleiter: formData.value.staffelleiter || '',
+      telefon: formData.value.telefon || '',
+      heimspieltag: formData.value.heimspieltag || '',
+      spielsystem: formData.value.spielsystem || '',
+      mannschaftsfuehrer: formData.value.mannschaftsfuehrer || '',
+      spieler: spielerString,
+      weitere_informationen_link: formData.value.weitere_informationen_link || '',
+      letzte_aktualisierung: formData.value.letzte_aktualisierung || nowIsoDate()
+    }
+
     if (isEditing.value && editingIndex.value >= 0) {
       // Aktualisiere bestehende Mannschaft
-      mannschaften.value[editingIndex.value] = { ...formData.value }
+      mannschaften.value[editingIndex.value] = { ...updated }
     } else {
       // Füge neue Mannschaft hinzu
-      mannschaften.value.push({ ...formData.value })
+      mannschaften.value.push({ ...updated })
+    }
+
+    // Pending-Verschiebungen anwenden (andere Mannschaften)
+    const touchedTeamIndexes = Object.keys(pendingSpielerNamesByTeamIndex.value)
+    if (touchedTeamIndexes.length > 0) {
+      const ts = nowIsoDate()
+      for (const idxStr of touchedTeamIndexes) {
+        const idx = Number(idxStr)
+        if (!Number.isFinite(idx)) continue
+        const existing = mannschaften.value[idx]
+        if (!existing) continue
+        const pendingNames = pendingSpielerNamesByTeamIndex.value[idx]
+        mannschaften.value[idx] = {
+          ...existing,
+          spieler: serializeSpielerNames(pendingNames),
+          letzte_aktualisierung: ts
+        }
+      }
     }
 
     // Speichere als CSV