src/app/shared/datatable/table-actions/table-actions.component.ts
selector | cd-table-actions |
styleUrls | ./table-actions.component.scss |
templateUrl | ./table-actions.component.html |
Properties |
Methods |
Inputs |
constructor()
|
onlyDropDown | |
Type : string
|
|
permission | |
Type : Permission
|
|
selection | |
Type : CdTableSelection
|
|
tableActions | |
Type : CdTableAction[]
|
|
disableSelectionAction | ||||||
disableSelectionAction(action: CdTableAction)
|
||||||
Determines if an action should be disabled Default disable conditions of 'update' and 'delete' actions: - If no or multiple selections are made - If one selection is made, but a task is executed on that item
Parameters :
Returns :
Boolean
|
getCurrentButton |
getCurrentButton()
|
Finds the next action that is used as main action for the button The order of the list is crucial to get the right main action. Default button conditions of actions: - 'create' actions can be used with no or multiple selections - 'update' and 'delete' actions can be used with one selection
Returns :
CdTableAction
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
Private removeActionsWithNoPermissions |
removeActionsWithNoPermissions()
|
Removes all actions from 'tableActions' that need a permission the user doesn't have.
Returns :
void
|
Private showableAction | ||||||
showableAction(action: CdTableAction)
|
||||||
Determines if action can be used for the button
Parameters :
Returns :
boolean
|
showDropDownActions |
showDropDownActions()
|
Returns :
boolean
|
toClassName | ||||||
toClassName(name: string)
|
||||||
Parameters :
Returns :
string
|
Private updateDropDownActions |
updateDropDownActions()
|
Returns :
void
|
useClickAction | ||||||
useClickAction(action: CdTableAction)
|
||||||
Parameters :
Returns :
any
|
useRouterLink | ||||||
useRouterLink(action: CdTableAction)
|
||||||
Parameters :
Returns :
string
|
dropDownActions |
Type : CdTableAction[]
|
Default value : []
|
import { Component, Input, OnInit } from '@angular/core';
import * as _ from 'lodash';
import { CdTableAction } from '../../models/cd-table-action';
import { CdTableSelection } from '../../models/cd-table-selection';
import { Permission } from '../../models/permissions';
@Component({
selector: 'cd-table-actions',
templateUrl: './table-actions.component.html',
styleUrls: ['./table-actions.component.scss']
})
export class TableActionsComponent implements OnInit {
@Input()
permission: Permission;
@Input()
selection: CdTableSelection;
@Input()
tableActions: CdTableAction[];
// Use this if you just want to display a drop down button,
// labeled with the given text, with all actions in it.
// This disables the main action button.
@Input()
onlyDropDown?: string;
// Array with all visible actions
dropDownActions: CdTableAction[] = [];
constructor() {}
ngOnInit() {
this.removeActionsWithNoPermissions();
this.updateDropDownActions();
}
toClassName(name: string): string {
return name
.replace(/ /g, '-')
.replace(/[^a-z-]/gi, '')
.toLowerCase();
}
/**
* Removes all actions from 'tableActions' that need a permission the user doesn't have.
*/
private removeActionsWithNoPermissions() {
if (!this.permission) {
this.tableActions = [];
return;
}
const permissions = Object.keys(this.permission).filter((key) => this.permission[key]);
this.tableActions = this.tableActions.filter((action) =>
permissions.includes(action.permission)
);
}
private updateDropDownActions() {
this.dropDownActions = this.tableActions.filter((action) =>
action.visible ? action.visible(this.selection) : action
);
}
/**
* Finds the next action that is used as main action for the button
*
* The order of the list is crucial to get the right main action.
*
* Default button conditions of actions:
* - 'create' actions can be used with no or multiple selections
* - 'update' and 'delete' actions can be used with one selection
*
* @returns {CdTableAction}
*/
getCurrentButton(): CdTableAction {
if (this.onlyDropDown) {
return;
}
let buttonAction = this.dropDownActions.find((tableAction) => this.showableAction(tableAction));
if (!buttonAction && this.dropDownActions.length > 0) {
buttonAction = this.dropDownActions[0];
}
return buttonAction;
}
/**
* Determines if action can be used for the button
*
* @param {CdTableAction} action
* @returns {boolean}
*/
private showableAction(action: CdTableAction): boolean {
const condition = action.canBePrimary;
const singleSelection = this.selection.hasSingleSelection;
const defaultCase = action.permission === 'create' ? !singleSelection : singleSelection;
return (condition && condition(this.selection)) || (!condition && defaultCase);
}
useRouterLink(action: CdTableAction): string {
if (!action.routerLink || this.disableSelectionAction(action)) {
return;
}
return _.isString(action.routerLink) ? action.routerLink : action.routerLink();
}
/**
* Determines if an action should be disabled
*
* Default disable conditions of 'update' and 'delete' actions:
* - If no or multiple selections are made
* - If one selection is made, but a task is executed on that item
*
* @param {CdTableAction} action
* @returns {Boolean}
*/
disableSelectionAction(action: CdTableAction): Boolean {
const permission = action.permission;
const disable = action.disable;
if (disable) {
return Boolean(disable(this.selection));
}
const selected = this.selection.hasSingleSelection && this.selection.first();
return Boolean(
['update', 'delete'].includes(permission) && (!selected || selected.cdExecuting)
);
}
showDropDownActions() {
this.updateDropDownActions();
return this.dropDownActions.length > 1;
}
useClickAction(action: CdTableAction) {
return action.click && action.click();
}
}
<div class="btn-group"
dropdown>
<ng-container *ngIf="getCurrentButton() as action">
<button type="button"
class="btn btn-sm btn-primary"
[ngClass]="{'disabled': disableSelectionAction(action)}"
(click)="useClickAction(action)"
[routerLink]="useRouterLink(action)">
<i class="fa fa-fw {{ action.icon }}"></i><span>{{ action.name }}</span>
</button>
</ng-container>
<button type="button"
dropdownToggle
*ngIf="showDropDownActions()"
class="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split">
<ng-container *ngIf="onlyDropDown">{{ onlyDropDown }}</ng-container>
<span class="caret"></span>
<span *ngIf="!onlyDropDown"
class="sr-only"></span>
</button>
<ul *dropdownMenu
class="dropdown-menu"
role="menu">
<ng-container *ngFor="let action of dropDownActions">
<li role="menuitem"
class="{{ toClassName(action['name']) }}"
[ngClass]="{'disabled': disableSelectionAction(action)}">
<a class="dropdown-item"
(click)="useClickAction(action)"
[routerLink]="useRouterLink(action)">
<i class="fa fa-fw {{ action.icon }}"></i><span>{{ action.name }}</span>
</a>
</li>
</ng-container>
</ul>
</div>
./table-actions.component.scss