From cbac5264cd356023b55de7c3b93f407cde54ab0b Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Tue, 16 Aug 2022 11:44:08 +0200
Subject: [PATCH] Added delete buttons to slot fill card

---
 .../ui/creature/buildTree/BuildTreeNode.vue   | 229 +++++++++++-------
 1 file changed, 136 insertions(+), 93 deletions(-)

diff --git a/app/imports/ui/creature/buildTree/BuildTreeNode.vue b/app/imports/ui/creature/buildTree/BuildTreeNode.vue
index 5664453c..8f49fb2d 100644
--- a/app/imports/ui/creature/buildTree/BuildTreeNode.vue
+++ b/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
-          :model="node"
-        />
+        >
+          <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,98 +115,118 @@
 </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 {
-		name: 'BuildTreeNode',
-    components: {
-      TreeNodeView,
-      FillSlotButton,
+export default {
+  name: 'BuildTreeNode',
+  components: {
+    TreeNodeView,
+    FillSlotButton,
+  },
+  inject: {
+    context: { default: {} }
+  },
+  props: {
+    node: {
+      type: Object,
+      required: true,
     },
-		props: {
-			node: {
-        type: Object,
-        required: true,
-      },
-			children: {
-        type: Array,
-        default: () => [],
-      },
-		},
-		data(){return {
-			expanded: false,
-      /* expand if there's a slot needing attention:
-        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 &&
-        this.children[0].node.type !== 'propertySlot' &&
-        this.node.quantityExpected &&
-        this.node.quantityExpected.value === 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 ||
-          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;
-      },
+    children: {
+      type: Array,
+      default: () => [],
     },
-		beforeCreate() {
-      this.$options.components.BuildTreeNodeList = require('./BuildTreeNodeList.vue').default
-		},
-	};
+  },
+  data(){return {
+    expanded: false,
+    /* expand if there's a slot needing attention:
+      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 &&
+      this.children[0].node.type !== 'propertySlot' &&
+      this.node.quantityExpected &&
+      this.node.quantityExpected.value === 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 ||
+        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
+  },
+  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>