Refactoring stores and templates pages to comp. api

JhumanJ · Dec 19, 2023 · bb51990 · bb51990
1 parent 3b798c1
commit bb51990
Show file tree

Hide file tree

Showing 24 changed files with 426 additions and 451 deletions.
diff --git a/client/components/global/Modal.vue b/client/components/global/Modal.vue
@@ -20,15 +20,15 @@
             </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'"
               >
                 <slot name="icon"/>
               </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"/>

diff --git 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' })
     },
   }
 }

diff --git 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'))
     }
   },
 

diff --git 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({

diff --git 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')
       })
     },

diff --git 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' })
       }
     }
   }

diff --git 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
     }
   },
 

diff --git 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: {}

diff --git 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},

diff --git a/client/composables/lib/vForm/Form.js b/client/composables/lib/vForm/Form.js
@@ -1,6 +1,7 @@
 import {serialize} from 'object-to-formdata';
 import Errors from './Errors';
 import cloneDeep from 'clone-deep';
+import {opnFetch} from "~/composables/useOpnApi.js";
 function hasFiles(data) {
   return data instanceof File ||
     data instanceof Blob ||
@@ -120,27 +121,23 @@ class Form {
         config.transformRequest = [data => serialize(data)];
       }
     }
-
     return new Promise((resolve, reject) => {
-      useOpnApi(config.url, config)
-        .then(({data, error}) => {
-          if (error.value) {
-            this.handleErrors(error);
-            reject(error);
-            return;
-          }
-
+      opnFetch(config.url, config)
+        .then((data) => {
           this.finishProcessing();
-          resolve(data.value);
+          resolve(data);
+        }).catch((error) => {
+          this.handleErrors(error);
+          resolve(error)
         })
     });
   }
 
   handleErrors(error) {
     this.busy = false;
 
-    if (error.value) {
-      this.errors.set(this.extractErrors(error.value.data));
+    if (error) {
+      this.errors.set(this.extractErrors(error.data));
     }
   }