bulk-operations v0.1 add opcaity for draged items

resources/js/components/FilesView/FileBrowser.vue

@@ -38,6 +38,7 @@
                             v-for="item in data"
                             :key="item.unique_id"
                             class="file-item"
+                            :class="dragedItems.includes(item) ? 'draged' : '' "                      
                     />
                 </transition-group>
             </div>
@@ -58,6 +59,7 @@
                             v-for="item in data"
                             :key="item.unique_id"
                             class="file-item"
+                            :class="dragedItems.includes(item) ? 'draged' : '' "
                     />
                 </transition-group>
             </div>
@@ -132,6 +134,15 @@
             isEmpty() {
                 return this.data.length == 0
             },
+            dragedItems() {
+                if(!this.fileInfoDetail.includes(this.draggingId)){
+                    return [this.draggingId]
+                }
+
+                if(this.fileInfoDetail.includes(this.draggingId)) {
+                    return this.fileInfoDetail
+                }
+            }
         },
         data() {
             return {
@@ -142,7 +153,9 @@
         },
         methods: {
             deleteItems() {
-                console.log('delete items');
+                if(this.fileInfoDetail.length > 0 && this.$checkPermission('master') || this.$checkPermission('editor')) {
+                    this.$store.dispatch('deleteItem')
+                }
             },
             dropUpload(event) {
                 // Upload external file
@@ -221,6 +234,9 @@
 
             events.$on('drop', () => {
                 this.isDragging = false
+                setTimeout(() => {
+                    this.draggingId = undefined
+                }, 10);
             })
 
             events.$on('fileItem:deselect', () =>
@@ -248,6 +264,10 @@
     @import '@assets/vue-file-manager/_variables';
     @import '@assets/vue-file-manager/_mixins';
 
+    .draged {
+        opacity: 0.5;
+    }
+
     #multi-selected {
         position: fixed;
         pointer-events: none;

resources/js/components/FilesView/MultiSelected.vue

@@ -1,22 +1,22 @@
 <template>
-    <div :class="[this.moveItem ? 'move-item'  : 'wrapper' , this.dragedGhost ? 'ghost' : '']">
+    <div :class="[this.moveItem ? 'move-item'  : 'wrapper' , this.isGhost ? 'ghost' : '']">
         <div class="icon-wrapper">   
             <CheckSquareIcon class="icon" size="21"/>
         </div>
         <!-- Multi select for the move item popup and file info -->
-        <div class="text" v-if="!this.dragedGhost">
+        <div class="text" v-if="!this.isGhost">
             <span class="title">{{ $t('file_detail.selected_multiple') }}</span>
             <span class="count">{{this.fileInfoDetail.length}}  {{ $tc('file_detail.items', this.fileInfoDetail.length) }}</span>
         </div>
         <!-- Multi select for the Drag & Drop -->
-        <div class="text" v-if="this.dragedGhost">
+        <div class="text" v-if="this.isGhost">
             <div v-if="this.fileInfoDetail.length > 1 && !noSelectedItem">
                 <span class="title">{{ $t('file_detail.selected_multiple') }}</span>
                 <span class="count">{{this.fileInfoDetail.length}}  {{ $tc('file_detail.items', this.fileInfoDetail.length) }}</span>
             </div>
 
             <div v-if="this.fileInfoDetail.length < 2 || noSelectedItem">
-                <span class="title">{{ this.dragedItem.name }}</span>
+                <span v-if="this.dragedItem" class="title">{{ this.dragedItem.name }}</span>
             </div>
         </div>
     </div>
@@ -25,10 +25,12 @@
 <script>
 import {CheckSquareIcon} from "vue-feather-icons";
 import {mapGetters} from 'vuex'
+import {events} from '@/bus'
+
 
     export default {
         name:'MultiSelected',
-        props: ['moveItem' , 'dragedGhost' , 'dragedItem'],
+        props: [ 'moveItem' , 'isGhost' ],
         components: {CheckSquareIcon},
         computed: {
             ...mapGetters(['fileInfoDetail']),
@@ -37,6 +39,20 @@ import {mapGetters} from 'vuex'
                 return  !this.fileInfoDetail.includes(this.dragedItem)
             }
         },
+        data () {
+            return {
+                dragedItem: undefined,
+            }
+        },
+        mounted () {
+
+            // Hnadle Drag & Drop Ghost show
+            if(this.isGhost) {
+                events.$on('dragstart', (data) => {
+                    this.dragedItem = data
+                })
+            }
+        }
         
     }
 </script>
@@ -45,7 +61,6 @@ import {mapGetters} from 'vuex'
 @import '@assets/vue-file-manager/_variables';
 @import '@assets/vue-file-manager/_mixins';
 .ghost {
-    // width: 200px !important;
     max-width: 300px;
     min-width: 250px;
     position: fixed;