Files
gremiumhub/legalconsenthub/pages/application-forms/[id].vue

83 lines
2.1 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 w-full lg:max-w-4xl mx-auto">
<UCard variant="subtle">
<FormEngine
v-if="applicationForm"
v-model="applicationForm.formElements"
:application-form-id="applicationForm.id"
:disabled="isReadOnly"
@click:comments="openComments"
/>
<UButton :disabled="isReadOnly" class="my-3 lg:my-4" @click="onSubmit">Submit</UButton>
</UCard>
</div>
</template>
</UDashboardPanel>
</template>
<script setup lang="ts">
import type { ApplicationFormDto } from '~/.api-client'
const { getApplicationFormById, updateApplicationForm } = useApplicationForm()
const route = useRoute()
const { user } = useAuth()
const items = [
[
{
label: 'Neuer Mitbestimmungsantrag',
icon: 'i-lucide-send',
to: '/create'
}
]
]
const { data } = await useAsyncData<ApplicationFormDto>(async () => {
return await getApplicationFormById(Array.isArray(route.params.id) ? route.params.id[0] : route.params.id)
})
const applicationForm = computed({
get: () => data?.value,
set: (val) => {
if (val && data.value) {
data.value = val
}
}
})
const isReadOnly = computed(() => {
return applicationForm.value?.createdBy.id !== user.value?.id
})
async function onSubmit() {
if (data?.value) {
await updateApplicationForm(data.value.id, data.value)
await navigateTo('/')
}
}
function openComments(formElementId: string) {
console.log('open comments for', formElementId)
}
</script>