fix perfs

components/Form/Freemium/Event.vue

@@ -60,13 +60,13 @@
         <h4 class="mb-8">{{ $t('place_event') }}</h4>
 
         <UiInputAutocompleteApiResources
-          :model-value="entity.place"
+          v-model="entity.place"
           field="place"
           :model="PlaceSearchItem"
           listValue="id"
           listLabel="name"
           v-if="!newPlace"
-          @update:model-value="getPlace($event, entity)"
+          @update:model-value="getPlace(entity)"
         />
 
         <div class="d-flex justify-center"
@@ -253,16 +253,13 @@ const onEditPlaceConfirm = function(){
   editPlace.value = true
 }
 
-const emit = defineEmits(['update:model-value'])
 /**
  * Lorsque l'on choisit un lieu dans la liste déroulante, on mets a jour les champs
  * input de l'adresse
- * @param placeId
  * @param entity
  */
-const getPlace = async (placeId: number, entity: Event)=>{
-  if(placeId){
-    entity.place = placeId
+const getPlace = async (entity: Event)=>{
+  if(entity.place){
     const placeInstance = await em.fetch(Place, entity.place as number)
     entity.placeName = placeInstance.name
     entity.streetAddress = placeInstance.streetAddress

components/Ui/Form.vue

@@ -396,7 +396,7 @@ const validate = async function () {
 }
 
 // #### Gestion de l'état dirty
-watch(
+const unwatch = watch(
   // /!\ Important de passer par un getter de l'objet (le `() => ({ ...props.modelValue })`),
   //     car on perd la réactivité de celui-ci quand on soumet le formulaire
   //     (et donc le watcher cesse de fonctionner)
@@ -428,6 +428,11 @@ const setIsDirty = (dirty: boolean) => {
   formStore.setDirty(dirty)
 }
 
+// Nettoyer les données lors du démontage du composant
+onBeforeUnmount(() => {
+  unwatch()
+})
+
 defineExpose({ validate })
 </script>
 

components/Ui/Input/Autocomplete.vue

@@ -260,7 +260,7 @@ const onUpdate = (event: string) => {
   emit('update:model-value', event)
 }
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   updateViolationState()
   search.value = null
 })

components/Ui/Input/Autocomplete/ApiResources.vue

@@ -30,7 +30,7 @@ Champs autocomplete dédié à la recherche des Accesses d'une structure
 </template>
 
 <script setup lang="ts">
-import type { PropType, ComputedRef, Ref } from 'vue'
+import type {PropType, ComputedRef, Ref, WatchStopHandle} from 'vue'
 import { computed } from 'vue'
 import * as _ from 'lodash-es'
 import { useEntityFetch } from '~/composables/data/useEntityFetch'
@@ -161,12 +161,11 @@ interface ListItem {
 const { fetchCollection } = useEntityFetch()
 const i18n = useI18n()
 
-
 const activeIds = computed(() => {
   if (Array.isArray(props.modelValue)) {
     return props.modelValue
   }
-  if (props.modelValue !== null && typeof props.modelValue === 'object') {
+  if (props.modelValue !== null) {
     return [props.modelValue]
   }
   return []
@@ -176,19 +175,27 @@ const activeIds = computed(() => {
 /**
  * Query transmise à l'API lors de l'initialisation afin de récupérer les items actifs
  */
-const queryActive = new Query(
-    new OrderBy(props.listLabel, ORDER_BY_DIRECTION.ASC),
-    new PageFilter(ref(1), ref(20)),
-    new InArrayFilter(props.listValue, activeIds),
-  )
+const queryActive = computed(() => {
+  return new Query(
+      new OrderBy(props.listLabel, ORDER_BY_DIRECTION.ASC),
+      new PageFilter(ref(1), ref(20)),
+      new InArrayFilter(props.listValue, activeIds),
+    )
+  }
+)
 
 /**
  * On commence par fetcher les models déjà actifs, pour affichage des labels correspondant
  */
 const {
   data: collectionActive,
-  status: statusActive
-} = fetchCollection(props.model, null, queryActive)
+  status: statusActive,
+  refresh: refreshActive
+} = fetchCollection(props.model, null, queryActive.value)
+
+const unwatch: WatchStopHandle = watch(activeIds, ()=>{
+  refreshActive()
+})
 
 /**
  * Saisie de l'utilisateur utilisée pour filtrer la recherche
@@ -260,9 +267,6 @@ const refreshDebounced: _.DebouncedFunc<() => void> = _.debounce(async () => {
   await refreshSearch()
 }, inputDelay)
 
-// ### Events
-const emit = defineEmits(['update:model-value'])
-
 /**
  * La recherche textuelle a changé.
  * @param event
@@ -279,6 +283,8 @@ const onUpdateSearch = (event: string) => {
   }
 }
 
+// ### Events
+const emit = defineEmits(['update:model-value'])
 /**
  * Quand un item est sélectionné
  * @param event
@@ -297,6 +303,7 @@ onBeforeUnmount(() => {
     clearNuxtData('/^' + props.model.entity + '_many_/')
     useRepo(props.model).flush()
   }
+  unwatch()
 })
 </script>
 

components/Ui/Input/Checkbox.vue

@@ -92,7 +92,7 @@ const onUpdate = (event: boolean) => {
   emit('update:model-value', event)
 }
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   updateViolationState()
 })
 </script>

components/Ui/Input/Combobox.vue

@@ -104,7 +104,7 @@ const onUpdate = (event: string) => {
   emit('update:model-value', event)
 }
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   updateViolationState()
 })
 </script>

components/Ui/Input/DatePicker.vue

@@ -129,7 +129,7 @@ const onUpdate = (event: string) => {
   emit('update:model-value', date.value ? formatISO(date.value) : undefined)
 }
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   updateViolationState()
 })
 </script>

components/Ui/Input/DateTimePicker.vue

@@ -147,7 +147,7 @@ const onUpdateTime = (event: string) => {
   emit('update:model-value', date.toISOString())
 }
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   updateViolationState()
 })
 </script>

components/Ui/Input/Email.vue

@@ -101,7 +101,7 @@ const onUpdate = (event: string) => {
   emit('update:model-value', event)
 }
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   updateViolationState()
 })
 </script>

components/Ui/Input/Image.vue

@@ -450,7 +450,7 @@ const save = async () => {
 /**
  * Lorsqu'on démonte le component on supprime le watcher et on revoke l'objet URL
  */
-onUnmounted(() => {
+onBeforeUnmount(() => {
   if (currentImage.value && currentImage.value.src) {
     URL.revokeObjectURL(currentImage.value.src)
   }

components/Ui/Input/Number.vue

@@ -163,7 +163,7 @@ const onChange = (event: Event | undefined) => {
 /**
  * Setup min and max values at the input level
  */
-onMounted(() => {
+onBeforeUnmount(() => {
   const inputElement = input.value!.$el.querySelector('input')
   if (props.min !== null) {
     inputElement.min = props.min

components/Ui/Input/Text.vue

@@ -149,7 +149,7 @@ const onChange = (event: Event | undefined) => {
   emit('change', event)
 }
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   updateViolationState()
 })
 </script>

components/Ui/Input/TextArea.vue

@@ -102,7 +102,7 @@ const onChange = (event: Event | undefined) => {
   emit('change', event)
 }
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   updateViolationState()
 })
 </script>