app/components/Ui/Form/Edition.vue

<template>
  <LayoutContainer>
    <UiLoadingPanel v-if="status == FETCHING_STATUS.PENDING" />
    <UiForm v-else v-model="entity" :submit-actions="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>
  </LayoutContainer>
</template>

<script setup lang="ts" generic="T extends typeof ApiModel">
import { useRoute } from 'vue-router'
import type { RouteLocationRaw } from 'vue-router'
import type ApiModel from '~/models/ApiModel'
import type { AnyJson } from '~/types/data'
import { SUBMIT_TYPE } from '~/types/enum/enums'
import { useEntityFetch } from '~/composables/data/useEntityFetch'
import { FETCHING_STATUS } from '~/types/enum/data'

const props = withDefaults(
  defineProps<{
    model: T
    /**
     * Id de l'objet
     * Si non renseigné, le composant essaiera de l'extraire de la route actuelle
     */
    id?: number | null
    /**
     * Route de retour
     */
    goBackRoute?: RouteLocationRaw | null
    /**
     * La validation est en cours
     */
    validationPending?: boolean
    /**
     * Faut-il rafraîchir le profil à la soumission du formulaire ?
     */
    refreshProfile?: boolean
  }>(),
  {
    id: null,
    goBackRoute: null,
    validationPending: false,
    refreshProfile: false,
  },
)

const { fetch } = useEntityFetch()
const route = useRoute()
const router = useRouter()

const entityId =
  props.id !== null ? props.id : parseInt(route.params.id as string)

const { data: entity, status } = fetch(props.model, entityId)

const submitActions = computed(() => {
  const actions: AnyJson = {}

  if (props.goBackRoute !== null) {
    actions[SUBMIT_TYPE.SAVE_AND_BACK] = props.goBackRoute
  } else {
    actions[SUBMIT_TYPE.SAVE] = null
  }
  return actions
})

const quit = () => {
  if (!props.goBackRoute) {
    throw new Error('no go back route defined')
  }

  router.push(props.goBackRoute)
}

// Nettoyer les données lors du démontage du composant
onBeforeUnmount(() => {
  // Nettoyer les références du store si nécessaire
  if (import.meta.client) {
    clearNuxtData('/^' + props.model.entity + '_' + props.id + '_/')
    useRepo(props.model).flush()
    // Forcer le garbage collection des objets Parameters
    entity.value = null
  }
})
</script>

<style scoped lang="scss"></style>