Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add custom menus to the editor #61

Open
preaction opened this issue Apr 30, 2019 · 0 comments
Open

Add custom menus to the editor #61

preaction opened this issue Apr 30, 2019 · 0 comments

Comments

@preaction
Copy link
Owner

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant