app_vue2/use/form/useDirtyForm.ts

import {AnyJson, AnyStore} from "~/types/interfaces";

/**
 * @category Use/form
 * @class UseDirtyForm
 * Use Classe pour gérer l'apparation de message si le formulaire est dirty
 */
export class UseDirtyForm{
  private store:AnyStore
  private handler:any

  constructor(handler:any, store:AnyStore){
    this.store = store
    this.handler = handler
  }

  /**
   * Composition function
   */
  public invoke(): AnyJson{
    return {
      markFormAsDirty: () => this.markAsDirty(),
      markFormAsNotDirty: () => this.markAsNotDirty()
    }
  }

  /**
   * définit le formulaire comme Dirty (modifié)
   */
  private markAsDirty(){
    this.store.commit('form/setDirty', true)
    this.addEventListener()
  }

  /**
   * Définit le formulaire comme non dirty (non modifié)
   */
  private markAsNotDirty(){
    this.store.commit('form/setDirty', false)
    this.clearEventListener()
  }

  /**
   * Ajoute un Event avant le départ de la page
   */
  private addEventListener() {
    if (process.browser) {
      window.addEventListener('beforeunload', this.handler);
    }
  }

  /**
   * Supprime l'Event avant le départ de la page
   */
  private clearEventListener() {
    if (process.browser) {
      window.removeEventListener('beforeunload', this.handler);
    }
  }
}

function getEventHandler(){
  return function (e: any) {
    // Cancel the event
    e.preventDefault();
    // Chrome requires returnValue to be set
    e.returnValue = '';
  };
}
const handler = getEventHandler()
export const $useDirtyForm = (store:AnyStore) => new UseDirtyForm(handler, store).invoke()