Progress aligning and improving node/prop forms

app/imports/api/library/LibraryNodes.js

@@ -4,7 +4,7 @@ import { ValidatedMethod } from 'meteor/mdg:validated-method';
 import { RateLimiterMixin } from 'ddp-rate-limiter-mixin';
 import SimpleSchema from 'simpl-schema';
 import ColorSchema from '/imports/api/properties/subSchemas/ColorSchema.js';
-import ChildSchema from '/imports/api/parenting/ChildSchema.js';
+import ChildSchema, { RefSchema } from '/imports/api/parenting/ChildSchema.js';
 import propertySchemasIndex from '/imports/api/properties/propertySchemasIndex.js';
 import Libraries from '/imports/api/library/Libraries.js';
 import { assertEditPermission } from '/imports/api/sharing/sharingPermissions.js';
@@ -15,6 +15,8 @@ import '/imports/api/library/methods/index.js';
 import { updateReferenceNodeWork } from '/imports/api/library/methods/updateReferenceNode.js';
 import STORAGE_LIMITS from '/imports/constants/STORAGE_LIMITS.js';
 import { restore } from '/imports/api/parenting/softRemove.js';
+import { getAncestry } from '/imports/api/parenting/parenting.js';
+import { reorderDocs } from '/imports/api/parenting/order.js';
 
 let LibraryNodes = new Mongo.Collection('libraryNodes');
 
@@ -132,20 +134,56 @@ function assertNodeEditPermission(node, userId) {
 
 const insertNode = new ValidatedMethod({
   name: 'libraryNodes.insert',
-  validate: null,
+  validate: new SimpleSchema({
+    libraryNode: {
+      type: Object,
+      blackbox: true,
+    },
+    parentRef: RefSchema,
+  }).validator(),
   mixins: [RateLimiterMixin],
   rateLimit: {
     numRequests: 5,
     timeInterval: 5000,
   },
-  run(libraryNode) {
+  run({ libraryNode, parentRef }) {
+    // get the new ancestry
+    let { parentDoc, ancestors } = getAncestry({ parentRef });
+
+    // Check permission to edit
+    let root;
+    if (parentRef.collection === 'libraries') {
+      root = parentDoc;
+    } else if (parentRef.collection === 'libraryNodes') {
+      root = Libraries.findOne(parentDoc.ancestors[0].id);
+    } else {
+      throw `${parentRef.collection} is not a valid parent collection`
+    }
+    assertEditPermission(root, this.userId);
+
+    // Set the ancestry of the library node
+    libraryNode.parent = parentRef;
+    libraryNode.ancestors = ancestors;
+    // Remove its ID if it came with one to force a random one to be generated
+    // server-side
     delete libraryNode._id;
-    assertNodeEditPermission(libraryNode, this.userId);
+
-    let nodeId = LibraryNodes.insert(libraryNode);
+    // Insert the node
+    const nodeId = LibraryNodes.insert(libraryNode);
+
+    // Update the node if it was a reference node
     if (libraryNode.type == 'reference') {
       libraryNode._id = nodeId;
       updateReferenceNodeWork(libraryNode, this.userId);
     }
+
+    // Tree structure changed by insert, reorder the tree
+    reorderDocs({
+      collection: LibraryNodes,
+      ancestorId: root._id,
+    });
+
+    // Return the id of the inserted node
     return nodeId;
   },
 });

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

@@ -68,8 +68,7 @@
         <v-card-text
           v-if="!$slots['unwrapped-content']"
         >
-          <component
+          <property-form
-            :is="type"
             v-if="type"
             class="creature-property-form"
             :model="model"
@@ -191,12 +190,12 @@ import PROPERTIES, { getPropertyName } from '/imports/constants/PROPERTIES.js';
 import TreeNodeView from '/imports/client/ui/properties/treeNodeViews/TreeNodeView.vue';
 import LibraryNodeExpansionContent from '/imports/client/ui/library/LibraryNodeExpansionContent.vue';
 import schemaFormMixin from '/imports/client/ui/properties/forms/shared/schemaFormMixin.js';
-import propertyFormIndex from '/imports/client/ui/properties/forms/shared/propertyFormIndex.js';
 import propertySchemasIndex from '/imports/api/properties/propertySchemasIndex.js';
 import Libraries from '/imports/api/library/Libraries.js';
 import getThemeColor from '/imports/client/ui/utility/getThemeColor.js';
 import PropertySelector from '/imports/client/ui/properties/shared/PropertySelector.vue';
 import {snackbar} from '/imports/client/ui/components/snackbars/SnackbarQueue.js';
+import PropertyForm from '/imports/client/ui/properties/PropertyForm.vue';
 
 export default {
   components: {
@@ -204,7 +203,7 @@ export default {
     DialogBase,
     TreeNodeView,
     LibraryNodeExpansionContent,
-    ...propertyFormIndex,
+    PropertyForm,
   },
   mixins: [schemaFormMixin],
   props: {

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

@@ -13,10 +13,10 @@
 </template>
 
 <script lang="js">
-import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 import nodesToTree from '/imports/api/parenting/nodesToTree.js'
 import TreeNodeList from '/imports/client/ui/components/tree/TreeNodeList.vue';
 import { organizeDoc, reorderDoc } from '/imports/api/parenting/organizeMethods.js';
+import getCollectionByName from '/imports/api/parenting/getCollectionByName.js';
 
 export default {
   components: {
@@ -40,12 +40,16 @@ export default {
       type: String,
       default: 'creatureProperties'
     },
+    collection: {
+      type: String,
+      default: 'creatureProperties'
+    },
     expanded: Boolean,
   },
   meteor: {
     children() {
       const children = nodesToTree({
-        collection: CreatureProperties,
+        collection: getCollectionByName(this.collection),
         ancestorId: this.root.id,
         filter: this.filter,
         includeFilteredDocAncestors: true,
@@ -60,7 +64,7 @@ export default {
       reorderDoc.call({
         docRef: {
           id: doc._id,
-          collection: 'creatureProperties',
+          collection: this.collection,
         },
         order: newIndex,
       });
@@ -70,7 +74,7 @@ export default {
       if (parent) {
         parentRef = {
           id: parent._id,
-          collection: 'creatureProperties',
+          collection: this.collection,
         };
       } else {
         parentRef = this.root;
@@ -78,7 +82,7 @@ export default {
       organizeDoc.call({
         docRef: {
           id: doc._id,
-          collection: 'creatureProperties',
+          collection: this.collection,
         },
         parentRef,
         order: newIndex,

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

@@ -40,6 +40,7 @@
             @push="push"
             @pull="pull"
             @add-child="addProperty"
+            @select-sub-property="selectSubProperty"
           />
         </div>
         <div v-else>
@@ -244,7 +245,11 @@ export default {
         },
       });
     },
-    selectSubProperty(_id){
+    selectSubProperty(_id) {
+      if (this.embedded) {
+        this.$emit('select-sub-property', _id);
+        return;
+      }
       this.$store.commit('pushDialogStack', {
         component: 'creature-property-dialog',
         elementId: `tree-node-${_id}`,
@@ -254,14 +259,15 @@ export default {
         },
       });
     },
-    addProperty(){
+    addProperty({elementId, suggestedType}){
       let parentPropertyId = this.model._id;
       this.$store.commit('pushDialogStack', {
         component: 'add-creature-property-dialog',
-        elementId: 'insert-creature-property-btn',
+        elementId,
         data: {
           parentDoc: this.model,
           creatureId: this.creatureId,
+          suggestedType,
         },
         callback(result){
           if (!result) return;

app/imports/client/ui/library/LibraryAndNode.vue

@@ -74,6 +74,7 @@
         embedded
         @removed="selectedNodeId = undefined"
         @duplicated="id => {if ($vuetify.breakpoint.mdAndUp) selectedNodeId = id}"
+        @select-sub-property="id => selectedNodeId = id"
       />
     </div>
   </tree-detail-layout>

app/imports/client/ui/library/LibraryNodeDialog.vue

@@ -32,12 +32,14 @@
         v-else-if="model && editing"
         :key="_id"
         class="library-node-form"
+        collection="libraryNodes"
         :model="model"
         :embedded="embedded"
         @change="change"
         @push="push"
         @pull="pull"
         @add-child="addLibraryNode"
+        @select-sub-property="selectSubProperty"
       />
       <component
         :is="model.type + 'Viewer'"
@@ -82,251 +84,266 @@
 </template>
 
 <script lang="js">
-  import LibraryNodes, {
+import LibraryNodes, {
-    updateLibraryNode,
+  updateLibraryNode,
-    pushToLibraryNode,
+  pushToLibraryNode,
-    pullFromLibraryNode,
+  pullFromLibraryNode,
-    softRemoveLibraryNode,
+  softRemoveLibraryNode,
-    restoreLibraryNode,
+  restoreLibraryNode,
-    insertNode,
+  insertNode,
-  } from '/imports/api/library/LibraryNodes.js';
+} from '/imports/api/library/LibraryNodes.js';
-  import duplicateLibraryNode from '/imports/api/library/methods/duplicateLibraryNode.js';
+import duplicateLibraryNode from '/imports/api/library/methods/duplicateLibraryNode.js';
-  import DialogBase from '/imports/client/ui/dialogStack/DialogBase.vue';
+import DialogBase from '/imports/client/ui/dialogStack/DialogBase.vue';
-  import PropertyToolbar from '/imports/client/ui/components/propertyToolbar.vue';
+import PropertyToolbar from '/imports/client/ui/components/propertyToolbar.vue';
-  import { getPropertyName } from '/imports/constants/PROPERTIES.js';
+import { getPropertyName } from '/imports/constants/PROPERTIES.js';
-  import PropertyIcon from '/imports/client/ui/properties/shared/PropertyIcon.vue';
+import PropertyIcon from '/imports/client/ui/properties/shared/PropertyIcon.vue';
-  import propertyFormIndex from '/imports/client/ui/properties/forms/shared/propertyFormIndex.js';
+import propertyFormIndex from '/imports/client/ui/properties/forms/shared/propertyFormIndex.js';
-  import propertyViewerIndex from '/imports/client/ui/properties/viewers/shared/propertyViewerIndex.js';
+import propertyViewerIndex from '/imports/client/ui/properties/viewers/shared/propertyViewerIndex.js';
-  import { get } from 'lodash';
+import { get } from 'lodash';
-  import {
+import {
-    assertDocEditPermission, assertDocCopyPermission
+  assertDocEditPermission, assertDocCopyPermission
-  } from '/imports/api/sharing/sharingPermissions.js';
+} from '/imports/api/sharing/sharingPermissions.js';
-  import { organizeDoc } from '/imports/api/parenting/organizeMethods.js';
+import { organizeDoc } from '/imports/api/parenting/organizeMethods.js';
-  import { snackbar } from '/imports/client/ui/components/snackbars/SnackbarQueue.js';
+import { snackbar } from '/imports/client/ui/components/snackbars/SnackbarQueue.js';
-  import getPropertyTitle from '/imports/client/ui/properties/shared/getPropertyTitle.js';
+import getPropertyTitle from '/imports/client/ui/properties/shared/getPropertyTitle.js';
-  import copyLibraryNodeTo from '/imports/api/library/methods/copyLibraryNodeTo.js';
+import copyLibraryNodeTo from '/imports/api/library/methods/copyLibraryNodeTo.js';
-  import { getHighestOrder } from '/imports/api/parenting/order.js';
+import { getHighestOrder } from '/imports/api/parenting/order.js';
-  import { getUserTier } from '/imports/api/users/patreon/tiers.js';
+import { getUserTier } from '/imports/api/users/patreon/tiers.js';
-  import PropertyForm from '/imports/client/ui/properties/PropertyForm.vue';
+import PropertyForm from '/imports/client/ui/properties/PropertyForm.vue';
-  let viewerIndex = {};
+let viewerIndex = {};
-  for (let key in propertyViewerIndex){
+for (let key in propertyViewerIndex){
-    viewerIndex[key + 'Viewer'] = propertyViewerIndex[key];
+  viewerIndex[key + 'Viewer'] = propertyViewerIndex[key];
-  }
+}
 
-  export default {
+export default {
-    components: {
+  components: {
-      PropertyToolbar,
+    PropertyToolbar,
-      PropertyIcon,
+    PropertyIcon,
-      DialogBase,
+    DialogBase,
-      PropertyForm,
+    PropertyForm,
-      ...viewerIndex,
+    ...viewerIndex,
+  },
+  props: {
+    _id: String,
+    startInEditTab: Boolean,
+    embedded: Boolean, // This dialog is embedded in a page
+    selection: Boolean, // This dialog is being used to select a node
+  },
+  reactiveProvide: {
+    name: 'context',
+    include: ['editPermission', 'copyPermission', 'isLibraryForm'],
+  },
+  data(){return {
+    editing: !!this.startInEditTab,
+    // 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,
+    isLibraryForm: true,
+  }},
+  watch: {
+    _id: {
+      immediate: true,
+      handler(newId){
+        this.$nextTick(() => {
+          this.currentId = newId;
+        });
+      }
     },
-    props: {
+  },
-      _id: String,
+  meteor: {
-      startInEditTab: Boolean,
+    $subscribe: {
-      embedded: Boolean, // This dialog is embedded in a page
+      'libraryNode'(){
-      selection: Boolean, // This dialog is being used to select a node
+        return [this._id];
+      }
     },
-    reactiveProvide: {
+    model(){
-      name: 'context',
+      return LibraryNodes.findOne(this.currentId);
-      include: ['editPermission', 'copyPermission', 'isLibraryForm'],
     },
-    data(){return {
+    editPermission(){
-      editing: !!this.startInEditTab,
+      try {
-      // CurrentId lags behind Id by one tick so that events fired by destroying
+        assertDocEditPermission(this.model, Meteor.userId());
-      // forms keyed to the old ID are applied before the new ID overwrites it
+        return true;
-      currentId: undefined,
+      } catch (e) {
-      isLibraryForm: true,
+        return false;
-    }},
+      }
-    watch: {
-      _id: {
-        immediate: true,
-        handler(newId){
-          this.$nextTick(() => {
-            this.currentId = newId;
-          });
-        }
-      },
     },
-    meteor: {
+    copyPermission(){
-      $subscribe: {
+      try {
-        'libraryNode'(){
+        assertDocCopyPermission(this.model, Meteor.userId());
-          return [this._id];
+        return true;
-        }
+      } catch (e) {
-      },
+        return false;
-      model(){
+      }
-        return LibraryNodes.findOne(this.currentId);
-      },
-      editPermission(){
-        try {
-          assertDocEditPermission(this.model, Meteor.userId());
-          return true;
-        } catch (e) {
-          return false;
-        }
-      },
-      copyPermission(){
-        try {
-          assertDocCopyPermission(this.model, Meteor.userId());
-          return true;
-        } catch (e) {
-          return false;
-        }
-      },
     },
-    methods: {
+  },
-      getPropertyName,
+  methods: {
-      duplicate(){
+    getPropertyName,
-        duplicateLibraryNode.call({
+    duplicate(){
-          _id: this.currentId
+      duplicateLibraryNode.call({
-        }, (error, duplicateId) => {
+        _id: this.currentId
-          if (error) console.error(error);
+      }, (error, duplicateId) => {
-          if (this.embedded){
+        if (error) console.error(error);
-            this.$emit('duplicated', duplicateId);
-          } else {
-            this.$store.dispatch('popDialogStack');
-          }
-        });
-      },
-      move(){
-        let that = this;
-        this.$store.commit('pushDialogStack', {
-          component: 'move-library-node-dialog',
-          elementId: 'property-toolbar-menu-button',
-          callback(parentId){
-            if (!parentId) return;
-            organizeDoc.call({
-              docRef: {
-                collection: 'libraryNodes',
-                id: that._id,
-              },
-              parentRef: {
-                collection: 'libraryNodes',
-                id: parentId
-              },
-              order: -0.5
-            }, (error) => {
-              if (error) console.error(error);
-            });
-          }
-        });
-      },
-      copy(){
-        const thisId = this._id;
-        this.$store.commit('pushDialogStack', {
-          component: 'move-library-node-dialog',
-          elementId: 'property-toolbar-menu-button',
-          data: {
-            action: 'Copy',
-          },
-          callback(parentId){
-            if (!parentId) return;
-            copyLibraryNodeTo.call({
-              _id: thisId,
-              parent: {
-                collection: 'libraryNodes',
-                id: parentId
-              },
-            }, (error) => {
-              if (error) {
-                console.error(error);
-                snackbar({
-                  text: error.reason || error.message || error.toString(),
-                });
-              } else {
-                snackbar({
-                  text: 'Copied successfully',
-                });
-              }
-            });
-          }
-        });
-      },
-      change({path, value, ack}){
-        updateLibraryNode.call({_id: this.currentId, path, value}, (error) =>{
-          if (ack){
-            ack(error && error.reason || error);
-          } else if (error){
-            console.error(error);
-          }
-        });
-      },
-      push({path, value, ack}){
-        pushToLibraryNode.call({_id: this.currentId, path, value}, (error) =>{
-          if (ack){
-            ack(error && error.reason || error);
-          } else if (error){
-            console.error(error);
-          }
-        });
-      },
-      pull({path, ack}){
-        let itemId = get(this.model, path)._id;
-        path.pop();
-        pullFromLibraryNode.call({_id: this.currentId, path, itemId}, (error) =>{
-          if (ack){
-            ack(error && error.reason || error);
-          } else if (error){
-            console.error(error);
-          }
-        });
-      },
-      addLibraryNode() {
-        // Check tier has paid benefits
-        let tier = getUserTier(Meteor.userId());
-        if (!(tier && tier.paidBenefits)){
-          this.$store.commit('pushDialogStack', {
-            component: 'tier-too-low-dialog',
-            elementId: 'insert-library-node-button',
-          });
-          return;
-        }
-        let parentPropertyId = this.model._id;
-        this.$store.commit('pushDialogStack', {
-          component: 'add-creature-property-dialog',
-          elementId: 'insert-creature-property-btn',
-          data: {
-            parentDoc: this.model,
-            creatureId: this.creatureId,
-            hideLibraryTab: true,
-          },
-          callback(result){
-            if (!result) return;
-            let parentRef = {
-              id: parentPropertyId,
-              collection: 'libraryNodes',
-            };
-            let order = getHighestOrder({
-              collection: LibraryNodes,
-              ancestorId: parentRef.id,
-            }) + 0.5;
-            let creatureProperty = result;
-            // Get order and parent
-            creatureProperty.order = order;
-            // Insert the property
-            let id = insertNode.call({creatureProperty, parentRef});
-            return `tree-node-${id}`;
-          }
-        });
-      },
-      remove(){
-        let _id = this.currentId;
-        softRemoveLibraryNode.call({_id});
         if (this.embedded){
-          this.$emit('removed');
+          this.$emit('duplicated', duplicateId);
         } else {
           this.$store.dispatch('popDialogStack');
         }
-        snackbar({
+      });
-          text: `Deleted ${getPropertyTitle(this.model)}`,
+    },
-          callbackName: 'undo',
+    selectSubProperty(_id) {
-          callback(){
+      if (this.embedded) {
-            restoreLibraryNode.call({_id});
+        this.$emit('select-sub-property', _id);
-          },
+        return;
+      }
+      this.$store.commit('pushDialogStack', {
+        component: 'library-node-dialog',
+        elementId: `tree-node-${_id}`,
+        data: {
+          _id,
+          startInEditTab: this.editing,
+        },
+      });
+    },
+    move(){
+      let that = this;
+      this.$store.commit('pushDialogStack', {
+        component: 'move-library-node-dialog',
+        elementId: 'property-toolbar-menu-button',
+        callback(parentId){
+          if (!parentId) return;
+          organizeDoc.call({
+            docRef: {
+              collection: 'libraryNodes',
+              id: that._id,
+            },
+            parentRef: {
+              collection: 'libraryNodes',
+              id: parentId
+            },
+            order: -0.5
+          }, (error) => {
+            if (error) console.error(error);
+          });
+        }
+      });
+    },
+    copy(){
+      const thisId = this._id;
+      this.$store.commit('pushDialogStack', {
+        component: 'move-library-node-dialog',
+        elementId: 'property-toolbar-menu-button',
+        data: {
+          action: 'Copy',
+        },
+        callback(parentId){
+          if (!parentId) return;
+          copyLibraryNodeTo.call({
+            _id: thisId,
+            parent: {
+              collection: 'libraryNodes',
+              id: parentId
+            },
+          }, (error) => {
+            if (error) {
+              console.error(error);
+              snackbar({
+                text: error.reason || error.message || error.toString(),
+              });
+            } else {
+              snackbar({
+                text: 'Copied successfully',
+              });
+            }
+          });
+        }
+      });
+    },
+    change({path, value, ack}){
+      updateLibraryNode.call({_id: this.currentId, path, value}, (error) =>{
+        if (ack){
+          ack(error && error.reason || error);
+        } else if (error){
+          console.error(error);
+        }
+      });
+    },
+    push({path, value, ack}){
+      pushToLibraryNode.call({_id: this.currentId, path, value}, (error) =>{
+        if (ack){
+          ack(error && error.reason || error);
+        } else if (error){
+          console.error(error);
+        }
+      });
+    },
+    pull({path, ack}){
+      let itemId = get(this.model, path)._id;
+      path.pop();
+      pullFromLibraryNode.call({_id: this.currentId, path, itemId}, (error) =>{
+        if (ack){
+          ack(error && error.reason || error);
+        } else if (error){
+          console.error(error);
+        }
+      });
+    },
+    addLibraryNode({elementId, suggestedType}) {
+      // Check tier has paid benefits
+      let tier = getUserTier(Meteor.userId());
+      if (!(tier && tier.paidBenefits)){
+        this.$store.commit('pushDialogStack', {
+          component: 'tier-too-low-dialog',
+          elementId,
         });
-      },
+        return;
-    }
+      }
-  };
+      let parentPropertyId = this.model._id;
+      this.$store.commit('pushDialogStack', {
+        component: 'add-creature-property-dialog',
+        elementId,
+        data: {
+          parentDoc: this.model,
+          creatureId: this.creatureId,
+          hideLibraryTab: true,
+          suggestedType,
+        },
+        callback(result){
+          if (!result) return;
+          let parentRef = {
+            id: parentPropertyId,
+            collection: 'libraryNodes',
+          };
+          let order = getHighestOrder({
+            collection: LibraryNodes,
+            ancestorId: parentRef.id,
+          }) + 0.5;
+          let libraryNode = result;
+          // Get order and parent
+          libraryNode.order = order;
+          // Insert the property
+          let id = insertNode.call({libraryNode, parentRef});
+          return `tree-node-${id}`;
+        }
+      });
+    },
+    remove(){
+      let _id = this.currentId;
+      softRemoveLibraryNode.call({_id});
+      if (this.embedded){
+        this.$emit('removed');
+      } else {
+        this.$store.dispatch('popDialogStack');
+      }
+      snackbar({
+        text: `Deleted ${getPropertyTitle(this.model)}`,
+        callbackName: 'undo',
+        callback(){
+          restoreLibraryNode.call({_id});
+        },
+      });
+    },
+  }
+};
 </script>
 
 <style lang="css" scoped>

app/imports/client/ui/properties/PropertyForm.vue

@@ -139,17 +139,17 @@
           <creature-properties-tree
             style="width: 100%;"
             organize
-            :root="{collection: 'creatureProperties', id: model._id}"
+            :root="{collection, id: model._id}"
-            @selected="selectSubProperty"
+            :collection="collection"
+            @selected="e => $emit('select-sub-property', e)"
           />
           <v-btn
             v-for="suggestion in suggestedChildren"
             :key="suggestion.type"
-            text
             tile
-            color="accent"
+            plain
-            data-id="insert-creature-property-btn"
+            :data-id="`insert-${suggestion.type}-property-btn`"
-            @click="$event=>$emit('add-child')"
+            @click="$event => $emit('add-child', {suggestedType: suggestion.type, elementId: `insert-${suggestion.type}-property-btn`})"
           >
             <v-icon left>
               mdi-plus
@@ -157,11 +157,10 @@
             {{ suggestion.details.name }}
           </v-btn>
           <v-btn
-            text
             tile
-            color="accent"
+            plain
-            data-id="insert-creature-property-btn"
+            data-id="insert-any-property-btn"
-            @click="$event=>$emit('add-child')"
+            @click="$event => $emit('add-child', {elementId: 'insert-any-property-btn'})"
           >
             <v-icon
               v-if="!suggestedChildren.length"
@@ -216,6 +215,10 @@ export default {
       type: [Object, Array],
       default: () => ({}),
     },
+    collection: {
+      type: String,
+      default: 'creatureProperties'
+    },
     embedded: Boolean, // This dialog is embedded in a page
   },
   data() {