Web Editor home made
This commit is contained in:
Surya Paolo
65
src/components/CSelectImage/CSelectImage.scss
Executable file
65
src/components/CSelectImage/CSelectImage.scss
Executable file
@@ -0,0 +1,65 @@
|
||||
$heightBtn: 100%;
|
||||
$grayshadow: #555;
|
||||
|
||||
.text-subtitle-gallery {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.75rem;
|
||||
letter-spacing: .00937em;
|
||||
text-shadow: .1rem .1rem .1rem $grayshadow;
|
||||
}
|
||||
|
||||
@media (max-width: 718px) {
|
||||
// PER VERSIONE MOBILE
|
||||
.text-subtitle-gallery {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.myimg {
|
||||
border-radius: 10px !important;
|
||||
height: 200px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.myimg-modify {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
|
||||
.barwidth{
|
||||
width: 250px !important;
|
||||
}
|
||||
|
||||
|
||||
.q-img {
|
||||
&__image {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.my-card-gallery {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
min-width: 200px;
|
||||
padding: 0.5rem 0.5rem;
|
||||
height: 350px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.my-card-gallery-noModif {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
min-width: 200px;
|
||||
padding: 1rem 1rem;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.my-card-gallery-view {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.25rem 0.25rem;
|
||||
margin: auto;
|
||||
}
|
||||
374
src/components/CSelectImage/CSelectImage.ts
Executable file
374
src/components/CSelectImage/CSelectImage.ts
Executable file
@@ -0,0 +1,374 @@
|
||||
import { defineComponent, ref, PropType, watch, onMounted, computed } from 'vue'
|
||||
import { useI18n } from '@src/boot/i18n'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
import { useQuasar } from 'quasar'
|
||||
import { IGallery, IImgGallery } from 'model'
|
||||
import { CMyPage } from '@/components/CMyPage'
|
||||
import { tools } from '@store/Modules/tools'
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
import { costanti } from '@costanti'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CSelectImage',
|
||||
props: {
|
||||
edit: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
canModify: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
isInModif: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
title: String,
|
||||
directory: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
imagebak: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
imgGall: {
|
||||
type: Object as PropType<IImgGallery[] | string | undefined | null>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ['showandsave'],
|
||||
components: { CMyPage },
|
||||
setup(props, { emit }) {
|
||||
const $q = useQuasar()
|
||||
const { t } = useI18n()
|
||||
const userStore = useUserStore()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const displayGall = ref(false)
|
||||
|
||||
const gallerylist = ref(<IImgGallery[]>[])
|
||||
const maximizedToggle = ref(true)
|
||||
|
||||
const fullscreen = ref(false)
|
||||
const fullscreensrc = ref('')
|
||||
|
||||
|
||||
function isValid(myobj: any): boolean {
|
||||
return (myobj && typeof myobj !== 'string' && typeof myobj !== 'undefined')
|
||||
}
|
||||
|
||||
const isListImgValid = computed(() => {
|
||||
const arr = getlistimages()
|
||||
if (arr && tools.isArray(arr)) {
|
||||
return arr.length > 0
|
||||
} else {
|
||||
return !!arr
|
||||
}
|
||||
})
|
||||
|
||||
watch(() => props.imgGall, (newval, oldval) => {
|
||||
updateArray()
|
||||
})
|
||||
|
||||
function updateArray() {
|
||||
// console.log('created cgallery')
|
||||
// @ts-ignore
|
||||
let myarr: any = props.imgGall
|
||||
gallerylist.value = []
|
||||
if (Array.isArray(myarr)) {
|
||||
myarr.forEach((imgfile: string) => {
|
||||
if (imgfile) {
|
||||
gallerylist.value.push({ imagefile: imgfile })
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function created() {
|
||||
updateArray()
|
||||
}
|
||||
|
||||
|
||||
function showandsave(value: any) {
|
||||
console.log('EMIT: showandsave')
|
||||
emit('showandsave', value)
|
||||
}
|
||||
|
||||
function getnumimages() {
|
||||
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
|
||||
else
|
||||
return null
|
||||
}
|
||||
|
||||
function onDragStart(e: any) {
|
||||
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')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onDragLeave(e: any) {
|
||||
if (props.canModify) {
|
||||
e.target.classList.remove('drag-enter')
|
||||
}
|
||||
}
|
||||
|
||||
function onDragOver(e: any) {
|
||||
if (props.canModify) {
|
||||
e.preventDefault()
|
||||
}
|
||||
}
|
||||
|
||||
function onDrop(e: any) {
|
||||
if (props.canModify) {
|
||||
console.log('onDrop', e)
|
||||
e.preventDefault()
|
||||
|
||||
// don't drop on other draggables
|
||||
if (e.target.draggable === true) {
|
||||
return
|
||||
}
|
||||
|
||||
if (gallerylist.value) {
|
||||
|
||||
const draggedId = e.dataTransfer.getData('text')
|
||||
let dragout = ''
|
||||
try {
|
||||
dragout = e.target.parentNode.parentNode.parentNode.id
|
||||
} catch (err) {
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
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]
|
||||
|
||||
if (myindexIn === myindexout)
|
||||
return
|
||||
|
||||
|
||||
tools.array_move(gallerylist.value, myindexIn, myindexout)
|
||||
|
||||
// make the exchange
|
||||
// draggedEl.parentNode.removeChild(draggedEl)
|
||||
// e.target.appendChild(draggedEl)
|
||||
e.target.classList.remove('drag-enter')
|
||||
|
||||
save()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getclass() {
|
||||
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
|
||||
}
|
||||
|
||||
/*function getlastord() {
|
||||
if (gallerylist.value) {
|
||||
let myord = 0
|
||||
for (const file of gallerylist.value) {
|
||||
if (file.order! > myord)
|
||||
myord = file.order!
|
||||
}
|
||||
|
||||
return myord + 10
|
||||
}
|
||||
}*/
|
||||
|
||||
function uploaded(info: any) {
|
||||
console.log('uploaded', info)
|
||||
if (gallerylist.value) {
|
||||
for (const file of info.files) {
|
||||
gallerylist.value.push({ imagefile: file.name })
|
||||
}
|
||||
|
||||
console.log('gallerylist', gallerylist.value)
|
||||
}
|
||||
}
|
||||
|
||||
function apri() {
|
||||
displayGall.value = true
|
||||
}
|
||||
|
||||
function deleted(rec: any) {
|
||||
console.log('deleted', rec.imagefile)
|
||||
// console.table(mylistimages)
|
||||
|
||||
if (gallerylist.value) {
|
||||
const index = gallerylist.value.findIndex((elem: any) => elem.imagefile === rec.imagefile)
|
||||
if (index > -1) {
|
||||
gallerylist.value.splice(index, 1)
|
||||
}
|
||||
|
||||
// mylistimages = mylistimages.pop((elem) => elem.imagefile !== rec.imagefile)
|
||||
|
||||
// console.table(mylistimages)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function getfullname(rec: any) {
|
||||
if (rec) {
|
||||
return costanti.DIR_UPLOAD + props.directory + '/' + rec.imagefile
|
||||
} else {
|
||||
return props.imagebak
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function copytoclipboard(rec: any) {
|
||||
const filename = getfullname(rec)
|
||||
tools.copyStringToClipboard($q, filename, true)
|
||||
}
|
||||
|
||||
function deleteFile(rec: any) {
|
||||
console.log('deleteFile....')
|
||||
const filename = getfullname(rec)
|
||||
const filenamerel = filename.replace(/^.*[\\\/]/, '')
|
||||
|
||||
$q.dialog({
|
||||
message: 'Eliminare il file ' + filenamerel + '?',
|
||||
html: true,
|
||||
ok: {
|
||||
label: 'Elimina',
|
||||
push: true,
|
||||
},
|
||||
title: filenamerel,
|
||||
cancel: true,
|
||||
persistent: false,
|
||||
}).onOk(async () => {
|
||||
|
||||
// Delete File on server:
|
||||
const ris = await globalStore.DeleteFile({ filename })
|
||||
// console.log('ris', ris)
|
||||
if (ris)
|
||||
deleted(rec)
|
||||
})
|
||||
}
|
||||
|
||||
function save() {
|
||||
console.log('CGallery save', gallerylist.value)
|
||||
if (gallerylist.value.length > 0) {
|
||||
emit('showandsave', gallerylist.value[0].imagefile)
|
||||
} else {
|
||||
emit('showandsave', '')
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
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)
|
||||
}
|
||||
|
||||
function getUrl() {
|
||||
const myurl = tools.geturlupload() + getParamDir()
|
||||
console.log('myurl', myurl)
|
||||
return myurl
|
||||
}
|
||||
|
||||
function ImgFullScreen(mygallery: IImgGallery) {
|
||||
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)
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: 'La Dimensione massima dell\'immagine è di 2 MB'
|
||||
})
|
||||
}
|
||||
onMounted(created)
|
||||
|
||||
return {
|
||||
getlistimages,
|
||||
onDragStart,
|
||||
onDragEnter,
|
||||
onDragLeave,
|
||||
onDragOver,
|
||||
onDrop,
|
||||
getclass,
|
||||
getclimg,
|
||||
copytoclipboard,
|
||||
deleteFile,
|
||||
getsrcimg,
|
||||
tools,
|
||||
uploaded,
|
||||
gallerylist,
|
||||
getnumimages,
|
||||
apri,
|
||||
displayGall,
|
||||
save,
|
||||
maximizedToggle,
|
||||
getUrl,
|
||||
close,
|
||||
ImgFullScreen,
|
||||
fullscreen,
|
||||
fullscreensrc,
|
||||
onRejected,
|
||||
isListImgValid,
|
||||
costanti,
|
||||
}
|
||||
}
|
||||
})
|
||||
289
src/components/CSelectImage/CSelectImage.vue
Executable file
289
src/components/CSelectImage/CSelectImage.vue
Executable file
@@ -0,0 +1,289 @@
|
||||
<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="(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">
|
||||
({{ 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>
|
||||
|
||||
</div>
|
||||
<div v-else>
|
||||
<q-card :class="getclass()" @click="apri">
|
||||
<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"
|
||||
icon="fas fa-file-upload"
|
||||
: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>
|
||||
</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="getsrcimg(mygallery)"
|
||||
: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="Aggiungi Immagine"
|
||||
accept="image/jpeg, image/jpg, image/png, .pdf"
|
||||
:url="getUrl()"
|
||||
:headers="tools.getheaders()"
|
||||
:max-file-size="3000000"
|
||||
multiple
|
||||
auto-upload
|
||||
hide-upload-btn
|
||||
no-thumbnails
|
||||
@uploaded="uploaded"
|
||||
@rejected="onRejected"
|
||||
style="width: 208px"
|
||||
></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="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="bg-white text-primary">Maximize</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn dense flat icon="close" v-close-popup>
|
||||
<q-tooltip class="bg-white text-primary">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>
|
||||
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-bar>
|
||||
|
||||
<q-card
|
||||
:id="mygallery._id" :class="getclass()"
|
||||
:data-ind="index"
|
||||
:draggable="canModify"
|
||||
@dragstart="onDragStart"
|
||||
@drop="onDrop"
|
||||
>
|
||||
<q-img
|
||||
:src="getsrcimg(mygallery)"
|
||||
: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 Immagine"
|
||||
accept="image/jpeg, image/jpg, image/png, .pdf"
|
||||
: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="./CSelectImage.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './CSelectImage.scss';
|
||||
</style>
|
||||
1
src/components/CSelectImage/index.ts
Executable file
1
src/components/CSelectImage/index.ts
Executable file
@@ -0,0 +1 @@
|
||||
export {default as CSelectImage} from './CSelectImage.vue'
|
||||
Reference in New Issue
Block a user