0351d front end linting (#377)
* feat: disable custom script for trial users * after lint fix * frontend linting --------- Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Favour Olayinka
GitHub
@@ -1,15 +1,26 @@
|
||||
<template>
|
||||
<div v-if="template" class="relative group">
|
||||
<div v-if="template.is_new" class="absolute top-0 right-0 p-3 z-10">
|
||||
<div
|
||||
v-if="template"
|
||||
class="relative group"
|
||||
>
|
||||
<div
|
||||
v-if="template.is_new"
|
||||
class="absolute top-0 right-0 p-3 z-10"
|
||||
>
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded-full bg-blue-500 px-2 py-1 text-xs font-medium text-white"
|
||||
>
|
||||
<svg aria-hidden="true" class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="h-3 w-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"
|
||||
<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
|
||||
@@ -17,9 +28,13 @@
|
||||
</div>
|
||||
|
||||
<div class="aspect-[4/3] rounded-lg shadow-sm overflow-hidden">
|
||||
<img class="group-hover:scale-110 transition-all duration-200 h-full object-cover w-full" v-if="template.image_url"
|
||||
:src="template.image_url" alt="" width="450px"
|
||||
/>
|
||||
<img
|
||||
v-if="template.image_url"
|
||||
class="group-hover:scale-110 transition-all duration-200 h-full object-cover w-full"
|
||||
:src="template.image_url"
|
||||
alt=""
|
||||
width="450px"
|
||||
>
|
||||
</div>
|
||||
<p
|
||||
class="text-lg font-semibold leading-tight tracking-tight text-gray-900 mt-4 group-hover:text-blue-500 transition-all duration-150"
|
||||
@@ -29,32 +44,39 @@
|
||||
<p class="line-clamp-2 mt-2 text-sm font-normal text-gray-600">
|
||||
{{ cleanQuotes(template.short_description) }}
|
||||
</p>
|
||||
<template-tags :template="template"
|
||||
class="flex mt-4 items-center flex-wrap gap-3"
|
||||
<template-tags
|
||||
:template="template"
|
||||
class="flex mt-4 items-center flex-wrap gap-3"
|
||||
/>
|
||||
<NuxtLink :to="{params:{slug:template.slug},name:'templates-slug'}" title="">
|
||||
<span class="absolute inset-0" aria-hidden="true" />
|
||||
<NuxtLink
|
||||
:to="{ params: { slug: template.slug }, name: 'templates-slug' }"
|
||||
title=""
|
||||
>
|
||||
<span
|
||||
class="absolute inset-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TemplateTags from './TemplateTags.vue'
|
||||
import TemplateTags from "./TemplateTags.vue"
|
||||
|
||||
export default {
|
||||
components: { TemplateTags },
|
||||
|
||||
props: {
|
||||
template: {
|
||||
type: Object
|
||||
}
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
cleanQuotes (str) {
|
||||
cleanQuotes(str) {
|
||||
// Remove starting and ending quotes if any
|
||||
return (str) ? str.replace(/^"/, '').replace(/"$/, '') : ''
|
||||
}
|
||||
}
|
||||
return str ? str.replace(/^"/, "").replace(/"$/, "") : ""
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,59 +1,76 @@
|
||||
<template>
|
||||
<div>
|
||||
<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"
|
||||
<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"
|
||||
<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"
|
||||
<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" :key="item.slug"
|
||||
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"
|
||||
<span
|
||||
v-for="item in types"
|
||||
:key="item.slug"
|
||||
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.name }}
|
||||
</span>
|
||||
<span v-for="item in industries" :key="item.slug"
|
||||
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"
|
||||
<span
|
||||
v-for="item in industries"
|
||||
:key="item.slug"
|
||||
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.name }}
|
||||
</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"
|
||||
<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].name }} <template v-if="types.length > 1">+{{ types.length - 1 }}</template>
|
||||
{{ types[0].name }}
|
||||
<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"
|
||||
<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].name }} <template v-if="industries.length > 1">+{{ industries.length - 1 }}</template>
|
||||
{{ industries[0].name }}
|
||||
<template v-if="industries.length > 1">+{{ industries.length - 1 }}</template>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
const props = defineProps({
|
||||
template: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
displayAll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
template: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
displayAll: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const templatesStore = useTemplatesStore()
|
||||
const types = computed(() => templatesStore.getTemplateTypes(props.template.types))
|
||||
const industries = computed(() => templatesStore.getTemplateIndustries(props.template.industries))
|
||||
const types = computed(() =>
|
||||
templatesStore.getTemplateTypes(props.template.types),
|
||||
)
|
||||
const industries = computed(() =>
|
||||
templatesStore.getTemplateIndustries(props.template.industries),
|
||||
)
|
||||
</script>
|
||||
|
||||
@@ -2,56 +2,101 @@
|
||||
<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 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" v-if="filterTypes"
|
||||
:options="typesOptions" class="w-full sm:w-auto md:w-56"
|
||||
<select-input
|
||||
v-if="filterTypes"
|
||||
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" v-if="filterIndustries"
|
||||
:options="industriesOptions" class="w-full sm:w-auto md:w-56"
|
||||
<select-input
|
||||
v-if="filterIndustries"
|
||||
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 autocomplete="off" name="search" v-model="search" placeholder="Search..."/>
|
||||
<text-input
|
||||
v-model="search"
|
||||
autocomplete="off"
|
||||
name="search"
|
||||
placeholder="Search..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="text-center mt-4">
|
||||
<Loader class="h-6 w-6 text-nt-blue mx-auto"/>
|
||||
<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">
|
||||
<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" :template="template"/>
|
||||
<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"
|
||||
:template="template"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<slot name="before-lists"/>
|
||||
<slot name="before-lists" />
|
||||
|
||||
<section class="py-12 bg-white border-t border-gray-200 sm:py-16" v-if="showTypes">
|
||||
<section
|
||||
v-if="showTypes"
|
||||
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">
|
||||
<h4
|
||||
class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl"
|
||||
>
|
||||
All Types
|
||||
</h4>
|
||||
<v-button :to="{name:'templates'}" color="white" size="small" :arrow="true" v-if="$route.name !== 'templates'">
|
||||
<v-button
|
||||
v-if="$route.name !== 'templates'"
|
||||
:to="{ name: 'templates' }"
|
||||
color="white"
|
||||
size="small"
|
||||
:arrow="true"
|
||||
>
|
||||
View All Templates
|
||||
</v-button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-x-8 gap-y-4 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<NuxtLink v-for="row in types" :key="row.slug"
|
||||
:to="{params: {slug:row.slug}, name:'templates-types-slug'}"
|
||||
:title="row.name"
|
||||
class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
|
||||
<div
|
||||
class="grid grid-cols-1 gap-x-8 gap-y-4 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
|
||||
>
|
||||
<NuxtLink
|
||||
v-for="row in types"
|
||||
:key="row.slug"
|
||||
:to="{ params: { slug: row.slug }, name: 'templates-types-slug' }"
|
||||
:title="row.name"
|
||||
class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
|
||||
>
|
||||
{{ row.name }}
|
||||
</NuxtLink>
|
||||
@@ -59,22 +104,40 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-12 bg-white border-t border-gray-200 sm:py-16" v-if="showIndustries">
|
||||
<section
|
||||
v-if="showIndustries"
|
||||
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">
|
||||
<h4
|
||||
class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl"
|
||||
>
|
||||
All Industries
|
||||
</h4>
|
||||
<v-button :to="{name:'templates'}" color="white" size="small" :arrow="true" v-if="$route.name !== 'templates'">
|
||||
<v-button
|
||||
v-if="$route.name !== 'templates'"
|
||||
:to="{ name: 'templates' }"
|
||||
color="white"
|
||||
size="small"
|
||||
:arrow="true"
|
||||
>
|
||||
View All Templates
|
||||
</v-button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-x-8 gap-y-4 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<NuxtLink v-for="row in industries" :key="row.slug"
|
||||
:to="{params:{slug:row.slug}, name:'templates-industries-slug'}"
|
||||
:title="row.name"
|
||||
class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
|
||||
<div
|
||||
class="grid grid-cols-1 gap-x-8 gap-y-4 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
|
||||
>
|
||||
<NuxtLink
|
||||
v-for="row in industries"
|
||||
:key="row.slug"
|
||||
:to="{
|
||||
params: { slug: row.slug },
|
||||
name: 'templates-industries-slug',
|
||||
}"
|
||||
:title="row.name"
|
||||
class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
|
||||
>
|
||||
{{ row.name }}
|
||||
</NuxtLink>
|
||||
@@ -85,112 +148,127 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {computed} from 'vue'
|
||||
import Fuse from 'fuse.js'
|
||||
import SingleTemplate from './SingleTemplate.vue'
|
||||
import {refDebounced} from "@vueuse/core";
|
||||
import { computed } from "vue"
|
||||
import Fuse from "fuse.js"
|
||||
import SingleTemplate from "./SingleTemplate.vue"
|
||||
import { refDebounced } from "@vueuse/core"
|
||||
|
||||
export default {
|
||||
name: 'TemplatesList',
|
||||
components: {SingleTemplate},
|
||||
name: "TemplatesList",
|
||||
components: { SingleTemplate },
|
||||
props: {
|
||||
templates: {
|
||||
type: Array,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
showTypes: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: true,
|
||||
},
|
||||
filterTypes: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: true,
|
||||
},
|
||||
showIndustries: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: true,
|
||||
},
|
||||
filterIndustries: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
|
||||
setup() {
|
||||
const authStore = useAuthStore()
|
||||
const templatesStore = useTemplatesStore()
|
||||
const search = ref('')
|
||||
const search = ref("")
|
||||
const debouncedSearch = refDebounced(search, 500)
|
||||
return {
|
||||
search,
|
||||
debouncedSearch,
|
||||
user: computed(() => authStore.user),
|
||||
industries: computed(() => [...templatesStore.industries.values()]),
|
||||
types: computed(() => [...templatesStore.types.values()])
|
||||
types: computed(() => [...templatesStore.types.values()]),
|
||||
}
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
selectedType: 'all',
|
||||
selectedIndustry: 'all',
|
||||
selectedType: "all",
|
||||
selectedIndustry: "all",
|
||||
}),
|
||||
|
||||
computed: {
|
||||
industriesOptions() {
|
||||
return [{name: 'All Industries', value: 'all'}].concat(Object.values(this.industries).map((industry) => {
|
||||
return {
|
||||
name: industry.name,
|
||||
value: industry.slug
|
||||
}
|
||||
}))
|
||||
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
|
||||
}
|
||||
}))
|
||||
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.filterTypes && this.selectedType && this.selectedType !== 'all') {
|
||||
if (
|
||||
this.filterTypes &&
|
||||
this.selectedType &&
|
||||
this.selectedType !== "all"
|
||||
) {
|
||||
enrichedTemplates = enrichedTemplates.filter((item) => {
|
||||
return (item.types && item.types.length > 0) ? item.types.includes(this.selectedType) : false
|
||||
return item.types && item.types.length > 0
|
||||
? item.types.includes(this.selectedType)
|
||||
: false
|
||||
})
|
||||
}
|
||||
|
||||
// Filter by Selected Industry
|
||||
if (this.filterIndustries && this.selectedIndustry && this.selectedIndustry !== 'all') {
|
||||
if (
|
||||
this.filterIndustries &&
|
||||
this.selectedIndustry &&
|
||||
this.selectedIndustry !== "all"
|
||||
) {
|
||||
enrichedTemplates = enrichedTemplates.filter((item) => {
|
||||
return (item.industries && item.industries.length > 0) ? item.industries.includes(this.selectedIndustry) : false
|
||||
return item.industries && item.industries.length > 0
|
||||
? item.industries.includes(this.selectedIndustry)
|
||||
: false
|
||||
})
|
||||
}
|
||||
|
||||
if (!this.debouncedSearch || this.debouncedSearch === '' || this.debouncedSearch === null) {
|
||||
if (
|
||||
!this.debouncedSearch ||
|
||||
this.debouncedSearch === "" ||
|
||||
this.debouncedSearch === null
|
||||
) {
|
||||
return enrichedTemplates
|
||||
}
|
||||
|
||||
// Fuze search
|
||||
const fuzeOptions = {
|
||||
keys: [
|
||||
'name',
|
||||
'slug',
|
||||
'description',
|
||||
'short_description'
|
||||
]
|
||||
keys: ["name", "slug", "description", "short_description"],
|
||||
}
|
||||
const fuse = new Fuse(enrichedTemplates, fuzeOptions)
|
||||
return fuse.search(this.debouncedSearch).map((res) => {
|
||||
return res.item
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user