From 00272e7b5536d798d1d59173815fece9f653cd6c Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Wed, 29 Jun 2022 15:27:12 +0200
Subject: [PATCH] Action cards now show their decendants

---
 app/imports/server/publications/library.js    |  2 ++
 app/imports/ui/components/tree/TreeNode.vue   |  8 +++--
 .../ui/components/tree/TreeNodeList.vue       |  4 ++-
 .../character/characterSheetTabs/StatsTab.vue |  8 +++++
 .../CreaturePropertiesTree.vue                |  4 ++-
 .../components/actions/ActionCard.vue         | 12 ++++++-
 .../treeNodeViews/SavingThrowTreeNode.vue     | 36 +++++++++++++++++++
 .../treeNodeViews/treeNodeViewIndex.js        |  2 ++
 8 files changed, 71 insertions(+), 5 deletions(-)
 create mode 100644 app/imports/ui/properties/treeNodeViews/SavingThrowTreeNode.vue

diff --git a/app/imports/server/publications/library.js b/app/imports/server/publications/library.js
index 778d08a8..f1d04175 100644
--- a/app/imports/server/publications/library.js
+++ b/app/imports/server/publications/library.js
@@ -32,6 +32,8 @@ const LIBRARY_NODE_TREE_FIELDS = {
   value: 1,
   // Reference
   cache: 1,
+  // Saving throw
+  dc: 1,
 }
 
 export { LIBRARY_NODE_TREE_FIELDS };
diff --git a/app/imports/ui/components/tree/TreeNode.vue b/app/imports/ui/components/tree/TreeNode.vue
index a044730f..4579c441 100644
--- a/app/imports/ui/components/tree/TreeNode.vue
+++ b/app/imports/ui/components/tree/TreeNode.vue
@@ -14,6 +14,7 @@
       @click.stop="$emit('selected', node._id)"
     >
       <v-btn
+        v-if="!startExpanded"
         small
         icon
         :class="showExpanded ? 'rotate-90' : null"
@@ -26,6 +27,7 @@
       </v-btn>
       <div
         class="layout align-center justify-start pr-1"
+        :class="{'ml-4': startExpanded}"
         style="flex-grow: 0;"
       >
         <v-icon
@@ -56,6 +58,7 @@
             :group="group"
             :organize="organize"
             :selected-node="selectedNode"
+            :start-expanded="startExpanded"
             @reordered="e => $emit('reordered', e)"
             @reorganized="e => $emit('reorganized', e)"
             @selected="e => $emit('selected', e)"
@@ -112,10 +115,11 @@
         type: Object,
         default: undefined,
       },
-			selected: Boolean,
+      selected: Boolean,
+      startExpanded: Boolean,
 		},
 		data(){return {
-			expanded: this.node._ancestorOfMatchedDocument ||
+			expanded: this.startExpanded || this.node._ancestorOfMatchedDocument ||
         some(this.selectedNode?.ancestors, ref => ref.id === this.node._id) ||
         false,
 		}},
diff --git a/app/imports/ui/components/tree/TreeNodeList.vue b/app/imports/ui/components/tree/TreeNodeList.vue
index 80e11e45..f5915ca2 100644
--- a/app/imports/ui/components/tree/TreeNodeList.vue
+++ b/app/imports/ui/components/tree/TreeNodeList.vue
@@ -23,6 +23,7 @@
       :ancestors-of-selected-node="ancestorsOfSelectedNode"
       :organize="organize"
       :lazy="lazy"
+      :start-expanded="startExpanded"
       @selected="e => $emit('selected', e)"
       @reordered="e => $emit('reordered', e)"
       @reorganized="e => $emit('reorganized', e)"
@@ -58,9 +59,10 @@
         type: Array,
         default: () => [],
       },
+      startExpanded: Boolean,
 		},
 		data(){ return {
-			expanded: false,
+			expanded: this.startExpanded || false,
       displayedChildren: [],
 		}},
 		computed: {
diff --git a/app/imports/ui/creature/character/characterSheetTabs/StatsTab.vue b/app/imports/ui/creature/character/characterSheetTabs/StatsTab.vue
index 9862591f..17dfce2d 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/StatsTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/StatsTab.vue
@@ -250,6 +250,7 @@
           :model="action"
           :data-id="action._id"
           @click="clickProperty({_id: action._id})"
+          @sub-click="_id => clickTreeProperty({_id})"
         />
       </div>
       <div
@@ -515,6 +516,13 @@
 					elementId: `${_id}`,
 					data: {_id},
 				});
+      },
+      clickTreeProperty({_id}){
+				this.$store.commit('pushDialogStack', {
+					component: 'creature-property-dialog',
+					elementId: `tree-node-${_id}`,
+					data: {_id},
+				});
 			},
 			incrementChange(_id, {type, value}){
 				if (type === 'increment'){
diff --git a/app/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue b/app/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue
index b7eb3e34..9c1adf87 100644
--- a/app/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue
+++ b/app/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue
@@ -5,6 +5,7 @@
     :group="group"
     :organize="organize"
     :selected-node="selectedNode"
+    :start-expanded="expanded"
     @selected="e => $emit('selected', e)"
     @reordered="reordered"
     @reorganized="reorganized"
@@ -38,7 +39,8 @@
 			group: {
 				type: String,
 				default: 'creatureProperties'
-			}
+			},
+			expanded: Boolean,
 		},
 		meteor: {
 			children(){
diff --git a/app/imports/ui/properties/components/actions/ActionCard.vue b/app/imports/ui/properties/components/actions/ActionCard.vue
index be20ce44..50f22c18 100644
--- a/app/imports/ui/properties/components/actions/ActionCard.vue
+++ b/app/imports/ui/properties/components/actions/ActionCard.vue
@@ -93,6 +93,14 @@
           :markdown="model.summary.value || model.summary.text"
         />
       </template>
+      <v-divder v-if="model.children && model.children.length" />
+      <creature-properties-tree
+        style="width: 100%;"
+        expanded
+        :root="{collection: 'creatureProperties', id: model._id}"
+        @length="childrenLength = $event"
+        @selected="e => $emit('sub-click', e)"
+      />
     </div>
     <card-highlight :active="hovering" />
   </v-card>
@@ -109,6 +117,7 @@ import RollPopup from '/imports/ui/components/RollPopup.vue';
 import MarkdownText from '/imports/ui/components/MarkdownText.vue';
 import {snackbar} from '/imports/ui/components/snackbars/SnackbarQueue.js';
 import CardHighlight from '/imports/ui/components/CardHighlight.vue';
+import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
 
 export default {
   components: {
@@ -117,7 +126,8 @@ export default {
     MarkdownText,
     PropertyIcon,
     RollPopup,
-    CardHighlight
+    CardHighlight,
+    CreaturePropertiesTree,
   },
   inject: {
     context: {
diff --git a/app/imports/ui/properties/treeNodeViews/SavingThrowTreeNode.vue b/app/imports/ui/properties/treeNodeViews/SavingThrowTreeNode.vue
new file mode 100644
index 00000000..10767f99
--- /dev/null
+++ b/app/imports/ui/properties/treeNodeViews/SavingThrowTreeNode.vue
@@ -0,0 +1,36 @@
+<template lang="html">
+  <div class="layout align-center justify-start">
+    <property-icon
+      v-if="!hideIcon"
+      class="mr-2"
+      :model="model"
+      :color="model.color"
+      :class="selected && 'primary--text'"
+    />
+    <div class="text-no-wrap text-truncate">
+      <template v-if="model.dc && Number.isFinite(model.dc.value)">
+        DC {{ model.dc.value }}
+      </template>
+      {{ title }}
+    </div>
+  </div>
+</template>
+
+<script lang="js">
+import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
+import PROPERTIES from '/imports/constants/PROPERTIES.js';
+
+export default {
+mixins: [treeNodeViewMixin],
+computed: {
+  title() {
+    let model = this.model;
+    if (!model) return;
+    if (model.name) return model.name;
+    if (model.stat) return model.stat;
+    let prop = PROPERTIES[model.type]
+    return prop && prop.name;
+    }
+  }
+}
+</script>
diff --git a/app/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js b/app/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js
index 26d52ca0..1f9772e8 100644
--- a/app/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js
+++ b/app/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js
@@ -7,6 +7,7 @@ import EffectTreeNode from '/imports/ui/properties/treeNodeViews/EffectTreeNode.
 import ClassLevelTreeNode from '/imports/ui/properties/treeNodeViews/ClassLevelTreeNode.vue';
 import ProficiencyTreeNode from '/imports/ui/properties/treeNodeViews/ProficiencyTreeNode.vue';
 import ReferenceTreeNode from '/imports/ui/properties/treeNodeViews/ReferenceTreeNode.vue';
+import SavingThrowTreeNode from '/imports/ui/properties/treeNodeViews/SavingThrowTreeNode.vue';
 
 export default {
   default: DefaultTreeNode,
@@ -18,4 +19,5 @@ export default {
   item: ItemTreeNode,
   proficiency: ProficiencyTreeNode,
   reference: ReferenceTreeNode,
+  savingThrow: SavingThrowTreeNode,
 }