453 lines
13 KiB
Vue
Executable File
453 lines
13 KiB
Vue
Executable File
<template>
|
|
<!--<div class="q-pa-md items-start " style="display: inline-flex; width: 800px;"> -->
|
|
|
|
<div v-if="!edit">
|
|
<div class="q-pa-xs">
|
|
<q-card
|
|
v-if="isListImgValid"
|
|
:class="getclass()"
|
|
@click="apri"
|
|
>
|
|
<div
|
|
v-for="(mygallery, index) in getlistimages()"
|
|
:key="index"
|
|
>
|
|
<div v-if="index === 0">
|
|
<div v-if="filetype === shared_consts.FILETYPE.IMG">
|
|
<q-img
|
|
:src="tools.getsrcimg(mygallery, getrealdirectory())"
|
|
:class="getclimg()"
|
|
:alt="mygallery.alt"
|
|
>
|
|
<div
|
|
v-if="getnumimages() > 1"
|
|
class="absolute-bottom text-shadow no-padding"
|
|
>
|
|
({{ getnumimages() }})
|
|
</div>
|
|
</q-img>
|
|
</div>
|
|
<div v-else-if="filetype === shared_consts.FILETYPE.PDF">
|
|
<div>{{ mygallery.imagefile }}</div>
|
|
<q-icon
|
|
name="fas fa-file-pdf"
|
|
:class="getclimg()"
|
|
size="lg"
|
|
:title="mygallery.alt"
|
|
>
|
|
</q-icon>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
<div v-else-if="!isInModif && !isListImgValid && imagebak">
|
|
<q-card
|
|
v-if="imagebak !== costanti.NESSUN_IMMAGINE"
|
|
:class="getclass()"
|
|
@click="ImgFullScreen(mygallery)"
|
|
>
|
|
<q-img
|
|
:src="imagebak"
|
|
:class="getclimg()"
|
|
>
|
|
</q-img>
|
|
</q-card>
|
|
</div>
|
|
<div v-else>
|
|
<q-card
|
|
:class="getclass()"
|
|
@click="apri"
|
|
>
|
|
<q-icon
|
|
v-if="filetype === shared_consts.FILETYPE.PDF"
|
|
name="fas fa-file-pdf"
|
|
size="lg"
|
|
:class="getclimg()"
|
|
alt="no image"
|
|
>
|
|
</q-icon>
|
|
<q-img
|
|
v-else
|
|
src="/images/noimg.png"
|
|
:class="getclimg()"
|
|
alt="no image"
|
|
>
|
|
</q-img>
|
|
</q-card>
|
|
</div>
|
|
|
|
<q-btn
|
|
v-if="isInModif"
|
|
color="primary"
|
|
@click="apri"
|
|
icon="fas fa-file-upload"
|
|
:label="isIMG() ? $t('gallery.load_image') : $t('gallery.load_pdf')"
|
|
>
|
|
</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>
|
|
</div>
|
|
<div v-else>
|
|
<div class="row">
|
|
<!--<q-draggable-rows
|
|
v-model="order">-->
|
|
|
|
<div
|
|
v-for="(mygallery, index) in getlistimages()"
|
|
:key="index"
|
|
>
|
|
<div
|
|
class="q-pa-sm q-gutter-sm"
|
|
@dragenter="onDragEnter"
|
|
@dragleave="onDragLeave"
|
|
@dragover="onDragOver"
|
|
>
|
|
<q-card
|
|
:id="mygallery._id"
|
|
:class="getclass()"
|
|
:draggable="canModify"
|
|
@dragstart="onDragStart"
|
|
@drop="onDrop"
|
|
>
|
|
<q-img
|
|
:src="tools.getsrcimg(mygallery, getrealdirectory())"
|
|
:class="getclimg()"
|
|
: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>
|
|
</q-img>
|
|
|
|
<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>
|
|
</template>
|
|
</q-field>
|
|
|
|
<q-input
|
|
v-if="canModify"
|
|
v-model="mygallery.description"
|
|
dense
|
|
:label="$t('proj.longdescr')"
|
|
@keyup.enter.stop
|
|
@update:model-value="save"
|
|
debounce="1000"
|
|
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>
|
|
<q-btn
|
|
v-if="canModify"
|
|
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"
|
|
>
|
|
<q-uploader
|
|
:label="
|
|
single && gallerylist.length > 0 && gallerylist[0].imagefile !== ''
|
|
? 'Sostituisci Immagine'
|
|
: 'Aggiungi Immagine'
|
|
"
|
|
:accept="getAccept()"
|
|
:url="getUrl()"
|
|
:headers="tools.getheaders()"
|
|
:max-file-size="3000000"
|
|
:multiple="!single"
|
|
auto-upload
|
|
hide-upload-btn
|
|
no-thumbnails
|
|
@uploaded="uploaded"
|
|
@rejected="onRejected"
|
|
style="width: 208px"
|
|
:options="uploadOptions"
|
|
></q-uploader>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<q-dialog
|
|
v-model="displayGall"
|
|
persistent
|
|
:maximized="maximizedToggle"
|
|
transition-show="slide-up"
|
|
transition-hide="slide-down"
|
|
>
|
|
<q-card>
|
|
<q-bar class="bg-primary text-white">
|
|
<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>
|
|
<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-btn>
|
|
</q-bar>
|
|
|
|
<q-card-section>
|
|
<div class="text-h6">{{ title }}</div>
|
|
</q-card-section>
|
|
|
|
<q-card-section class="q-pt-none">
|
|
<div class="row">
|
|
<div
|
|
v-for="(mygallery, index) in getlistimages()"
|
|
:key="index"
|
|
>
|
|
<div
|
|
class="q-pa-sm barwidth"
|
|
@dragenter="onDragEnter"
|
|
@dragleave="onDragLeave"
|
|
@dragover="onDragOver"
|
|
>
|
|
<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 v-if="isIMG()">Foto {{ index + 1 }}</div>
|
|
<div v-else-if="isPDF()">PDF {{ 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-bar>
|
|
|
|
<q-card
|
|
:id="mygallery._id"
|
|
:class="getclass()"
|
|
:data-ind="index"
|
|
:draggable="canModify"
|
|
@dragstart="onDragStart"
|
|
@drop="onDrop"
|
|
>
|
|
<q-img
|
|
v-if="isIMG()"
|
|
:src="tools.getsrcimg(mygallery, getrealdirectory())"
|
|
:class="getclimg()"
|
|
@click="ImgFullScreen(mygallery)"
|
|
: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>
|
|
</q-img>
|
|
<q-card-section>
|
|
<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>
|
|
</template>
|
|
</q-field>
|
|
<q-input
|
|
v-if="canModify"
|
|
v-model="mygallery.description"
|
|
dense
|
|
:label="$t('proj.longdescr')"
|
|
@keyup.enter.stop
|
|
@update:model-value="save"
|
|
debounce="1000"
|
|
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"
|
|
>
|
|
<q-uploader
|
|
:label="`Aggiungi ` + getFileTypeStr()"
|
|
:accept="getAccept()"
|
|
:url="getUrl()"
|
|
:headers="tools.getheaders()"
|
|
:max-file-size="40000000"
|
|
multiple
|
|
auto-upload
|
|
hide-upload-btn
|
|
no-thumbnails
|
|
@uploaded="uploaded"
|
|
@rejected="onRejected"
|
|
style="width: 208px"
|
|
></q-uploader>
|
|
</div>
|
|
</div>
|
|
<div v-if="!isInModif && !isListImgValid && imagebak">
|
|
<q-card
|
|
:class="getclass()"
|
|
@click="ImgFullScreen(mygallery)"
|
|
>
|
|
<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-card-actions>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
<q-dialog
|
|
v-model="fullscreen"
|
|
:maximized="false"
|
|
transition-show="slide-up"
|
|
transition-hide="slide-down"
|
|
>
|
|
<q-card class="my-card">
|
|
<q-img
|
|
v-if="fullscreensrc"
|
|
alt="fullscreen"
|
|
:src="fullscreensrc"
|
|
@click="fullscreen = false"
|
|
></q-img>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<script lang="ts" src="./CGallery.ts"></script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './CGallery.scss';
|
|
</style>
|