Implement Row Action Resolvers concept (#116)

sha4be · web-flow · commit 591653b41040 · 2024-09-18T09:35:40.000+02:00
diff --git a/src/ng-generate/components/shared/generators/language/index.ts b/src/ng-generate/components/shared/generators/language/index.ts
@@ -103,7 +103,25 @@ function getBlockTransCustomColumns(): string {
 }
 
 function getBlockTransRowActions(): string {
-    const customRowActions = sharedOptions.customRowActions
+    if (!sharedOptions.customRowActions  || sharedOptions.customRowActions.length === 0) {
+        return '';
+    }
+
+    const actions: string[] = sharedOptions.customRowActions
+        .map((action: string) => action.replace(/\.[^/.]+$/, '').replace(/\s+/g, '-').toLowerCase());
+
+    const actionTitles = actions.map(action => `"${action}.customRowAction": "${action}"`).join(', ');
+    const actionNotAvailableTitles = actions.map(action => `"${action}.notAvailable": ""`).join(', ');
+
+    return `
+        ${actionTitles},
+        "customRowAction": {
+            ${actionNotAvailableTitles}
+        },
+    `;
+
+
+    /*const customRowActions = sharedOptions.customRowActions
         ?.map((cr: string, i: number, arr: string[]) => {
             const crReplaced = cr
                 .replace(/\.[^/.]+$/, '')
@@ -113,7 +131,7 @@ function getBlockTransRowActions(): string {
         })
         .join(', ');
 
-    return customRowActions?.length > 0 ? `${customRowActions},` : '';
+    return customRowActions?.length > 0 ? `${customRowActions},` : '';*/
 }
 
 function getBlockCustomCommandBarActions(): string {
@@ -126,7 +144,7 @@ function getBlockCustomCommandBarActions(): string {
 
     const actions = sharedOptions.customCommandBarActions.map(transformActionName);
 
-    const actionStrings = actions.map((action: string, index: number) => `"${action}.customCommandBarAction": "${action}"`);
+    const actionStrings = actions.map((action: string) => `"${action}.customCommandBarAction": "${action}"`);
 
     return actionStrings.length > 0 ? `${actionStrings},` : '';
 }
diff --git a/src/ng-generate/components/shared/utils.ts b/src/ng-generate/components/shared/utils.ts
@@ -195,21 +195,24 @@ export function getCustomRowActions(options: any): string {
                       const formattedAction = action.replace(/\.[^/.]+$/, '');
                       const formattedActionKebab = formattedAction.replace(/\s+/g, '-').toLowerCase();
                       const classifiedAction = classify(formattedActionKebab);
-                      const commonParts = `style="cursor: pointer;" matTooltip="{{ '${options.templateHelper.getVersionedAccessPrefix(
-                          options,
-                      )}${formattedActionKebab}.customRowAction' | transloco }}" aria-hidden="false" attr.aria-label="{{ '${options.templateHelper.getVersionedAccessPrefix(
-                          options,
-                      )}${formattedActionKebab}.customRowAction' | transloco }}"`;
+                      const versionPrefix = options.templateHelper.getVersionedAccessPrefix(options);
+                      const rowActionTextKey = `${versionPrefix}${formattedActionKebab}.customRowAction`;
+                      const commonParts = `style="cursor: pointer;" matTooltip="{{ '${rowActionTextKey}' | transloco }}" aria-hidden="false" attr.aria-label="{{ '${rowActionTextKey}' | transloco }}"`;
                       const iconTemplate =
                           action.lastIndexOf('.') === -1
                               ? `<mat-icon data-test="custom-action-icon" ${commonParts} class="material-icons">${formattedAction}</mat-icon>`
                               : `<mat-icon data-test="custom-action-icon" svgIcon="${formattedAction}" ${commonParts}></mat-icon>`;
                       return `
-                      <button mat-menu-item *ngIf="is${classifiedAction}Visible" data-test="custom-action-button" (click)="executeCustomAction($event, '${formattedActionKebab}', row)">
+                      <button 
+                          *ngIf="is${classifiedAction}Visible"
+                          [disabled]="!isAvailableRowAction('${formattedActionKebab}', row)"
+                          [matTooltipDisabled]="isAvailableRowAction('${formattedActionKebab}', row)"
+                          [matTooltip]="'${versionPrefix}customRowAction.${formattedActionKebab}.notAvailable' | transloco"
+                          (click)="executeCustomAction($event, '${formattedActionKebab}', row)"
+                          mat-menu-item 
+                          data-test="custom-action-button">
                           ${iconTemplate}
-                          <span data-test="custom-action-text" style="vertical-align: middle">{{ '${options.templateHelper.getVersionedAccessPrefix(
-                              options,
-                          )}${formattedActionKebab}.customRowAction' | transloco}}</span>
+                          <span data-test="custom-action-text" style="vertical-align: middle">{{ '${rowActionTextKey}' | transloco}}</span>
                       </button>
                      `;
                   })
diff --git a/src/ng-generate/components/table/generators/components/table/files/__name@dasherize__.component.ts.template b/src/ng-generate/components/table/generators/components/table/files/__name@dasherize__.component.ts.template
@@ -2,6 +2,8 @@
 <%
   var tableColumnsEnumName = classify(name) + 'Column';
   var cmpFileName = dasherize(name);
+  var hasCustomRowActions = options.customRowActions.length > 0;
+  var customRowActionNames = options.customRowActions.map(action => `'${action.replace(/\.[^/.]+$/, '')}'`);
 %>
 import {
     AfterViewInit,
@@ -96,17 +98,23 @@ export enum <%= tableColumnsEnumName %> {
     <% if (options.addRowCheckboxes) { %>CHECKBOX = 'checkboxes',<% } %>
     <%= enumPropertyDefinitions %>
     <%= enumCustomColumns %>
-    <% if (options.customRowActions.length > 0) { %>CUSTOM_ROW_ACTIONS = 'customRowActions',<% } %>
+    <% if (hasCustomRowActions) { %>CUSTOM_ROW_ACTIONS = 'customRowActions',<% } %>
     COLUMNS_MENU = 'columnsMenu'
 }
 
 export const NON_DATA_COLUMNS: <%= tableColumnsEnumName %>[] = [
-    <% if (options.customRowActions.length > 0) { %>
+    <% if (hasCustomRowActions) { %>
     <%= tableColumnsEnumName %>.CUSTOM_ROW_ACTIONS,
     <% } %>
     <%= tableColumnsEnumName %>.COLUMNS_MENU
 ];
 
+<% if (hasCustomRowActions) { %>
+    type RowAction = <%= customRowActionNames.join(' | ') %>;
+    export type <%= options.aspectModelTypeName %>ActionsResolvers = Partial<Record<RowAction, (rowData: <%= options.aspectModelTypeName %>) => boolean>> | undefined;
+<% } %>
+
+
 
 @Component({
     selector: '<%= options.selector %>',
@@ -160,6 +168,10 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit, Af
         @Input() maxExportRows: number = 0;
     <% } %>
 
+    <% if (hasCustomRowActions) { %>
+        @Input() actionResolvers: <%= options.aspectModelTypeName %>ActionsResolvers = {};
+    <% } %>
+
     @Output() rowClickEvent = new EventEmitter<any>();
     @Output() rowDblClickEvent = new EventEmitter<any>();
     @Output() rowRightClickEvent = new EventEmitter<any>();
@@ -169,7 +181,7 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit, Af
     @Output() downloadEvent = new EventEmitter<{error: boolean, success: boolean, inProgress: boolean}>();
     @Output() rowSelectionEvent = new EventEmitter<any>();
 
-    <% if (options.customRowActions.length > 0) { %>
+    <% if (hasCustomRowActions) { %>
         @Output() customActionEvent = new EventEmitter<any>();
     <% } %>
     <% if (options.customCommandBarActions.length > 0) { %>
@@ -383,9 +395,15 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit, Af
             this.rowRightClickEvent.emit({ data: row, mousePosition: mousePositionOnClick });
         }
 
-        if ($event.type === 'click') {
-            this.rowClickEvent.emit({ data: row })
-        }
+        <% if (hasCustomRowActions) { %>
+            if ($event.type === 'click' && this.isAvailableRowAction('forward-right', row)) {
+                this.rowClickEvent.emit({ data: row })
+            }
+        <% } else {%>
+            if ($event.type === 'click') {
+                this.rowClickEvent.emit({ data: row })
+            }
+        <% }%>
 
         return false;
     }
@@ -438,7 +456,7 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit, Af
         <% } %>
     <% } %>
 
-    <% if (options.customRowActions.length > 0) { %>
+    <% if (hasCustomRowActions) { %>
         executeCustomAction($event: MouseEvent, action: string, row:any): void{
             if(this.customRowActionsLength <= this.visibleRowActionsIcons) {
                    $event.stopPropagation();
@@ -635,7 +653,7 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit, Af
 
         displayedColumnsTmp.push(...columns);
 
-        <% if (options.customRowActions.length > 0) { %>
+        <% if (hasCustomRowActions) { %>
             displayedColumnsTmp.push({name: <%= tableColumnsEnumName %>['CUSTOM_ROW_ACTIONS'], selected: true});
         <% } %>
 
@@ -657,6 +675,14 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit, Af
         }
     <% } %>
 
+    protected isAvailableRowAction(action: RowAction, rowData: <%= options.aspectModelTypeName %>): boolean {
+        if (!this.actionResolvers || !this.actionResolvers[action]) {
+            return true;
+        }
+
+        return this.actionResolvers[action](rowData) ?? true;
+    }
+
     <% if (options.hasSearchBar) { %>
         private initializeHighlightConfig(): void {
             const configStorage = this.storageService.getItem(this.<%= options.localStorageKeyConfig %>);
