refactor: upload vuex module

frontend/src/components/files/Listing.vue

@@ -103,7 +103,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['req', 'selected', 'user', 'show', 'uploading']),
+    ...mapState(['req', 'selected', 'user', 'show']),
     nameSorted () {
       return (this.req.sorting.by === 'name')
     },

frontend/src/store/getters.js

@@ -5,12 +5,12 @@ const getters = {
   isEditor: (state, getters) => getters.isFiles && (state.req.type === 'text' || state.req.type === 'textImmutable'),
   selectedCount: state => state.selected.length,
   progress : state => {
-    if (state.uploading.progress.length == 0) {
+    if (state.upload.progress.length == 0) {
       return 0;
     }
 
-    let sum = state.uploading.progress.reduce((acc, val) => acc + val)
-    return Math.ceil(sum / state.uploading.size * 100);
+    let sum = state.upload.progress.reduce((acc, val) => acc + val)
+    return Math.ceil(sum / state.upload.size * 100);
   }
 }
 

frontend/src/store/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import mutations from './mutations'
 import getters from './getters'
+import upload from './modules/upload'
 
 Vue.use(Vuex)
 
@@ -22,18 +23,13 @@ const state = {
   show: null,
   showShell: false,
   showMessage: null,
-  showConfirm: null,
-  uploading: {
-    id: 0,
-    count: 0,
-    size: 0,
-    progress: []
-  }
+  showConfirm: null
 }
 
 export default new Vuex.Store({
   strict: true,
   state,
   getters,
-  mutations
+  mutations,
+  modules: { upload }
 })

frontend/src/store/modules/upload.js

@@ -0,0 +1,34 @@
+import Vue from 'vue'
+
+const state = {
+  id: 0,
+  count: 0,
+  size: 0,
+  progress: []
+}
+
+const mutations = {
+  incrementId: (state) => {
+    state.id = state.id + 1
+  },
+  incrementSize: (state, value) => {
+    state.size = state.size + value
+  },
+  incrementCount: (state) => {
+    state.count = state.count + 1
+  },
+  decreaseCount: (state) => {
+    state.count = state.count - 1
+  },
+  setProgress(state, { id, loaded }) {
+    Vue.set(state.progress, id, loaded)
+  },
+  reset: (state) => {
+    state.id = 0
+    state.size = 0
+    state.count = 0
+    state.progress = []
+  }
+}
+
+export default { state, mutations, namespaced: true }

frontend/src/store/mutations.js

@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import * as i18n from '@/i18n'
 import moment from 'moment'
 
@@ -83,28 +82,6 @@ const mutations = {
   resetClipboard: (state) => {
     state.clipboard.key = ''
     state.clipboard.items = []
-  },
-
-  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/utils/upload.js

@@ -102,14 +102,14 @@ export function scanFiles(dt) {
 }
 
 export function handleFiles(files, path, overwrite = false) {
-  if (store.state.uploading.count == 0) {
+  if (store.state.upload.count == 0) {
     buttons.loading('upload')
   }
 
   let promises = []
 
   let onupload = (id) => (event) => {
-    store.commit('uploadigSetProgress', { id, loaded: event.loaded })
+    store.commit('upload/setProgress', { id, loaded: event.loaded })
   }
 
   for (let i = 0; i < files.length; i++) {
@@ -119,14 +119,14 @@ export function handleFiles(files, path, overwrite = false) {
       let filename = (file.fullPath !== undefined) ? file.fullPath : file.name
       let filenameEncoded = url.encodeRFC5987ValueChars(filename)
 
-      let id = store.state.uploading.id
+      let id = store.state.upload.id
 
-      store.commit('uploadingIncrementSize', file.size)
-      store.commit('uploadingIncrementId')
-      store.commit('uploadingIncrementCount')
+      store.commit('upload/incrementSize', file.size)
+      store.commit('upload/incrementId')
+      store.commit('upload/incrementCount')
 
       let promise = api.post(path + filenameEncoded, file, overwrite, throttle(onupload(id), 100)).finally(() => {
-        store.commit('uploadingDecreaseCount')
+        store.commit('upload/decreaseCount')
       })
 
       promises.push(promise)
@@ -145,14 +145,14 @@ export function handleFiles(files, path, overwrite = false) {
   }
 
   let finish = () => {
-    if (store.state.uploading.count > 0) {
+    if (store.state.upload.count > 0) {
       return
     }
 
     buttons.success('upload')
 
     store.commit('setReload', true)
-    store.commit('uploadingReset')
+    store.commit('upload/reset')
   }
 
   Promise.all(promises)