bulk-operations v0.1 add opcaity for draged items

resources/js/App.vue

@@ -29,7 +29,7 @@
             <MobileMultiSelectMenu/>
 
             <!-- Multi Select Drag & Drop UI -->
-            <MultiSelected :draged-ghost="draged" :draged-item="dragedItem" v-show="draged" id="multi-select-ui"/>
+            <MultiSelected :is-ghost="true" v-show="draged" id="multi-select-ui"/>
 
             <!--Mobile Menu-->
             <MobileMenu/>
@@ -129,7 +129,6 @@
             return {
                 isScaledDown: false,
                 draged: false,
-                dragedItem: undefined
             }
         },
         beforeMount() {
@@ -159,11 +158,6 @@
             }
         },
         mounted() {
-            // Handle default scrollbar for the macOS
-            if (!navigator.userAgent.indexOf('Mac OS X') != -1) {
-               let body = document.body
-               body.classList.add('scroll-bar')
-            }
 
             // Handle mobile navigation scale animation
             events.$on('show:mobile-navigation', () => this.isScaledDown = true)
@@ -173,7 +167,6 @@
 
             // Hnadle Drag & Drop Ghost show
             events.$on('dragstart', (data) => {
-                this.dragedItem = data
                 setTimeout(() => {
                     this.draged = true
                 }, 50);

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;

resources/js/helpers.js

@@ -311,3 +311,9 @@ const Helpers = {
 }
 
 export default Helpers
+
+// Handle styled scrollbar for Windows
+if (navigator.userAgent.indexOf('Windows') != -1) {
+   let body = document.body
+   body.classList.add('windows')
+}

resources/js/main.js

@@ -88,6 +88,14 @@ Vue.use(Helpers);
 
 Vue.config.productionTip = false;
 
+// Handle position of Drag & Drop Ghost
+document.addEventListener('drag', (event) => {
+  let multiSelect = document.getElementById('multi-select-ui')
+  multiSelect.style.top = event.clientY + 20 + 'px'
+  multiSelect.style.left = event.clientX + 'px'
+
+},false)
+
 var vueFileManager = new Vue({
   i18n,
   store,
@@ -98,9 +106,4 @@ var vueFileManager = new Vue({
   render: (h) => h(App),
 }).$mount("#app");
 
-document.addEventListener('drag', (event) => {
-  let multiSelect = document.getElementById('multi-select-ui')
-  multiSelect.style.top = event.clientY + 20 + 'px'
-  multiSelect.style.left = event.clientX + 'px'
 
-},false)

resources/js/store/modules/userAuth.js

@@ -51,13 +51,13 @@ const actions = {
         let addFavourites = []
         let items = [folder]
 
-        console.log(context.getters.fileInfoDetail)
         if(!folder){
             items = context.getters.fileInfoDetail
         }        
 
         items.forEach((data) => {
-            if(data.type === 'folder') {
+            if(data.type === 'folder' ) {
+                if(context.getters.user.relationships.favourites.data.attributes.folders.find(folder => folder.unique_id === data.unique_id)) return
                 addFavourites.push({
                     'unique_id': data.unique_id
                 })
@@ -68,8 +68,16 @@ const actions = {
             context.commit('CLEAR_FILEINFO_DETAIL')
         }
 
+        let pushToFavorites = []
+        //Dont push to favorites a folder what is already in favourites
+        items.map(data => {
+            if(!context.getters.user.relationships.favourites.data.attributes.folders.find(folder => folder.unique_id === data.unique_id)){
+                pushToFavorites.push(data)
+            }
+        })
+        
         // Add to storage
-        context.commit('ADD_TO_FAVOURITES', items)
+        context.commit('ADD_TO_FAVOURITES', pushToFavorites)
 
         axios
             .post(context.getters.api + '/folders/favourites', {

resources/js/views/FilePages/Files.vue

@@ -160,6 +160,8 @@
             dragFinish() {
                 this.area = false
 
+                events.$emit('drop')
+
                 // Check if draged item is folder
                 if (this.draggedItem && this.draggedItem.type !== 'folder') return
 
@@ -181,7 +183,7 @@
                 this.$store.dispatch('addToFavourites', null)            
                 }
 
-                 events.$emit('drop')
+               
             },
             removeFavourite(folder) {
                 this.$store.dispatch('removeFromFavourites', folder)

resources/js/views/Shared/SharedPage.vue

@@ -17,7 +17,7 @@
         <RenameItem/>
 
          <!-- Multi Select Drag & Drop UI -->
-        <MultiSelected :draged-ghost="draged" :draged-item="dragedItem" v-show="draged" id="multi-select-ui"/>
+        <MultiSelected :is-ghost="true" v-show="draged" id="multi-select-ui"/>
 
         <!--Mobile Menu-->
         <MobileMenu/>
@@ -189,7 +189,6 @@
                 currentPage: undefined,
                 homeDirectory: undefined,
                 draged: false,
-                dragedItem: undefined
             }
         },
         methods: {
@@ -269,15 +268,8 @@
         },
         created() {
 
-             // Handle default scrollbar for the macOS
-             if (!navigator.userAgent.indexOf('Mac OS X') != -1) {
-               let body = document.body
-               body.classList.add('scroll-bar')
-            }
-
              // Hnadle Drag & Drop Ghost show
             events.$on('dragstart', (data) => {
-                this.dragedItem = data
                 setTimeout(() => {
                     this.draged = true
                 }, 50);

resources/sass/app.scss

@@ -440,7 +440,7 @@
 
 }
 
-.scroll-bar {
+.windows {
   ::-webkit-scrollbar {
     width: 18px;
     height: 18px;
@@ -454,11 +454,12 @@
       border-radius: 25px;
   }
 }
+
 @media (prefers-color-scheme: dark) { 
-  .scroll-bar {
+  .windows {
     ::-webkit-scrollbar-thumb {
       border: 6px solid $dark_mode_background;
       background: $dark_mode_foreground !important;
     }
   }
-}
+}