got multiselect context menu to work

mligtenberg · Feb 2, 2025 · 619a3ba · 619a3ba
1 parent 428a4a3
commit 619a3ba
Show file tree

Hide file tree

Showing 6 changed files with 1,972 additions and 1,295 deletions.
diff --git a/libs/messages/flow/src/lib/messages-page/messages-page.component.html b/libs/messages/flow/src/lib/messages-page/messages-page.component.html
@@ -1,8 +1,7 @@
 <div class="container">
   <p-contextmenu #cm
                  appendTo="body"
-                 [model]="messageContextMenu()"
-                 (onHide)="contextMenuSection.set(undefined)"></p-contextmenu>
+                 [model]="messageContextMenu()"></p-contextmenu>
   <p-card header="Messages" class="messages">
     <p-table
       [columns]="cols"
@@ -12,8 +11,10 @@
       [virtualScroll]="true"
       [virtualScrollItemSize]="30"
       selectionMode="multiple"
+      contextMenuSelectionMode="joint"
       [(selection)]="selection"
-      [(contextMenuSelection)]="contextMenuSection"
+      [metaKeySelection]="true"
+      dataKey="messageId"
       [contextMenu]="cm"
     >
       <ng-template pTemplate="header" let-columns>
@@ -31,7 +32,9 @@
       >
         <tr style="height:30px"
             [pContextMenuRow]="rowData"
-            [pSelectableRow]="rowData">
+            [pSelectableRow]="rowData"
+            [pContextMenuRowIndex]="rowIndex"
+            [pSelectableRowIndex]="rowIndex">
           <td *ngFor="let col of columns">
             {{ rowData[col.field] }}
           </td>

diff --git a/libs/messages/flow/src/lib/messages-page/messages-page.component.ts b/libs/messages/flow/src/lib/messages-page/messages-page.component.ts
@@ -41,9 +41,6 @@ export class MessagesPageComponent {
 
   currentPage = signal<MessagePage | null>(null);
   selection = model<ServiceBusReceivedMessage | ServiceBusReceivedMessage[] | undefined>(undefined);
-  contextMenuSection = model<ServiceBusReceivedMessage | ServiceBusReceivedMessage[] | undefined>(
-    undefined
-  );
   selectedMessage = computed(() => {
     const selection = this.selection();
     if (Array.isArray(selection) && selection.length === 1) {
@@ -153,7 +150,7 @@ export class MessagesPageComponent {
   ];
 
   messageContextMenu = computed<MenuItem[]>(() => {
-    const contextMenuSelection = this.contextMenuSection();
+    const contextMenuSelection = this.selection();
     if (!contextMenuSelection) {
       return [];
     }
@@ -195,7 +192,6 @@ export class MessagesPageComponent {
         switchMap((params) => {
           const pageId: string = params['pageId'];
           this.selection.set(undefined);
-          this.contextMenuSection.set(undefined);
           return this.store.select(MessagesSelectors.selectPage(pageId));
         }),
         takeUntilDestroyed()

diff --git a/libs/messages/flow/src/lib/send-message/send-message.component.ts b/libs/messages/flow/src/lib/send-message/send-message.component.ts
@@ -23,7 +23,6 @@ import { SendEndpoint } from '@service-bus-browser/service-bus-contracts';
 import { Store } from '@ngrx/store';
 import { MessagesActions, MessagesSelectors } from '@service-bus-browser/messages-store';
 import { ActivatedRoute } from '@angular/router';
-import { selectMessage } from '../../../../store/src/lib/messages.selectors';
 
 @Component({
   selector: 'lib-send-message',

diff --git a/libs/topology/components/src/lib/topology-tree/topology-tree.component.ts b/libs/topology/components/src/lib/topology-tree/topology-tree.component.ts
@@ -38,8 +38,8 @@ import { ContextMenu } from 'primeng/contextmenu';
   templateUrl: './topology-tree.component.html',
   styleUrl: './topology-tree.component.scss',
   host: {
-    '(document:keydown)': 'onKeyDown($event)',
-    '(document:keyup)': 'onKeyUp($event)',
+    // '(document:keydown)': 'onKeyDown($event)',
+    // '(document:keyup)': 'onKeyUp($event)',
   },
 })
 export class TopologyTreeComponent {

diff --git a/package.json b/package.json
@@ -7,63 +7,63 @@
   "author": "Martin Ligtenberg",
   "description": "A cross platform tool to view and manage your Azure Service Bus instances",
   "dependencies": {
-    "@angular/animations": "~19.0.5",
-    "@angular/common": "~19.0.5",
-    "@angular/compiler": "~19.0.5",
-    "@angular/core": "~19.0.5",
-    "@angular/forms": "~19.0.5",
-    "@angular/platform-browser": "~19.0.5",
-    "@angular/platform-browser-dynamic": "~19.0.5",
-    "@angular/router": "~19.0.5",
+    "@angular/animations": "~19.0.7",
+    "@angular/common": "~19.0.7",
+    "@angular/compiler": "~19.0.7",
+    "@angular/core": "~19.0.7",
+    "@angular/forms": "~19.0.7",
+    "@angular/platform-browser": "~19.0.7",
+    "@angular/platform-browser-dynamic": "~19.0.7",
+    "@angular/router": "~19.0.7",
     "@azure/service-bus": "^7.9.5",
     "@fortawesome/angular-fontawesome": "^1.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@ngrx/effects": "^19.0.0",
-    "@ngrx/router-store": "^19.0.0",
-    "@ngrx/store": "^19.0.0",
-    "@ngrx/store-devtools": "^19.0.0",
-    "@primeng/themes": "^19.0.2",
+    "@ngrx/effects": "^19.0.1",
+    "@ngrx/router-store": "^19.0.1",
+    "@ngrx/store": "^19.0.1",
+    "@ngrx/store-devtools": "^19.0.1",
+    "@primeng/themes": "^19.0.5",
     "@types/luxon": "^3.4.2",
-    "long": "^5.2.3",
+    "long": "^5.2.4",
     "luxon": "^3.5.0",
     "monaco-editor": "^0.52.2",
     "ngx-monaco-editor-v2": "^19.0.2",
     "primeicons": "^7.0.0",
-    "primeng": "^19.0.2",
+    "primeng": "^19.0.5",
     "rxjs": "~7.8.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~19.0.6",
-    "@angular-devkit/core": "~19.0.6",
-    "@angular-devkit/schematics": "~19.0.6",
-    "@angular/cli": "~19.0.6",
-    "@angular/compiler-cli": "~19.0.5",
-    "@angular/language-service": "~19.0.5",
+    "@angular-devkit/build-angular": "~19.0.7",
+    "@angular-devkit/core": "~19.0.7",
+    "@angular-devkit/schematics": "~19.0.7",
+    "@angular/cli": "~19.0.7",
+    "@angular/compiler-cli": "~19.0.7",
+    "@angular/language-service": "~19.0.7",
     "@electron/notarize": "^2.5.0",
-    "@eslint/js": "^9.17.0",
-    "@ngrx/schematics": "^19.0.0",
+    "@eslint/js": "^9.19.0",
+    "@ngrx/schematics": "^19.0.1",
     "@nx/angular": "20.2.2",
     "@nx/eslint": "20.2.2",
     "@nx/eslint-plugin": "20.2.2",
     "@nx/jest": "20.2.2",
     "@nx/js": "20.2.2",
     "@nx/web": "20.2.2",
     "@nx/workspace": "20.2.2",
-    "@schematics/angular": "~19.0.6",
+    "@schematics/angular": "~19.0.7",
     "@swc-node/register": "~1.9.2",
     "@swc/core": "~1.5.29",
     "@swc/helpers": "~0.5.15",
     "@types/jest": "^29.5.14",
     "@types/node": "18.16.9",
-    "@typescript-eslint/utils": "^8.19.1",
+    "@typescript-eslint/utils": "^8.22.0",
     "angular-eslint": "^19.0.2",
-    "electron": "^33.3.1",
+    "electron": "^33.3.2",
     "electron-builder": "^25.1.8",
     "electron-devtools-installer": "^4.0.0",
-    "eslint": "^9.17.0",
+    "eslint": "^9.19.0",
     "eslint-config-prettier": "^9.1.0",
     "jasmine-marbles": "~0.9.2",
     "jest": "^29.7.0",
@@ -77,7 +77,12 @@
     "ts-node": "10.9.1",
     "tslib": "^2.8.1",
     "typescript": "~5.6.3",
-    "typescript-eslint": "^8.19.1"
+    "typescript-eslint": "^8.22.0"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "electron"
+    ]
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm"