Fix composable issue

2024-01-11 17:16:50 +01:00 · 2024-01-11 17:16:50 +01:00 · aa0b9ae02c
parent 5a3978874a
commit aa0b9ae02c
6 changed files with 117 additions and 196 deletions
--- a/client/pages/forms/[slug]/show.vue
+++ b/client/pages/forms/[slug]/show.vue
@ -20,7 +20,7 @@
                {{ form.title }}
              </h2>
              <div class="flex">
-                <extra-menu :form="form" />
+                <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"
@ -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"
                  >
@ -92,7 +92,7 @@
              <span v-else> This form will stop accepting submissions after {{ form.max_submissions_count }} submissions. </span>
            </p>

-            <form-cleanings class="mt-4" :form="form" />
+            <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">
@ -118,7 +118,7 @@
      </div>
    </template>
    <div v-else-if="loading" class="text-center w-full p-5">
-      <Loader class="h-6 w-6 mx-auto" />
+      <Loader class="h-6 w-6 mx-auto"/>
    </div>
    <div v-else class="text-center w-full p-5">
      Form not found.
@ -126,53 +126,44 @@
  </div>
 </template>

-<script>
-import { computed } from 'vue'
+<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({
+definePageMeta({
  middleware: "auth"
-    })
-    useOpnSeoMeta({
+})
+useOpnSeoMeta({
  title: 'Home'
-    })
+})

-    const authStore = useAuthStore()
-    const formsStore = useFormsStore()
-    const workingFormStore = useWorkingFormStore()
-    const workspacesStore = useWorkspacesStore()
-    const route = useRoute()
+const authStore = useAuthStore()
+const formsStore = useFormsStore()
+const workingFormStore = useWorkingFormStore()
+const workspacesStore = useWorkspacesStore()

-    if (!formsStore.getByKey(route.params.slug)) {
-      formsStore.loadAll(useWorkspacesStore().currentId)
+const slug = useRoute().params.slug
+
+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 {
-      formsStore,
-      workingFormStore,
-      workspacesStore,
-      user: computed(() => authStore.user),
-      formsLoading: computed(() => formsStore.loading),
-      workspacesLoading: computed(() => workspacesStore.loading)
-    }
-  },
-
-  data () {
-    return {
-      tabsList: [
+const tabsList = [
  {
    name: 'Submissions',
    route: 'forms-slug-show-submissions'
@ -185,67 +176,24 @@ export default {
    name: 'Share',
    route: 'forms-slug-show-share'
  }
-      ]
-    }
-  },
+]

-  computed: {
-    workingForm: {
-      get () {
-        return this.workingFormStore.content
-      },
-      /* We add a setter */
-      set (value) {
-        this.workingFormStore.set(value)
+onMounted(() => {
+  workingFormStore.set(null) // Reset old working form
+  if (form.value) {
+    workingFormStore.set(form.value)
+  } else {
+    formsStore.loadAll(useWorkspacesStore().currentId)
  }
-    },
-    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 = useForm(this.form)
+watch(() => form?.value?.id, (id) => {
+  if (id) {
+    workingFormStore.set(form)
  }
-  },
+})

-  mounted () {
-    if (this.form) {
-      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 } })
-    }
-  }
+const goBack = () => {
+  useRouter().push({name: 'home'})
 }
 </script>
--- a/client/pages/forms/[slug]/show/share.vue
+++ b/client/pages/forms/[slug]/show/share.vue
@ -2,25 +2,25 @@
  <div class="mb-20">

    <div class="mb-6 pb-6 border-b w-full flex flex-col sm:flex-row gap-2">
-      <regenerate-form-link class="sm:w-1/2 flex" :form="form" />
+      <regenerate-form-link class="sm:w-1/2 flex" :form="form"/>

-      <url-form-prefill class="sm:w-1/2" :form="form" :extra-query-param="shareUrlForQueryParams" />
+      <url-form-prefill class="sm:w-1/2" :form="form" :extra-query-param="shareUrlForQueryParams"/>

-      <embed-form-as-popup-modal class="sm:w-1/2 flex" :form="form" />
+      <embed-form-as-popup-modal class="sm:w-1/2 flex" :form="form"/>
    </div>

-    <share-link class="mt-4" :form="form" :extra-query-param="shareUrlForQueryParams" />
+    <share-link class="mt-4" :form="form" :extra-query-param="shareUrlForQueryParams"/>

-    <embed-code class="mt-6" :form="form" :extra-query-param="shareUrlForQueryParams" />
+    <embed-code class="mt-6" :form="form" :extra-query-param="shareUrlForQueryParams"/>

-    <form-qr-code class="mt-6" :form="form" :extra-query-param="shareUrlForQueryParams" />
+    <form-qr-code class="mt-6" :form="form" :extra-query-param="shareUrlForQueryParams"/>

-    <advanced-form-url-settings :form="form" v-model="shareFormConfig" />
+    <advanced-form-url-settings :form="form" v-model="shareFormConfig"/>

  </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 {
-  components: {
-    ShareLink,
-    EmbedCode,
-    FormQrCode,
-    UrlFormPrefill,
-    RegenerateFormLink,
-    AdvancedFormUrlSettings,
-    EmbedFormAsPopupModal
-  },
+const props = {form: {type: Object, required: true}}

-  props: {
-    form: {type: Object, required: true},
-  },
-
-  setup (props) {
-    definePageMeta({
+definePageMeta({
  middleware: "auth"
-    })
-    useOpnSeoMeta({
-      title: (props.form) ? 'Share Form - '+props.form.title : 'Share Form'
-    })
-  },
+})
+useOpnSeoMeta({
+  title: (props.form) ? 'Share Form - ' + props.form.title : 'Share Form'
+})

-  data: () => ({
-    shareFormConfig: {
+
+const shareFormConfig = ref({
  hide_title: false,
  auto_submit: false
-    }
-  }),
+})

-  computed: {
-    shareUrlForQueryParams () {
+const shareUrlForQueryParams = computed(() => {
  let queryStr = ''
-      for (const [key, value] of Object.entries(this.shareFormConfig)) {
-        if(value && value !== 'false' && value !== false){
+  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>
--- a/client/pages/forms/[slug]/show/submissions.vue
+++ b/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 {
-  components: {FormSubmissions},
-  props: {
+const 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: {}
 }
+
+definePageMeta({
+  middleware: "auth"
+})
+useOpnSeoMeta({
+  title: (props.form) ? 'Form Submissions - ' + props.form.title : 'Form Submissions'
+})
+
 </script>
--- a/client/pages/privacy-policy.vue
+++ b/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')
--- a/client/pages/terms-conditions.vue
+++ b/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')
--- a/client/stores/notion_pages.js
+++ b/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}`)
-      .then(({data})=> {
+    return useFetch(`${apiUrl}/page/${pageId}`)
+      .then(({data, error})=> {
        const val = data.value
        val['id'] = pageId
        contentStore.save(val)