Build card being converted into build tree

Still need to be able to delete fillers

app/imports/api/engine/computation/utility/walkdown.js

@@ -2,7 +2,7 @@ export default function walkDown(tree, callback){
   let stack = [...tree];
   while(stack.length){
     let node = stack.pop();
-    callback(node);
+    callback(node, stack);
     stack.push(...node.children);
   }
 }

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

@@ -0,0 +1,223 @@
+<template lang="html">
+  <v-sheet
+    class="tree-node"
+    :class="{
+      'empty': !hasChildren,
+    }"
+    :data-id="`tree-node-${node._id}`"
+  >
+    <div
+      class="layout align-center justify-start tree-node-title"
+      style="cursor: pointer;"
+      @click.stop="$emit('selected', node._id)"
+    >
+      <v-btn
+        small
+        icon
+        class="expand-button"
+        :class="{
+          'rotate-90': showExpanded,
+          'accent--text': node._descendantCanFill || canFillWithMany
+        }"
+        :disabled="!canExpand"
+        @click.stop="expanded = !expanded"
+      >
+        <v-icon v-if="canExpand">
+          mdi-chevron-right
+        </v-icon>
+      </v-btn>
+      <div
+        class="layout align-center justify-start pr-1"
+        style="flex-grow: 0;"
+      >
+        <!--{{node && node.order}}-->
+        <div
+          v-if="isSlot"
+        >
+          <span
+            :class="{
+              'text--secondary': !canFill,
+              'accent--text': canFill,
+            }"
+          >
+            {{ node.name }}
+          </span>
+          <fill-slot-button
+            v-if="(node.quantityExpected && node.quantityExpected.value === 1) && node.spaceLeft === 1"
+            :model="node"
+          />
+        </div>
+        <tree-node-view
+          v-else
+          :model="node"
+          :hide-icon="node.type === 'propertySlot'"
+        />
+        <template v-if="condenseChild">
+          <span class="mr-4">:</span>
+          <tree-node-view
+            :model="children[0].node"
+          />
+        </template>
+      </div>
+    </div>
+    <v-expand-transition>
+      <div
+        v-show="showExpanded"
+        class="ml-3 expand-area"
+      >
+        <v-fade-transition hide-on-leave>
+          <build-tree-node-list
+            v-if="showExpanded"
+            :children="computedChildren"
+          />
+          <div v-else>
+            <div
+              v-for="i in computedChildren.length"
+              :key="i"
+              class="dummy-node"
+            />
+          </div>
+        </v-fade-transition>
+        <div
+          v-if="canFillWithMany"
+        >
+          <fill-slot-button
+            class="ml-5"
+            :model="node"
+          />
+        </div>
+      </div>
+    </v-expand-transition>
+  </v-sheet>
+</template>
+
+<script lang="js">
+	/**
+	* TreeNode's are list item views of character properties. Every property which
+	* can belong to the character is shown in the tree view of the character
+	* the tree view shows off the full character structure, and where each part of
+	* character comes from.
+	**/
+  import TreeNodeView from '/imports/ui/properties/treeNodeViews/TreeNodeView.vue';
+  import FillSlotButton from '/imports/ui/creature/buildTree/FillSlotButton.vue';
+  import { some } from 'lodash';
+
+	export default {
+		name: 'BuildTreeNode',
+    components: {
+      TreeNodeView,
+      FillSlotButton,
+    },
+		props: {
+			node: {
+        type: Object,
+        required: true,
+      },
+			children: {
+        type: Array,
+        default: () => [],
+      },
+		},
+		data(){return {
+			expanded: this.node._descendantCanFill || (
+        this.node.type === 'propertySlot' &&
+        this. node.quantityExpected?.value === 0 ||
+        (this.node.quantityExpected?.value > 1 && this.node.spaceLeft > 0)
+      ),
+		}},
+		computed: {
+      condenseChild(){
+        return this.node.type === 'propertySlot' && this.children.length === 1;
+      },
+      isSlot(){
+        return this.node.type === 'propertySlot';
+      },
+      canFill(){
+        return !!this.node._canFill;
+      },
+      canFillWithOne(){
+        return this.isSlot &&
+          this.node.quantityExpected && 
+          this.node.quantityExpected.value === 1 &&
+          this.node.spaceLeft === 1
+      },
+      canFillWithMany(){
+        return this.isSlot && (
+          this. node.quantityExpected?.value === 0 ||
+          (this.node.quantityExpected.value > 1 && this.node.spaceLeft > 0)
+        );
+      },
+			hasChildren(){
+				return !!this.children && !!this.computedChildren.length || this.lazy && !this.expanded;
+			},
+			showExpanded(){
+				return this.canExpand && this.expanded;
+			},
+			computedChildren(){
+        if (this.condenseChild){
+          return this.children[0].children;
+        }
+        return this.children;
+			},
+			canExpand(){
+				return !!this.computedChildren.length || this.canFillWithMany;
+			},
+		},
+    watch: {
+      'node._ancestorOfMatchedDocument'(value){
+        this.expanded = !!value ||
+          some(this.selectedNode?.ancestors, ref => ref.id === this.node._id);
+      },
+      'selectedNode.ancestors'(value){
+        this.expanded = !!some(value, ref => ref.id === this.node._id) || this.expanded;
+      },
+    },
+		beforeCreate() {
+      this.$options.components.BuildTreeNodeList = require('./BuildTreeNodeList.vue').default
+		},
+	};
+</script>
+
+<style lang="css" scoped>
+	.rotate-90 {
+		transform: rotate(90deg) translateZ(0);
+	}
+	.expand-area {
+		box-shadow: -2px 0px 0px 0px #808080;
+		margin-left: 0;
+	}
+	.handle {
+		cursor: move;
+	}
+	.empty .drag-area {
+		box-shadow: -2px 0px 0px 0px rgb(128, 128, 128, 0.4);
+	}
+	.empty .expand-button {
+		opacity: 0.4;
+	}
+  .found {
+    background: rgba(200, 0, 0, 0.1) !important;
+  }
+	.ghost {
+    opacity: 0.5;
+    background: rgba(251, 0, 0, 0.3);
+	}
+	.v-icon.v-icon--disabled {
+		opacity: 0;
+	}
+  .v-icon {
+    transition: none !important;
+  }
+	.theme--light .tree-node-title:hover {
+		background-color: rgba(0,0,0,.04);
+	}
+  .theme--dark .tree-node-title:hover {
+		background-color: rgba(255,255,255,.04);
+	}
+  .tree-node-title{
+    transition: background ease 0.3s, color ease 0.15s;
+  }
+  .tree-node-title, .dummy-node {
+    height: 40px;
+  }
+</style>

app/imports/ui/creature/buildTree/BuildTreeNodeList.vue

@@ -0,0 +1,30 @@
+<template lang="html">
+  <div class="build-tree-node-list">
+    <build-tree-node
+      v-for="child in children"
+      :key="child.node._id"
+      :node="child.node"
+      :children="child.children"
+      @selected="e => $emit('selected', e)"
+    />
+  </div>
+</template>
+
+<script lang="js">
+	import BuildTreeNode from '/imports/ui/creature/buildTree/BuildTreeNode.vue';
+
+	export default {
+		components: {
+			BuildTreeNode,
+		},
+		props: {
+			children: {
+				type: Array,
+				default: () => [],
+			},
+		},
+		data(){ return {
+			expanded: false,
+		}},
+	};
+</script>

app/imports/ui/creature/buildTree/FillSlotButton.vue

@@ -0,0 +1,56 @@
+<template functional>
+  <v-btn
+    v-if="!model.quantityExpected || !model.quantityExpected.value || model.spaceLeft"
+    icon
+    :data-id="`slot-add-button-${model._id}`"
+    class="slot-add-button accent--text"
+    @click="fillSlot()"
+  >
+    <v-icon>mdi-plus</v-icon>
+  </v-btn>
+</template>
+
+<script lang="js">
+import insertPropertyFromLibraryNode from '/imports/api/creature/creatureProperties/methods/insertPropertyFromLibraryNode.js';
+
+export default {
+  inject: {
+    context: { default: {} }
+  },
+  props: {
+    model: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    fillSlot(){
+      let slotId = this.model._id;
+      let creatureId = this.context.creatureId;
+      this.$store.commit('pushDialogStack', {
+        component: 'slot-fill-dialog',
+        elementId: `slot-add-button-${slotId}`,
+        data: {
+          slotId,
+          creatureId,
+        },
+        callback(nodeIds){
+          if (!nodeIds || !nodeIds.length) return;
+          let newPropertyId = insertPropertyFromLibraryNode.call({
+            nodeIds,
+            parentRef: {
+              'id': slotId,
+              'collection': 'creatureProperties',
+            },
+          });
+          return `slot-child-${newPropertyId}`;
+        }
+      });
+    },
+  },
+}
+</script>
+
+<style>
+
+</style>

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

@@ -1,8 +1,14 @@
 <template lang="html">
-  <div class="build">
+  <v-container>
-    <column-layout wide-columns>
+    <v-row dense>
-      <div>
+      <v-col cols="12" md="8" lg="6" style="height: 100%;">
-        <v-card class="class-details">
+        <v-card style="height: calc(100vh - 120px); overflow: auto;">
+          <v-card-title>Slots</v-card-title>
+          <build-tree-node-list :children="slotBuildTree" />
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="4" lg="6">
+        <v-card class="class-details mb-2">
           <v-card-title
             v-if="creature.variables.level"
             class="text-h6"
@@ -69,8 +75,6 @@
             </v-list-item>
           </v-list>
         </v-card>
-      </div>
-      <div>
         <toolbar-card
           data-id="slot-card"
           @toolbarclick="showSlotDialog"
@@ -94,9 +98,9 @@
             <slots :creature-id="creatureId" />
           </v-card-text>
         </toolbar-card>
-      </div>
+      </v-col>
-    </column-layout>
+    </v-row>
-  </div>
+  </v-container>
 </template>
 
 <script lang="js">
@@ -105,14 +109,22 @@ import CreatureProperties from '/imports/api/creature/creatureProperties/Creatur
 import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
 import Slots from '/imports/ui/creature/slots/Slots.vue';
 import ToolbarCard from '/imports/ui/components/ToolbarCard.vue';
-import CreatureSummary from '/imports/ui/creature/character/CreatureSummary.vue';
+import  { nodeArrayToTree } from '/imports/api/parenting/nodesToTree.js';
+import BuildTreeNodeList from '/imports/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: {
     ColumnLayout,
     Slots,
     ToolbarCard,
-    CreatureSummary,
+    BuildTreeNodeList,
   },
   props: {
     creatureId: {
@@ -160,6 +172,46 @@ export default {
         sort: {order: 1}
       });
     },
+    slotBuildTree(){
+      const slots = CreatureProperties.find({
+        'ancestors.id': this.creatureId,
+        type: 'propertySlot',
+        $or: [
+          {'slotCondition.value': {$nin: [false, 0, '']}},
+          {'slotCondition.value': {$exists: false}},
+        ],
+        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 => {
+            if (node.node.type === 'propertySlot'){
+              node.node._descendantCanFill = true;
+            }
+          });
+        }
+      });
+      return tree;
+    },
   },
   methods: {
     addExperience(){

app/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue

@@ -22,7 +22,10 @@
 			TreeNodeList,
 		},
 		props: {
-			root: Object,
+			root: {
+				type: Object,
+				default: undefined,
+			},
 			organize: Boolean,
 			selectedNode: {
         type: Object,

app/imports/ui/properties/treeNodeViews/TreeNodeView.vue

@@ -6,6 +6,7 @@
     :class="{
       'inactive': model.inactive,
     }"
+    v-bind="$attrs"
   />
 </template>