Fix composable issue

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

@@ -38,7 +38,7 @@
                     />
                   </svg>
                 </v-button>
-                <v-button class="text-white" @click="openEdit">
+                <v-button class="text-white" :to="{name: 'forms-slug-edit', params: {slug: slug}}">
                   <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"
                   >
@@ -126,22 +126,13 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import {computed} from 'vue'
 import ProTag from '~/components/global/ProTag.vue'
 import VButton from '~/components/global/VButton.vue'
 import ExtraMenu from '../../../components/pages/forms/show/ExtraMenu.vue'
 import FormCleanings from '../../../components/pages/forms/show/FormCleanings.vue'
-export default {
-  name: 'ShowForm',
-  components: {
-    VButton,
-    ProTag,
-    ExtraMenu,
-    FormCleanings
-  },
 
-  setup () {
 definePageMeta({
   middleware: "auth"
 })
@@ -153,26 +144,26 @@ export default {
 const formsStore = useFormsStore()
 const workingFormStore = useWorkingFormStore()
 const workspacesStore = useWorkspacesStore()
-    const route = useRoute()
 
-    if (!formsStore.getByKey(route.params.slug)) {
+const slug = useRoute().params.slug
-      formsStore.loadAll(useWorkspacesStore().currentId)
+
+const user = computed(() => authStore.user)
+const form = computed(() => formsStore.getByKey(slug))
+const workspace = computed(() => workspacesStore.getByKey(form?.value?.workspace_id))
+const loading = computed(() => formsStore.loading || workspacesStore.loading)
+const displayClosesDate = computed(() => {
+  if (form.value && form.value.closes_at) {
+    const dateObj = new Date(form.value.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')
   }
-    workingFormStore.set(null) // Reset old working form
+  return ''
+})
 
-    return {
+const tabsList = [
-      formsStore,
-      workingFormStore,
-      workspacesStore,
-      user: computed(() => authStore.user),
-      formsLoading: computed(() => formsStore.loading),
-      workspacesLoading: computed(() => workspacesStore.loading)
-    }
-  },
-
-  data () {
-    return {
-      tabsList: [
   {
     name: 'Submissions',
     route: 'forms-slug-show-submissions'
@@ -186,66 +177,23 @@ export default {
     route: 'forms-slug-show-share'
   }
 ]
-    }
-  },
 
-  computed: {
+onMounted(() => {
-    workingForm: {
+  workingFormStore.set(null) // Reset old working form
-      get () {
+  if (form.value) {
-        return this.workingFormStore.content
+    workingFormStore.set(form.value)
-      },
+  } else {
-      /* We add a setter */
+    formsStore.loadAll(useWorkspacesStore().currentId)
-      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: {
+watch(() => form?.value?.id, (id) => {
-    form () {
+  if (id) {
-      this.workingForm = useForm(this.form)
+    workingFormStore.set(form)
   }
-  },
+})
 
-  mounted () {
+const goBack = () => {
-    if (this.form) {
+  useRouter().push({name: 'home'})
-      this.workingForm = useForm(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>

client/pages/forms/[slug]/show/share.vue

@@ -20,7 +20,7 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import ShareLink from '../../../../components/pages/forms/show/ShareLink.vue'
 import EmbedCode from '../../../../components/pages/forms/show/EmbedCode.vue'
 import FormQrCode from '../../../../components/pages/forms/show/FormQrCode.vue'
@@ -29,47 +29,28 @@ import RegenerateFormLink from '../../../../components/pages/forms/show/Regenera
 import AdvancedFormUrlSettings from '../../../../components/open/forms/components/AdvancedFormUrlSettings.vue'
 import EmbedFormAsPopupModal from '../../../../components/pages/forms/show/EmbedFormAsPopupModal.vue'
 
-export default {
+const props = {form: {type: Object, required: true}}
-  components: {
-    ShareLink,
-    EmbedCode,
-    FormQrCode,
-    UrlFormPrefill,
-    RegenerateFormLink,
-    AdvancedFormUrlSettings,
-    EmbedFormAsPopupModal
-  },
 
-  props: {
-    form: {type: Object, required: true},
-  },
-
-  setup (props) {
 definePageMeta({
   middleware: "auth"
 })
 useOpnSeoMeta({
   title: (props.form) ? 'Share Form - ' + props.form.title : 'Share Form'
 })
-  },
 
-  data: () => ({
+
-    shareFormConfig: {
+const shareFormConfig = ref({
   hide_title: false,
   auto_submit: false
-    }
+})
-  }),
 
-  computed: {
+const shareUrlForQueryParams = computed(() => {
-    shareUrlForQueryParams () {
   let queryStr = ''
-      for (const [key, value] of Object.entries(this.shareFormConfig)) {
+  for (const [key, value] of Object.entries(shareFormConfig.value)) {
     if (value && value !== 'false' && value !== false) {
       queryStr += '&' + encodeURIComponent(key) + "=" + encodeURIComponent(value)
     }
   }
   return queryStr.slice(1)
-    }
+})
-  },
-}
 </script>

client/pages/forms/[slug]/show/submissions.vue

@@ -4,32 +4,18 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import FormSubmissions from '../../../../components/open/forms/components/FormSubmissions.vue'
 
-export default {
+const props = {
-  components: {FormSubmissions},
-  props: {
   form: {type: Object, required: true}
-  },
+}
 
-  setup (props) {
 definePageMeta({
   middleware: "auth"
 })
 useOpnSeoMeta({
   title: (props.form) ? 'Form Submissions - ' + props.form.title : 'Form Submissions'
 })
-  },
 
-  data: () => ({}),
-
-  mounted() {
-  },
-
-  computed: {
-  },
-
-  methods: {}
-}
 </script>

client/pages/privacy-policy.vue

@@ -19,6 +19,9 @@ import {computed} from "vue";
 useOpnSeoMeta({
   title: 'Privacy Policy'
 })
+defineRouteRules({
+  swr: 3600
+})
 
 const notionPageStore = useNotionPagesStore()
 await notionPageStore.load('9c97349ceda7455aab9b341d1ff70f79')

client/pages/terms-conditions.vue

@@ -19,6 +19,9 @@ import {computed} from "vue";
 useOpnSeoMeta({
   title: 'Terms & Conditions'
 })
+defineRouteRules({
+  swr: 3600
+})
 
 const notionPageStore = useNotionPagesStore()
 await notionPageStore.load('246420da2834480ca04047b0c5a00929')

client/stores/notion_pages.js

@@ -9,8 +9,8 @@ export const useNotionPagesStore = defineStore('notion_pages', () => {
     contentStore.startLoading()
 
     const apiUrl = opnformConfig.notion.worker
-    return useOpnApi(`${apiUrl}/page/${pageId}`)
+    return useFetch(`${apiUrl}/page/${pageId}`)
-      .then(({data})=> {
+      .then(({data, error})=> {
         const val = data.value
         val['id'] = pageId
         contentStore.save(val)