Bumped version

adde slots, spell lists, children of slot fillers
hid properties in most places
spell slots in correct order

app/imports/client/ui/creature/buildTree/BuildTreeNode.vue

@@ -4,7 +4,7 @@
     :class="{
       'empty': !hasChildren,
     }"
-    :data-id="`build-tree-node-${node._id}`"
+    :data-id="`tree-node-${node._id}`"
   >
     <div
       class="layout align-center justify-start tree-node-title"

app/imports/client/ui/creature/character/CharacterSheet.vue

@@ -104,8 +104,8 @@
         <span>Actions</span>
         <v-icon>mdi-lightning-bolt</v-icon>
       </v-btn>
-      <v-btn>
-        <span v-if="!creature.settings.hideSpellsTab">Spells</span>
+      <v-btn v-if="!creature.settings.hideSpellsTab">
+        <span>Spells</span>
         <v-icon>mdi-fire</v-icon>
       </v-btn>
       <v-btn>

app/imports/client/ui/creature/character/characterSheetTabs/ActionsTab.vue

@@ -58,8 +58,19 @@ export default {
   }},
   meteor: {
     actions() {
-      return CreatureProperties.find({
+      const folderIds = CreatureProperties.find({
         'ancestors.id': this.creatureId,
+        type: 'folder',
+        hideStatsGroup: true,
+        removed: { $ne: true },
+        inactive: { $ne: true },
+      }, { fields: { _id: 1 } }).map(folder => folder._id);
+
+      return CreatureProperties.find({
+        'ancestors.id': {
+          $eq: this.creatureId,
+          $nin: folderIds,
+        },
         type: 'action',
         actionType: { $ne: 'event' },
         removed: { $ne: true },

app/imports/client/ui/creature/character/characterSheetTabs/BuildTab.vue

@@ -86,7 +86,7 @@
           <build-tree-node-list
             :children="slotBuildTree"
             class="mx-2"
-            @selected="_id => propertyClicked({_id, prefix: 'build-tree-node-'})"
+            @selected="_id => propertyClicked({_id, prefix: 'tree-node-'})"
           />
         </v-card>
       </v-col>

app/imports/client/ui/creature/character/characterSheetTabs/FeaturesTab.vue

@@ -56,8 +56,19 @@ export default {
   },
   meteor: {
     features() {
-      return CreatureProperties.find({
+      const folderIds = CreatureProperties.find({
         'ancestors.id': this.creatureId,
+        type: 'folder',
+        hideStatsGroup: true,
+        removed: { $ne: true },
+        inactive: { $ne: true },
+      }, { fields: { _id: 1 } }).map(folder => folder._id);
+      
+      return CreatureProperties.find({
+        'ancestors.id': {
+          $eq: this.creatureId,
+          $nin: folderIds,
+        },
         type: 'feature',
         removed: { $ne: true },
         inactive: { $ne: true },

app/imports/client/ui/creature/character/characterSheetTabs/InventoryTab.vue

@@ -141,9 +141,21 @@ export default {
     };
   },
   meteor: {
-    containers() {
+    folderIds() {
       return CreatureProperties.find({
         'ancestors.id': this.creatureId,
+        type: 'folder',
+        hideStatsGroup: true,
+        removed: { $ne: true },
+        inactive: { $ne: true },
+      }, { fields: { _id: 1 } }).map(folder => folder._id);
+    },
+    containers() {
+      return CreatureProperties.find({
+        'ancestors.id': {
+          $eq: this.creatureId,
+          $nin: this.folderIds,
+        },
         type: 'container',
         removed: { $ne: true },
         inactive: { $ne: true },
@@ -166,7 +178,7 @@ export default {
       return CreatureProperties.find({
         'ancestors.id': {
           $eq: this.creatureId,
-          $nin: this.containerIds
+          $nin: [...this.containerIds, ...this.folderIds],
         },
         type: 'container',
         removed: { $ne: true },
@@ -179,7 +191,7 @@ export default {
       return CreatureProperties.find({
         'ancestors.id': {
           $eq: this.creatureId,
-          $nin: this.containerIds
+          $nin: [...this.containerIds, ...this.folderIds],
         },
         type: 'item',
         equipped: { $ne: true },

app/imports/client/ui/creature/character/characterSheetTabs/JournalTab.vue

@@ -60,8 +60,19 @@ export default {
   },
   meteor: {
     notes(){
-      return CreatureProperties.find({
+      const folderIds = CreatureProperties.find({
         'ancestors.id': this.creatureId,
+        type: 'folder',
+        hideStatsGroup: true,
+        removed: { $ne: true },
+        inactive: { $ne: true },
+      }, { fields: { _id: 1 } }).map(folder => folder._id);
+      
+      return CreatureProperties.find({
+        'ancestors.id': {
+          $eq: this.creatureId,
+          $nin: folderIds,
+        },
         type: 'note',
         removed: {$ne: true},
         inactive: {$ne: true},

app/imports/client/ui/creature/character/characterSheetTabs/SpellsTab.vue

@@ -10,7 +10,7 @@
         @remove="softRemove"
       />
       <div
-        v-if="spellSlots && spellSlots.length || hasSpells"
+        v-if="hasSpellSlots || hasSpells"
         class="spell-slots"
       >
         <spell-slot-card
@@ -77,9 +77,32 @@ export default {
     }
   },
   meteor: {
-    spellSlots() {
+    folderIds() {
       return CreatureProperties.find({
         'ancestors.id': this.creatureId,
+        type: 'folder',
+        hideStatsGroup: true,
+        removed: { $ne: true },
+        inactive: { $ne: true },
+      }, { fields: { _id: 1 } }).map(folder => folder._id);
+    },
+    hasSpellSlots() {
+      return !!CreatureProperties.findOne({
+        'ancestors.id': this.creatureId,
+        inactive: { $ne: true },
+        removed: { $ne: true },
+        overridden: { $ne: true },
+        level: { $ne: 0 },
+        type: 'attribute',
+        attributeType: 'spellSlot',
+      });
+    },
+    spellSlots() {
+      return CreatureProperties.find({
+        'ancestors.id': {
+          $eq: this.creatureId,
+          $nin: this.folderIds,
+        },
         inactive: { $ne: true },
         removed: { $ne: true },
         overridden: { $ne: true },
@@ -89,11 +112,16 @@ export default {
           { hideWhenTotalZero: true, total: 0 },
           { hideWhenValueZero: true, value: 0 },
         ],
+      }, {
+        sort: { order: 1 }
       });
     },
     spellLists() {
       return CreatureProperties.find({
-        'ancestors.id': this.creatureId,
+        'ancestors.id': {
+          $eq: this.creatureId,
+          $nin: this.folderIds,
+        },
         type: 'spellList',
         removed: { $ne: true },
         inactive: { $ne: true },
@@ -113,7 +141,7 @@ export default {
       return CreatureProperties.find({
         'ancestors.id': {
           $eq: this.creatureId,
-          $nin: this.spellListIds,
+          $nin: [...this.spellListIds, ...this.folderIds],
         },
         type: 'spell',
         removed: { $ne: true },
@@ -130,7 +158,7 @@ export default {
       return CreatureProperties.find({
         'ancestors.id': {
           $eq: this.creatureId,
-          $nin: this.spellListIds,
+          $nin: [...this.spellListIds, ...this.folderIds],
         },
         type: 'spellList',
         removed: { $ne: true },

app/imports/client/ui/creature/character/characterSheetTabs/StatsTab.vue

@@ -161,13 +161,13 @@
       </div>
 
       <div
-        v-if="properties.hitDice && properties.hitDice.length"
+        v-if="properties.attribute.hitDice && properties.attribute.hitDice.length"
         class="hit-dice"
       >
         <v-card>
           <v-list>
             <v-subheader>Hit Dice</v-subheader>
-            <template v-for="(hitDie, index) in hitDice">
+            <template v-for="(hitDie, index) in properties.attribute.hitDice">
               <v-divider
                 v-if="index !== 0"
                 :key="hitDie._id + 'divider'"

app/imports/client/ui/creature/slots/SlotCard.vue

@@ -8,7 +8,7 @@
     class="slot-card d-flex flex-column"
     @mouseover="hover = true"
     @mouseleave="hover = false"
-    @click="$emit('click')"
+    @click="fillSlot"
   >
     <card-highlight 
       :active="hover"
@@ -28,7 +28,7 @@
       <v-btn
         icon
         color="accent"
-        @click.stop="$emit('ignore')"
+        @click.stop="ignoreProp"
       >
         <v-icon>mdi-close</v-icon>
       </v-btn>
@@ -39,6 +39,9 @@
 <script lang="js">
 import CardHighlight from '/imports/client/ui/components/CardHighlight.vue';
 import PropertyDescription from '/imports/client/ui/properties/viewers/shared/PropertyDescription.vue';
+import insertPropertyFromLibraryNode from '/imports/api/creature/creatureProperties/methods/insertPropertyFromLibraryNode.js';
+import { snackbar } from '/imports/client/ui/components/snackbars/SnackbarQueue.js';
+import updateCreatureProperty from '/imports/api/creature/creatureProperties/methods/updateCreatureProperty.js';
 
 export default {
   components: {
@@ -51,6 +54,9 @@ export default {
         isDark: false,
       },
     },
+    context: {
+      default: {},
+    },
   },
   props: {
     model: {
@@ -72,5 +78,45 @@ export default {
       }
     }
   },
+  methods: {
+    fillSlot() {
+      const slotId = this.model._id;
+      this.$store.commit('pushDialogStack', {
+        component: 'slot-fill-dialog',
+        elementId: `slot-card-${slotId}`,
+        data: {
+          slotId,
+          creatureId: this.context.creatureId,
+        },
+        callback(nodeIds){
+          if (!nodeIds || !nodeIds.length) return;
+          insertPropertyFromLibraryNode.call({
+            nodeIds,
+            parentRef: {
+              'id': slotId,
+              'collection': 'creatureProperties',
+            },
+          }, error => {
+            if (error){
+              console.error(error);
+              snackbar({text: error.reason || error.message || error.toString()});
+            }
+          });
+        }
+      });
+    },
+    ignoreProp(){
+      updateCreatureProperty.call({
+        _id: this.model._id,
+        path: ['ignored'],
+        value: true
+      }, error => {
+        if (error){
+          console.error(error);
+          snackbar({text: error.reason || error.message || error.toString()});
+        }
+      });
+    },
+  }
 }
 </script>

app/imports/client/ui/creature/slots/SlotCardsToFill.vue

@@ -1,5 +1,8 @@
 <template>
-  <column-layout wide-columns class="slots-to-fill">
+  <column-layout
+    wide-columns
+    class="slots-to-fill"
+  >
     <v-fade-transition
       group
       leave-absolute
@@ -39,7 +42,6 @@ import SlotCard from '/imports/client/ui/creature/slots/SlotCard.vue';
 import PointBuyCard from '/imports/client/ui/properties/components/pointBuy/PointBuyCard.vue';
 import ColumnLayout from '/imports/client/ui/components/ColumnLayout.vue';
 import updateCreatureProperty from '/imports/api/creature/creatureProperties/methods/updateCreatureProperty.js';
-import insertPropertyFromLibraryNode from '/imports/api/creature/creatureProperties/methods/insertPropertyFromLibraryNode.js';
 import { snackbar } from '/imports/client/ui/components/snackbars/SnackbarQueue.js';
 
 export default {
@@ -64,31 +66,6 @@ export default {
         }
       });
     },
-    fillSlot(slotId){
-      this.$store.commit('pushDialogStack', {
-        component: 'slot-fill-dialog',
-        elementId: `slot-card-${slotId}`,
-        data: {
-          slotId,
-          creatureId: this.context.creatureId,
-        },
-        callback(nodeIds){
-          if (!nodeIds || !nodeIds.length) return;
-          insertPropertyFromLibraryNode.call({
-            nodeIds,
-            parentRef: {
-              'id': slotId,
-              'collection': 'creatureProperties',
-            },
-          }, error => {
-            if (error){
-              console.error(error);
-              snackbar({text: error.reason || error.message || error.toString()});
-            }
-          });
-        }
-      });
-    },
     editPointBuy(_id){
       this.$store.commit('pushDialogStack', {
         component: 'creature-property-dialog',
@@ -101,10 +78,21 @@ export default {
     },
   },
   meteor: {
-    slots(){
-      return CreatureProperties.find({
-        type: 'propertySlot',
+    slots() {
+      const folderIds = CreatureProperties.find({
         'ancestors.id': this.context.creatureId,
+        type: 'folder',
+        hideStatsGroup: true,
+        removed: { $ne: true },
+        inactive: { $ne: true },
+      }, { fields: { _id: 1 } }).map(folder => folder._id);
+
+      return CreatureProperties.find({
+        'ancestors.id': {
+          $eq: this.context.creatureId,
+          $nin: folderIds,
+        },
+        type: 'propertySlot',
         ignored: { $ne: true },
         $and: [
           { 

app/imports/client/ui/properties/components/folders/FolderGroupCard.vue

@@ -15,7 +15,8 @@
         :model="prop"
         :data-id="prop._id"
         @click="$emit('click-property', {_id: prop._id})"
-        @sub-click="_id => $emit('sub-click', _id)"
+        @click-property="e => $emit('click-property', e)"
+        @sub-click="e => $emit('sub-click', e)"
         @remove="$emit('remove', prop._id)"
       />
     </v-card>
@@ -27,15 +28,15 @@ import CreatureProperties from '/imports/api/creature/creatureProperties/Creatur
 import propComponents from '/imports/client/ui/properties/components/folders/propertyComponentIndex.js';
 
 export default {
-  components: {
-    ...propComponents,
-  },
   props: {
     model: {
       type: Object,
       required: true,
     }
   },
+  beforeCreate() {
+    Object.assign(this.$options.components, propComponents);
+  },
   meteor: {
     properties() {
       const props = [];
@@ -50,6 +51,7 @@ export default {
             deactivatedByAncestor: { $ne: true },
           },
           {
+            type: { $ne: 'toggle' },
             inactive: { $ne: true }
           },
         ],
@@ -60,7 +62,7 @@ export default {
       }, {
         sort: { order: 1 },
       }).forEach(prop => {
-        if (this.$options.components[prop.type]) {
+        if (propComponents[prop.type]) {
           props.push(prop);
         }
       });

app/imports/client/ui/properties/components/folders/folderGroupComponents/AttributeGroupComponent.vue

@@ -1,44 +1,55 @@
 <template>
-  <div class="attribute">
-    <ability-list-tile
-      v-if="model.attributeType === 'ability'"
+  <div>
+    <div
+      class="attribute"
+      :data-id="dataId"
+    >
+      <ability-list-tile
+        v-if="model.attributeType === 'ability'"
+        :model="model"
+        @click="$emit('click')"
+      />
+      <hit-dice-list-tile
+        v-else-if="model.attributeType === 'hitDice'"
+        :model="model"
+        @click="$emit('click')"
+        @change="({ type, value }) => damageProperty({type, value: -value})"
+      />
+      <health-bar
+        v-else-if="model.attributeType === 'healthBar'"
+        :model="model"
+        @change="damageProperty"
+        @click="$emit('click')"
+      />
+      <spell-slot-list-tile
+        v-else-if="model.attributeType === 'spellSlot'"
+        :model="model"
+        @click="$emit('click')"
+      />
+      <resource-card-content
+        v-else-if="model.attributeType === 'resource'"
+        :model="model"
+        @click="$emit('click')"
+        @change="({ type, value }) => damageProperty({type, value: -value})"
+        @mouseover="hover = true"
+        @mouseleave="hover = false"
+      />
+      <attribute-card-content
+        v-else-if="model.attributeType !== 'utility'"
+        class="pointer"
+        :model="model"
+        @click="$emit('click')"
+        @mouseover="hover = true"
+        @mouseleave="hover = false"
+      />
+      <card-highlight :active="hover" />
+    </div>
+    <folder-group-children
       :model="model"
-      @click="$emit('click')"
+      @click-property="e => $emit('click-property', e)"
+      @sub-click="e => $emit('sub-click', e)"
+      @remove="e => $emit('remove', e)"
     />
-    <hit-dice-list-tile
-      v-else-if="model.attributeType === 'hitDice'"
-      :model="model"
-      @click="$emit('click')"
-      @change="({ type, value }) => damageProperty({type, value: -value})"
-    />
-    <health-bar
-      v-else-if="model.attributeType === 'healthBar'"
-      :model="model"
-      @change="damageProperty"
-      @click="$emit('click')"
-    />
-    <spell-slot-list-tile
-      v-else-if="model.attributeType === 'spellSlot'"
-      :model="model"
-      @click="$emit('click')"
-    />
-    <resource-card-content
-      v-else-if="model.attributeType === 'resource'"
-      :model="model"
-      @click="$emit('click')"
-      @change="({ type, value }) => damageProperty({type, value: -value})"
-      @mouseover="hover = true"
-      @mouseleave="hover = false"
-    />
-    <attribute-card-content
-      v-else-if="model.attributeType !== 'utility'"
-      class="pointer"
-      :model="model"
-      @click="$emit('click')"
-      @mouseover="hover = true"
-      @mouseleave="hover = false"
-    />
-    <card-highlight :active="hover" />
   </div>
 </template>
 
@@ -50,6 +61,7 @@ import SpellSlotListTile from '/imports/client/ui/properties/components/attribut
 import ResourceCardContent from '/imports/client/ui/properties/components/attributes/ResourceCardContent.vue';
 import AttributeCardContent from '/imports/client/ui/properties/components/attributes/AttributeCardContent.vue';
 import CardHighlight from '/imports/client/ui/components/CardHighlight.vue';
+import FolderGroupChildren from '/imports/client/ui/properties/components/folders/folderGroupComponents/FolderGroupChildren.vue';
 
 import damageProperty from '/imports/api/creature/creatureProperties/methods/damageProperty.js';
 
@@ -62,12 +74,17 @@ export default {
     ResourceCardContent,
     AttributeCardContent,
     CardHighlight,
+    FolderGroupChildren,
   },
   props: {
     model: {
       type: Object,
       required: true,
     },
+    dataId: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -81,6 +98,10 @@ export default {
         value: change.value
       });
     },
+    log({_id}) {
+      console.log(...arguments)
+      this.$emit('click-property', { _id });
+    }
   }
 }
 </script>

app/imports/client/ui/properties/components/folders/folderGroupComponents/FolderGroupChildren.vue

@@ -0,0 +1,66 @@
+<template>
+  <div
+    v-if="properties && properties.length"
+  >
+    <component
+      :is="prop.type"
+      v-for="prop in properties"
+      :key="prop._id"
+      :model="prop"
+      :data-id="prop._id"
+      @click="$emit('click-property', {_id: prop._id})"
+      @click-property="(e) => $emit('click-property', e)"
+      @sub-click="(e) => $emit('sub-click', e)"
+      @remove="$emit('remove', prop._id)"
+    />
+  </div>
+</template>
+
+<script lang="js">
+import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
+import propComponents from '/imports/client/ui/properties/components/folders/propertyComponentIndex.js';
+
+export default {
+  props: {
+    model: {
+      type: Object,
+      required: true,
+    }
+  },
+  beforeCreate() {
+    Object.assign(this.$options.components, propComponents);
+  },
+  meteor: {
+    properties() {
+      const props = [];
+      CreatureProperties.find({
+        'parent.id': this.model._id,
+        removed: { $ne: true },
+        overridden: { $ne: true },
+        $or: [
+          {
+            type: 'toggle',
+            showUI: true,
+            deactivatedByAncestor: { $ne: true },
+          },
+          {
+            type: { $ne: 'toggle' },
+            inactive: { $ne: true },
+          },
+        ],
+        $nor: [
+          { hideWhenTotalZero: true, total: 0 },
+          { hideWhenValueZero: true, value: 0 },
+        ],
+      }, {
+        sort: { order: 1 },
+      }).forEach(prop => {
+        if (propComponents[prop.type]) {
+          props.push(prop);
+        }
+      });
+      return props;
+    },
+  },
+}
+</script>

app/imports/client/ui/properties/components/folders/folderGroupComponents/SlotBuildTree.vue

@@ -0,0 +1,82 @@
+<template>
+  <build-tree-node-list
+    :children="slotBuildTree"
+    class="mx-2"
+    @selected="_id => $emit('sub-click', _id)"
+  />
+</template>
+
+<script lang="js">
+import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
+import { nodeArrayToTree } from '/imports/api/parenting/nodesToTree.js';
+import BuildTreeNodeList from '/imports/client/ui/creature/buildTree/BuildTreeNodeList.vue';
+
+function traverse(tree, callback, parents = []){
+  tree.forEach(node => {
+    callback(node, parents);
+    traverse(node.children, callback, [...parents, node]);
+  });
+}
+
+export default {
+  components: {
+    BuildTreeNodeList,
+  },
+  props: {
+    model: {
+      type: Object,
+      required: true,
+    },
+  },
+  meteor: {
+    slotBuildTree() {
+      const slots = CreatureProperties.find({
+        $and: [ {
+          $or: [
+            { 'ancestors.id': this.model._id, },
+            { '_id': this.model._id, },
+          ],
+        }, {
+          $or:
+            [
+            { 'slotCondition.value': { $nin: [false, 0, ''] } },
+            { 'slotCondition.value': { $exists: false } },
+            { 'slotCondition': { $exists: false } },
+            ],
+        } ],
+        type: { $in: ['propertySlot', 'pointBuy'] },
+        removed: { $ne: true },
+        inactive: { $ne: true },
+      }, {
+        sort: { order: 1 }
+      });
+      const slotIds = slots.map(s => s._id);
+      const slotChildren = CreatureProperties.find({
+        'parent.id': { $in: slotIds },
+        removed: { $ne: true },
+      }, {
+        sort: { order: 1 },
+      });
+      const tree = nodeArrayToTree([
+        ...slots.fetch(),
+        ...slotChildren.fetch()
+      ]);
+      traverse(tree, (child, parents) => {
+        const model = child.node;
+        const isSlotWithSpace = model.type === 'propertySlot' && (
+          model.spaceLeft > 0 ||
+          !model.quantityExpected ||
+          model.quantityExpected.value === 0
+        );
+        if (isSlotWithSpace) {
+          model._canFill = true;
+          parents.forEach(node => {
+            node.node._descendantCanFill = true;
+          });
+        }
+      });
+      return tree;
+    },
+  }
+}
+</script>

app/imports/client/ui/properties/components/folders/propertyComponentIndex.js

@@ -17,16 +17,17 @@ import item from '/imports/client/ui/properties/components/inventory/ItemListTil
 import note from '/imports/client/ui/properties/components/persona/NoteCard.vue';
 //import pointBuy from '';
 //import proficiency from '';
-//import propertySlot from '';
+import propertySlot from '/imports/client/ui/properties/components/folders/folderGroupComponents/SlotBuildTree.vue';
 //import reference from '';
 //import roll from '';
 //import savingThrow from '';
 import skill from '/imports/client/ui/properties/components/skills/SkillListTile.vue';
 //import slotFiller from '';
-//import spellList from '';
-//import spell from '';
+import spellList from '/imports/client/ui/properties/components/spells/SpellListCard.vue';
+import spell from '/imports/client/ui/properties/components/spells/SpellListTile.vue';
 import toggle from '/imports/client/ui/properties/components/toggles/ToggleCard.vue';
 //import trigger from '';
+import FolderGroupChildren from '/imports/client/ui/properties/components/folders/folderGroupComponents/FolderGroupChildren.vue';
 
 export default {
   action,
@@ -43,19 +44,19 @@ export default {
   //damageMultiplier,
   //effect,
   feature,
-  //folder,
+  // folder // Like actions, we don't show sub-folders
   item,
   note,
   //pointBuy,
   //proficiency,
-  //propertySlot,
+  propertySlot,
   //reference,
   //roll,
   //savingThrow,
   skill,
-  //slotFiller,
-  //spellList,
-  //spell,
+  slotFiller: FolderGroupChildren,
+  spellList,
+  spell,
   toggle,
   //trigger,
 };

app/imports/client/ui/properties/forms/FolderForm.vue

@@ -35,7 +35,7 @@
           <v-expand-transition>
             <div v-if="model.groupStats">
               <smart-switch
-                label="Hide children from stats tab"
+                label="Hide children from their default locations"
                 :value="model.hideStatsGroup"
                 :error-messages="errors.hideStatsGroup"
                 @change="change('hideStatsGroup', ...arguments)"

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dicecloud",
-  "version": "2.0.45",
+  "version": "2.0.46",
   "description": "Unofficial Online Realtime D&D 5e App",
   "license": "GPL-3.0",
   "repository": {