WI

client/components/forms/TextInput.vue

@@ -7,7 +7,7 @@
     </template>
 
     <input :id="id?id:name" v-model="compVal" :disabled="disabled?true:null"
-           :type="nativeType"
+           :type="nativeType" :autocomplete="autocomplete"
            :pattern="pattern"
            :style="inputStyle"
            :class="[theme.default.input, { '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200': disabled }]"
@@ -42,6 +42,7 @@ export default {
     accept: { type: String, default: null },
     min: { type: Number, required: false, default: null },
     max: { type: Number, required: false, default: null },
+    autocomplete: { default: null },
     maxCharLimit: { type: Number, required: false, default: null },
     showCharLimit: { type: Boolean, required: false, default: false },
     pattern: { type: String, default: null }

client/components/forms/components/VSelect.vue

@@ -73,7 +73,7 @@
 
 <script>
 import Collapsible from '~/components/global/transitions/Collapsible.vue'
-import { themes } from '../../../config/form-themes'
+import { themes } from '../../../lib/forms/form-themes.js'
 import TextInput from '../TextInput.vue'
 import debounce from 'debounce'
 import Fuse from 'fuse.js'

client/components/forms/useFormInput.js

@@ -1,5 +1,5 @@
 import { ref, computed, watch } from 'vue'
-import { themes } from '~/config/form-themes.js'
+import { themes } from '~/lib/forms/form-themes.js'
 
 export const inputProps = {
   id: { type: String, default: null },

client/components/open/forms/OpenCompleteForm.vue

@@ -111,7 +111,7 @@
 import Form from 'vform'
 import OpenForm from './OpenForm.vue'
 import OpenFormButton from './OpenFormButton.vue'
-import { themes } from '~/config/form-themes.js'
+import { themes } from '~/lib/forms/form-themes.js'
 import VButton from '~/components/global/VButton.vue'
 import VTransition from '~/components/global/transitions/VTransition.vue'
 import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js'

client/components/open/forms/OpenForm.vue

@@ -62,12 +62,9 @@
 <script>
 import axios from 'axios'
 import Form from 'vform'
-import { computed } from 'vue'
-import { useRecordsStore } from '../../../stores/records'
-import { useWorkingFormStore } from '../../../stores/working_form'
 import OpenFormButton from './OpenFormButton.vue'
 import clonedeep from 'clone-deep'
-import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver.js'
+import FormLogicPropertyResolver from "~/lib/forms/FormLogicPropertyResolver.js";
 import OpenFormField from './OpenFormField.vue'
 import draggable from 'vuedraggable'
 import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js'

client/components/open/forms/OpenFormButton.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { themes } from '~/config/form-themes.js'
+import { themes } from '~/lib/forms/form-themes.js'
 
 export default {
   name: 'OpenFormButton',

client/components/open/forms/OpenFormField.vue

@@ -80,9 +80,8 @@
 
 <script>
 import { computed } from 'vue'
-import { useWorkingFormStore } from '../../../stores/working_form'
-import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver.js'
-import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js'
+import FormLogicPropertyResolver from "~/lib/forms/FormLogicPropertyResolver.js"
+import FormPendingSubmissionKey from '~/mixins/forms/form-pending-submission-key.js'
 
 export default {
   name: 'OpenFormField',

client/components/pages/forms/show/UrlFormPrefill.vue

@@ -67,7 +67,7 @@
 import FormUrlPrefill from '../../../open/forms/components/FormUrlPrefill.vue'
 import ProTag from '~/components/global/ProTag.vue'
 import OpenForm from '../../../open/forms/OpenForm.vue'
-import { themes } from '~/config/form-themes.js'
+import { themes } from '~/lib/forms/form-themes.js'
 
 export default {
   name: 'UrlFormPrefill',

client/components/pages/templates/SingleTemplate.vue

@@ -39,45 +39,18 @@
 </template>
 
 <script>
-import { computed } from 'vue'
-import { useTemplatesStore } from '../../../stores/templates'
 import TemplateTags from './TemplateTags.vue'
 
 export default {
   components: { TemplateTags },
 
   props: {
-    slug: {
-      type: String,
+    template: {
+      type: Object,
       required: true
     }
   },
 
-  setup () {
-    const templatesStore = useTemplatesStore()
-    return {
-      templatesStore
-    }
-  },
-
-  data: () => ({}),
-
-  computed: {
-    template () {
-      return this.templatesStore.getBySlug(this.slug)
-    }
-  },
-
-  watch: {
-    slug () {
-      this.templatesStore.loadTemplate(this.slug)
-    }
-  },
-
-  mounted () {
-    this.templatesStore.loadTemplate(this.slug)
-  },
-
   methods: {
     cleanQuotes (str) {
       // Remove starting and ending quotes if any

client/components/pages/templates/TemplateTags.vue

@@ -71,10 +71,12 @@ export default {
     },
     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)
     }
   },

client/components/pages/templates/TemplatesList.vue

@@ -16,104 +16,103 @@
             </div>
           </div>
           <div class="flex-1 w-full md:max-w-xs">
-            <text-input name="search" :form="searchTemplate" placeholder="Search..." />
+            <text-input autocomplete="off" name="search" :form="searchTemplate" placeholder="Search..."/>
           </div>
         </div>
 
         <div v-if="templatesLoading" class="text-center mt-4">
-          <Loader class="h-6 w-6 text-nt-blue mx-auto" />
+          <Loader class="h-6 w-6 text-nt-blue mx-auto"/>
         </div>
         <p v-else-if="enrichedTemplates.length === 0" class="text-center mt-4">
           No templates found.
         </p>
         <div v-else class="relative z-10">
           <div class="grid grid-cols-1 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 sm:gap-y-12">
-            <single-template v-for="template in enrichedTemplates" :key="template.id" :slug="template.slug" />
+            <single-template v-for="template in enrichedTemplates" :key="template.id" :template="template"/>
           </div>
         </div>
       </div>
     </section>
 
-    <template v-if="!onlyMy">
-      <section class="py-12 bg-white border-t border-gray-200 sm:py-16">
-        <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
-          <div class="flex items-center justify-between">
-            <h4 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
-              All Types
-            </h4>
-          </div>
 
-          <div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-            <router-link v-for="row in types" :key="row.slug"
-                        :to="{params:{slug:row.slug}, name:'templates-types'}"
-                        :title="row.name"
-                        class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
-            >
-              {{ row.name }}
-            </router-link>
-          </div>
+    <section class="py-12 bg-white border-t border-gray-200 sm:py-16">
+      <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
+        <div class="flex items-center justify-between">
+          <h4 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
+            All Types
+          </h4>
         </div>
-      </section>
 
-      <section class="py-12 bg-white border-t border-gray-200 sm:py-16">
-        <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
-          <div class="flex items-center justify-between">
-            <h4 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
-              All Industries
-            </h4>
-          </div>
-
-          <div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-            <router-link v-for="row in industries" :key="row.slug"
-                        :to="{params:{slug:row.slug}, name:'templates-industries'}"
-                        :title="row.name"
-                        class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
-            >
-              {{ row.name }}
-            </router-link>
-          </div>
+        <div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          <router-link v-for="row in types" :key="row.slug"
+                       :to="{params:{slug:row.slug}, name:'templates-types'}"
+                       :title="row.name"
+                       class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
+          >
+            {{ row.name }}
+          </router-link>
         </div>
-      </section>
-    </template>
+      </div>
+    </section>
+
+    <section class="py-12 bg-white border-t border-gray-200 sm:py-16">
+      <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
+        <div class="flex items-center justify-between">
+          <h4 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
+            All Industries
+          </h4>
+        </div>
+
+        <div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          <router-link v-for="row in industries" :key="row.slug"
+                       :to="{params:{slug:row.slug}, name:'templates-industries'}"
+                       :title="row.name"
+                       class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
+          >
+            {{ row.name }}
+          </router-link>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
 <script>
-import { computed } from 'vue'
-import { useAuthStore } from '../../../stores/auth'
-import { useTemplatesStore } from '../../../stores/templates'
+import {computed} from 'vue'
 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()
-  }
-}
+// const loadTemplates = function (onlyMy) {
+//   const templatesStore = useTemplatesStore()
+//   if(onlyMy){
+//     templatesStore.loadAll({'onlymy':true})
+//   } else {
+//     templatesStore.loadIfEmpty()
+//   }
+// }
 
 export default {
   name: 'TemplatesList',
-  components: { SingleTemplate },
+  components: {SingleTemplate},
   props: {
-    onlyMy: {
+    templates: {
+      type: Array,
+      required: true
+    },
+    loading: {
       type: Boolean,
-      required: false
+      default: false
     }
   },
 
-  setup () {
+  setup() {
     const authStore = useAuthStore()
     const templatesStore = useTemplatesStore()
     return {
-      user : computed(() => authStore.user),
-      templates : computed(() => templatesStore.content),
-      templatesLoading : computed(() => templatesStore.loading),
-      industries : computed(() => templatesStore.industries),
-      types : computed(() => templatesStore.types)
+      user: computed(() => authStore.user),
+      industries: computed(() => templatesStore.industries),
+      types: computed(() => templatesStore.types)
     }
   },
 
@@ -127,29 +126,25 @@ export default {
 
   watch: {},
 
-  mounted () {
-    loadTemplates(this.onlyMy)
-  },
-
   computed: {
-    industriesOptions () {
-      return [{ name: 'All Industries', value: 'all' }].concat(Object.values(this.industries).map((industry) => {
+    industriesOptions() {
+      return [{name: 'All Industries', value: 'all'}].concat(Object.values(this.industries).map((industry) => {
         return {
           name: industry.name,
           value: industry.slug
         }
       }))
     },
-    typesOptions () {
-      return [{ name: 'All Types', value: 'all' }].concat(Object.values(this.types).map((type) => {
+    typesOptions() {
+      return [{name: 'All Types', value: 'all'}].concat(Object.values(this.types).map((type) => {
         return {
           name: type.name,
           value: type.slug
         }
       }))
     },
-    enrichedTemplates () {
-      let enrichedTemplates = (this.onlyMy && this.user) ? this.templates.filter((item) => { return item.creator_id === this.user.id}) : this.templates
+    enrichedTemplates() {
+      let enrichedTemplates = this.templates
 
       // Filter by Selected Type
       if (this.selectedType && this.selectedType !== 'all') {
@@ -184,7 +179,5 @@ export default {
       })
     }
   },
-
-  methods: {}
 }
 </script>