Allow users to create private form templates (#210)

* Allow users to create private form templates

* Improve back-end efficiency

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

resources/js/pages/templates/my_templates.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="flex flex-col min-h-full border-t">
+    <section class="py-12 sm:py-16 bg-gray-50 border-b border-gray-200">
+      <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+        <div class="text-center max-w-xl mx-auto">
+          <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900">
+            My Form Templates
+          </h1>
+          <p class="text-gray-600 mt-4 text-lg font-normal">
+            Share your best form as templates so that others can re-use them!
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <templates-list :only-my="true" />
+  </div>
+</template>
+
+<script>
+import TemplatesList from '../../components/pages/templates/TemplatesList.vue'
+import SeoMeta from '../../mixins/seo-meta.js'
+
+export default {
+  components: { TemplatesList },
+  mixins: [SeoMeta],
+  middleware: 'auth',
+
+  props: {
+    metaTitle: { type: String, default: 'My Templates' },
+    metaDescription: { type: String, default: 'Our collection of beautiful templates to create your own forms!' }
+  },
+
+  data () {
+    return {}
+  },
+
+  mounted () {},
+
+  computed: {},
+
+  methods: {}
+}
+</script>

resources/js/pages/templates/show.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col min-h-full">
     <breadcrumb :path="breadcrumbs">
       <template #left>
-        <div v-if="user && (user.admin || user.template_editor)" class="ml-5">
+        <div v-if="canEditTemplate" class="ml-5">
           <v-button color="gray" size="small" @click.prevent="showFormTemplateModal=true">
             Edit Template
           </v-button>
@@ -12,6 +12,11 @@
         </div>
       </template>
       <template #right>
+        <v-button v-if="canEditTemplate" v-track.copy_template_button_clicked size="small" color="white" class="mr-5"
+                  @click.prevent="copyTemplateUrl"
+        >
+          Copy Template URL
+        </v-button>
         <v-button v-track.use_template_button_clicked size="small" class="mr-5"
                   :to="{path: createFormWithTemplateUrl}"
         >
@@ -228,6 +233,16 @@ export default {
     cleanQuotes (str) {
       // Remove starting and ending quotes if any
       return (str) ? str.replace(/^"/, '').replace(/"$/, '') : ''
+    },
+    copyTemplateUrl(){
+      const str = this.template.share_url
+      const el = document.createElement('textarea')
+      el.value = str
+      document.body.appendChild(el)
+      el.select()
+      document.execCommand('copy')
+      document.body.removeChild(el)
+      this.alertSuccess('Copied!')
     }
   },
 
@@ -251,6 +266,9 @@ export default {
     form () {
       return this.template ? new Form(this.template.structure) : null
     },
+    canEditTemplate () {
+      return this.user && this.template && (this.user.admin || this.user.template_editor || this.template.creator_id === this.user.id)
+    },
     metaTitle () {
       return this.template ? this.template.name : 'Form Template'
     },

resources/js/pages/templates/templates.vue

@@ -13,147 +13,34 @@
       </div>
     </section>
 
-    <section class="bg-white py-12 sm:py-16">
-      <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
-        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 sm:gap-6 relative z-20">
-          <div class="flex items-center gap-4">
-            <div class="flex-1 sm:flex-none">
-              <select-input v-model="selectedType" name="type"
-                            :options="typesOptions" class="w-full sm:w-auto md:w-56"
-              />
-            </div>
-            <div class="flex-1 sm:flex-none">
-              <select-input v-model="selectedIndustry" name="industry"
-                            :options="industriesOptions" class="w-full sm:w-auto md:w-56"
-              />
-            </div>
-          </div>
-          <div class="flex-1 w-full md:max-w-xs">
-            <text-input 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" />
-        </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" />
-          </div>
-        </div>
-      </div>
-    </section>
+    <templates-list />
 
     <open-form-footer class="mt-8 border-t"/>
   </div>
 </template>
 
 <script>
-import store from '~/store'
-import { mapGetters, mapState } from 'vuex'
-import Form from 'vform'
-import Fuse from 'fuse.js'
-import SeoMeta from '../../mixins/seo-meta.js'
 import OpenFormFooter from '../../components/pages/OpenFormFooter.vue'
-import SingleTemplate from '../../components/pages/templates/SingleTemplate.vue'
-
-const loadTemplates = function () {
-  store.commit('open/templates/startLoading')
-  store.dispatch('open/templates/loadIfEmpty').then(() => {
-    store.commit('open/templates/stopLoading')
-  })
-}
+import TemplatesList from '../../components/pages/templates/TemplatesList.vue'
+import SeoMeta from '../../mixins/seo-meta.js'
 
 export default {
 
-  components: { OpenFormFooter, SingleTemplate },
+  components: { OpenFormFooter, TemplatesList },
   mixins: [SeoMeta],
 
-  beforeRouteEnter (to, from, next) {
-    loadTemplates()
-    next()
-  },
-
   props: {
     metaTitle: { type: String, default: 'Templates' },
     metaDescription: { type: String, default: 'Our collection of beautiful templates to create your own forms!' }
   },
 
   data () {
-    return {
-      selectedType: 'all',
-      selectedIndustry: 'all',
-      searchTemplate: new Form({
-        search: ''
-      })
-    }
+    return {}
   },
 
-  mounted () {
-  },
+  mounted () {},
 
-  computed: {
-    ...mapState({
-      templates: state => state['open/templates'].content,
-      templatesLoading: state => state['open/templates'].loading,
-      industries: state => state['open/templates'].industries,
-      types: state => state['open/templates'].types
-    }),
-    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) => {
-        return {
-          name: type.name,
-          value: type.slug
-        }
-      }))
-    },
-    enrichedTemplates () {
-      let enrichedTemplates = this.templates
-
-      // Filter by Selected Type
-      if (this.selectedType && this.selectedType !== 'all') {
-        enrichedTemplates = enrichedTemplates.filter((item) => {
-          return (item.types && item.types.length > 0) ? item.types.includes(this.selectedType) : false
-        })
-      }
-
-      // Filter by Selected Industry
-      if (this.selectedIndustry && this.selectedIndustry !== 'all') {
-        enrichedTemplates = enrichedTemplates.filter((item) => {
-          return (item.industries && item.industries.length > 0) ? item.industries.includes(this.selectedIndustry) : false
-        })
-      }
-
-      if (this.searchTemplate.search === '' || this.searchTemplate.search === null) {
-        return enrichedTemplates
-      }
-
-      // Fuze search
-      const fuzeOptions = {
-        keys: [
-          'name',
-          'slug',
-          'description',
-          'short_description'
-        ]
-      }
-      const fuse = new Fuse(enrichedTemplates, fuzeOptions)
-      return fuse.search(this.searchTemplate.search).map((res) => {
-        return res.item
-      })
-    }
-  },
+  computed: {},
 
   methods: {}
 }