feat(frontend,backend): Create and load comments

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

@@ -19,13 +19,17 @@
     </template>
 
     <template #body>
-      <div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-4xl mx-auto">
-        <UPageCard variant="subtle">
-          <UForm class="space-y-4" :state="{}" @submit="onSubmit">
-            <FormEngine v-if="applicationForm" v-model="applicationForm.formElements" :disabled="isReadOnly" />
-            <UButton type="submit" :disabled="isReadOnly">Submit</UButton>
-          </UForm>
-        </UPageCard>
+      <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>
@@ -71,4 +75,8 @@ async function onSubmit() {
     await navigateTo('/')
   }
 }
+
+function openComments(formElementId: string) {
+  console.log('open comments for', formElementId)
+}
 </script>