app_vue2/components/Ui/Form.vue

<!--
Formulaire générique

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

<template>
  <main>
    <v-form
      ref="form"
      v-model="properties.valid"
      lazy-validation
      :readonly="readOnly"
    >
      <v-container fluid class="container btnActions">
        <v-row>
          <v-col cols="12" sm="12">
            <slot name="form.button" />
            <v-btn v-if="!readOnly" class="mr-4 ot_green ot_white--text" @click="submit">
              {{ $t('save') }}
            </v-btn>
          </v-col>
        </v-row>
      </v-container>

      <slot name="form.input" v-bind="{entry,updateRepository}" />

      <v-container fluid class="container btnActions">
        <v-row>
          <v-col cols="12" sm="12">
            <slot name="form.button" />
            <v-btn v-if="!readOnly" class="mr-4 ot_green ot_white--text" @click="submit">
              {{ $t('save') }}
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-form>

    <lazy-LayoutDialog
      :show="showDialog"
    >
      <template v-slot:dialogText>
        <v-card-title class="text-h5 grey lighten-2">
          {{ $t('attention') }}
        </v-card-title>
        <v-card-text>
          <br>
          <p>{{ $t('quit_without_saving_warning') }}</p>
        </v-card-text>
      </template>
      <template v-slot:dialogBtn>
        <v-btn class="mr-4 submitBtn ot_green ot_white--text" @click="closeDialog">
          {{ $t('back_to_form') }}
        </v-btn>
        <v-btn class="mr-4 submitBtn ot_green ot_white--text" @click="saveAndQuit">
          {{ $t('save_and_quit') }}
        </v-btn>
        <v-btn class="mr-4 submitBtn ot_danger ot_white--text" @click="goEvenUnsavedData">
          {{ $t('quit_form') }}
        </v-btn>
      </template>
    </lazy-LayoutDialog>
  </main>
</template>

<script lang="ts">
import { computed, defineComponent, onBeforeMount, onBeforeUnmount, onUnmounted, reactive, toRefs, useContext, watch, ref, Ref, ComputedRef } from '@nuxtjs/composition-api'
import { Query } from '@vuex-orm/core'
import { ToRefs, UnwrapRef } from '@vue/composition-api'
import { repositoryHelper } from '~/services/store/repository'
import { queryHelper } from '~/services/store/query'
import { QUERY_TYPE, TYPE_ALERT } from '~/types/enums'
import { alert, AnyJson } from '~/types/interfaces'
import { $useDirtyForm } from '~/use/form/useDirtyForm'

export default defineComponent({
  props: {
    model: {
      type: Function,
      required: true
    },
    id: {
      type: Number,
      required: true
    },
    query: {
      type: Object as () => Query,
      required: true
    }
  },
  setup (props) {
    const { $dataPersister, store, app: { router, i18n } } = useContext()
    const { markFormAsDirty, markFormAsNotDirty } = $useDirtyForm(store)

    const { id, query }:ToRefs = toRefs(props)
    const properties:UnwrapRef<AnyJson> = reactive({
      valid: false,
      saveOk: false,
      saveKo: false
    })

    const readOnly:Ref<boolean> = ref(false)

    const entry:ComputedRef<AnyJson> = computed(() => {
      return queryHelper.getFlattenEntry(query.value, id.value)
    })

    const updateRepository = (newValue: string, field: string) => {
      markFormAsDirty()
      repositoryHelper.updateStoreFromField(props.model, entry.value, newValue, field)
    }

    const submit = async () => {
      try {
        markFormAsNotDirty()
        await $dataPersister.invoke({
          type: QUERY_TYPE.MODEL,
          model: props.model,
          id: id.value
        })

        const alert:alert = {
          type: TYPE_ALERT.SUCCESS,
          message: i18n.t('saveSuccess') as string
        }
        store.commit('page/setAlert', alert)
      } catch (error) {
        const alert:alert = {
          type: TYPE_ALERT.ALERT,
          message: error.message
        }
        store.commit('page/setAlert', alert)
      }
    }

    const showDialog:ComputedRef<boolean> = computed(() => {
      return store.state.form.showConfirmToLeave
    })

    const closeDialog = () => {
      store.commit('form/setShowConfirmToLeave', false)
    }

    const saveAndQuit = async () => {
      await submit()
      goEvenUnsavedData()
    }

    const goEvenUnsavedData = () => {
      markFormAsNotDirty()
      store.commit('form/setShowConfirmToLeave', false)

      const entryCopy = query.value.first()
      if (entryCopy && entryCopy.$getAttributes().originalState) {
        repositoryHelper.persist(props.model, entryCopy.$getAttributes().originalState)
      }

      if (router) {
        router.push(store.state.form.goAfterLeave)
      }
    }

    return {
      submit,
      updateRepository,
      properties,
      readOnly,
      showDialog,
      entry,
      goEvenUnsavedData,
      closeDialog,
      saveAndQuit
    }
  }
})
</script>

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