fix filtro multiselect

src/components/CGallery/CGallery.scss

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

src/components/CGallery/CGallery.ts

@@ -14,6 +14,10 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
+    canModify: {
+      type: Boolean,
+      required: true,
+    },
     single: {
       type: Boolean,
       required: false,
@@ -42,6 +46,9 @@ export default defineComponent({
     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')
@@ -101,69 +108,77 @@ export default defineComponent({
     }
 
     function onDragEnter(e: any) {
-      // don't drop on other draggables
-      if (e.target.draggable !== true) {
-        e.target.classList.add('drag-enter')
+      if (props.canModify) {
+        // don't drop on other draggables
+        if (e.target.draggable !== true) {
+          e.target.classList.add('drag-enter')
+        }
       }
     }
 
     function onDragLeave(e: any) {
-      e.target.classList.remove('drag-enter')
+      if (props.canModify) {
+        e.target.classList.remove('drag-enter')
+      }
     }
 
     function onDragOver(e: any) {
-      e.preventDefault()
+      if (props.canModify) {
+        e.preventDefault()
+      }
     }
 
     function onDrop(e: any) {
-      console.log('onDrop', e)
-      e.preventDefault()
+      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)
+        // 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)
+          tools.array_move(gallerylist.value, myindexIn, myindexout)
 
-        // make the exchange
-        // draggedEl.parentNode.removeChild(draggedEl)
-        // e.target.appendChild(draggedEl)
-        e.target.classList.remove('drag-enter')
+          // make the exchange
+          // draggedEl.parentNode.removeChild(draggedEl)
+          // e.target.appendChild(draggedEl)
+          e.target.classList.remove('drag-enter')
 
-        save()
+          save()
+        }
       }
     }
 
@@ -172,7 +187,10 @@ export default defineComponent({
     }
 
     function getclimg() {
-      return (props.edit || displayGall.value) ? 'myimg' : 'myimg-view'
+      let mycl = (props.edit || displayGall.value) ? 'myimg' : 'myimg-view'
+      if (props.canModify && props.edit)
+        mycl = mycl + ' myimg-modify'
+      return mycl
     }
 
     /*function getlastord() {
@@ -304,6 +322,11 @@ export default defineComponent({
       return myurl
     }
 
+    function ImgFullScreen(mygallery: IImgGallery) {
+      fullscreen.value = true
+      fullscreensrc.value = getfullname(mygallery)
+    }
+
     onMounted(created)
 
     return {
@@ -328,6 +351,9 @@ export default defineComponent({
       maximizedToggle,
       getUrl,
       close,
+      ImgFullScreen,
+      fullscreen,
+      fullscreensrc,
     }
   }
 })

src/components/CGallery/CGallery.vue

@@ -39,7 +39,7 @@
             @dragover="onDragOver">
             <q-card
               :id="mygallery._id" :class="getclass()"
-              draggable="true"
+              :draggable="canModify"
               @dragstart="onDragStart"
               @drop="onDrop"
             >
@@ -77,9 +77,11 @@
 
               <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>
@@ -147,25 +149,27 @@
               >
                 <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 flat round color="red" icon="fas fa-trash-alt" @click="deleteFile(mygallery)"></q-btn>
+                <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="true"
+                :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> -->
@@ -196,7 +200,9 @@
               </q-card>
             </div>
           </div>
-          <div class="q-pa-sm">
+          <div
+            v-if="canModify"
+            class="q-pa-sm">
             <div class="q-gutter-sm " style="max-height: 200px; width: 208px;">
               <q-uploader
                 label="Aggiungi Immagine"
@@ -215,15 +221,27 @@
           </div>
         </div>
 
+
         <q-card-actions align="right">
-          <q-btn flat label="Annulla" color="primary" v-close-popup/>
-          <q-btn label="salva" color="primary" v-close-popup @click="save"/>
+
+          <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="./CGallery.ts">