983 lines
37 KiB
TypeScript
Executable File
983 lines
37 KiB
TypeScript
Executable File
import { defineComponent, onMounted, ref, watch, computed, onBeforeUnmount, PropType, nextTick } from 'vue'
|
|
import { tools } from '@store/Modules/tools'
|
|
import { useUserStore } from '@store/UserStore'
|
|
import { useRouter } from 'vue-router'
|
|
import { useGlobalStore } from '@store/globalStore'
|
|
import { useProducts } from '@store/Products'
|
|
import { useI18n } from '@/boot/i18n'
|
|
import { toolsext } from '@store/Modules/toolsext'
|
|
import { useQuasar } from 'quasar'
|
|
import { costanti } from '@costanti'
|
|
|
|
import { shared_consts } from '@/common/shared_vuejs'
|
|
import { CProductCard } from '@src/components/CProductCard'
|
|
import { CMySelect } from '@src/components/CMySelect'
|
|
import { CContainerCatalogoCard } from '@src/components/CContainerCatalogoCard'
|
|
import { CSelectUserActive } from '@src/components/CSelectUserActive'
|
|
import { ICatalogo, IDimensioni, IFilterCatalogo, IMyScheda, IProdView, IProduct, ISchedaSingola, ISearchList } from 'model'
|
|
|
|
|
|
import { fieldsTable } from '@store/Modules/fieldsTable'
|
|
|
|
export default defineComponent({
|
|
name: 'Catalogo',
|
|
components: { CContainerCatalogoCard, CProductCard, CSelectUserActive, CMySelect },
|
|
emits: ['update:modelValue', 'updateCatalogo'],
|
|
props: {
|
|
modelValue: {
|
|
type: Object as PropType<ICatalogo>,
|
|
required: true,
|
|
},
|
|
},
|
|
setup(props, { emit }) {
|
|
const userStore = useUserStore()
|
|
const globalStore = useGlobalStore()
|
|
const productStore = useProducts()
|
|
const router = useRouter()
|
|
const $q = useQuasar()
|
|
const { t } = useI18n()
|
|
|
|
const search = ref('')
|
|
const optauthors = ref(<any>[])
|
|
|
|
const pdfContent = ref(null);
|
|
|
|
const optcatalogo = ref(<ICatalogo>{ ...props.modelValue });
|
|
|
|
function updateCatalogoPadre() {
|
|
console.log('catalogo.ts PADRE')
|
|
emit('update:modelValue', optcatalogo.value);
|
|
//emit('updateCatalogo', optcatalogo.value);
|
|
}
|
|
|
|
// Metodo per aggiornare optcatalogo
|
|
const updateOptCatalogo = <K extends keyof ICatalogo>(key: K, value: ICatalogo[K]) => {
|
|
optcatalogo.value[key] = value;
|
|
updateCatalogoPadre()
|
|
}
|
|
// Utile anche per sincronizzare con le modifiche ricevute da props
|
|
watch(() => props.modelValue, (newVal) => {
|
|
optcatalogo.value = { ...newVal };
|
|
}, { deep: true });
|
|
|
|
/*watch(optcatalogo, (newValue) => {
|
|
emit('update:modelValue', newValue);
|
|
}, { deep: true });*/
|
|
|
|
const filter = ref(<IFilterCatalogo>{
|
|
author: '',
|
|
sort: 1,
|
|
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 mycolumns = ref([])
|
|
|
|
const tabvisu = ref('categorie')
|
|
const tabcatalogo = ref('visu')
|
|
|
|
const searchList = ref([] as ISearchList[])
|
|
|
|
const arrProducts = ref<IProduct[]>([])
|
|
const arrProdToView = ref<IProdView[]>([])
|
|
|
|
const numRecLoaded = ref(0)
|
|
|
|
// Create a ref for the component to fix
|
|
const componentToFixRef = ref(<any>null);
|
|
|
|
const isFixed = ref(false);
|
|
|
|
const labelcombo = computed(() => (item: any) => {
|
|
let lab = item.label
|
|
if (item.showcount)
|
|
lab += ' (' + valoriopt.value(item, false, false).length + ')'
|
|
return lab
|
|
})
|
|
|
|
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;
|
|
|
|
// Set a threshold value based on how much scroll is needed to fix the components
|
|
const threshold = 300;
|
|
|
|
// Update the isFixed ref based on the scroll position
|
|
isFixed.value = scrollTop > threshold;
|
|
};
|
|
|
|
watch(() => cat.value, (newval, oldval) => {
|
|
|
|
if (loadpage.value)
|
|
tools.setCookie(tools.COOK_CATEGORIA, cat.value.toString())
|
|
filter.value.author = '' // disattivo il filtro autore
|
|
resetSearch()
|
|
|
|
calcArrProducts()
|
|
})
|
|
|
|
watch(() => idGasSel.value, (newval, oldval) => {
|
|
calcArrProducts()
|
|
})
|
|
|
|
watch(() => getSearchText(), (newval, oldval) => {
|
|
calcArrProducts()
|
|
if (tools.scrollTop() > 300) {
|
|
tools.scrollToTopValue(300)
|
|
}
|
|
})
|
|
watch(() => filter.value.author, (newval, oldval) => {
|
|
|
|
// Se filtroAuthor attivato, allora evito il filtro per Categoria
|
|
if (filter.value.author) {
|
|
cat.value = '' // disattivo il filtro categoria
|
|
if (loadpage.value)
|
|
tools.setCookie(tools.COOK_CATEGORIA, '')
|
|
resetSearch()
|
|
}
|
|
|
|
calcArrProducts()
|
|
if (tools.scrollTop() > 300) {
|
|
tools.scrollToTopValue(300)
|
|
}
|
|
})
|
|
|
|
watch(() => filter.value.sort, (newval, oldval) => {
|
|
|
|
calcArrProducts()
|
|
if (tools.scrollTop() > 300) {
|
|
tools.scrollToTopValue(300)
|
|
}
|
|
})
|
|
|
|
watch(() => cosa.value, (newval, oldval) => {
|
|
if (oldval !== 0) {
|
|
tools.setCookie(tools.COOK_COSA_PRODOTTI, cosa.value.toString())
|
|
if (cosa.value !== shared_consts.PROD.TUTTI) {
|
|
cat.value = ''
|
|
if (loadpage.value)
|
|
tools.setCookie(tools.COOK_CATEGORIA, '')
|
|
}
|
|
calcArrProducts()
|
|
}
|
|
})
|
|
|
|
watch(() => optcatalogo.value.aggiorna, (newval, oldval) => {
|
|
console.log('Aggiorna array...')
|
|
generatearrProdToViewSorted()
|
|
})
|
|
|
|
function resetSearch() {
|
|
const mialista = getSearchList()
|
|
if (mialista && mialista.value && mialista.value.hasOwnProperty('name')) {
|
|
mialista.value = null
|
|
}
|
|
search.value = ''
|
|
}
|
|
|
|
function getSearchList() {
|
|
const mylist = searchList.value.find((rec: any) => rec.table === 'products' && rec.key === 'titolo')
|
|
|
|
return mylist
|
|
}
|
|
|
|
function getSearchText(): string {
|
|
const lista = getSearchList()
|
|
return lista && lista.value && lista.value.hasOwnProperty('name') ? lista.value.name : ''
|
|
}
|
|
|
|
function calcArrProducts() {
|
|
console.log('calcArrProducts')
|
|
|
|
// eventuali titoli specifici estratti dall'array di Prodotti Selezionati
|
|
//const searchtext = getSearchText()
|
|
const searchtext = getSearchText()
|
|
|
|
let arrprod = productStore.getProducts(cosa.value) || [];
|
|
let filtroAuthor = filter.value.author || '';
|
|
|
|
//++AddCATALOGO_FIELDS
|
|
|
|
let filtroProductTypes = optcatalogo.value.productTypes || [0]
|
|
let filtroExcludeProductTypes = optcatalogo.value.excludeproductTypes || [0]
|
|
let boolfiltroVuotoProductTypes = (filtroProductTypes.length === 0 || (filtroProductTypes.length === 1 && (filtroProductTypes[0] === 0)))
|
|
let boolfiltroVuotoExcludeProductTypes = filtroExcludeProductTypes.length === 0
|
|
|
|
let filtroPublishers = optcatalogo.value.Editore || []
|
|
let boolfiltroVuotoEditore = (filtroPublishers.length === 0)
|
|
|
|
//console.log('filtroVersione', filtroProductTypes)
|
|
|
|
let catstr = cat.value || ''
|
|
|
|
let gasselstr = ''
|
|
if (cosa.value === shared_consts.PROD.GAS) {
|
|
gasselstr = idGasSel.value || '';
|
|
}
|
|
let lowerSearchText = (searchtext || '').toLowerCase().trim();
|
|
lowerSearchText = lowerSearchText.replace(/[-@:=]/g, '');
|
|
if ((!lowerSearchText || (lowerSearchText && lowerSearchText.length < 2)) && !catstr && boolfiltroVuotoProductTypes && boolfiltroVuotoExcludeProductTypes && boolfiltroVuotoEditore && !filtroAuthor && (!gasselstr && (cosa.value !== shared_consts.PROD.GAS))) {
|
|
|
|
} else {
|
|
|
|
arrprod = arrprod.filter((product: IProduct) => {
|
|
if (product && product.productInfo) {
|
|
let lowerName = (product.productInfo.name || '').toLowerCase();
|
|
let hasCategoria = !catstr || (catstr && (product.productInfo.idCatProds || []).includes(catstr));
|
|
let hasAuthor = !filtroAuthor || (filtroAuthor && (product.productInfo.idAuthors || []).includes(filtroAuthor));
|
|
|
|
let hasProductTypes = true
|
|
let hasPublished = true
|
|
let hasExcludeProductTypes = false
|
|
|
|
//++AddCATALOGO_FIELDS
|
|
|
|
if (optcatalogo.value && !boolfiltroVuotoProductTypes) {
|
|
// check if productInfo.productTypes array includes some item in optcatalogo.value.ProductTypes array
|
|
hasProductTypes = !optcatalogo.value.productTypes || (optcatalogo.value.productTypes && (product.productInfo.productTypes || []).some((item: any) => optcatalogo.value.productTypes!.includes(item)))
|
|
}
|
|
if (optcatalogo.value && !boolfiltroVuotoEditore) {
|
|
hasPublished = !optcatalogo.value.Editore || (optcatalogo.value.Editore && optcatalogo.value.Editore.includes(product.productInfo.idPublisher!))
|
|
}
|
|
|
|
if (optcatalogo.value && !boolfiltroVuotoExcludeProductTypes) {
|
|
// check if productInfo.productTypes array exclude some item in optcatalogo.value.ProductTypes array
|
|
hasExcludeProductTypes = !optcatalogo.value.excludeproductTypes || (optcatalogo.value.excludeproductTypes && (product.productInfo.productTypes || []).every((item: any) => optcatalogo.value.excludeproductTypes!.includes(item)))
|
|
}
|
|
|
|
let productgassel = true
|
|
if (gasselstr || (cosa.value === shared_consts.PROD.GAS)) {
|
|
productgassel = (product.idGasordine === gasselstr)
|
|
}
|
|
|
|
// Use a regular expression to match whole words
|
|
let codeMatch = new RegExp(`\\b${lowerSearchText}\\b`, 'i');
|
|
// let nameMatch = new RegExp(`\\b(?=.*\\b${lowerSearchText.split(/\s+/).map(word => `(${word})\\b`).join('.*\\b')}\\b)`, 'i');
|
|
|
|
// Check if all words in lowerSearchText are present in lowerName
|
|
let allWordsPresent = lowerSearchText.split(/\s+/).every(word => new RegExp(`\\b${word}\\b`, 'i').test(lowerName));
|
|
|
|
return (codeMatch.test(product.productInfo.code || '') || allWordsPresent) && hasCategoria && hasAuthor && productgassel && hasProductTypes && hasPublished && !hasExcludeProductTypes;
|
|
} else {
|
|
console.error('product or product.productInfo is null');
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
|
|
arrprod = getProductsSorted(arrprod, filter.value.sort);
|
|
|
|
arrProducts.value = arrprod
|
|
|
|
populateDataWithlinkIdTemplate()
|
|
|
|
generatearrProdToViewSorted()
|
|
|
|
loaddata()
|
|
|
|
refreshpage.value = false
|
|
}
|
|
|
|
|
|
function sovrascriviSchedaFromTemplate(idTemplate: string, origScheda: ISchedaSingola) {
|
|
if (!optcatalogo.value)
|
|
return
|
|
|
|
const arrschede: ISchedaSingola[] = globalStore.getMySchede()
|
|
const myfindscheda = arrschede.find((recscheda: ISchedaSingola) => recscheda.scheda?._id === idTemplate)
|
|
|
|
let mynewscheda = tools.jsonCopy(origScheda)
|
|
|
|
const linkIdTemplate = origScheda.scheda?.linkIdTemplate
|
|
const precname = origScheda.scheda?.name
|
|
|
|
if (myfindscheda) {
|
|
let myschedatocopy = tools.jsonCopy(myfindscheda)
|
|
|
|
if (myschedatocopy) {
|
|
myschedatocopy.scheda._id = origScheda.scheda?._id
|
|
myschedatocopy.scheda.isTemplate = false
|
|
myschedatocopy.scheda.name = precname
|
|
myschedatocopy.scheda.linkIdTemplate = linkIdTemplate
|
|
|
|
return myschedatocopy.scheda
|
|
}
|
|
}
|
|
|
|
return null
|
|
}
|
|
|
|
function populateDataWithlinkIdTemplate() {
|
|
|
|
if (optcatalogo.value) {
|
|
|
|
for (const recscheda of optcatalogo.value.arrSchede!) {
|
|
if (recscheda.scheda?.linkIdTemplate) {
|
|
// ricopia da Template:
|
|
const myscheda = sovrascriviSchedaFromTemplate(recscheda.scheda?.linkIdTemplate, recscheda)
|
|
if (myscheda) {
|
|
recscheda.scheda = myscheda
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
function getProductsFilteredByScheda(scheda: IMyScheda): IProduct[] {
|
|
|
|
const searchtext = scheda.arrProdottiSpeciali
|
|
|
|
let arrprod = productStore.getProducts(cosa.value) || [];
|
|
let filtroAuthor = filter.value.author || '';
|
|
|
|
let filtroProductTypes = scheda.productTypes || [0]
|
|
let filtroExcludeProductTypes = scheda.excludeproductTypes || [0]
|
|
let boolfiltroVuotoProductTypes = (filtroProductTypes.length === 0 || (filtroProductTypes.length === 1 && (filtroProductTypes[0] === 0)))
|
|
let boolfiltroVuotoExcludeProductTypes = filtroExcludeProductTypes.length === 0
|
|
|
|
let filtroPublishers = scheda.editore || []
|
|
let boolfiltroVuotoEditore = (filtroPublishers.length === 0)
|
|
|
|
//console.log('filtroVersione', filtroProductTypes)
|
|
|
|
let catstr = cat.value || ''
|
|
|
|
let gasselstr = ''
|
|
if (cosa.value === shared_consts.PROD.GAS) {
|
|
gasselstr = idGasSel.value || '';
|
|
}
|
|
let lowerSearchTexts = (searchtext || []).map((text: string) =>
|
|
text.toLowerCase().trim().replace(/[-@:=]/g, '')
|
|
)
|
|
// Remove the condition that skips filtering if search text is too short
|
|
// Now it will work with multiple search terms
|
|
arrprod = arrprod.filter((product: IProduct) => {
|
|
if (product && product.productInfo) {
|
|
let lowerName = (product.productInfo.name || '').toLowerCase();
|
|
let lowerCode = (product.productInfo.code || '').toLowerCase();
|
|
|
|
let hasCategoria = !catstr || (catstr && (product.productInfo.idCatProds || []).includes(catstr));
|
|
let hasAuthor = !filtroAuthor || (filtroAuthor && (product.productInfo.idAuthors || []).includes(filtroAuthor));
|
|
|
|
// Check if ANY search term matches the product name or code
|
|
let searchMatch = lowerSearchTexts.length === 0 || lowerSearchTexts.some((searchTerm: any) => {
|
|
// Check if the entire search term is a whole word in name or code
|
|
let codeMatch = new RegExp(`\\b${searchTerm}\\b`, 'i').test(lowerCode);
|
|
|
|
// Check if all words in the search term are present in the name
|
|
let allWordsPresent = searchTerm.split(/\s+/).every((word: string) =>
|
|
new RegExp(`\\b${word}\\b`, 'i').test(lowerName)
|
|
);
|
|
|
|
return codeMatch || allWordsPresent;
|
|
});
|
|
|
|
let hasProductTypes = true
|
|
let hasPublished = true
|
|
let hasExcludeProductTypes = false
|
|
|
|
if (!boolfiltroVuotoProductTypes) {
|
|
// check if productInfo.productTypes array includes some item in scheda.ProductTypes array
|
|
hasProductTypes = !scheda.productTypes || (scheda.productTypes && (product.productInfo.productTypes || []).some((item: any) => scheda.productTypes!.includes(item)))
|
|
}
|
|
if (!boolfiltroVuotoEditore) {
|
|
hasPublished = !scheda.editore || (scheda.editore && scheda.editore.includes(product.productInfo.idPublisher!))
|
|
}
|
|
|
|
if (!boolfiltroVuotoExcludeProductTypes) {
|
|
// check if productInfo.productTypes array exclude some item in scheda.ProductTypes array
|
|
hasExcludeProductTypes = !scheda.excludeproductTypes || (scheda.excludeproductTypes && (product.productInfo.productTypes || []).every((item: any) => scheda.excludeproductTypes!.includes(item)))
|
|
}
|
|
|
|
return searchMatch && hasCategoria && hasAuthor && hasProductTypes && hasPublished && !hasExcludeProductTypes;
|
|
} else {
|
|
console.error('product or product.productInfo is null');
|
|
return false;
|
|
}
|
|
})
|
|
|
|
arrprod = getProductsSorted(arrprod, scheda?.sort!);
|
|
|
|
return arrprod
|
|
|
|
}
|
|
|
|
function getProductsSorted(arrprod: IProduct[], sort: number) {
|
|
// console.log('getProductsSorted', sort)
|
|
if (sort === costanti.SORT_PUBDATE) {
|
|
|
|
arrprod = arrprod.sort((a: IProduct, b: IProduct) => {
|
|
return b.productInfo.date_pub_ts - a.productInfo.date_pub_ts
|
|
})
|
|
} else if (sort === costanti.SORT_BESTSELLER) {
|
|
|
|
arrprod = arrprod.sort((a: IProduct, b: IProduct) => {
|
|
return b.productInfo.vLast6M! - a.productInfo.vLast6M!
|
|
})
|
|
|
|
arrprod = arrprod.map((product, index) => {
|
|
return {
|
|
...product,
|
|
indiceRanking: index + 1
|
|
};
|
|
})
|
|
|
|
console.log('arr', arrprod)
|
|
|
|
} else if (sort === costanti.SORT_DEFAULT) {
|
|
|
|
}
|
|
|
|
return arrprod
|
|
|
|
}
|
|
|
|
function addNextProductToTheView(arrproductfiltrati: IProduct[], indprod: number) {
|
|
try {
|
|
|
|
let rectrovato = null;
|
|
while (true) {
|
|
if (indprod >= arrproductfiltrati.length) {
|
|
return { end: true }
|
|
}
|
|
|
|
rectrovato = arrProdToView.value.find(
|
|
(prodview: IProdView) => prodview.id === arrproductfiltrati[indprod]._id
|
|
);
|
|
|
|
if (rectrovato) {
|
|
indprod++
|
|
continue; // Era stato già aggiunto, quindi prova col prossimo
|
|
} else {
|
|
// Non è stato ancora aggiunto, quindi prendo questo e lo aggiungo alla lista !
|
|
|
|
const myrec = arrproductfiltrati[indprod]
|
|
|
|
arrProdToView.value.push({ id: myrec._id, showed: false });
|
|
return { myrec, added: true, indprod }
|
|
}
|
|
|
|
}
|
|
|
|
|
|
} catch (e) {
|
|
console.error(e);
|
|
return { rec: null, indprod }; // Assicurati di gestire correttamente l'errore
|
|
}
|
|
}
|
|
|
|
function getProdBySchedaRigaCol(recscheda: ISchedaSingola, pagina: number, riga: number, col: number) {
|
|
try {
|
|
return recscheda.arrProdToShow![pagina][riga][col]
|
|
} catch (e) {
|
|
return null
|
|
}
|
|
}
|
|
|
|
function generatearrProdToViewSorted() {
|
|
// console.log('generatearrProdToViewSorted', arrProducts.value)
|
|
|
|
// Svuota
|
|
arrProdToView.value = []
|
|
|
|
// gia filtrati
|
|
const arrGeneraleProdotti = arrProducts.value;
|
|
|
|
let indprod = 0
|
|
let indprodGenerale = 0
|
|
|
|
for (const recscheda of optcatalogo.value.arrSchede!) {
|
|
if (recscheda && recscheda.scheda) {
|
|
let schedePerRiga = recscheda.scheda.numschede_perRiga || 1
|
|
let schedePerCol = recscheda.scheda.numschede_perCol || 1
|
|
let schedePerPagina = schedePerRiga * schedePerCol
|
|
|
|
let arrProdFiltrati: IProduct[] = []
|
|
|
|
if (recscheda.scheda.productTypes!.length > 0) {
|
|
// Filtra i prodotti in base ai filtri impostati !
|
|
arrProdFiltrati = getProductsFilteredByScheda(recscheda.scheda)
|
|
indprod = 0
|
|
} else {
|
|
if (recscheda.scheda?.sort! > 0) {
|
|
arrProdFiltrati = getProductsSorted(arrGeneraleProdotti, recscheda.scheda.sort!);
|
|
indprod = 0
|
|
} else {
|
|
indprod = indprodGenerale
|
|
arrProdFiltrati = arrGeneraleProdotti
|
|
}
|
|
|
|
|
|
}
|
|
|
|
// console.log('arrProdFiltrati indiceRanking = ', arrProdFiltrati[0].indiceRanking)
|
|
|
|
let indadded = 0
|
|
recscheda.arrProdToShow = []
|
|
|
|
for (let pagina = 0; pagina < 100; pagina++) {
|
|
indadded = 0
|
|
if (!recscheda.arrProdToShow[pagina]) {
|
|
recscheda.arrProdToShow[pagina] = [];
|
|
}
|
|
|
|
for (let giro = 0; giro < schedePerPagina; giro++) {
|
|
// Aggiunge il prossimo prodotto che non è stato ancora inserito
|
|
const result = addNextProductToTheView(arrProdFiltrati, indprod);
|
|
if (result.end) {
|
|
break; // Esci dal ciclo se non ci sono più prodotti disponibili
|
|
} else {
|
|
if (result.indprod)
|
|
indprod = result.indprod // Aggiorna indprod per il prossimo giro
|
|
if (result.myrec) {
|
|
|
|
let riga = Math.floor(indadded / schedePerCol)
|
|
let col = indadded % schedePerCol
|
|
|
|
if (!recscheda.arrProdToShow[pagina][riga]) {
|
|
recscheda.arrProdToShow[pagina][riga] = [];
|
|
}
|
|
|
|
// console.log('RANKING: ', result.myrec.indiceRanking!)
|
|
|
|
recscheda.arrProdToShow[pagina][riga][col] = result.myrec
|
|
|
|
indadded++
|
|
}
|
|
}
|
|
}
|
|
|
|
if (recscheda.numPagineMax! > 0) {
|
|
if (pagina + 1 >= recscheda.numPagineMax!)
|
|
break; // fine pagine
|
|
}
|
|
|
|
}
|
|
|
|
// console.log('*** arrProdToShow', recscheda.arrProdToShow)
|
|
}
|
|
}
|
|
|
|
console.log('Fine...')
|
|
}
|
|
|
|
function getNextProd() {
|
|
let nextRecord = arrProdToView.value.find((rec: any) => !rec.showed)
|
|
|
|
// Se un tale record esiste, impostalo su mostrato
|
|
if (nextRecord) {
|
|
nextRecord.showed = true
|
|
return arrProducts.value.find((recprod: IProduct) => recprod._id === nextRecord.id)
|
|
}
|
|
|
|
return null
|
|
}
|
|
|
|
|
|
/*function getProducts() {
|
|
let arrprod = productStore.getProducts(cosa.value)
|
|
if (!search.value) {
|
|
return arrprod
|
|
}
|
|
|
|
let lowerSearchText = search.value.toLowerCase();
|
|
let catstr = cat.value;
|
|
|
|
return arrprod.filter((product: IProduct) => {
|
|
let lowerName = product.productInfo.name!.toLowerCase();
|
|
const hasCategoria = !catstr || (catstr && product.productInfo.idCatProds?.includes(catstr));
|
|
return (product.productInfo.code!.includes(search.value) || lowerName.includes(lowerSearchText)) && hasCategoria
|
|
});
|
|
}*/
|
|
|
|
async function mounted() {
|
|
console.log('mounted Catalogo')
|
|
loadpage.value = false
|
|
await productStore.loadProducts()
|
|
|
|
mycolumns.value = fieldsTable.getArrColsByTable('products')
|
|
|
|
searchList.value = [
|
|
{
|
|
label: 'Ricerca',
|
|
table: 'products',
|
|
key: 'titolo',
|
|
type: costanti.FieldType.select_by_server,
|
|
value: '',
|
|
// addall: true,
|
|
arrvalue: [],
|
|
useinput: true,
|
|
filter: null,
|
|
tablesel: 'products',
|
|
},
|
|
]
|
|
|
|
optauthors.value = productStore.getAuthors()
|
|
|
|
//++Todo: Per ora visualizzo solo il "Negozio" e non i GAS...
|
|
cosa.value = shared_consts.PROD.BOTTEGA
|
|
|
|
cat.value = tools.getCookie(tools.COOK_CATEGORIA, '')
|
|
|
|
//cosa.value = tools.getCookie(tools.COOK_COSA_PRODOTTI, shared_consts.PROD.GAS, true)
|
|
//if (cosa.value === shared_consts.PROD.TUTTI)
|
|
|
|
|
|
// Inizializza
|
|
loadpage.value = true
|
|
window.addEventListener('scroll', handleScroll);
|
|
|
|
calcArrProducts()
|
|
|
|
loaddata()
|
|
}
|
|
|
|
function loaddata() {
|
|
numRecLoaded.value = 20
|
|
}
|
|
|
|
// Remove the event listener on component destroy
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('scroll', handleScroll);
|
|
});
|
|
|
|
function getCatProds() {
|
|
let arrcat = productStore.getCatProds(cosa.value)
|
|
let riscat: any = [{ label: 'Tutti', value: '', icon: undefined, color: undefined }]
|
|
for (const rec of arrcat) {
|
|
riscat.push({ label: rec.name, value: rec._id, icon: rec.icon, color: rec.color })
|
|
}
|
|
|
|
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)
|
|
}
|
|
}
|
|
|
|
function filterFn(val: any, update: any, abort: any) {
|
|
update(() => {
|
|
const needle = val.toLowerCase();
|
|
optauthors.value = productStore.getAuthors().filter(v => {
|
|
const authorName = v.label.toLowerCase();
|
|
const wordsToSearch = needle.split(' ');
|
|
return wordsToSearch.every((word: any) => {
|
|
if (word.length > 1) {
|
|
return authorName.includes(word);
|
|
} else {
|
|
return authorName.split(' ').some((namePart: any) => namePart.startsWith(word));
|
|
}
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
function selauthor(id: string, value: string) {
|
|
filter.value.author = id
|
|
}
|
|
|
|
/*function searchval(newval: any, table: any, tablesel: any) {
|
|
console.log('REFRR searchval', newval, table, 'tablesel', tablesel)
|
|
if (newval) {
|
|
if (newval.hasOwnProperty('name')) {
|
|
search.value = newval.name
|
|
}
|
|
} else {
|
|
resetSearch()
|
|
}
|
|
}*/
|
|
|
|
const valoriopt = computed(() => (item: any, addall: boolean, addnone: boolean) => {
|
|
// console.log('valoriopt', item.table)
|
|
return globalStore.getTableJoinByName(item.table, addall, addnone, item.filter)
|
|
})
|
|
|
|
const loadImage = (src: any) => {
|
|
return new Promise((resolve, reject) => {
|
|
const img = new Image()
|
|
img.onload = () => resolve(img)
|
|
img.onerror = reject
|
|
img.src = src
|
|
})
|
|
}
|
|
|
|
|
|
|
|
function groupedPages(recscheda: ISchedaSingola) {
|
|
return recscheda.arrProdToShow
|
|
}
|
|
function generateStyleCatalogo(optcatalogo: ICatalogo) {
|
|
|
|
return {
|
|
|
|
}
|
|
}
|
|
|
|
function generateStylePageScheda(optcatalogo: ICatalogo, scheda: IMyScheda) {
|
|
const marginTop = scheda.dimensioni?.pagina?.dimensioni?.margini?.top ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.dimensioni?.margini?.top) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.margini?.top) || '')
|
|
const marginBottom = scheda.dimensioni?.pagina?.dimensioni?.margini?.bottom ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.dimensioni?.margini?.bottom) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.margini?.bottom) || '')
|
|
const marginLeft = scheda.dimensioni?.pagina?.dimensioni?.margini?.left ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.dimensioni?.margini?.left) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.margini?.left) || '')
|
|
const marginRight = scheda.dimensioni?.pagina?.dimensioni?.margini?.right ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.dimensioni?.margini?.right) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.margini?.right) || '')
|
|
|
|
const paddingTop = scheda.dimensioni?.pagina?.dimensioni?.padding?.top ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.dimensioni?.padding?.top) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.padding?.top) || '')
|
|
const paddingBottom = scheda.dimensioni?.pagina?.dimensioni?.padding?.bottom ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.dimensioni?.padding?.bottom) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.padding?.bottom) || '')
|
|
const paddingLeft = scheda.dimensioni?.pagina?.dimensioni?.padding?.left ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.dimensioni?.padding?.left) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.padding?.left) || '')
|
|
const paddingRight = scheda.dimensioni?.pagina?.dimensioni?.padding?.right ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.dimensioni?.padding?.right) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.padding?.right) || '')
|
|
|
|
// Esiste un immagine di sfondo specifica della singola pagina ?
|
|
let fileimg = scheda.dimensioni?.pagina?.dimensioni?.imgsfondo?.imagefile
|
|
let backgroundSize = scheda.dimensioni?.pagina?.dimensioni?.imgsfondo?.fit
|
|
if (fileimg) {
|
|
fileimg = fileimg ? `url(${costanti.DIR_UPLOAD + costanti.DIR_SCHEDA + fileimg})` : ''
|
|
}
|
|
|
|
if (!fileimg) {
|
|
// Esiste un immagine di sfondo uguali per tutte le pagine ?
|
|
fileimg = optcatalogo.dimensioni_def?.pagina.imgsfondo?.imagefile
|
|
backgroundSize = optcatalogo.dimensioni_def?.pagina.imgsfondo?.fit
|
|
fileimg = fileimg ? `url(${costanti.DIR_UPLOAD + costanti.DIR_CATALOGO + fileimg})` : ''
|
|
}
|
|
|
|
let backgroundImage = fileimg ?? ''
|
|
|
|
let width = scheda.dimensioni?.pagina?.dimensioni?.size?.width ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.dimensioni?.size?.width) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.size?.width) ?? '')
|
|
let height = scheda.dimensioni?.pagina?.dimensioni?.size?.height ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.dimensioni?.size?.height) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.size?.height) ?? '')
|
|
|
|
return {
|
|
marginBottom,
|
|
marginTop,
|
|
marginLeft,
|
|
marginRight,
|
|
paddingBottom,
|
|
paddingTop,
|
|
paddingLeft,
|
|
paddingRight,
|
|
backgroundImage,
|
|
backgroundSize,
|
|
'--width': width,
|
|
'--height': height,
|
|
...(width ? { width: `${width} !important;` } : {}),
|
|
...(height ? { height: `${height} !important;` } : {}) // Aggiungi l'altezza solo se è valorizzata
|
|
};
|
|
}
|
|
|
|
function generateStyleByPageDim(optcatalogo: ICatalogo, mypage: IDimensioni) {
|
|
const marginTop = mypage!.margini?.top ? tools.adjustSize(optcatalogo, mypage!.margini?.top) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.margini?.top) || '')
|
|
const marginBottom = mypage!.margini?.bottom ? tools.adjustSize(optcatalogo, mypage!.margini?.bottom) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.margini?.bottom) || '')
|
|
const marginLeft = mypage!.margini?.left ? tools.adjustSize(optcatalogo, mypage!.margini?.left) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.margini?.left) || '')
|
|
const marginRight = mypage!.margini?.right ? tools.adjustSize(optcatalogo, mypage!.margini?.right) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.margini?.right) || '')
|
|
|
|
const paddingTop = mypage!.padding?.top ? tools.adjustSize(optcatalogo, mypage!.padding?.top) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.padding?.top) || '')
|
|
const paddingBottom = mypage!.padding?.bottom ? tools.adjustSize(optcatalogo, mypage!.padding?.bottom) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.padding?.bottom) ?? '')
|
|
const paddingLeft = mypage!.padding?.left ? tools.adjustSize(optcatalogo, mypage!.padding?.left) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.padding?.left) ?? '')
|
|
const paddingRight = mypage!.padding?.right ? tools.adjustSize(optcatalogo, mypage!.padding?.right) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.padding?.right) ?? '')
|
|
|
|
// Esiste un immagine di sfondo specifica della singola pagina ?
|
|
let fileimg = mypage!.imgsfondo?.imagefile
|
|
let backgroundSize = mypage!.imgsfondo?.fit
|
|
if (fileimg) {
|
|
fileimg = fileimg ? `url(${costanti.DIR_UPLOAD + costanti.DIR_CATALOGO + fileimg})` : ''
|
|
}
|
|
|
|
if (!fileimg) {
|
|
// Esiste un immagine di sfondo uguali per tutte le pagine ?
|
|
fileimg = optcatalogo.dimensioni_def?.pagina.imgsfondo?.imagefile
|
|
backgroundSize = optcatalogo.dimensioni_def?.pagina.imgsfondo?.fit
|
|
fileimg = fileimg ? `url(${costanti.DIR_UPLOAD + costanti.DIR_CATALOGO + fileimg})` : ''
|
|
}
|
|
|
|
let backgroundImage = fileimg ?? ''
|
|
|
|
let width = mypage!.size?.width ? tools.adjustSize(optcatalogo, mypage!.size?.width) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.size?.width) ?? '')
|
|
let height = mypage!.size?.height ? tools.adjustSize(optcatalogo, mypage!.size?.height) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.size?.height) ?? '')
|
|
|
|
return {
|
|
marginBottom,
|
|
marginTop,
|
|
marginLeft,
|
|
marginRight,
|
|
paddingBottom,
|
|
paddingTop,
|
|
paddingLeft,
|
|
paddingRight,
|
|
backgroundImage,
|
|
backgroundSize,
|
|
'--width': width,
|
|
'--height': height,
|
|
...(width ? { width: `${width} !important;` } : {}),
|
|
...(height ? { height: `${height} !important;` } : {}) // Aggiungi l'altezza solo se è valorizzata
|
|
};
|
|
}
|
|
|
|
function getWidthPagina(optcatalogo: ICatalogo, scheda: IMyScheda) {
|
|
return scheda.dimensioni?.pagina?.dimensioni?.size?.width ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.dimensioni?.size?.width) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.size?.width) ?? '')
|
|
}
|
|
function getHeightPagina(optcatalogo: ICatalogo, scheda: IMyScheda) {
|
|
return scheda.dimensioni?.pagina?.dimensioni?.size?.height ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.dimensioni?.size?.height) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.size?.height) ?? '')
|
|
}
|
|
|
|
function getStyleRowSeparator(recscheda: ISchedaSingola) {
|
|
const paddingLeft = tools.adjustSize(optcatalogo.value, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.left) ?? '0px';
|
|
const paddingRight = tools.adjustSize(optcatalogo.value, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.right) ?? '0px';
|
|
|
|
return {
|
|
paddingLeft: `${paddingLeft}`,
|
|
paddingRight: `${paddingRight}`,
|
|
};
|
|
}
|
|
|
|
function getStyleRow(recscheda: ISchedaSingola) {
|
|
const placeContent = 'center';
|
|
|
|
const width = tools.adjustSize(optcatalogo.value, recscheda.scheda?.dimensioni?.riga?.size?.width) ?? '';
|
|
const height = tools.adjustSize(optcatalogo.value, recscheda.scheda?.dimensioni?.riga?.size?.height);
|
|
|
|
const marginTop = tools.adjustSize(optcatalogo.value, recscheda.scheda?.dimensioni?.riga?.margini?.top) || '0';
|
|
const marginBottom = tools.adjustSize(optcatalogo.value, recscheda.scheda?.dimensioni?.riga?.margini?.bottom) || '0';
|
|
const marginLeft = tools.adjustSize(optcatalogo.value, recscheda.scheda?.dimensioni?.riga?.margini?.left) || '0';
|
|
const marginRight = tools.adjustSize(optcatalogo.value, recscheda.scheda?.dimensioni?.riga?.margini?.right) || '0';
|
|
|
|
const paddingTop = tools.adjustSize(optcatalogo.value, recscheda.scheda?.dimensioni?.riga?.padding?.top) || '0';
|
|
const paddingBottom = tools.adjustSize(optcatalogo.value, recscheda.scheda?.dimensioni?.riga?.padding?.bottom) || '0';
|
|
const paddingLeft = tools.adjustSize(optcatalogo.value, recscheda.scheda?.dimensioni?.riga?.padding?.left) || '0';
|
|
const paddingRight = tools.adjustSize(optcatalogo.value, recscheda.scheda?.dimensioni?.riga?.padding?.right) || '0';
|
|
|
|
let out: any = {
|
|
placeContent,
|
|
flex: `0 1 ${width} !important;`,
|
|
margin: `${marginTop} ${marginRight} ${marginBottom} ${marginLeft}`,
|
|
padding: `${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`
|
|
}
|
|
|
|
if (width) {
|
|
out.width = `${width} !important;`
|
|
}
|
|
if (height) {
|
|
out.height = `${height} !important;`
|
|
}
|
|
|
|
return out
|
|
|
|
}
|
|
|
|
function getStyleSchedaProdotto(recscheda: ISchedaSingola) {
|
|
const placeContent = 'center';
|
|
|
|
const width = tools.adjustSize(optcatalogo.value, recscheda.scheda?.dimensioni?.scheda_prodotto?.size?.width) ?? '100px';
|
|
const height = tools.adjustSize(optcatalogo.value, recscheda.scheda?.dimensioni?.scheda_prodotto?.size?.height);
|
|
|
|
const marginTop = tools.adjustSize(optcatalogo.value, recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.top) || '0px';
|
|
const marginBottom = tools.adjustSize(optcatalogo.value, recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.bottom) || '0px';
|
|
const marginLeft = tools.adjustSize(optcatalogo.value, recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.left) || '0px';
|
|
const marginRight = tools.adjustSize(optcatalogo.value, recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.right) || '0px';
|
|
|
|
const paddingTop = tools.adjustSize(optcatalogo.value, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.top) || '0px';
|
|
const paddingBottom = tools.adjustSize(optcatalogo.value, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.bottom) || '0px';
|
|
const paddingLeft = tools.adjustSize(optcatalogo.value, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.left) || '0px';
|
|
const paddingRight = tools.adjustSize(optcatalogo.value, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.right) || '0px';
|
|
|
|
return {
|
|
placeContent,
|
|
alignSelf: 'flex-start',
|
|
flex: `0 1 ${width} !important;`,
|
|
margin: `${marginTop} ${marginRight} ${marginBottom} ${marginLeft}`,
|
|
padding: `${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`,
|
|
...(height ? { height: `${height} !important;` } : {}) // Aggiungi l'altezza solo se è valorizzata
|
|
};
|
|
}
|
|
|
|
function containsProducts(page: IProduct[][]) {
|
|
return page && page.length > 0 && page[0] && page[0].length > 0
|
|
}
|
|
|
|
onMounted(mounted)
|
|
|
|
return {
|
|
userStore,
|
|
costanti,
|
|
tools,
|
|
toolsext,
|
|
search,
|
|
cosa,
|
|
shared_consts,
|
|
getCatProds,
|
|
cat,
|
|
idGasSel,
|
|
productStore,
|
|
t,
|
|
loadpage,
|
|
refreshpage,
|
|
componentToFixRef,
|
|
isFixed,
|
|
arrProducts,
|
|
show_hide,
|
|
onLoadScroll,
|
|
numRecLoaded,
|
|
arrLoaded,
|
|
filter,
|
|
optauthors,
|
|
filterFn,
|
|
selauthor,
|
|
searchList,
|
|
fieldsTable,
|
|
valoriopt,
|
|
labelcombo,
|
|
mycolumns,
|
|
tabvisu,
|
|
getSearchText,
|
|
pdfContent,
|
|
tabcatalogo,
|
|
groupedPages,
|
|
getNextProd,
|
|
getProdBySchedaRigaCol,
|
|
generateStylePageScheda,
|
|
generateStyleCatalogo,
|
|
getStyleRow,
|
|
getStyleSchedaProdotto,
|
|
getWidthPagina,
|
|
getHeightPagina,
|
|
getStyleRowSeparator,
|
|
generateStyleByPageDim,
|
|
containsProducts,
|
|
updateOptCatalogo,
|
|
optcatalogo,
|
|
}
|
|
}
|
|
})
|
|
|