Item quantity adjustment button now shows loading while in progress

app/imports/ui/components/IncrementButton.vue

@@ -10,11 +10,12 @@
     <template #activator="{ on }">
       <v-btn
         v-bind="$attrs"
+        :loading="loading"
         v-on="on"
         @click.stop
       >
         <slot>
-          <v-icon>mdi-plus</v-icon>
+          <v-icon>$vuetify.icons.abacus</v-icon>
         </slot>
       </v-btn>
     </template>
@@ -42,6 +43,7 @@ export default {
       type: Number,
       required: true,
     },
+    loading: Boolean,
   },
   data(){return {
     open: false

app/imports/ui/properties/components/inventory/ItemListTile.vue

@@ -28,12 +28,9 @@
         color="primary"
         :disabled="context.editPermission === false"
         :value="model.quantity"
+        :loading="incrementLoading"
         @change="changeQuantity"
-      >
+      />
-        <v-icon>
-          $vuetify.icons.abacus
-        </v-icon>
-      </increment-button>
     </v-list-item-action>
     <v-list-item-action>
       <v-icon
@@ -52,6 +49,7 @@ import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeView
 import PROPERTIES from '/imports/constants/PROPERTIES.js';
 import adjustQuantity from '/imports/api/creature/creatureProperties/methods/adjustQuantity.js';
 import IncrementButton from '/imports/ui/components/IncrementButton.vue';
+import {snackbar} from '/imports/ui/components/snackbars/SnackbarQueue.js';
 
 export default {
   components:{
@@ -64,6 +62,9 @@ export default {
   props: {
     preparingSpells: Boolean,
   },
+  data(){return {
+    incrementLoading: false,
+  }},
   computed: {
     hasClickListener(){
       return this.$listeners && !!this.$listeners.click;
@@ -89,10 +90,17 @@ export default {
 			this.$emit('click', e);
 		},
     changeQuantity({type, value}) {
+      this.incrementLoading = true;
       adjustQuantity.call({
         _id: this.model._id,
         operation: type,
         value: value
+      }, error => {
+        this.incrementLoading = false;
+        if (error){
+          snackbar({text: error.reason});
+          console.error(error);
+        }
       });
     }
   },

app/imports/ui/properties/viewers/AttributeViewer.vue

@@ -31,12 +31,9 @@
           tile
           color="primary"
           :value="model.value"
+          :loading="damagePropertyLoading"
           @change="damageProperty"
-        >
+        />
-          <v-icon>
-            $vuetify.icons.abacus
-          </v-icon>
-        </increment-button>
       </property-field>
       <property-field
         v-if="model.modifier !== undefined"
@@ -144,6 +141,7 @@
   import damageProperty from '/imports/api/creature/creatureProperties/methods/damageProperty.js';
   import IncrementButton from '/imports/ui/components/IncrementButton.vue';
   import getProficiencyIcon from '/imports/ui/utility/getProficiencyIcon.js';
+  import {snackbar} from '/imports/ui/components/snackbars/SnackbarQueue.js';
 
   export default {
     components: {
@@ -172,6 +170,7 @@
         0.5: 'Half proficiency bonus rounded up',
         2: 'Double proficiency bonus',
       },
+      damagePropertyLoading: false,
     }},
     computed: {
       reset(){
@@ -197,10 +196,17 @@
         });
       },
       damageProperty({type, value}) {
+        this.damagePropertyLoading = true;
         damageProperty.call({
           _id: this.model._id,
           operation: type,
           value: value
+        }, error => {
+          this.damagePropertyLoading = false;
+          if (error){
+            snackbar({text: error.reason});
+            console.error(error);
+          }
         });
       },
     },

app/imports/ui/properties/viewers/ItemViewer.vue

@@ -15,11 +15,10 @@
           large
           outlined
           color="primary"
+          :loading="incrementLoading"
           :value="model.quantity"
           @change="changeQuantity"
-        >
+        />
-          <v-icon>$vuetify.icons.abacus</v-icon>
-        </increment-button>
       </property-field>
       <property-field
         v-if="model.value !== undefined"
@@ -152,6 +151,7 @@ import CoinValue from '/imports/ui/components/CoinValue.vue';
 import IncrementButton from '/imports/ui/components/IncrementButton.vue';
 import adjustQuantity from '/imports/api/creature/creatureProperties/methods/adjustQuantity.js';
 import stripFloatingPointOddities from '/imports/api/engine/computation/utility/stripFloatingPointOddities.js';
+import {snackbar} from '/imports/ui/components/snackbars/SnackbarQueue.js';
 
 export default {
   components:{
@@ -162,6 +162,9 @@ export default {
   inject: {
     context: { default: {} }
   },
+  data(){return {
+    incrementLoading: false,
+  }},
   computed:{
     totalValue(){
       return stripFloatingPointOddities(this.model.value * this.model.quantity);
@@ -182,12 +185,19 @@ export default {
       return SVG_ICONS[name];
     },
     changeQuantity({type, value}) {
+      this.incrementLoading = true;
       adjustQuantity.call({
         _id: this.model._id,
         operation: type,
         value: value
+      }, error => {
+        this.incrementLoading = false;
+        if (error){
+          snackbar({text: error.reason});
+          console.error(error);
+        }
       });
-    }
+    },
   }
 }
 </script>