Refactoring stores and templates pages to comp. api
This commit is contained in:
Julien Nahum
@@ -29,7 +29,7 @@
|
||||
<p class="line-clamp-2 mt-2 text-sm font-normal text-gray-600">
|
||||
{{ cleanQuotes(template.short_description) }}
|
||||
</p>
|
||||
<template-tags :slug="template.slug"
|
||||
<template-tags :template="template"
|
||||
class="flex mt-4 items-center flex-wrap gap-3"
|
||||
/>
|
||||
<router-link :to="{params:{slug:template.slug},name:'templates-slug'}" title="">
|
||||
@@ -46,8 +46,7 @@ export default {
|
||||
|
||||
props: {
|
||||
template: {
|
||||
type: Object,
|
||||
required: true
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -1,42 +1,42 @@
|
||||
<template>
|
||||
<div v-if="template">
|
||||
<template v-if="displayAll">
|
||||
<span v-if="template.is_new"
|
||||
class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-white bg-blue-500 rounded-full"
|
||||
>
|
||||
<svg aria-hidden="true" class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
New
|
||||
</span>
|
||||
<span v-for="item in types"
|
||||
class="inline-flex items-center rounded-full bg-gray-50 dark:bg-gray-800 dark:text-gray-400 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
|
||||
>
|
||||
{{ item }}
|
||||
</span>
|
||||
<span v-for="item in industries"
|
||||
class="inline-flex items-center rounded-full bg-blue-50 dark:bg-blue-900 dark:text-gray-400 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10"
|
||||
>
|
||||
{{ item }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span v-if="types.length > 0"
|
||||
class="inline-flex items-center rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
|
||||
>
|
||||
{{ types[0] }} <template v-if="types.length > 1">+{{ types.length - 1 }}</template>
|
||||
</span>
|
||||
<span v-if="industries.length > 0"
|
||||
class="inline-flex items-center rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10"
|
||||
>
|
||||
{{ industries[0] }} <template v-if="industries.length > 1">+{{ industries.length - 1 }}</template>
|
||||
</span>
|
||||
</template>
|
||||
<!-- <template v-if="displayAll">-->
|
||||
<!-- <span v-if="template.is_new"-->
|
||||
<!-- class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-white bg-blue-500 rounded-full"-->
|
||||
<!-- >-->
|
||||
<!-- <svg aria-hidden="true" class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"-->
|
||||
<!-- fill="currentColor"-->
|
||||
<!-- >-->
|
||||
<!-- <path fill-rule="evenodd"-->
|
||||
<!-- d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"-->
|
||||
<!-- clip-rule="evenodd"-->
|
||||
<!-- />-->
|
||||
<!-- </svg>-->
|
||||
<!-- New-->
|
||||
<!-- </span>-->
|
||||
<!-- <span v-for="item in types"-->
|
||||
<!-- class="inline-flex items-center rounded-full bg-gray-50 dark:bg-gray-800 dark:text-gray-400 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"-->
|
||||
<!-- >-->
|
||||
<!-- {{ item }}-->
|
||||
<!-- </span>-->
|
||||
<!-- <span v-for="item in industries"-->
|
||||
<!-- class="inline-flex items-center rounded-full bg-blue-50 dark:bg-blue-900 dark:text-gray-400 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10"-->
|
||||
<!-- >-->
|
||||
<!-- {{ item }}-->
|
||||
<!-- </span>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template v-else>-->
|
||||
<!-- <span v-if="types.length > 0"-->
|
||||
<!-- class="inline-flex items-center rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"-->
|
||||
<!-- >-->
|
||||
<!-- {{ types[0] }} <template v-if="types.length > 1">+{{ types.length - 1 }}</template>-->
|
||||
<!-- </span>-->
|
||||
<!-- <span v-if="industries.length > 0"-->
|
||||
<!-- class="inline-flex items-center rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10"-->
|
||||
<!-- >-->
|
||||
<!-- {{ industries[0] }} <template v-if="industries.length > 1">+{{ industries.length - 1 }}</template>-->
|
||||
<!-- </span>-->
|
||||
<!-- </template>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -46,8 +46,8 @@ import { useTemplatesStore } from '../../../stores/templates'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
slug: {
|
||||
type: String,
|
||||
template: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
displayAll: {
|
||||
@@ -66,19 +66,17 @@ export default {
|
||||
data: () => ({}),
|
||||
|
||||
computed: {
|
||||
template () {
|
||||
return this.templatesStore.getBySlug(this.slug)
|
||||
},
|
||||
types () {
|
||||
if (!this.template) return null
|
||||
console.log('template in types',this.template)
|
||||
return this.templatesStore.getTemplateTypes(this.template.types)
|
||||
},
|
||||
industries () {
|
||||
if (!this.template) return null
|
||||
console.log('template in types',this.template)
|
||||
return this.templatesStore.getTemplateIndustries(this.template.industries)
|
||||
}
|
||||
// template () {
|
||||
// return this.templatesStore.getByKey(this.slug)
|
||||
// },
|
||||
// types () {
|
||||
// if (!this.template) return null
|
||||
// return this.templatesStore.getTemplateTypes(this.template.types)
|
||||
// },
|
||||
// industries () {
|
||||
// if (!this.template) return null
|
||||
// return this.templatesStore.getTemplateIndustries(this.template.industries)
|
||||
// }
|
||||
},
|
||||
|
||||
methods: {}
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="templatesLoading" class="text-center mt-4">
|
||||
<div v-if="loading" 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">
|
||||
@@ -83,15 +83,6 @@ import Form from 'vform'
|
||||
import Fuse from 'fuse.js'
|
||||
import SingleTemplate from './SingleTemplate.vue'
|
||||
|
||||
// const loadTemplates = function (onlyMy) {
|
||||
// const templatesStore = useTemplatesStore()
|
||||
// if(onlyMy){
|
||||
// templatesStore.loadAll({'onlymy':true})
|
||||
// } else {
|
||||
// templatesStore.loadIfEmpty()
|
||||
// }
|
||||
// }
|
||||
|
||||
export default {
|
||||
name: 'TemplatesList',
|
||||
components: {SingleTemplate},
|
||||
|
||||
Reference in New Issue
Block a user