surya/myprojplanet_vite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

galleria prodotto

Browse Source
This commit is contained in:
Surya Paolo
2025-08-12 19:43:36 +02:00
parent f1f3f5ad07
commit 5d8e38fea6
25 changed files with 848 additions and 524 deletions
Download Patch File Download Diff File Expand all files Collapse all files

357
src/components/CGallery/CGallery.ts
View File

@@ -1,15 +1,18 @@
import type { PropType } from 'vue';
import { defineComponent, ref, watch, onMounted, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useUserStore } from '@store/UserStore'
import { useQuasar } from 'quasar'
import { defineComponent, ref, watch, onMounted, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useUserStore } from '@store/UserStore';
import { useQuasar } from 'quasar';
import type { IImgGallery } from 'model';
import { IGallery } from 'model'
import { CMyPage } from '@src/components/CMyPage'
import { tools } from '@tools'
import { useGlobalStore } from '@store/globalStore'
import { costanti } from '@costanti'
import { IGallery } from 'model';
import { CMyPage } from '@src/components/CMyPage';
import { tools } from '@tools';
import { useGlobalStore } from '@store/globalStore';
import { costanti } from '@costanti';
import { shared_consts } from 'app/src/common/shared_vuejs';
import { Api } from 'app/src/store/Api';
import axios from 'app/src/boot/axios';
import { toolsext } from 'app/src/store/Modules/toolsext';
export default defineComponent({
name: 'CGallery',
@@ -57,6 +60,11 @@ export default defineComponent({
required: false,
default: false,
},
fieldtype: {
type: Number,
required: false,
default: 0,
},
imgGall: {
type: Object as PropType<IImgGallery[] | string | undefined | null>,
required: true,
@@ -65,174 +73,182 @@ export default defineComponent({
emits: ['showandsave'],
components: { CMyPage },
setup(props, { emit }) {
const $q = useQuasar()
const { t } = useI18n()
const userStore = useUserStore()
const globalStore = useGlobalStore()
const $q = useQuasar();
const { t } = useI18n();
const userStore = useUserStore();
const globalStore = useGlobalStore();
const displayGall = ref(false)
const displayGall = ref(false);
const gallerylist = ref(<IImgGallery[]>[])
const maximizedToggle = ref(true)
const gallerylist = ref(<IImgGallery[]>[]);
const maximizedToggle = ref(true);
const fullscreen = ref(false)
const fullscreensrc = ref('')
const fullscreen = ref(false);
const fullscreensrc = ref('');
const uploadOptions = ref({ // qui definisci le opzioni da passare
const upl = ref();
const uploadOptions = ref({
// qui definisci le opzioni da passare
quality: 'original', // esempio di opzione di qualità
resize: true // opzione per abilitare il ridimensionamento
})
resize: true, // opzione per abilitare il ridimensionamento
});
function isValid(myobj: any): boolean {
return (myobj && typeof myobj !== 'string' && typeof myobj !== 'undefined')
return myobj && typeof myobj !== 'string' && typeof myobj !== 'undefined';
}
const isListImgValid = computed(() => {
const arr = getlistimages()
const arr = getlistimages();
if (arr && tools.isArray(arr)) {
return arr.length > 0
return arr.length > 0;
} else {
return !!arr
return !!arr;
}
})
});
watch(() => props.imgGall, (newval, oldval) => {
if (isValid(props.imgGall)) {
// @ts-ignore
gallerylist.value = props.imgGall
watch(
() => props.imgGall,
(newval, oldval) => {
if (isValid(props.imgGall)) {
// @ts-ignore
gallerylist.value = props.imgGall;
}
}
})
);
function created() {
// console.log('created cgallery')
if (isValid(props.imgGall)) {
// @ts-ignore
let myarr: any = props.imgGall
gallerylist.value = []
let myarr: any = props.imgGall;
gallerylist.value = [];
if (Array.isArray(myarr)) {
myarr.forEach((pic: any) => {
if (pic.imagefile) {
gallerylist.value.push(pic)
if (pic?.imagefile) {
gallerylist.value.push(pic);
} else {
gallerylist.value.push(pic);
}
})
});
}
} else {
gallerylist.value = [
]
gallerylist.value = [];
}
uploadOptions.value = {
quality: props.quality,
resize: props.resize,
}
};
}
function getnumimages() {
if (gallerylist.value)
return gallerylist.value.length
else
return 0
if (gallerylist.value) return gallerylist.value.length;
else return 0;
}
function getlistimages() {
if (gallerylist.value)
// return gallerylist.value.slice().sort((a: any, b: any) => a.order! - b.order!)
//return gallerylist.value.filter(filename => !filename)
return gallerylist.value
else
return null
return gallerylist.value;
else return null;
}
function onDragStart(e: any) {
console.log('onDragStart')
e.dataTransfer.setData('text', e.target.id)
e.dataTransfer.dropEffect = 'move'
console.log('onDragStart');
e.dataTransfer.setData('text', e.target.id);
e.dataTransfer.dropEffect = 'move';
}
function onDragEnter(e: any) {
if (props.canModify) {
// don't drop on other draggables
if (e.target.draggable !== true) {
e.target.classList.add('drag-enter')
e.target.classList.add('drag-enter');
}
}
}
function onDragLeave(e: any) {
if (props.canModify) {
e.target.classList.remove('drag-enter')
e.target.classList.remove('drag-enter');
}
}
function onDragOver(e: any) {
if (props.canModify) {
e.preventDefault()
e.preventDefault();
}
}
function onDrop(e: any) {
if (props.canModify) {
console.log('onDrop', e)
e.preventDefault()
console.log('onDrop', e);
e.preventDefault();
// don't drop on other draggables
if (e.target.draggable === true) {
return
return;
}
if (gallerylist.value) {
const draggedId = e.dataTransfer.getData('text')
let dragout = ''
const draggedId = e.dataTransfer.getData('text');
let dragout = '';
try {
dragout = e.target.parentNode.parentNode.parentNode.id
dragout = e.target.parentNode.parentNode.parentNode.id;
} catch (err) {
dragout = ''
dragout = '';
}
const draggedEl = document.getElementById(draggedId)
console.log('draggedId', draggedId, 'draggedEl', draggedEl)
console.log('dragout', dragout)
const draggedEl = document.getElementById(draggedId);
console.log('draggedId', draggedId, 'draggedEl', draggedEl);
console.log('dragout', dragout);
// check if original parent node
if (draggedEl) {
if (draggedEl.parentNode === e.target) {
e.target.classList.remove('drag-enter')
return
e.target.classList.remove('drag-enter');
return;
}
}
const myindexIn = gallerylist.value.findIndex((rec: any) => rec._id === draggedId)
const myrecIn: IImgGallery = gallerylist.value[myindexIn]
const myindexIn = gallerylist.value.findIndex(
(rec: any) => rec._id === draggedId
);
const myrecIn: IImgGallery = gallerylist.value[myindexIn];
let myrecOut: IImgGallery
const myindexout = gallerylist.value.findIndex((rec: any) => rec._id === dragout)
myrecOut = gallerylist.value[myindexout]
let myrecOut: IImgGallery;
const myindexout = gallerylist.value.findIndex(
(rec: any) => rec._id === dragout
);
myrecOut = gallerylist.value[myindexout];
if (myindexIn === myindexout)
return
if (myindexIn === myindexout) return;
tools.array_move(gallerylist.value, myindexIn, myindexout)
tools.array_move(gallerylist.value, myindexIn, myindexout);
// make the exchange
// draggedEl.parentNode.removeChild(draggedEl)
// e.target.appendChild(draggedEl)
e.target.classList.remove('drag-enter')
e.target.classList.remove('drag-enter');
save()
save();
}
}
}
function getclass() {
return (props.edit || displayGall.value) ? (props.isInModif ? 'my-card-gallery' : 'my-card-gallery-noModif') : 'my-card-gallery-view' + ' text-center'
return props.edit || displayGall.value
? props.isInModif
? 'my-card-gallery'
: 'my-card-gallery-noModif'
: 'my-card-gallery-view' + ' text-center';
}
function getclimg() {
let mycl = (props.edit || displayGall.value) ? 'myimg' : 'myimg-view'
if (props.canModify && props.edit)
mycl = mycl + ' myimg-modify'
return mycl
let mycl = props.edit || displayGall.value ? 'myimg' : 'myimg-view';
if (props.canModify && props.edit) mycl = mycl + ' myimg-modify';
return mycl;
}
/*function getlastord() {
@@ -248,79 +264,81 @@ export default defineComponent({
}*/
function uploaded(info: any) {
console.log('uploaded', info)
console.log('uploaded', info);
let vers_img = tools.getGenerateVersionImage()
let vers_img = tools.getGenerateVersionImage();
if (gallerylist.value) {
console.log('vers_img', vers_img)
console.log('vers_img', vers_img);
if (props.single && info.files) {
console.log('gallerylist.value[0]', info.files[0].name)
console.log('gallerylist.value[0]', info.files[0].name);
if (info.files[0].name.imagefile) {
gallerylist.value[0] = info.files[0].name
gallerylist.value[0] = info.files[0].name;
} else {
gallerylist.value[0] = { imagefile: info.files[0].name, vers_img }
gallerylist.value[0] = { imagefile: info.files[0].name, vers_img, fieldtype: props.fieldtype };
}
} else {
for (const file of info.files) {
if (file.name.imagefile) {
gallerylist.value.push(file.name)
gallerylist.value.push(file.name);
} else {
gallerylist.value.push({ imagefile: file.name, vers_img })
gallerylist.value.push({ imagefile: file.name, vers_img, fieldtype: props.fieldtype });
}
}
}
save()
save();
console.log('CGALLERY gallerylist', gallerylist.value)
console.log('CGALLERY gallerylist', gallerylist.value);
}
}
function apri() {
displayGall.value = true
displayGall.value = true;
}
function deleted(rec: any) {
console.log('deleted', rec.imagefile)
console.log('deleted', rec.imagefile);
// console.table(mylistimages)
if (gallerylist.value) {
const index = gallerylist.value.findIndex((elem: any) => elem.imagefile === rec.imagefile)
const index = gallerylist.value.findIndex(
(elem: any) => elem.imagefile === rec.imagefile
);
if (index > -1) {
gallerylist.value.splice(index, 1)
gallerylist.value.splice(index, 1);
}
gallerylist.value = gallerylist.value.filter((elem: any) => typeof elem.imagefile === 'string' && elem.imagefile)
gallerylist.value = gallerylist.value.filter(
(elem: any) => typeof elem.imagefile === 'string' && elem.imagefile
);
// mylistimages = mylistimages.pop((elem) => elem.imagefile !== rec.imagefile)
// console.table(mylistimages)
console.log('single', props.single)
console.log('single', props.single);
save()
save();
}
}
function getfullname(rec: any) {
if (rec) {
return tools.getDirUpload() + props.directory + '/' + rec.imagefile
return tools.getDirUpload() + props.directory + '/' + rec.imagefile;
} else {
return props.imagebak
return props.imagebak;
}
}
function copytoclipboard(rec: any) {
const filename = getfullname(rec)
tools.copyStringToClipboard($q, filename, true)
const filename = getfullname(rec);
tools.copyStringToClipboard($q, filename, true);
}
function deleteFile(rec: any) {
console.log('deleteFile....')
const filename = getfullname(rec)
const filenamerel = filename.replace(/^.*[\\\/]/, '')
console.log('deleteFile....');
const filename = getfullname(rec);
const filenamerel = filename.replace(/^.*[\\\/]/, '');
$q.dialog({
message: 'Eliminare il file ' + filenamerel + '?',
@@ -333,91 +351,134 @@ export default defineComponent({
cancel: true,
persistent: false,
}).onOk(async () => {
// Delete File on server:
const ris = await globalStore.DeleteFile({ filename })
const ris = await globalStore.DeleteFile({ filename });
// console.log('ris', ris)
//if (ris)
deleted(rec)
})
deleted(rec);
});
}
function save() {
console.log('CGallery save', gallerylist.value)
console.log('CGallery save', gallerylist.value);
if (gallerylist.value.length > 0) {
if (!props.single) {
emit('showandsave', gallerylist.value)
emit('showandsave', gallerylist.value);
} else {
emit('showandsave', gallerylist.value[0])
emit('showandsave', gallerylist.value[0]);
}
} else {
emit('showandsave', !props.single ? [] : '')
emit('showandsave', !props.single ? [] : '');
}
}
function close() {
return ''
return '';
}
function getrealdirectory() {
if (props.directory == 'productinfos')
return 'products'
else
return props.directory
if (props.directory == 'productinfos') return 'products';
else return props.directory;
}
function getParamDir() {
return tools.escapeslash(getrealdirectory())
return tools.escapeslash(getrealdirectory());
}
function getUrl() {
const myurl = tools.geturlupload() + getParamDir()
console.log('myurl', myurl)
return myurl
const myurl = tools.geturlupload() + getParamDir();
console.log('myurl', myurl);
return myurl;
}
function ImgFullScreen(mygallery: IImgGallery) {
fullscreen.value = true
fullscreensrc.value = getfullname(mygallery)
fullscreen.value = true;
fullscreensrc.value = getfullname(mygallery);
}
function onRejected(rejectedEntries: any) {
// Notify plugin needs to be installed
// https://quasar.dev/quasar-plugins/notify#Installation
console.log('rejectedEntries', rejectedEntries)
console.log('rejectedEntries', rejectedEntries);
$q.notify({
type: 'negative',
message: 'La Dimensione massima dell\'immagine è di 2 MB'
})
message: "La Dimensione massima dell'immagine è di 2 MB",
});
}
function getFileTypeStr() {
let tipo = ''
if (props.filetype === shared_consts.FILETYPE.IMG)
tipo = 'Immagine'
else if (props.filetype === shared_consts.FILETYPE.PDF)
tipo = 'PDF'
let tipo = '';
if (props.filetype === shared_consts.FILETYPE.IMG) tipo = 'Immagine';
else if (props.filetype === shared_consts.FILETYPE.PDF) tipo = 'PDF';
return tipo
return tipo;
}
function getAccept() {
let tipo = ''
if (props.filetype === shared_consts.FILETYPE.IMG)
tipo = 'image/*'
else if (props.filetype === shared_consts.FILETYPE.PDF)
tipo = 'application/pdf'
let tipo = '';
if (props.filetype === shared_consts.FILETYPE.IMG) tipo = 'image/*';
else if (props.filetype === shared_consts.FILETYPE.PDF) tipo = 'application/pdf';
return tipo
return tipo;
}
function isPDF() {
return props.filetype === shared_consts.FILETYPE.PDF
return props.filetype === shared_consts.FILETYPE.PDF;
}
function isIMG() {
return props.filetype === shared_consts.FILETYPE.IMG
return props.filetype === shared_consts.FILETYPE.IMG;
}
const uploadFactory = async (files: readonly File[]) => {
const userStore = useUserStore();
const url = getUrl();
onMounted(created)
const buildFormData = () => {
const fd = new FormData();
// "file" è il fieldName atteso dal backend (adegua se diverso)
files.forEach((f) => fd.append('file', f, f.name));
// opzionale: passaggio di options come nel tuo backend
fd.append('options', JSON.stringify({ quality: 'original' }));
return fd;
};
const sendOnce = async () => {
return Api.SendReq(url, 'POST', buildFormData());
};
try {
await sendOnce();
} catch (err: any) {
const status = err?.response?.status;
try {
// usa la tua logica centralizzata
Api.checkTokenScaduto(
status,
/*evitaloop*/ false,
url,
'POST',
null,
/*setAuthToken*/ true
);
if (ret !== null) {
// token aggiornato -> ritenta UNA volta
await sendOnce();
} else {
throw err;
}
} catch (err2: any) {
// se l’handler segnala re-login, mostra messaggio e rilancia
const mystatus = err2?.status || err2?.code;
if (mystatus === toolsext.ERR_RETRY_LOGIN) {
$q.notify({
type: 'warning',
message: 'Sessione scaduta. Effettua nuovamente il login.',
});
}
throw err2;
}
}
};
onMounted(created);
return {
getlistimages,
@@ -453,6 +514,8 @@ export default defineComponent({
shared_consts,
isIMG,
isPDF,
}
}
})
upl,
uploadFactory,
};
},
});