From 33d7b52325831a9d7a95620d877288241885146b Mon Sep 17 00:00:00 2001
From: Chris Feger <christopherfeger@yahoo.com>
Date: Thu, 24 Aug 2023 13:00:19 -0700
Subject: [PATCH] Show effects on Damage properties in action view

---
 .../client/ui/components/tree/TreeNode.vue    |  5 ++-
 .../ui/components/tree/TreeNodeList.vue       |  2 +
 .../components/actions/ActionCard.vue         |  1 +
 .../treeNodeViews/DamageTreeNode.vue          | 43 +++++++++++++------
 .../properties/treeNodeViews/TreeNodeView.vue |  2 +
 .../treeNodeViews/treeNodeViewMixin.js        |  1 +
 6 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/app/imports/client/ui/components/tree/TreeNode.vue b/app/imports/client/ui/components/tree/TreeNode.vue
index 9ef46561..18df392e 100644
--- a/app/imports/client/ui/components/tree/TreeNode.vue
+++ b/app/imports/client/ui/components/tree/TreeNode.vue
@@ -40,6 +40,7 @@
         <tree-node-view
           :model="node"
           :selected="selected"
+          :show-external-details="showExternalDetails"
         />
       </div>
     </div>
@@ -57,6 +58,7 @@
             :organize="organize"
             :selected-node="selectedNode"
             :start-expanded="startExpanded"
+            :show-external-details="showExternalDetails"
             @reordered="e => $emit('reordered', e)"
             @reorganized="e => $emit('reorganized', e)"
             @selected="e => $emit('selected', e)"
@@ -115,6 +117,7 @@ export default {
     },
     selected: Boolean,
     startExpanded: Boolean,
+    showExternalDetails: Boolean,
   },
   data() {
     return {
@@ -214,6 +217,6 @@ export default {
 
 .tree-node-title,
 .dummy-node {
-  height: 40px;
+  min-height: 40px;
 }
 </style>
diff --git a/app/imports/client/ui/components/tree/TreeNodeList.vue b/app/imports/client/ui/components/tree/TreeNodeList.vue
index 0eef77c3..5199180f 100644
--- a/app/imports/client/ui/components/tree/TreeNodeList.vue
+++ b/app/imports/client/ui/components/tree/TreeNodeList.vue
@@ -23,6 +23,7 @@
       :organize="organize"
       :lazy="lazy"
       :start-expanded="startExpanded"
+      :show-external-details="showExternalDetails"
       @selected="e => $emit('selected', e)"
       @reordered="e => $emit('reordered', e)"
       @reorganized="e => $emit('reorganized', e)"
@@ -64,6 +65,7 @@ export default {
       default: () => [],
     },
     startExpanded: Boolean,
+    showExternalDetails: Boolean,
   },
   data() {
     return {
diff --git a/app/imports/client/ui/properties/components/actions/ActionCard.vue b/app/imports/client/ui/properties/components/actions/ActionCard.vue
index fd568b69..85e75d77 100644
--- a/app/imports/client/ui/properties/components/actions/ActionCard.vue
+++ b/app/imports/client/ui/properties/components/actions/ActionCard.vue
@@ -96,6 +96,7 @@
       <tree-node-list
         v-if="children && children.length"
         start-expanded
+        show-external-details
         :children="children"
         @selected="e => $emit('sub-click', e)"
       />
diff --git a/app/imports/client/ui/properties/treeNodeViews/DamageTreeNode.vue b/app/imports/client/ui/properties/treeNodeViews/DamageTreeNode.vue
index 3ae28644..c4502817 100644
--- a/app/imports/client/ui/properties/treeNodeViews/DamageTreeNode.vue
+++ b/app/imports/client/ui/properties/treeNodeViews/DamageTreeNode.vue
@@ -1,17 +1,32 @@
 <template lang="html">
-  <div class="layout align-center justify-start">
-    <v-icon
-      v-if="!hideIcon"
-      class="mr-2"
-      :color="model.color"
-      :class="selected && 'primary--text'"
-    >
-      {{ icon }}
-    </v-icon>
-    <div class="text-no-wrap text-truncate">
-      {{ model.amount && model.amount.value }}
-      {{ model.damageType }}<span v-if="model.damageType !== 'healing'">&nbsp;damage</span>
-      <span v-if="model.target === 'self'">to self</span>
+  <div>
+    <div class="layout align-center justify-start" style="height:40px;">
+      <v-icon
+        v-if="!hideIcon"
+        class="mr-2"
+        :color="model.color"
+        :class="selected && 'primary--text'"
+      >
+        {{ icon }}
+      </v-icon>
+      <div class="text-no-wrap text-truncate">
+        {{ model.amount && model.amount.value }}
+        {{ model.damageType }}<span v-if="model.damageType !== 'healing'">&nbsp;damage</span>
+        <span v-if="model.target === 'self'">to self</span>
+      </div>
+    </div>
+    <div
+      v-if="showExternalDetails"
+      v-for="effect in model.amount.effects">
+      <div v-if="effect.amount.value !== 0"
+        style="position:relative; top:-15px; left:5px; height:25px;">
+        <inline-effect
+          hide-breadcrumbs
+          :key="effect._id"
+          :data-id="effect._id"
+          :model="effect"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -19,9 +34,11 @@
 <script lang="js">
 import treeNodeViewMixin from '/imports/client/ui/properties/treeNodeViews/treeNodeViewMixin.js';
 import { getPropertyIcon } from '/imports/constants/PROPERTIES.js';
+import InlineEffect from '../components/effects/InlineEffect.vue';
 
 export default {
   mixins: [treeNodeViewMixin],
+  components: {InlineEffect},
   computed: {
     icon() {
       if (this.model.damageType === 'healing') {
diff --git a/app/imports/client/ui/properties/treeNodeViews/TreeNodeView.vue b/app/imports/client/ui/properties/treeNodeViews/TreeNodeView.vue
index 0da1e0ce..4819777a 100644
--- a/app/imports/client/ui/properties/treeNodeViews/TreeNodeView.vue
+++ b/app/imports/client/ui/properties/treeNodeViews/TreeNodeView.vue
@@ -3,6 +3,7 @@
     :is="treeNodeView"
     :model="model"
     :selected="selected"
+    :show-external-details="showExternalDetails"
     :class="{
       'inactive': model.inactive,
     }"
@@ -24,6 +25,7 @@ export default {
       required: true,
     },
     selected: Boolean,
+    showExternalDetails: Boolean,
   },
   computed: {
     treeNodeView(){
diff --git a/app/imports/client/ui/properties/treeNodeViews/treeNodeViewMixin.js b/app/imports/client/ui/properties/treeNodeViews/treeNodeViewMixin.js
index 3a3132ba..4376fdc1 100644
--- a/app/imports/client/ui/properties/treeNodeViews/treeNodeViewMixin.js
+++ b/app/imports/client/ui/properties/treeNodeViews/treeNodeViewMixin.js
@@ -12,6 +12,7 @@ export default {
     },
     selected: Boolean,
     hideIcon: Boolean,
+    showExternalDetails: Boolean,
   },
   computed: {
     title(){