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

- Gallery: added deleting images.

Browse Source
This commit is contained in:
Paolo Arena
2019-12-28 02:17:07 +01:00
parent 98dd8ec0ca
commit 05dc45a3c5
6 changed files with 116 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,6 +7,7 @@ import { IGallery, IImgGallery } from '../../model/GlobalStore'
import { CMyPage } from '../CMyPage'
import GlobalModule from '../../store/Modules/GlobalStore'
import { GlobalStore } from '../../store/Modules'
import { copyToClipboard } from 'quasar'
@Component({
name: 'CGallery',
@@ -60,8 +61,15 @@ export default class CGallery extends Vue {
}
const draggedId = e.dataTransfer.getData('text')
let dragout = ''
try {
dragout = e.target.parentNode.parentNode.id
} catch (e) {
dragout = ''
}
const draggedEl = document.getElementById(draggedId)
console.log('draggedId', draggedId, 'draggedEl', draggedEl)
console.log('dragout', dragout)
// check if original parent node
if (draggedEl.parentNode === e.target) {
@@ -70,20 +78,41 @@ export default class CGallery extends Vue {
}
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]
const myrec: IImgGallery = this.listimages[myindex]
console.log('myrec', myrec, 'myrecprec', myrecprec, 'ord1', myrec.order, 'ordprec', myrecprec.order)
let myrecprec: IImgGallery = null
let myrecout: IImgGallery = null
const myindexout = this.listimages.findIndex((rec) => rec._id === dragout)
myrecout = this.listimages[myindexout]
let myindexprec = myindexout - 1
if (myrecprec) {
let diff = (myrec.order - myrecprec.order) / 2
if (myindexprec < 0)
myindexprec = 0
if (myindex === myindexout)
return
myrecprec = this.listimages[myindexprec]
console.log('myrec', myrec, 'myrecprec', myrecout)
if (myrec && myrecout)
console.log('myrec', myrec, 'myrecprec', myrecout, 'ord1', myrec.order, 'myrecout', myrecout.order)
if (myrecout) {
let diff = 0
const ord2 = myrecprec.order
const ord1 = myrecout.order
diff = Math.round((ord1 - ord2) / 2)
if (diff <= 0)
diff++
myrec.order = myrecprec.order + diff
console.log('diff', diff)
let mynum = 0
mynum = myrecprec.order + diff
console.log('mynum', mynum)
myrec.order = mynum
} else {
myrec.order = (myrec.order - 1)
myrec.order = Math.round(myrec.order) - 1
}
console.log('myrec.order', myrec.order)
@@ -99,6 +128,7 @@ export default class CGallery extends Vue {
get getclass() {
return (this.edit) ? 'my-card-gallery' : 'my-card-gallery-view' + ' text-center'
}
get getclimg() {
return (this.edit) ? 'myimg' : 'myimg-view'
}
@@ -116,7 +146,7 @@ export default class CGallery extends Vue {
public uploaded(info) {
console.log(info)
for (const file of info.files) {
this.listimages.push({ imagefile: file.name, order: this.getlastord })
this.listimages.push({ imagefile: file.name, order: this.getlastord })
}
this.save()
@@ -141,11 +171,18 @@ export default class CGallery extends Vue {
return 'statics/upload/' + this.gall.directory + `/` + rec.imagefile
}
public copytoclipboard(rec) {
const filename = this.getfullname(rec)
copyToClipboard(filename).then(() => {
tools.showNotif(this.$q, this.$t('dialog.copyclipboard') + ' \'' + filename + '\'')
})
}
public async deleteFile(rec) {
const filename = this.getfullname(rec)
// Delete File on server:
const ris = await GlobalStore.actions.DeleteFile({filename})
const ris = await GlobalStore.actions.DeleteFile({ filename })
if (ris)
this.deleted(rec)
@@ -155,4 +192,12 @@ export default class CGallery extends Vue {
this.$emit('showandsave', this.listimages)
}
public getsrcimg(mygallery) {
if (tools.getextfile(mygallery.imagefile) === 'pdf')
return 'statics/images/images/pdf.jpg'
else
return 'statics/upload/' + this.gall.directory + `/` + mygallery.imagefile
}
}

48
src/components/CGallery/CGallery.vue
View File

@@ -5,10 +5,10 @@
<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"
<q-img :src="getsrcimg(mygallery)" :class="getclimg"
:alt="mygallery.alt">
<div class="absolute-bottom text-shadow">
{{listimages.length}} immagini
{{listimages.length}} files
</div>
</q-img>
</q-card>
@@ -31,7 +31,7 @@
@drop="onDrop"
>
<q-img :src="`statics/upload/` + gall.directory + `/` + mygallery.imagefile"
<q-img :src="getsrcimg(mygallery)"
:class="getclimg"
:alt="mygallery.alt">
<div class="absolute-bottom text-shadow">
@@ -40,19 +40,47 @@
</div>
</q-img>
<!--Order: {{mygallery.order}} -->
<q-input v-model="mygallery.alt"
label="Alt"
<!--
<q-input v-model="mygallery._id"
label="Id"
dense
@keyup.enter.stop
@input="save"
debounce="1000"
autofocus>
</q-input>
-->
<q-field
stack-label
dense
label="FileName">
<template v-slot:control>
<div class="self-center full-width no-outline" tabindex="0">{{mygallery.imagefile}}</div>
</template>
</q-field>
<!--<q-input v-model="mygallery.order"
:label="$t('disc.order')"
dense
@keyup.enter.stop
@input="save"
debounce="1000"
autofocus>
</q-input>-->
<!--<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"
:label="$t('proj.longdescr')"
@keyup.enter.stop
@input="save"
debounce="1000"
@@ -60,6 +88,8 @@
</q-input>
<q-card-actions align="center">
<q-btn flat round color="blue" icon="fas fa-copy" size="sm"
@click="copytoclipboard(mygallery)"></q-btn>
<q-btn flat round color="red" icon="fas fa-trash-alt" size="sm"
@click="deleteFile(mygallery)"></q-btn>
</q-card-actions>
@@ -69,8 +99,8 @@
<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/*"
label="Aggiungi Immagine o PDF"
accept=".jpg, image/*, .pdf"
:url="tools.geturlupload()+`/` + gall.directory"
:headers="tools.getheaders()"
:max-file-size="2000000"

3
src/rootgen/admin/newsletter/newsletter.ts
View File

@@ -43,7 +43,8 @@ export default class Newsletter extends MixinBase {
public async mounted() {
await this.load()
this.tab = tools.getCookie('formnews', 'check')
// this.tab = tools.getCookie('formnews', 'check')
this.tab = this.$route.params.idparam
this.emailtextheader = this.getValDb('EMAIL_TEXT', true)
}

4
src/rootgen/admin/uploader/uploader.vue
View File

@@ -6,7 +6,7 @@
accept=".jpg, image/*"
:url="tools.geturlupload()+`/gallery_home`"
:headers="tools.getheaders()"
max-file-size=2000000
:max-file-size="2000000"
multiple
style="max-width: 300px"
></q-uploader>
@@ -16,7 +16,7 @@
accept=".jpg, image/*"
:url="tools.geturlupload()+`/img`"
:headers="tools.getheaders()"
max-file-size=1000000
:max-file-size="1000000"
multiple
style="max-width: 300px"
></q-uploader>

24
src/store/Modules/GlobalStore.ts
View File

@@ -828,17 +828,19 @@ namespace Actions {
const arrpagesroute: IListRoutes[] = []
for (const page of state.mypage) {
arrpagesroute.push({
path: '/' + page.path,
name: undefined,
text: page.title,
materialIcon: page.icon,
component: () => import('@/root/mypage/mypage.vue'),
inmenu: page.inmenu,
infooter: page.infooter,
level_child: page.l_child,
level_parent: page.l_par,
})
if (page.active) {
arrpagesroute.push({
path: '/' + page.path,
name: undefined,
text: page.title,
materialIcon: page.icon,
component: () => import('@/root/mypage/mypage.vue'),
inmenu: page.inmenu,
infooter: page.infooter,
level_child: page.l_child,
level_parent: page.l_par,
})
}
}
const last = {

4
src/store/Modules/tools.ts
View File

@@ -2843,6 +2843,10 @@ export const tools = {
return [{ name: 'x-auth', value: UserStore.state.x_auth_token }]
},
getextfile(filename) {
return filename.split('.').pop().toLowerCase()
},
getelembylang(arr) {
const mylang = toolsext.getLocale()
for (const elem in arr) {