feat: add sub-menus to all Menu extensions/plugins (#1103)

- latest Slickgrid-Universal version brings sub-menus to all these extensions: CellMenu, Context, HeaderMenu & GridMenu
ghiscoding · Nov 2, 2023 · e55fa67 · e55fa67
1 parent 91d6fc1
commit e55fa67
Show file tree

Hide file tree

Showing 20 changed files with 753 additions and 173 deletions.
diff --git a/package.json b/package.json
@@ -58,12 +58,12 @@
     "new-release": "npm run release, note that yarn is not supported with release-it and will throw an error"
   },
   "dependencies": {
-    "@slickgrid-universal/common": "~3.3.2",
-    "@slickgrid-universal/custom-footer-component": "~3.3.2",
-    "@slickgrid-universal/empty-warning-component": "~3.3.2",
-    "@slickgrid-universal/event-pub-sub": "~3.3.2",
-    "@slickgrid-universal/pagination-component": "~3.3.2",
-    "@slickgrid-universal/row-detail-view-plugin": "~3.3.2",
+    "@slickgrid-universal/common": "~3.4.0",
+    "@slickgrid-universal/custom-footer-component": "~3.4.0",
+    "@slickgrid-universal/empty-warning-component": "~3.4.0",
+    "@slickgrid-universal/event-pub-sub": "~3.4.0",
+    "@slickgrid-universal/pagination-component": "~3.4.0",
+    "@slickgrid-universal/row-detail-view-plugin": "~3.4.0",
     "aurelia-event-aggregator": "^1.0.3",
     "aurelia-framework": "^1.4.1",
     "aurelia-i18n": "^4.0.4",
@@ -77,13 +77,13 @@
     "@fnando/sparkline": "^0.3.10",
     "@popperjs/core": "^2.11.8",
     "@release-it/conventional-changelog": "^7.0.2",
-    "@slickgrid-universal/composite-editor-component": "~3.3.2",
-    "@slickgrid-universal/custom-tooltip-plugin": "~3.3.2",
-    "@slickgrid-universal/excel-export": "~3.3.2",
-    "@slickgrid-universal/graphql": "~3.3.2",
-    "@slickgrid-universal/odata": "~3.3.2",
-    "@slickgrid-universal/rxjs-observable": "~3.3.2",
-    "@slickgrid-universal/text-export": "~3.3.2",
+    "@slickgrid-universal/composite-editor-component": "~3.4.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "~3.4.0",
+    "@slickgrid-universal/excel-export": "~3.4.0",
+    "@slickgrid-universal/graphql": "~3.4.0",
+    "@slickgrid-universal/odata": "~3.4.0",
+    "@slickgrid-universal/rxjs-observable": "~3.4.0",
+    "@slickgrid-universal/text-export": "~3.4.0",
     "@types/bluebird": "^3.5.41",
     "@types/dompurify": "^3.0.4",
     "@types/fnando__sparkline": "^0.3.6",

diff --git a/src/examples/slickgrid/example24.ts b/src/examples/slickgrid/example24.ts
@@ -216,7 +216,37 @@ export class Example24 {
               iconCssClass: 'fa fa-question-circle',
               positionOrder: 66,
             },
-            { command: 'something', titleKey: 'DISABLED_COMMAND', disabled: true, positionOrder: 67, }
+            { command: 'something', titleKey: 'DISABLED_COMMAND', disabled: true, positionOrder: 67, },
+            { 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' },
+                  ]
+                }
+              ]
+            }
           ],
           optionTitleKey: 'CHANGE_COMPLETED_FLAG',
           optionItems: [
@@ -296,6 +326,16 @@ export class Example24 {
     const dataContext = args.dataContext;
 
     switch (command) {
+      case 'contact-email':
+      case 'contact-chat':
+      case 'contact-meeting':
+        alert('Command: ' + args?.command);
+        break;
+      case 'exports-csv':
+      case 'exports-txt':
+      case 'exports-xlsx':
+        alert(`Exporting as ${args.item.title}`);
+        break;
       case 'command1':
         alert('Command 1');
         break;
@@ -366,6 +406,36 @@ export class Example24 {
           }
         },
         { command: 'something', titleKey: 'DISABLED_COMMAND', disabled: true, positionOrder: 65 },
+        { 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' },
+              ]
+            }
+          ]
+        }
       ],
 
       // Options allows you to edit a column from an option chose a list
@@ -401,6 +471,14 @@ export class Example24 {
             return (!dataContext.completed);
           }
         },
+        {
+          // we can also have multiple nested sub-menus
+          option: null, title: 'Sub-Options (demo)', subMenuTitleKey: 'CHANGE_PRIORITY', optionItems: [
+            { option: 1, iconCssClass: 'fa fa-star-o yellow', titleKey: 'LOW' },
+            { option: 2, iconCssClass: 'fa fa-star-half-o orange', titleKey: 'MEDIUM' },
+            { option: 3, iconCssClass: 'fa fa-star red', titleKey: 'HIGH' },
+          ]
+        }
       ],
       // subscribe to Context Menu
       onBeforeMenuShow: ((_e, args) => {

diff --git a/src/examples/slickgrid/example8.ts b/src/examples/slickgrid/example8.ts
@@ -69,7 +69,7 @@ export class Example8 {
     this.columnDefinitions.forEach((columnDef) => {
       columnDef.header = {
         menu: {
-          items: [
+          commandItems: [
             // add Custom Header Menu Item Commands which will be appended to the existing internal custom items
             // you cannot override an internal command but you can hide them and create your own
             // also note that the internal custom commands are in the positionOrder range of 50-60,
@@ -106,6 +106,38 @@ export class Example8 {
             // you can use "divider" as a string too, but if you do then make sure it's the correct position in the list
             // (since there's no positionOrder when using 'divider')
             // 'divider',
+            {
+              // we can also have multiple nested sub-menus
+              command: 'custom-actions', title: 'Hello', positionOrder: 99,
+              commandItems: [
+                { command: 'hello-world', title: 'Hello World' },
+                { command: 'hello-slickgrid', title: 'Hello SlickGrid' },
+                {
+                  command: 'sub-menu', title: `Let's play`, cssClass: 'green', subMenuTitle: 'choose your game', subMenuTitleCssClass: 'text-italic salmon',
+                  commandItems: [
+                    { command: 'sport-badminton', title: 'Badminton' },
+                    { command: 'sport-tennis', title: 'Tennis' },
+                    { command: 'sport-racquetball', title: 'Racquetball' },
+                    { command: 'sport-squash', title: 'Squash' },
+                  ]
+                }
+              ]
+            },
+            {
+              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' },
+                  ]
+                }
+              ]
+            }
           ]
         }
       };
@@ -123,12 +155,21 @@ export class Example8 {
       headerMenu: {
         hideSortCommands: false,
         hideColumnHideCommand: false,
+        subItemChevronClass: 'fa fa-chevron-right',
         // you can use the "onCommand" (in Grid Options) and/or the "action" callback (in Column Definition)
         onCommand: (_e, args) => {
-          if (args.command === 'help') {
+          // e.preventDefault(); // preventing default event would keep the menu open after the execution
+          const command = args.item?.command;
+          if (command.includes('hello-')) {
+            alert(args?.item.title);
+          } else if (command.includes('sport-')) {
+            alert('Just do it, play ' + args?.item?.title);
+          } else if (command.includes('contact-')) {
+            alert('Command: ' + args?.item?.command);
+          } else if (args.command === 'help') {
             alert('Please help!!!');
           }
-        }
+        },
       },
       enableTranslate: true,
       i18n: this.i18n

diff --git a/src/examples/slickgrid/example9.ts b/src/examples/slickgrid/example9.ts
@@ -112,6 +112,7 @@ export class Example9 {
         hideToggleFilterCommand: false, // show/hide internal custom commands
         menuWidth: 17,
         resizeOnShowHeaderRow: true,
+        subItemChevronClass: 'fa fa-chevron-right',
         commandItems: [
           // add Custom Items Commands which will be appended to the existing internal custom items
           // you cannot override an internal items but you can hide them and create your own
@@ -166,12 +167,48 @@ export class Example9 {
             disabled: true,
             command: 'disabled-command',
             positionOrder: 98
+          },
+          { 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' },
+                ]
+              }
+            ]
           }
         ],
         // you can use the "action" callback and/or use "onCallback" callback from the grid options, they both have the same arguments
-        onCommand: (_e, args) => {
-          if (args.command === 'help') {
+        onCommand: (_e: Event, args: any) => {
+          // e.preventDefault(); // preventing default event would keep the menu open after the execution
+          const command = args.item?.command;
+          if (command.includes('exports-')) {
+            alert('Exporting as ' + args?.item.title);
+          } else if (command.includes('contact-') || command === 'help') {
             alert('Command: ' + args.command);
+          } else {
+            console.log('onGridMenuCommand', args.command);
           }
         },
         onColumnsChanged: (_e, args) => {

diff --git a/test/cypress/e2e/example01.cy.ts b/test/cypress/e2e/example01.cy.ts
@@ -44,7 +44,7 @@ describe('Example 1 - Basic Grids', { retries: 1 }, () => {
       .invoke('show')
       .click();
 
-    cy.get('.slick-header-menu')
+    cy.get('.slick-header-menu .slick-menu-command-list')
       .should('be.visible')
       .children('.slick-menu-item:nth-of-type(4)')
       .children('.slick-menu-content')
@@ -69,7 +69,7 @@ describe('Example 1 - Basic Grids', { retries: 1 }, () => {
       .invoke('show')
       .click();
 
-    cy.get('.slick-header-menu')
+    cy.get('.slick-header-menu .slick-menu-command-list')
       .should('be.visible')
       .children('.slick-menu-item:nth-of-type(3)')
       .children('.slick-menu-content')
@@ -97,7 +97,7 @@ describe('Example 1 - Basic Grids', { retries: 1 }, () => {
       .click();
 
     cy.get('#grid2')
-      .find('.slick-header-menu')
+      .find('.slick-header-menu .slick-menu-command-list')
       .should('be.visible')
       .children('.slick-menu-item:nth-of-type(4)')
       .click();

diff --git a/test/cypress/e2e/example03.cy.ts b/test/cypress/e2e/example03.cy.ts
@@ -168,7 +168,7 @@ describe('Example 3 - Grid with Editors', { retries: 1 }, () => {
       .invoke('show')
       .click();
 
-    cy.get('.slick-header-menu')
+    cy.get('.slick-header-menu .slick-menu-command-list')
       .should('be.visible')
       .children('.slick-menu-item:nth-of-type(6)')
       .children('.slick-menu-content')

diff --git a/test/cypress/e2e/example05.cy.ts b/test/cypress/e2e/example05.cy.ts
@@ -727,7 +727,7 @@ describe('Example 5 - OData Grid', { retries: 1 }, () => {
         .invoke('show')
         .click();
 
-      cy.get('.slick-header-menu')
+      cy.get('.slick-header-menu .slick-menu-command-list')
         .should('be.visible')
         .children('.slick-menu-item:nth-of-type(6)')
         .children('.slick-menu-content')