feat(#9): Nuxt 4 migration

legalconsenthub/app/components/DeleteModal.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import type { ApplicationFormDto } from '~/.api-client'
+import type { ApplicationFormDto } from '~~/.api-client'
 
 defineEmits<{
   (e: 'delete', id: string): void

legalconsenthub/app/components/FormEngine.vue

@@ -28,10 +28,11 @@
 </template>
 
 <script setup lang="ts">
-import type { FormElementDto, FormOptionDto } from '~/.api-client'
+import type { FormElementDto, FormOptionDto } from '~~/.api-client'
 import { resolveComponent } from 'vue'
 import TheComment from '~/components/TheComment.vue'
 import type { DropdownMenuItem } from '@nuxt/ui'
+import { useCommentStore } from '~~/stores/useCommentStore'
 
 const props = defineProps<{
   modelValue: FormElementDto[]

legalconsenthub/app/components/NotificationsSlideover.vue

@@ -62,7 +62,7 @@
 
 <script setup lang="ts">
 import { formatTimeAgo } from '@vueuse/core'
-import type { NotificationDto } from '~/.api-client'
+import type { NotificationDto } from '~~/.api-client'
 
 const emit = defineEmits<{
   'update:modelValue': [value: boolean]

legalconsenthub/app/components/TheComment.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import type { CommentDto } from '~/.api-client'
+import type { CommentDto } from '~~/.api-client'
 import { useCommentTextarea } from '~/composables/comment/useCommentTextarea'
 
 const props = defineProps<{
@@ -61,4 +61,3 @@ function createChatMessageActions(comment: CommentDto) {
   return chatMessageActions
 }
 </script>
-

legalconsenthub/app/components/UserMenu.vue

@@ -31,6 +31,7 @@
 
 <script setup lang="ts">
 import type { DropdownMenuItem } from '@nuxt/ui'
+import { useUserStore } from '~~/stores/useUserStore'
 
 defineProps<{
   collapsed?: boolean
@@ -66,7 +67,6 @@ const { user: keyCloakUser } = storeToRefs(userStore)
 const user = ref({
   name: keyCloakUser.value.name,
   avatar: {
-    src: '/_nuxt/public/favicon.ico',
     alt: keyCloakUser.value.name
   }
 })

legalconsenthub/app/components/formelements/FormElementLayer.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-// import { FormElementType, type FormOptionDto, type FormElementDto } from '~/.api-client'
+// import { FormElementType, type FormOptionDto, type FormElementDto } from '~~/.api-client'
 // import { resolveComponent } from 'vue'
 
 // const props = defineProps<{

legalconsenthub/app/components/formelements/TheCheckbox.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import type { FormOptionDto } from '~/.api-client'
+import type { FormOptionDto } from '~~/.api-client'
 
 const props = defineProps<{
   formOptions: FormOptionDto[]

legalconsenthub/app/components/formelements/TheInput.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import type { FormOptionDto } from '~/.api-client'
+import type { FormOptionDto } from '~~/.api-client'
 
 const props = defineProps<{
   label?: string

legalconsenthub/app/components/formelements/TheRadioGroup.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import type { FormOptionDto } from '~/.api-client'
+import type { FormOptionDto } from '~~/.api-client'
 
 const props = defineProps<{
   label?: string

legalconsenthub/app/components/formelements/TheSelect.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import type { FormOptionDto } from '~/.api-client'
+import type { FormOptionDto } from '~~/.api-client'
 
 const props = defineProps<{
   label?: string

legalconsenthub/app/components/formelements/TheSwitch.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import type { FormOptionDto } from '~/.api-client'
+import type { FormOptionDto } from '~~/.api-client'
 
 const props = defineProps<{
   formOptions: FormOptionDto[]

legalconsenthub/app/components/formelements/TheTitleBodyInput.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import type { FormOptionDto } from '~/.api-client'
+import type { FormOptionDto } from '~~/.api-client'
 
 const props = defineProps<{
   formOptions: FormOptionDto[]

legalconsenthub/app/composables/applicationForm/useApplicationForm.ts

@@ -3,7 +3,7 @@ import type {
   CreateFormElementDto,
   ApplicationFormDto,
   PagedApplicationFormDto
-} from '~/.api-client'
+} from '~~/.api-client'
 import { useApplicationFormApi } from './useApplicationFormApi'
 
 export function useApplicationForm() {

legalconsenthub/app/composables/applicationForm/useApplicationFormApi.ts

@@ -5,7 +5,7 @@ import {
   type CreateFormElementDto,
   type ApplicationFormDto,
   type PagedApplicationFormDto
-} from '~/.api-client'
+} from '~~/.api-client'
 import { cleanDoubleSlashes, withoutTrailingSlash } from 'ufo'
 import { wrappedFetchWrap } from '~/utils/wrappedFetch'
 

legalconsenthub/app/composables/applicationFormTemplate/useApplicationFormTemplate.ts

@@ -3,7 +3,7 @@ import {
   type ApplicationFormDto,
   type PagedApplicationFormDto,
   ResponseError
-} from '~/.api-client'
+} from '~~/.api-client'
 import { useApplicationFormTemplateApi } from './useApplicationFormTemplateApi'
 
 const currentApplicationForm: Ref<ApplicationFormDto | undefined> = ref()

legalconsenthub/app/composables/applicationFormTemplate/useApplicationFormTemplateApi.ts

@@ -1,5 +1,5 @@
-import { ApplicationFormTemplateApi, Configuration } from '../../.api-client'
+import { ApplicationFormTemplateApi, Configuration } from '../../../.api-client'
-import type { CreateApplicationFormDto, ApplicationFormDto, PagedApplicationFormDto } from '~/.api-client'
+import type { CreateApplicationFormDto, ApplicationFormDto, PagedApplicationFormDto } from '~~/.api-client'
 import { cleanDoubleSlashes, withoutTrailingSlash } from 'ufo'
 import { wrappedFetchWrap } from '~/utils/wrappedFetch'
 

legalconsenthub/app/composables/comment/useCommentApi.ts

@@ -1,4 +1,4 @@
-import { CommentApi, Configuration, type CommentDto, type CreateCommentDto, type PagedCommentDto } from '~/.api-client'
+import { CommentApi, Configuration, type CommentDto, type CreateCommentDto, type PagedCommentDto } from '~~/.api-client'
 import { cleanDoubleSlashes, withoutTrailingSlash } from 'ufo'
 import { wrappedFetchWrap } from '~/utils/wrappedFetch'
 

legalconsenthub/app/composables/comment/useCommentTextarea.ts

@@ -1,4 +1,6 @@
-import type { CreateCommentDto, CommentDto } from '~/.api-client'
+import type { CreateCommentDto, CommentDto } from '~~/.api-client'
+import { useCommentStore } from '~~/stores/useCommentStore'
+import { useUserStore } from '~~/stores/useUserStore'
 
 export function useCommentTextarea(applicationFormId: string) {
   const commentStore = useCommentStore()

legalconsenthub/app/composables/complianceMap.ts

@@ -1,4 +1,4 @@
-import { ComplianceStatus, EmployeeDataCategory, FormElementType, ProcessingPurpose } from '~/.api-client'
+import { ComplianceStatus, EmployeeDataCategory, FormElementType, ProcessingPurpose } from '~~/.api-client'
 
 export const complianceMap = new Map<ProcessingPurpose, Map<EmployeeDataCategory, ComplianceStatus>>([
   [

legalconsenthub/app/composables/notification/useNotification.ts

@@ -1,4 +1,5 @@
-import type { NotificationDto } from '~/.api-client'
+import type { NotificationDto } from '~~/.api-client'
+import { useUserStore } from '~~/stores/useUserStore'
 
 export const useNotification = () => {
   const {

legalconsenthub/app/composables/notification/useNotificationApi.ts

@@ -4,7 +4,7 @@ import {
   type NotificationDto,
   type PagedNotificationDto,
   type CreateNotificationDto
-} from '~/.api-client'
+} from '~~/.api-client'
 import { cleanDoubleSlashes, withoutTrailingSlash } from 'ufo'
 import { wrappedFetchWrap } from '~/utils/wrappedFetch'
 

legalconsenthub/app/composables/useApplicationFormValidator.ts

@@ -1,6 +1,6 @@
-import { ComplianceStatus, type FormElementDto } from '~/.api-client'
+import { ComplianceStatus, type FormElementDto } from '~~/.api-client'
 import { complianceCheckableElementTypes, complianceMap } from './complianceMap'
-import type { FormElementId } from '~/types/formElement'
+import type { FormElementId } from '~~/types/formElement'
 
 const formElementComplianceMap = ref(new Map<FormElementId, ComplianceStatus>())
 

legalconsenthub/app/composables/useFormElementManagement.ts

@@ -1,4 +1,4 @@
-import type { ApplicationFormDto, CreateFormElementDto, FormElementSectionDto } from '~/.api-client'
+import type { ApplicationFormDto, CreateFormElementDto, FormElementSectionDto } from '~~/.api-client'
 import type { MaybeRefOrGetter } from 'vue'
 
 export function useFormElementManagement(
@@ -45,4 +45,3 @@ export function useFormElementManagement(
     addInputFormToApplicationForm
   }
 }
-

legalconsenthub/app/composables/useFormStepper.ts

@@ -1,4 +1,4 @@
-import type { FormElementSectionDto } from '~/.api-client'
+import type { FormElementSectionDto } from '~~/.api-client'
 import type { StepperItem } from '@nuxt/ui'
 import type { MaybeRefOrGetter } from 'vue'
 
@@ -55,4 +55,3 @@ export function useFormStepper(
     navigateStepper
   }
 }
-

legalconsenthub/app/layouts/default.vue

@@ -11,7 +11,7 @@
     >
       <template #header>
         <NuxtLink to="/">
-          <img src="../public/favicon.ico" alt="Logo" />
+          <img src="@@/public/favicon.ico" alt="Logo" />
         </NuxtLink>
       </template>
 

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

@@ -76,7 +76,8 @@
 </template>
 
 <script setup lang="ts">
-import type { ApplicationFormDto } from '~/.api-client'
+import type { ApplicationFormDto } from '~~/.api-client'
+import { useUserStore } from '~~/stores/useUserStore'
 
 const { getApplicationFormById, updateApplicationForm, submitApplicationForm } = useApplicationForm()
 const route = useRoute()
@@ -124,10 +125,7 @@ const { stepper, activeStepperItemIndex, stepperItems, currentFormElementSection
   }
 )
 
-const { addInputFormToApplicationForm } = useFormElementManagement(
+const { addInputFormToApplicationForm } = useFormElementManagement(currentFormElementSection, applicationForm.value?.id)
-  currentFormElementSection,
-  applicationForm.value?.id
-)
 
 async function handleAddInputForm(position: number) {
   const updatedForm = await addInputFormToApplicationForm(position)

legalconsenthub/app/pages/create.vue

@@ -72,9 +72,10 @@
 </template>
 
 <script setup lang="ts">
-import { ComplianceStatus, type PagedApplicationFormDto } from '~/.api-client'
+import { ComplianceStatus, type PagedApplicationFormDto } from '~~/.api-client'
 import { useApplicationFormValidator } from '~/composables/useApplicationFormValidator'
-import type { FormElementId } from '~/types/formElement'
+import type { FormElementId } from '~~/types/formElement'
+import { useUserStore } from '~~/stores/useUserStore'
 
 const { getAllApplicationFormTemplates } = await useApplicationFormTemplate()
 const { createApplicationForm, submitApplicationForm } = useApplicationForm()
@@ -84,7 +85,7 @@ const userStore = useUserStore()
 const { selectedOrganization } = storeToRefs(userStore)
 const toast = useToast()
 
-const { data, error } = await useAsyncData<PagedApplicationFormDto>(async () => {
+const { data, error } = await useAsyncData<PagedApplicationFormDto>('create-application-form', async () => {
   return await getAllApplicationFormTemplates()
 })
 

legalconsenthub/app/pages/index.vue

@@ -77,8 +77,9 @@
 </template>
 
 <script setup lang="ts">
-import type { ApplicationFormDto, PagedApplicationFormDto } from '~/.api-client'
+import type { ApplicationFormDto, PagedApplicationFormDto } from '~~/.api-client'
-import type { Organization } from '~/types/keycloak'
+import type { Organization } from '~~/types/keycloak'
+import { useUserStore } from '~~/stores/useUserStore'
 
 const { getAllApplicationForms, deleteApplicationFormById } = useApplicationForm()
 const route = useRoute()

legalconsenthub/package.json

@@ -18,13 +18,13 @@
   "dependencies": {
     "@nuxt/ui-pro": "3.1.1",
     "@nuxtjs/i18n": "10.0.3",
-    "@pinia/nuxt": "0.10.1",
+    "@pinia/nuxt": "0.11.2",
     "@vueuse/core": "^13.6.0",
     "h3": "1.15.4",
     "jwt-decode": "4.0.0",
-    "nuxt": "3.16.1",
+    "nuxt": "4.2.0",
     "nuxt-auth-utils": "0.5.25",
-    "pinia": "3.0.1",
+    "pinia": "3.0.3",
     "resend": "^4.3.0",
     "vue": "latest",
     "vue-router": "latest"

legalconsenthub/server/api/jwt/refresh.post.ts

@@ -1,4 +1,4 @@
-import type { OAuthTokenResponse } from '~/types/oauth'
+import type { OAuthTokenResponse } from '~~/types/oauth'
 
 export default eventHandler(async (event) => {
   const config = useRuntimeConfig()

legalconsenthub/server/routes/auth/keycloak.get.ts

@@ -1,5 +1,5 @@
 import { jwtDecode } from 'jwt-decode'
-import type { KeycloakTokenPayload, Organization } from '~/types/keycloak'
+import type { KeycloakTokenPayload, Organization } from '~~/types/keycloak'
 
 export default defineOAuthKeycloakEventHandler({
   async onSuccess(event, { user, tokens }) {

legalconsenthub/stores/useCommentStore.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { type CreateCommentDto, type CommentDto, ResponseError } from '~/.api-client'
+import { type CreateCommentDto, type CommentDto, ResponseError } from '~~/.api-client'
 import { useCommentApi } from '~/composables/comment/useCommentApi'
 
 export const useCommentStore = defineStore('Comment', () => {

legalconsenthub/stores/useUserStore.ts

@@ -1,4 +1,4 @@
-import type { Organization } from '~/types/keycloak'
+import type { Organization } from '~~/types/keycloak'
 
 export const useUserStore = defineStore('Organization', () => {
   const { user } = useUserSession()