Improved property viewers

Slot fill data included in library viewer
Breadcrumbs and children in lib view
breadcrumbs and children work on tree tab

app/imports/client/ui/creature/creatureProperties/Breadcrumbs.vue

@@ -4,11 +4,14 @@
     :class="{'no-icons': noIcons}"
   >
     <span
-      v-if="noLinks"
+      v-if="noLinks || embedded || collection !== 'creatureProperties'"
     >
-      <v-icon>
+      <v-icon v-if="collection === 'creatureProperties'">
         mdi-account
       </v-icon>
+      <v-icon v-else-if="collection === 'libraryNodes'">
+        mdi-book-open-blank-variant
+      </v-icon>
     </span>
     <a
       v-else
@@ -62,20 +65,29 @@
         type: Object,
         required: true,
       },
+      collection: {
+        type: String,
+        default: 'creatureProperties',
+      },
       noLinks: Boolean,
       noIcons: Boolean,
       editing: Boolean,
+      embedded: Boolean,
     },
     computed:{
       props(){
         return this.model.ancestors
           .slice(1)
           .map(ref => fetchDocByRef(ref))
-          .filter(prop => prop.type !== 'propertySlot');
+          .filter(prop => (this.collection !== 'creatureProperties' || prop.type !== 'propertySlot'));
       },
     },
     methods: {
-      click(id){
+      click(id) {
+        if (this.embedded) {
+          this.$emit('select-sub-property', id);
+          return;
+        }
         const store = this.$store;
         // Check if there is a dialog open for this doc already
         let dialogFound;
@@ -92,9 +104,12 @@
           // Pop dialogs until we get to it
           store.dispatch('popDialogStacks', dialogsToPop);
         } else {
+          const component = this.collection === 'creatureProperties' ? 'creature-property-dialog'
+            : this.collection === 'libraryNodes' ? 'library-node-dialog'
+            : undefined;
           // Otherwise open it as a new dialog
           store.commit('pushDialogStack', {
-            component: 'creature-property-dialog',
+            component,
             elementId: `breadcrumb-${id}`,
             data: {
               _id: id,
@@ -139,9 +154,6 @@
 .breadcrumbs {
   margin-bottom: 16px;
   opacity: 0.8;
-}
-.no-icons {
-
 }
 </style>
 

app/imports/client/ui/creature/creatureProperties/CreaturePropertyDialog.vue

@@ -16,12 +16,12 @@
       <div
         class="layout mb-4"
       >
-        <template v-if="!embedded">
-          <breadcrumbs
-            :model="model"
-            :editing="editing"
-          />
-        </template>
+        <breadcrumbs
+          :model="model"
+          :editing="editing"
+          :embedded="embedded"
+          @select-sub-property="selectSubProperty"
+        />
         <v-spacer />
         <v-chip disabled>
           {{ typeName }}
@@ -43,31 +43,12 @@
             @select-sub-property="selectSubProperty"
           />
         </div>
-        <div v-else>
-          <component
-            :is="model.type + 'Viewer'"
-            :key="_id"
-            class="creature-property-viewer"
-            :model="model"
-          />
-          <v-row
-            v-show="!embedded && childrenLength"
-            class="mt-1"
-            dense
-          >
-            <property-field
-              name="Child properties"
-              :cols="{cols: 12}"
-            >
-              <creature-properties-tree
-                style="width: 100%;"
-                :root="{collection: 'creatureProperties', id: model._id}"
-                @length="childrenLength = $event"
-                @selected="selectSubProperty"
-              />
-            </property-field>
-          </v-row>
-        </div>
+        <property-viewer 
+          v-else
+          :key="_id"
+          :model="model"
+          @select-sub-property="selectSubProperty"
+        />
       </v-fade-transition>
     </template>
     <div
@@ -100,11 +81,7 @@ import Creatures from '/imports/api/creature/creatures/Creatures.js';
 import PropertyToolbar from '/imports/client/ui/components/propertyToolbar.vue';
 import DialogBase from '/imports/client/ui/dialogStack/DialogBase.vue';
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
-import PropertyIcon from '/imports/client/ui/properties/shared/PropertyIcon.vue';
-import propertyFormIndex from '/imports/client/ui/properties/forms/shared/propertyFormIndex.js';
 import PropertyForm from '/imports/client/ui/properties/PropertyForm.vue';
-import propertyViewerIndex from '/imports/client/ui/properties/viewers/shared/propertyViewerIndex.js';
-import CreaturePropertiesTree from '/imports/client/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
 import getPropertyTitle from '/imports/client/ui/properties/shared/getPropertyTitle.js';
 import { assertEditPermission } from '/imports/api/creature/creatures/creaturePermissions.js';
 import { get, findLast } from 'lodash';
@@ -114,29 +91,15 @@ import { getHighestOrder } from '/imports/api/parenting/order.js';
 import insertProperty from '/imports/api/creature/creatureProperties/methods/insertProperty.js';
 import Breadcrumbs from '/imports/client/ui/creature/creatureProperties/Breadcrumbs.vue';
 import insertPropertyFromLibraryNode from '/imports/api/creature/creatureProperties/methods/insertPropertyFromLibraryNode.js';
-import PropertyField from '/imports/client/ui/properties/viewers/shared/PropertyField.vue';
-
-let formIndex = {};
-for (let key in propertyFormIndex){
-  formIndex[key + 'Form'] = propertyFormIndex[key];
-}
-
-let viewerIndex = {};
-for (let key in propertyViewerIndex){
-  formIndex[key + 'Viewer'] = propertyViewerIndex[key];
-}
+import PropertyViewer from '/imports/client/ui/properties/shared/PropertyViewer.vue';
 
 export default {
   components: {
-    ...formIndex,
-    ...viewerIndex,
     PropertyForm,
-    PropertyIcon,
     DialogBase,
     PropertyToolbar,
-    CreaturePropertiesTree,
     Breadcrumbs,
-    PropertyField,
+    PropertyViewer,
   },
   props: {
     _id: String,
@@ -148,7 +111,6 @@ export default {
     // CurrentId lags behind Id by one tick so that events fired by destroying
     // forms keyed to the old ID are applied before the new ID overwrites it
     currentId: undefined,
-    childrenLength: 0,
   }},
   meteor: {
     model(){