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

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: {