566 lines
15 KiB
TypeScript
Executable File
566 lines
15 KiB
TypeScript
Executable File
import { defineComponent, ref, toRef, computed, PropType, watch, onMounted, reactive, onBeforeUnmount } from 'vue'
|
|
import { useI18n } from '@src/boot/i18n'
|
|
import { useUserStore } from '@store/UserStore'
|
|
import { useGlobalStore } from '@store/globalStore'
|
|
import { useQuasar } from 'quasar'
|
|
|
|
import { CTitleBanner } from '../CTitleBanner'
|
|
import { CCardState } from '../CCardState'
|
|
import { CCopyBtn } from '../CCopyBtn'
|
|
import { CMyValueDb } from '../CMyValueDb'
|
|
import { CPrice } from '../CPrice'
|
|
|
|
import { func_tools, toolsext } from '@store/Modules/toolsext'
|
|
|
|
import { IBaseOrder, ICatalogo, IGasordine, IOrder, IOrderCart, IProduct, IVariazione } from '@src/model'
|
|
import { tools } from '@store/Modules/tools'
|
|
import { useProducts } from '@store/Products'
|
|
|
|
import { shared_consts } from '@src/common/shared_vuejs'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
import { costanti } from '@costanti'
|
|
|
|
import VuePdfApp from 'vue3-pdf-app'
|
|
// import this to use default icons for buttons
|
|
import 'vue3-pdf-app/dist/icons/main.css'
|
|
|
|
|
|
export default defineComponent({
|
|
name: 'CCatalogoCard',
|
|
emits: ['selauthor', 'opendetail'],
|
|
props: {
|
|
product: {
|
|
type: Object as PropType<IProduct | null>,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
id: {
|
|
type: String,
|
|
required: false,
|
|
default: '',
|
|
},
|
|
cosa: {
|
|
type: Number,
|
|
required: false,
|
|
default: 0,
|
|
},
|
|
complete: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
options: {
|
|
type: Object,
|
|
required: false,
|
|
default: () => { }
|
|
},
|
|
optcatalogo: {
|
|
type: Object as PropType<ICatalogo>,
|
|
required: false,
|
|
default: () => ({
|
|
//++AddCATALOGO_FIELDS
|
|
productTypes: [0],
|
|
excludeproductTypes: [],
|
|
formato: [],
|
|
Categoria: [],
|
|
Editore: [],
|
|
pdf: false,
|
|
backgroundimage: '',
|
|
}),
|
|
},
|
|
},
|
|
components: { CTitleBanner, CCardState, CCopyBtn, CMyValueDb, VuePdfApp, CPrice },
|
|
setup(props, { emit }) {
|
|
const $q = useQuasar()
|
|
const { t } = useI18n()
|
|
const userStore = useUserStore()
|
|
const globalStore = useGlobalStore()
|
|
const products = useProducts()
|
|
|
|
const listord = ref(<IOrderCart[]>[])
|
|
const sumval = ref(0)
|
|
const editOn = ref(false)
|
|
|
|
const indvariazSel = ref(-1)
|
|
|
|
const site = ref(globalStore.site)
|
|
|
|
const $router = useRouter()
|
|
|
|
const fullscreenImage = ref(<any>null)
|
|
|
|
const apriSchedaPDF = ref(false)
|
|
|
|
let myorder = reactive(<IOrder>{
|
|
idapp: process.env.APP_ID,
|
|
quantity: 0,
|
|
quantitypreordered: 0,
|
|
idStorehouse: '',
|
|
idGasordine: '',
|
|
storehouse: {},
|
|
gasordine: { active: false },
|
|
})
|
|
|
|
const storeSelected = ref('')
|
|
const arrordersCart = ref(<IOrderCart[]>[])
|
|
|
|
const timerInterval = ref(<any>null)
|
|
const timerLabelScadenza = ref('')
|
|
const labelDataRitiro = ref('')
|
|
const labelDataArrivoMerce = ref('')
|
|
|
|
const openlistorders = ref(false)
|
|
const endload = ref(false)
|
|
const myproduct = ref(<IProduct | null>{})
|
|
|
|
const isFullScreen = ref(false)
|
|
const imageSrc = ref('URL_DEL_TUO_FILE_IMMAGINE')
|
|
const startX = ref(0)
|
|
const startY = ref(0)
|
|
const scale = ref(1)
|
|
|
|
|
|
watch(() => editOn.value, (to: any, from: any) => {
|
|
if (!editOn.value)
|
|
ricarica()
|
|
})
|
|
|
|
|
|
/*const myproduct = computed((): IProduct => {
|
|
console.log('getproduct computed')
|
|
const ris = products.getProduct(props.code)
|
|
console.log(' received', ris)
|
|
return ris
|
|
})*/
|
|
|
|
|
|
function iconWhishlist(order: IProduct) {
|
|
if (true) {
|
|
return 'far fa-heart'
|
|
} else {
|
|
return 'fas fa-heart'
|
|
}
|
|
}
|
|
async function addtoCart(add: boolean) {
|
|
|
|
if (!userStore.isLogged) {
|
|
tools.showNeutralNotif($q, t('ecomm.area_personale'))
|
|
globalStore.rightDrawerOpen = true
|
|
return false
|
|
}
|
|
|
|
if (myproduct.value) {
|
|
const ris = await products.addtoCartBase({ $q, t, id: myproduct.value._id, order: myorder, addqty: add })
|
|
updateproduct()
|
|
if (ris && ris.myord) {
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
function getnumstore() {
|
|
if (myproduct.value) {
|
|
if (myproduct.value.storehouses)
|
|
return myproduct.value.storehouses.length
|
|
else
|
|
return 0
|
|
}
|
|
return 0
|
|
}
|
|
|
|
function getSingleStorehouse() {
|
|
try {
|
|
if (!myproduct.value)
|
|
return ''
|
|
|
|
const mystore = myproduct.value.storehouses[0]
|
|
if (mystore)
|
|
return mystore.name + ' (' + mystore.city + ')'
|
|
else
|
|
return ''
|
|
} catch (e) {
|
|
return ''
|
|
}
|
|
}
|
|
|
|
function getSingleGasordine(gasordine: IGasordine) {
|
|
try {
|
|
const mygas = gasordine
|
|
if (mygas)
|
|
/*return mygas.name + ' (' + mygas.city + ') ' + t('gas.dataora_chiusura_ordini') + ': ' + tools.getstrDateShort(mygas.dataora_chiusura_ordini)
|
|
+ ' ' + t('gas.data_arrivo_merce') + ': ' + tools.getstrDateShort(mygas.data_arrivo_merce)
|
|
+ ' ' + t('gas.dataora_ritiro') + ': ' + tools.getstrDateShort(mygas.dataora_ritiro)*/
|
|
|
|
return mygas.name
|
|
else
|
|
return ''
|
|
} catch (e) {
|
|
return ''
|
|
}
|
|
}
|
|
|
|
function initproduct() {
|
|
|
|
myorder.quantity = 0
|
|
myorder.quantitypreordered = 0
|
|
myorder.idStorehouse = ''
|
|
myorder.idGasordine = ''
|
|
|
|
}
|
|
|
|
async function updateproduct() {
|
|
|
|
myproduct.value = null;
|
|
myproduct.value = await products.getProductById(props.id)
|
|
|
|
// products.updateQuantityAvailable(myproduct.value._id)
|
|
}
|
|
|
|
async function ricarica() {
|
|
endload.value = false
|
|
if (myproduct.value) {
|
|
const prod = await products.loadProductById(myproduct.value._id)
|
|
if (prod) {
|
|
myproduct.value = prod
|
|
}
|
|
}
|
|
await load()
|
|
|
|
}
|
|
|
|
async function updateproductmodif() {
|
|
|
|
try {
|
|
myproduct.value = await products.getProductById(props.id)
|
|
|
|
updateLabel()
|
|
} catch (e) {
|
|
console.error('err', e)
|
|
}
|
|
}
|
|
|
|
function getStorehouses() {
|
|
if (!myproduct.value)
|
|
return []
|
|
|
|
const myarr: any = []
|
|
let ind = 1
|
|
myproduct.value.storehouses.forEach((store) => {
|
|
myarr.push(
|
|
{
|
|
id: ind,
|
|
label: store.name + ' (' + store.city + ')',
|
|
value: store._id
|
|
})
|
|
|
|
ind++
|
|
})
|
|
|
|
// console.log('arraystore', myarr)
|
|
return myarr
|
|
}
|
|
|
|
function checkifCartDisable() {
|
|
// return !myorder.idStorehouse
|
|
return isOrdineChiuso()
|
|
}
|
|
|
|
function checkifCartEnable() {
|
|
return false
|
|
}
|
|
|
|
function getQtyWarn() {
|
|
if (myorder.quantity > 0) {
|
|
return t('ecomm.di_cui_x_in_carrello', { qty: myorder.quantity })
|
|
}
|
|
return ''
|
|
}
|
|
|
|
function getQtyWarnPreOrdered() {
|
|
if (myorder.quantitypreordered > 0) {
|
|
return t('ecomm.di_cui_x_in_carrello', { qty: myorder.quantitypreordered })
|
|
}
|
|
return ''
|
|
}
|
|
|
|
watch(() => props.id, async (newval, oldval) => {
|
|
// console.log('change code')
|
|
await load()
|
|
})
|
|
|
|
watch(() => storeSelected.value, (newval, oldval) => {
|
|
myorder.idStorehouse = newval
|
|
})
|
|
|
|
function updateLabel() {
|
|
let dataArrivoMerce = ''
|
|
let dataRitiro = ''
|
|
try {
|
|
if (myproduct.value && myproduct.value.gasordine) {
|
|
if (myproduct.value.gasordine.data_arrivo_merce)
|
|
dataArrivoMerce = tools.getstrDateShort(myproduct.value.gasordine.data_arrivo_merce)
|
|
if (myproduct.value.gasordine.dataora_ritiro)
|
|
dataRitiro = tools.getstrDateTime(myproduct.value.gasordine.dataora_ritiro)
|
|
} else {
|
|
dataArrivoMerce = ''
|
|
dataRitiro = ''
|
|
}
|
|
} catch (e) {
|
|
|
|
}
|
|
if (labelDataArrivoMerce.value !== dataArrivoMerce)
|
|
labelDataArrivoMerce.value = dataArrivoMerce
|
|
if (labelDataRitiro.value !== dataRitiro)
|
|
labelDataRitiro.value = dataRitiro
|
|
|
|
updateTimerLabel()
|
|
}
|
|
|
|
async function mounted() {
|
|
await load()
|
|
|
|
// Start the timer when the component is mounted
|
|
startTimer();
|
|
}
|
|
|
|
function beforeDestroy() {
|
|
// Clear the interval when the component is destroyed to prevent memory leaks
|
|
clearInterval(timerInterval.value);
|
|
}
|
|
|
|
function updateTimerLabel() {
|
|
if (myproduct.value && (myproduct.value.gasordine && myproduct.value.gasordine._id && myproduct.value.gasordine.dataora_chiusura_ordini))
|
|
timerLabelScadenza.value = tools.getCountDown(myproduct.value.gasordine.dataora_chiusura_ordini)
|
|
else
|
|
timerLabelScadenza.value = ''
|
|
}
|
|
|
|
function isOrdineChiuso() {
|
|
if (myproduct.value) {
|
|
return myproduct.value.gasordine && myproduct.value.gasordine.dataora_chiusura_ordini &&
|
|
tools.getCountDown(myproduct.value.gasordine.dataora_chiusura_ordini) === ''
|
|
} else
|
|
return false
|
|
}
|
|
|
|
function startTimer() {
|
|
// Update the timer label every second
|
|
timerInterval.value = setInterval(() => updateTimerLabel(), 60000);
|
|
}
|
|
|
|
async function load() {
|
|
indvariazSel.value = -1
|
|
initproduct()
|
|
await updateproduct()
|
|
labelDataArrivoMerce.value = ''
|
|
labelDataRitiro.value = ''
|
|
|
|
// console.log('Load', myproduct.value.name)
|
|
|
|
if (!!myproduct.value) {
|
|
arrordersCart.value = products.getOrdersCartInAttesaByIdProduct(myproduct.value._id)
|
|
|
|
if (myproduct.value.storehouses && myproduct.value.storehouses.length === 1) {
|
|
// Se solo 1 presente, metto fisso l'unico negozio !
|
|
myorder.idStorehouse = myproduct.value.storehouses[0]._id
|
|
}
|
|
|
|
if (myproduct.value.gasordine) {
|
|
myorder.idGasordine = myproduct.value.gasordine._id
|
|
}
|
|
|
|
const ord = products.getOrderProductInCart(myproduct.value._id)
|
|
if (ord) {
|
|
myorder.quantity = ord.quantity
|
|
myorder.quantitypreordered = ord.quantitypreordered
|
|
|
|
// Seleziona il Negozio che avevo già scelto nell'ordine !
|
|
if (ord.idStorehouse)
|
|
storeSelected.value = ord.idStorehouse
|
|
|
|
}
|
|
}
|
|
|
|
updateLabel()
|
|
|
|
// console.log('myproduct', myproduct.value, 'arrvariaz', myproduct.value.arrvariazioni, 'compl', props.complete)
|
|
if (props.complete && myproduct.value && myproduct.value.arrvariazioni) {
|
|
// console.log('ENTRATO')
|
|
indvariazSel.value = 0
|
|
}
|
|
|
|
|
|
// console.log('°°° ENDLOAD °°°')
|
|
endload.value = true
|
|
}
|
|
|
|
function getclimgproduct() {
|
|
return 'myimgproduct centermydiv'
|
|
}
|
|
|
|
|
|
function visuListDisponibili() {
|
|
if (myproduct.value) {
|
|
openlistorders.value = true
|
|
sumval.value = products.getSumQtyOrderProductInOrdersCart(myproduct.value._id)
|
|
|
|
listord.value = arrordersCart.value.filter((orderscart: IOrderCart) => orderscart.items!.reduce((accumulator, item) => {
|
|
return accumulator + item.order.quantity
|
|
}, 0))
|
|
} else
|
|
return false
|
|
}
|
|
|
|
function visuListBookable() {
|
|
if (myproduct.value) {
|
|
openlistorders.value = true
|
|
sumval.value = products.getSumQtyPreOrderInOrdersCart(myproduct.value._id)
|
|
|
|
listord.value = arrordersCart.value.filter((orderscart: IOrderCart) => orderscart.items!.reduce((accumulator, item) => {
|
|
return accumulator + item.order.quantitypreordered
|
|
}, 0))
|
|
} else {
|
|
return ''
|
|
}
|
|
}
|
|
|
|
function isOrdGas(): boolean {
|
|
if (myproduct.value)
|
|
return (myproduct.value && !!myproduct.value.idGasordine && myproduct.value.gasordine! && myproduct.value.gasordine.active)
|
|
else
|
|
return false
|
|
}
|
|
|
|
function getpercqtaraggiunta(): number {
|
|
if (myproduct.value)
|
|
return tools.calcperc((myproduct.value.bookableGASBloccatiQty + myproduct.value.QuantitaPrenotateInAttesa!) * myproduct.value.productInfo.weight!, myproduct.value.qtyToReachForGas * myproduct.value.productInfo.weight!) / 100
|
|
else
|
|
return 0
|
|
}
|
|
|
|
function toggleFullScreen() {
|
|
isFullScreen.value = !isFullScreen.value;
|
|
scale.value = 1;
|
|
}
|
|
|
|
function onTouchStart(e: any) {
|
|
startX.value = e.touches[0].pageX;
|
|
startY.value = e.touches[0].pageY;
|
|
}
|
|
|
|
function onTouchMove(e: any) {
|
|
const deltaX = e.touches[0].pageX - startX.value;
|
|
const deltaY = e.touches[0].pageY - startY.value;
|
|
|
|
// Calcola la distanza percorsa
|
|
const distance = Math.sqrt(deltaX ** 2 + deltaY ** 2);
|
|
|
|
// Imposta il fattore di scala in base alla distanza percorsa
|
|
scale.value = Math.min(Math.max(1, scale.value + distance / 100), 3);
|
|
|
|
// Salva le nuove coordinate di partenza
|
|
startX.value = e.touches[0].pageX;
|
|
startY.value = e.touches[0].pageY;
|
|
|
|
// Applica la trasformazione
|
|
if (fullscreenImage.value)
|
|
fullscreenImage.value.style.transform = `scale(${scale.value})`;
|
|
}
|
|
|
|
function onTouchEnd() {
|
|
// Ripristina la trasformazione quando l'utente solleva il dito
|
|
if (fullscreenImage.value)
|
|
fullscreenImage.value.fullscreenImage.style.transform = 'scale(1)';
|
|
}
|
|
|
|
function naviga(path: string) {
|
|
$router.push(path)
|
|
}
|
|
|
|
function setvariazioneSelected(indvariaz: number) {
|
|
if (indvariazSel.value === indvariaz)
|
|
indvariazSel.value = -1
|
|
else {
|
|
indvariazSel.value = -1
|
|
indvariazSel.value = indvariaz
|
|
}
|
|
}
|
|
|
|
function click_author(id: any, autore: any) {
|
|
emit('selauthor', id, autore)
|
|
}
|
|
|
|
function click_opendetail(id: any, autore: any) {
|
|
emit('opendetail')
|
|
}
|
|
function escludiArticolo(variazione: IVariazione) {
|
|
let hasExcludeProductTypes = !props.optcatalogo.excludeproductTypes || (props.optcatalogo.excludeproductTypes && (props.optcatalogo.excludeproductTypes.includes(variazione.versione!)))
|
|
|
|
return hasExcludeProductTypes
|
|
}
|
|
|
|
function checkIfVariazioneDaVisu(variazione: IVariazione) {
|
|
return !escludiArticolo(variazione)
|
|
}
|
|
|
|
onMounted(mounted)
|
|
onBeforeUnmount(beforeDestroy)
|
|
|
|
return {
|
|
visuListDisponibili,
|
|
visuListBookable,
|
|
addtoCart,
|
|
iconWhishlist,
|
|
getclimgproduct,
|
|
getnumstore,
|
|
getSingleStorehouse,
|
|
getSingleGasordine,
|
|
getStorehouses,
|
|
checkifCartDisable,
|
|
myproduct,
|
|
myorder,
|
|
tools,
|
|
t,
|
|
storeSelected,
|
|
getQtyWarn,
|
|
openlistorders,
|
|
func_tools,
|
|
toolsext,
|
|
products,
|
|
arrordersCart,
|
|
endload,
|
|
shared_consts,
|
|
site,
|
|
getQtyWarnPreOrdered,
|
|
listord,
|
|
sumval,
|
|
timerLabelScadenza,
|
|
labelDataRitiro,
|
|
labelDataArrivoMerce,
|
|
getpercqtaraggiunta,
|
|
isOrdGas,
|
|
isFullScreen,
|
|
toggleFullScreen,
|
|
onTouchStart,
|
|
onTouchMove,
|
|
onTouchEnd,
|
|
naviga,
|
|
globalStore,
|
|
editOn,
|
|
costanti,
|
|
updateproduct,
|
|
updateproductmodif,
|
|
isOrdineChiuso,
|
|
ricarica,
|
|
apriSchedaPDF,
|
|
setvariazioneSelected,
|
|
indvariazSel,
|
|
checkifCartEnable,
|
|
click_author,
|
|
click_opendetail,
|
|
checkIfVariazioneDaVisu,
|
|
}
|
|
}
|
|
})
|