Templates pages migration (#275)

client/components/global/Navbar.vue

@@ -203,7 +203,7 @@ export default {
       return !this.appStore.navbarHidden
     },
     userOnboarded() {
-      return this.user && this.user.workspaces_count > 0
+      return this.user && this.user.has_forms === true
     },
     hasCrisp() {
       return this.config.crispWebsiteId

client/components/open/forms/components/templates/FormTemplateModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal :show="show" @close="$emit('close')">
+  <modal :show="show" @close="emit('close')">
     <template #icon>
       <svg class="w-10 h-10 text-blue" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
@@ -57,11 +57,11 @@
               </template>
             </v-button>
             <v-button v-if="template" color="red" class="mr-2"
-                      @click.prevent="alertConfirm('Do you really want to delete this template?', deleteFormTemplate)"
+                      @click.prevent="useAlert().confirm('Do you really want to delete this template?', deleteFormTemplate)"
             >
               Delete
             </v-button>
-            <v-button color="white" @click.prevent="$emit('close')">
+            <v-button color="white" @click.prevent="emit('close')">
               Close
             </v-button>
           </div>
@@ -71,118 +71,104 @@
   </modal>
 </template>
 
-<script>
-import { computed } from 'vue'
+<script setup>
+import { ref, defineProps, defineEmits, computed } from 'vue'
 import QuestionsEditor from './QuestionsEditor.vue'
 
-export default {
-  name: 'FormTemplateModal',
-  components: { QuestionsEditor },
-  props: {
-    show: { type: Boolean, required: true },
-    form: { type: Object, required: true },
-    template: { type: Object, required: false, default: () => {} }
-  },
+const props = defineProps({
+  show: { type: Boolean, required: true },
+  form: { type: Object, required: true },
+  template: { type: Object, required: false, default: () => {} }
+})
 
-  setup () {
-    const authStore = useAuthStore()
-    const templatesStore = useTemplatesStore()
+const authStore = useAuthStore()
+const templatesStore = useTemplatesStore()
+const router = useRouter()
+let user = computed(() => authStore.user)
+let templates = computed(() => [...templatesStore.content.values()])
+let industries = computed(() => [...templatesStore.industries.values()])
+let types = computed(() => [...templatesStore.types.values()])
+
+let templateForm = ref(null)
+const emit = defineEmits(['close'])
+
+onMounted(() => {
+  templateForm.value = useForm(props.template ?? {
+    publicly_listed: false,
+    name: '',
+    slug: '',
+    short_description: '',
+    description: '',
+    image_url: '',
+    types: null,
+    industries: null,
+    related_templates: null,
+    questions: []
+  })
+  loadAllTemplates(templatesStore)
+})
+
+let typesOptions = computed(() => {
+  return Object.values(types.value).map((type) => {
     return {
-      templatesStore,
-      user : computed(() => authStore.user),
-      templates : computed(() => templatesStore.content),
-      industries : computed(() => templatesStore.industries),
-      types : computed(() => templatesStore.types),
-      useAlert: useAlert()
+      name: type.name,
+      value: type.slug
     }
-  },
-
-  data: () => ({
-    templateForm: null
-  }),
-
-  mounted () {
-    this.templateForm = useForm(this.template ?? {
-      publicly_listed: false,
-      name: '',
-      slug: '',
-      short_description: '',
-      description: '',
-      image_url: '',
-      types: null,
-      industries: null,
-      related_templates: null,
-      questions: []
-    })
-    loadAllTemplates(this.templatesStore)
-  },
-
-  computed: {
-    typesOptions () {
-      return Object.values(this.types).map((type) => {
-        return {
-          name: type.name,
-          value: type.slug
-        }
-      })
-    },
-    industriesOptions () {
-      return Object.values(this.industries).map((industry) => {
-        return {
-          name: industry.name,
-          value: industry.slug
-        }
-      })
-    },
-    templatesOptions () {
-      return this.templates.map((template) => {
-        return {
-          name: template.name,
-          value: template.slug
-        }
-      })
+  })
+})
+let industriesOptions = computed(() => {
+  return Object.values(industries.value).map((industry) => {
+    return {
+      name: industry.name,
+      value: industry.slug
     }
-  },
-
-  methods: {
-    onSubmit () {
-      if (this.template) {
-        this.updateFormTemplate()
-      } else {
-        this.createFormTemplate()
-      }
-    },
-    async createFormTemplate () {
-      this.templateForm.form = this.form
-      await this.templateForm.post('/api/templates').then((response) => {
-        if (response.data.message) {
-          this.useAlert.success(response.data.message)
-        }
-        this.templatesStore.save(response.data.data)
-        this.$emit('close')
-      })
-    },
-    async updateFormTemplate () {
-      this.templateForm.form = this.form
-      await this.templateForm.put('/api/templates/' + this.template.id).then((response) => {
-        if (response.data.message) {
-          this.useAlert.success(response.data.message)
-        }
-        this.templatesStore.save(response.data.data)
-        this.$emit('close')
-      })
-    },
-    async deleteFormTemplate () {
-      if (!this.template) return
-      opnFetch('/templates/' + this.template.id, {method:'DELETE'}).then((data) => {
-        if (data.message) {
-          this.useAlert.success(data.message)
-        }
-        this.$router.push({ name: 'templates' })
-        this.templatesStore.remove(this.template)
-        this.$emit('close')
-      })
+  })
+})
+let templatesOptions = computed(() => {
+  return Object.values(templates.value).map((template) => {
+    return {
+      name: template.name,
+      value: template.slug
     }
+  })
+})
+
+const onSubmit = () => {
+  if (props.template) {
+    updateFormTemplate()
+  } else {
+    createFormTemplate()
   }
 }
+const createFormTemplate = async () => {
+  templateForm.value.form = props.form
+  await templateForm.value.post('/templates').then((data) => {
+    if (data.message) {
+      useAlert().success(data.message)
+    }
+    templatesStore.save(data.data)
+    emit('close')
+  })
+}
+const updateFormTemplate = async () => {
+  templateForm.value.form = props.form
+  await templateForm.value.put('/templates/' + props.template.id).then((data) => {
+    if (data.message) {
+      useAlert().success(data.message)
+    }
+    templatesStore.save(data.data)
+    emit('close')
+  })
+}
+const deleteFormTemplate = async () => {
+  if (!props.template) return
+  opnFetch('/templates/' + props.template.id, {method:'DELETE'}).then((data) => {
+    if (data.message) {
+      useAlert().success(data.message)
+    }
+    router.push({ name: 'templates' })
+    templatesStore.remove(props.template)
+    emit('close')
+  })
+}
 </script>

client/pages/templates/[slug].vue

@@ -6,9 +6,9 @@
           <v-button color="gray" size="small" @click.prevent="showFormTemplateModal=true">
             Edit Template
           </v-button>
-          <!--          <form-template-modal v-if="form" :form="form" :template="template" :show="showFormTemplateModal"-->
-          <!--                               @close="showFormTemplateModal=false"-->
-          <!--          />-->
+          <form-template-modal v-if="form" :form="form" :template="template" :show="showFormTemplateModal"
+                              @close="showFormTemplateModal=false"
+          />
         </div>
       </template>
       <template #right>
@@ -199,7 +199,8 @@ import {computed} from 'vue'
 import OpenCompleteForm from '../../components/open/forms/OpenCompleteForm.vue'
 import Breadcrumb from '~/components/global/Breadcrumb.vue'
 import SingleTemplate from '../../components/pages/templates/SingleTemplate.vue'
-import {fetchTemplate} from "~/stores/templates.js";
+import {fetchTemplate} from "~/stores/templates.js"
+import FormTemplateModal from '~/components/open/forms/components/templates/FormTemplateModal.vue'
 
 defineRouteRules({
   prerender: true
@@ -262,7 +263,8 @@ const copyTemplateUrl = () => {
 
 useOpnSeoMeta({
   title: () => {
-    return template ? template.value.name : 'Form Template'
+    if (!template || !template.value) return 'Form Template'
+    return template.value.name
   },
   description () {
     if (!template || !template.value) return null

client/pages/templates/industries/[slug].vue

@@ -23,7 +23,7 @@
       </section>
 
 
-      <templates-list :templates="templates" :filter-industries="false" :show-industrys="false">
+      <templates-list :templates="templates" :filter-industries="false" :show-industries="false">
         <template #before-lists>
           <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">

client/pages/templates/my-templates.vue

@@ -13,34 +13,28 @@
       </div>
     </section>
 
-<!--    <templates-list :only-my="true" />-->
+   <templates-list :templates="templates" :loading="loading" :show-types="false" :show-industries="false"/>
   </div>
 </template>
 
-<script>
-import TemplatesList from '../../components/pages/templates/TemplatesList.vue'
+<script setup>
+definePageMeta({
+  middleware: "auth"
+})
 
-export default {
-  components: { TemplatesList },
+useOpnSeoMeta({
+  title: 'My Templates',
+  description: 'Our collection of beautiful templates to create your own forms!'
+})
 
-  setup () {
-    definePageMeta({
-      middleware: "auth"
-    })
-    useOpnSeoMeta({
-      title: 'My Templates',
-      description: 'Our collection of beautiful templates to create your own forms!'
-    })
-  },
+let loading = ref(false)
+let templates = ref([])
 
-  data () {
-    return {}
-  },
-
-  mounted () {},
-
-  computed: {},
-
-  methods: {}
-}
+onMounted(() => {
+  loading.value = true
+  opnFetch('templates',{query: {onlymy: true}}).then((data) => {
+    loading.value = false
+    templates.value = data
+  })
+})
 </script>