opnform/resources/js/pages/forms/edit.vue

<template>
  <div class="w-full flex flex-col">
    <form-editor v-if="pageLoaded" ref="editor"
                 :is-edit="true"
                 @on-save="formInitialHash=null"
    />
    <div v-else-if="!loading && error" class="mt-4 rounded-lg max-w-xl mx-auto p-6 bg-red-100 text-red-500">
      {{ error }}
    </div>
    <div v-else class="text-center mt-4 py-6">
      <loader class="h-6 w-6 text-nt-blue mx-auto" />
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import Form from 'vform'
import { useFormsStore } from '../../stores/forms'
import { useWorkingFormStore } from '../../stores/working_form'
import { useWorkspacesStore } from '../../stores/workspaces'
import Breadcrumb from '../../components/common/Breadcrumb.vue'
import SeoMeta from '../../mixins/seo-meta.js'

const loadForms = function () {
  const formsStore = useFormsStore()
  const workspacesStore = useWorkspacesStore()
  formsStore.startLoading()
  workspacesStore.loadIfEmpty().then(() => {
    formsStore.load(workspacesStore.currentId)
  })
}

export default {
  name: 'EditForm',
  components: { Breadcrumb },
  mixins: [SeoMeta],
  middleware: 'auth',

  beforeRouteEnter (to, from, next) {
    const formsStore = useFormsStore()
    const workingFormStore = useWorkingFormStore()
    if (!formsStore.getBySlug(to.params.slug)) {
      loadForms()
    }
    workingFormStore.set(null)  // Reset old working form
    next()
  },

  beforeRouteLeave (to, from, next) {
    if (this.isDirty()) {
      return this.alertConfirm('Changes you made may not be saved. Are you sure want to leave?', () => {
        window.onbeforeunload = null
        next()
      }, () => {})
    }
    next()
  },

  setup () {
    const formsStore = useFormsStore()
    const workingFormStore = useWorkingFormStore()
    const workspacesStore = useWorkspacesStore()
    return {
      formsStore,
      workingFormStore,
      workspacesStore,
      formsLoading : computed(() => formsStore.loading)
    }
  },

  data () {
    return {
      loading: false,
      error: null,
      formInitialHash: null
    }
  },

  computed: {
    updatedForm: {
      get () {
        return this.workingFormStore.content
      },
      /* We add a setter */
      set (value) {
        this.workingFormStore.set(value)
      }
    },
    form () {
      return this.formsStore.getBySlug(this.$route.params.slug)
    },
    pageLoaded () {
      return !this.loading && this.updatedForm !== null
    },
    metaTitle () {
      return 'Edit ' + (this.form ? this.form.title : 'Your Form')
    }
  },

  watch: {
    form () {
      this.updatedForm = new Form(this.form)
    }
  },

  created () {},
  unmounted () {},

  mounted () {
    window.onbeforeunload = () => {
      if (this.isDirty()) {
        return false
      }
    }

    this.closeAlert()
    if (!this.form) {
      loadForms()
    } else {
      this.updatedForm = new Form(this.form)
      this.formInitialHash = this.hashString(JSON.stringify(this.updatedForm.data()))
    }

    if (this.updatedForm && (!this.updatedForm.notification_settings || Array.isArray(this.updatedForm.notification_settings))) {
      this.updatedForm.notification_settings = {}
    }
  },

  methods: {
    isDirty () {
      return !this.loading && this.formInitialHash && this.formInitialHash !== this.hashString(JSON.stringify(this.updatedForm.data()))
    },
    hashString (str, seed = 0) {
      let h1 = 0xdeadbeef ^ seed
      let h2 = 0x41c6ce57 ^ seed
      for (let i = 0, ch; i < str.length; i++) {
        ch = str.charCodeAt(i)
        h1 = Math.imul(h1 ^ ch, 2654435761)
        h2 = Math.imul(h2 ^ ch, 1597334677)
      }
      h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909)
      h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909)
      return 4294967296 * (2097151 & h2) + (h1 >>> 0)
    }
  }
}
</script>