Industry & Types template pages (#226)
* Industry & Types template pages * fix sitemap for templates
This commit is contained in:
parent
4614dc0f18
commit
2d0d4a65c2
|
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -18,12 +18,20 @@ class TemplateController extends Controller
|
|||
$limit = (int) $request->get('limit');
|
||||
}
|
||||
|
||||
$templates = Template::where('publicly_listed', true)
|
||||
->when(Auth::check(), function ($query) {
|
||||
$onlyMy = false;
|
||||
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);
|
||||
|
|
|
@ -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),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,37 +1,81 @@
|
|||
<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>
|
||||
<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 sm:flex-none">
|
||||
<select-input v-model="selectedIndustry" name="industry"
|
||||
:options="industriesOptions" class="w-full sm:w-auto md:w-56"
|
||||
/>
|
||||
<div class="flex-1 w-full md:max-w-xs">
|
||||
<text-input name="search" :form="searchTemplate" placeholder="Search..." />
|
||||
</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 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>
|
||||
</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 () {
|
||||
store.commit('open/templates/startLoading')
|
||||
store.dispatch('open/templates/loadIfEmpty').then(() => {
|
||||
store.commit('open/templates/stopLoading')
|
||||
})
|
||||
const loadTemplates = function (onlyMy) {
|
||||
if(onlyMy){
|
||||
store.dispatch('open/templates/loadAll', {'onlymy':true})
|
||||
} else {
|
||||
store.dispatch('open/templates/loadIfEmpty')
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
|
@ -70,7 +115,7 @@ export default {
|
|||
watch: {},
|
||||
|
||||
mounted () {
|
||||
loadTemplates()
|
||||
loadTemplates(this.onlyMy)
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
|
|
@ -54,7 +54,7 @@ export default {
|
|||
},
|
||||
|
||||
mounted() {
|
||||
store.dispatch('open/templates/loadWithLimit', 10)
|
||||
store.dispatch('open/templates/loadAll', {'limit':10})
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
@ -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') }
|
||||
]
|
||||
|
|
|
@ -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)
|
||||
context.commit('setAllLoaded', true)
|
||||
|
||||
// Prepare with options
|
||||
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')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue