From 7cb65954b5fde33bf563e3476b13ac05dc88ef8a Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Thu, 5 Nov 2020 14:05:17 +0200
Subject: [PATCH] Added the ability to hide slots when full

---
 .../denormalise/recomputeSlotFullness.js      | 12 ++++++++--
 app/imports/api/properties/Slots.js           | 10 +++++++-
 .../ui/creature/slots/SlotFillDialog.vue      |  8 ++-----
 app/imports/ui/creature/slots/Slots.vue       | 16 +++++++++----
 app/imports/ui/properties/forms/SlotForm.vue  | 24 ++++++++++++-------
 5 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/app/imports/api/creature/denormalise/recomputeSlotFullness.js b/app/imports/api/creature/denormalise/recomputeSlotFullness.js
index 775e4c97..3da2320b 100644
--- a/app/imports/api/creature/denormalise/recomputeSlotFullness.js
+++ b/app/imports/api/creature/denormalise/recomputeSlotFullness.js
@@ -8,6 +8,8 @@ export default function recomputeSlotFullness(ancestorId){
     let children = CreatureProperties.find({
       'parent.id': slot._id,
       removed: {$ne: true},
+    }, {
+      fields: {slotQuantityFilled: 1}
     }).fetch();
     let totalFilled = 0;
     children.forEach(child => {
@@ -17,9 +19,15 @@ export default function recomputeSlotFullness(ancestorId){
         totalFilled++;
       }
     });
-    if (slot.totalFilled !== totalFilled){
+    let spaceLeft;
+    if (slot.quantityExpected === 0){
+      spaceLeft = null;
+    } else {
+      spaceLeft = slot.quantityExpected - totalFilled;
+    }
+    if (slot.totalFilled !== totalFilled || slot.spaceLeft !== spaceLeft){
       CreatureProperties.update(slot._id, {
-        $set: {totalFilled},
+        $set: {totalFilled, spaceLeft},
       }, {
         selector: {type: 'propertySlot'}
       });
diff --git a/app/imports/api/properties/Slots.js b/app/imports/api/properties/Slots.js
index 288ee12c..e1f9bbf4 100644
--- a/app/imports/api/properties/Slots.js
+++ b/app/imports/api/properties/Slots.js
@@ -34,6 +34,10 @@ let SlotSchema = new SimpleSchema({
     type: String,
     optional: true,
   },
+  hideWhenFull: {
+    type: Boolean,
+    optional: true,
+  }
 });
 
 const ComputedOnlySlotSchema = new SimpleSchema({
@@ -53,7 +57,11 @@ const ComputedOnlySlotSchema = new SimpleSchema({
   totalFilled: {
     type: SimpleSchema.Integer,
     defaultValue: 0,
-  }
+  },
+  spaceLeft: {
+    type: SimpleSchema.Integer,
+    optional: true,
+  },
 });
 
 const ComputedSlotSchema = new SimpleSchema()
diff --git a/app/imports/ui/creature/slots/SlotFillDialog.vue b/app/imports/ui/creature/slots/SlotFillDialog.vue
index dfb71e7b..52c319ab 100644
--- a/app/imports/ui/creature/slots/SlotFillDialog.vue
+++ b/app/imports/ui/creature/slots/SlotFillDialog.vue
@@ -129,10 +129,6 @@ export default {
       type: String,
       required: true,
     },
-    numToFill: {
-      type: Number,
-      required: true,
-    },
   },
   data(){return {
     selectedNode: undefined,
@@ -194,8 +190,8 @@ export default {
         }
         if (
           node.type === 'slotFiller' &&
-          this.numToFill > 0 &&
-          node.slotQuantityFilled > this.numToFill
+          this.model.spaceLeft > 0 &&
+          node.slotQuantityFilled > this.model.spaceLeft
         ){
           return false;
         }
diff --git a/app/imports/ui/creature/slots/Slots.vue b/app/imports/ui/creature/slots/Slots.vue
index 3f3c2833..e89d59a0 100644
--- a/app/imports/ui/creature/slots/Slots.vue
+++ b/app/imports/ui/creature/slots/Slots.vue
@@ -38,7 +38,7 @@
         </v-list-tile>
       </v-list>
       <v-btn
-        v-if="!slot.quantityExpected || slot.quantityExpected > slot.totalFilled"
+        v-if="!slot.quantityExpected || slot.spaceLeft"
         icon
         :data-id="`slot-add-button-${slot._id}`"
         style="background-color: inherit;"
@@ -73,6 +73,9 @@ export default {
       type: String,
       required: true,
     },
+    showHiddenSlots: {
+      type: Boolean,
+    },
   },
   methods: {
     clickSlotChild({_id}){
@@ -85,15 +88,12 @@ export default {
     fillSlot(slot){
       let slotId = slot._id;
       let creatureId = this.creatureId;
-      let numToFill = slot.quantityExpected === 0 ?
-        0 : slot.quantityExpected - slot.totalFilled;
       this.$store.commit('pushDialogStack', {
         component: 'slot-fill-dialog',
         elementId: `slot-add-button-${slotId}`,
         data: {
           slotId,
           creatureId,
-          numToFill,
         },
         callback(node){
 					if(!node) return;
@@ -136,7 +136,13 @@ export default {
           removed: {$ne: true},
         }).fetch();
         return slot;
-      });
+      }).filter(slot => !( // Hide full and ignored slots
+        !this.showHiddenSlots &&
+        slot.hideWhenFull &&
+        slot.quantityExpected > 0 &&
+        slot.totalFilled >= slot.quantityExpected ||
+        slot.ignored
+      ));
     },
   },
 }
diff --git a/app/imports/ui/properties/forms/SlotForm.vue b/app/imports/ui/properties/forms/SlotForm.vue
index fdf4eddc..8f7ca4c7 100644
--- a/app/imports/ui/properties/forms/SlotForm.vue
+++ b/app/imports/ui/properties/forms/SlotForm.vue
@@ -54,15 +54,15 @@
       name="Advanced"
       standalone
     >
-      <smart-combobox
-        label="Tags"
-        multiple
-        chips
-        deletable-chips
-        :value="model.tags"
-        @change="change('tags', ...arguments)"
-      />
       <div class="layout row wrap justify-space-between">
+        <smart-switch
+          label="Hide when full"
+          style="width: 200px; flex-grow: 0;"
+          class="mx-2"
+          :value="model.hideWhenFull"
+          :error-messages="errors.hideWhenFull"
+          @change="change('hideWhenFull', ...arguments)"
+        />
         <smart-switch
           label="Ignored"
           style="width: 200px; flex-grow: 0;"
@@ -72,6 +72,14 @@
           @change="change('ignored', ...arguments)"
         />
       </div>
+      <smart-combobox
+        label="Tags"
+        multiple
+        chips
+        deletable-chips
+        :value="model.tags"
+        @change="change('tags', ...arguments)"
+      />
     </form-section>
   </div>
 </template>