Mitarbeiter bearbeiten: Button zum Ändern bestehender Daten

Pro Mitarbeiter-Zeile ein "Bearbeiten"-Button, der die Zeile in ein
Inline-Formular umschaltet (alle Felder, insbesondere die
Wochenkapazität). "Speichern" nutzt den bereits vorhandenen
store.updateEmployee/PUT-Endpoint, "Abbrechen" verwirft die Änderung.

client/src/EmployeesPanel.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive } from 'vue';
+import { reactive, ref } from 'vue';
 import { store } from './store.js';
 
 const newEmployee = reactive({ first_name: '', last_name: '', email: '', role: '', weekly_capacity_hours: 40 });
@@ -9,6 +9,30 @@ async function addEmployee() {
   await store.createEmployee({ ...newEmployee });
   Object.assign(newEmployee, { first_name: '', last_name: '', email: '', role: '', weekly_capacity_hours: 40 });
 }
+
+const editingId = ref(null);
+const editForm = reactive({ first_name: '', last_name: '', email: '', role: '', weekly_capacity_hours: 40 });
+
+function startEdit(employee) {
+  editingId.value = employee.id;
+  Object.assign(editForm, {
+    first_name: employee.first_name,
+    last_name: employee.last_name,
+    email: employee.email,
+    role: employee.role,
+    weekly_capacity_hours: employee.weekly_capacity_hours,
+  });
+}
+
+function cancelEdit() {
+  editingId.value = null;
+}
+
+async function saveEdit(id) {
+  if (!editForm.first_name || !editForm.last_name) return;
+  await store.updateEmployee(id, { ...editForm });
+  editingId.value = null;
+}
 </script>
 
 <template>
@@ -39,12 +63,28 @@ async function addEmployee() {
       </thead>
       <tbody>
         <tr v-for="e in store.employees" :key="e.id">
-          <td>{{ e.first_name }}</td>
+          <template v-if="editingId === e.id">
-          <td>{{ e.last_name }}</td>
+            <td><input v-model="editForm.first_name" style="width: 100%" /></td>
-          <td>{{ e.email }}</td>
+            <td><input v-model="editForm.last_name" style="width: 100%" /></td>
-          <td>{{ e.role }}</td>
+            <td><input v-model="editForm.email" style="width: 100%" /></td>
-          <td>{{ e.weekly_capacity_hours }}</td>
+            <td><input v-model="editForm.role" style="width: 100%" /></td>
-          <td><button class="btn danger" @click="store.deleteEmployee(e.id)">Löschen</button></td>
+            <td><input v-model.number="editForm.weekly_capacity_hours" type="number" style="width: 80px" /></td>
+            <td>
+              <button class="btn" @click="saveEdit(e.id)">Speichern</button>
+              <button class="btn secondary" @click="cancelEdit">Abbrechen</button>
+            </td>
+          </template>
+          <template v-else>
+            <td>{{ e.first_name }}</td>
+            <td>{{ e.last_name }}</td>
+            <td>{{ e.email }}</td>
+            <td>{{ e.role }}</td>
+            <td>{{ e.weekly_capacity_hours }}</td>
+            <td>
+              <button class="btn secondary" @click="startEdit(e)">Bearbeiten</button>
+              <button class="btn danger" @click="store.deleteEmployee(e.id)">Löschen</button>
+            </td>
+          </template>
         </tr>
       </tbody>
     </table>