app/components/Ui/Form.vue

<!--
Formulaire générique

Assure la validation des données, les actions de base (enregistrement, annulation, ...), et la confirmation avant
de quitter si des données ont été modifiées.

@see https://vuetifyjs.com/en/components/forms/#usage
-->

<template>
  <LayoutContainer>
    <v-form
      v-model="isValid"
      ref="form"
      :readonly="readonly"
      @submit.prevent=""
    >
      <!-- Top action bar -->
      <v-container
        v-if="actionPosition === 'both' || actionPosition === 'top'"
        :fluid="true"
        class="container btnActions"
      >
        <v-row>
          <v-col cols="12" sm="12">
            <slot name="form.button" />

            <UiButtonSubmit
              v-if="!readonly"
              @submit="submit"
              :actions="actions"
              :validation-pending="validationPending || !isValid"
            ></UiButtonSubmit>
          </v-col>
        </v-row>
      </v-container>

      <!-- Content -->
      <slot v-bind="{ model, entity }" />

      <!-- Bottom action bar -->
      <v-container
        v-if="actionPosition === 'both' || actionPosition === 'bottom'"
        :fluid="true"
        class="container btnActions mt-6"
      >
        <v-row>
          <v-col cols="12" sm="12">
            <slot name="form.button" />

            <UiButtonSubmit
              @submit="submit"
              :actions="actions"
              :validation-pending="validationPending || !isValid"
            ></UiButtonSubmit>
          </v-col>
        </v-row>
      </v-container>
    </v-form>

    <!-- Confirmation dialog -->
    <LazyLayoutDialog :show="isConfirmationDialogShowing">
      <template #dialogText>
        <v-card-title class="text-h5 theme-neutral">
          {{ $t('caution') }}
        </v-card-title>
        <v-card-text>
          <br />
          <p>{{ $t('quit_without_saving_warning') }}</p>
        </v-card-text>
      </template>
      <template #dialogBtn>
        <v-btn
          class="mr-4 submitBtn theme-primary"
          @click="closeConfirmationDialog"
        >
          {{ $t('back_to_form') }}
        </v-btn>
        <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="cancel">
          {{ $t('quit_form') }}
        </v-btn>
      </template>
    </LazyLayoutDialog>
  </LayoutContainer>
</template>

<script setup lang="ts">
import { computed, ref } from '@vue/reactivity'
import type { ComputedRef, Ref } from '@vue/reactivity'
import { FORM_FUNCTION, SUBMIT_TYPE, TYPE_ALERT } from '~/types/enum/enums'
import { useFormStore } from '~/stores/form'
import type { Route, RouteLocationRaw } from '@intlify/vue-router-bridge'
import { useEntityManager } from '~/composables/data/useEntityManager'
import ApiModel from '~/models/ApiModel'
import { usePageStore } from '~/stores/page'
import { watch } from '@vue/runtime-core'
import type { PropType } from '@vue/runtime-core'
import type { AnyJson } from '~/types/data'
import * as _ from 'lodash-es'
import { useRefreshProfile } from '~/composables/data/useRefreshProfile'

const props = defineProps({
  /**
   * Classe de l'ApiModel (ex: Organization, Notification, ...)
   */
  model: {
    type: Function as any as () => typeof ApiModel,
    required: true,
  },
  /**
   * Instance de l'objet
   */
  entity: {
    type: Object as () => ApiModel,
    required: true,
  },
  /**
   * TODO: compléter
   */
  onChanged: {
    type: Function,
    required: false,
  },
  goBackRoute: {
    type: Object as PropType<RouteLocationRaw>,
    required: false,
    default: null,
  },
  /**
   * Types de soumission disponibles (enregistrer / enregistrer et quitter)
   */
  submitActions: {
    type: Object,
    required: false,
    default: () => {
      let actions: AnyJson = {}
      actions[SUBMIT_TYPE.SAVE] = {}
      return actions
    },
  },
  /**
   * La validation est en cours
   */
  validationPending: {
    type: Boolean,
    required: false,
    default: false,
  },
  /**
   * Faut-il rafraichir le profil à la soumission du formulaire?
   */
  refreshProfile: {
    type: Boolean,
    required: false,
    default: false,
  },
  actionPosition: {
    type: String as PropType<'top' | 'bottom' | 'both'>,
    required: false,
    default: 'both',
  },
})

// ### Définitions

const i18n = useI18n()
const router = useRouter()
const { em } = useEntityManager()
const { refreshProfile } = useRefreshProfile()

// Le formulaire est-il valide
const isValid: Ref<boolean> = ref(true)

// Erreurs de validation
const errors: Ref<Array<string>> = ref([])

// Référence au component v-form
const form: Ref = ref(null)

// Le formulaire est-il en lecture seule
const readonly: ComputedRef<boolean> = computed(() => {
  return useFormStore().readonly
})

// La fenêtre de confirmation est-elle affichée
const isConfirmationDialogShowing: ComputedRef<boolean> = computed(() => {
  return useFormStore().showConfirmToLeave
})

/**
 * Ferme la fenêtre de confirmation
 */
const closeConfirmationDialog = () => {
  useFormStore().setShowConfirmToLeave(false)
}

// ### Actions du formulaire
/**
 * Soumet le formulaire
 *
 * @param next
 */
const submit = async (next: string | null = null) => {
  if (props.validationPending) {
    return
  }

  // Valide les données
  await validate()

  if (!isValid.value) {
    usePageStore().addAlert(TYPE_ALERT.ALERT, ['invalid_form'])
    return
  }

  try {
    usePageStore().loading = true

    // TODO: est-ce qu'il faut re-fetch l'entité après le persist?
    const updatedEntity = await em.persist(props.model, props.entity)

    if (props.refreshProfile) {
      await refreshProfile()
    }

    usePageStore().addAlert(TYPE_ALERT.SUCCESS, ['saveSuccess'])

    // On retire l'état 'dirty'
    setIsDirty(false)

    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) {
    if (
      error.response &&
      error.response.status === 422 &&
      error.response.data['violations']
    ) {
      // TODO: à revoir
      const violations: Array<string> = []
      let fields: AnyJson = {}

      for (const violation of error.response.data['violations']) {
        violations.push(i18n.t(violation['message']) as string)
        fields = Object.assign(fields, {
          [violation['propertyPath']]: violation['message'],
        })
      }

      useFormStore().addViolation(fields)

      usePageStore().addAlert(TYPE_ALERT.ALERT, ['invalid_form'])
    } else {
      throw error
    }
  } finally {
    usePageStore().loading = false
  }
}

/**
 * Enregistre et quitte
 */
const saveAndQuit = async () => {
  await submit()
  cancel()
}

/**
 * Après l'action Sauvegarder
 *
 * Si on était en mode édition, on reste sur cette page (on ne fait rien).
 * Si on était en mode création, on bascule sur le mode édition
 *
 * @param route
 * @param id
 */
function onSaveAction(route: Route, id: number) {
  if (useFormStore().formFunction === FORM_FUNCTION.CREATE) {
    route.path += id
    navigateTo(route)
  }
}

/**
 * Après l'action Sauvegarder et Quitter
 *
 * On redirige vers la route donnée
 *
 * @param route
 */
function onSaveAndQuitAction(route: Route) {
  navigateTo(route)
}

/**
 * Quitte le formulaire sans enregistrer
 */
const cancel = () => {
  setIsDirty(false)

  useFormStore().setShowConfirmToLeave(false)

  em.reset(props.model, props.entity.value)

  if (router) {
    // @ts-ignore
    router.push(useFormStore().goAfterLeave) // TODO: voir si on peut pas passer ça comme prop du component
  }
}

const actions = computed(() => {
  return _.keys(props.submitActions)
})

// #### Validation et store
/**
 *  Update store when form is changed (if valid)
 */
const onFormChange = async () => {
  if (isValid.value) {
    em.save(props.model, props.entity)
    setIsDirty(true)

    if (props.onChanged) {
      // Execute the custom onChange method, if defined
      // TODO: voir quelles variables passer à cette méthode custom ; d'ailleurs, vérifier aussi si cette méthode est utilisée
      props.onChanged()
    }
  }
}

/**
 * Utilise la méthode validate() de v-form pour valider le formulaire et mettre à jour les variables isValid et errors
 *
 * @see https://vuetifyjs.com/en/api/v-form/#functions-validate
 */
const validate = async function () {
  const validation = await form.value.validate()
  isValid.value = validation.valid
  errors.value = validation.errors
}

// #### Gestion de l'état dirty
watch(props.entity, async (newEntity, oldEntity) => {
  setIsDirty(true)
})

/**
 * Handle events if the form is dirty to prevent submission
 * @param e
 */
// TODO: voir si encore nécessaire avec le @submit.prevent
const preventSubmit = (e: any) => {
  // Cancel the event
  e.preventDefault()
  // Chrome requires returnValue to be set
  e.returnValue = ''
}

/**
 * Applique ou retire l'état dirty (modifié) du formulaire
 */
const setIsDirty = (dirty: boolean) => {
  useFormStore().setDirty(dirty)
}

defineExpose({ validate })
</script>

<style scoped>
.btnActions {
  text-align: right;
}
</style>