- Gallery: added deleting images.
This commit is contained in:
Paolo Arena
47
src/components/CGallery/CGallery.scss
Normal file
47
src/components/CGallery/CGallery.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
$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;
|
||||
}
|
||||
|
||||
.myimg-view {
|
||||
border-radius: 5px !important;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.q-img {
|
||||
&__image {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.my-card-gallery {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
min-width: 200px;
|
||||
padding: 1rem 1rem;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.my-card-gallery-view {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.5rem 0.5rem;
|
||||
}
|
||||
158
src/components/CGallery/CGallery.ts
Normal file
158
src/components/CGallery/CGallery.ts
Normal file
@@ -0,0 +1,158 @@
|
||||
import Vue from 'vue'
|
||||
import { Component, Prop, Watch } from 'vue-property-decorator'
|
||||
|
||||
import { tools } from '../../store/Modules/tools'
|
||||
import { toolsext } from '@src/store/Modules/toolsext'
|
||||
import { IGallery, IImgGallery } from '../../model/GlobalStore'
|
||||
import { CMyPage } from '../CMyPage'
|
||||
import GlobalModule from '../../store/Modules/GlobalStore'
|
||||
import { GlobalStore } from '../../store/Modules'
|
||||
|
||||
@Component({
|
||||
name: 'CGallery',
|
||||
components: { CMyPage }
|
||||
})
|
||||
|
||||
export default class CGallery extends Vue {
|
||||
@Prop({ required: true }) public edit: boolean
|
||||
@Prop({ required: true }) public gall: IGallery
|
||||
@Prop({ required: true }) public listimages: IImgGallery[]
|
||||
|
||||
get tools() {
|
||||
return tools
|
||||
}
|
||||
|
||||
get getlistimages() {
|
||||
if (this.listimages)
|
||||
return this.listimages.sort((a, b) => a.order - b.order)
|
||||
else
|
||||
return null
|
||||
}
|
||||
|
||||
public onDragStart(e) {
|
||||
console.log('onDragStart')
|
||||
e.dataTransfer.setData('text', e.target.id)
|
||||
e.dataTransfer.dropEffect = 'move'
|
||||
}
|
||||
|
||||
public onDragEnter(e) {
|
||||
// don't drop on other draggables
|
||||
if (e.target.draggable !== true) {
|
||||
e.target.classList.add('drag-enter')
|
||||
}
|
||||
}
|
||||
|
||||
public onDragLeave(e) {
|
||||
e.target.classList.remove('drag-enter')
|
||||
}
|
||||
|
||||
public onDragOver(e) {
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
public onDrop(e) {
|
||||
console.log('onDrop', e)
|
||||
e.preventDefault()
|
||||
|
||||
// don't drop on other draggables
|
||||
if (e.target.draggable === true) {
|
||||
return
|
||||
}
|
||||
|
||||
const draggedId = e.dataTransfer.getData('text')
|
||||
const draggedEl = document.getElementById(draggedId)
|
||||
console.log('draggedId', draggedId, 'draggedEl', draggedEl)
|
||||
|
||||
// check if original parent node
|
||||
if (draggedEl.parentNode === e.target) {
|
||||
e.target.classList.remove('drag-enter')
|
||||
return
|
||||
}
|
||||
|
||||
const myindex = this.listimages.findIndex((rec) => rec._id === draggedId)
|
||||
const myrec = this.listimages[myindex]
|
||||
let myrecprec = null
|
||||
if (myindex > 0)
|
||||
myrecprec = this.listimages[myindex - 1]
|
||||
|
||||
console.log('myrec', myrec, 'myrecprec', myrecprec, 'ord1', myrec.order, 'ordprec', myrecprec.order)
|
||||
|
||||
if (myrecprec) {
|
||||
let diff = (myrec.order - myrecprec.order) / 2
|
||||
if (diff <= 0)
|
||||
diff++
|
||||
myrec.order = myrecprec.order + diff
|
||||
} else {
|
||||
myrec.order = (myrec.order - 1)
|
||||
}
|
||||
|
||||
console.log('myrec.order', myrec.order)
|
||||
|
||||
// make the exchange
|
||||
// draggedEl.parentNode.removeChild(draggedEl)
|
||||
// e.target.appendChild(draggedEl)
|
||||
e.target.classList.remove('drag-enter')
|
||||
|
||||
this.save()
|
||||
}
|
||||
|
||||
get getclass() {
|
||||
return (this.edit) ? 'my-card-gallery' : 'my-card-gallery-view' + ' text-center'
|
||||
}
|
||||
get getclimg() {
|
||||
return (this.edit) ? 'myimg' : 'myimg-view'
|
||||
}
|
||||
|
||||
get getlastord() {
|
||||
let myord = 0
|
||||
for (const file of this.listimages) {
|
||||
if (file.order > myord)
|
||||
myord = file.order
|
||||
}
|
||||
|
||||
return myord + 10
|
||||
}
|
||||
|
||||
public uploaded(info) {
|
||||
console.log(info)
|
||||
for (const file of info.files) {
|
||||
this.listimages.push({ imagefile: file.name, order: this.getlastord })
|
||||
}
|
||||
|
||||
this.save()
|
||||
}
|
||||
|
||||
public deleted(rec) {
|
||||
console.table(this.listimages)
|
||||
|
||||
const index = this.listimages.findIndex((elem) => elem.imagefile === rec.imagefile)
|
||||
if (index > -1) {
|
||||
this.listimages.splice(index, 1)
|
||||
}
|
||||
|
||||
// this.listimages = this.listimages.pop((elem) => elem.imagefile !== rec.imagefile)
|
||||
|
||||
console.table(this.listimages)
|
||||
|
||||
this.save()
|
||||
}
|
||||
|
||||
public getfullname(rec) {
|
||||
return 'statics/upload/' + this.gall.directory + `/` + rec.imagefile
|
||||
}
|
||||
|
||||
public async deleteFile(rec) {
|
||||
const filename = this.getfullname(rec)
|
||||
|
||||
// Delete File on server:
|
||||
const ris = await GlobalStore.actions.DeleteFile({filename})
|
||||
if (ris)
|
||||
this.deleted(rec)
|
||||
|
||||
}
|
||||
|
||||
public save() {
|
||||
this.$emit('showandsave', this.listimages)
|
||||
}
|
||||
|
||||
}
|
||||
97
src/components/CGallery/CGallery.vue
Normal file
97
src/components/CGallery/CGallery.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<!--<div class="q-pa-md items-start " style="display: inline-flex; width: 800px;"> -->
|
||||
<div>
|
||||
<div v-if="!edit">
|
||||
<div v-for="(mygallery, index) in listimages" :key="index" v-if="index === 0">
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<q-card :class="getclass">
|
||||
<q-img :src="`statics/upload/` + gall.directory + `/` + mygallery.imagefile" :class="getclimg"
|
||||
:alt="mygallery.alt">
|
||||
<div class="absolute-bottom text-shadow">
|
||||
{{listimages.length}} immagini
|
||||
</div>
|
||||
</q-img>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</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="true"
|
||||
@dragstart="onDragStart"
|
||||
@drop="onDrop"
|
||||
>
|
||||
|
||||
<q-img :src="`statics/upload/` + gall.directory + `/` + mygallery.imagefile"
|
||||
: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>
|
||||
|
||||
<!--Order: {{mygallery.order}} -->
|
||||
<q-input v-model="mygallery.alt"
|
||||
label="Alt"
|
||||
dense
|
||||
@keyup.enter.stop
|
||||
@input="save"
|
||||
debounce="1000"
|
||||
autofocus>
|
||||
</q-input>
|
||||
|
||||
<q-input v-model="mygallery.description"
|
||||
dense
|
||||
label="Description"
|
||||
@keyup.enter.stop
|
||||
@input="save"
|
||||
debounce="1000"
|
||||
autofocus>
|
||||
</q-input>
|
||||
|
||||
<q-card-actions align="center">
|
||||
<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;">
|
||||
<q-uploader
|
||||
label="Aggiungi Immagine"
|
||||
accept=".jpg, image/*"
|
||||
:url="tools.geturlupload()+`/` + gall.directory"
|
||||
:headers="tools.getheaders()"
|
||||
:max-file-size="2000000"
|
||||
multiple
|
||||
auto-upload
|
||||
hide-upload-btn
|
||||
no-thumbnails
|
||||
@uploaded="uploaded"
|
||||
style="width: 208px"
|
||||
></q-uploader>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./CGallery.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './CGallery.scss';
|
||||
</style>
|
||||
1
src/components/CGallery/index.ts
Normal file
1
src/components/CGallery/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export {default as CGallery} from './CGallery.vue'
|
||||
Reference in New Issue
Block a user