File

src/app/shared/datatable/table-actions/table-actions.component.ts

Implements

OnInit

Metadata

selector cd-table-actions
styleUrls ./table-actions.component.scss
templateUrl ./table-actions.component.html

Index

Properties
Methods
Inputs

Constructor

constructor()

Inputs

onlyDropDown
Type : string
permission
Type : Permission
selection
Type : CdTableSelection
tableActions
Type : CdTableAction[]

Methods

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 :
Name Type Optional
action CdTableAction No
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 :
Name Type Optional
action CdTableAction No
Returns : boolean
showDropDownActions
showDropDownActions()
Returns : boolean
toClassName
toClassName(name: string)
Parameters :
Name Type Optional
name string No
Returns : string
Private updateDropDownActions
updateDropDownActions()
Returns : void
useClickAction
useClickAction(action: CdTableAction)
Parameters :
Name Type Optional
action CdTableAction No
Returns : any
useRouterLink
useRouterLink(action: CdTableAction)
Parameters :
Name Type Optional
action CdTableAction No
Returns : string

Properties

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

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""