See #890: added feedback when updating user quota, permissions and report category

front/src/components/common/ActionFeedback.vue

+<template>
+  <span class="feedback" v-if="isLoading || isDone">
+    <span v-if="isLoading" :class="['ui', 'active', size, 'inline', 'loader']"></span>
+    <i v-if="isDone" :class="['green', size, 'check', 'icon']"></i>
+  </span>
+</template>
+
+<script>
+import {hashCode, intToRGB} from '@/utils/color'
+
+export default {
+  props: {
+    isLoading: {type: Boolean, required: true},
+    size: {type: String, default: 'small'},
+  },
+  data () {
+    return {
+      timer: null,
+      isDone: false,
+    }
+  },
+  destroyed () {
+    if (this.timer) {
+      clearTimeout(this.timer)
+    }
+  },
+  watch: {
+    isLoading (v) {
+      let self = this
+      if (v && this.timer) {
+        clearTimeout(this.timer)
+      }
+      if (v) {
+        this.isDone = false
+      } else {
+        this.isDone = true
+        this.timer = setTimeout(() => {
+          self.isDone = false
+        }, (2000));
+
+      }
+    }
+  }
+}
+</script>

front/src/components/globals.js

@@ -56,4 +56,8 @@ import CollapseLink from '@/components/common/CollapseLink'
 
 Vue.component('collapse-link', CollapseLink)
 
+import ActionFeedback from '@/components/common/ActionFeedback'
+
+Vue.component('action-feedback', ActionFeedback)
+
 export default {}

front/src/components/manage/moderation/ReportCard.vue

@@ -32,9 +32,11 @@
                   </td>
                   <td>
                     <report-category-dropdown
-                      class="field"
                       :value="obj.type"
-                      @input="update({type: $event})"></report-category-dropdown>
+                      @input="update({type: $event})">
+                      &#32;
+                      <action-feedback :is-loading="updating.type"></action-feedback>
+                    </report-category-dropdown>
                   </td>
                 </tr>
                 <tr>
@@ -225,6 +227,7 @@ import NoteForm from '@/components/manage/moderation/NoteForm'
 import NotesThread from '@/components/manage/moderation/NotesThread'
 import ReportCategoryDropdown from '@/components/moderation/ReportCategoryDropdown'
 import entities from '@/entities'
+import {setUpdate} from '@/utils'
 import showdown from 'showdown'
 
 
@@ -250,6 +253,9 @@ export default {
       markdown: new showdown.Converter(),
       isLoading: false,
       isCollapsed: false,
+      updating: {
+        type: false,
+      }
     }
   },
   computed: {
@@ -343,11 +349,15 @@ export default {
       let url = `manage/moderation/reports/${this.obj.uuid}/`
       let self = this
       this.isLoading = true
+      setUpdate(payload, this.updating, true)
       axios.patch(url, payload).then((response) => {
         self.$emit('updated', payload)
+        Object.assign(self.obj, payload)
         self.isLoading = false
+        setUpdate(payload, self.updating, false)
       }, error => {
         self.isLoading = false
+        setUpdate(payload, self.updating, false)
       })
     },
     resolve (v) {

front/src/components/moderation/ReportCategoryDropdown.vue

@@ -4,6 +4,7 @@
     <select class="ui dropdown" :value="value" @change="$emit('input', $event.target.value)">
       <option :value="option.value" v-for="option in allCategories">{{ option.label }}</option>
     </select>
+    <slot></slot>
   </div>
 </template>
 

front/src/utils.js

+import lodash from '@/lodash'
+
+export function setUpdate(obj, statuses, value) {
+  let updatedKeys = lodash.keys(obj)
+  updatedKeys.forEach((k) => {
+    statuses[k] = value
+  })
+}

front/src/views/admin/moderation/AccountsDetail.vue

@@ -174,6 +174,7 @@
                         class="ui search selection dropdown">
                         <option v-for="p in allPermissions" :value="p.code">{{ p.label }}</option>
                       </select>
+                      <action-feedback :is-loading="updating.permissions"></action-feedback>
                     </td>
                   </tr>
                   <tr>
@@ -308,8 +309,9 @@
                           name="quota"
                           type="number" />
                         <div class="ui basic label">
-                          <translate translate-context="Content/*/*/Unit">MB</translate>
+                          <translate translate-context="Content/*/*/Unit">MB</translate>&#32;
                         </div>
+                        <action-feedback class="ui basic label" size="tiny" :is-loading="updating.upload_quota"></action-feedback>
                       </div>
                     </td>
                   </tr>
@@ -403,6 +405,10 @@ export default {
       stats: null,
       showPolicyForm: false,
       permissions: [],
+      updating: {
+        permissions: false,
+        upload_quota: false,
+      }
     }
   },
   created() {
@@ -457,6 +463,8 @@ export default {
       if (toNull && !newValue) {
         newValue = null
       }
+      let self = this
+      this.updating[attr] = true
       let params = {}
       if (attr === "permissions") {
         params["permissions"] = {}
@@ -471,12 +479,14 @@ export default {
           logger.default.info(
             `${attr} was updated succcessfully to ${newValue}`
           )
+          self.updating[attr] = false
         },
         error => {
           logger.default.error(
             `Error while setting ${attr} to ${newValue}`,
             error
           )
+          self.updating[attr] = false
         }
       )
     },