From 4352ca5f0da4f3f17365274f62d46672c34da19b Mon Sep 17 00:00:00 2001
From: Thaum Rystra <stefanzermatten@gmail.com>
Date: Mon, 18 May 2020 23:03:34 +0200
Subject: [PATCH] Inventory items can now be equipped

---
 app/imports/ui/components/tree/TreeNode.vue   | 42 ++++++++----------
 .../characterSheetTabs/InventoryTab.vue       | 44 +++++++++----------
 .../components/inventory/ContainerCard.vue    |  3 +-
 app/imports/ui/properties/forms/ItemForm.vue  |  9 ++++
 .../treeNodeViews/DefaultTreeNode.vue         | 20 +++++++++
 .../properties/treeNodeViews/ItemTreeNode.vue | 27 ++++++++++++
 .../treeNodeViews/treeNodeViewIndex.js        |  6 +++
 .../treeNodeViews/treeNodeViewMixin.js        | 24 ++++++++++
 8 files changed, 127 insertions(+), 48 deletions(-)
 create mode 100644 app/imports/ui/properties/treeNodeViews/DefaultTreeNode.vue
 create mode 100644 app/imports/ui/properties/treeNodeViews/ItemTreeNode.vue
 create mode 100644 app/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js
 create mode 100644 app/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js

diff --git a/app/imports/ui/components/tree/TreeNode.vue b/app/imports/ui/components/tree/TreeNode.vue
index 96790090..62f41ac1 100644
--- a/app/imports/ui/components/tree/TreeNode.vue
+++ b/app/imports/ui/components/tree/TreeNode.vue
@@ -33,16 +33,12 @@
         >
           drag_handle
         </v-icon>
-        <property-icon
-          v-if="node.type"
-          class="mr-2"
-          :type="node.type"
-          :class="selected && 'primary--text'"
+        <!--{{node && node.order}}-->
+        <component
+          :is="treeNodeView"
+          :model="node"
+          :selected="selected"
         />
-        <div class="text-no-wrap text-truncate">
-          <!--{{node && node.order}}-->
-          {{ getTitle }}
-        </div>
       </div>
     </div>
     <v-expand-transition>
@@ -72,14 +68,14 @@
 	* the tree view shows off the full character structure, and where each part of
 	* character comes from.
 	**/
-	import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
 	import { canBeParent } from '/imports/api/parenting/parenting.js';
-	import PROPERTIES from '/imports/constants/PROPERTIES.js'
+	import { getPropertyIcon } from '/imports/constants/PROPERTIES.js';
+  import treeNodeViewIndex from '/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js';
 
 	export default {
 		name: 'TreeNode',
 		components: {
-			PropertyIcon,
+      ...treeNodeViewIndex
 		},
 		props: {
 			node: Object,
@@ -94,6 +90,10 @@
 			expanded: false,
 		}},
 		computed: {
+      treeNodeView(){
+        let type = this.node.type;
+        return treeNodeViewIndex[type] || treeNodeViewIndex.default;
+      },
 			hasChildren(){
 				return this.children && this.children.length || this.lazy && !this.expanded;
 			},
@@ -113,20 +113,13 @@
 			canExpand(){
 				return canBeParent(this.node.type);
 			},
-			getTitle(){
-				let node = this.node;
-				if (!node) return;
-				if (node.name) return node.name;
-				let prop = PROPERTIES[this.node.type]
-				return prop && prop.name;
-			}
 		},
 		beforeCreate() {
-		  this.$options.components.TreeNodeList = require('./TreeNodeList.vue').default
+      this.$options.components.TreeNodeList = require('./TreeNodeList.vue').default
 		},
 		methods: {
 			icon(type){
-				return PROPERTY_ICONS[type];
+				return getPropertyIcon(type);
 			},
 		}
 	};
@@ -151,12 +144,15 @@
 		opacity: 0.4;
 	}
 	.ghost {
-	  opacity: 0.5;
-	  background: #c8ebfb;
+    opacity: 0.5;
+    background: #fbc8c8;
 	}
 	.v-icon.v-icon--disabled {
 		opacity: 0;
 	}
+  .v-icon {
+    transition: none !important;
+  }
 	.theme--light .tree-node-title:hover {
 		background: rgba(0,0,0,.04);
 	}
diff --git a/app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue b/app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue
index 8a37079e..63c0a2ca 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue
@@ -2,40 +2,28 @@
   <div class="inventory">
     <column-layout>
       <div>
-        <v-card>
-          <v-card-text>
-            <v-switch
-              v-model="organize"
-              label="Organize"
-              class="justify-end"
-            />
-            <!-- Equipping things isn't implemented yet
-				<creature-properties-tree
-					:root="{collection: 'creatures', id: creatureId}"
-					:filter="{
-						equipped: true,
-						type: {$in: ['item']},
-						'ancestors.id': {$nin: containerIds}
-					}"
-					@selected="e => clickProperty(e)"
-					:organize="organize"
-					group="inventory"
-				/>
-				<v-divider/>
-				-->
+        <toolbar-card color="">
+          <v-spacer slot="toolbar" />
+          <v-switch
+            slot="toolbar"
+            v-model="organize"
+            label="Organize"
+            class="justify-end"
+          />
+          <v-card-text class="px-0">
             <creature-properties-tree
               :root="{collection: 'creatures', id: creatureId}"
               :filter="{
-                equipped: {$ne: true},
                 type: {$in: ['item']},
                 'ancestors.id': {$nin: containerIds}
               }"
               :organize="organize"
               group="inventory"
               @selected="e => clickProperty(e)"
+              @reorganized="({doc}) => setEquipped(doc, false)"
             />
           </v-card-text>
-        </v-card>
+        </toolbar-card>
       </div>
       <div
         v-for="container in containersWithoutAncestorContainers"
@@ -55,12 +43,15 @@ import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
 import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
 import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
 import ContainerCard from '/imports/ui/properties/components/inventory/ContainerCard.vue';
+import ToolbarCard from '/imports/ui/components/ToolbarCard.vue';
+import { updateProperty } from '/imports/api/creature/CreatureProperties.js';
 
 export default {
 	components: {
 		ColumnLayout,
 		CreaturePropertiesTree,
 		ContainerCard,
+    ToolbarCard,
 	},
 	props: {
 		creatureId: String,
@@ -104,6 +95,13 @@ export default {
 				data: {_id},
 			});
 		},
+    setEquipped(doc, equipped){
+      updateProperty.call({
+        _id: doc._id,
+        path: ['equipped'],
+        value: equipped
+      });
+    }
 	},
 }
 </script>
diff --git a/app/imports/ui/properties/components/inventory/ContainerCard.vue b/app/imports/ui/properties/components/inventory/ContainerCard.vue
index d4831bc5..17c312e1 100644
--- a/app/imports/ui/properties/components/inventory/ContainerCard.vue
+++ b/app/imports/ui/properties/components/inventory/ContainerCard.vue
@@ -10,7 +10,7 @@
       </v-toolbar-title>
       <v-spacer />
     </template>
-    <v-card-text>
+    <v-card-text class="px-0">
       <creature-properties-tree
         :root="{collection: 'creatureProperties', id: model._id}"
         :filter="{type: {$in: ['container', 'item', 'folder']}}"
@@ -23,7 +23,6 @@
 </template>
 
 <script>
-import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
 import ToolbarCard from '/imports/ui/components/ToolbarCard.vue';
 import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
 
diff --git a/app/imports/ui/properties/forms/ItemForm.vue b/app/imports/ui/properties/forms/ItemForm.vue
index 1405ec4a..b948d266 100644
--- a/app/imports/ui/properties/forms/ItemForm.vue
+++ b/app/imports/ui/properties/forms/ItemForm.vue
@@ -1,5 +1,14 @@
 <template lang="html">
   <div class="item-form">
+    <div class="layout column align-center">
+      <v-switch
+        label="Equipped"
+        class="no-flex"
+        :input-value="model.equipped"
+        :error-messages="errors.equipped"
+        @change="e => $emit('change', {path: ['equipped'], value: !!e})"
+      />
+    </div>
     <div class="layout row wrap">
       <text-field
         label="Name"
diff --git a/app/imports/ui/properties/treeNodeViews/DefaultTreeNode.vue b/app/imports/ui/properties/treeNodeViews/DefaultTreeNode.vue
new file mode 100644
index 00000000..a7512dcb
--- /dev/null
+++ b/app/imports/ui/properties/treeNodeViews/DefaultTreeNode.vue
@@ -0,0 +1,20 @@
+<template lang="html">
+  <div class="layout row align-center justify-start">
+    <property-icon
+      class="mr-2"
+      :type="model.type"
+      :class="selected && 'primary--text'"
+    />
+    <div class="text-no-wrap text-truncate">
+      {{ title }}
+    </div>
+  </div>
+</template>
+
+<script>
+import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
+
+export default {
+  mixins: [treeNodeViewMixin],
+}
+</script>
diff --git a/app/imports/ui/properties/treeNodeViews/ItemTreeNode.vue b/app/imports/ui/properties/treeNodeViews/ItemTreeNode.vue
new file mode 100644
index 00000000..82ab2244
--- /dev/null
+++ b/app/imports/ui/properties/treeNodeViews/ItemTreeNode.vue
@@ -0,0 +1,27 @@
+<template lang="html">
+  <div class="layout row align-center justify-start">
+    <v-icon
+      class="mr-2"
+      :class="selected && 'primary--text'"
+    >
+      {{ model.equipped ? 'check_box' : 'check_box_outline_blank' }}
+    </v-icon>
+    <div
+      class="text-no-wrap text-truncate"
+      :class="model.equipped && 'body-2'"
+    >
+      {{ title }}
+    </div>
+  </div>
+</template>
+
+<script>
+import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
+
+export default {
+  mixins: [treeNodeViewMixin],
+}
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/app/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js b/app/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js
new file mode 100644
index 00000000..827c513d
--- /dev/null
+++ b/app/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js
@@ -0,0 +1,6 @@
+import DefaultTreeNode from '/imports/ui/properties/treeNodeViews/DefaultTreeNode.vue';
+import ItemTreeNode from '/imports/ui/properties/treeNodeViews/ItemTreeNode.vue';
+export default {
+  default: DefaultTreeNode,
+  item: ItemTreeNode,
+}
diff --git a/app/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js b/app/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js
new file mode 100644
index 00000000..ca9e64bf
--- /dev/null
+++ b/app/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js
@@ -0,0 +1,24 @@
+import PROPERTIES from '/imports/constants/PROPERTIES.js';
+import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
+
+export default {
+  components: {
+    PropertyIcon,
+  },
+  props: {
+    model: {
+      type: Object,
+      default: () => ({}),
+    },
+    selected: Boolean,
+  },
+  computed: {
+    title(){
+      let model = this.model;
+      if (!model) return;
+      if (model.name) return model.name;
+      let prop = PROPERTIES[model.type]
+      return prop && prop.name;
+    }
+  }
+}