Time Changes
This commit is contained in:
@@ -7,35 +7,49 @@ definePageMeta({
|
||||
layout: "default",
|
||||
})
|
||||
|
||||
const { list, start, stop, submit, approve } = useStaffTime()
|
||||
const { list, start, stop, submit, approve, reject } = useStaffTime()
|
||||
const auth = useAuthStore()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
const { $dayjs } = useNuxtApp()
|
||||
|
||||
// MOBILE DETECTION
|
||||
const platformIsNative = useCapacitor().getIsNative()
|
||||
|
||||
// STATE
|
||||
const loading = ref(false)
|
||||
const showModal = ref(false)
|
||||
const editEntry = ref(null)
|
||||
const view = ref('list') // 'list' | 'timeline'
|
||||
|
||||
// 👥 Nutzer-Filter
|
||||
// MODAL STATES
|
||||
const showEditModal = ref(false)
|
||||
const entryToEdit = ref(null)
|
||||
|
||||
const showRejectModal = ref(false)
|
||||
const entryToReject = ref(null)
|
||||
const rejectReason = ref("")
|
||||
|
||||
// FILTER & USER
|
||||
const users = ref([])
|
||||
// WICHTIG: Standardmäßig IMMER den aktuellen User wählen (kein null mehr)
|
||||
const selectedUser = ref(auth.user.id)
|
||||
const canViewAll = computed(() => auth.permissions.includes('staff.time.read_all'))
|
||||
|
||||
// LIST + ACTIVE
|
||||
// DATA
|
||||
const entries = ref([])
|
||||
|
||||
// Active berechnet sich jetzt aus den geladenen Einträgen.
|
||||
// Da wir immer nur EINEN User laden, ist ein laufender Eintrag hier
|
||||
// automatisch der aktive Eintrag des angezeigten Users.
|
||||
const active = computed(() => entries.value.find(e => !e.stopped_at))
|
||||
|
||||
// Prüft, ob wir gerade das eigene Profil ansehen (für Start/Stop Buttons)
|
||||
const isViewingSelf = computed(() => selectedUser.value === auth.user.id)
|
||||
|
||||
// GROUPING
|
||||
const groupedEntries = computed(() => {
|
||||
const groups = {}
|
||||
entries.value.forEach(entry => {
|
||||
const dateKey = $dayjs(entry.started_at).format('YYYY-MM-DD')
|
||||
if (!groups[dateKey]) groups[dateKey] = []
|
||||
groups[dateKey].push(entry)
|
||||
})
|
||||
return groups
|
||||
})
|
||||
|
||||
// CONFIG
|
||||
const typeLabel = {
|
||||
work: "Arbeitszeit",
|
||||
vacation: "Urlaub",
|
||||
@@ -52,26 +66,20 @@ const typeColor = {
|
||||
other: "gray"
|
||||
}
|
||||
|
||||
|
||||
// ACTIONS
|
||||
async function loadUsers() {
|
||||
if (!canViewAll.value) return
|
||||
const res = (await useNuxtApp().$api("/api/tenant/profiles")).data
|
||||
users.value = res
|
||||
}
|
||||
|
||||
// LOAD ENTRIES (Erzwingt jetzt immer eine User-ID)
|
||||
async function load() {
|
||||
if (!selectedUser.value) return
|
||||
|
||||
entries.value = await list({
|
||||
user_id: selectedUser.value // 👈 Hier wird der Filter erzwungen
|
||||
})
|
||||
entries.value = await list({ user_id: selectedUser.value })
|
||||
}
|
||||
|
||||
async function handleStart() {
|
||||
// Sicherheitshalber: Starten nur erlauben, wenn man sich selbst ansieht
|
||||
if (!isViewingSelf.value) return
|
||||
|
||||
loading.value = true
|
||||
await start("Arbeitszeit gestartet")
|
||||
await load()
|
||||
@@ -80,9 +88,6 @@ async function handleStart() {
|
||||
|
||||
async function handleStop() {
|
||||
if (!active.value) return
|
||||
// Stoppen darf man ggf. auch andere (als Admin), daher hier kein isViewingSelf Check
|
||||
// oder je nach Logik anpassen. Hier erlauben wir das Stoppen des angezeigten Timers.
|
||||
|
||||
loading.value = true
|
||||
await stop(active.value.id)
|
||||
await load()
|
||||
@@ -90,28 +95,53 @@ async function handleStop() {
|
||||
}
|
||||
|
||||
function handleEdit(entry) {
|
||||
editEntry.value = entry
|
||||
showModal.value = true
|
||||
entryToEdit.value = entry
|
||||
showEditModal.value = true
|
||||
}
|
||||
|
||||
async function handleSubmit(entry) {
|
||||
loading.value = true
|
||||
await submit(entry)
|
||||
await load()
|
||||
loading.value = false
|
||||
toast.add({ title: 'Zeit eingereicht', color: 'green' })
|
||||
}
|
||||
|
||||
async function handleApprove(entry) {
|
||||
loading.value = true
|
||||
await approve(entry)
|
||||
await load()
|
||||
loading.value = false
|
||||
toast.add({ title: 'Zeit genehmigt', color: 'green' })
|
||||
}
|
||||
|
||||
// Watcher: Wenn der User im Dropdown gewechselt wird, neu laden
|
||||
watch(selectedUser, () => {
|
||||
load()
|
||||
})
|
||||
function openRejectModal(entry) {
|
||||
entryToReject.value = entry
|
||||
rejectReason.value = ""
|
||||
showRejectModal.value = true
|
||||
}
|
||||
|
||||
async function confirmReject() {
|
||||
if (!entryToReject.value) return
|
||||
loading.value = true
|
||||
try {
|
||||
await reject(entryToReject.value, rejectReason.value || "Vom Administrator abgelehnt")
|
||||
toast.add({ title: 'Zeit abgelehnt', color: 'green' })
|
||||
showRejectModal.value = false
|
||||
await load()
|
||||
} catch (e) {
|
||||
toast.add({ title: 'Fehler beim Ablehnen', description: e.message, color: 'red' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
entryToReject.value = null
|
||||
}
|
||||
}
|
||||
|
||||
watch(selectedUser, () => { load() })
|
||||
|
||||
onMounted(async () => {
|
||||
await loadUsers()
|
||||
await load() // Lädt initial den eingeloggten User
|
||||
await load()
|
||||
setPageLayout(platformIsNative ? 'mobile' : 'default')
|
||||
})
|
||||
</script>
|
||||
@@ -120,302 +150,324 @@ onMounted(async () => {
|
||||
<template v-if="!platformIsNative">
|
||||
<UDashboardNavbar title="Zeiterfassung" :badge="entries.length" />
|
||||
|
||||
<!--<UDashboardToolbar>
|
||||
<UDashboardToolbar>
|
||||
<template #left>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-clock" class="text-primary-500" />
|
||||
<span v-if="active" class="text-primary-600 font-medium">
|
||||
<span v-if="isViewingSelf">Läuft seit</span>
|
||||
<span v-else>Mitarbeiter aktiv seit</span>
|
||||
{{ useNuxtApp().$dayjs(active.started_at).format('HH:mm') }}
|
||||
</span>
|
||||
<span v-else class="text-gray-500">
|
||||
<span v-if="isViewingSelf">Keine aktive Zeit</span>
|
||||
<span v-else>Mitarbeiter nicht aktiv</span>
|
||||
</span>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2 border-r pr-4 mr-2">
|
||||
<UIcon name="i-heroicons-clock" class="w-5 h-5" :class="active ? 'text-primary-500 animate-pulse' : 'text-gray-400'" />
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500 uppercase font-bold">Status</span>
|
||||
<span v-if="active" class="text-sm font-medium text-primary-600">
|
||||
Läuft seit {{ useNuxtApp().$dayjs(active.started_at).format('HH:mm') }}
|
||||
</span>
|
||||
<span v-else class="text-sm text-gray-600">Nicht aktiv</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="canViewAll" class="flex items-center gap-2">
|
||||
<USelectMenu
|
||||
v-model="selectedUser"
|
||||
:options="users.map(u => ({ label: u.full_name || u.email, value: u.user_id }))"
|
||||
placeholder="Benutzer auswählen"
|
||||
value-attribute="value"
|
||||
option-attribute="label"
|
||||
class="min-w-[220px]"
|
||||
:clearable="false"
|
||||
/>
|
||||
<UTooltip text="Anwesenheiten auswerten">
|
||||
<UButton
|
||||
:disabled="!selectedUser"
|
||||
color="gray"
|
||||
icon="i-heroicons-chart-bar"
|
||||
variant="ghost"
|
||||
@click="router.push(`/staff/time/${selectedUser}/evaluate`)"
|
||||
/>
|
||||
</UTooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #right>
|
||||
<template v-if="isViewingSelf">
|
||||
<UButton
|
||||
v-if="active"
|
||||
color="red"
|
||||
icon="i-heroicons-stop"
|
||||
:loading="loading"
|
||||
label="Stoppen"
|
||||
@click="handleStop"
|
||||
/>
|
||||
<UButton
|
||||
v-else
|
||||
color="green"
|
||||
icon="i-heroicons-play"
|
||||
:loading="loading"
|
||||
label="Starten"
|
||||
@click="handleStart"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="active && canViewAll">
|
||||
<UButton
|
||||
color="red"
|
||||
variant="soft"
|
||||
icon="i-heroicons-stop"
|
||||
:loading="loading"
|
||||
label="Mitarbeiter stoppen"
|
||||
@click="handleStop"
|
||||
/>
|
||||
</template>
|
||||
<div class="flex gap-2 items-center">
|
||||
<div class="flex bg-gray-100 dark:bg-gray-800 rounded-lg p-1 mr-2">
|
||||
<UTooltip text="Listenansicht">
|
||||
<UButton
|
||||
size="xs"
|
||||
:color="view === 'list' ? 'white' : 'gray'"
|
||||
variant="ghost"
|
||||
icon="i-heroicons-table-cells"
|
||||
@click="view = 'list'"
|
||||
/>
|
||||
</UTooltip>
|
||||
<UTooltip text="Zeitstrahl">
|
||||
<UButton
|
||||
size="xs"
|
||||
:color="view === 'timeline' ? 'white' : 'gray'"
|
||||
variant="ghost"
|
||||
icon="i-heroicons-list-bullet"
|
||||
@click="view = 'timeline'"
|
||||
/>
|
||||
</UTooltip>
|
||||
</div>
|
||||
|
||||
<template v-if="isViewingSelf">
|
||||
<UButton v-if="active" color="red" icon="i-heroicons-stop" :loading="loading" label="Stoppen" @click="handleStop" />
|
||||
<UButton v-else color="green" icon="i-heroicons-play" :loading="loading" label="Starten" @click="handleStart" />
|
||||
</template>
|
||||
<template v-else-if="active && canViewAll">
|
||||
<UButton color="red" variant="soft" icon="i-heroicons-stop" :loading="loading" label="Mitarbeiter stoppen" @click="handleStop" />
|
||||
</template>
|
||||
|
||||
<UButton
|
||||
color="primary"
|
||||
icon="i-heroicons-plus"
|
||||
label="Zeit"
|
||||
@click="() => { editEntry = null; showModal = true }"
|
||||
/>
|
||||
</template>
|
||||
</UDashboardToolbar>-->
|
||||
|
||||
<UDashboardToolbar>
|
||||
<template #left>
|
||||
<div v-if="canViewAll" class="flex items-center gap-2">
|
||||
<USelectMenu
|
||||
v-model="selectedUser"
|
||||
:options="users.map(u => ({ label: u.full_name || u.email, value: u.user_id }))"
|
||||
placeholder="Benutzer auswählen"
|
||||
value-attribute="value"
|
||||
option-attribute="label"
|
||||
class="min-w-[220px]"
|
||||
:clearable="false"
|
||||
/>
|
||||
|
||||
<UTooltip text="Anwesenheiten auswerten">
|
||||
<UButton
|
||||
:disabled="!selectedUser"
|
||||
color="gray"
|
||||
icon="i-heroicons-chart-bar"
|
||||
label="Auswertung"
|
||||
variant="soft"
|
||||
@click="router.push(`/staff/time/${selectedUser}/evaluate`)"
|
||||
/>
|
||||
</UTooltip>
|
||||
|
||||
<UButton color="gray" variant="solid" icon="i-heroicons-plus" label="Erfassen" @click="() => { entryToEdit = null; showEditModal = true }" />
|
||||
</div>
|
||||
</template>
|
||||
</UDashboardToolbar>
|
||||
|
||||
<UDashboardPanelContent class="p-0 sm:p-4">
|
||||
|
||||
<UDashboardPanelContent>
|
||||
<UTable
|
||||
:rows="entries"
|
||||
:columns="[
|
||||
{ key: 'actions', label: '' },
|
||||
{ key: 'state', label: 'Status' },
|
||||
{ key: 'started_at', label: 'Start' },
|
||||
{ key: 'stopped_at', label: 'Ende' },
|
||||
{ key: 'duration_minutes', label: 'Dauer' },
|
||||
// { key: 'user', label: 'Mitarbeiter' }, // Spalte entfernt, da wir eh nur einen User sehen
|
||||
{ key: 'type', label: 'Typ' },
|
||||
{ key: 'description', label: 'Beschreibung' },
|
||||
]"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Zeiten anzuzeigen' }"
|
||||
>
|
||||
<template #state-data="{ row }">
|
||||
<span v-if="row.state === 'approved'" class="text-primary-500">Genehmigt</span>
|
||||
<span v-else-if="row.state === 'submitted'" class="text-cyan-500">Eingereicht</span>
|
||||
<span v-else-if="row.state === 'draft'" class="text-red-500">Entwurf</span>
|
||||
</template>
|
||||
<template #type-data="{ row }">
|
||||
<UBadge :color="typeColor[row.type] || 'gray'">
|
||||
{{ typeLabel[row.type] || row.type }}
|
||||
</UBadge>
|
||||
</template>
|
||||
|
||||
<template #started_at-data="{ row }">
|
||||
<span v-if="row.type === 'vacation' || row.type === 'sick'">
|
||||
{{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY") }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY HH:mm") }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #stopped_at-data="{ row }">
|
||||
<span v-if="!row.stopped_at" class="text-primary-500 font-medium">
|
||||
läuft...
|
||||
</span>
|
||||
<span v-else-if="row.type === 'vacation' || row.type === 'sick'">
|
||||
{{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY") }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY HH:mm") }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #duration_minutes-data="{ row }">
|
||||
<span v-if="row.type === 'vacation' || row.type === 'sick'">
|
||||
</span>
|
||||
<span v-else>
|
||||
<UCard v-if="view === 'list'" :ui="{ body: { padding: 'p-0 sm:p-0' } }">
|
||||
<UTable
|
||||
:rows="entries"
|
||||
:columns="[
|
||||
{ key: 'actions', label: 'Aktionen', class: 'w-32' },
|
||||
{ key: 'state', label: 'Status' },
|
||||
{ key: 'started_at', label: 'Start' },
|
||||
{ key: 'stopped_at', label: 'Ende' },
|
||||
{ key: 'duration_minutes', label: 'Dauer' },
|
||||
{ key: 'type', label: 'Typ' },
|
||||
{ key: 'description', label: 'Beschreibung' },
|
||||
]"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Zeiten anzuzeigen' }"
|
||||
>
|
||||
<template #state-data="{ row }">
|
||||
<UBadge v-if="row.state === 'approved'" color="green" variant="subtle">Genehmigt</UBadge>
|
||||
<UBadge v-else-if="row.state === 'submitted'" color="cyan" variant="subtle">Eingereicht</UBadge>
|
||||
<UBadge v-else-if="row.state === 'rejected'" color="red" variant="subtle">Abgelehnt</UBadge>
|
||||
<UBadge v-else color="gray" variant="subtle">Entwurf</UBadge>
|
||||
</template>
|
||||
<template #type-data="{ row }">
|
||||
<UBadge :color="typeColor[row.type] || 'gray'" variant="soft">{{ typeLabel[row.type] || row.type }}</UBadge>
|
||||
</template>
|
||||
<template #started_at-data="{ row }">
|
||||
<span v-if="['vacation','sick'].includes(row.type)">{{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY") }}</span>
|
||||
<span v-else>{{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY HH:mm") }}</span>
|
||||
</template>
|
||||
<template #stopped_at-data="{ row }">
|
||||
<span v-if="!row.stopped_at" class="text-primary-500 font-medium animate-pulse">läuft...</span>
|
||||
<span v-else-if="['vacation','sick'].includes(row.type)">{{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY") }}</span>
|
||||
<span v-else>{{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY HH:mm") }}</span>
|
||||
</template>
|
||||
<template #duration_minutes-data="{ row }">
|
||||
{{ row.duration_minutes ? useFormatDuration(row.duration_minutes) : "-" }}
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
<template #actions-data="{ row }">
|
||||
<div class="flex items-center gap-1">
|
||||
<UTooltip text="Einreichen" v-if="(row.state === 'draft' || row.state === 'factual') && row.stopped_at">
|
||||
<UButton size="xs" color="cyan" variant="ghost" icon="i-heroicons-paper-airplane" @click="handleSubmit(row)" :loading="loading" />
|
||||
</UTooltip>
|
||||
<UTooltip text="Genehmigen" v-if="row.state === 'submitted' && canViewAll">
|
||||
<UButton size="xs" color="green" variant="ghost" icon="i-heroicons-check" @click="handleApprove(row)" :loading="loading" />
|
||||
</UTooltip>
|
||||
<UTooltip text="Ablehnen" v-if="(row.state === 'submitted' || row.state === 'approved') && canViewAll">
|
||||
<UButton size="xs" color="red" variant="ghost" icon="i-heroicons-x-mark" @click="openRejectModal(row)" :loading="loading" />
|
||||
</UTooltip>
|
||||
<UTooltip text="Bearbeiten" v-if="['draft', 'factual', 'submitted'].includes(row.state)">
|
||||
<UButton size="xs" color="gray" variant="ghost" icon="i-heroicons-pencil-square" @click="handleEdit(row)" />
|
||||
</UTooltip>
|
||||
</div>
|
||||
</template>
|
||||
<template #description-data="{ row }">
|
||||
<span v-if="row.type === 'vacation'">{{row.vacation_reason}}</span>
|
||||
<span v-else-if="row.type === 'sick'">{{row.sick_reason}}</span>
|
||||
<span v-else>{{row.description}}</span>
|
||||
</template>
|
||||
</UTable>
|
||||
</UCard>
|
||||
|
||||
<template #actions-data="{ row }">
|
||||
<UTooltip text="Zeit genehmigen" v-if="row.state === 'submitted' && canViewAll">
|
||||
<UButton
|
||||
variant="ghost"
|
||||
icon="i-heroicons-check-circle"
|
||||
@click="handleApprove(row)"
|
||||
/>
|
||||
</UTooltip>
|
||||
<UTooltip text="Zeit einreichen" v-if="row.state === 'draft'">
|
||||
<UButton
|
||||
variant="ghost"
|
||||
icon="i-heroicons-arrow-right-end-on-rectangle"
|
||||
@click="handleSubmit(row)"
|
||||
/>
|
||||
</UTooltip>
|
||||
<UTooltip text="Zeit bearbeiten" v-if="row.state === 'draft'">
|
||||
<UButton
|
||||
variant="ghost"
|
||||
icon="i-heroicons-pencil-square"
|
||||
@click="handleEdit(row)"
|
||||
/>
|
||||
</UTooltip>
|
||||
</template>
|
||||
<div v-else class="max-w-5xl mx-auto pb-20">
|
||||
|
||||
<template #description-data="{ row }">
|
||||
<span v-if="row.type === 'vacation'">{{row.vacation_reason}}</span>
|
||||
<span v-else-if="row.type === 'sick'">{{row.sick_reason}}</span>
|
||||
<span v-else>{{row.description}}</span>
|
||||
</template>
|
||||
</UTable>
|
||||
<div v-for="(group, date) in groupedEntries" :key="date" class="relative group/date">
|
||||
|
||||
<div class="sticky top-0 z-10 bg-white dark:bg-gray-900 py-4 mb-4 border-b border-gray-200 dark:border-gray-800 flex items-center gap-3">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
|
||||
<h3 class="text-lg font-bold text-gray-800 dark:text-gray-100 capitalize">
|
||||
{{ useNuxtApp().$dayjs(date).format('dddd, DD. MMMM') }}
|
||||
</h3>
|
||||
<span class="text-xs text-gray-500 font-normal mt-0.5">
|
||||
{{ group.length }} Einträge
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="absolute left-[5px] top-14 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700 group-last/date:bottom-auto group-last/date:h-full"></div>
|
||||
|
||||
<div class="space-y-6 pb-8">
|
||||
<div v-for="entry in group" :key="entry.id" class="relative pl-8">
|
||||
|
||||
<div
|
||||
class="absolute left-0 top-6 w-3 h-3 rounded-full border-2 border-white dark:border-gray-900 shadow-sm z-0"
|
||||
:class="{
|
||||
'bg-green-500 ring-4 ring-green-100 dark:ring-green-900/30': !entry.stopped_at,
|
||||
'bg-gray-400': entry.stopped_at && entry.type === 'work',
|
||||
'bg-yellow-400': entry.type === 'vacation',
|
||||
'bg-red-400': entry.type === 'sick'
|
||||
}"
|
||||
></div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow relative overflow-hidden">
|
||||
|
||||
<div class="flex flex-wrap justify-between items-center p-4 border-b border-gray-100 dark:border-gray-700 bg-gray-50/30 dark:bg-gray-800">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="font-mono text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
{{ useNuxtApp().$dayjs(entry.started_at).format('HH:mm') }}
|
||||
<span class="text-gray-400 text-sm">bis</span>
|
||||
<span v-if="entry.stopped_at">{{ useNuxtApp().$dayjs(entry.stopped_at).format('HH:mm') }}</span>
|
||||
<span v-else class="text-primary-500 animate-pulse text-sm uppercase font-bold tracking-wider">Läuft</span>
|
||||
</div>
|
||||
|
||||
<UBadge :color="typeColor[entry.type]" variant="soft" size="xs">{{ typeLabel[entry.type] }}</UBadge>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<span v-if="entry.duration_minutes" class="text-sm font-medium text-gray-600 dark:text-gray-300">
|
||||
{{ useFormatDuration(entry.duration_minutes) }}
|
||||
</span>
|
||||
|
||||
<UBadge v-if="entry.state === 'approved'" color="green" size="xs" variant="solid">Genehmigt</UBadge>
|
||||
<UBadge v-else-if="entry.state === 'submitted'" color="cyan" size="xs" variant="solid">Eingereicht</UBadge>
|
||||
<UBadge v-else-if="entry.state === 'rejected'" color="red" size="xs" variant="solid">Abgelehnt</UBadge>
|
||||
<UBadge v-else color="gray" size="xs" variant="subtle">Entwurf</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<p class="text-gray-700 dark:text-gray-300 text-sm whitespace-pre-wrap">
|
||||
{{ entry.description || 'Keine Beschreibung angegeben.' }}
|
||||
</p>
|
||||
<p v-if="entry.type === 'vacation'" class="text-sm text-gray-500 italic mt-1">
|
||||
Grund: {{ entry.vacation_reason }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 dark:bg-gray-900/30 px-4 py-2 flex justify-end gap-2 border-t border-gray-100 dark:border-gray-700">
|
||||
<UButton
|
||||
v-if="(entry.state === 'draft' || entry.state === 'factual') && entry.stopped_at"
|
||||
size="xs" color="cyan" variant="solid" icon="i-heroicons-paper-airplane" label="Einreichen"
|
||||
@click="handleSubmit(entry)" :loading="loading"
|
||||
/>
|
||||
|
||||
<UButton
|
||||
v-if="entry.state === 'submitted' && canViewAll"
|
||||
size="xs" color="green" variant="solid" icon="i-heroicons-check" label="Genehmigen"
|
||||
@click="handleApprove(entry)" :loading="loading"
|
||||
/>
|
||||
|
||||
<UButton
|
||||
v-if="(entry.state === 'submitted' || entry.state === 'approved') && canViewAll"
|
||||
size="xs" color="red" variant="ghost" icon="i-heroicons-x-mark" label="Ablehnen"
|
||||
@click="openRejectModal(entry)" :loading="loading"
|
||||
/>
|
||||
|
||||
<UButton
|
||||
v-if="['draft', 'factual', 'submitted'].includes(entry.state)"
|
||||
size="xs" color="gray" variant="ghost" icon="i-heroicons-pencil-square" label="Bearbeiten"
|
||||
@click="handleEdit(entry)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="entries.length === 0" class="flex flex-col items-center justify-center py-20 text-gray-400">
|
||||
<UIcon name="i-heroicons-calendar" class="w-12 h-12 mb-2 opacity-50" />
|
||||
<p>Keine Einträge im gewählten Zeitraum.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</UDashboardPanelContent>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<UDashboardNavbar title="Zeiterfassung" />
|
||||
|
||||
<div class="relative flex flex-col h-[100dvh] overflow-hidden">
|
||||
|
||||
<div v-if="isViewingSelf" class="p-4 bg-white dark:bg-gray-900 border-b sticky top-0 z-20 shadow-sm">
|
||||
<UCard class="p-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">Aktive Zeit</p>
|
||||
<p v-if="active" class="text-primary-600 font-semibold">
|
||||
<p v-if="active" class="text-primary-600 font-semibold animate-pulse">
|
||||
Läuft seit {{ useNuxtApp().$dayjs(active.started_at).format('HH:mm') }}
|
||||
</p>
|
||||
<p v-else class="text-gray-600">Keine aktive Zeit</p>
|
||||
</div>
|
||||
|
||||
<UButton
|
||||
v-if="active"
|
||||
color="red"
|
||||
icon="i-heroicons-stop"
|
||||
:loading="loading"
|
||||
@click="handleStop"
|
||||
/>
|
||||
<UButton
|
||||
v-else
|
||||
color="green"
|
||||
icon="i-heroicons-play"
|
||||
:loading="loading"
|
||||
@click="handleStart"
|
||||
/>
|
||||
<div class="flex gap-2">
|
||||
<template v-if="isViewingSelf">
|
||||
<UButton v-if="active" color="red" icon="i-heroicons-stop" :loading="loading" @click="handleStop" />
|
||||
<UButton v-else color="green" icon="i-heroicons-play" :loading="loading" @click="handleStart" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<div class="px-3 mt-3">
|
||||
<UButton
|
||||
color="gray"
|
||||
icon="i-heroicons-chart-bar"
|
||||
label="Auswertung"
|
||||
class="w-full"
|
||||
variant="soft"
|
||||
@click="router.push(`/staff/time/${selectedUser}/evaluate`)"
|
||||
/>
|
||||
<UButton color="gray" icon="i-heroicons-chart-bar" label="Auswertung" class="w-full" variant="soft" @click="router.push(`/staff/time/${selectedUser}/evaluate`)" />
|
||||
</div>
|
||||
|
||||
<UDashboardPanelContent class="flex-1 overflow-y-auto p-3 space-y-4 pb-24">
|
||||
|
||||
<UCard
|
||||
v-for="row in entries"
|
||||
:key="row.id"
|
||||
class="p-4 border rounded-xl active:scale-[0.98] transition cursor-pointer"
|
||||
@click="handleEdit(row)"
|
||||
>
|
||||
<UCard v-for="row in entries" :key="row.id" class="p-4 border rounded-xl" @click="handleEdit(row)">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="font-semibold flex items-center gap-2">
|
||||
<span>{{ row.description || 'Keine Beschreibung' }}</span>
|
||||
|
||||
<UBadge :color="typeColor[row.type]" class="text-xs">
|
||||
{{ typeLabel[row.type] }}
|
||||
</UBadge>
|
||||
<span class="truncate max-w-[150px]">{{ row.description || 'Keine Beschreibung' }}</span>
|
||||
<UBadge :color="typeColor[row.type]" class="text-xs">{{ typeLabel[row.type] }}</UBadge>
|
||||
</div>
|
||||
|
||||
<UBadge
|
||||
:color="{ approved: 'primary', submitted: 'cyan', draft: 'red' }[row.state]"
|
||||
>
|
||||
{{ { approved: 'Genehmigt', submitted: 'Eingereicht', draft: 'Entwurf' }[row.state] || row.state }}
|
||||
</UBadge>
|
||||
<UBadge v-if="row.state === 'approved'" color="green">Genehmigt</UBadge>
|
||||
<UBadge v-else-if="row.state === 'submitted'" color="cyan">Eingereicht</UBadge>
|
||||
<UBadge v-else-if="row.state === 'rejected'" color="red">Abgelehnt</UBadge>
|
||||
<UBadge v-else color="gray">Entwurf</UBadge>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-gray-500 mt-1">
|
||||
Start: {{ useNuxtApp().$dayjs(row.started_at).format('DD.MM.YY HH:mm') }}
|
||||
</p>
|
||||
|
||||
<p class="text-sm text-gray-500">
|
||||
Ende:
|
||||
<span v-if="row.stopped_at">
|
||||
{{ useNuxtApp().$dayjs(row.stopped_at).format('DD.MM.YY HH:mm') }}
|
||||
</span>
|
||||
<span v-else class="text-primary-500 font-medium">läuft...</span>
|
||||
</p>
|
||||
|
||||
<p class="text-sm text-gray-500">
|
||||
Dauer:
|
||||
{{ row.duration_minutes ? useFormatDuration(row.duration_minutes) : '-' }}
|
||||
</p>
|
||||
|
||||
<div class="flex gap-2 mt-3">
|
||||
<UButton
|
||||
v-if="row.state === 'draft'"
|
||||
color="gray"
|
||||
icon="i-heroicons-arrow-right-end-on-rectangle"
|
||||
label="Einreichen"
|
||||
variant="soft"
|
||||
@click.stop="handleSubmit(row)"
|
||||
/>
|
||||
<UButton
|
||||
v-if="row.state === 'submitted' && canViewAll"
|
||||
color="primary"
|
||||
icon="i-heroicons-check"
|
||||
label="Genehmigen"
|
||||
variant="soft"
|
||||
@click.stop="handleApprove(row)"
|
||||
/>
|
||||
<p class="text-sm text-gray-500 mt-1">Start: {{ useNuxtApp().$dayjs(row.started_at).format('DD.MM.YY HH:mm') }}</p>
|
||||
<p class="text-sm text-gray-500">Ende: <span v-if="row.stopped_at">{{ useNuxtApp().$dayjs(row.stopped_at).format('DD.MM.YY HH:mm') }}</span></p>
|
||||
<div class="flex gap-2 mt-3 justify-end">
|
||||
<UButton v-if="(row.state === 'draft' || row.state === 'factual') && row.stopped_at" color="cyan" size="sm" icon="i-heroicons-paper-airplane" label="Einreichen" variant="soft" @click.stop="handleSubmit(row)" :loading="loading" />
|
||||
<UButton v-if="row.state === 'submitted' && canViewAll" color="green" size="sm" icon="i-heroicons-check" label="Genehmigen" variant="soft" @click.stop="handleApprove(row)" :loading="loading" />
|
||||
</div>
|
||||
</UCard>
|
||||
</UDashboardPanelContent>
|
||||
|
||||
<FloatingActionButton
|
||||
icon="i-heroicons-plus"
|
||||
class="!fixed bottom-6 right-6 z-50"
|
||||
color="primary"
|
||||
@click="() => { editEntry = null; showModal = true }"
|
||||
/>
|
||||
|
||||
<FloatingActionButton icon="i-heroicons-plus" class="!fixed bottom-6 right-6 z-50" color="primary" @click="() => { entryToEdit = null; showEditModal = true }" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<StaffTimeEntryModal
|
||||
v-model="showModal"
|
||||
:entry="editEntry"
|
||||
v-model="showEditModal"
|
||||
:entry="entryToEdit"
|
||||
@saved="load"
|
||||
:users="users"
|
||||
:can-select-user="canViewAll"
|
||||
:default-user-id="selectedUser"
|
||||
/>
|
||||
|
||||
<UModal v-model="showRejectModal">
|
||||
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
|
||||
Zeiteintrag ablehnen
|
||||
</h3>
|
||||
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showRejectModal = false" />
|
||||
</div>
|
||||
</template>
|
||||
<div class="space-y-4">
|
||||
<p class="text-sm text-gray-500">
|
||||
Der Eintrag wird als "Rejected" markiert und nicht mehr zur Arbeitszeit gezählt.
|
||||
</p>
|
||||
<UFormGroup label="Grund (optional)" name="reason">
|
||||
<UTextarea v-model="rejectReason" placeholder="Falsche Buchung, Doppelt, etc." autofocus />
|
||||
</UFormGroup>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<UButton color="gray" variant="soft" @click="showRejectModal = false">Abbrechen</UButton>
|
||||
<UButton color="red" :loading="loading" @click="confirmReject">Bestätigen</UButton>
|
||||
</div>
|
||||
</template>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</template>
|
||||
Reference in New Issue
Block a user