Merge branch 'migrate-to-nuxt' of https://github.com/JhumanJ/OpnForm into migrate-to-nuxt

client/components/open/forms/components/FormFieldsEditor.vue

@@ -246,7 +246,7 @@ export default {
     },
     init () {
       if (this.route.name === 'forms-create' || this.route.name === 'forms-create-guest') { // Set Default fields
-        if (!this.form.properties) {
+        if (!this.form.properties || this.form.properties.length===0) {
           this.form.properties = this.getDefaultFields()
         }
       } else {

client/pages/forms/[slug]/edit.vue

@@ -17,6 +17,7 @@
 import { computed } from 'vue'
 import Breadcrumb from '~/components/global/Breadcrumb.vue'
 import FormEditor from "~/components/open/forms/components/FormEditor.vue";
+import {hash} from "~/lib/utils.js";
 
 export default {
   name: 'EditForm',
@@ -86,7 +87,7 @@ export default {
     }
 
     this.updatedForm = useForm(this.form)
-    this.formInitialHash = this.hashString(JSON.stringify(this.updatedForm.data()))
+    this.formInitialHash = hash(JSON.stringify(this.updatedForm.data()))
 
     if (this.updatedForm && (!this.updatedForm.notification_settings || Array.isArray(this.updatedForm.notification_settings))) {
       this.updatedForm.notification_settings = {}
@@ -95,19 +96,7 @@ export default {
 
   methods: {
     isDirty () {
-      return this.formInitialHash && this.formInitialHash !== this.hashString(JSON.stringify(this.updatedForm.data()))
+      return this.formInitialHash && this.formInitialHash !== hash(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)
     }
   }
 }

client/pages/forms/create/guest.vue

@@ -28,18 +28,20 @@ import FormEditor from "~/components/open/forms/components/FormEditor.vue"
 import QuickRegister from '~/components/pages/auth/components/QuickRegister.vue'
 import CreateFormBaseModal from '../../../components/pages/forms/create/CreateFormBaseModal.vue'
 import {initForm} from "~/composables/forms/initForm.js"
-import {loadAllTemplates} from "~/stores/templates.js";
+import {fetchTemplate} from "~/stores/templates.js"
 import {fetchAllWorkspaces} from "~/stores/workspaces.js";
 
-definePageMeta({
-  middleware: "auth"
-})
 
 const templatesStore = useTemplatesStore()
 const workingFormStore = useWorkingFormStore()
 const workspacesStore = useWorkspacesStore()
 const route = useRoute()
-loadAllTemplates(templatesStore)
+
+// Fetch the template
+if (route.query.template !== undefined && route.query.template) {
+  const {data} = await fetchTemplate(route.query.template)
+  templatesStore.save(data.value)
+}
 
 // Store values
 const workspace = computed(() => workspacesStore.getCurrent)
@@ -69,15 +71,14 @@ onMounted(() => {
 
   form.value = initForm()
   if (route.query.template !== undefined && route.query.template) {
-    const template = this.templatesStore.getByKey(route.query.template)
+    const template = templatesStore.getByKey(route.query.template)
     if (template && template.structure) {
-      form.value = useForm({...this.form.data(), ...template.structure})
+      form.value = useForm({...form.value.data(), ...template.structure})
     }
   } else {
     // No template loaded, ask how to start
     showInitialFormModal.value = true
   }
-  // this.closeAlert()
   stateReady.value = true
 })
 
@@ -87,7 +88,7 @@ const afterLogin = () => {
   fetchAllWorkspaces()
   setTimeout(() => {
     if (editor) {
-      editor.saveFormCreate()
+      editor.value.saveFormCreate()
     }
   }, 500)
 }

client/pages/forms/create/index.vue

@@ -25,6 +25,8 @@ 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'
+import {fetchTemplate} from "~/stores/templates.js"
+import {hash} from "~/lib/utils.js"
 
 definePageMeta({
   middleware: "auth"
@@ -49,6 +51,12 @@ const workingFormStore = useWorkingFormStore()
 const workspacesStore = useWorkspacesStore()
 const formStore = useFormsStore()
 
+// Fetch the template
+if (route.query.template !== undefined && route.query.template) {
+  const {data} = await fetchTemplate(route.query.template)
+  templatesStore.save(data.value)
+}
+
 const {
   getCurrent: workspace,
   getAll: workspaces,
@@ -77,22 +85,21 @@ onMounted(() => {
   }
 
   if (!formStore.allLoaded) {
-    formStore.load(workspace.value.id)
+    formStore.loadAll(workspace.value.id)
   }
 
   form.value = initForm({workspace_id: workspace.value?.id})
-  formInitialHash.value = hashString(JSON.stringify(form.value.data()))
+  formInitialHash.value = hash(JSON.stringify(form.value.data()))
-  // if (this.$route.query.template !== undefined && this.$route.query.template) {
+  if (route.query.template !== undefined && route.query.template) {
-  //   const template = this.templatesStore.getByKey(this.$route.query.template)
+    const template = templatesStore.getByKey(route.query.template)
-  //   if (template && template.structure) {
+    if (template && template.structure) {
-  //     this.form = new Form({...this.form.data(), ...template.structure})
+      form.value = useForm({...form.value.data(), ...template.structure})
-  //   }
+    }
-  // } else {
+  } else {
-  //   // No template loaded, ask how to start
+    // No template loaded, ask how to start
-  //   this.showInitialFormModal = true
+    showInitialFormModal.value = true
-  // }
+  }
-  // this.closeAlert()
+  // workspacesStore.loadIfEmpty()
-  // this.workspacesStore.loadIfEmpty()
 })
 
 // Methods
@@ -101,21 +108,6 @@ const formGenerated = (newForm) => {
 }
 
 const isDirty = () => {
-  return !loading.value && formInitialHash.value && formInitialHash.value !== hashString(JSON.stringify(form.value.data()))
+  return !loading.value && formInitialHash.value && formInitialHash.value !== hash(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>

client/pages/templates/[slug].vue

@@ -18,7 +18,7 @@
           Copy Template URL
         </v-button>
         <v-button v-track.use_template_button_clicked size="small" class="mr-5"
-                  :to="{path: createFormWithTemplateUrl}"
+                  :to="createFormWithTemplateUrl"
         >
           Use this template
         </v-button>
@@ -71,7 +71,7 @@
           <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl -mt-[20px]">
             <div class="flex items-center justify-center">
               <v-button v-track.use_template_button_clicked class="mx-auto w-full max-w-[300px]"
-                        :to="{path: createFormWithTemplateUrl}">
+                        :to="createFormWithTemplateUrl">
                 Use this template
               </v-button>
             </div>
@@ -156,7 +156,7 @@
                   Copy the template and change it the way you like
                 </h5>
                 <p class="mt-2 text-sm font-normal text-gray-600">
-                  <NuxtLink :to="{path:createFormWithTemplateUrl}">
+                  <NuxtLink :to="createFormWithTemplateUrl">
                     Click here to copy this template
                   </NuxtLink>
                   and start customizing it. Change the questions, add new ones, choose colors and
@@ -243,12 +243,9 @@ const breadcrumbs = computed(() => {
   return [{route: {name: 'templates'}, label: 'Templates'}, {label: template.value.name}]
 })
 const relatedTemplates = computed(() => templatesStore.getByKey(template?.value?.related_templates))
-const canEditTemplate = computed(() => authStore.authenticated && template.value && (authStore.user.admin || authStore.user.template_editor || template.creator_id === authStore.user.id))
+const canEditTemplate = computed(() => authStore.check && template.value && (authStore.user.admin || authStore.user.template_editor || template.creator_id === authStore.user.id))
 const createFormWithTemplateUrl = computed(() => {
-  if (authStore.authenticated) {
+  return {name: (authStore.check) ? 'forms-create' : 'forms-create-guest', query: {template: template?.value?.slug}}
-    return '/forms/create?template=' + template?.value?.slug
-  }
-  return '/forms/create/guest?template=' + template?.value?.slug
 })
 
 // methods