Progress aligning and improving node/prop forms

2023-04-20 15:37:12 +02:00
parent a58ccc0e0e
commit 9e4bbe0d1b
7 changed files with 329 additions and 261 deletions
--- a/app/imports/api/library/LibraryNodes.js
+++ b/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;
  },
 });
--- a/app/imports/client/ui/creature/creatureProperties/AddCreaturePropertyDialog.vue
+++ b/app/imports/client/ui/creature/creatureProperties/AddCreaturePropertyDialog.vue
@@ -68,8 +68,7 @@
        <v-card-text
          v-if="!$slots['unwrapped-content']"
        >
-          <component
-            :is="type"
+          <property-form
            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: {
--- a/app/imports/client/ui/creature/creatureProperties/CreaturePropertiesTree.vue
+++ b/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,
--- a/app/imports/client/ui/creature/creatureProperties/CreaturePropertyDialog.vue
+++ b/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;
--- a/app/imports/client/ui/library/LibraryAndNode.vue
+++ b/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>
--- a/app/imports/client/ui/library/LibraryNodeDialog.vue
+++ b/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, {
-    updateLibraryNode,
-    pushToLibraryNode,
-    pullFromLibraryNode,
-    softRemoveLibraryNode,
-    restoreLibraryNode,
-    insertNode,
-  } from '/imports/api/library/LibraryNodes.js';
-  import duplicateLibraryNode from '/imports/api/library/methods/duplicateLibraryNode.js';
-  import DialogBase from '/imports/client/ui/dialogStack/DialogBase.vue';
-  import PropertyToolbar from '/imports/client/ui/components/propertyToolbar.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 propertyViewerIndex from '/imports/client/ui/properties/viewers/shared/propertyViewerIndex.js';
-  import { get } from 'lodash';
-  import {
-    assertDocEditPermission, assertDocCopyPermission
-  } from '/imports/api/sharing/sharingPermissions.js';
-  import { organizeDoc } from '/imports/api/parenting/organizeMethods.js';
-  import { snackbar } from '/imports/client/ui/components/snackbars/SnackbarQueue.js';
-  import getPropertyTitle from '/imports/client/ui/properties/shared/getPropertyTitle.js';
-  import copyLibraryNodeTo from '/imports/api/library/methods/copyLibraryNodeTo.js';
-  import { getHighestOrder } from '/imports/api/parenting/order.js';
-  import { getUserTier } from '/imports/api/users/patreon/tiers.js';
-  import PropertyForm from '/imports/client/ui/properties/PropertyForm.vue';
-  let viewerIndex = {};
-  for (let key in propertyViewerIndex){
-    viewerIndex[key + 'Viewer'] = propertyViewerIndex[key];
-  }
+import LibraryNodes, {
+  updateLibraryNode,
+  pushToLibraryNode,
+  pullFromLibraryNode,
+  softRemoveLibraryNode,
+  restoreLibraryNode,
+  insertNode,
+} from '/imports/api/library/LibraryNodes.js';
+import duplicateLibraryNode from '/imports/api/library/methods/duplicateLibraryNode.js';
+import DialogBase from '/imports/client/ui/dialogStack/DialogBase.vue';
+import PropertyToolbar from '/imports/client/ui/components/propertyToolbar.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 propertyViewerIndex from '/imports/client/ui/properties/viewers/shared/propertyViewerIndex.js';
+import { get } from 'lodash';
+import {
+  assertDocEditPermission, assertDocCopyPermission
+} from '/imports/api/sharing/sharingPermissions.js';
+import { organizeDoc } from '/imports/api/parenting/organizeMethods.js';
+import { snackbar } from '/imports/client/ui/components/snackbars/SnackbarQueue.js';
+import getPropertyTitle from '/imports/client/ui/properties/shared/getPropertyTitle.js';
+import copyLibraryNodeTo from '/imports/api/library/methods/copyLibraryNodeTo.js';
+import { getHighestOrder } from '/imports/api/parenting/order.js';
+import { getUserTier } from '/imports/api/users/patreon/tiers.js';
+import PropertyForm from '/imports/client/ui/properties/PropertyForm.vue';
+let viewerIndex = {};
+for (let key in propertyViewerIndex){
+  viewerIndex[key + 'Viewer'] = propertyViewerIndex[key];
+}

-  export default {
-    components: {
-      PropertyToolbar,
-      PropertyIcon,
-      DialogBase,
-      PropertyForm,
-      ...viewerIndex,
+export default {
+  components: {
+    PropertyToolbar,
+    PropertyIcon,
+    DialogBase,
+    PropertyForm,
+    ...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,
-      startInEditTab: Boolean,
-      embedded: Boolean, // This dialog is embedded in a page
-      selection: Boolean, // This dialog is being used to select a node
+  },
+  meteor: {
+    $subscribe: {
+      'libraryNode'(){
+        return [this._id];
+      }
    },
-    reactiveProvide: {
-      name: 'context',
-      include: ['editPermission', 'copyPermission', 'isLibraryForm'],
+    model(){
+      return LibraryNodes.findOne(this.currentId);
    },
-    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;
-          });
-        }
-      },
+    editPermission(){
+      try {
+        assertDocEditPermission(this.model, Meteor.userId());
+        return true;
+      } catch (e) {
+        return false;
+      }
    },
-    meteor: {
-      $subscribe: {
-        'libraryNode'(){
-          return [this._id];
-        }
-      },
-      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;
-        }
-      },
+    copyPermission(){
+      try {
+        assertDocCopyPermission(this.model, Meteor.userId());
+        return true;
+      } catch (e) {
+        return false;
+      }
    },
-    methods: {
-      getPropertyName,
-      duplicate(){
-        duplicateLibraryNode.call({
-          _id: this.currentId
-        }, (error, duplicateId) => {
-          if (error) console.error(error);
-          if (this.embedded){
-            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});
+  },
+  methods: {
+    getPropertyName,
+    duplicate(){
+      duplicateLibraryNode.call({
+        _id: this.currentId
+      }, (error, duplicateId) => {
+        if (error) console.error(error);
        if (this.embedded){
-          this.$emit('removed');
+          this.$emit('duplicated', duplicateId);
        } else {
          this.$store.dispatch('popDialogStack');
        }
-        snackbar({
-          text: `Deleted ${getPropertyTitle(this.model)}`,
-          callbackName: 'undo',
-          callback(){
-            restoreLibraryNode.call({_id});
-          },
+      });
+    },
+    selectSubProperty(_id) {
+      if (this.embedded) {
+        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>
--- a/app/imports/client/ui/properties/PropertyForm.vue
+++ b/app/imports/client/ui/properties/PropertyForm.vue
@@ -139,17 +139,17 @@
          <creature-properties-tree
            style="width: 100%;"
            organize
-            :root="{collection: 'creatureProperties', id: model._id}"
-            @selected="selectSubProperty"
+            :root="{collection, id: model._id}"
+            :collection="collection"
+            @selected="e => $emit('select-sub-property', e)"
          />
          <v-btn
            v-for="suggestion in suggestedChildren"
            :key="suggestion.type"
-            text
            tile
-            color="accent"
-            data-id="insert-creature-property-btn"
-            @click="$event=>$emit('add-child')"
+            plain
+            :data-id="`insert-${suggestion.type}-property-btn`"
+            @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"
-            data-id="insert-creature-property-btn"
-            @click="$event=>$emit('add-child')"
+            plain
+            data-id="insert-any-property-btn"
+            @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() {