Add holidays routes to backend and frontend; implement holiday associations and update UI components for admin holidays management
This commit is contained in:
Torsten Schulz (local)
@@ -72,6 +72,7 @@ const pageTitle = computed(() => {
|
||||
'sick': 'Krankheit',
|
||||
'workdays': 'Arbeitstage',
|
||||
'calendar': 'Kalender',
|
||||
'admin-holidays': 'Feiertage',
|
||||
'entries': 'Einträge',
|
||||
'stats': 'Statistiken'
|
||||
}
|
||||
|
||||
@@ -44,7 +44,17 @@ import { useAuthStore } from '../stores/authStore'
|
||||
const auth = useAuthStore()
|
||||
|
||||
// Rolle: 'user' | 'admin' (Fallback: 'user')
|
||||
const role = computed(() => (auth.user?.role || 'user').toString().toLowerCase())
|
||||
// Verwende role_string (vom Backend gemappt) oder fallback zu 'user'
|
||||
const role = computed(() => {
|
||||
if (auth.user?.role_string) {
|
||||
return auth.user.role_string.toLowerCase()
|
||||
}
|
||||
// Fallback für alte Implementierung oder wenn role ein Number ist
|
||||
if (typeof auth.user?.role === 'number') {
|
||||
return auth.user.role === 1 ? 'admin' : 'user'
|
||||
}
|
||||
return (auth.user?.role || 'user').toString().toLowerCase()
|
||||
})
|
||||
|
||||
const SECTIONS_USER = [
|
||||
{
|
||||
|
||||
@@ -15,6 +15,7 @@ import Vacation from '../views/Vacation.vue'
|
||||
import Sick from '../views/Sick.vue'
|
||||
import Workdays from '../views/Workdays.vue'
|
||||
import Calendar from '../views/Calendar.vue'
|
||||
import Holidays from '../views/Holidays.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
@@ -91,6 +92,12 @@ const router = createRouter({
|
||||
component: Calendar,
|
||||
meta: { requiresAuth: true }
|
||||
},
|
||||
{
|
||||
path: '/admin/holidays',
|
||||
name: 'admin-holidays',
|
||||
component: Holidays,
|
||||
meta: { requiresAuth: true, requiresAdmin: true }
|
||||
},
|
||||
{
|
||||
path: '/entries',
|
||||
name: 'entries',
|
||||
|
||||
585
frontend/src/views/Holidays.vue
Normal file
585
frontend/src/views/Holidays.vue
Normal file
@@ -0,0 +1,585 @@
|
||||
<template>
|
||||
<div class="holidays-page">
|
||||
<div class="card">
|
||||
<!-- Formular zum Erstellen eines Feiertags -->
|
||||
<form @submit.prevent="createHoliday" class="holiday-form">
|
||||
<h3>Feiertag hinzufügen</h3>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="date">Datum</label>
|
||||
<input
|
||||
type="date"
|
||||
id="date"
|
||||
v-model="form.date"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="hours">Freie Stunden</label>
|
||||
<input
|
||||
type="number"
|
||||
id="hours"
|
||||
v-model.number="form.hours"
|
||||
min="0"
|
||||
max="24"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group full-width">
|
||||
<label for="description">Beschreibung</label>
|
||||
<input
|
||||
type="text"
|
||||
id="description"
|
||||
v-model="form.description"
|
||||
placeholder="z.B. Tag der Deutschen Einheit"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group full-width">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="form.isFederal"
|
||||
@change="onFederalChange"
|
||||
>
|
||||
Bundesfeiertag (gilt für alle Bundesländer)
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row" v-if="!form.isFederal">
|
||||
<div class="form-group full-width">
|
||||
<label for="states">Bundesländer</label>
|
||||
<div class="states-grid">
|
||||
<label
|
||||
v-for="state in availableStates"
|
||||
:key="state.id"
|
||||
class="state-checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="state.id"
|
||||
v-model="form.selectedStates"
|
||||
>
|
||||
{{ state.name }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary" :disabled="loading">
|
||||
{{ loading ? 'Wird gespeichert...' : 'Feiertag hinzufügen' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- Zwei-Spalten-Layout für Tabellen -->
|
||||
<div class="tables-container">
|
||||
<!-- Zukünftige Feiertage -->
|
||||
<div class="table-column">
|
||||
<h3>Zukünftige Feiertage</h3>
|
||||
<table class="holidays-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Datum</th>
|
||||
<th>Freie Stunden</th>
|
||||
<th>Beschreibung</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="futureHolidays.length === 0">
|
||||
<td colspan="4" class="no-data">Keine zukünftigen Feiertage</td>
|
||||
</tr>
|
||||
<tr v-for="holiday in futureHolidays" :key="holiday.id">
|
||||
<td>{{ formatDate(holiday.date) }}</td>
|
||||
<td>{{ holiday.hours }}</td>
|
||||
<td>
|
||||
<div>{{ holiday.description }}</div>
|
||||
<div v-if="holiday.states && holiday.states.length > 0" class="state-tags">
|
||||
<span v-for="state in holiday.states" :key="state" class="state-tag">
|
||||
{{ state }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-else class="federal-tag">Bundesfeiertag</div>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
@click="deleteHoliday(holiday.id)"
|
||||
class="btn btn-delete-small"
|
||||
:disabled="loading"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Vergangene Feiertage -->
|
||||
<div class="table-column">
|
||||
<h3>Vergangene Feiertage</h3>
|
||||
<table class="holidays-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Datum</th>
|
||||
<th>Freie Stunden</th>
|
||||
<th>Beschreibung</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="pastHolidays.length === 0">
|
||||
<td colspan="4" class="no-data">Keine vergangenen Feiertage</td>
|
||||
</tr>
|
||||
<tr v-for="holiday in pastHolidays" :key="holiday.id">
|
||||
<td>{{ formatDate(holiday.date) }}</td>
|
||||
<td>{{ holiday.hours }}</td>
|
||||
<td>
|
||||
<div>{{ holiday.description }}</div>
|
||||
<div v-if="holiday.states && holiday.states.length > 0" class="state-tags">
|
||||
<span v-for="state in holiday.states" :key="state" class="state-tag">
|
||||
{{ state }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-else class="federal-tag">Bundesfeiertag</div>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
@click="deleteHoliday(holiday.id)"
|
||||
class="btn btn-delete-small"
|
||||
:disabled="loading"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal-Komponente -->
|
||||
<Modal
|
||||
v-if="showModal"
|
||||
:show="showModal"
|
||||
:title="modalConfig.title"
|
||||
:message="modalConfig.message"
|
||||
:type="modalConfig.type"
|
||||
:confirmText="modalConfig.confirmText"
|
||||
:cancelText="modalConfig.cancelText"
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useAuthStore } from '../stores/authStore'
|
||||
import { useModal } from '../composables/useModal'
|
||||
import Modal from '../components/Modal.vue'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const futureHolidays = ref([])
|
||||
const pastHolidays = ref([])
|
||||
const availableStates = ref([])
|
||||
const loading = ref(false)
|
||||
|
||||
const { showModal, modalConfig, alert, confirm, onConfirm, onCancel } = useModal()
|
||||
|
||||
const form = ref({
|
||||
date: new Date().toISOString().split('T')[0],
|
||||
hours: 8,
|
||||
description: '',
|
||||
isFederal: true,
|
||||
selectedStates: []
|
||||
})
|
||||
|
||||
// Lade alle Bundesländer
|
||||
async function loadStates() {
|
||||
try {
|
||||
const response = await fetch('http://localhost:3010/api/holidays/states', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authStore.token}`
|
||||
}
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Fehler beim Laden der Bundesländer')
|
||||
}
|
||||
|
||||
availableStates.value = await response.json()
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Bundesländer:', error)
|
||||
await alert(`Fehler: ${error.message}`, 'Fehler')
|
||||
}
|
||||
}
|
||||
|
||||
// Lade alle Feiertage
|
||||
async function loadHolidays() {
|
||||
try {
|
||||
loading.value = true
|
||||
const response = await fetch('http://localhost:3010/api/holidays', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authStore.token}`
|
||||
}
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Fehler beim Laden der Feiertage')
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
futureHolidays.value = data.future || []
|
||||
pastHolidays.value = data.past || []
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Feiertage:', error)
|
||||
await alert(`Fehler: ${error.message}`, 'Fehler')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Wenn "Bundesfeiertag" geändert wird
|
||||
function onFederalChange() {
|
||||
if (form.value.isFederal) {
|
||||
form.value.selectedStates = []
|
||||
}
|
||||
}
|
||||
|
||||
// Erstelle neuen Feiertag
|
||||
async function createHoliday() {
|
||||
if (!form.value.date || !form.value.description) {
|
||||
await alert('Bitte füllen Sie alle Felder aus', 'Fehlende Angaben')
|
||||
return
|
||||
}
|
||||
|
||||
// Validierung: Wenn nicht bundesweit, müssen Bundesländer ausgewählt sein
|
||||
if (!form.value.isFederal && form.value.selectedStates.length === 0) {
|
||||
await alert('Bitte wählen Sie mindestens ein Bundesland aus oder markieren Sie als Bundesfeiertag', 'Fehlende Angaben')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
const response = await fetch('http://localhost:3010/api/holidays', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${authStore.token}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
date: form.value.date,
|
||||
hours: form.value.hours,
|
||||
description: form.value.description,
|
||||
stateIds: form.value.isFederal ? [] : form.value.selectedStates
|
||||
})
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json()
|
||||
throw new Error(error.message || 'Fehler beim Erstellen des Feiertags')
|
||||
}
|
||||
|
||||
// Formular zurücksetzen
|
||||
resetForm()
|
||||
|
||||
// Liste neu laden
|
||||
await loadHolidays()
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Erstellen des Feiertags:', error)
|
||||
await alert(`Fehler: ${error.message}`, 'Fehler')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Lösche Feiertag
|
||||
async function deleteHoliday(id) {
|
||||
const confirmed = await confirm('Möchten Sie diesen Feiertag wirklich löschen?', 'Feiertag löschen')
|
||||
|
||||
if (!confirmed) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
const response = await fetch(`http://localhost:3010/api/holidays/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authStore.token}`
|
||||
}
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json()
|
||||
throw new Error(error.message || 'Fehler beim Löschen des Feiertags')
|
||||
}
|
||||
|
||||
await loadHolidays()
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Löschen des Feiertags:', error)
|
||||
await alert(`Fehler: ${error.message}`, 'Fehler')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Formatiere Datum für Anzeige (DD.MM.YYYY)
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return ''
|
||||
const date = new Date(dateStr + 'T00:00:00')
|
||||
return date.toLocaleDateString('de-DE', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
})
|
||||
}
|
||||
|
||||
// Formular zurücksetzen
|
||||
function resetForm() {
|
||||
form.value = {
|
||||
date: new Date().toISOString().split('T')[0],
|
||||
hours: 8,
|
||||
description: '',
|
||||
isFederal: true,
|
||||
selectedStates: []
|
||||
}
|
||||
}
|
||||
|
||||
// Initiales Laden
|
||||
onMounted(async () => {
|
||||
await Promise.all([
|
||||
loadStates(),
|
||||
loadHolidays()
|
||||
])
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.holidays-page {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.holiday-form h3 {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-group.full-width {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-weight: 500;
|
||||
margin-bottom: 6px;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #4CAF50;
|
||||
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.states-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.state-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.state-checkbox:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.state-checkbox input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.state-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.state-tag {
|
||||
display: inline-block;
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.federal-tag {
|
||||
display: inline-block;
|
||||
background: #f3e5f5;
|
||||
color: #7b1fa2;
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid #eee;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.tables-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.table-column h3 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.holidays-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.holidays-table th {
|
||||
text-align: left;
|
||||
padding: 10px 8px;
|
||||
background: #f5f5f5;
|
||||
border-bottom: 2px solid #ddd;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.holidays-table th:last-child {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.holidays-table td {
|
||||
padding: 10px 8px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.holidays-table tbody tr:hover {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
padding: 20px !important;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #4CAF50, #45a049);
|
||||
color: white;
|
||||
box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(76, 175, 80, 0.4);
|
||||
}
|
||||
|
||||
.btn-delete-small {
|
||||
background: #f44336;
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.btn-delete-small:hover:not(:disabled) {
|
||||
background: #da190b;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user