Added delete buttons to slot fill card

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

@@ -28,11 +28,11 @@
       </v-btn>
       <div
         class="layout align-center justify-start pr-1"
-        style="flex-grow: 0;"
       >
         <!--{{node && node.order}}-->
         <div
           v-if="isSlot"
+          class="text-truncate"
         >
           <span
             :class="{
@@ -47,15 +47,38 @@
             :model="node"
           />
         </div>
-        <tree-node-view
+        <template
           v-else
+        >
+          <tree-node-view
             :model="node"
           />
+          <v-spacer />
+          <v-btn
+            icon
+            :disabled="context.editPermission === false"
+            @click.stop="remove(node)"
+          >
+            <v-icon>
+              mdi-delete
+            </v-icon>
+          </v-btn>
+        </template>
         <template v-if="condenseChild">
           <span class="mr-4">:</span>
           <tree-node-view
             :model="children[0].node"
           />
+          <v-spacer />
+          <v-btn
+            icon
+            :disabled="context.editPermission === false"
+            @click.stop="remove(children[0].node)"
+          >
+            <v-icon>
+              mdi-delete
+            </v-icon>
+          </v-btn>
         </template>
       </div>
     </div>
@@ -92,22 +115,29 @@
 </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';
+/**
+* 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';
+import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
+import softRemoveProperty from '/imports/api/creature/creatureProperties/methods/softRemoveProperty.js';
+import restoreProperty from '/imports/api/creature/creatureProperties/methods/restoreProperty.js';
+import getPropertyTitle from '/imports/ui/properties/shared/getPropertyTitle.js';
 
-	export default {
+export default {
   name: 'BuildTreeNode',
   components: {
     TreeNodeView,
     FillSlotButton,
   },
+  inject: {
+    context: { default: {} }
+  },
   props: {
     node: {
       type: Object,
@@ -183,7 +213,20 @@
   beforeCreate() {
     this.$options.components.BuildTreeNodeList = require('./BuildTreeNodeList.vue').default
   },
-	};
+  methods: {
+    remove(model) {
+      const _id = model._id;
+      softRemoveProperty.call({_id});
+      snackbar({
+        text: `Deleted ${getPropertyTitle(model)}`,
+        callbackName: 'undo',
+        callback(){
+          restoreProperty.call({_id});
+        },
+      });
+    }
+  },
+};
 </script>
 
 <style lang="css" scoped>