Add profile routes to backend and frontend; implement user state handling for holidays and workdays, and update UI components for profile settings
This commit is contained in:
Torsten Schulz (local)
326
frontend/src/views/Profile.vue
Normal file
326
frontend/src/views/Profile.vue
Normal file
@@ -0,0 +1,326 @@
|
||||
<template>
|
||||
<div class="profile-page">
|
||||
<div class="card">
|
||||
<form @submit.prevent="saveProfile" class="profile-form">
|
||||
<div class="form-group">
|
||||
<label for="fullName">Voller Name (optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
id="fullName"
|
||||
v-model="form.fullName"
|
||||
placeholder="z.B. Max Mustermann"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Email-Adresse</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
v-model="form.email"
|
||||
placeholder="email@beispiel.de"
|
||||
disabled
|
||||
>
|
||||
<small class="help-text">Die Email-Adresse kann derzeit nicht geändert werden</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="state">Bundesland</label>
|
||||
<select
|
||||
id="state"
|
||||
v-model="form.stateId"
|
||||
>
|
||||
<option value="">Kein Bundesland ausgewählt</option>
|
||||
<option
|
||||
v-for="state in availableStates"
|
||||
:key="state.id"
|
||||
:value="state.id"
|
||||
>
|
||||
{{ state.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="weekWorkdays">Arbeitstage pro Woche</label>
|
||||
<input
|
||||
type="number"
|
||||
id="weekWorkdays"
|
||||
v-model.number="form.weekWorkdays"
|
||||
min="1"
|
||||
max="7"
|
||||
required
|
||||
>
|
||||
<small class="help-text">Standard: 5 (Montag bis Freitag)</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="dailyHours">Tägliche Arbeitsstunden (Grundwert)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="dailyHours"
|
||||
v-model.number="form.dailyHours"
|
||||
min="1"
|
||||
max="24"
|
||||
required
|
||||
>
|
||||
<small class="help-text">
|
||||
Wird als Fallback verwendet, wenn kein spezifischer Zeitwunsch definiert ist.
|
||||
Für detaillierte Zeitwünsche siehe <router-link to="/settings/timewish">Zeitwünsche</router-link>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="titleType">Anzeige in Seitentitel</label>
|
||||
<select
|
||||
id="titleType"
|
||||
v-model.number="form.preferredTitleType"
|
||||
>
|
||||
<option :value="0">Restzeit für Tag ohne Korrektur</option>
|
||||
<option :value="1">Restzeit für Tag, korrigiert nach Wochenarbeitszeit</option>
|
||||
<option :value="2">Restzeit für Tag, korrigiert nach Gesamtarbeitszeit</option>
|
||||
<option :value="3">Heute gearbeitete Zeit</option>
|
||||
<option :value="4">Uhrzeit für Arbeitsende ohne Korrektur</option>
|
||||
<option :value="5">Uhrzeit für Arbeitsende, korrigiert nach Wochenarbeitszeit</option>
|
||||
<option :value="6">Uhrzeit für Arbeitsende, korrigiert nach Gesamtarbeitszeit</option>
|
||||
<option :value="7">Nur App-Name</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary" :disabled="loading">
|
||||
{{ loading ? 'Wird gespeichert...' : 'Einstellungen speichern' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</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 availableStates = ref([])
|
||||
const loading = ref(false)
|
||||
|
||||
const { showModal, modalConfig, alert, confirm, onConfirm, onCancel } = useModal()
|
||||
|
||||
const form = ref({
|
||||
fullName: '',
|
||||
email: '',
|
||||
stateId: null,
|
||||
weekWorkdays: 5,
|
||||
dailyHours: 8,
|
||||
preferredTitleType: 2
|
||||
})
|
||||
|
||||
// Lade Profil
|
||||
async function loadProfile() {
|
||||
try {
|
||||
loading.value = true
|
||||
const response = await fetch('http://localhost:3010/api/profile', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authStore.token}`
|
||||
}
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Fehler beim Laden des Profils')
|
||||
}
|
||||
|
||||
const profile = await response.json()
|
||||
form.value = {
|
||||
fullName: profile.fullName || '',
|
||||
email: profile.email || '',
|
||||
stateId: profile.stateId || null,
|
||||
weekWorkdays: profile.weekWorkdays || 5,
|
||||
dailyHours: profile.dailyHours || 8,
|
||||
preferredTitleType: profile.preferredTitleType || 2
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden des Profils:', error)
|
||||
await alert(`Fehler: ${error.message}`, 'Fehler')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Lade Bundesländer
|
||||
async function loadStates() {
|
||||
try {
|
||||
const response = await fetch('http://localhost:3010/api/profile/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)
|
||||
}
|
||||
}
|
||||
|
||||
// Speichere Profil
|
||||
async function saveProfile() {
|
||||
try {
|
||||
loading.value = true
|
||||
const response = await fetch('http://localhost:3010/api/profile', {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${authStore.token}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
fullName: form.value.fullName,
|
||||
stateId: form.value.stateId,
|
||||
weekWorkdays: form.value.weekWorkdays,
|
||||
dailyHours: form.value.dailyHours,
|
||||
preferredTitleType: form.value.preferredTitleType
|
||||
})
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json()
|
||||
throw new Error(error.message || 'Fehler beim Speichern des Profils')
|
||||
}
|
||||
|
||||
await alert('Einstellungen erfolgreich gespeichert', 'Erfolg')
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Speichern des Profils:', error)
|
||||
await alert(`Fehler: ${error.message}`, 'Fehler')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Initiales Laden
|
||||
onMounted(async () => {
|
||||
await Promise.all([
|
||||
loadStates(),
|
||||
loadProfile()
|
||||
])
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.profile-page {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.profile-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.form-group input:disabled {
|
||||
background: #f5f5f5;
|
||||
color: #999;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: #4CAF50;
|
||||
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
|
||||
}
|
||||
|
||||
.help-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.help-text a {
|
||||
color: #4CAF50;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.help-text a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
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);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user