The editor should be able to configure custom menus, much like x-view-url.
Setting x-menu on a collection should add a set of buttons above the upper-right of the items list table (where the "Add Item" button is now). x-menu should be an array with items matching the following:
{ title: 'Text', url: '...' } - Create a button that goes to the given URL
{ title: 'Text', script: '...' } - Create a button that executes the given JS. The JS context (this) will have an items property corresponding to the items currently shown in the table.
{ title: 'Text', items: [ ... ] } - Create a button with a dropdown menu that can contain the above items. Dropdown menus cannot contain other dropdown menus.
Setting x-menu-item on a collection will add a drop-down menu to each item row. In this case, the script will be given a context of the item itself (so this.id would be the ID of the row whose menu was clicked). Editing the context object edits the item in the table. The context also has delete() and save() methods. The delete() method will prompt the user for confirmation. The save() method takes an optional single argument, an object of fields to update before saving. Item menus cannot contain dropdown menus.
In the future we can add good documentation for the Vue components and other objects and refactor them so that the script enhancements are easier to write. If we ever add a checkbox to the item rows, we can give the selected items to the script as this.selectedItems.
We should document a few ways to make useful enhancements to the editor, including how to add a custom JS file to the editor (which should be as easy as possible) and call a function inside. There should be useful one-liners as well.
Discussion questions:
Should we turn x-item-menu into a series of buttons in the item row, like x-menu?
Should we allow x-menu on item properties, adding a gear icon to the right of the value in the column
The use-case here is a "status" column that has a drop-down menu for quickly changing between different statuses
The editor should be able to configure custom menus, much like
x-view-url.Setting
x-menuon a collection should add a set of buttons above the upper-right of the items list table (where the "Add Item" button is now).x-menushould be an array with items matching the following:{ title: 'Text', url: '...' }- Create a button that goes to the given URL{ title: 'Text', script: '...' }- Create a button that executes the given JS. The JS context (this) will have anitemsproperty corresponding to the items currently shown in the table.{ title: 'Text', items: [ ... ] }- Create a button with a dropdown menu that can contain the above items. Dropdown menus cannot contain other dropdown menus.Setting
x-menu-itemon a collection will add a drop-down menu to each item row. In this case, thescriptwill be given a context of the item itself (sothis.idwould be the ID of the row whose menu was clicked). Editing the context object edits the item in the table. The context also hasdelete()andsave()methods. Thedelete()method will prompt the user for confirmation. Thesave()method takes an optional single argument, an object of fields to update before saving. Item menus cannot contain dropdown menus.In the future we can add good documentation for the Vue components and other objects and refactor them so that the script enhancements are easier to write. If we ever add a checkbox to the item rows, we can give the selected items to the script as
this.selectedItems.We should document a few ways to make useful enhancements to the editor, including how to add a custom JS file to the editor (which should be as easy as possible) and call a function inside. There should be useful one-liners as well.
Discussion questions:
x-item-menuinto a series of buttons in the item row, likex-menu?x-menuon item properties, adding a gear icon to the right of the value in the column