Skip to content

Commit

Permalink
feat: add sub-menu(s) to GridMenu plugin (#1151)
Browse files Browse the repository at this point in the history 
* feat: add sub-menu(s) to GridMenu plugin
  • Loading branch information
@ghiscoding
ghiscoding authored Oct 26, 2023
1 parent 5014354 commit 5178310
Show file tree
Hide file tree
Showing 19 changed files with 837 additions and 368 deletions.
47 changes: 41 additions & 6 deletions examples/vite-demo-vanilla-bundle/src/examples/example01.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,11 +74,39 @@ export default class Example1 {
onColumnsChanged: (_e, args) => console.log('onColumnPickerColumnsChanged - visible columns count', args.visibleColumns.length),
},
gridMenu: {
// commandItems: [
// { command: 'help', title: 'Help', positionOrder: 70, action: (e, args) => console.log(args) },
// { command: '', divider: true, positionOrder: 72 },
// { command: 'hello', title: 'Hello', positionOrder: 69, action: (e, args) => alert('Hello World'), cssClass: 'red', tooltip: 'Hello World', iconCssClass: 'mdi mdi-close' },
// ],
subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270',
commandItems: [
{ command: '', divider: true, positionOrder: 98 },
{
// we can also have multiple nested sub-menus
command: 'export', title: 'Exports', positionOrder: 99,
commandItems: [
{ command: 'exports-txt', title: 'Text (tab delimited)' },
{
command: 'sub-menu', title: 'Excel', cssClass: 'green', subMenuTitle: 'available formats', subMenuTitleCssClass: 'text-italic orange',
commandItems: [
{ command: 'exports-csv', title: 'Excel (csv)' },
{ command: 'exports-xlsx', title: 'Excel (xlsx)' },
]
}
]
},
{
command: 'feedback', title: 'Feedback', positionOrder: 100,
commandItems: [
{ command: 'request-update', title: 'Request update from supplier', iconCssClass: 'mdi mdi-star', tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update' },
'divider',
{
command: 'sub-menu', title: 'Contact Us', iconCssClass: 'mdi mdi-account', subMenuTitle: 'contact us...', subMenuTitleCssClass: 'italic',
commandItems: [
{ command: 'contact-email', title: 'Email us', iconCssClass: 'mdi mdi-pencil-outline' },
{ command: 'contact-chat', title: 'Chat with us', iconCssClass: 'mdi mdi-message-text-outline' },
{ command: 'contact-meeting', title: 'Book an appointment', iconCssClass: 'mdi mdi-coffee' },
]
}
]
}
],
// menuUsabilityOverride: () => false,
onBeforeMenuShow: () => {
console.log('onGridMenuBeforeMenuShow');
Expand All @@ -88,7 +116,14 @@ export default class Example1 {
onColumnsChanged: (_e, args) => console.log('onGridMenuColumnsChanged', args),
onCommand: (_e, args) => {
// e.preventDefault(); // preventing default event would keep the menu open after the execution
console.log('onGridMenuCommand', args.command);
const command = args.item?.command;
if (command.includes('exports-')) {
alert('Exporting as ' + args?.item.title);
} else if (command.includes('contact-')) {
alert('Command: ' + args?.command);
} else {
console.log('onGridMenuCommand', args.command);
}
},
onMenuClose: (_e, args) => console.log('onGridMenuMenuClose - visible columns count', args.visibleColumns.length),
},
Expand Down
14 changes: 7 additions & 7 deletions examples/vite-demo-vanilla-bundle/src/examples/example04.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -434,20 +434,20 @@ export default class Example4 {
// we can also have multiple nested sub-menus
command: 'export', title: 'Exports', positionOrder: 99,
commandItems: [
{ command: 'export-txt', title: 'Text (tab delimited)' },
{ command: 'exports-txt', title: 'Text (tab delimited)' },
{
command: 'sub-menu', title: 'Excel', cssClass: 'green', subMenuTitle: 'available formats', subMenuTitleCssClass: 'text-italic orange',
commandItems: [
{ command: 'export-csv', title: 'Excel (csv)' },
{ command: 'export-xlsx', title: 'Excel (xlsx)' },
{ command: 'exports-csv', title: 'Excel (csv)' },
{ command: 'exports-xlsx', title: 'Excel (xlsx)' },
]
}
]
},
{
command: 'feedback', title: 'Feedback', positionOrder: 100,
commandItems: [
{ command: 'request-update', title: 'Request update from shipping team', iconCssClass: 'mdi mdi-star', tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update' },
{ command: 'request-update', title: 'Request update from supplier', iconCssClass: 'mdi mdi-star', tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update' },
'divider',
{
command: 'sub-menu', title: 'Contact Us', iconCssClass: 'mdi mdi-account', subMenuTitle: 'contact us...', subMenuTitleCssClass: 'italic',
Expand Down Expand Up @@ -556,9 +556,9 @@ export default class Example4 {
case 'command2':
alert(args.item.title);
break;
case 'export-csv':
case 'export-txt':
case 'export-xlsx':
case 'exports-csv':
case 'exports-txt':
case 'exports-xlsx':
alert(`Exporting as ${args.item.title}`);
break;
case 'help':
Expand Down
16 changes: 16 additions & 0 deletions examples/vite-demo-vanilla-bundle/src/examples/example06.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,22 @@ export default class Example6 {
(document.querySelector('input.search') as HTMLInputElement).value = '';
}

executeCommand(_e, args) {
// const columnDef = args.column;
const command = args.command;

switch (command) {
case 'exports-csv':
case 'exports-txt':
case 'exports-xlsx':
alert(`Exporting as ${args.item.title}`);
break;
default:
alert('Command: ' + args.command);
break;
}
}

searchFile(event: KeyboardEvent) {
this.searchString = (event.target as HTMLInputElement)?.value || '';
this.updateFilter();
Expand Down
39 changes: 22 additions & 17 deletions examples/vite-demo-vanilla-bundle/src/examples/example07.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,20 +100,20 @@ export default class Example7 {
// we can also have multiple nested sub-menus
command: 'export', title: 'Exports', positionOrder: 99,
commandItems: [
{ command: 'export-txt', title: 'Text (tab delimited)' },
{ command: 'exports-txt', title: 'Text (tab delimited)' },
{
command: 'sub-menu', title: 'Excel', cssClass: 'green', subMenuTitle: 'available formats', subMenuTitleCssClass: 'text-italic orange',
commandItems: [
{ command: 'export-csv', title: 'Excel (csv)' },
{ command: 'export-xlsx', title: 'Excel (xlsx)' },
{ command: 'exports-csv', title: 'Excel (csv)' },
{ command: 'exports-xlsx', title: 'Excel (xlsx)' },
]
}
]
},
{
command: 'feedback', title: 'Feedback', positionOrder: 100,
commandItems: [
{ command: 'request-update', title: 'Request update from shipping team', iconCssClass: 'mdi mdi-star', tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update' },
{ command: 'request-update', title: 'Request update from supplier', iconCssClass: 'mdi mdi-star', tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update' },
'divider',
{
command: 'sub-menu', title: 'Contact Us', iconCssClass: 'mdi mdi-account', subMenuTitle: 'contact us...', subMenuTitleCssClass: 'italic',
Expand All @@ -127,16 +127,22 @@ export default class Example7 {
}
],
onCommand: (_e, args) => {
switch(args.command) {
// show alert only for export commands
case 'export-cks':
case 'export-txt':
case 'export-xlsx':
alert(`Exporting as ${args.item.title}`);
break;
default:
alert('Command: ' + args.command);
break;
// to keep menu open you can preventDefault & return false
// _e.preventDefault();
// return false;

if (!args.item?.action) {
switch (args.command) {
// show alert only for export commands
case 'exports-csv':
case 'exports-txt':
case 'exports-xlsx':
alert(`Exporting as ${args.item.title}`);
break;
default:
alert('Command: ' + args.command);
break;
}
}
},
optionTitleKey: 'CHANGE_COMPLETED_FLAG',
Expand All @@ -152,7 +158,7 @@ export default class Example7 {
}
],
onOptionSelected: (_e, args) => {
this.changeCompletedOption(args.dataContext, args.item.option);
this.changeCompletedOption(args.dataContext, args.item.option as boolean);
},
}
},
Expand Down Expand Up @@ -437,8 +443,7 @@ export default class Example7 {
}

changeCompletedOption(dataContext: any, newValue: boolean) {
console.log('change', dataContext, newValue);
if (dataContext && dataContext.hasOwnProperty('completed')) {
if (dataContext?.hasOwnProperty('completed')) {
dataContext.completed = newValue;
this.sgb?.gridService.updateItem(dataContext);
}
Expand Down
7 changes: 6 additions & 1 deletion packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -235,6 +235,11 @@ describe('CellMenu Plugin', () => {
let cellMenuElm = document.body.querySelector('.slick-cell-menu.slickgrid12345') as HTMLDivElement;
expect(cellMenuElm).toBeTruthy();

// click inside menu shouldn't close it
cellMenuElm!.dispatchEvent(new Event('mousedown', { bubbles: true }));
expect(cellMenuElm).toBeTruthy();

// click anywhere else should close it
document.body.dispatchEvent(new Event('mousedown', { bubbles: true }));
cellMenuElm = document.body.querySelector('.slick-cell-menu.slickgrid12345') as HTMLDivElement;

Expand Down Expand Up @@ -609,7 +614,7 @@ describe('CellMenu Plugin', () => {
Object.defineProperty(document.documentElement, 'clientWidth', { writable: true, configurable: true, value: 50 });

plugin.dispose();
plugin.init({ commandItems: deepCopy(commandItemsMock) });
plugin.init({ commandItems: deepCopy(commandItemsMock), dropSide: 'left' });
(columnsMock[3].cellMenu!.commandItems![1] as MenuCommandItem).action = actionMock;
plugin.addonOptions.subItemChevronClass = 'mdi mdi-chevron-right';
plugin.addonOptions.autoAdjustDropOffset = '-780';
Expand Down
5 changes: 5 additions & 0 deletions packages/common/src/extensions/__tests__/slickContextMenu.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,11 @@ describe('ContextMenu Plugin', () => {
let contextMenuElm = document.body.querySelector('.slick-context-menu.slickgrid12345') as HTMLDivElement;
expect(contextMenuElm).toBeTruthy();

// click inside menu shouldn't close it
contextMenuElm!.dispatchEvent(new Event('mousedown', { bubbles: true }));
expect(contextMenuElm).toBeTruthy();

// click anywhere else should close it
document.body.dispatchEvent(new Event('mousedown', { bubbles: true }));
contextMenuElm = document.body.querySelector('.slick-context-menu.slickgrid12345') as HTMLDivElement;

Expand Down
Loading

0 comments on commit 5178310

Please sign in to comment.