refactor: uploading counters vuex state

frontend/src/components/files/Listing.vue

@@ -101,17 +101,11 @@ export default {
   components: { Item },
   data: function () {
     return {
-      showLimit: 50,
+      showLimit: 50
-      uploading: {
-        id: 0,
-        count: 0,
-        size: 0,
-        progress: []
-      }
     }
   },
   computed: {
-    ...mapState(['req', 'selected', 'user', 'show']),
+    ...mapState(['req', 'selected', 'user', 'show', 'uploading']),
     nameSorted () {
       return (this.req.sorting.by === 'name')
     },
@@ -311,7 +305,7 @@ export default {
     dragEnd () {
       this.resetOpacity()
     },
-    drop: function (event) {
+    drop: async function (event) {
       event.preventDefault()
       this.resetOpacity()
 
@@ -331,21 +325,36 @@ export default {
         base = el.querySelector('.name').innerHTML + '/'
       }
 
-      if (base === '') {
+      let files = await this.scanFiles(dt);
-        this.scanFiles(dt).then((result) => {
+      let path = this.$route.path + base;
-          this.checkConflict(result, this.req.items, base)
+      let items = this.req.items
-        })
+
-      } else {
+      if (base !== '') {
-        this.scanFiles(dt).then((result) => {
+        try {
-          api.fetch(this.$route.path + base)
+          items = (await api.fetch(path)).items
-            .then(req => {
+        } catch (error) {
-                this.checkConflict(result, req.items, base)
+          this.$showError(error)
-            })
-            .catch(this.$showError)
-        })
         }
+      }
+
+      let conflict = this.checkConflict(files, items)
+
+      if (conflict) {
+        this.$store.commit('showHover', {
+          prompt: 'replace',
+          confirm: (event) => {
+            event.preventDefault()
+            this.$store.commit('closeHovers')
+            this.handleFiles(files, path, true)
+          }
+        })
+
+        return
+      }
+
+      this.handleFiles(files, path)
     },
-    checkConflict (files, items, base) {
+    checkConflict (files, items) {
       if (typeof items === 'undefined' || items === null) {
         items = []
       }
@@ -377,19 +386,7 @@ export default {
         }
       }
 
-      if (!conflict) {
+      return conflict
-        this.handleFiles(files, base)
-        return
-      }
-
-      this.$store.commit('showHover', {
-        prompt: 'replace',
-        confirm: (event) => {
-          event.preventDefault()
-          this.$store.commit('closeHovers')
-          this.handleFiles(files, base, true)
-        }
-      })
     },
     uploadInput (event) {
       this.$store.commit('closeHovers')
@@ -404,7 +401,22 @@ export default {
         }
       }
 
-      this.checkConflict(files, this.req.items, '')
+      let path = this.$route.path;
+      let conflict = this.checkConflict(files, this.req.items)
+
+      if (conflict) {
+        this.$store.commit('showHover', {
+          prompt: 'replace',
+          confirm: (event) => {
+            event.preventDefault()
+            this.$store.commit('closeHovers')
+            this.handleFiles(files, path, true)
+          }
+        })
+
+        return
+      }
+      this.handleFiles(files, path)
     },
     resetOpacity () {
       let items = document.getElementsByClassName('item')
@@ -474,15 +486,7 @@ export default {
             }
         })
     },
-    setProgress: throttle(function() {
+    handleFiles (files, path, overwrite = false) {
-      if (this.uploading.count == 0) {
-        return
-      }
-      
-      let sum = this.uploading.progress.reduce((acc, val) => acc + val)
-      this.$store.commit('setProgress', Math.ceil(sum / this.uploading.size * 100))
-    }, 100, {leading: false, trailing: true}),
-    handleFiles (files, base, overwrite = false) {
       if (this.uploading.count == 0) {
         buttons.loading('upload')
       }
@@ -490,8 +494,7 @@ export default {
       let promises = []
 
       let onupload = (id) => (event) => {
-        this.uploading.progress[id] = event.loaded
+        this.$store.commit('uploadigSetProgress', { id, loaded: event.loaded })
-        this.setProgress()
       }
 
       for (let i = 0; i < files.length; i++) {
@@ -503,17 +506,17 @@ export default {
 
           let id = this.uploading.id
 
-          this.uploading.size += file.size
+          this.$store.commit('uploadingIncrementSize', file.size)
-          this.uploading.id++
+          this.$store.commit('uploadingIncrementId')
-          this.uploading.count++
+          this.$store.commit('uploadingIncrementCount')
 
-          let promise = api.post(this.$route.path + base + filenameEncoded, file, overwrite, throttle(onupload(id), 100)).finally(() => {            
+          let promise = api.post(path + filenameEncoded, file, overwrite, throttle(onupload(id), 100)).finally(() => {
-            this.uploading.count--
+            this.$store.commit('uploadingDecreaseCount')
           })
 
           promises.push(promise)
         } else {
-          let uri = this.$route.path + base
+          let uri = path
           let folders = file.path.split("/")
 
           for (let i = 0; i < folders.length; i++) {
@@ -533,12 +536,8 @@ export default {
 
         buttons.success('upload')
 
-        this.$store.commit('setProgress', 0)
         this.$store.commit('setReload', true)
-
+        this.$store.commit('uploadingReset')
-        this.uploading.id = 0
-        this.uploading.sizes = []
-        this.uploading.progress = []        
       }
 
       Promise.all(promises)

frontend/src/store/getters.js

@@ -3,7 +3,15 @@ const getters = {
   isFiles: state => !state.loading && state.route.name === 'Files',
   isListing: (state, getters) => getters.isFiles && state.req.isDir,
   isEditor: (state, getters) => getters.isFiles && (state.req.type === 'text' || state.req.type === 'textImmutable'),
-  selectedCount: state => state.selected.length
+  selectedCount: state => state.selected.length,
+  progress : state => {
+    if (state.uploading.progress.length == 0) {
+      return 0;
+    }
+
+    let sum = state.uploading.progress.reduce((acc, val) => acc + val)
+    return Math.ceil(sum / state.uploading.size * 100);
+  }
 }
 
 export default getters

frontend/src/store/index.js

@@ -22,7 +22,13 @@ const state = {
   show: null,
   showShell: false,
   showMessage: null,
-  showConfirm: null
+  showConfirm: null,
+  uploading: {
+    id: 0,
+    count: 0,
+    size: 0,
+    progress: []
+  }
 }
 
 export default new Vuex.Store({

frontend/src/store/mutations.js

@@ -1,3 +1,4 @@
+import Vue from 'vue'
 import * as i18n from '@/i18n'
 import moment from 'moment'
 
@@ -83,8 +84,27 @@ const mutations = {
     state.clipboard.key = ''
     state.clipboard.items = []
   },
-  setProgress: (state, value) => {
+
-    state.progress = value
+  uploadingIncrementId: (state) => {
+    state.uploading.id = state.uploading.id + 1
+  },
+  uploadingIncrementSize: (state, value) => {
+    state.uploading.size = state.uploading.size + value
+  },
+  uploadingIncrementCount: (state) => {
+    state.uploading.count = state.uploading.count + 1
+  },
+  uploadingDecreaseCount: (state) => {
+    state.uploading.count = state.uploading.count - 1
+  },
+  uploadigSetProgress(state, { id, loaded }) {
+    Vue.set(state.uploading.progress, id, loaded)
+  },
+  uploadingReset: (state) => {
+    state.uploading.id = 0
+    state.uploading.size = 0
+    state.uploading.count = 0
+    state.uploading.progress = []
   }
 }
 

frontend/src/views/Layout.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div id="progress">
-      <div v-bind:style="{ width: $store.state.progress + '%' }"></div>
+      <div v-bind:style="{ width: this.progress + '%' }"></div>
     </div>
     <site-header></site-header>
     <sidebar></sidebar>
@@ -29,7 +29,7 @@ export default {
     Shell
   },
   computed: {
-    ...mapGetters([ 'isLogged' ]),
+    ...mapGetters([ 'isLogged', 'progress' ]),
     ...mapState([ 'user' ])
   },
   watch: {