feat(frontend,API): Add PUT operations, integrate API, add first from engine

legalconsenthub/pages/create.vue

@@ -0,0 +1,46 @@
+<template>
+  <UDashboardPanel id="home">
+    <template #header>
+      <UDashboardNavbar title="Home" :ui="{ right: 'gap-3' }">
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </template>
+
+        <template #right>
+          <UTooltip text="Notifications" :shortcuts="['N']">
+            <UButton color="neutral" variant="ghost" square>
+              <UChip color="error" inset>
+                <UIcon name="i-lucide-bell" class="size-5 shrink-0" />
+              </UChip>
+            </UButton>
+          </UTooltip>
+        </template>
+      </UDashboardNavbar>
+
+      <UDashboardToolbar>
+        <template #left />
+      </UDashboardToolbar>
+    </template>
+
+    <template #body>
+      <UForm class="space-y-4" :state="{}" @submit="onSubmit">
+        <FormEngine :form-elements="data?.content[0].formElements ?? []" />
+        <UButton type="submit">Submit</UButton>
+      </UForm>
+    </template>
+  </UDashboardPanel>
+</template>
+
+<script setup lang="ts">
+import type { PagedApplicationFormDto } from '~/.api-client'
+
+const { getAllApplicationForms } = useApplicationForm()
+
+const { data } = await useAsyncData<PagedApplicationFormDto>(async () => {
+  return await getAllApplicationForms()
+})
+
+function onSubmit() {
+  console.log('Submitted')
+}
+</script>

legalconsenthub/pages/index.vue

@@ -15,19 +15,12 @@
             </UButton>
           </UTooltip>
 
-          <UDropdownMenu :items="items">
-            <UButton icon="i-lucide-plus" size="md" class="rounded-full" />
-          </UDropdownMenu>
+          <UButton icon="i-lucide-plus" size="md" class="rounded-full" @click="navigateTo('/create')" />
         </template>
       </UDashboardNavbar>
 
       <UDashboardToolbar>
-        <template #left>
-          <!-- NOTE: The `-ms-1` class is used to align with the `DashboardSidebarCollapse` button here. -->
-          <HomeDateRangePicker v-model="range" class="-ms-1" />
-
-          <HomePeriodSelect v-model="period" :range="range" />
-        </template>
+        <template #left> toolbar left </template>
       </UDashboardToolbar>
     </template>
 
@@ -39,35 +32,10 @@
       </div>
       <Register />
       <Login />
-
-      <HomeStats :period="period" :range="range" />
-      <HomeChart :period="period" :range="range" />
-      <HomeSales :period="period" :range="range" />
     </template>
   </UDashboardPanel>
 </template>
 
 <script setup lang="ts">
 const session = authClient.useSession()
-
-const items = [
-  [
-    {
-      label: 'New mail',
-      icon: 'i-lucide-send',
-      to: '/inbox'
-    },
-    {
-      label: 'New customer',
-      icon: 'i-lucide-user-plus',
-      to: '/customers'
-    }
-  ]
-]
-
-const range = shallowRef({
-  start: new Date(),
-  end: new Date()
-})
-const period = ref<string>('daily')
 </script>