feat: add ability to dynamically hide/disable action buttons (onecx#169)

* feat: add ability to dynamically hide/disable table action buttons * feat: add ability to dynamically hide/disable list action buttons * refactor: remove whitespace difference * feat: add ability to dynamically hide/disable grid action buttons * test: add tests for data table * test: add tests for data list grid * test: add tests for hidden action buttons in data table * test: add smoke tests to parent components
markuczy · Mar 15, 2024 · bc30475 · bc30475
1 parent eb0908c
commit bc30475
Show file tree

Hide file tree

Showing 16 changed files with 1,481 additions and 335 deletions.
diff --git a/...-integration-angular/src/lib/core/components/data-list-grid/data-list-grid.component.html b/...-integration-angular/src/lib/core/components/data-list-grid/data-list-grid.component.html
@@ -56,10 +56,11 @@
           <p-menu #menu [model]="gridMenuItems" [popup]="true" appendTo="body"></p-menu>
           <button
             pButton
-            (click)="setSelectedItem(item); menu.toggle($event)"
+            (click)="setSelectedItem(item); updateGridMenuItems(true); menu.toggle($event)"
             icon="pi pi-ellipsis-v"
             [ariaLabel]="'OCX_DATA_LIST_GRID.MORE_ACTIONS' | translate"
             class="more-actions-menu-button menu-btn"
+            [attr.name]="'data-grid-item-menu-button'"
           ></button>
         </div>
       </div>
@@ -80,7 +81,7 @@
             <a [routerLink]="" (click)="onViewRow(item)">{{ resolveFieldData(item, titleLineId) || '' }}</a>
           </div>
           <div class="flex flex-column md:flex-row md:justify-content-between">
-            <ng-container *ngIf="viewItemObserved">
+            <ng-container *ngIf="viewItemObserved && (!viewActionVisibleField || fieldIsTruthy(item, viewActionVisibleField))">
               <button
                 type="button"
                 icon="pi pi-eye"
@@ -90,9 +91,11 @@
                 [attr.aria-label]="(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate"
                 (click)="onViewRow(item)"
                 *ocxIfPermission="viewPermission"
+                [disabled]="!!viewActionEnabledField && !fieldIsTruthy(item, viewActionEnabledField)"
+                [attr.name]="'data-list-action-button'"
               ></button>
             </ng-container>
-            <ng-container *ngIf="editItemObserved">
+            <ng-container *ngIf="editItemObserved && (!editActionVisibleField || fieldIsTruthy(item, editActionVisibleField))">
               <button
                 type="button"
                 class="p-button-rounded p-button-text mb-1 mr-2 editListItemButton"
@@ -102,9 +105,11 @@
                 [attr.aria-label]="(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate"
                 (click)="onEditRow(item)"
                 *ocxIfPermission="editPermission"
+                [disabled]="!!editActionEnabledField && !fieldIsTruthy(item, editActionEnabledField)"
+                [attr.name]="'data-list-action-button'"
               ></button>
             </ng-container>
-            <ng-container *ngIf="deleteItemObserved">
+            <ng-container *ngIf="deleteItemObserved && (!deleteActionVisibleField || fieldIsTruthy(item, deleteActionVisibleField))">
               <button
                 type="button"
                 icon="pi pi-trash"
@@ -114,6 +119,8 @@
                 [attr.aria-label]="(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate"
                 (click)="onDeleteRow(item)"
                 *ocxIfPermission="deletePermission"
+                [disabled]="!!deleteActionEnabledField && !fieldIsTruthy(item, deleteActionEnabledField)"
+                [attr.name]="'data-list-action-button'"
               ></button>
             </ng-container>
             <ng-container *ngFor="let action of additionalActions">