92 lines
2.8 KiB
Vue
92 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<div class="flex flex-col min-h-full mt-6">
|
||
|
|
<div class="w-full flex-grow md:w-4/5 lg:w-2/3 md:mx-auto md:max-w-4xl px-4">
|
||
|
|
<div>
|
||
|
|
<div class="flex flex-wrap items-center mt-6 mb-4">
|
||
|
|
<h2 class="text-nt-blue text-3xl font-bold flex-grow">
|
||
|
|
Templates
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
<div v-if="templatesLoading" class="text-center">
|
||
|
|
<loader class="h-6 w-6 text-nt-blue mx-auto"/>
|
||
|
|
</div>
|
||
|
|
<p v-else-if="templates.length === 0">
|
||
|
|
No any templates found.
|
||
|
|
</p>
|
||
|
|
<div v-else class="mb-4">
|
||
|
|
<div v-if="templates && templates.length"
|
||
|
|
class="grid max-w-3xl grid-cols-1 mx-auto text-center sm:text-left sm:grid-cols-2 gap-y-8 gap-x-8 lg:gap-x-20">
|
||
|
|
<div class="relative group" v-for="(template, index) in templates" :key="template.id">
|
||
|
|
<div class="overflow-hidden rounded-lg aspect-w-16 aspect-h-9">
|
||
|
|
<img class="object-cover w-full h-full transition-all duration-300 transform group-hover:scale-125"
|
||
|
|
:src="template.image_url" alt=""/>
|
||
|
|
</div>
|
||
|
|
<p class="mt-3 mb-2 text-sm font-normal text-gray-600 font-pj">
|
||
|
|
{{ formatCreatedDate(template.created_at) }}</p>
|
||
|
|
<p class="text-xl font-bold text-gray-900 font-pj">{{ template.name }}</p>
|
||
|
|
<router-link :to="{params:{slug:template.slug},name:'templates.show'}" title="">
|
||
|
|
<span class="absolute inset-0" aria-hidden="true"></span>
|
||
|
|
</router-link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<open-form-footer class="mt-8 border-t"/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import store from '~/store'
|
||
|
|
import {mapGetters, mapState} from 'vuex'
|
||
|
|
import Fuse from 'fuse.js'
|
||
|
|
import OpenFormFooter from '../../components/pages/OpenFormFooter'
|
||
|
|
|
||
|
|
const loadTemplates = function () {
|
||
|
|
store.commit('open/templates/startLoading')
|
||
|
|
store.dispatch('open/templates/load').then(() => {
|
||
|
|
store.commit('open/templates/stopLoading')
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {OpenFormFooter},
|
||
|
|
|
||
|
|
beforeRouteEnter(to, from, next) {
|
||
|
|
loadTemplates()
|
||
|
|
next()
|
||
|
|
},
|
||
|
|
|
||
|
|
props: {
|
||
|
|
metaTitle: {type: String, default: 'Templates'},
|
||
|
|
metaDescription: {type: String, default: 'Public templates for create form quickly!'}
|
||
|
|
},
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {}
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted() {
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
formatCreatedDate(createdDate) {
|
||
|
|
const date = new Date(createdDate)
|
||
|
|
const dateTimeFormat = new Intl.DateTimeFormat('en', {
|
||
|
|
year: 'numeric',
|
||
|
|
month: 'long',
|
||
|
|
day: 'numeric',
|
||
|
|
})
|
||
|
|
return dateTimeFormat.format(date)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
...mapState({
|
||
|
|
templates: state => state['open/templates'].content,
|
||
|
|
templatesLoading: state => state['open/templates'].loading
|
||
|
|
}),
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|