feat(custom-actions): add the custom actions feature (#338)

Author: Toolito

src/app/pages/examples/custom-edit-view/basic-example-custom-actions.component.ts

@@ -0,0 +1,79 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'basic-example-custom-actions',
+  template: `
+    <ng2-smart-table [settings]="settings" [source]="data" (custom)="onCustom($event)"></ng2-smart-table>
+  `,
+})
+export class BasicExampleCustomActionsComponent {
+
+  settings = {
+    actions: {
+      add: false,
+      edit: false,
+      delete: false,
+      custom: true
+    },
+    custom: [{
+      action: 'view',
+      buttonContent: `view `
+    }, {
+      action: 'duplicate',
+      buttonContent: 'duplicate '
+    }],
+    columns: {
+      id: {
+        title: 'ID',
+      },
+      name: {
+        title: 'Full Name',
+      },
+      username: {
+        title: 'User Name',
+      },
+      email: {
+        title: 'Email',
+      }
+    },
+  };
+
+  data = [
+    {
+      id: 1,
+      name: 'Leanne Graham',
+      username: 'Bret',
+      email: 'Sincere@april.biz',
+    },
+    {
+      id: 2,
+      name: 'Ervin Howell',
+      username: 'Antonette',
+      email: 'Shanna@melissa.tv',
+    },
+    {
+      id: 3,
+      name: 'Clementine Bauch',
+      username: 'Samantha',
+      email: 'Nathan@yesenia.net',
+    },
+    {
+      id: 4,
+      name: 'Patricia Lebsack',
+      username: 'Karianne',
+      email: 'Julianne.OConner@kory.org',
+    },
+    {
+      id: 5,
+      name: 'Chelsey Dietrich',
+      username: 'Kamren',
+      email: 'Lucio_Hettinger@annie.ca',
+    },
+  ];
+
+  constructor() { }
+
+  onCustom(event) {
+    console.log(event);
+  }
+}

src/app/pages/examples/custom-edit-view/custom-edit-view-examples.component.html

@@ -35,3 +35,10 @@ <h3>
     target="_blank">Demo Source</a>
   <basic-example-button-view></basic-example-button-view>
 </div>
+
+<h3><a id="multiselect" class="anchor" href="#customactions" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Custom actions</h3>
+<p>An example on how to use custom actions:</p>
+<div class="with-source">
+  <a class="source" href="https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/various/basic-example-custom-actions.component.ts" target="_blank">Demo Source</a>
+  <basic-example-custom-actions></basic-example-custom-actions>
+</div>

src/app/pages/examples/examples.module.ts

@@ -20,7 +20,9 @@ import { CustomRenderComponent } from './custom-edit-view/custom-render.componen
 import { FilterExamplesComponent } from './filter/filter-examples.component';
 import { ServerExamplesComponent } from './server/server-examples.component';
 import { CustomViewEditExamplesComponent } from './custom-edit-view/custom-edit-view-examples.component';
+import { BasicExampleCustomActionsComponent } from './custom-edit-view/basic-example-custom-actions.component';
 import { VariousExamplesComponent } from './various/various-examples.component';
+
 import {
   BasicExampleButtonViewComponent,
   ButtonViewComponent,
@@ -42,6 +44,7 @@ const EXAMPLES_COMPONENTS = [
   CustomViewEditExamplesComponent,
   VariousExamplesComponent,
   BasicExampleButtonViewComponent,
+  BasicExampleCustomActionsComponent,
   ButtonViewComponent,
 ];
 

src/ng2-smart-table/components/tbody/cells/custom.component.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter } from '@angular/core';
+
+import { Grid } from '../../../lib/grid';
+import { Row } from '../../../lib/data-set/row';
+
+@Component({
+    selector: 'ng2-st-tbody-custom',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+        <a *ngFor="let custom of grid.getSetting('custom')" href="#"
+            class="ng2-smart-action ng2-smart-action-custom-custom" [innerHTML]="custom.buttonContent" (click)="onCustom(custom, $event)"></a>
+        `
+})
+export class TbodyCustomComponent {
+
+    @Input() grid: Grid;
+    @Input() row: Row;
+    @Input() source: any;
+    @Output() custom = new EventEmitter<any>();
+
+    onCustom(custom: any, event: any) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        this.custom.emit({
+            custom: custom,
+            data: this.row.getData(),
+            source: this.source
+        });
+    }
+
+}

src/ng2-smart-table/components/tbody/tbody.component.html

@@ -3,6 +3,8 @@
     <input type="checkbox" class="form-control" [ngModel]="row.isSelected">
   </td>
   <td *ngIf="!row.isInEditing && grid.showActionColumn('left')" class="ng2-smart-actions">
+    <ng2-st-tbody-custom [grid]="grid" (custom)="custom.emit($event)" [row]="row" [source]="source"></ng2-st-tbody-custom>
+
     <ng2-st-tbody-edit-delete [grid]="grid"
                               [deleteConfirm]="deleteConfirm"
                               [editConfirm]="editConfirm"

src/ng2-smart-table/components/tbody/tbody.component.ts

@@ -19,6 +19,7 @@ export class Ng2SmartTableTbodyComponent {
   @Output() cancel = new EventEmitter<any>();
   @Output() edit = new EventEmitter<any>();
   @Output() delete = new EventEmitter<any>();
+  @Output() custom = new EventEmitter<any>();
   @Output() edited = new EventEmitter<any>();
   @Output() userSelectRow = new EventEmitter<any>();
   @Output() editRowSelect = new EventEmitter<any>();

src/ng2-smart-table/components/tbody/tbody.module.ts

@@ -7,11 +7,13 @@ import { CellModule } from '../cell/cell.module';
 import { Ng2SmartTableTbodyComponent } from './tbody.component';
 import { TbodyCreateCancelComponent } from './cells/create-cancel.component';
 import { TbodyEditDeleteComponent } from './cells/edit-delete.component';
+import { TbodyCustomComponent } from './cells/custom.component';
 
 const TBODY_COMPONENTS = [
   TbodyCreateCancelComponent,
   TbodyEditDeleteComponent,
-  Ng2SmartTableTbodyComponent,
+  TbodyCustomComponent,
+  Ng2SmartTableTbodyComponent
 ];
 
 @NgModule({

src/ng2-smart-table/lib/grid.ts

@@ -32,7 +32,7 @@ export class Grid {
   }
 
   isActionsVisible(): boolean {
-    return this.getSetting('actions.add') || this.getSetting('actions.edit') || this.getSetting('actions.delete');
+    return this.getSetting('actions.add') || this.getSetting('actions.edit') || this.getSetting('actions.delete') || this.getSetting('actions.custom');
   }
 
   isMultiSelectVisible(): boolean {

src/ng2-smart-table/ng2-smart-table.component.html

@@ -17,6 +17,7 @@
                       [editConfirm]="editConfirm"
                       (edit)="edit.emit($event)"
                       (delete)="delete.emit($event)"
+                      (custom)="custom.emit($event)"
                       (userSelectRow)="onUserSelectRow($event)"
                       (editRowSelect)="editRowSelect($event)"
                       (multipleSelectRow)="multipleSelectRow($event)"

src/ng2-smart-table/ng2-smart-table.component.ts

@@ -21,6 +21,7 @@ export class Ng2SmartTableComponent implements OnChanges {
   @Output() delete = new EventEmitter<any>();
   @Output() edit = new EventEmitter<any>();
   @Output() create = new EventEmitter<any>();
+  @Output() custom = new EventEmitter<any>();
   @Output() deleteConfirm = new EventEmitter<any>();
   @Output() editConfirm = new EventEmitter<any>();
   @Output() createConfirm = new EventEmitter<any>();
@@ -38,6 +39,7 @@ export class Ng2SmartTableComponent implements OnChanges {
       add: true,
       edit: true,
       delete: true,
+      custom: false,
       position: 'left', // left|right
     },
     filter: {