Fixed most of the form/show pages

client/components/global/Navbar.vue

@@ -162,7 +162,7 @@ export default {
     helpUrl: () => this.config.links.help_url,
     form () {
       if (this.$route.name && this.$route.name.startsWith('forms.show_public')) {
-        return this.formsStore.getBySlug(this.$route.params.slug)
+        return this.formsStore.getByKey(this.$route.params.slug)
       }
       return null
     },

client/components/global/WorkspaceDropdown.vue

@@ -80,13 +80,13 @@ export default {
     switchWorkspace (workspace) {
       this.workspacesStore.setCurrentId(workspace.id)
       this.formsStore.resetState()
-      this.formsStore.load(workspace.id)
+      this.formsStore.loadAll(workspace.id)
       const router = useRouter()
       const route = useRoute()
       if (route.name !== 'home') {
         router.push({ name: 'home' })
       }
-      this.formsStore.load(workspace.id)
+      this.formsStore.loadAll(workspace.id)
     },
     isUrl (str) {
       try {

client/components/open/forms/components/AdvancedFormUrlSettings.vue

@@ -9,13 +9,13 @@
         </h3>
       </div>
     </template>
-    <toggle-switch-input :value="value.hide_title" name="hide_title" class="mt-4"
+    <toggle-switch-input :model-value="modelValue.hide_title" name="hide_title" class="mt-4"
                          label="Hide Form Title"
                          :disabled="(form.hide_title===true)?true:null"
                          :help="hideTitleHelp"
                          @update:model-value="onChangeHideTitle"
     />
-    <toggle-switch-input :value="value.auto_submit" name="auto_submit" class="mt-4"
+    <toggle-switch-input :model-value="modelValue.auto_submit" name="auto_submit" class="mt-4"
                          label="Auto Submit Form"
                          help="Form will auto submit immediate after open URL"
                          @update:model-value="onChangeAutoSubmit"
@@ -33,7 +33,7 @@ export default {
       type: Object,
       required: true
     },
-    value: {
+    modelValue: {
       type: Object,
       required: true
     }
@@ -56,10 +56,10 @@ export default {
 
   methods: {
     onChangeHideTitle (val) {
-      this.value.hide_title = val
+      this.modelValue.hide_title = val
     },
     onChangeAutoSubmit (val) {
-      this.value.auto_submit = val
+      this.modelValue.auto_submit = val
     }
   }
 }

client/components/open/forms/components/FormEditor.vue

@@ -163,7 +163,7 @@ export default {
 
   computed: {
     createdForm () {
-      return this.formsStore.getBySlug(this.createdFormSlug)
+      return this.formsStore.getByKey(this.createdFormSlug)
     },
     steps () {
       return [
@@ -246,7 +246,7 @@ export default {
       this.form.put('/open/forms/{id}/'.replace('{id}', this.form.id)).then((data) => {
         this.formsStore.addOrUpdate(data.form)
         this.$emit('on-save')
-        this.$router.push({ name: 'forms.show', params: { slug: this.form.slug } })
+        this.$router.push({ name: 'forms-slug-show', params: { slug: this.form.slug } })
         this.amplitude.logEvent('form_saved', { form_id: this.form.id, form_slug: this.form.slug })
         this.displayFormModificationAlert(data)
       }).catch((error) => {

client/components/open/forms/components/FormStats.vue

@@ -105,8 +105,7 @@ export default {
     getChartData () {
       if (!this.form) { return null }
       this.isLoading = true
-      axios.get('/api/open/workspaces/' + this.form.workspace_id + '/form-stats/' + this.form.id).then((response) => {
-        const statsData = response.data
+      opnFetch('/open/workspaces/' + this.form.workspace_id + '/form-stats/' + this.form.id).then((statsData) => {
         if (statsData && statsData.views !== undefined) {
           this.chartData.labels = Object.keys(statsData.views)
           this.chartData.datasets[0].data = statsData.views

client/components/open/forms/components/FormSubmissions.vue

@@ -210,9 +210,7 @@ export default {
         return
       }
       this.isLoading = true
-      axios.get('/api/open/forms/' + this.form.id + '/submissions?page=' + this.currentPage).then((response) => {
-        const resData = response.data
-
+      opnFetch('/open/forms/' + this.form.id + '/submissions?page=' + this.currentPage).then((resData) => {
         this.tableData = this.tableData.concat(resData.data.map((record) => record.data))
         this.dataChanged()
 
@@ -235,6 +233,7 @@ export default {
       }
     },
     onChangeDisplayColumns () {
+      if (process.client)
       window.localStorage.setItem('display-columns-formid-' + this.form.id, JSON.stringify(this.displayColumns))
       this.form.properties = this.properties.concat(this.removed_properties).filter((field) => {
         return this.displayColumns[field.id] === true

client/components/open/forms/components/templates/FormTemplateModal.vue

@@ -117,7 +117,7 @@ export default {
       related_templates: null,
       questions: []
     })
-    this.templatesStore.loadIfEmpty()
+    loadAllTemplates(this.templatesStore)
   },
 
   computed: {

client/components/pages/forms/show/ExtraMenu.vue

@@ -169,7 +169,7 @@ export default {
   }),
 
   computed: {
-    formEndpoint: () => '/api/open/forms/{id}'
+    formEndpoint: () => '/open/forms/{id}'
   },
 
   methods: {
@@ -185,17 +185,17 @@ export default {
     duplicateForm () {
       if (this.loadingDuplicate) return
       this.loadingDuplicate = true
-      axios.post(this.formEndpoint.replace('{id}', this.form.id) + '/duplicate').then((response) => {
-        this.formsStore.addOrUpdate(response.data.new_form)
-        this.$router.push({ name: 'forms.show', params: { slug: response.data.new_form.slug } })
+      opnFetch(this.formEndpoint.replace('{id}', this.form.id) + '/duplicate',{method: 'POST'}).then((data) => {
+        this.formsStore.save(data.new_form)
+        this.$router.push({ name: 'forms-show', params: { slug: data.new_form.slug } })
         this.alertSuccess('Form was successfully duplicated.')
         this.loadingDuplicate = false
       })
     },
     deleteForm () {
       if (this.loadingDelete) return
       this.loadingDelete = true
-      axios.delete(this.formEndpoint.replace('{id}', this.form.id)).then(() => {
+      opnFetch(this.formEndpoint.replace('{id}', this.form.id),{method:'DELETE'}).then(() => {
         this.formsStore.remove(this.form)
         this.$router.push({ name: 'home' })
         this.alertSuccess('Form was deleted.')

client/components/pages/forms/show/RegenerateFormLink.vue

@@ -105,7 +105,7 @@ export default {
       this.loadingNewLink = true
       axios.put(this.formEndpoint.replace('{id}', this.form.id) + '/regenerate-link/' + option).then((response) => {
         this.formsStore.addOrUpdate(response.data.form)
-        this.$router.push({name: 'forms.show', params: {slug: response.data.form.slug}})
+        this.$router.push({name: 'forms-slug-show', params: {slug: response.data.form.slug}})
         this.alertSuccess(response.data.message)
         this.loadingNewLink = false
       }).finally(() => {

client/composables/stores/useContentStore.js

@@ -32,7 +32,7 @@ export const useContentStore = (mapKey = 'id') => {
     })
   }
   function remove(item) {
-    content.value.remove(item[mapKey])
+    content.value.delete( typeof item === 'object' ? item[mapKey] : item)
   }
 
   function startLoading() {

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

@@ -16,37 +16,15 @@
 <script>
 import { computed } from 'vue'
 import Form from 'vform'
-import { useFormsStore } from '../../../stores/forms.js'
-import { useWorkingFormStore } from '../../../stores/working_form.js'
-import { useWorkspacesStore } from '../../../stores/workspaces.js'
 import Breadcrumb from '~/components/global/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?', () => {
@@ -61,11 +39,17 @@ export default {
     const formsStore = useFormsStore()
     const workingFormStore = useWorkingFormStore()
     const workspacesStore = useWorkspacesStore()
+
+    if (!formsStore.allLoaded) {
+      formsStore.loadAll(useWorkspacesStore().currentId)
+    }
+    workingFormStore.set(null) // Reset old working form
+
     return {
       formsStore,
       workingFormStore,
       workspacesStore,
-      formsLoading : computed(() => formsStore.loading)
+      formsLoading: computed(() => formsStore.loading)
     }
   },
 
@@ -88,7 +72,7 @@ export default {
       }
     },
     form () {
-      return this.formsStore.getBySlug(this.$route.params.slug)
+      return this.formsStore.getByKey(this.$route.params.slug)
     },
     pageLoaded () {
       return !this.loading && this.updatedForm !== null
@@ -114,7 +98,7 @@ export default {
       }
     }
 
-    this.closeAlert()
+    // this.closeAlert()
     if (!this.form) {
       loadForms()
     } else {