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

- Le immagini uploadate non vengono visualizzate subito... cache... aggiungere la versione dell'immagine: vers_img

Browse Source 
- Aggiunto il Server TESTRISO e TEST_PCB.
This commit is contained in:
Surya Paolo
2024-09-17 17:38:57 +02:00
parent 0872afbb39
commit b9a5c54071
86 changed files with 2154 additions and 1532 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/CSelectImage/CSelectImage.ts
View File

@@ -81,7 +81,7 @@ export default defineComponent({
if (Array.isArray(myarr)) {
myarr.forEach((imgfile: string) => {
if (imgfile) {
gallerylist.value.push({ imagefile: imgfile })
gallerylist.value.push({ imagefile: imgfile, vers_img: 1 })
}
})
}
@@ -92,11 +92,6 @@ export default defineComponent({
}
function showandsave(value: any) {
console.log('EMIT: showandsave')
emit('showandsave', value)
}
function getnumimages() {
if (gallerylist.value)
return gallerylist.value.length
@@ -218,12 +213,18 @@ export default defineComponent({
function uploaded(info: any) {
console.log('uploaded', info)
let vers_img = tools.getGenerateVersionImage()
if (gallerylist.value) {
for (const file of info.files) {
gallerylist.value.push({ imagefile: file.name })
if (file.name.imagefile) {
gallerylist.value.push(file.name)
} else {
gallerylist.value.push({ imagefile: file.name, vers_img })
}
}
console.log('gallerylist', gallerylist.value)
console.log('CSELECtIMAGE gallerylist', gallerylist.value)
}
}
@@ -288,11 +289,11 @@ export default defineComponent({
}
function save() {
console.log('CGallery save', gallerylist.value)
console.log('CSelectImage save', gallerylist.value)
if (gallerylist.value.length > 0) {
emit('showandsave', gallerylist.value[0].imagefile)
emit('showandsave', gallerylist.value[0])
} else {
emit('showandsave', '')
emit('showandsave', { imagefile: '' })
}
}
@@ -300,21 +301,6 @@ export default defineComponent({
return ''
}
function getsrcimg(imgfile: any) {
if (!imgfile.imagefile) {
return 'images/noimg.png';
}
if (imgfile) {
if (tools.getextfile(imgfile.imagefile) === 'pdf')
return 'images/images/pdf.jpg'
else
return costanti.DIR_UPLOAD + props.directory + '/' + imgfile.imagefile
} else {
return 'images/noimg.png';
}
}
function getParamDir() {
return tools.escapeslash(props.directory)
}
@@ -341,18 +327,25 @@ export default defineComponent({
}
onMounted(created)
function getrealdirectory() {
if (props.directory == 'productinfos')
return 'products'
else
return props.directory
}
return {
getlistimages,
onDragStart,
onDragEnter,
onDragLeave,
onDragOver,
getrealdirectory,
onDrop,
getclass,
getclimg,
copytoclipboard,
deleteFile,
getsrcimg,
tools,
uploaded,
gallerylist,

250
src/components/CSelectImage/CSelectImage.vue
View File

@@ -7,48 +7,57 @@
<div v-for="(imgfile, index) in getlistimages()" :key="index">
<div v-if="index === 0">
<q-img
:src="getsrcimg(imgfile)" :class="getclimg()">
<div v-if="getnumimages() > 1" class="absolute-bottom text-shadow no-padding">
:src="tools.getsrcimg(imgfile, getrealdirectory())"
:class="getclimg()"
>
<div
v-if="getnumimages() > 1"
class="absolute-bottom text-shadow no-padding"
>
({{ getnumimages() }})
</div>
</q-img>
</div>
</div>
</q-card>
<div v-else-if="!isInModif && !isListImgValid && imagebak">
<q-card v-if="imagebak !== costanti.NESSUN_IMMAGINE" :class="getclass()" @click="ImgFullScreen(imgfile)">
<q-img
:src="imagebak" :class="getclimg()">
</q-img>
<q-card
v-if="imagebak !== costanti.NESSUN_IMMAGINE"
:class="getclass()"
@click="ImgFullScreen(imgfile)"
>
<q-img :src="imagebak" :class="getclimg()"> </q-img>
</q-card>
</div>
<div v-else>
<q-card :class="getclass()" @click="apri">
<q-img
src="images/noimg.png" :class="getclimg()"
alt="no image">
<q-img src="images/noimg.png" :class="getclimg()" alt="no image">
</q-img>
</q-card>
</div>
<q-btn
v-if="isInModif"
color="primary" @click="apri"
color="primary"
@click="apri"
icon="fas fa-file-upload"
:label="$t('gallery.load_image')">
:label="$t('gallery.load_image')"
>
</q-btn>
</div>
</div>
<div v-else>
<div v-if="!isListImgValid">
<q-btn
flat round color="blue" icon="fas fa-tools" size="md"
@click="apri"></q-btn>
flat
round
color="blue"
icon="fas fa-tools"
size="md"
@click="apri"
></q-btn>
</div>
<div v-else>
<div class=" row">
<div class="row">
<!--<q-draggable-rows
v-model="order">-->
@@ -57,34 +66,34 @@
class="q-pa-sm q-gutter-sm"
@dragenter="onDragEnter"
@dragleave="onDragLeave"
@dragover="onDragOver">
@dragover="onDragOver"
>
<q-card
:id="mygallery._id" :class="getclass()"
:id="mygallery._id"
:class="getclass()"
:draggable="canModify"
@dragstart="onDragStart"
@drop="onDrop"
>
<q-img
:src="getsrcimg(mygallery)"
:src="tools.getsrcimg(mygallery, getrealdirectory())"
:class="getclimg()"
:alt="mygallery.alt">
:alt="mygallery.alt"
>
<div class="absolute-bottom text-shadow">
<!-- <div class="text-h6 text-trans">{{ mygallery.description }} </div> -->
<div class="text-subtitle-carica text-trans">{{ mygallery.description }}</div>
<div class="text-subtitle-carica text-trans">
{{ mygallery.description }}
</div>
</div>
</q-img>
<q-field
v-if="canModify"
stack-label
dense
label="Nome File">
<q-field v-if="canModify" stack-label dense label="Nome File">
<template v-slot:control>
<div class="self-center full-width no-outline" tabindex="0">{{ mygallery.imagefile }}</div>
<div class="self-center full-width no-outline" tabindex="0">
{{ mygallery.imagefile }}
</div>
</template>
</q-field>
<q-input
@@ -95,24 +104,39 @@
@keyup.enter.stop
@update:model-value="save"
debounce="1000"
autofocus>
autofocus
>
</q-input>
<q-card-actions align="center">
<q-btn
v-if="canModify"
flat round color="blue" icon="fas fa-copy" size="sm"
@click="copytoclipboard(mygallery)"></q-btn>
flat
round
color="blue"
icon="fas fa-copy"
size="sm"
@click="copytoclipboard(mygallery)"
></q-btn>
<q-btn
v-if="canModify"
flat round color="red" icon="fas fa-trash-alt" size="sm"
@click="deleteFile(mygallery)"></q-btn>
flat
round
color="red"
icon="fas fa-trash-alt"
size="sm"
@click="deleteFile(mygallery)"
></q-btn>
</q-card-actions>
</q-card>
</div>
</div>
<div class="q-pa-sm">
<div v-if="edit" class="q-gutter-sm " style="max-height: 200px; width: 208px;">
<div
v-if="edit"
class="q-gutter-sm"
style="max-height: 200px; width: 208px"
>
<q-uploader
label="Aggiungi Immagine"
accept="image/*"
@@ -141,16 +165,45 @@
>
<q-card>
<q-bar class="bg-primary text-white">
<q-space/>
<q-space />
<q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
<q-tooltip v-if="maximizedToggle" :class="($q.dark.isActive ? `bg-black` : `bg-white`) + ` text-primary`">Minimize</q-tooltip>
<q-btn
dense
flat
icon="minimize"
@click="maximizedToggle = false"
:disable="!maximizedToggle"
>
<q-tooltip
v-if="maximizedToggle"
:class="
($q.dark.isActive ? `bg-black` : `bg-white`) + ` text-primary`
"
>Minimize</q-tooltip
>
</q-btn>
<q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
<q-tooltip v-if="!maximizedToggle" :class="($q.dark.isActive ? `bg-black` : `bg-white`) + ` text-primary`">Maximize</q-tooltip>
<q-btn
dense
flat
icon="crop_square"
@click="maximizedToggle = true"
:disable="maximizedToggle"
>
<q-tooltip
v-if="!maximizedToggle"
:class="
($q.dark.isActive ? `bg-black` : `bg-white`) + ` text-primary`
"
>Maximize</q-tooltip
>
</q-btn>
<q-btn dense flat icon="close" v-close-popup>
<q-tooltip :class="($q.dark.isActive ? `bg-black` : `bg-white`) + ` text-primary`">{{t('dialog.close')}}</q-tooltip>
<q-tooltip
:class="
($q.dark.isActive ? `bg-black` : `bg-white`) + ` text-primary`
"
>{{ t('dialog.close') }}</q-tooltip
>
</q-btn>
</q-bar>
@@ -159,8 +212,7 @@
</q-card-section>
<q-card-section class="q-pt-none">
<div class=" row">
<div class="row">
<div v-for="(mygallery, index) in getlistimages()" :key="index">
<div
class="q-pa-sm barwidth"
@@ -168,49 +220,62 @@
@dragleave="onDragLeave"
@dragover="onDragOver"
>
<q-bar
class="bg-primary text-white"
>
<q-btn flat round dense icon="menu" class="q-mr-sm"/>
<q-bar class="bg-primary text-white">
<q-btn flat round dense icon="menu" class="q-mr-sm" />
<q-btn
v-if="canModify"
flat round icon="fas fa-copy" size="sm"
@click="copytoclipboard(mygallery)"></q-btn>
<div>
Foto {{ index + 1 }}
</div>
flat
round
icon="fas fa-copy"
size="sm"
@click="copytoclipboard(mygallery)"
></q-btn>
<div>Foto {{ index + 1 }}</div>
<q-space></q-space>
<q-btn v-if="canModify" flat round color="red" icon="fas fa-trash-alt"
@click="deleteFile(mygallery)"></q-btn>
<q-btn
v-if="canModify"
flat
round
color="red"
icon="fas fa-trash-alt"
@click="deleteFile(mygallery)"
></q-btn>
</q-bar>
<q-card
:id="mygallery._id" :class="getclass()"
:id="mygallery._id"
:class="getclass()"
:data-ind="index"
:draggable="canModify"
@dragstart="onDragStart"
@drop="onDrop"
>
<q-img
:src="getsrcimg(mygallery)"
:src="tools.getsrcimg(mygallery, getrealdirectory())"
:class="getclimg()"
@click="ImgFullScreen(mygallery)"
:alt="mygallery.alt">
<div v-if="mygallery.description" class="absolute-bottom text-shadow">
:alt="mygallery.alt"
>
<div
v-if="mygallery.description"
class="absolute-bottom text-shadow"
>
<!-- <div class="text-h6 text-trans">{{ mygallery.description }} </div> -->
<div class="text-subtitle-carica text-trans">{{ mygallery.description }}</div>
<div class="text-subtitle-carica text-trans">
{{ mygallery.description }}
</div>
</div>
</q-img>
<q-card-section>
<q-field
v-if="canModify"
stack-label
dense
label="Nome File">
<q-field v-if="canModify" stack-label dense label="Nome File">
<template v-slot:control>
<div class="self-center full-width no-outline" tabindex="0">{{ mygallery.imagefile }}</div>
<div
class="self-center full-width no-outline"
tabindex="0"
>
{{ mygallery.imagefile }}
</div>
</template>
</q-field>
<q-input
v-if="canModify"
@@ -220,17 +285,15 @@
@keyup.enter.stop
@update:model-value="save"
debounce="1000"
autofocus>
autofocus
>
</q-input>
</q-card-section>
</q-card>
</div>
</div>
<div
v-if="canModify"
class="q-pa-sm">
<div class="q-gutter-sm " style="max-height: 200px; width: 208px;">
<div v-if="canModify" class="q-pa-sm">
<div class="q-gutter-sm" style="max-height: 200px; width: 208px">
<q-uploader
label="Aggiungi Immagine"
accept="image/*"
@@ -248,24 +311,34 @@
</div>
</div>
<div v-if="!isInModif && !isListImgValid && imagebak">
<q-card :class="getclass()" @click="ImgFullScreen(mygallery)">
<q-img
:src="imagebak" :class="getclimg()">
</q-img>
<q-img :src="imagebak" :class="getclimg()"> </q-img>
</q-card>
</div>
</div>
<q-card-actions align="right">
<q-btn v-if="canModify" flat label="Annulla" color="primary" v-close-popup/>
<q-btn v-if="canModify" label="salva" color="primary" v-close-popup @click="save"/>
<q-btn v-if="!canModify" label="Chiudi" color="primary" v-close-popup/>
<q-btn
v-if="canModify"
flat
label="Annulla"
color="primary"
v-close-popup
/>
<q-btn
v-if="canModify"
label="salva"
color="primary"
v-close-popup
@click="save"
/>
<q-btn
v-if="!canModify"
label="Chiudi"
color="primary"
v-close-popup
/>
</q-card-actions>
</q-card-section>
</q-card>
</q-dialog>
@@ -276,7 +349,12 @@
transition-hide="slide-down"
>
<q-card class="my-card">
<q-img v-if="fullscreensrc" alt="fullscreen" :src="fullscreensrc" @click="fullscreen = false"></q-img>
<q-img
v-if="fullscreensrc"
alt="fullscreen"
:src="fullscreensrc"
@click="fullscreen = false"
></q-img>
</q-card>
</q-dialog>
</template>