fixed CGallery 2

src/components/CGallery/CGallery.scss

@@ -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;

src/components/CGallery/CGallery.ts

@@ -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
+          dragout = e.target.parentNode.parentNode.parentNode.id
-        } catch (e) {
+        } 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,

src/components/CGallery/CGallery.vue

@@ -9,8 +9,8 @@
             <q-img
               :src="getsrcimg(mygallery)" :class="getclimg()"
               :alt="mygallery.alt">
-              <div class="absolute-bottom text-shadow">
+              <div v-if="getnumimages() > 1" class="absolute-bottom text-shadow no-padding">
-                {{ getnumimages() }} files
+                ({{ getnumimages() }})
               </div>
             </q-img>
 
@@ -31,7 +31,7 @@
                 v-model="order">-->
 
         <div v-for="(mygallery, index) in getlistimages()" :key="index">
-          mygallery : {{ mygallery}}
+          mygallery : {{ mygallery }}
           <div
             class="q-pa-sm q-gutter-sm"
             @dragenter="onDragEnter"
@@ -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>
@@ -211,7 +217,7 @@
         </div>
 
         <q-card-actions align="right">
-          <q-btn flat label="Annulla" color="primary" v-close-popup />
+          <q-btn flat label="Annulla" color="primary" v-close-popup/>
           <q-btn label="salva" color="primary" v-close-popup @click="save"/>
         </q-card-actions>
 

src/components/CMyPopupEdit/CMyPopupEdit.ts

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

src/components/CMyPopupEdit/CMyPopupEdit.vue

@@ -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()"

src/model/GlobalStore.ts

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

src/store/Modules/tools.ts

@@ -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]

src/store/UserStore.ts

@@ -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 ''
     },