Refactoring stores and templates pages to comp. api

2023-12-19 13:46:55 +01:00
parent 3b798c12fd
commit bb519907f6
24 changed files with 432 additions and 457 deletions
--- a/client/components/global/Modal.vue
+++ b/client/components/global/Modal.vue
@@ -20,7 +20,7 @@
            </button>
          </div>
          <div class="sm:flex sm:flex-col sm:items-start">
-            <div v-if="$scopedSlots.hasOwnProperty('icon')" class="flex w-full justify-center mb-4">
+            <div v-if="$slots.hasOwnProperty('icon')" class="flex w-full justify-center mb-4">
              <div class="w-14 h-14 rounded-full flex justify-center items-center"
                   :class="'bg-'+iconColor+'-100 text-'+iconColor+'-600'"
              >
@@ -28,7 +28,7 @@
              </div>
            </div>
            <div class="mt-3 text-center sm:mt-0 w-full">
-              <h2 v-if="$scopedSlots.hasOwnProperty('title')"
+              <h2 v-if="$slots.hasOwnProperty('title')"
                  class="text-2xl font-semibold text-center text-gray-900"
              >
                <slot name="title"/>
--- a/client/components/global/Navbar.vue
+++ b/client/components/global/Navbar.vue
@@ -72,7 +72,7 @@
                    My Forms
                  </NuxtLink>

-                  <NuxtLink v-if="userOnboarded" :to="{ name: 'my_templates' }"
+                  <NuxtLink v-if="userOnboarded" :to="{ name: 'templates-my-templates' }"
                               class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
@@ -81,7 +81,7 @@
                    My Templates
                  </NuxtLink>

-                  <NuxtLink :to="{ name: 'settings.profile' }"
+                  <NuxtLink :to="{ name: 'settings-profile' }"
                               class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
                  >
                    <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
@@ -209,7 +209,8 @@ export default {
      this.formsStore.resetState()

      // Redirect to login.
-      this.$router.push({ name: 'login' })
+      const router = useRouter()
+      router.push({ name: 'login' })
    },
  }
 }
--- a/client/components/open/forms/OpenCompleteForm.vue
+++ b/client/components/open/forms/OpenCompleteForm.vue
@@ -129,6 +129,12 @@ export default {
    submitButtonClass: { type: String, default: '' }
  },

+  setup() {
+    return {
+      isIframe: useIsIframe()
+    }
+  },
+
  data () {
    return {
      loading: false,
@@ -143,11 +149,8 @@ export default {
  },

  computed: {
-    isIframe () {
-      return window.location !== window.parent.location || window.frameElement
-    },
    isEmbedPopup () {
-      return window.location.href.includes('popup=true')
+      return process.client && window.location.href.includes('popup=true')
    },
    theme () {
      return this.themes[this.themes.hasOwnProperty(this.form.theme) ? this.form.theme : 'default']
@@ -156,7 +159,7 @@ export default {
      return this.$route.name === 'forms.show_public'
    },
    isHideTitle () {
-      return this.form.hide_title || window.location.href.includes('hide_title=true')
+      return this.form.hide_title || (process.client && window.location.href.includes('hide_title=true'))
    }
  },

--- a/client/components/open/forms/OpenForm.vue
+++ b/client/components/open/forms/OpenForm.vue
@@ -106,7 +106,8 @@ export default {
    const workingFormStore = useWorkingFormStore()
    return {
      recordsStore,
-      workingFormStore
+      workingFormStore,
+      darkModeEnabled: useDark()
    }
  },

@@ -118,7 +119,6 @@ export default {
       * Used to force refresh components by changing their keys
       */
      formVersionId: 1,
-      darkModeEnabled: document.body.classList.contains('dark'),
      isAutoSubmit: false,
      /**
       * If currently dragging a field
@@ -259,7 +259,7 @@ export default {
        return
      }

-      if (this.form.use_captcha) {
+      if (this.form.use_captcha && process.client) {
        this.dataForm['h-captcha-response'] = document.getElementsByName('h-captcha-response')[0].value
        this.$refs.hcaptcha.reset()
      }
@@ -291,6 +291,7 @@ export default {
      }

      // Scroll to error
+      if (process.server) return
      const elements = document.getElementsByClassName('has-error')
      if (elements.length > 0) {
        window.scroll({
--- a/client/components/open/forms/components/templates/FormTemplateModal.vue
+++ b/client/components/open/forms/components/templates/FormTemplateModal.vue
@@ -161,7 +161,7 @@ export default {
        if (response.data.message) {
          this.alertSuccess(response.data.message)
        }
-        this.templatesStore.addOrUpdate(response.data.data)
+        this.templatesStore.save(response.data.data)
        this.$emit('close')
      })
    },
@@ -171,7 +171,7 @@ export default {
        if (response.data.message) {
          this.alertSuccess(response.data.message)
        }
-        this.templatesStore.addOrUpdate(response.data.data)
+        this.templatesStore.save(response.data.data)
        this.$emit('close')
      })
    },
--- a/client/components/pages/auth/components/LoginForm.vue
+++ b/client/components/pages/auth/components/LoginForm.vue
@@ -42,6 +42,7 @@

 <script>
 import ForgotPasswordModal from '../ForgotPasswordModal.vue'
+import {opnFetch} from "~/composables/useOpnApi.js";

 export default {
  name: 'LoginForm',
@@ -78,10 +79,10 @@ export default {
      const data = await this.form.post('login')

      // Save the token.
-      this.authStore.setToken(data.token, this.remember)
+      this.authStore.setToken(data.token)

-      // Fetch the user.
-      await this.authStore.fetchUser()
+      const userData = await opnFetch('user')
+      this.authStore.setUser(userData)

      // Redirect home.
      this.redirect()
@@ -93,13 +94,14 @@ export default {
        return
      }

-      const intendedUrl = Cookies.get('intended_url')
+      const intendedUrlCookie = useCookie('intended_url')
+      const router = useRouter()

-      if (intendedUrl) {
-        Cookies.remove('intended_url')
-        this.$router.push({ path: intendedUrl })
+      if (intendedUrlCookie.value) {
+        router.push({ path: intendedUrlCookie.value })
+        useCookie('intended_url').value = null
      } else {
-        this.$router.push({ name: 'home' })
+        router.push({ name: 'home' })
      }
    }
  }
--- a/client/components/pages/templates/SingleTemplate.vue
+++ b/client/components/pages/templates/SingleTemplate.vue
@@ -29,7 +29,7 @@
    <p class="line-clamp-2 mt-2 text-sm font-normal text-gray-600">
      {{ cleanQuotes(template.short_description) }}
    </p>
-    <template-tags :slug="template.slug"
+    <template-tags :template="template"
                   class="flex mt-4 items-center flex-wrap gap-3"
    />
    <router-link :to="{params:{slug:template.slug},name:'templates-slug'}" title="">
@@ -46,8 +46,7 @@ export default {

  props: {
    template: {
-      type: Object,
-      required: true
+      type: Object
    }
  },

--- a/client/components/pages/templates/TemplateTags.vue
+++ b/client/components/pages/templates/TemplateTags.vue
@@ -1,42 +1,42 @@
 <template>
  <div v-if="template">
-    <template v-if="displayAll">
-      <span v-if="template.is_new"
-            class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-white bg-blue-500 rounded-full"
-      >
-        <svg aria-hidden="true" class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-             fill="currentColor"
-        >
-          <path fill-rule="evenodd"
-                d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"
-                clip-rule="evenodd"
-          />
-        </svg>
-        New
-      </span>
-      <span v-for="item in types"
-            class="inline-flex items-center rounded-full bg-gray-50 dark:bg-gray-800 dark:text-gray-400 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
-      >
-        {{ item }}
-      </span>
-      <span v-for="item in industries"
-            class="inline-flex items-center rounded-full bg-blue-50 dark:bg-blue-900 dark:text-gray-400 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10"
-      >
-        {{ item }}
-      </span>
-    </template>
-    <template v-else>
-      <span v-if="types.length > 0"
-            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"
-      >
-        {{ types[0] }} <template v-if="types.length > 1">+{{ types.length - 1 }}</template>
-      </span>
-      <span v-if="industries.length > 0"
-            class="inline-flex items-center rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10"
-      >
-        {{ industries[0] }} <template v-if="industries.length > 1">+{{ industries.length - 1 }}</template>
-      </span>
-    </template>
+<!--    <template v-if="displayAll">-->
+<!--      <span v-if="template.is_new"-->
+<!--            class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-white bg-blue-500 rounded-full"-->
+<!--      >-->
+<!--        <svg aria-hidden="true" class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"-->
+<!--             fill="currentColor"-->
+<!--        >-->
+<!--          <path fill-rule="evenodd"-->
+<!--                d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"-->
+<!--                clip-rule="evenodd"-->
+<!--          />-->
+<!--        </svg>-->
+<!--        New-->
+<!--      </span>-->
+<!--      <span v-for="item in types"-->
+<!--            class="inline-flex items-center rounded-full bg-gray-50 dark:bg-gray-800 dark:text-gray-400 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"-->
+<!--      >-->
+<!--        {{ item }}-->
+<!--      </span>-->
+<!--      <span v-for="item in industries"-->
+<!--            class="inline-flex items-center rounded-full bg-blue-50 dark:bg-blue-900 dark:text-gray-400 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10"-->
+<!--      >-->
+<!--        {{ item }}-->
+<!--      </span>-->
+<!--    </template>-->
+<!--    <template v-else>-->
+<!--      <span v-if="types.length > 0"-->
+<!--            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"-->
+<!--      >-->
+<!--        {{ types[0] }} <template v-if="types.length > 1">+{{ types.length - 1 }}</template>-->
+<!--      </span>-->
+<!--      <span v-if="industries.length > 0"-->
+<!--            class="inline-flex items-center rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10"-->
+<!--      >-->
+<!--        {{ industries[0] }} <template v-if="industries.length > 1">+{{ industries.length - 1 }}</template>-->
+<!--      </span>-->
+<!--    </template>-->
  </div>
 </template>

@@ -46,8 +46,8 @@ import { useTemplatesStore } from '../../../stores/templates'

 export default {
  props: {
-    slug: {
-      type: String,
+    template: {
+      type: Object,
      required: true
    },
    displayAll: {
@@ -66,19 +66,17 @@ export default {
  data: () => ({}),

  computed: {
-    template () {
-      return this.templatesStore.getBySlug(this.slug)
-    },
-    types () {
-      if (!this.template) return null
-      console.log('template in types',this.template)
-      return this.templatesStore.getTemplateTypes(this.template.types)
-    },
-    industries () {
-      if (!this.template) return null
-      console.log('template in types',this.template)
-      return this.templatesStore.getTemplateIndustries(this.template.industries)
-    }
+    // template () {
+    //   return this.templatesStore.getByKey(this.slug)
+    // },
+    // types () {
+    //   if (!this.template) return null
+    //   return this.templatesStore.getTemplateTypes(this.template.types)
+    // },
+    // industries () {
+    //   if (!this.template) return null
+    //   return this.templatesStore.getTemplateIndustries(this.template.industries)
+    // }
  },

  methods: {}
--- a/client/components/pages/templates/TemplatesList.vue
+++ b/client/components/pages/templates/TemplatesList.vue
@@ -20,7 +20,7 @@
          </div>
        </div>

-        <div v-if="templatesLoading" class="text-center mt-4">
+        <div v-if="loading" class="text-center mt-4">
          <Loader class="h-6 w-6 text-nt-blue mx-auto"/>
        </div>
        <p v-else-if="enrichedTemplates.length === 0" class="text-center mt-4">
@@ -83,15 +83,6 @@ import Form from 'vform'
 import Fuse from 'fuse.js'
 import SingleTemplate from './SingleTemplate.vue'

-// const loadTemplates = function (onlyMy) {
-//   const templatesStore = useTemplatesStore()
-//   if(onlyMy){
-//     templatesStore.loadAll({'onlymy':true})
-//   } else {
-//     templatesStore.loadIfEmpty()
-//   }
-// }
-
 export default {
  name: 'TemplatesList',
  components: {SingleTemplate},