- catalogo avanti, parte 1
This commit is contained in:
Surya Paolo
@@ -11,12 +11,13 @@ import { costanti } from '@costanti'
|
||||
|
||||
import { shared_consts } from '@/common/shared_vuejs'
|
||||
import { CProductCard } from '@src/components/CProductCard'
|
||||
import { CCatalogoCard } from '@src/components/CCatalogoCard'
|
||||
import { CSelectUserActive } from '@src/components/CSelectUserActive'
|
||||
import { IProduct } from '@src/model'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Catalogo',
|
||||
components: { CProductCard, CSelectUserActive },
|
||||
components: { CCatalogoCard, CProductCard, CSelectUserActive },
|
||||
props: {},
|
||||
setup() {
|
||||
const userStore = useUserStore()
|
||||
@@ -27,19 +28,39 @@ export default defineComponent({
|
||||
const { t } = useI18n()
|
||||
|
||||
const search = ref('')
|
||||
|
||||
const filter = ref(<any>{
|
||||
author: '',
|
||||
publisher: '',
|
||||
type: '',
|
||||
ageGroup: ''
|
||||
})
|
||||
|
||||
const cosa = ref(0)
|
||||
const cat = ref('')
|
||||
const idGasSel = ref('')
|
||||
const loadpage = ref(false)
|
||||
const refreshpage = ref(false)
|
||||
const show_hide = ref(false)
|
||||
|
||||
const arrProducts = ref<any>([])
|
||||
|
||||
const numRecLoaded = ref(0)
|
||||
|
||||
|
||||
// Create a ref for the component to fix
|
||||
const componentToFixRef = ref(<any>null);
|
||||
|
||||
const isFixed = ref(false);
|
||||
|
||||
const arrLoaded = computed(() => {
|
||||
if (arrProducts.value && numRecLoaded.value)
|
||||
return arrProducts.value.slice(0, numRecLoaded.value)
|
||||
else {
|
||||
return []
|
||||
}
|
||||
})
|
||||
|
||||
// Register the scroll event on component mount
|
||||
const handleScroll = () => {
|
||||
const scrollTop = window.scrollY || document.documentElement.scrollTop;
|
||||
@@ -54,6 +75,11 @@ export default defineComponent({
|
||||
watch(() => cat.value, (newval, oldval) => {
|
||||
calcArrProducts()
|
||||
})
|
||||
|
||||
watch(() => idGasSel.value, (newval, oldval) => {
|
||||
calcArrProducts()
|
||||
})
|
||||
|
||||
watch(() => search.value, (newval, oldval) => {
|
||||
calcArrProducts()
|
||||
if (tools.scrollTop() > 300) {
|
||||
@@ -69,30 +95,44 @@ export default defineComponent({
|
||||
})
|
||||
|
||||
function calcArrProducts() {
|
||||
// console.log('calcArrProducts')
|
||||
|
||||
refreshpage.value = true
|
||||
let arrprod = productStore.getProducts(cosa.value)
|
||||
let catstr = cat.value;
|
||||
let gasselstr = ''
|
||||
if (cosa.value === shared_consts.PROD.GAS) {
|
||||
gasselstr = idGasSel.value
|
||||
}
|
||||
let lowerSearchText = search.value.toLowerCase().trim();
|
||||
if ((!lowerSearchText || (lowerSearchText && lowerSearchText.length < 2)) && !catstr) {
|
||||
if ((!lowerSearchText || (lowerSearchText && lowerSearchText.length < 2)) && !catstr && (!gasselstr && (cosa.value !== shared_consts.PROD.GAS))) {
|
||||
|
||||
} else {
|
||||
|
||||
arrprod = arrprod.filter((product: IProduct) => {
|
||||
let lowerName = product.productInfo.name!.toLowerCase();
|
||||
let hasCategoria = !catstr || (catstr && product.productInfo.idCatProds?.includes(catstr));
|
||||
if (product && product.productInfo) {
|
||||
let lowerName = product.productInfo.name!.toLowerCase();
|
||||
let hasCategoria = !catstr || (catstr && product.productInfo.idCatProds?.includes(catstr));
|
||||
|
||||
// Use a regular expression to match whole words
|
||||
let codeMatch = new RegExp(`\\b${lowerSearchText}\\b`, 'i');
|
||||
let nameMatch = new RegExp(`\\b${lowerSearchText}`, 'i');
|
||||
let productgassel = true
|
||||
if (gasselstr || (cosa.value === shared_consts.PROD.GAS)) {
|
||||
productgassel = (product.idGasordine === gasselstr)
|
||||
}
|
||||
|
||||
// Check if any word in lowerName starts with lowerSearchText
|
||||
let anyWordStartsWithSearch = lowerName.split(/\s+/).some(word => nameMatch.test(word));
|
||||
// Use a regular expression to match whole words
|
||||
let codeMatch = new RegExp(`\\b${lowerSearchText}\\b`, 'i');
|
||||
let nameMatch = new RegExp(`\\b${lowerSearchText}`, 'i');
|
||||
|
||||
return (codeMatch.test(product.productInfo.code!) || anyWordStartsWithSearch) && hasCategoria;
|
||||
// Check if any word in lowerName starts with lowerSearchText
|
||||
let anyWordStartsWithSearch = lowerName.split(/\s+/).some(word => nameMatch.test(word));
|
||||
|
||||
return (codeMatch.test(product.productInfo.code!) || anyWordStartsWithSearch) && hasCategoria && productgassel;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
arrProducts.value = arrprod
|
||||
loaddata()
|
||||
refreshpage.value = false
|
||||
}
|
||||
|
||||
@@ -115,12 +155,21 @@ export default defineComponent({
|
||||
async function mounted() {
|
||||
loadpage.value = false
|
||||
await productStore.loadProducts()
|
||||
cosa.value = tools.getCookie(tools.COOK_COSA_PRODOTTI, shared_consts.PROD.TUTTI, true)
|
||||
cosa.value = tools.getCookie(tools.COOK_COSA_PRODOTTI, shared_consts.PROD.GAS, true)
|
||||
if (cosa.value === shared_consts.PROD.TUTTI)
|
||||
cosa.value = shared_consts.PROD.GAS
|
||||
|
||||
// Inizializza
|
||||
loadpage.value = true
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
|
||||
calcArrProducts()
|
||||
|
||||
loaddata()
|
||||
}
|
||||
|
||||
function loaddata() {
|
||||
numRecLoaded.value = 20
|
||||
}
|
||||
|
||||
// Remove the event listener on component destroy
|
||||
@@ -138,6 +187,26 @@ export default defineComponent({
|
||||
return riscat
|
||||
}
|
||||
|
||||
|
||||
function onLoadScroll(index: number, done: any) {
|
||||
if (index >= 1) {
|
||||
if (numRecLoaded.value < arrProducts.value.length) {
|
||||
|
||||
const step = 10
|
||||
let mynrec = numRecLoaded.value + step
|
||||
|
||||
if (mynrec > arrProducts.value.length)
|
||||
mynrec = arrProducts.value.length
|
||||
|
||||
numRecLoaded.value = mynrec
|
||||
|
||||
}
|
||||
done()
|
||||
} else {
|
||||
done(true)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(mounted)
|
||||
|
||||
return {
|
||||
@@ -150,6 +219,7 @@ export default defineComponent({
|
||||
shared_consts,
|
||||
getCatProds,
|
||||
cat,
|
||||
idGasSel,
|
||||
productStore,
|
||||
t,
|
||||
loadpage,
|
||||
@@ -157,6 +227,11 @@ export default defineComponent({
|
||||
componentToFixRef,
|
||||
isFixed,
|
||||
arrProducts,
|
||||
show_hide,
|
||||
onLoadScroll,
|
||||
numRecLoaded,
|
||||
arrLoaded,
|
||||
filter,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
<q-spinner v-if="!loadpage" color="primary" size="3em" :thickness="2" />
|
||||
</div>
|
||||
<div v-if="loadpage" class="panel">
|
||||
<!--<div>
|
||||
<CSelectUserActive></CSelectUserActive>
|
||||
<div class="text-center text-h7 text-blue">Filtra per:</div>
|
||||
<div v-if="true">
|
||||
<!--<CSelectUserActive></CSelectUserActive>-->
|
||||
<div class="text-center text-h7 text-blue">Filtra Prodotti per:</div>
|
||||
<div class="text-center">
|
||||
<q-btn-toggle
|
||||
v-model="cosa"
|
||||
@@ -16,9 +16,8 @@
|
||||
glossy
|
||||
toggle-color="primary"
|
||||
:options="[
|
||||
{ value: shared_consts.PROD.TUTTI, slot: 'tutti' },
|
||||
{ value: shared_consts.PROD.BOTTEGA, slot: 'bottega' },
|
||||
{ value: shared_consts.PROD.GAS, slot: 'gas' },
|
||||
{ value: shared_consts.PROD.BOTTEGA, slot: 'bottega' },
|
||||
]"
|
||||
>
|
||||
<template v-slot:tutti>
|
||||
@@ -34,6 +33,12 @@
|
||||
<div class="row items-center no-wrap">
|
||||
<div class="text-center">
|
||||
{{ t('gas.ordina_sul_gas') }}
|
||||
<!--<br />
|
||||
{{
|
||||
t('gas.x_prodotti_gas', {
|
||||
qta: productStore.getNumQtaGas(),
|
||||
})
|
||||
}}-->
|
||||
</div>
|
||||
<q-icon right name="fas fa-user-friends" />
|
||||
</div>
|
||||
@@ -43,13 +48,19 @@
|
||||
<div class="row items-center no-wrap">
|
||||
<div class="text-center">
|
||||
{{ t('gas.bottega') }}
|
||||
<!--<br />
|
||||
{{
|
||||
t('gas.x_prodotti_bottega', {
|
||||
qta: productStore.getNumQtaBottega(),
|
||||
})
|
||||
}}-->
|
||||
</div>
|
||||
<q-icon right name="fas fa-store" />
|
||||
</div>
|
||||
</template>
|
||||
</q-btn-toggle>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<q-slide-transition>
|
||||
@@ -80,37 +91,204 @@
|
||||
</div>
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
<div class="row q-gutter-xs justify-center q-mx-auto">
|
||||
<div v-for="(reccat, index) in getCatProds()" :key="index">
|
||||
<q-btn
|
||||
:push="cat === reccat.value"
|
||||
dense
|
||||
:size="tools.isMobile() ? '0.70rem' : '1rem'"
|
||||
:icon="reccat.icon ? reccat.icon : undefined"
|
||||
:color="cat === reccat.value ? 'primary' : undefined"
|
||||
:text-color="cat === reccat.value ? 'white' : 'black'"
|
||||
rounded
|
||||
:label="reccat.label"
|
||||
@click="cat = reccat.value"
|
||||
<div v-if="cosa === shared_consts.PROD.GAS">
|
||||
<div v-if="!idGasSel">
|
||||
<div class="text-center text-h6 text-red">Ordini Attivi:</div>
|
||||
</div>
|
||||
<div class="row q-gutter-xs justify-center q-mx-auto">
|
||||
<div
|
||||
v-for="(recgas, index) in productStore.getGasordinesActives()"
|
||||
:key="index"
|
||||
>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
push
|
||||
dense
|
||||
:size="tools.isMobile() ? '0.9rem' : '1.05rem'"
|
||||
:color="idGasSel === recgas._id ? 'primary' : undefined"
|
||||
:text-color="idGasSel === recgas._id ? 'white' : 'black'"
|
||||
:label="recgas.name"
|
||||
@click="idGasSel = recgas._id"
|
||||
>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center q-py-sm prod_trov">
|
||||
<span
|
||||
v-show="productStore.getNumProdTot() !== arrProducts.length"
|
||||
>{{
|
||||
t('ecomm.prodotti_trovati', {
|
||||
qta: arrProducts.length,
|
||||
qtatot: productStore.getNumProdTot(),
|
||||
})
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
<div class="row justify-around" v-if="tools.isManager()">
|
||||
<q-toggle
|
||||
v-model="show_hide"
|
||||
push
|
||||
label="Mostra Nascosti"
|
||||
rounded
|
||||
glossy
|
||||
toggle-color="primary"
|
||||
></q-toggle>
|
||||
</div>
|
||||
<div class="row justify-around">
|
||||
<q-infinite-scroll
|
||||
v-if="arrLoaded && arrLoaded.length > 0"
|
||||
ref="myinfscroll"
|
||||
:initial-index="0"
|
||||
@load="onLoadScroll"
|
||||
:offset="2000"
|
||||
debounce="200"
|
||||
class="q-pa-xs row items-start"
|
||||
>
|
||||
<div
|
||||
class="q-pa-xs"
|
||||
v-for="(product, index) in arrLoaded"
|
||||
:key="index"
|
||||
>
|
||||
<CCatalogoCard
|
||||
v-if="
|
||||
product.active ||
|
||||
(show_hide &&
|
||||
productInfo.productType ===
|
||||
shared_consts.PRODUCTTYPE.PRODUCT)
|
||||
"
|
||||
:id="product._id"
|
||||
:complete="false"
|
||||
:cosa="cosa"
|
||||
/>
|
||||
<CProductCard
|
||||
v-else-if="product.active || show_hide"
|
||||
:id="product._id"
|
||||
:complete="false"
|
||||
:cosa="cosa"
|
||||
/>
|
||||
</div>
|
||||
<template v-slot:loading>
|
||||
<div class="text-center">
|
||||
<q-spinner-dots color="primary" size="40px" />
|
||||
</div>
|
||||
</template>
|
||||
</q-infinite-scroll>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center q-py-sm prod_trov">
|
||||
<span v-show="productStore.getNumProdTot() !== arrProducts.length">{{
|
||||
t('ecomm.prodotti_trovati', {
|
||||
qta: arrProducts.length,
|
||||
qtatot: productStore.getNumProdTot(),
|
||||
})
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="row justify-around">
|
||||
<div
|
||||
class="q-pa-xs row items-start"
|
||||
v-for="(product, index) in arrProducts"
|
||||
:key="index"
|
||||
>
|
||||
<CProductCard :id="product._id" :complete="false" :cosa="cosa" />
|
||||
<div v-else>
|
||||
<div class="row q-gutter-xs justify-center q-mx-auto">
|
||||
<div v-for="(reccat, index) in getCatProds()" :key="index">
|
||||
<q-btn
|
||||
:push="cat === reccat.value"
|
||||
dense
|
||||
:size="tools.isMobile() ? '0.70rem' : '1rem'"
|
||||
:icon="reccat.icon ? reccat.icon : undefined"
|
||||
:color="cat === reccat.value ? 'primary' : undefined"
|
||||
:text-color="cat === reccat.value ? 'white' : 'black'"
|
||||
rounded
|
||||
:label="reccat.label"
|
||||
@click="cat = reccat.value"
|
||||
>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center q-py-sm prod_trov">
|
||||
<span
|
||||
v-show="productStore.getNumProdTot() !== arrProducts.length"
|
||||
>{{
|
||||
t('ecomm.prodotti_trovati', {
|
||||
qta: arrProducts.length,
|
||||
qtatot: productStore.getNumProdTot(),
|
||||
})
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
<div class="row justify-around" v-if="tools.isManager()">
|
||||
<q-toggle
|
||||
v-model="show_hide"
|
||||
push
|
||||
label="Mostra Nascosti"
|
||||
rounded
|
||||
glossy
|
||||
toggle-color="primary"
|
||||
></q-toggle>
|
||||
</div>
|
||||
|
||||
<q-toolbar>
|
||||
<q-input
|
||||
v-model="search"
|
||||
debounce="300"
|
||||
placeholder="Cerca libri..."
|
||||
dense
|
||||
/>
|
||||
<q-select
|
||||
v-model="filter.author"
|
||||
:options="authors"
|
||||
label="Autore"
|
||||
placeholder="Tutti"
|
||||
dense
|
||||
/>
|
||||
<q-select
|
||||
v-model="filter.publisher"
|
||||
:options="publishers"
|
||||
label="Editore"
|
||||
placeholder="Tutti"
|
||||
dense
|
||||
/>
|
||||
<q-select
|
||||
v-model="filter.type"
|
||||
:options="types"
|
||||
label="Tipo"
|
||||
placeholder="Tutti"
|
||||
dense
|
||||
/>
|
||||
<q-select
|
||||
v-model="filter.ageGroup"
|
||||
:options="ageGroups"
|
||||
label="Fascia d'età"
|
||||
placeholder="Tutte"
|
||||
dense
|
||||
/>
|
||||
</q-toolbar>
|
||||
|
||||
<div class="row justify-around">
|
||||
<q-infinite-scroll
|
||||
v-if="arrLoaded && arrLoaded.length > 0"
|
||||
ref="myinfscroll"
|
||||
:initial-index="0"
|
||||
@load="onLoadScroll"
|
||||
:offset="2000"
|
||||
debounce="200"
|
||||
class="q-pa-xs row items-start"
|
||||
>
|
||||
<div
|
||||
class="q-pa-xs"
|
||||
v-for="(product, index) in arrLoaded"
|
||||
:key="index"
|
||||
>
|
||||
<CCatalogoCard
|
||||
v-if="
|
||||
product.active ||
|
||||
(show_hide &&
|
||||
productInfo.productType ===
|
||||
shared_consts.PRODUCTTYPE.PRODUCT)
|
||||
"
|
||||
:id="product._id"
|
||||
:complete="false"
|
||||
:cosa="cosa"
|
||||
/>
|
||||
<CProductCard
|
||||
v-else-if="product.active || show_hide"
|
||||
:id="product._id"
|
||||
:complete="false"
|
||||
:cosa="cosa"
|
||||
/>
|
||||
</div>
|
||||
<template v-slot:loading>
|
||||
<div class="text-center">
|
||||
<q-spinner-dots color="primary" size="40px" />
|
||||
</div>
|
||||
</template>
|
||||
</q-infinite-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -122,5 +300,5 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './catalogo';
|
||||
@import './catalogo.scss';
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user