From bab85178798090553d524ec16d06ed0a3e02e2ac Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Wed, 20 Dec 2023 18:38:43 +0100
Subject: [PATCH] Fixed most of the form/show pages

---
 client/components/global/Navbar.vue           |   2 +-
 .../components/global/WorkspaceDropdown.vue   |   4 +-
 .../components/AdvancedFormUrlSettings.vue    |  10 +-
 .../open/forms/components/FormEditor.vue      |   4 +-
 .../open/forms/components/FormStats.vue       |   3 +-
 .../open/forms/components/FormSubmissions.vue |   5 +-
 .../templates/FormTemplateModal.vue           |   2 +-
 .../components/pages/forms/show/ExtraMenu.vue |  10 +-
 .../pages/forms/show/RegenerateFormLink.vue   |   2 +-
 client/composables/stores/useContentStore.js  |   2 +-
 client/pages/forms/[slug]/edit.vue            |  34 +--
 client/pages/forms/[slug]/show.vue            | 254 ++++++++++++++++
 client/pages/forms/[slug]/show/index.vue      | 275 +-----------------
 client/pages/forms/[slug]/show/share.vue      |  10 +-
 client/pages/forms/[slug]/show/stats.vue      |   5 +-
 client/pages/forms/show-public.vue            |   2 +-
 client/pages/home.vue                         |   9 +-
 client/stores/forms.js                        |  13 +-
 .../open/forms/components/FormSubmissions.vue |   6 +-
 19 files changed, 317 insertions(+), 335 deletions(-)
 create mode 100644 client/pages/forms/[slug]/show.vue

diff --git a/client/components/global/Navbar.vue b/client/components/global/Navbar.vue
index 6f62237..6853527 100644
--- a/client/components/global/Navbar.vue
+++ b/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
     },
diff --git a/client/components/global/WorkspaceDropdown.vue b/client/components/global/WorkspaceDropdown.vue
index e01f0ed..2cad14c 100644
--- a/client/components/global/WorkspaceDropdown.vue
+++ b/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 {
diff --git a/client/components/open/forms/components/AdvancedFormUrlSettings.vue b/client/components/open/forms/components/AdvancedFormUrlSettings.vue
index 16f0ed2..d7a73ec 100644
--- a/client/components/open/forms/components/AdvancedFormUrlSettings.vue
+++ b/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
     }
   }
 }
diff --git a/client/components/open/forms/components/FormEditor.vue b/client/components/open/forms/components/FormEditor.vue
index 91372cb..af52983 100644
--- a/client/components/open/forms/components/FormEditor.vue
+++ b/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) => {
diff --git a/client/components/open/forms/components/FormStats.vue b/client/components/open/forms/components/FormStats.vue
index 7c5032d..1c70a54 100644
--- a/client/components/open/forms/components/FormStats.vue
+++ b/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
diff --git a/client/components/open/forms/components/FormSubmissions.vue b/client/components/open/forms/components/FormSubmissions.vue
index c67c43a..eabdad8 100644
--- a/client/components/open/forms/components/FormSubmissions.vue
+++ b/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
diff --git a/client/components/open/forms/components/templates/FormTemplateModal.vue b/client/components/open/forms/components/templates/FormTemplateModal.vue
index cb723c7..c0f21a0 100644
--- a/client/components/open/forms/components/templates/FormTemplateModal.vue
+++ b/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: {
diff --git a/client/components/pages/forms/show/ExtraMenu.vue b/client/components/pages/forms/show/ExtraMenu.vue
index 4200001..1fcb65c 100644
--- a/client/components/pages/forms/show/ExtraMenu.vue
+++ b/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,9 +185,9 @@ 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
       })
@@ -195,7 +195,7 @@ export default {
     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.')
diff --git a/client/components/pages/forms/show/RegenerateFormLink.vue b/client/components/pages/forms/show/RegenerateFormLink.vue
index 3d35ef1..27e6a59 100644
--- a/client/components/pages/forms/show/RegenerateFormLink.vue
+++ b/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(() => {
diff --git a/client/composables/stores/useContentStore.js b/client/composables/stores/useContentStore.js
index 8a3caa8..59603a6 100644
--- a/client/composables/stores/useContentStore.js
+++ b/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() {
diff --git a/client/pages/forms/[slug]/edit.vue b/client/pages/forms/[slug]/edit.vue
index 71dc4a2..5e07894 100644
--- a/client/pages/forms/[slug]/edit.vue
+++ b/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 {
diff --git a/client/pages/forms/[slug]/show.vue b/client/pages/forms/[slug]/show.vue
new file mode 100644
index 0000000..4b2d334
--- /dev/null
+++ b/client/pages/forms/[slug]/show.vue
@@ -0,0 +1,254 @@
+<template>
+  <div class="bg-white">
+    <template v-if="form">
+      <div class="flex bg-gray-50">
+        <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
+          <div class="pt-4 pb-0">
+            <a href="#" class="flex text-blue mb-2 font-semibold text-sm" @click.prevent="goBack">
+              <svg class="w-3 h-3 text-blue mt-1 mr-1" viewBox="0 0 6 10" fill="none"
+                   xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M5 9L1 5L5 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                      stroke-linejoin="round"
+                />
+              </svg>
+              Go back
+            </a>
+
+            <div class="flex flex-wrap">
+              <h2 class="flex-grow text-gray-900 truncate">
+                {{ form.title }}
+              </h2>
+              <div class="flex">
+                <extra-menu :form="form" />
+
+                <v-button v-track.view_form_click="{form_id:form.id, form_slug:form.slug}" target="_blank"
+                          :href="form.share_url" color="white"
+                          class="mr-2 text-blue-600 hidden sm:block"
+                >
+                  <svg class="w-6 h-6 inline -mt-1" viewBox="0 0 24 24" fill="none"
+                       xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z"
+                          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                    />
+                    <path
+                      d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
+                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                    />
+                  </svg>
+                </v-button>
+                <v-button class="text-white" @click="openEdit">
+                  <svg class="inline mr-1 -mt-1" width="18" height="17" viewBox="0 0 18 17" fill="none"
+                       xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M8.99998 15.6662H16.5M1.5 15.6662H2.89545C3.3031 15.6662 3.50693 15.6662 3.69874 15.6202C3.8688 15.5793 4.03138 15.512 4.1805 15.4206C4.34869 15.3175 4.49282 15.1734 4.78107 14.8852L15.25 4.4162C15.9404 3.72585 15.9404 2.60656 15.25 1.9162C14.5597 1.22585 13.4404 1.22585 12.75 1.9162L2.28105 12.3852C1.9928 12.6734 1.84867 12.8175 1.7456 12.9857C1.65422 13.1348 1.58688 13.2974 1.54605 13.4675C1.5 13.6593 1.5 13.8631 1.5 14.2708V15.6662Z"
+                      stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"
+                    />
+                  </svg>
+                  Edit form
+                </v-button>
+              </div>
+            </div>
+
+            <p class="text-gray-500 text-sm">
+              <span class="pr-1">{{ form.views_count }} view{{ form.views_count > 0 ? 's' : '' }}</span>
+              <span class="pr-1">- {{ form.submissions_count }}
+                submission{{ form.submissions_count > 0 ? 's' : '' }}
+              </span>
+              <span>- Edited {{ form.last_edited_human }}</span>
+            </p>
+            <div v-if="['draft','closed'].includes(form.visibility) || (form.tags && form.tags.length > 0)"
+                 class="mt-2 flex items-center flex-wrap gap-3"
+            >
+              <span v-if="form.visibility=='draft'"
+                    class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
+              >
+                Draft - not publicly accessible
+              </span>
+              <span v-else-if="form.visibility=='closed'"
+                    class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
+              >
+                Closed - won't accept new submissions
+              </span>
+              <span v-for="(tag,i) in form.tags" :key="tag"
+                    class="inline-flex items-center rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
+              >
+                {{ tag }}
+              </span>
+            </div>
+
+            <p v-if="form.closes_at" class="text-yellow-500">
+              <span v-if="form.is_closed"> This form stopped accepting submissions on the  {{
+                displayClosesDate
+              }} </span>
+              <span v-else> This form will stop accepting submissions on the {{ displayClosesDate }} </span>
+            </p>
+            <p v-if="form.max_submissions_count > 0" class="text-yellow-500">
+              <span v-if="form.max_number_of_submissions_reached"> The form is now closed because it reached its limit of {{
+                form.max_submissions_count
+              }} submissions. </span>
+              <span v-else> This form will stop accepting submissions after {{ form.max_submissions_count }} submissions. </span>
+            </p>
+
+            <form-cleanings class="mt-4" :form="form" />
+
+            <div class="border-b border-gray-200 dark:border-gray-700">
+              <ul class="flex flex-wrap -mb-px text-sm font-medium text-center">
+                <li v-for="(tab, i) in tabsList" :key="i+1" class="mr-6">
+                  <nuxt-link :to="{ name: tab.route }"
+                               class="hover:no-underline inline-block py-4 rounded-t-lg border-b-2 text-gray-500 hover:text-gray-600"
+                               active-class="text-blue-600 hover:text-blue-900 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500"
+                  >
+                    {{ tab.name }}
+                  </nuxt-link>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex bg-white">
+        <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
+          <div class="py-4">
+            <NuxtPage :form="form"/>
+          </div>
+        </div>
+      </div>
+    </template>
+    <div v-else-if="loading" class="text-center w-full p-5">
+      <Loader class="h-6 w-6 mx-auto" />
+    </div>
+    <div v-else class="text-center w-full p-5">
+      Form not found.
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue'
+import Form from 'vform'
+import ProTag from '~/components/global/ProTag.vue'
+import VButton from '~/components/global/VButton.vue'
+import ExtraMenu from '../../../components/pages/forms/show/ExtraMenu.vue'
+import SeoMeta from '../../../mixins/seo-meta.js'
+import FormCleanings from '../../../components/pages/forms/show/FormCleanings.vue'
+export default {
+  name: 'ShowForm',
+  components: {
+    VButton,
+    ProTag,
+    ExtraMenu,
+    FormCleanings
+  },
+  mixins: [SeoMeta],
+
+  beforeUnmount() {
+    this.workingForm = null
+  },
+
+  middleware: 'auth',
+
+  setup () {
+    const authStore = useAuthStore()
+    const formsStore = useFormsStore()
+    const workingFormStore = useWorkingFormStore()
+    const workspacesStore = useWorkspacesStore()
+    const route = useRoute()
+
+    if (!formsStore.getByKey(route.params.slug)) {
+      formsStore.loadAll(useWorkspacesStore().currentId)
+    }
+    workingFormStore.set(null) // Reset old working form
+
+    return {
+      formsStore,
+      workingFormStore,
+      workspacesStore,
+      user: computed(() => authStore.user),
+      formsLoading: computed(() => formsStore.loading),
+      workspacesLoading: computed(() => workspacesStore.loading)
+    }
+  },
+
+  data () {
+    return {
+      metaTitle: 'Home',
+      tabsList: [
+        {
+          name: 'Submissions',
+          route: 'forms-slug-show-submissions'
+        },
+        {
+          name: 'Analytics',
+          route: 'forms-slug-show-stats'
+        },
+        {
+          name: 'Share',
+          route: 'forms-slug-show-share'
+        }
+      ]
+    }
+  },
+
+  computed: {
+    workingForm: {
+      get () {
+        return this.workingFormStore.content
+      },
+      /* We add a setter */
+      set (value) {
+        this.workingFormStore.set(value)
+      }
+    },
+    workspace () {
+      if (!this.form) return null
+      return this.workspacesStore.getByKey(this.form.workspace_id)
+    },
+    form () {
+      return this.formsStore.getByKey(this.$route.params.slug)
+    },
+    formEndpoint: () => '/api/open/forms/{id}',
+    loading () {
+      return this.formsLoading || this.workspacesLoading
+    },
+    displayClosesDate () {
+      if (this.form.closes_at) {
+        const dateObj = new Date(this.form.closes_at)
+        return dateObj.getFullYear() + '-' +
+          String(dateObj.getMonth() + 1).padStart(2, '0') + '-' +
+          String(dateObj.getDate()).padStart(2, '0') + ' ' +
+          String(dateObj.getHours()).padStart(2, '0') + ':' +
+          String(dateObj.getMinutes()).padStart(2, '0')
+      }
+      return ''
+    }
+  },
+
+  watch: {
+    form () {
+      this.workingForm = new Form(this.form)
+    }
+  },
+
+  mounted () {
+    if (this.form) {
+      this.workingForm = new Form(this.form)
+    }
+  },
+
+  methods: {
+    openCrisp () {
+      window.$crisp.push(['do', 'chat:show'])
+      window.$crisp.push(['do', 'chat:open'])
+    },
+    goBack () {
+      this.$router.push({ name: 'home' })
+    },
+    openEdit () {
+      this.$router.push({ name: 'forms-slug-edit', params: { slug: this.form.slug } })
+    }
+  }
+}
+</script>
diff --git a/client/pages/forms/[slug]/show/index.vue b/client/pages/forms/[slug]/show/index.vue
index 6bb3134..0092cc3 100644
--- a/client/pages/forms/[slug]/show/index.vue
+++ b/client/pages/forms/[slug]/show/index.vue
@@ -1,270 +1,9 @@
-<template>
-  <div class="bg-white">
-    <template v-if="form">
-      <div class="flex bg-gray-50">
-        <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
-          <div class="pt-4 pb-0">
-            <a href="#" class="flex text-blue mb-2 font-semibold text-sm" @click.prevent="goBack">
-              <svg class="w-3 h-3 text-blue mt-1 mr-1" viewBox="0 0 6 10" fill="none"
-                   xmlns="http://www.w3.org/2000/svg"
-              >
-                <path d="M5 9L1 5L5 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
-                      stroke-linejoin="round"
-                />
-              </svg>
-              Go back
-            </a>
-
-            <div class="flex flex-wrap">
-              <h2 class="flex-grow text-gray-900 truncate">
-                {{ form.title }}
-              </h2>
-              <div class="flex">
-                <extra-menu :form="form" />
-
-                <v-button v-track.view_form_click="{form_id:form.id, form_slug:form.slug}" target="_blank"
-                          :href="form.share_url" color="white"
-                          class="mr-2 text-blue-600 hidden sm:block"
-                >
-                  <svg class="w-6 h-6 inline -mt-1" viewBox="0 0 24 24" fill="none"
-                       xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z"
-                          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                    />
-                    <path
-                      d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
-                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                    />
-                  </svg>
-                </v-button>
-                <v-button class="text-white" @click="openEdit">
-                  <svg class="inline mr-1 -mt-1" width="18" height="17" viewBox="0 0 18 17" fill="none"
-                       xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M8.99998 15.6662H16.5M1.5 15.6662H2.89545C3.3031 15.6662 3.50693 15.6662 3.69874 15.6202C3.8688 15.5793 4.03138 15.512 4.1805 15.4206C4.34869 15.3175 4.49282 15.1734 4.78107 14.8852L15.25 4.4162C15.9404 3.72585 15.9404 2.60656 15.25 1.9162C14.5597 1.22585 13.4404 1.22585 12.75 1.9162L2.28105 12.3852C1.9928 12.6734 1.84867 12.8175 1.7456 12.9857C1.65422 13.1348 1.58688 13.2974 1.54605 13.4675C1.5 13.6593 1.5 13.8631 1.5 14.2708V15.6662Z"
-                      stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"
-                    />
-                  </svg>
-                  Edit form
-                </v-button>
-              </div>
-            </div>
-
-            <p class="text-gray-500 text-sm">
-              <span class="pr-1">{{ form.views_count }} view{{ form.views_count > 0 ? 's' : '' }}</span>
-              <span class="pr-1">- {{ form.submissions_count }}
-                submission{{ form.submissions_count > 0 ? 's' : '' }}
-              </span>
-              <span>- Edited {{ form.last_edited_human }}</span>
-            </p>
-            <div v-if="['draft','closed'].includes(form.visibility) || (form.tags && form.tags.length > 0)"
-                 class="mt-2 flex items-center flex-wrap gap-3"
-            >
-              <span v-if="form.visibility=='draft'"
-                    class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
-              >
-                Draft - not publicly accessible
-              </span>
-              <span v-else-if="form.visibility=='closed'"
-                    class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
-              >
-                Closed - won't accept new submissions
-              </span>
-              <span v-for="(tag,i) in form.tags" :key="tag"
-                    class="inline-flex items-center rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
-              >
-                {{ tag }}
-              </span>
-            </div>
-
-            <p v-if="form.closes_at" class="text-yellow-500">
-              <span v-if="form.is_closed"> This form stopped accepting submissions on the  {{
-                displayClosesDate
-              }} </span>
-              <span v-else> This form will stop accepting submissions on the {{ displayClosesDate }} </span>
-            </p>
-            <p v-if="form.max_submissions_count > 0" class="text-yellow-500">
-              <span v-if="form.max_number_of_submissions_reached"> The form is now closed because it reached its limit of {{
-                form.max_submissions_count
-              }} submissions. </span>
-              <span v-else> This form will stop accepting submissions after {{ form.max_submissions_count }} submissions. </span>
-            </p>
-
-            <form-cleanings class="mt-4" :form="form" />
-
-            <div class="border-b border-gray-200 dark:border-gray-700">
-              <ul class="flex flex-wrap -mb-px text-sm font-medium text-center">
-                <li v-for="(tab, i) in tabsList" :key="i+1" class="mr-6">
-                  <router-link :to="{ name: tab.route }"
-                               class="hover:no-underline inline-block py-4 rounded-t-lg border-b-2 text-gray-500 hover:text-gray-600"
-                               active-class="text-blue-600 hover:text-blue-900 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500"
-                  >
-                    {{ tab.name }}
-                  </router-link>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="flex bg-white">
-        <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
-          <div class="py-4">
-            <router-view v-slot="{ Component }">
-              <transition name="page" mode="out-in">
-                <component :is="Component" :form="form" />
-              </transition>
-            </router-view>
-          </div>
-        </div>
-      </div>
-    </template>
-    <div v-else-if="loading" class="text-center w-full p-5">
-      <Loader class="h-6 w-6 mx-auto" />
-    </div>
-    <div v-else class="text-center w-full p-5">
-      Form not found.
-    </div>
-  </div>
-</template>
-
-<script>
-import { computed } from 'vue'
-import Form from 'vform'
-import { useAuthStore } from '../../../../stores/auth.js'
-import { useFormsStore } from '../../../../stores/forms.js'
-import { useWorkingFormStore } from '../../../../stores/working_form.js'
-import { useWorkspacesStore } from '../../../../stores/workspaces.js'
-import ProTag from '~/components/global/ProTag.vue'
-import VButton from '~/components/global/VButton.vue'
-import ExtraMenu from '../../../../components/pages/forms/show/ExtraMenu.vue'
-import SeoMeta from '../../../../mixins/seo-meta.js'
-import FormCleanings from '../../../../components/pages/forms/show/FormCleanings.vue'
-
-const loadForms = function () {
-  const formsStore = useFormsStore()
-  const workspacesStore = useWorkspacesStore()
-  formsStore.startLoading()
-  workspacesStore.loadIfEmpty().then(() => {
-    formsStore.loadIfEmpty(workspacesStore.currentId)
-  })
-}
-
-export default {
-  name: 'ShowForm',
-  components: {
-    VButton,
-    ProTag,
-    ExtraMenu,
-    FormCleanings
-  },
-  mixins: [SeoMeta],
-
-  beforeRouteEnter (to, from, next) {
-    loadForms()
-    next()
-  },
-
-  beforeRouteLeave (to, from, next) {
-    this.workingForm = null
-    next()
-  },
-  middleware: 'auth',
-
-  setup () {
-    const authStore = useAuthStore()
-    const formsStore = useFormsStore()
-    const workingFormStore = useWorkingFormStore()
-    const workspacesStore = useWorkspacesStore()
-    return {
-      formsStore,
-      workingFormStore,
-      workspacesStore,
-      user: computed(() => authStore.user),
-      formsLoading: computed(() => formsStore.loading),
-      workspacesLoading: computed(() => workspacesStore.loading)
-    }
-  },
-
-  data () {
-    return {
-      metaTitle: 'Home',
-      tabsList: [
-        {
-          name: 'Submissions',
-          route: 'forms.show'
-        },
-        {
-          name: 'Analytics',
-          route: 'forms.show.analytics'
-        },
-        {
-          name: 'Share',
-          route: 'forms.show.share'
-        }
-      ]
-    }
-  },
-
-  computed: {
-    workingForm: {
-      get () {
-        return this.workingFormStore.content
-      },
-      /* We add a setter */
-      set (value) {
-        this.workingFormStore.set(value)
-      }
-    },
-    workspace () {
-      if (!this.form) return null
-      return this.workspacesStore.getById(this.form.workspace_id)
-    },
-    form () {
-      return this.formsStore.getBySlug(this.$route.params.slug)
-    },
-    formEndpoint: () => '/api/open/forms/{id}',
-    loading () {
-      return this.formsLoading || this.workspacesLoading
-    },
-    displayClosesDate () {
-      if (this.form.closes_at) {
-        const dateObj = new Date(this.form.closes_at)
-        return dateObj.getFullYear() + '-' +
-          String(dateObj.getMonth() + 1).padStart(2, '0') + '-' +
-          String(dateObj.getDate()).padStart(2, '0') + ' ' +
-          String(dateObj.getHours()).padStart(2, '0') + ':' +
-          String(dateObj.getMinutes()).padStart(2, '0')
-      }
-      return ''
-    }
-  },
-
-  watch: {
-    form () {
-      this.workingForm = new Form(this.form)
-    }
-  },
-
-  mounted () {
-    if (this.form) {
-      this.workingForm = new Form(this.form)
-    }
-  },
-
-  methods: {
-    openCrisp () {
-      window.$crisp.push(['do', 'chat:show'])
-      window.$crisp.push(['do', 'chat:open'])
-    },
-    goBack () {
-      this.$router.push({ name: 'home' })
-    },
-    openEdit () {
-      this.$router.push({ name: 'forms-slug-edit', params: { slug: this.form.slug } })
-    }
+<script setup>
+const route = useRoute()
+useRouter().push({
+  name: 'forms-slug-show-submissions',
+  params: {
+    slug: route.params.slug
   }
-}
+})
 </script>
diff --git a/client/pages/forms/[slug]/show/share.vue b/client/pages/forms/[slug]/show/share.vue
index a570ef0..a1563da 100644
--- a/client/pages/forms/[slug]/show/share.vue
+++ b/client/pages/forms/[slug]/show/share.vue
@@ -38,10 +38,14 @@ export default {
     AdvancedFormUrlSettings,
     EmbedFormAsPopupModal
   },
+
   props: {
-    form: { type: Object, required: true }
+    form: {type: Object, required: true},
+  },
+
+  mounted() {
+    console.log('form',this.form)
   },
-  mixins: [SeoMeta],
 
   data: () => ({
     shareFormConfig: {
@@ -50,8 +54,6 @@ export default {
     }
   }),
 
-  mounted() {},
-
   computed: {
     metaTitle() {
       return (this.form) ? 'Form Share - '+this.form.title : 'Form Share'
diff --git a/client/pages/forms/[slug]/show/stats.vue b/client/pages/forms/[slug]/show/stats.vue
index d111300..414641b 100644
--- a/client/pages/forms/[slug]/show/stats.vue
+++ b/client/pages/forms/[slug]/show/stats.vue
@@ -12,14 +12,11 @@ import FormStats from '../../../../components/open/forms/components/FormStats.vu
 import SeoMeta from '../../../../mixins/seo-meta.js'
 
 export default {
-  name: 'Stats',
   components: {FormStats},
+
   props: {
     form: {type: Object, required: true},
   },
-  mixins: [SeoMeta],
-
-  data: () => ({}),
 
   computed: {
     metaTitle() {
diff --git a/client/pages/forms/show-public.vue b/client/pages/forms/show-public.vue
index 3c5271a..330e636 100644
--- a/client/pages/forms/show-public.vue
+++ b/client/pages/forms/show-public.vue
@@ -184,7 +184,7 @@ export default {
       return this.$route.params.slug
     },
     form () {
-      return this.formsStore.getBySlug(this.formSlug)
+      return this.formsStore.getByKey(this.formSlug)
     },
     isIframe () {
       return window.location !== window.parent.location || window.frameElement
diff --git a/client/pages/home.vue b/client/pages/home.vue
index d3bbbbb..c9378f7 100644
--- a/client/pages/home.vue
+++ b/client/pages/home.vue
@@ -133,13 +133,14 @@ definePageMeta({
 
 const authStore = useAuthStore()
 const formsStore = useFormsStore()
-formsStore.startLoading()
 const workspacesStore = useWorkspacesStore()
+formsStore.startLoading()
 
 onMounted(() => {
   if (!formsStore.allLoaded) {
-    console.log('starting to load')
-    formsStore.load(workspacesStore.currentId)
+    formsStore.loadAll(workspacesStore.currentId)
+  } else {
+    formsStore.stopLoading()
   }
 })
 
@@ -164,7 +165,7 @@ const onTagClick = (tag) => {
   }
 }
 const viewForm = (form) => {
-  useRouter.push({name: 'forms.show', params: {slug: form.slug}})
+  useRouter().push({name: 'forms-slug-show', params: {slug: form.slug}})
 }
 
 // Computed
diff --git a/client/stores/forms.js b/client/stores/forms.js
index 1191afb..4d4f1be 100644
--- a/client/stores/forms.js
+++ b/client/stores/forms.js
@@ -9,7 +9,7 @@ export const useFormsStore = defineStore('forms', () => {
   const allLoaded = ref(false)
   const currentPage = ref(1)
 
-  const load = (workspaceId) => {
+  const loadAll = (workspaceId) => {
     contentStore.startLoading()
     return opnFetch(formsEndpoint.replace('{workspaceId}', workspaceId),{query: {page: currentPage.value}})
       .then((response) => {
@@ -21,7 +21,7 @@ export const useFormsStore = defineStore('forms', () => {
         }
         if (currentPage.value < response.meta.last_page) {
           currentPage.value++
-          load(workspaceId)
+          loadAll(workspaceId)
         } else {
           allLoaded.value = true
           contentStore.stopLoading()
@@ -30,6 +30,14 @@ export const useFormsStore = defineStore('forms', () => {
       })
   }
 
+  const load = (workspaceId, slug) => {
+    contentStore.startLoading()
+    return opnFetch(formsEndpoint.replace('{workspaceId}', workspaceId) + '/' + slug)
+      .then((response) => {
+        console.log(response.data.value)
+      })
+  }
+
   const allTags = computed(() => {
     let tags = []
     contentStore.getAll.value.forEach((form) => {
@@ -44,6 +52,7 @@ export const useFormsStore = defineStore('forms', () => {
     ...contentStore,
     allLoaded,
     allTags,
+    loadAll,
     load
   }
 })
diff --git a/resources/js/components/open/forms/components/FormSubmissions.vue b/resources/js/components/open/forms/components/FormSubmissions.vue
index d2d7a4e..c2de8a2 100644
--- a/resources/js/components/open/forms/components/FormSubmissions.vue
+++ b/resources/js/components/open/forms/components/FormSubmissions.vue
@@ -80,7 +80,6 @@
 </template>
 
 <script>
-import axios from 'axios'
 import Fuse from 'fuse.js'
 import Form from 'vform'
 import { useWorkingFormStore } from '../../../../stores/working_form'
@@ -88,6 +87,7 @@ import ScrollShadow from '../../../common/ScrollShadow.vue'
 import OpenTable from '../../tables/OpenTable.vue'
 import clonedeep from 'clone-deep'
 import VSwitch from '../../../forms/components/VSwitch.vue'
+import { opnFetch } from '~/composables/useOpnApi.js'
 
 export default {
   name: 'FormSubmissions',
@@ -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()