fix recursive vue error

components/Ui/Form.vue

@@ -8,16 +8,13 @@ de quitter si des données ont été modifiées.
 -->
 
 <template>
-  <main>
+  <LayoutContainer>
     <v-form
-      ref="form"
-      :readonly="readonly"
-      validate-on="lazy input"
-      @submit.prevent=""
-      @update:model-value="onValidationChange"
+        v-model="isValid"
+        ref="form"
+        :readonly="readonly"
+        @submit.prevent=""
     >
-<!--      @update:entity="onFormChange"-->
-
       <!-- Top action bar -->
       <v-container :fluid="true" class="container btnActions">
         <v-row>
@@ -73,13 +70,13 @@ de quitter si des données ont été modifiées.
         <v-btn class="mr-4 submitBtn theme-primary" @click="saveAndQuit">
           {{ $t('save_and_quit') }}
         </v-btn>
-        <v-btn class="mr-4 submitBtn theme-danger" @click="quitForm">
+        <v-btn class="mr-4 submitBtn theme-danger" @click="cancel">
           {{ $t('quit_form') }}
         </v-btn>
       </template>
     </LazyLayoutDialog>
 
-  </main>
+  </LayoutContainer>
 </template>
 
 <script setup lang="ts">
@@ -218,7 +215,13 @@ const submit = async (next: string|null = null) => {
     // On retire l'état 'dirty'
     setIsDirty(false)
 
-    afterSubmissionAction(next, updatedEntity)
+    const actionArgs = next ? props.submitActions[next] : null
+
+    if (next === SUBMIT_TYPE.SAVE) {
+      onSaveAction(actionArgs, updatedEntity.id)
+    } else if (next === SUBMIT_TYPE.SAVE_AND_BACK) {
+      onSaveAndQuitAction(actionArgs)
+    }
 
   } catch (error: any) {
 
@@ -247,26 +250,7 @@ const submit = async (next: string|null = null) => {
  */
 const saveAndQuit = async () => {
   await submit()
-  quitForm()
-}
-
-/**
- * Retourne l'action à effectuer après la soumission du formulaire
- * @param action
- * @param updatedEntity
- */
-const afterSubmissionAction = (action: string | null, updatedEntity: AnyJson) => {
-  if (action === null) {
-    return
-  }
-
-  const actionArgs = props.submitActions[action]
-
-  if (action === SUBMIT_TYPE.SAVE) {
-    afterSaveAction(actionArgs, updatedEntity.id)
-  } else if (action === SUBMIT_TYPE.SAVE_AND_BACK) {
-    afterSaveAndQuitAction(actionArgs)
-  }
+  cancel()
 }
 
 /**
@@ -278,7 +262,7 @@ const afterSubmissionAction = (action: string | null, updatedEntity: AnyJson) =>
  * @param route
  * @param id
  */
-function afterSaveAction(route: Route, id: number){
+function onSaveAction(route: Route, id: number){
   if (useFormStore().formFunction === FORM_FUNCTION.CREATE) {
     route.path += id
     navigateTo(route)
@@ -292,14 +276,14 @@ function afterSaveAction(route: Route, id: number){
  *
  * @param route
  */
-function afterSaveAndQuitAction(route: Route){
+function onSaveAndQuitAction(route: Route){
   navigateTo(route)
 }
 
 /**
  * Quitte le formulaire sans enregistrer
  */
-const quitForm = () => {
+const cancel = () => {
   setIsDirty(false)
 
   useFormStore().setShowConfirmToLeave(false)
@@ -333,10 +317,6 @@ const onFormChange = async () => {
   }
 }
 
-const onValidationChange = (event: boolean | null) => {
-  isValid.value = event || false
-}
-
 /**
  * Utilise la méthode validate() de v-form pour valider le formulaire et mettre à jour les variables isValid et errors
  *
@@ -351,7 +331,7 @@ const validate = async function () {
 
 // #### Gestion de l'état dirty
 watch(props.entity, async (newEntity, oldEntity) => {
-  await onFormChange()
+  setIsDirty(true)
 })
 
 /**
@@ -373,8 +353,6 @@ const setIsDirty = (dirty: boolean) => {
   useFormStore().setDirty(dirty)
 }
 
-
-
 defineExpose({ validate })
 
 </script>

components/Ui/Form/Creation.vue

@@ -48,7 +48,7 @@ const props = defineProps({
     default: false
   },
   /**
-   * Faut-il rafraichir le profil à la soumission du formulaire?
+   * Faut-il rafraichir le profil à la soumission du formulaire ?
    */
   refreshProfile: {
     type: Boolean,

components/Ui/Form/Edition.vue

@@ -1,19 +1,21 @@
 <template>
-  <UiLoadingPanel v-if="pending" />
-  <UiForm
-      v-else
-      :model="model"
-      :entity="entity"
-      :submitActions="submitActions"
-  >
-    <template #form.button>
-      <v-btn v-if="goBackRoute" class="theme-neutral mr-3" @click="quit">
-        {{ $t('cancel') }}
-      </v-btn>
-    </template>
+  <LayoutContainer>
+    <UiLoadingPanel v-if="pending" />
+    <UiForm
+        v-else
+        :model="model"
+        :entity="entity"
+        :submitActions="submitActions"
+    >
+      <template #form.button>
+        <v-btn v-if="goBackRoute" class="theme-neutral mr-3" @click="quit">
+          {{ $t('cancel') }}
+        </v-btn>
+      </template>
 
-    <slot v-bind="{model, entity}"/>
-  </UiForm>
+      <slot v-bind="{model, entity}"/>
+    </UiForm>
+  </LayoutContainer>
 </template>
 
 <script setup lang="ts">
@@ -23,10 +25,7 @@ import {RouteLocationRaw} from "@intlify/vue-router-bridge";
 import ApiModel from "~/models/ApiModel";
 import {AnyJson} from "~/types/data";
 import {SUBMIT_TYPE} from "~/types/enum/enums";
-import {useEntityManager} from "~/composables/data/useEntityManager";
-import {ref} from "vue/dist/vue";
 import {useRoute} from "vue-router";
-import ResidenceArea from "~/models/Billing/ResidenceArea";
 import {useEntityFetch} from "~/composables/data/useEntityFetch";
 
 const props = defineProps({
@@ -76,17 +75,11 @@ const { fetch } = useEntityFetch()
 const route = useRoute()
 const router = useRouter()
 
-const entityId = computed(() => {
-  if (props.id !== null) {
-    return props.id
-  }
-
-  return parseInt(route.params.id as string)
-})
+const entityId = props.id !== null ? props.id : parseInt(route.params.id as string)
 
 const { data: entity, pending } = fetch(
     props.model,
-    entityId.value
+    entityId
 )
 
 const submitActions = computed(() => {

pages/parameters/cycles/[id].vue

@@ -1,24 +1,21 @@
 <template>
   <LayoutContainer>
-    <div>
-      <h2>{{ $t('cycle') }}</h2>
-      <UiFormEdition
-          :model="Cycle"
-          :go-back-route="goBackRoute"
-      >
-        <template v-slot="{ entity }">
-          <UiInputText
-              field="label"
-              v-model="entity.label"
-              :rules="rules()"
-          />
-        </template>
-      </UiFormEdition>
-    </div>
+    <h2>{{ $t('cycle') }}</h2>
+    <UiFormEdition
+        :model="Cycle"
+        :go-back-route="goBackRoute"
+    >
+      <template v-slot="{ entity }">
+        <UiInputText
+            field="label"
+            v-model="entity.label"
+            :rules="rules()"
+        />
+      </template>
+    </UiFormEdition>
   </LayoutContainer>
 </template>
 <script setup lang="ts">
-import {RouteLocationPathRaw} from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import Cycle from "~/models/Education/Cycle";