feat(backend,frontend): Update application form, add label to switch

legalconsenthub/components/formelements/FormElementLayer.vue

@@ -0,0 +1,52 @@
+<template>
+  <!-- <component :is="getResolvedComponent(formElement)" :model-value="input" @update:model-value="update($event, index)" /> -->
+</template>
+
+<script setup lang="ts">
+// import { FormElementType, type FormOptionDto, type FormElementDto } from '~/.api-client'
+// import { resolveComponent } from 'vue'
+
+// const props = defineProps<{
+//   formElementType: FormElementType
+//   modelValue: FormOptionDto[]
+// }>()
+
+// const emit = defineEmits<{
+//   (e: 'update:modelValue', value: FormOptionDto[]): void
+// }>()
+
+// // TODO: Lazy loading?
+// function getResolvedComponent() {
+//   switch (props.formElementType) {
+//     case 'CHECKBOX':
+//     case 'DROPDOWN':
+//     case 'RADIOBUTTON':
+//     case 'SWITCH':
+//       return resolveComponent('TheSwitch')
+//     case 'TEXTFIELD':
+//       return resolveComponent('TheInput')
+//     default:
+//       return resolveComponent('Unimplemented')
+//   }
+// }
+
+// const input = computed<FormOptionDto | FormOptionDto[]>({
+//   get: () => {
+//     if (props.formElementType === FormElementType.Switch) {
+//       return props.modelValue[0]
+//     } else {
+//       return props.modelValue
+//     }
+//   },
+//   set: (val) => {
+//     // TODO
+//     if (Array.isArray(val)) {
+//       const updatedModelValue = [...props.modelValue]
+//       updatedModelValue[0] = { ...updatedModelValue[0], value: val.toString() }
+//       emit('update:modelValue', updatedModelValue)
+//     } else {
+//       emit('update:modelValue', val)
+//     }
+//   }
+// })
+</script>

legalconsenthub/components/formelements/TheSwitch.vue

@@ -6,7 +6,6 @@
 import type { FormOptionDto } from '~/.api-client'
 
 const props = defineProps<{
-  label?: string
   formOptions: FormOptionDto[]
 }>()
 
@@ -24,4 +23,6 @@ const modelValue = computed({
     }
   }
 })
+
+const label = computed(() => props.formOptions?.[0].label ?? '')
 </script>

legalconsenthub/composables/useApplicationForm.ts

@@ -53,9 +53,13 @@ export function useApplicationForm() {
   }
 
   async function updateApplicationForm(
-    id: string,
-    applicationFormDto: ApplicationFormDto
+    id?: string,
+    applicationFormDto?: ApplicationFormDto
   ): Promise<ApplicationFormDto> {
+    if (!id || !applicationFormDto) {
+      return Promise.reject(new Error('ID or application form DTO missing'))
+    }
+
     try {
       currentApplicationForm.value = await applicationFormApi.updateApplicationForm(id, applicationFormDto)
       return currentApplicationForm.value

legalconsenthub/pages/create.vue

@@ -37,7 +37,7 @@ import { ComplianceStatus, type PagedApplicationFormDto } from '~/.api-client'
 import { useApplicationFormValidator } from '~/composables/useApplicationFormValidator'
 import type { FormElementId } from '~/types/FormElement'
 
-const { getAllApplicationForms } = useApplicationForm()
+const { getAllApplicationForms, updateApplicationForm } = useApplicationForm()
 const { validateFormElements, getHighestComplianceStatus } = useApplicationFormValidator()
 
 const { data } = await useAsyncData<PagedApplicationFormDto>(async () => {
@@ -64,7 +64,7 @@ watch(
   { deep: true }
 )
 
-function onSubmit() {
-  console.log('Submitted')
+async function onSubmit() {
+  await updateApplicationForm(data?.value?.content[0].id, data?.value?.content[0])
 }
 </script>