Industry & Types template pages (#226)

* Industry & Types template pages

* fix sitemap for templates

app/Http/Controllers/SitemapController.php

@@ -21,7 +21,7 @@ class SitemapController extends Controller
         ['/login', 0.4],
         ['/register', 0.4],
         ['/password/reset', 0.3],
-        ['/templates', 0.9],
+        ['/form-templates', 0.9],
     ];
 
     public function getSitemap(Request $request)
@@ -31,6 +31,8 @@ class SitemapController extends Controller
             $sitemap->add($this->createUrl($url[0], $url[1]));
         }
         $this->addTemplatesUrls($sitemap);
+        $this->addTemplatesTypesUrls($sitemap);
+        $this->addTemplatesIndustriesUrls($sitemap);
 
         return $sitemap->toResponse($request);
     }
@@ -48,4 +50,20 @@ class SitemapController extends Controller
             }
         });
     }
+
+    private function addTemplatesTypesUrls(Sitemap $sitemap)
+    {
+        $types = json_decode(file_get_contents(resource_path('data/forms/templates/types.json')), true);
+        foreach ($types as $type) {
+            $sitemap->add($this->createUrl('/form-templates/types/' . $type['slug'], 0.7));
+        }
+    }
+
+    private function addTemplatesIndustriesUrls(Sitemap $sitemap)
+    {
+        $industries = json_decode(file_get_contents(resource_path('data/forms/templates/industries.json')), true);
+        foreach ($industries as $industry) {
+            $sitemap->add($this->createUrl('/form-templates/industries/' . $industry['slug'], 0.7));
+        }
+    }
 }

app/Http/Controllers/TemplateController.php

@@ -18,12 +18,20 @@ class TemplateController extends Controller
             $limit = (int) $request->get('limit');
         }
 
-        $templates = Template::where('publicly_listed', true)
+        $onlyMy = false;
-            ->when(Auth::check(), function ($query) {
+        if ($request->offsetExists('onlymy') && $request->get('onlymy')) {
+            $onlyMy = true;
+        }
+
+        $templates = Template::limit($limit)
+            ->when(Auth::check() && !$onlyMy, function ($query) {
+                $query->where('publicly_listed', true);
                 $query->orWhere('creator_id', Auth::id());
             })
+            ->when(Auth::check() && $onlyMy, function ($query) {
+                $query->where('creator_id', Auth::id());
+            })
             ->orderByDesc('created_at')
-            ->limit($limit)
             ->get();
 
         return FormTemplateResource::collection($templates);

app/Service/SeoMetaResolver.php

@@ -36,6 +36,8 @@ class SeoMetaResolver
         'integrations' => '/integrations',
         'templates' => '/form-templates',
         'templates_show' => '/form-templates/{slug}',
+        'templates_types_show' => '/form-templates/types/{slug}',
+        'templates_industries_show' => '/form-templates/industries/{slug}',
     ];
 
     /**
@@ -192,4 +194,26 @@ class SeoMetaResolver
             'image' => $template->image_url
         ];
     }
+
+    private function getTemplatesTypesShowMeta(): array
+    {
+        $types = json_decode(file_get_contents(resource_path('data/forms/templates/types.json')), true);
+        $type = $types[array_search($this->patternData['slug'], array_column($types, 'slug'))];
+
+        return [
+            'title' => $type['meta_title'],
+            'description' => Str::of($type['meta_description'])->limit(140),
+        ];
+    }
+
+    private function getTemplatesIndustriesShowMeta(): array
+    {
+        $industries = json_decode(file_get_contents(resource_path('data/forms/templates/industries.json')), true);
+        $industry = $industries[array_search($this->patternData['slug'], array_column($industries, 'slug'))];
+
+        return [
+            'title' => $industry['meta_title'],
+            'description' => Str::of($industry['meta_description'])->limit(140),
+        ];
+    }
 }

resources/js/components/pages/templates/TemplatesList.vue

@@ -1,37 +1,81 @@
 <template>
-  <section class="bg-white py-12">
+  <div>
-    <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+    <section class="bg-white py-12">
-      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 sm:gap-6 relative z-20">
+      <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
-        <div class="flex items-center gap-4">
+        <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-1 sm:flex-none">
+          <div class="flex items-center gap-4">
-            <select-input v-model="selectedType" name="type"
+            <div class="flex-1 sm:flex-none">
-                          :options="typesOptions" class="w-full sm:w-auto md:w-56"
+              <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 sm:flex-none">
+          <div class="flex-1 w-full md:max-w-xs">
-            <select-input v-model="selectedIndustry" name="industry"
+            <text-input name="search" :form="searchTemplate" placeholder="Search..." />
-                          :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">
+        <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>
+        </div>
-      <p v-else-if="enrichedTemplates.length === 0" class="text-center mt-4">
+        <p v-else-if="enrichedTemplates.length === 0" class="text-center mt-4">
-        No templates found.
+          No templates found.
-      </p>
+        </p>
-      <div v-else class="relative z-10">
+        <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">
+          <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" :slug="template.slug" />
+          </div>
         </div>
       </div>
-    </div>
+    </section>
-  </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.show'}" 
+                        :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>
+
+      <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.show'}" 
+                        :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>
+    </template>
+  </div>
 </template>
 
 <script>
@@ -41,11 +85,12 @@ import Form from 'vform'
 import Fuse from 'fuse.js'
 import SingleTemplate from './SingleTemplate.vue'
 
-const loadTemplates = function () {
+const loadTemplates = function (onlyMy) {
-  store.commit('open/templates/startLoading')
+  if(onlyMy){
-  store.dispatch('open/templates/loadIfEmpty').then(() => {
+    store.dispatch('open/templates/loadAll', {'onlymy':true})
-    store.commit('open/templates/stopLoading')
+  } else {
-  })
+    store.dispatch('open/templates/loadIfEmpty')
+  }
 }
 
 export default {
@@ -70,7 +115,7 @@ export default {
   watch: {},
 
   mounted () {
-    loadTemplates()
+    loadTemplates(this.onlyMy)
   },
 
   computed: {

resources/js/components/pages/welcome/TemplatesSlider.vue

@@ -54,7 +54,7 @@ export default {
   },
 
   mounted() {
-    store.dispatch('open/templates/loadWithLimit', 10)
+    store.dispatch('open/templates/loadAll', {'limit':10})
   },
 
   methods: {

resources/js/pages/templates/industries-show.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="flex flex-col min-h-full">
+    <breadcrumb :path="breadcrumbs" />
+
+    <div v-if="templatesLoading" class="text-center my-4">
+      <loader class="h-6 w-6 text-nt-blue mx-auto" />
+    </div>
+    <p v-else-if="industry === null || !industry" class="text-center my-4">
+      We could not find this industry.
+    </p>
+    <template v-else>
+      <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 mx-auto">
+            <div class="font-semibold sm:w-full text-blue-500 mb-3">
+              {{ industry.name }}
+            </div>
+            <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900">
+              {{ industry.meta_title }}
+            </h1>
+            <p class="max-w-xl mx-auto text-gray-600 mt-4 text-lg font-normal">
+              {{ industry.meta_description }}
+            </p>
+          </div>
+        </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>
+            <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>
+
+      <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">
+          <p class="text-gray-600 font-normal">
+            {{ industry.description }}
+          </p>
+        </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">
+              Other Industries
+            </h4>
+
+            <v-button :to="{name:'templates'}" color="white" size="small" :arrow="true">
+              View All Templates
+            </v-button>
+          </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 otherIndustries" :key="row.slug" 
+                        :to="{params:{slug:row.slug}, name:'templates.industries.show'}" 
+                        :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>
+      
+    </template>
+
+    <open-form-footer class="mt-8 border-t"/>
+  </div>
+</template>
+
+<script>
+import store from '~/store'
+import Form from 'vform'
+import Fuse from 'fuse.js'
+import { mapGetters, mapState } from 'vuex'
+import SeoMeta from '../../mixins/seo-meta.js'
+import OpenFormFooter from '../../components/pages/OpenFormFooter.vue'
+import Breadcrumb from '../../components/common/Breadcrumb.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')
+  })
+}
+
+export default {
+  components: { Breadcrumb, OpenFormFooter, SingleTemplate },
+  mixins: [SeoMeta],
+
+  beforeRouteEnter (to, from, next) {
+    loadTemplates()
+    next()
+  },
+
+  data () {
+    return {
+      selectedType: 'all',
+      searchTemplate: new Form({
+        search: ''
+      })
+    }
+  },
+
+  mounted () {},
+
+  computed: {
+    ...mapGetters({
+      authenticated: 'auth/check',
+      user: 'auth/user'
+    }),
+    ...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
+    }),
+    breadcrumbs () {
+      if (!this.industry) {
+        return [{ route: { name: 'templates' }, label: 'Templates' }]
+      }
+      return [{ route: { name: 'templates' }, label: 'Templates' }, { label: this.industry.name }]
+    },
+    industry () {
+      return Object.values(this.industries).find((industry) => {
+        return industry.slug === this.$route.params.slug
+      })
+    },
+    typesOptions () {
+      return [{ name: 'All Types', value: 'all' }].concat(Object.values(this.types).map((type) => {
+        return {
+          name: type.name,
+          value: type.slug
+        }
+      }))
+    },
+    otherIndustries() {
+      return Object.values(this.industries).filter((industry) => {
+        return industry.slug !== this.$route.params.slug 
+      })
+    },
+    enrichedTemplates () {
+      let enrichedTemplates = this.templates
+
+      // Filter by current Industry only
+      enrichedTemplates = enrichedTemplates.filter((item) => {
+        return (item.industries && item.industries.length > 0) ? item.industries.includes(this.$route.params.slug) : false
+      })
+
+      // 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
+        })
+      }
+
+      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
+      })
+    },
+    metaTitle () {
+      return this.industry ? this.industry.meta_title : 'Form Template Industry'
+    },
+    metaDescription () {
+      if (!this.industry) return null
+      return this.industry.meta_description.substring(0, 140)
+    }
+  },
+
+  methods: {}
+}
+</script>
+
+<style lang='scss'>
+.nf-text {
+  @apply space-y-4;
+  h2 {
+    @apply text-sm font-normal tracking-widest text-gray-500 uppercase;
+  }
+
+  p {
+    @apply font-normal leading-7 text-gray-900 dark:text-gray-100;
+  }
+
+  ol {
+    @apply list-decimal list-inside;
+  }
+
+  ul {
+    @apply list-disc list-inside;
+  }
+}
+</style>

resources/js/pages/templates/types-show.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="flex flex-col min-h-full">
+    <breadcrumb :path="breadcrumbs" />
+
+    <div v-if="templatesLoading" class="text-center my-4">
+      <loader class="h-6 w-6 text-nt-blue mx-auto" />
+    </div>
+    <p v-else-if="type === null || !type" class="text-center my-4">
+      We could not find this type.
+    </p>
+    <template v-else>
+      <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 mx-auto">
+            <div class="font-semibold sm:w-full text-blue-500 mb-3">
+              {{ type.name }}
+            </div>
+            <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900">
+              {{ type.meta_title }}
+            </h1>
+            <p class="max-w-xl mx-auto text-gray-600 mt-4 text-lg font-normal">
+              {{ type.meta_description }}
+            </p>
+          </div>
+        </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="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>
+
+      <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">
+          <p class="text-gray-600 font-normal">
+            {{ type.description }}
+          </p>
+        </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">
+              Other Types
+            </h4>
+
+            <v-button :to="{name:'templates'}" color="white" size="small" :arrow="true">
+              View All Templates
+            </v-button>
+          </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 otherTypes" :key="row.slug" 
+                        :to="{params:{slug:row.slug}, name:'templates.types.show'}" 
+                        :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>
+      
+    </template>
+
+    <open-form-footer class="mt-8 border-t"/>
+  </div>
+</template>
+
+<script>
+import store from '~/store'
+import Form from 'vform'
+import Fuse from 'fuse.js'
+import { mapGetters, mapState } from 'vuex'
+import SeoMeta from '../../mixins/seo-meta.js'
+import OpenFormFooter from '../../components/pages/OpenFormFooter.vue'
+import Breadcrumb from '../../components/common/Breadcrumb.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')
+  })
+}
+
+export default {
+  components: { Breadcrumb, OpenFormFooter, SingleTemplate },
+  mixins: [SeoMeta],
+
+  beforeRouteEnter (to, from, next) {
+    loadTemplates()
+    next()
+  },
+
+  data () {
+    return {
+      selectedIndustry: 'all',
+      searchTemplate: new Form({
+        search: ''
+      })
+    }
+  },
+
+  mounted () {},
+
+  computed: {
+    ...mapGetters({
+      authenticated: 'auth/check',
+      user: 'auth/user'
+    }),
+    ...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
+    }),
+    breadcrumbs () {
+      if (!this.type) {
+        return [{ route: { name: 'templates' }, label: 'Templates' }]
+      }
+      return [{ route: { name: 'templates' }, label: 'Templates' }, { label: this.type.name }]
+    },
+    type () {
+      return Object.values(this.types).find((type) => {
+        return type.slug === this.$route.params.slug
+      })
+    },
+    industriesOptions () {
+      return [{ name: 'All Industries', value: 'all' }].concat(Object.values(this.industries).map((industry) => {
+        return {
+          name: industry.name,
+          value: industry.slug
+        }
+      }))
+    },
+    otherTypes() {
+      return Object.values(this.types).filter((type) => {
+        return type.slug !== this.$route.params.slug 
+      })
+    },
+    enrichedTemplates () {
+      let enrichedTemplates = this.templates
+
+      // Filter by current Type only
+      enrichedTemplates = enrichedTemplates.filter((item) => {
+        return (item.types && item.types.length > 0) ? item.types.includes(this.$route.params.slug) : 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
+      })
+    },
+    metaTitle () {
+      return this.type ? this.type.meta_title : 'Form Template Type'
+    },
+    metaDescription () {
+      if (!this.type) return null
+      return this.type.meta_description.substring(0, 140)
+    }
+  },
+
+  methods: {}
+}
+</script>
+
+<style lang='scss'>
+.nf-text {
+  @apply space-y-4;
+  h2 {
+    @apply text-sm font-normal tracking-widest text-gray-500 uppercase;
+  }
+
+  p {
+    @apply font-normal leading-7 text-gray-900 dark:text-gray-100;
+  }
+
+  ol {
+    @apply list-decimal list-inside;
+  }
+
+  ul {
+    @apply list-disc list-inside;
+  }
+}
+</style>
+

resources/js/router/routes.js

@@ -70,6 +70,8 @@ export default [
   { 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') },
+  { path: '/form-templates/types/:slug', name: 'templates.types.show', component: page('templates/types-show.vue') },
+  { path: '/form-templates/industries/:slug', name: 'templates.industries.show', component: page('templates/industries-show.vue') },
 
   { path: '*', component: page('errors/404.vue') }
 ]

resources/js/store/modules/open/templates.js

@@ -91,12 +91,26 @@ export const actions = {
       context.commit('stopLoading')
     })
   },
-  loadAll (context) {
+  loadAll (context, options=null) {
     context.commit('startLoading')
     context.dispatch('loadTypesAndIndustries')
-    return axios.get(templatesEndpoint).then((response) => {
+
-      context.commit('append', response.data)
+    // Prepare with options
-      context.commit('setAllLoaded', true)
+    let queryStr = ''
+    if(options !== null){
+      for (const [key, value] of Object.entries(options)) {
+        queryStr += '&' + encodeURIComponent(key) + '=' + encodeURIComponent(value)
+      }
+      queryStr = queryStr.slice(1)
+    }
+    return axios.get((queryStr) ? templatesEndpoint + '?' + queryStr : templatesEndpoint).then((response) => {
+      if(options !== null){
+        context.commit('set', response.data)
+        context.commit('setAllLoaded', false)
+      } else {
+        context.commit('append', response.data)
+        context.commit('setAllLoaded', true)
+      }
       context.commit('stopLoading')
     }).catch((error) => {
       context.commit('stopLoading')
@@ -108,17 +122,5 @@ export const actions = {
     }
     context.commit('stopLoading')
     return Promise.resolve()
-  },
-  loadWithLimit (context, limit) {
-    context.commit('startLoading')
-    context.dispatch('loadTypesAndIndustries')
-
-    return axios.get(templatesEndpoint + '?limit=' + limit).then((response) => {
-      context.commit('set', response.data)
-      context.commit('setAllLoaded', false)
-      context.commit('stopLoading')
-    }).catch((error) => {
-      context.commit('stopLoading')
-    })
   }
 }