admin
4e0f628db7
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.
94 lines
3.3 KiB
Vue
94 lines
3.3 KiB
Vue
<script setup>
|
|
import { reactive, ref } from 'vue';
|
|
import { store } from './store.js';
|
|
|
|
const newEmployee = reactive({ first_name: '', last_name: '', email: '', role: '', weekly_capacity_hours: 40 });
|
|
|
|
async function addEmployee() {
|
|
if (!newEmployee.first_name || !newEmployee.last_name) return;
|
|
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>
|
|
<div class="panel-section">
|
|
<h2>Neuer Mitarbeiter</h2>
|
|
<div class="form-row">
|
|
<input v-model="newEmployee.first_name" placeholder="Vorname" />
|
|
<input v-model="newEmployee.last_name" placeholder="Nachname" />
|
|
<input v-model="newEmployee.email" placeholder="E-Mail" />
|
|
<input v-model="newEmployee.role" placeholder="Rolle" />
|
|
<input v-model.number="newEmployee.weekly_capacity_hours" type="number" style="width: 100px" placeholder="Std/Woche" />
|
|
<button class="btn" @click="addEmployee">Anlegen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-section">
|
|
<h2>Mitarbeiter</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Vorname</th>
|
|
<th>Nachname</th>
|
|
<th>E-Mail</th>
|
|
<th>Rolle</th>
|
|
<th>Kapazität (Std/Woche)</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="e in store.employees" :key="e.id">
|
|
<template v-if="editingId === e.id">
|
|
<td><input v-model="editForm.first_name" style="width: 100%" /></td>
|
|
<td><input v-model="editForm.last_name" style="width: 100%" /></td>
|
|
<td><input v-model="editForm.email" style="width: 100%" /></td>
|
|
<td><input v-model="editForm.role" style="width: 100%" /></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>
|
|
<p v-if="store.employees.length === 0" class="muted">Noch keine Mitarbeiter angelegt.</p>
|
|
</div>
|
|
</template>
|