Merge pull request #28 from Angular-RU/fix/context-menu

fix: correct open context item

Author: splincode

projects/table-builder/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@angular-ru/ng-table-builder",
-    "version": "0.34.0",
+    "version": "0.35.0",
     "license": "MIT",
     "bugs": {
         "url": "https://github.com/Angular-RU/ng-table-builder/issues"

projects/table-builder/src/lib/table/components/ngx-context-menu/ngx-context-menu-item/ngx-context-menu-item.component.ts

@@ -4,6 +4,7 @@ import {
     Component,
     ElementRef,
     EventEmitter,
+    HostListener,
     Injector,
     Input,
     NgZone,
@@ -66,6 +67,13 @@ export class NgxContextMenuItemComponent implements OnInit, OnDestroy {
         return (this.itemRef && this.itemRef.nativeElement) || {};
     }
 
+    @HostListener('mouseenter')
+    public mouseover(): void {
+        if (this.state.opened) {
+            detectChanges(this.cd);
+        }
+    }
+
     public ngOnInit(): void {
         this.subscription = this.contextMenu.events.subscribe((): void => detectChanges(this.cd));
     }

projects/table-builder/src/lib/table/table-builder.component.html

@@ -12,6 +12,7 @@
     class="table-grid__root"
     [style.height.px]="height"
     [sourceRef]="sourceRef"
+    [class.table-grid__no-visible]="!sourceRef.length"
     [class.table-grid__root--is-rendered]="isRendered"
     [class.table-grid__root-auto-height]="autoHeightDetect"
     [class.table-grid__no-display]="!(columnSchema.length > 0)"

projects/table-builder/src/lib/table/table-builder.component.scss

@@ -103,3 +103,7 @@
     // for correct work mutation observer
     opacity: 0.012 !important;
 }
+
+.table-grid__no-visible {
+    display: none !important;
+}

projects/table-builder/src/lib/table/table-builder.component.ts

@@ -472,7 +472,7 @@ export class TableBuilderComponent extends TableBuilderApiImpl
             this.viewPortInfo.isScrolling = false;
             detectChanges(this.cd);
             window.requestAnimationFrame((): void => this.app.tick());
-        }, TIME_RELOAD);
+        }, MACRO_TIME);
     }
 
     private getOffsetVisibleEndIndex(): number {

src/app/samples/sample-eleven/sample-eleven.component.html

@@ -3,7 +3,7 @@
 </mat-toolbar>
 
 <div class="night">
-    <div class="column" *ngIf="licences.length" [@fadeAnimation]>
+    <div class="column" *ngIf="licences.length">
         <mat-tab-group (selectedTabChange)="update()">
             <mat-tab label="Custom context menu">
                 <div class="column-samples">
@@ -62,6 +62,22 @@
                                     <ngx-menu-content>Export Excel</ngx-menu-content>
                                 </ngx-context-menu-item>
 
+                                <ngx-context-menu-item>
+                                    <ngx-menu-content icon></ngx-menu-content>
+                                    <ngx-menu-content>Column list</ngx-menu-content>
+
+                                    <ngx-context-menu-item
+                                        *ngFor="let column of table1.columnSchema"
+                                        (onClick)="table1.toggleColumnVisibility(column.key); $event.preventDefault()"
+                                        [visible]="column.isModel"
+                                    >
+                                        <ngx-menu-content no-margin>{{ column.key }}</ngx-menu-content>
+                                        <ngx-menu-content no-margin align-center>
+                                            <mat-checkbox color="primary" [checked]="column.isVisible"></mat-checkbox>
+                                        </ngx-menu-content>
+                                    </ngx-context-menu-item>
+                                </ngx-context-menu-item>
+
                                 <ngx-context-menu-item
                                     #item
                                     divider