<ng-container *ngFor="let action of dropDownActions">
<li role="menuitem"
class="{{ toClassName(action['name']) }}"
- [ngClass]="{'disabled': disableSelectionAction(action)}">
+ [ngClass]="{'disabled': disableSelectionAction(action)}"
+ data-toggle="tooltip" title="{{ useDisableDesc(action) }}">
<a class="dropdown-item"
(click)="useClickAction(action)"
[routerLink]="useRouterLink(action)">
expect(component.toClassName('Mark x down')).toBe('mark-x-down');
expect(component.toClassName('?Su*per!')).toBe('super');
});
+
+ describe('useDisableDesc', () => {
+ it('should return a description if disableDesc is set for action', () => {
+ const deleteWithDescAction: CdTableAction = {
+ permission: 'delete',
+ icon: 'fa-times',
+ canBePrimary: (selection: CdTableSelection) => selection.hasSelection,
+ disableDesc: () => {
+ return 'Delete action disabled description';
+ },
+ name: 'DeleteDesc'
+ };
+
+ expect(component.useDisableDesc(deleteWithDescAction)).toBe(
+ 'Delete action disabled description'
+ );
+ });
+
+ it('should return no description if disableDesc is not set for action', () => {
+ expect(component.useDisableDesc(deleteAction)).toBeUndefined();
+ });
+ });
+
+ describe('useClickAction', () => {
+ const editClickAction: CdTableAction = {
+ permission: 'update',
+ icon: 'fa-pencil',
+ name: 'Edit',
+ click: () => {
+ return 'Edit action click';
+ }
+ };
+
+ it('should call click action if action is not disabled', () => {
+ editClickAction.disable = () => {
+ return false;
+ };
+ expect(component.useClickAction(editClickAction)).toBe('Edit action click');
+ });
+
+ it('should not call click action if action is disabled', () => {
+ editClickAction.disable = () => {
+ return true;
+ };
+ expect(component.useClickAction(editClickAction)).toBeFalsy();
+ });
+ });
});
}
useClickAction(action: CdTableAction) {
- return action.click && action.click();
+ /**
+ * In order to show tooltips for deactivated menu items, the class
+ * 'pointer-events: auto;' has been added to the .scss file which also
+ * re-activates the click-event.
+ * To prevent calling the click-event on deactivated elements we also have
+ * to check here if it's disabled.
+ */
+ return !this.disableSelectionAction(action) && action.click && action.click();
+ }
+
+ useDisableDesc(action: CdTableAction) {
+ return action.disableDesc && action.disableDesc();
}
}
// if one selection is made and no task is running on the selected item.
disable?: (_: CdTableSelection) => boolean;
+ /**
+ * In some cases you might want to give the user a hint why a button is
+ * disabled. The specified message will be shown to the user as a button
+ * tooltip.
+ */
+ disableDesc?: Function;
+
/**
* Defines if the button can become 'primary' (displayed as button and not
* 'hidden' in the menu). Only one button can be primary at a time. By
projects / ceph.git / commitdiff