From 4e2e0ca364db42811899f58cd76215d66ad9cc6e Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Tue, 27 Jul 2021 16:21:55 +0200
Subject: [PATCH] Improved display of referenced properties

---
 .../library/methods/updateReferenceNode.js    |  2 +-
 app/imports/api/properties/References.js      |  8 +++
 .../ui/properties/forms/ReferenceForm.vue     | 50 +++++++++++--------
 .../treeNodeViews/ReferenceTreeNode.vue       | 13 ++++-
 .../ui/properties/viewers/ReferenceViewer.vue | 15 ++++--
 5 files changed, 61 insertions(+), 27 deletions(-)

diff --git a/app/imports/api/library/methods/updateReferenceNode.js b/app/imports/api/library/methods/updateReferenceNode.js
index d74f93fc..f933d065 100644
--- a/app/imports/api/library/methods/updateReferenceNode.js
+++ b/app/imports/api/library/methods/updateReferenceNode.js
@@ -55,7 +55,7 @@ function updateReferenceNodeWork(node, userId){
     return;
   }
   cache = {
-    node: {name: doc.name, type: doc.type},
+    node: doc,
   };
   if (library){
     cache.library = {name: library.name};
diff --git a/app/imports/api/properties/References.js b/app/imports/api/properties/References.js
index 3367ef3c..0f38b94b 100644
--- a/app/imports/api/properties/References.js
+++ b/app/imports/api/properties/References.js
@@ -34,6 +34,14 @@ let ReferenceSchema = new SimpleSchema({
   'cache.node.type': {
     type: String,
   },
+  'cache.node.level': {
+    type: Number,
+    optional: true,
+  },
+  'cache.node.value': {
+    type: Number,
+    optional: true,
+  },
   'cache.library': {
     type: Object,
     optional: true,
diff --git a/app/imports/ui/properties/forms/ReferenceForm.vue b/app/imports/ui/properties/forms/ReferenceForm.vue
index fde536d6..95608437 100644
--- a/app/imports/ui/properties/forms/ReferenceForm.vue
+++ b/app/imports/ui/properties/forms/ReferenceForm.vue
@@ -1,33 +1,43 @@
 <template lang="html">
   <div class="folder-form layout justify-start wrap">
-    <v-text-field
-      label="Linked Property"
-      style="flex-basis: 300px;"
-      readonly
-      outlined
-      persistent-hint
-      :loading="linkLoading"
-      :value="
-        model.cache.node && model.cache.node.name ||
-          model.ref && model.ref.id
-      "
-      :hint="model.cache.library && model.cache.library.name"
-      :error-messages="model.cache.error || errors.ref"
-      prepend-inner-icon="mdi-vector-link"
-      append-icon="mdi-refresh"
-      data-id="change-ref"
-      @click="changeReference"
-      @click:prepend-inner="changeReference"
-      @click:append="updateReferenceNode"
-    />
+    <div data-id="change-ref">
+      <v-input
+        :label="model.cache && model.cache.node ? '' : 'Linked Property'"
+        style="flex-basis: 300px; cursor: pointer;"
+        readonly
+        outlined
+        persistent-hint
+        :loading="linkLoading"
+        :value="
+          model.cache.node && model.cache.node.name ||
+            model.ref && model.ref.id
+        "
+        :hint="model.cache.library && model.cache.library.name"
+        :error-messages="model.cache.error || errors.ref"
+        prepend-icon="mdi-vector-link"
+        append-icon="mdi-refresh"
+        @click="changeReference"
+        @click:prepend="changeReference"
+        @click:append="updateReferenceNode"
+      >
+        <tree-node-view
+          v-if="model && model.cache && model.cache.node"
+          :model="model.cache.node"
+        />
+      </v-input>
+    </div>
   </div>
 </template>
 
 <script lang="js">
+  import TreeNodeView from '/imports/ui/properties/treeNodeViews/TreeNodeView.vue';
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
   import updateReferenceNode from '/imports/api/library/methods/updateReferenceNode.js';
 
   export default {
+    components: {
+      TreeNodeView,
+    },
     mixins: [propertyFormMixin],
     data(){return {
       linkLoading: false,
diff --git a/app/imports/ui/properties/treeNodeViews/ReferenceTreeNode.vue b/app/imports/ui/properties/treeNodeViews/ReferenceTreeNode.vue
index 17f07b86..3bb977c3 100644
--- a/app/imports/ui/properties/treeNodeViews/ReferenceTreeNode.vue
+++ b/app/imports/ui/properties/treeNodeViews/ReferenceTreeNode.vue
@@ -7,7 +7,14 @@
       :color="model.color"
       :class="selected && 'primary--text'"
     />
-    <div class="text-no-wrap text-truncate">
+    <tree-node-view
+      v-if="model.cache && model.cache.node && model.cache.node.type !== 'reference'"
+      :model="model.cache.node"
+    />
+    <div
+      v-else
+      class="text-no-wrap text-truncate"
+    >
       {{ model.cache.node && model.cache.node.name || title }}
     </div>
   </div>
@@ -15,8 +22,12 @@
 
 <script lang="js">
 import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
+import TreeNodeView from '/imports/ui/properties/treeNodeViews/TreeNodeView.vue';
 
 export default {
+  components: {
+    TreeNodeView,
+  },
   mixins: [treeNodeViewMixin],
 }
 </script>
diff --git a/app/imports/ui/properties/viewers/ReferenceViewer.vue b/app/imports/ui/properties/viewers/ReferenceViewer.vue
index ddbccf23..eb70e7a9 100644
--- a/app/imports/ui/properties/viewers/ReferenceViewer.vue
+++ b/app/imports/ui/properties/viewers/ReferenceViewer.vue
@@ -5,11 +5,12 @@
       name="Error"
       :value="model.cache.error"
     />
-    <property-field
-      v-else-if="model.ref && model.ref.id"
-      name="Linked Property"
-      :value="model.cache.node && model.cache.node.name || model.ref.id"
-    />
+    <template v-else-if="model.ref && model.ref.id">
+      <div class="text-caption">
+        Linked Property
+      </div>
+      <tree-node-view :model="model.cache.node" />
+    </template>
     <property-field
       v-if="model.cache.library && model.cache.library.name"
       name="Library"
@@ -20,8 +21,12 @@
 
 <script lang="js">
 	import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
+  import TreeNodeView from '/imports/ui/properties/treeNodeViews/TreeNodeView.vue';
 
 	export default {
+    components: {
+      TreeNodeView,
+    },
 		mixins: [propertyViewerMixin],
 	}
 </script>