Fixed form creation

client/pages/forms/create/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="flex flex-wrap flex-col">
+    <transition name="fade" mode="out-in">
+      <div key="2">
+        <create-form-base-modal :show="showInitialFormModal" @form-generated="formGenerated"
+                                @close="showInitialFormModal=false"
+        />
+
+        <form-editor v-if="form && !workspacesLoading" ref="editor"
+                     class="w-full flex flex-grow"
+                     :error="error"
+                     @on-save="formInitialHash=null"
+        />
+        <div v-else class="text-center mt-4 py-6">
+          <Loader class="h-6 w-6 text-nt-blue mx-auto"/>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+
+<script setup>
+import {watch} from 'vue'
+import {initForm} from "~/composables/forms/initForm.js"
+import FormEditor from "~/components/open/forms/components/FormEditor.vue"
+import CreateFormBaseModal from '../../../components/pages/forms/create/CreateFormBaseModal.vue'
+
+// metaTitle: 'Create a new Form',
+
+// 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()
+// },
+
+const route = useRoute()
+const authStore = useAuthStore()
+const templatesStore = useTemplatesStore()
+const workingFormStore = useWorkingFormStore()
+const workspacesStore = useWorkspacesStore()
+const formStore = useFormsStore()
+
+const {
+  getCurrent: workspace,
+  getAll: workspaces,
+  workspacesLoading: workspacesLoading
+} = storeToRefs(workspacesStore)
+const {content: form} = storeToRefs(workingFormStore)
+
+// State
+const loading = ref(false)
+const error = ref('')
+const showInitialFormModal = ref(false)
+const formInitialHash = ref(null)
+
+watch(() => workspace, () => {
+  if (workspace) {
+    form.workspace_id = workspace.value.id
+  }
+})
+
+onMounted(() => {
+  if (process.client) {
+    // window.onbeforeunload = () => {
+    if (isDirty()) {
+      return false
+    }
+  }
+
+  if (!formStore.allLoaded) {
+    formStore.load(workspace.value.id)
+  }
+
+  form.value = initForm({workspace_id: workspace.value?.id})
+  formInitialHash.value = hashString(JSON.stringify(form.value.data()))
+  // if (this.$route.query.template !== undefined && this.$route.query.template) {
+  //   const template = this.templatesStore.getByKey(this.$route.query.template)
+  //   if (template && template.structure) {
+  //     this.form = new Form({...this.form.data(), ...template.structure})
+  //   }
+  // } else {
+  //   // No template loaded, ask how to start
+  //   this.showInitialFormModal = true
+  // }
+  // this.closeAlert()
+  // this.workspacesStore.loadIfEmpty()
+})
+
+// Methods
+const formGenerated = (newForm) => {
+  form.value = useForm({...form.value.data(), ...newForm})
+}
+
+const isDirty = () => {
+  return !loading.value && formInitialHash.value && formInitialHash.value !== hashString(JSON.stringify(form.value.data()))
+}
+
+const 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>