From 82d7be323504d3b693aa300a65fac72b03d10006 Mon Sep 17 00:00:00 2001
From: formsdev <136701234+formsdev@users.noreply.github.com>
Date: Fri, 13 Oct 2023 15:41:03 +0530
Subject: [PATCH] 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>
---
 app/Http/Controllers/TemplateController.php   |  20 ++-
 .../Templates/FormTemplateRequest.php         |   1 +
 app/Models/Template.php                       |  10 ++
 app/Models/User.php                           |   6 +
 app/Policies/TemplatePolicy.php               |   6 +-
 ..._21_092812_add_creator_id_to_templates.php |  32 ++++
 resources/js/components/Navbar.vue            |   9 ++
 .../templates/FormTemplateModal.vue           |  16 +-
 .../components/pages/forms/show/ExtraMenu.vue |   6 +-
 .../pages/pricing/CheckoutDetailsModal.vue    |  13 +-
 .../pages/templates/TemplatesList.vue         | 141 ++++++++++++++++++
 resources/js/pages/templates/my_templates.vue |  44 ++++++
 resources/js/pages/templates/show.vue         |  20 ++-
 resources/js/pages/templates/templates.vue    | 127 +---------------
 resources/js/router/routes.js                 |   1 +
 15 files changed, 307 insertions(+), 145 deletions(-)
 create mode 100644 database/migrations/2023_09_21_092812_add_creator_id_to_templates.php
 create mode 100644 resources/js/components/pages/templates/TemplatesList.vue
 create mode 100644 resources/js/pages/templates/my_templates.vue

diff --git a/app/Http/Controllers/TemplateController.php b/app/Http/Controllers/TemplateController.php
index 2f60c9b..474d0ad 100644
--- a/app/Http/Controllers/TemplateController.php
+++ b/app/Http/Controllers/TemplateController.php
@@ -7,6 +7,7 @@ use App\Http\Requests\Templates\FormTemplateRequest;
 use App\Http\Resources\FormTemplateResource;
 use App\Models\Template;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
 
 class TemplateController extends Controller
 {
@@ -16,12 +17,16 @@ class TemplateController extends Controller
         if ($request->offsetExists('limit') && $request->get('limit') > 0) {
             $limit = (int) $request->get('limit');
         }
-        return FormTemplateResource::collection(
-            Template::where('publicly_listed', true)
-                ->orderByDesc('created_at')
-                ->limit($limit)
-                ->get()
-        );
+
+        $templates = Template::where('publicly_listed', true)
+            ->when(Auth::check(), function ($query) {
+                $query->orWhere('creator_id', Auth::id());
+            })
+            ->orderByDesc('created_at')
+            ->limit($limit)
+            ->get();
+
+        return FormTemplateResource::collection($templates);
     }
 
     public function create(FormTemplateRequest $request)
@@ -34,7 +39,8 @@ class TemplateController extends Controller
 
         return $this->success([
             'message' => 'Template was created.',
-            'template_id' => $template->id
+            'template_id' => $template->id,
+            'data' => new FormTemplateResource($template)
         ]);
     }
 
diff --git a/app/Http/Requests/Templates/FormTemplateRequest.php b/app/Http/Requests/Templates/FormTemplateRequest.php
index 60436fe..048377c 100644
--- a/app/Http/Requests/Templates/FormTemplateRequest.php
+++ b/app/Http/Requests/Templates/FormTemplateRequest.php
@@ -77,6 +77,7 @@ class FormTemplateRequest extends FormRequest
         }
 
         return new Template([
+            'creator_id' => $this->user()?->id ?? null,
             'publicly_listed' => $this->publicly_listed,
             'name' => $this->name,
             'slug' => $this->slug,
diff --git a/app/Models/Template.php b/app/Models/Template.php
index 22d5c5f..59c42e3 100644
--- a/app/Models/Template.php
+++ b/app/Models/Template.php
@@ -14,6 +14,7 @@ class Template extends Model
     use HasFactory, HasSlug;
 
     protected $fillable = [
+        'creator_id',
         'name',
         'slug',
         'description',
@@ -41,6 +42,15 @@ class Template extends Model
         'publicly_listed' => false,
     ];
 
+    protected $appends = [
+        'share_url',
+    ];
+
+    public function getShareUrlAttribute()
+    {
+        return url('/form-templates/'.$this->slug);
+    }
+
     public function setDescriptionAttribute($value)
     {
         // Strip out unwanted html
diff --git a/app/Models/User.php b/app/Models/User.php
index 1161aa2..538136b 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -4,6 +4,7 @@ namespace App\Models;
 
 use App\Http\Controllers\SubscriptionController;
 use App\Models\Forms\Form;
+use App\Models\Template;
 use App\Notifications\ResetPassword;
 use App\Notifications\VerifyEmail;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
@@ -140,6 +141,11 @@ class User extends Authenticatable implements JWTSubject
         return $this->hasMany(Form::class,'creator_id');
     }
 
+    public function formTemplates()
+    {
+        return $this->hasMany(Template::class, 'creator_id');
+    }
+
     /**
      * =================================
      *  Oauth Related
diff --git a/app/Policies/TemplatePolicy.php b/app/Policies/TemplatePolicy.php
index 9a46201..4ad9a94 100644
--- a/app/Policies/TemplatePolicy.php
+++ b/app/Policies/TemplatePolicy.php
@@ -18,7 +18,7 @@ class TemplatePolicy
      */
     public function create(User $user)
     {
-        return $user->admin || $user->template_editor;
+        return $user !== null;
     }
 
     /**
@@ -30,7 +30,7 @@ class TemplatePolicy
      */
     public function update(User $user, Template $template)
     {
-        return $user->admin || $user->template_editor;
+        return $user->admin || $user->template_editor || $template->creator_id === $user->id;
     }
 
     /**
@@ -42,6 +42,6 @@ class TemplatePolicy
      */
     public function delete(User $user, Template $template)
     {
-        return $user->admin || $user->template_editor;
+        return $user->admin || $user->template_editor || $template->creator_id === $user->id;
     }
 }
diff --git a/database/migrations/2023_09_21_092812_add_creator_id_to_templates.php b/database/migrations/2023_09_21_092812_add_creator_id_to_templates.php
new file mode 100644
index 0000000..b35a1b1
--- /dev/null
+++ b/database/migrations/2023_09_21_092812_add_creator_id_to_templates.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('templates', function (Blueprint $table) {
+            $table->foreignIdFor(\App\Models\User::class,'creator_id')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('templates', function (Blueprint $table) {
+            $table->dropColumn('creator_id');
+        });
+    }
+};
diff --git a/resources/js/components/Navbar.vue b/resources/js/components/Navbar.vue
index 5f766ee..a8dadb7 100644
--- a/resources/js/components/Navbar.vue
+++ b/resources/js/components/Navbar.vue
@@ -68,6 +68,15 @@
                     My Forms
                   </router-link>
 
+                  <router-link v-if="userOnboarded" :to="{ name: '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">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+                    </svg>
+                    My Templates
+                  </router-link>
+
                   <router-link :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"
                   >
diff --git a/resources/js/components/open/forms/components/templates/FormTemplateModal.vue b/resources/js/components/open/forms/components/templates/FormTemplateModal.vue
index 0040818..0ce7f8a 100644
--- a/resources/js/components/open/forms/components/templates/FormTemplateModal.vue
+++ b/resources/js/components/open/forms/components/templates/FormTemplateModal.vue
@@ -18,13 +18,13 @@
     </template>
     <div class="p-4">
       <p v-if="!template">
-        New template will be create from your form <span class="font-semibold">{{ form.title }}</span>.
+        New template will be create from your form: <span class="font-semibold">{{ form.title }}</span>.
       </p>
 
       <form v-if="templateForm" class="mt-6" @submit.prevent="onSubmit" @keydown="templateForm.onKeydown($event)">
         <div class="-m-6">
           <div class="border-t py-4 px-6">
-            <toggle-switch-input name="publicly_listed" :form="templateForm" class="mt-4" label="Publicly Listed?" />
+            <toggle-switch-input v-if="user && (user.admin || user.template_editor)" name="publicly_listed" :form="templateForm" class="mt-4" label="Publicly Listed?" />
             <text-input name="name" :form="templateForm" class="mt-4" label="Title" :required="true" />
             <text-input name="slug" :form="templateForm" class="mt-4" label="Slug" :required="true" />
             <text-area-input name="short_description" :form="templateForm" class="mt-4" label="Short Description"
@@ -74,7 +74,7 @@
 <script>
 import Form from 'vform'
 import store from '~/store'
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import axios from 'axios'
 import QuestionsEditor from './QuestionsEditor.vue'
 
@@ -93,7 +93,7 @@ export default {
 
   mounted () {
     this.templateForm = new Form(this.template ?? {
-      publicly_listed: true,
+      publicly_listed: false,
       name: '',
       slug: '',
       short_description: '',
@@ -113,6 +113,9 @@ export default {
       industries: state => state['open/templates'].industries,
       types: state => state['open/templates'].types
     }),
+    ...mapGetters({
+      user: 'auth/user'
+    }),
     typesOptions () {
       return Object.values(this.types).map((type) => {
         return {
@@ -153,6 +156,7 @@ export default {
         if (response.data.message) {
           this.alertSuccess(response.data.message)
         }
+        this.$store.commit('open/templates/addOrUpdate', response.data.data)
         this.$emit('close')
       })
     },
@@ -162,7 +166,7 @@ export default {
         if (response.data.message) {
           this.alertSuccess(response.data.message)
         }
-        this.$store.dispatch('open/templates/addOrUpdate', response.data.data)
+        this.$store.commit('open/templates/addOrUpdate', response.data.data)
         this.$emit('close')
       })
     },
@@ -173,7 +177,7 @@ export default {
           this.alertSuccess(response.data.message)
         }
         this.$router.push({ name: 'templates' })
-        this.$store.dispatch('open/templates/remove', response.data.data)
+        this.$store.commit('open/templates/remove', this.template)
         this.$emit('close')
       })
     }
diff --git a/resources/js/components/pages/forms/show/ExtraMenu.vue b/resources/js/components/pages/forms/show/ExtraMenu.vue
index 4c56933..d59a55a 100644
--- a/resources/js/components/pages/forms/show/ExtraMenu.vue
+++ b/resources/js/components/pages/forms/show/ExtraMenu.vue
@@ -20,7 +20,7 @@
           </svg>
         </v-button>
       </template>
-      <router-link v-if="isMainPage" :to="{name:'forms.show_public', params: {slug: form.slug}}" target="_blank"
+      <router-link v-if="isMainPage && user" :to="{name:'forms.show_public', params: {slug: form.slug}}" target="_blank"
                     class="block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
                     v-track.view_form_click="{form_id:form.id, form_slug:form.slug}"
         >
@@ -67,7 +67,7 @@
         </svg>
         Duplicate form
       </a>
-      <a href="#" v-if="user && user.template_editor"
+      <a href="#" v-if="!isMainPage" v-track.create_template_click="{form_id:form.id, form_slug:form.slug}"
          class="block block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
          @click.prevent="showFormTemplateModal=true"
       >
@@ -117,7 +117,7 @@
       </div>
     </modal>
 
-    <form-template-modal :form="form" :show="showFormTemplateModal" @close="showFormTemplateModal=false"/>
+    <form-template-modal v-if="!isMainPage && user" :form="form" :show="showFormTemplateModal" @close="showFormTemplateModal=false"/>
   </div>
 </template>
 
diff --git a/resources/js/components/pages/pricing/CheckoutDetailsModal.vue b/resources/js/components/pages/pricing/CheckoutDetailsModal.vue
index f2645be..251bccb 100644
--- a/resources/js/components/pages/pricing/CheckoutDetailsModal.vue
+++ b/resources/js/components/pages/pricing/CheckoutDetailsModal.vue
@@ -44,7 +44,7 @@ export default {
 
   watch: {
     user () {
-      this.form.email = this.user.email
+      this.updateUser()
     },
     show () {
       // Wait for modal to open and focus on first field
@@ -59,13 +59,16 @@ export default {
   },
 
   mounted () {
-    if (this.user) {
-      this.form.name = this.user.name
-      this.form.email = this.user.email
-    }
+    this.updateUser()
   },
 
   methods: {
+    updateUser() {
+      if (this.user) {
+        this.form.name = this.user.name
+        this.form.email = this.user.email
+      }
+    },
     saveDetails () {
       if (this.form.busy) return
       this.form.put('api/subscription/update-customer-details').then(() => {
diff --git a/resources/js/components/pages/templates/TemplatesList.vue b/resources/js/components/pages/templates/TemplatesList.vue
new file mode 100644
index 0000000..f3e0258
--- /dev/null
+++ b/resources/js/components/pages/templates/TemplatesList.vue
@@ -0,0 +1,141 @@
+<template>
+  <section class="bg-white py-12">
+    <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>
+</template>
+
+<script>
+import store from '~/store'
+import { mapGetters, mapState } from 'vuex'
+import Form from 'vform'
+import Fuse from 'fuse.js'
+import SingleTemplate from './SingleTemplate.vue'
+
+const loadTemplates = function () {
+  store.commit('open/templates/startLoading')
+  store.dispatch('open/templates/loadIfEmpty').then(() => {
+    store.commit('open/templates/stopLoading')
+  })
+}
+
+export default {
+  name: 'TemplatesList',
+  components: { SingleTemplate },
+
+  props: {
+    onlyMy: {
+      type: Boolean,
+      required: false
+    }
+  },
+
+  data: () => ({
+    selectedType: 'all',
+    selectedIndustry: 'all',
+    searchTemplate: new Form({
+      search: ''
+    })
+  }),
+
+  watch: {},
+
+  mounted () {
+    loadTemplates()
+  },
+
+  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
+    }),
+    ...mapGetters({
+      user: 'auth/user'
+    }),
+    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.onlyMy && this.user) ? this.templates.filter((item) => { return item.creator_id === this.user.id}) : 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
+      })
+    }
+  },
+
+  methods: {}
+}
+</script>
diff --git a/resources/js/pages/templates/my_templates.vue b/resources/js/pages/templates/my_templates.vue
new file mode 100644
index 0000000..78d4a25
--- /dev/null
+++ b/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>
diff --git a/resources/js/pages/templates/show.vue b/resources/js/pages/templates/show.vue
index f0fa95c..204c79a 100644
--- a/resources/js/pages/templates/show.vue
+++ b/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'
     },
diff --git a/resources/js/pages/templates/templates.vue b/resources/js/pages/templates/templates.vue
index 7894de5..095a545 100644
--- a/resources/js/pages/templates/templates.vue
+++ b/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: {}
 }
diff --git a/resources/js/router/routes.js b/resources/js/router/routes.js
index fa7f2ce..281ff78 100644
--- a/resources/js/router/routes.js
+++ b/resources/js/router/routes.js
@@ -67,6 +67,7 @@ export default [
   { path: '/forms/:slug', name: 'forms.show_public', component: page('forms/show-public.vue') },
 
   // Templates
+  { path: '/my-templates', name: 'my_templates', component: page('templates/my_templates.vue') },
   { path: '/form-templates', name: 'templates', component: page('templates/templates.vue') },
   { path: '/form-templates/:slug', name: 'templates.show', component: page('templates/show.vue') },