Implemented cell click action for table widgets.

application/src/main/data/json/system/widget_types/asset_admin_table.json

@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-entities-table-widget \n    [ctx]=\"ctx\">\n</tb-entities-table-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        hasDataPageLink: true,\n        warnOnPageDataOverflow: false,\n        dataKeysOptional: true\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'rowDoubleClick': {\n            name: 'widget-action.row-double-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        hasDataPageLink: true,\n        warnOnPageDataOverflow: false,\n        dataKeysOptional: true\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'rowDoubleClick': {\n            name: 'widget-action.row-double-click',\n            multiple: false\n        },\n        'cellClick': {\n            name: 'widget-action.cell-click',\n            multiple: false\n        },\n        'cellDoubleClick': {\n            name: 'widget-action.cell-double-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "",
     "settingsDirective": "tb-entities-table-widget-settings",

application/src/main/data/json/system/widget_types/device_admin_table.json

@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-entities-table-widget \n    [ctx]=\"ctx\">\n</tb-entities-table-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        hasDataPageLink: true,\n        warnOnPageDataOverflow: false,\n        dataKeysOptional: true\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'rowDoubleClick': {\n            name: 'widget-action.row-double-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        hasDataPageLink: true,\n        warnOnPageDataOverflow: false,\n        dataKeysOptional: true\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'rowDoubleClick': {\n            name: 'widget-action.row-double-click',\n            multiple: false\n        },\n        'cellClick': {\n            name: 'widget-action.cell-click',\n            multiple: false\n        },\n        'cellDoubleClick': {\n            name: 'widget-action.cell-double-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "",
     "settingsDirective": "tb-entities-table-widget-settings",

application/src/main/data/json/system/widget_types/entities_table.json

@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-entities-table-widget \n    [ctx]=\"ctx\">\n</tb-entities-table-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        hasDataPageLink: true,\n        warnOnPageDataOverflow: false,\n        dataKeysOptional: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'name', type: 'entityField' }];\n        }\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'rowDoubleClick': {\n            name: 'widget-action.row-double-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        hasDataPageLink: true,\n        warnOnPageDataOverflow: false,\n        dataKeysOptional: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'name', type: 'entityField' }];\n        }\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'rowDoubleClick': {\n            name: 'widget-action.row-double-click',\n            multiple: false\n        },\n        'cellClick': {\n            name: 'widget-action.cell-click',\n            multiple: false\n        },\n        'cellDoubleClick': {\n            name: 'widget-action.cell-double-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "",
     "settingsDirective": "tb-entities-table-widget-settings",

ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html

@@ -42,10 +42,19 @@
                  matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear>
         <ng-container [matColumnDef]="column.def" *ngFor="let column of columns; trackBy: trackByColumnDef;">
           <mat-header-cell [ngStyle]="headerStyle(column)" *matHeaderCellDef mat-sort-header [disabled]="!column.sortable"> {{ column.title }} </mat-header-cell>
-          <mat-cell *matCellDef="let entity; let row = index"
+          <ng-container *ngIf="useCellClickAction; else rowActionEnabled" >
-                    [innerHTML]="cellContent(entity, column, row)"
+            <mat-cell *matCellDef="let entity; let row = index"
-                    [ngStyle]="cellStyle(entity, column, row)">
+                      [innerHTML]="cellContent(entity, column, row)"
-          </mat-cell>
+                      [ngStyle]="cellStyle(entity, column, row)"
+                      (click)="onCellClick($event, entity, column, false)" (dblclick)="onCellClick($event, entity, column, true)">
+            </mat-cell>
+          </ng-container>
+          <ng-template #rowActionEnabled>
+            <mat-cell *matCellDef="let entity; let row = index"
+                      [innerHTML]="cellContent(entity, column, row)"
+                      [ngStyle]="cellStyle(entity, column, row)">
+            </mat-cell>
+          </ng-template>
         </ng-container>
         <ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction">
           <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
@@ -87,12 +96,21 @@
           </mat-cell>
         </ng-container>
         <mat-header-row *matHeaderRowDef="displayedColumns; sticky: enableStickyHeader"></mat-header-row>
-        <mat-row [ngClass]="{'tb-current-entity': entityDatasource.isCurrentEntity(entity),
+        <ng-container *ngIf="useCellClickAction; else rowActionEnabled" >
-                             'invisible': entityDatasource.dataLoading,
+          <mat-row [ngClass]="{'tb-current-entity': entityDatasource.isCurrentEntity(entity),
-                             'tb-pointer': hasRowAction}"
+                              'invisible': entityDatasource.dataLoading,
-                 *matRowDef="let entity; columns: displayedColumns; let row = index"
+                              'tb-pointer': hasRowAction}"
-                 [ngStyle]="rowStyle(entity, row)"
+                  *matRowDef="let entity; columns: displayedColumns; let row = index"
-                 (click)="onRowClick($event, entity)" (dblclick)="onRowClick($event, entity, true)"></mat-row>
+                  [ngStyle]="rowStyle(entity, row)"></mat-row>
+        </ng-container>
+        <ng-template #rowActionEnabled>
+          <mat-row [ngClass]="{'tb-current-entity': entityDatasource.isCurrentEntity(entity),
+                              'invisible': entityDatasource.dataLoading,
+                              'tb-pointer': hasRowAction}"
+                  *matRowDef="let entity; columns: displayedColumns; let row = index"
+                  [ngStyle]="rowStyle(entity, row)"
+                  (click)="onRowClick($event, entity)" (dblclick)="onRowClick($event, entity, true)"></mat-row>
+        </ng-template>
       </table>
       <span [fxShow]="(entityDatasource.isEmpty() | async) && !entityDatasource.dataLoading"
             fxLayoutAlign="center center"

ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.ts

@@ -139,6 +139,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
   public enableStickyHeader = true;
   public enableStickyAction = true;
   public showCellActionsMenu = true;
+  public useCellClickAction = false;
   public pageSizeOptions;
   public pageLink: EntityDataPageLink;
   public sortOrderProperty: string;
@@ -230,6 +231,12 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
     }
   }
 
+  private isActionsConfigured(actionSourceIds: Array<string>): boolean {
+    let configured = false;
+    actionSourceIds.forEach(id => configured = configured || this.ctx.actionsApi.getActionDescriptors(id).length > 0 );
+    return configured;
+  }
+
   ngOnDestroy(): void {
     if (this.widgetResize$) {
       this.widgetResize$.disconnect();
@@ -310,6 +317,9 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
     cssParser.cssPreviewNamespace = namespace;
     cssParser.createStyleElement(namespace, cssString);
     $(this.elementRef.nativeElement).addClass(namespace);
+
+    this.useCellClickAction = this.isActionsConfigured(['cellClick', 'cellDoubleClick']) &&
+                                !this.isActionsConfigured(['rowClick', 'rowDoubleClick']);
   }
 
   private updateDatasources() {
@@ -687,6 +697,26 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
     }
   }
 
+  public onCellClick($event: Event, entity: EntityData, key: EntityColumn, isDouble?: boolean) {
+    if ($event) {
+      $event.stopPropagation();
+    }
+    this.entityDatasource.toggleCurrentEntity(entity);
+    const actionSourceId = isDouble ? 'cellDoubleClick' : 'cellClick';
+    const descriptors = this.ctx.actionsApi.getActionDescriptors(actionSourceId);
+    if (descriptors.length) {
+      let entityId;
+      let entityName;
+      let entityLabel;
+      if (entity) {
+        entityId = entity.id;
+        entityName = entity.entityName;
+        entityLabel = entity.entityLabel;
+      }
+      this.ctx.actionsApi.handleWidgetAction($event, descriptors[0], entityId, entityName, {entity, key}, entityLabel);
+    }
+  }
+
   public onRowClick($event: Event, entity: EntityData, isDouble?: boolean) {
     if ($event) {
       $event.stopPropagation();

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -6911,6 +6911,7 @@
         "widget-action": {
             "action-cell-button": "Action cell button",
             "row-click": "On row click",
+            "cell-click": "On cell click",
             "polygon-click": "On polygon click",
             "marker-click": "On marker click",
             "circle-click": "On circle click",
@@ -6919,6 +6920,7 @@
             "element-click": "On HTML element click",
             "pie-slice-click": "On slice click",
             "row-double-click": "On row double click",
+            "cell-double-click": "On cell double click",
             "card-click": "On card click",
             "click": "On click"
         }