Add context menu for column headers for DLT files

esrlabs · Aug 1, 2023 · 34c1a28 · 34c1a28
1 parent 434ebbc
commit 34c1a28
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 8 deletions.
diff --git a/application/client/src/app/ui/views/workspace/headers/component.ts b/application/client/src/app/ui/views/workspace/headers/component.ts
@@ -4,10 +4,12 @@ import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     AfterContentInit,
+    HostListener,
 } from '@angular/core';
 import { Ilc, IlcInterface } from '@env/decorators/component';
 import { Columns, Header } from '@schema/render/columns';
 import { Session } from '@service/session';
+import { IMenuItem, contextmenu } from '@ui/service/contextmenu';
 import { LimittedValue } from '@ui/env/entities/value.limited';
 import { ChangesDetector } from '@ui/env/extentions/changes';
 import { Direction } from '@directives/resizer';
@@ -48,6 +50,8 @@ class RenderedHeader {
 export class ColumnsHeaders extends ChangesDetector implements AfterContentInit {
     public readonly Direction = Direction;
     public offset: number = 0;
+    public _ng_mouseOverHeader: string = '';
+    public _ng_more: string = 'more_horiz';
 
     @Input() public controller!: Columns;
     @Input() public session!: Session;
@@ -58,6 +62,8 @@ export class ColumnsHeaders extends ChangesDetector implements AfterContentInit
         super(cdRef);
     }
 
+    @HostListener('mouse')
+
     public ngAfterContentInit(): void {
         this.env().subscriber.register(
             this.session.stream.subjects.get().rank.subscribe(() => {
@@ -70,6 +76,34 @@ export class ColumnsHeaders extends ChangesDetector implements AfterContentInit
         this.markChangesForCheck();
     }
 
+    public _ng_onMouseOver(header: string): void {
+        this._ng_mouseOverHeader = header;
+        this.detectChanges();
+    }
+
+    public _ng_onMouseOut(): void {
+        this._ng_mouseOverHeader = '';
+        this.detectChanges();
+    }
+
+    public _ng_onClick(event: MouseEvent): void {
+        const items: IMenuItem[] = [
+            {
+                caption: 'Select Colors',
+                handler: () => console.log('Color selected'),
+            },
+            {
+                caption: 'Select Column',
+                handler: () => console.log('Column'),
+            }
+        ]
+        contextmenu.show({
+            items,
+            x: event.pageX,
+            y: event.pageY,
+        });
+    }
+
     public ngGetOffsetStyle(): { [key: string]: string } {
         return {
             width: `${this.session.stream.rank.width()}px`,

diff --git a/application/client/src/app/ui/views/workspace/headers/template.html b/application/client/src/app/ui/views/workspace/headers/template.html
@@ -1,10 +1,21 @@
 <span class="offset" [ngStyle]="ngGetOffsetStyle()"></span>
-<span class="header" 
+<span
+      class="header"
       *ngFor="let header of headers; let i = index"
-      [ngStyle]="header.styles">{{header.caption}}<span *ngIf="header.width !== undefined" class="resizer" appResizer
-      [min]="header.width.min"
-      [max]="header.width.max"
-      [size]="header.width.value"
-      [direction]="Direction.Horizontal"
-      [corrector]="-1"
-      (changesize)="ngResize($event, header, i)"></span></span>
+      (mouseenter)="_ng_onMouseOver(header.caption)"
+      [ngStyle]="header.styles"
+>
+      {{header.caption}}
+      <mat-icon *ngIf="_ng_mouseOverHeader === header.caption" class="more" (click)="_ng_onClick($event)">{{_ng_more}}</mat-icon>
+      <span
+            *ngIf="header.width !== undefined"
+            class="resizer"
+            appResizer
+            [min]="header.width.min"
+            [max]="header.width.max"
+            [size]="header.width.value"
+            [direction]="Direction.Horizontal"
+            [corrector]="-1"
+            (changesize)="ngResize($event, header, i)"
+      ></span>
+</span>
diff --git a/application/client/src/app/ui/views/workspace/module.ts b/application/client/src/app/ui/views/workspace/module.ts
@@ -12,6 +12,7 @@ import { AutocompleteModule } from '@elements/autocomplete/module';
 import { AttachSourceMenuModule } from '@elements/menu.attachsource/module';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 
@@ -33,6 +34,7 @@ const components = [ViewWorkspace, ...entryComponents];
         AutocompleteModule,
         MatMenuModule,
         MatDividerModule,
+        MatIconModule,
         MatProgressBarModule,
         MatProgressSpinnerModule,
         AttachSourceMenuModule,