cog menu

Author: borsch

projects/angular-datatable-advanced-examples/src/app/app-routing.module.ts

@@ -1,11 +1,7 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-
-const routes: Routes = [];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  imports: [],
+  exports: []
 })
 export class AppRoutingModule { }

projects/angular-datatable-advanced-examples/src/app/app.component.html

@@ -4,5 +4,6 @@
   [displayedColumns]="['Title', 'Year', 'Released']"
   [rowsLoader]="booksLoader()"
   [columns]="columns"
+  [cogMenu]="cogMenu"
 >
 </ada-table>

projects/angular-datatable-advanced-examples/src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import {HttpClient, HttpParams} from '@angular/common/http';
 import {map} from 'rxjs/operators';
-import {RowsLoader} from '../../../angular-datatable-advanced/src/lib/model/models';
+import {CogMenu, RowsLoader} from '../../../angular-datatable-advanced/src/lib/model/models';
 import {Column} from '../../../angular-datatable-advanced/src/lib/model/column';
 import {FilterIn} from '../../../angular-datatable-advanced/src/lib/model/filter-in';
 import {Observable, of} from 'rxjs';
@@ -41,6 +41,7 @@ export class AppComponent {
       columnKey: 'geolocation.type',
       columnName: 'Geolocation type'
     }, {
+      columnKey: 'coords',
       columnName: 'Coordinates',
       cellRender: (row) => row.geolocation && row.geolocation.coordinates
         ? `LNG: ${row.geolocation.coordinates[0]}, LAT: ${row.geolocation.coordinates[1]}`
@@ -70,6 +71,23 @@ export class AppComponent {
     }
   ];
 
+  cogMenu: CogMenu[] = [
+    {
+      name: 'Button 1',
+      onClick: item => alert('Click on Button 1')
+    },
+    {
+      name: 'Invalidate',
+      renderCheck: item => item.nametype === 'Valid',
+      onClick: item => item.nametype = 'Invalid'
+    },
+    {
+      name: 'Validate',
+      renderCheck: item => item.nametype === 'Invalid',
+      onClick: item => item.nametype = 'Valid'
+    }
+  ];
+
   constructor(private http: HttpClient) {}
 
   public booksLoader(): RowsLoader {

projects/angular-datatable-advanced/src/lib/angular-datatable-advanced.component.html

@@ -1,5 +1,11 @@
 <div>
   <mat-table class="ada-table" [dataSource]="dataSource" matSort>
+    <ng-container *ngIf="hasCogMenu()" matColumnDef="cogMenuColumn">
+      <mat-header-cell class="ada-th ada-cog-header" *matHeaderCellDef></mat-header-cell>
+      <mat-cell class="ada-td ada-cog-button" *matCellDef="let row">
+        <ada-cog-menu [cogMenu]="cogMenu" [row]="row"></ada-cog-menu>
+      </mat-cell>
+    </ng-container>
     <ng-container *ngFor="let column of extendedColumns" [matColumnDef]="column.id">
       <mat-header-cell class="ada-th" *matHeaderCellDef>
         {{column.column.columnName}}

projects/angular-datatable-advanced/src/lib/angular-datatable-advanced.component.scss

@@ -0,0 +1,6 @@
+.ada-cog-button, .ada-cog-header {
+  flex: 0 0 35px;
+}
+.ada-cog-button {
+  cursor: pointer;
+}

projects/angular-datatable-advanced/src/lib/angular-datatable-advanced.component.ts

@@ -4,10 +4,12 @@ import {catchError, finalize, mergeAll, tap} from 'rxjs/operators';
 import {MatSort} from '@angular/material/sort';
 import {asapScheduler, BehaviorSubject, Observable, of, scheduled} from 'rxjs';
 import {CollectionViewer, DataSource} from '@angular/cdk/collections';
-import {ColumnWithFilter, RowsLoader, Sort} from './model/models';
+import {CogMenu, ColumnWithFilter, RowsLoader, Sort} from './model/models';
 import {Column, ExtendedColumn} from './model/column';
 import {DomSanitizer} from '@angular/platform-browser';
 
+const COG_MENU_COLUMN = 'cogMenuColumn';
+
 @Component({
   selector: 'ada-table',
   templateUrl: './angular-datatable-advanced.component.html',
@@ -36,6 +38,8 @@ export class AngularDatatableAdvancedComponent implements OnInit, AfterViewInit,
   pageSizeOptions = [10, 20];
   @Input()
   rowsLoader: RowsLoader;
+  @Input()
+  cogMenu: Array<CogMenu>;
 
   constructor(private sanitizer: DomSanitizer) {
   }
@@ -95,7 +99,15 @@ export class AngularDatatableAdvancedComponent implements OnInit, AfterViewInit,
   }
 
   getColumns() {
-    return this.extendedColumns.map(col => col.id);
+    const columnIds = this.extendedColumns.map(col => col.id);
+    if (this.hasCogMenu()) {
+      columnIds.unshift(COG_MENU_COLUMN);
+    }
+    return columnIds;
+  }
+
+  hasCogMenu() {
+    return this.cogMenu && this.cogMenu.length > 0;
   }
 
   /**

projects/angular-datatable-advanced/src/lib/angular-datatable-advanced.module.ts

@@ -12,9 +12,10 @@ import { MatMenuModule } from '@angular/material/menu';
 import {FilterComponent, FilterSelectByKeyword} from './components/filter/filter.component';
 import {FormsModule} from '@angular/forms';
 import {FlatpickrModule} from 'angularx-flatpickr';
+import { CogMenuComponent } from './components/cog-menu/cog-menu.component';
 
 @NgModule({
-  declarations: [AngularDatatableAdvancedComponent, FilterComponent, FilterSelectByKeyword],
+  declarations: [AngularDatatableAdvancedComponent, FilterComponent, FilterSelectByKeyword, CogMenuComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,

projects/angular-datatable-advanced/src/lib/components/cog-menu/cog-menu.component.html

@@ -0,0 +1,10 @@
+<mat-icon [matMenuTriggerFor]="menu">more_vert</mat-icon>
+<mat-menu #menu class="ada-cog-menu 123" style="min-height: 10px;">
+  <div
+    class="ada-cog-menu-button"
+    *ngFor="let menuItem of cogMenu"
+    [style.display]="menuItem.renderCheck && !menuItem.renderCheck(row) ? 'none' : 'block'"
+    (click)="handleClick(menuItem)">
+    {{menuItem.name}}
+  </div>
+</mat-menu>

projects/angular-datatable-advanced/src/lib/components/cog-menu/cog-menu.component.scss

@@ -0,0 +1,14 @@
+::ng-deep .mat-menu-panel.ada-cog-menu {
+  min-height: 10px !important;
+}
+
+.ada-cog-menu-button {
+  cursor: pointer;
+  text-align: center;
+  align-content: center;
+  padding: 5px;
+}
+
+.ada-cog-menu-button:hover {
+  background: rgba(0,0,0,.04);
+}

projects/angular-datatable-advanced/src/lib/components/cog-menu/cog-menu.component.ts

@@ -0,0 +1,24 @@
+import {Component, Input } from '@angular/core';
+import {CogMenu} from '../../model/models';
+
+@Component({
+  selector: 'ada-cog-menu',
+  templateUrl: './cog-menu.component.html',
+  styleUrls: ['./cog-menu.component.scss']
+})
+export class CogMenuComponent {
+
+  @Input()
+  cogMenu: CogMenu[];
+  @Input()
+  row: any;
+
+  constructor() { }
+
+  handleClick(menu: CogMenu) {
+    if (menu.onClick) {
+      menu.onClick(this.row);
+    }
+  }
+
+}