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

fixed CGallery 2

Browse Source
This commit is contained in:
Paolo Arena
2021-11-23 15:59:26 +01:00
parent e6ea3206a9
commit ea9822e5f6
8 changed files with 84 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/CGallery/CGallery.scss
View File

@@ -19,8 +19,14 @@ $grayshadow: #555;
.myimg {
border-radius: 10px !important;
height: 200px;
cursor: grab;
}
.barwidth{
width: 250px !important;
}
.myimg-view {
border-radius: 5px !important;
height: 80px;

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

@@ -62,8 +62,9 @@ export default defineComponent({
gallerylist.value = []
if (myarr) {
myarr.forEach((pic: any) => {
if (pic.imagefile)
if (pic.imagefile) {
gallerylist.value.push(pic)
}
})
}
} else {
@@ -86,7 +87,8 @@ export default defineComponent({
function getlistimages() {
if (gallerylist.value)
return gallerylist.value.slice().sort((a: any, b: any) => a.order! - b.order!)
// return gallerylist.value.slice().sort((a: any, b: any) => a.order! - b.order!)
return gallerylist.value
else
return null
}
@@ -126,8 +128,8 @@ export default defineComponent({
const draggedId = e.dataTransfer.getData('text')
let dragout = ''
try {
dragout = e.target.parentNode.parentNode.id
} catch (e) {
dragout = e.target.parentNode.parentNode.parentNode.id
} catch (err) {
dragout = ''
}
const draggedEl = document.getElementById(draggedId)
@@ -135,57 +137,31 @@ export default defineComponent({
console.log('dragout', dragout)
// check if original parent node
if (draggedEl!.parentNode === e.target) {
if (draggedEl) {
if (draggedEl.parentNode === e.target) {
e.target.classList.remove('drag-enter')
return
}
const myindex = gallerylist.value.findIndex((rec: any) => rec._id === draggedId)
const myrec: IImgGallery = gallerylist.value[myindex]
let myrecprec: IImgGallery
let myrecout: IImgGallery
const myindexout = gallerylist.value.findIndex((rec: any) => rec._id === dragout)
myrecout = gallerylist.value[myindexout]
let myindexprec = myindexout - 1
if (myindexprec < 0)
myindexprec = 0
if (myindex === myindexout)
return
myrecprec = gallerylist.value[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++
console.log('diff', diff)
let mynum = 0
mynum = myrecprec.order! + diff
console.log('mynum', mynum)
myrec.order = mynum
} else {
myrec.order = Math.round(myrec.order!) - 1
}
console.log('myrec.order', myrec.order)
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()
}
}
@@ -198,7 +174,7 @@ export default defineComponent({
return (props.edit || displayGall.value) ? 'myimg' : 'myimg-view'
}
function getlastord() {
/*function getlastord() {
if (gallerylist.value) {
let myord = 0
for (const file of gallerylist.value) {
@@ -208,13 +184,13 @@ export default defineComponent({
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, order: getlastord() })
gallerylist.value.push({ imagefile: file.name })
}
if (!props.single)
@@ -259,17 +235,30 @@ export default defineComponent({
tools.copyStringToClipboard($q, filename, true)
}
async function deleteFile(rec: any)
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() {
@@ -325,7 +314,6 @@ export default defineComponent({
onDrop,
getclass,
getclimg,
getlastord,
copytoclipboard,
deleteFile,
getsrcimg,

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

@@ -9,8 +9,8 @@
<q-img
:src="getsrcimg(mygallery)" :class="getclimg()"
:alt="mygallery.alt">
<div class="absolute-bottom text-shadow">
{{ getnumimages() }} files
<div v-if="getnumimages() > 1" class="absolute-bottom text-shadow no-padding">
({{ getnumimages() }})
</div>
</q-img>
@@ -59,7 +59,7 @@
<q-field
stack-label
dense
label="FileName">
label="Nome File">
<template v-slot:control>
<div class="self-center full-width no-outline" tabindex="0">{{ mygallery.imagefile }}</div>
</template>
@@ -138,13 +138,28 @@
<div v-for="(mygallery, index) in getlistimages()" :key="index">
<div
class="q-pa-sm q-gutter-sm"
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
flat round icon="fas fa-copy" size="sm"
@click="copytoclipboard(mygallery)"></q-btn>
<div>
Foto {{ index + 1 }}
</div>
<q-space></q-space>
<q-btn flat round color="red" icon="fas fa-trash-alt" @click="deleteFile(mygallery)"></q-btn>
</q-bar>
@dragover="onDragOver">
<q-card
:id="mygallery._id" :class="getclass()"
:data-ind="index"
draggable="true"
@dragstart="onDragStart"
@drop="onDrop"
@@ -153,7 +168,7 @@
:src="getsrcimg(mygallery)"
:class="getclimg()"
:alt="mygallery.alt">
<div class="absolute-bottom text-shadow">
<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>
@@ -162,7 +177,7 @@
<q-field
stack-label
dense
label="FileName">
label="Nome File">
<template v-slot:control>
<div class="self-center full-width no-outline" tabindex="0">{{ mygallery.imagefile }}</div>
</template>
@@ -177,15 +192,6 @@
debounce="1000"
autofocus>
</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>
</q-card-section>
</q-card>

2
src/components/CMyPopupEdit/CMyPopupEdit.ts
View File

@@ -165,7 +165,7 @@ export default defineComponent({
myImgGall.value = [{
_id: '',
imagefile: myvalue.value,
order: 1,
// order: 1,
alt: 'img',
}]
}

3
src/components/CMyPopupEdit/CMyPopupEdit.vue
View File

@@ -83,7 +83,6 @@
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.listimages">
gall1:
<CGallery
:title="getTitleGall()"
:directory="getDirectoryGall()"
@@ -96,7 +95,6 @@
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.image">
<div v-if="canEdit">
gall2:
<CGallery
:title="getTitleGall()"
:directory="getDirectoryGall()"
@@ -180,7 +178,6 @@
</div>
<div v-else>
<div v-if="col.fieldtype === costanti.FieldType.listimages">
gall3:
<CGallery
:title="getTitleGall()"
:directory="getDirectoryGall()"

2
src/model/GlobalStore.ts
View File

@@ -369,7 +369,7 @@ export interface ITimeLineMain {
export interface IImgGallery {
_id?: string
imagefile: string
order?: number
// order?: number
alt?: string
description?: string
}

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

@@ -1456,7 +1456,7 @@ export const tools = {
} else {
this.showNotif($q, t('notification.denied'), { color: 'negative', icon: 'notifications' })
tools.displayConfirmNotification();
tools.displayConfirmNotification()
}
})
},
@@ -3359,7 +3359,7 @@ export const tools = {
return process.env.MONGODB_HOST + `/uploadnew/${this.getvers()}/`
},
escapeslash(mystr: string) {
return mystr.replace(/\//g, '-');
return mystr.replace(/\//g, '-')
},
geturlrelativeprofile() {
return 'upload/profile'
@@ -4330,6 +4330,16 @@ export const tools = {
}
},
array_move(arr: any, old_index: number, new_index: number) {
if (new_index >= arr.length) {
let k: any = new_index - arr.length + 1
while (k--) {
arr.push(undefined)
}
}
arr.splice(new_index, 0, arr.splice(old_index, 1)[0])
return arr // for testing
},
// getLocale() {
// if (navigator.languages && navigator.languages.length > 0) {
// return navigator.languages[0]

2
src/store/UserStore.ts
View File

@@ -170,7 +170,7 @@ export const useUserStore = defineStore('UserStore', {
const myrec = this.getUserByUsername(username)
// console.log('myrec', myrec)
if (myrec && myrec.profile && !!myrec.profile.img && myrec.profile.img !== '' && myrec.profile.img !== 'undefined') {
return myrec.profile.img
return 'upload/profile/' + this.my.username + '/' + myrec.profile.img
}
return ''
},