122 lines
3.4 KiB
Vue
122 lines
3.4 KiB
Vue
<template>
|
|
<UDashboardPanel id="home">
|
|
<template #header>
|
|
<UDashboardNavbar title="Home" :ui="{ right: 'gap-3' }">
|
|
<template #leading>
|
|
<UDashboardSidebarCollapse />
|
|
</template>
|
|
|
|
<template #right>
|
|
<UDropdownMenu :items="items">
|
|
<UButton icon="i-lucide-plus" size="md" class="rounded-full" />
|
|
</UDropdownMenu>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<UDashboardToolbar>
|
|
<template #left> toolbar left </template>
|
|
</UDashboardToolbar>
|
|
</template>
|
|
|
|
<template #body>
|
|
<div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-4xl mx-auto">
|
|
<div
|
|
v-for="(applicationFormElem, index) in applicationForms"
|
|
:key="applicationFormElem.id"
|
|
class="flex justify-between items-center p-4 bg-white rounded-lg shadow-md"
|
|
@click="navigateTo(`application-forms/${applicationFormElem.id}`)"
|
|
>
|
|
<div>
|
|
<p class="font-medium text-(--ui-text-highlighted) text-base">
|
|
#{{ index }} {{ applicationFormElem.name }}
|
|
</p>
|
|
<p class="text-(--ui-text-muted) text-sm">
|
|
Zuletzt bearbeitet: {{ formatDate(applicationFormElem.modifiedAt) }}
|
|
</p>
|
|
<p class="text-(--ui-text-muted) text-sm">Erstellt: {{ formatDate(applicationFormElem.createdAt) }}</p>
|
|
</div>
|
|
<div>
|
|
<UPageLinks :links="getLinksForApplicationForm(applicationFormElem)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<DeleteModal
|
|
v-if="isDeleteModalOpen && applicationFormNameToDelete"
|
|
v-model:is-open="isDeleteModalOpen"
|
|
:application-form-to-delete="applicationFormNameToDelete"
|
|
@delete="deleteApplicationForm($event)"
|
|
/>
|
|
</UDashboardPanel>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { ApplicationFormDto, PagedApplicationFormDto } from '~/.api-client'
|
|
|
|
definePageMeta({
|
|
middleware: ['auth']
|
|
})
|
|
|
|
const { getAllApplicationForms, deleteApplicationFormById } = useApplicationForm()
|
|
const route = useRoute()
|
|
|
|
const { data } = await useAsyncData<PagedApplicationFormDto>(async () => {
|
|
return await getAllApplicationForms()
|
|
})
|
|
|
|
const isDeleteModalOpen = computed<boolean>({
|
|
get: () => 'delete' in route.query,
|
|
set: (isOpen: boolean) => {
|
|
if (isOpen) return
|
|
navigateTo({ path: route.path, query: {} })
|
|
}
|
|
})
|
|
|
|
const applicationFormNameToDelete = computed(() => {
|
|
return data?.value?.content.find((appForm) => appForm.id === route.query.id)
|
|
})
|
|
|
|
const items = [
|
|
[
|
|
{
|
|
label: 'Neuer Mitbestimmungsantrag',
|
|
icon: 'i-lucide-send',
|
|
to: '/create'
|
|
}
|
|
]
|
|
]
|
|
|
|
const applicationForms = computed({
|
|
get: () => data?.value?.content ?? [],
|
|
set: (val) => {
|
|
if (val && data.value) {
|
|
data.value.content = val
|
|
}
|
|
}
|
|
})
|
|
|
|
function getLinksForApplicationForm(applicationForm: ApplicationFormDto) {
|
|
return [
|
|
{
|
|
label: 'Bearbeiten',
|
|
icon: 'i-lucide-file-pen',
|
|
to: `/application-forms/${applicationForm.id}`
|
|
},
|
|
{
|
|
label: 'Löschen',
|
|
icon: 'i-lucide-trash',
|
|
to: `?delete&id=${applicationForm.id}`
|
|
}
|
|
]
|
|
}
|
|
|
|
async function deleteApplicationForm(applicationFormId: string) {
|
|
await deleteApplicationFormById(applicationFormId)
|
|
data.value?.content.splice(
|
|
data.value?.content.findIndex((appForm) => appForm.id === applicationFormId),
|
|
1
|
|
)
|
|
isDeleteModalOpen.value = false
|
|
}
|
|
</script>
|