matt/opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finishing the templates pages

Browse Source
This commit is contained in:
Julien Nahum
2023-12-19 15:24:54 +01:00
parent bb519907f6
commit 8e70d6be98
10 changed files with 295 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
client/components/pages/templates/TemplateTags.vue
View File

@@ -1,51 +1,48 @@
<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>-->
<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"
>
<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" :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"
>
{{ 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"
>
{{ 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"
>
{{ industries[0].name }} <template v-if="industries.length > 1">+{{ industries.length - 1 }}</template>
</span>
</template>
</div>
</template>
<script>
import { computed } from 'vue'
import { useTemplatesStore } from '../../../stores/templates'
<script setup>
export default {
props: {
const props = defineProps({
template: {
type: Object,
required: true
@@ -54,31 +51,9 @@ export default {
type: Boolean,
default: false
}
},
})
setup () {
const templatesStore = useTemplatesStore()
return {
templatesStore
}
},
data: () => ({}),
computed: {
// 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: {}
}
const templatesStore = useTemplatesStore()
const types = computed(() => templatesStore.getTemplateTypes(props.template.types))
const industries = computed(() => templatesStore.getTemplateIndustries(props.template.industries))
</script>

26
client/components/pages/templates/TemplatesList.vue
View File

@@ -16,7 +16,7 @@
</div>
</div>
<div class="flex-1 w-full md:max-w-xs">
<text-input autocomplete="off" name="search" :form="searchTemplate" placeholder="Search..."/>
<text-input autocomplete="off" name="search" v-model="search" placeholder="Search..."/>
</div>
</div>
@@ -45,7 +45,7 @@
<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'}"
: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"
>
@@ -65,7 +65,7 @@
<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'}"
: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"
>
@@ -79,9 +79,9 @@
<script>
import {computed} from 'vue'
import Form from 'vform'
import Fuse from 'fuse.js'
import SingleTemplate from './SingleTemplate.vue'
import {refThrottled} from "@vueuse/core";
export default {
name: 'TemplatesList',
@@ -100,23 +100,22 @@ export default {
setup() {
const authStore = useAuthStore()
const templatesStore = useTemplatesStore()
const search = ref('')
const throttledSearch = refThrottled(search, 1000)
return {
search,
throttledSearch,
user: computed(() => authStore.user),
industries: computed(() => templatesStore.industries),
types: computed(() => templatesStore.types)
industries: computed(() => [...templatesStore.industries.values()]),
types: computed(() => [...templatesStore.types.values()])
}
},
data: () => ({
selectedType: 'all',
selectedIndustry: 'all',
searchTemplate: new Form({
search: ''
})
}),
watch: {},
computed: {
industriesOptions() {
return [{name: 'All Industries', value: 'all'}].concat(Object.values(this.industries).map((industry) => {
@@ -151,7 +150,8 @@ export default {
})
}
if (this.searchTemplate.search === '' || this.searchTemplate.search === null) {
console.log(this.throttledSearch, '---inode')
if (!this.throttledSearch || this.throttledSearch === '' || this.throttledSearch === null) {
return enrichedTemplates
}
@@ -165,7 +165,7 @@ export default {
]
}
const fuse = new Fuse(enrichedTemplates, fuzeOptions)
return fuse.search(this.searchTemplate.search).map((res) => {
return fuse.search(this.throttledSearch).map((res) => {
return res.item
})
}