Merge pull request #7387 from engix-ltd/custom_header_column_title

[3.4.2] UI: Added support of custom table header title in addition to data key label.

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

@@ -75,6 +75,7 @@ import {
   getColumnWidth,
   getRowStyleInfo,
   getTableCellButtonActions,
+  getHeaderTitle,
   noDataMessage,
   prepareTableCellButtonActions,
   RowStyleInfo,
@@ -407,11 +408,11 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
     if (this.subscription.alarmSource) {
       this.subscription.alarmSource.dataKeys.forEach((alarmDataKey) => {
         const dataKey: EntityColumn = deepClone(alarmDataKey) as EntityColumn;
+        const keySettings: TableWidgetDataKeySettings = dataKey.settings;
         dataKey.entityKey = dataKeyToEntityKey(alarmDataKey);
         dataKey.label = this.utils.customTranslation(dataKey.label, dataKey.label);
-        dataKey.title = dataKey.label;
+        dataKey.title = getHeaderTitle(dataKey, keySettings, this.utils);
         dataKey.def = 'def' + this.columns.length;
-        const keySettings: TableWidgetDataKeySettings = dataKey.settings;
         if (dataKey.type === DataKeyType.alarm && !isDefined(keySettings.columnWidth)) {
           const alarmField = alarmFields[dataKey.name];
           if (alarmField && alarmField.time) {

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

@@ -78,6 +78,7 @@ import {
   getColumnDefaultVisibility,
   getColumnSelectionAvailability,
   getColumnWidth,
+  getHeaderTitle,
   getEntityValue,
   getRowStyleInfo,
   getTableCellButtonActions,
@@ -426,11 +427,11 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
         }
         dataKeys.push(dataKey);
 
+        const keySettings: TableWidgetDataKeySettings = dataKey.settings;
         dataKey.label = this.utils.customTranslation(dataKey.label, dataKey.label);
-        dataKey.title = dataKey.label;
+        dataKey.title = getHeaderTitle(dataKey, keySettings, this.utils);
         dataKey.def = 'def' + this.columns.length;
         dataKey.sortable = !dataKey.usePostProcessing && (!dataKey.aggregationType || dataKey.aggregationType === AggregationType.NONE);
-        const keySettings: TableWidgetDataKeySettings = dataKey.settings;
         if (dataKey.type === DataKeyType.entityField &&
           !isDefined(keySettings.columnWidth) || keySettings.columnWidth === '0px') {
           const entityField = entityFields[dataKey.name];

ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html

@@ -16,6 +16,10 @@
 
 -->
 <section class="tb-widget-settings" [formGroup]="alarmsTableKeySettingsForm" fxLayout="column">
+  <mat-form-field fxFlex class="mat-block">
+    <mat-label translate>widgets.table.custom-title</mat-label>
+    <input matInput formControlName="customTitle">
+  </mat-form-field>
   <mat-form-field fxFlex class="mat-block">
     <mat-label translate>widgets.table.column-width</mat-label>
     <input matInput formControlName="columnWidth">

ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.ts

@@ -40,6 +40,7 @@ export class AlarmsTableKeySettingsComponent extends WidgetSettingsComponent {
 
   protected defaultSettings(): WidgetSettings {
     return {
+      customTitle: '',
       columnWidth: '0px',
       useCellStyleFunction: false,
       cellStyleFunction: '',
@@ -52,6 +53,7 @@ export class AlarmsTableKeySettingsComponent extends WidgetSettingsComponent {
 
   protected onSettingsSet(settings: WidgetSettings) {
     this.alarmsTableKeySettingsForm = this.fb.group({
+      customTitle: [settings.customTitle, []],
       columnWidth: [settings.columnWidth, []],
       useCellStyleFunction: [settings.useCellStyleFunction, []],
       cellStyleFunction: [settings.cellStyleFunction, [Validators.required]],

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

@@ -16,6 +16,10 @@
 
 -->
 <section class="tb-widget-settings" [formGroup]="entitiesTableKeySettingsForm" fxLayout="column">
+  <mat-form-field fxFlex class="mat-block">
+    <mat-label translate>widgets.table.custom-title</mat-label>
+    <input matInput formControlName="customTitle">
+  </mat-form-field>
   <mat-form-field fxFlex class="mat-block">
     <mat-label translate>widgets.table.column-width</mat-label>
     <input matInput formControlName="columnWidth">

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

@@ -40,6 +40,7 @@ export class EntitiesTableKeySettingsComponent extends WidgetSettingsComponent {
 
   protected defaultSettings(): WidgetSettings {
     return {
+      customTitle: '',
       columnWidth: '0px',
       useCellStyleFunction: false,
       cellStyleFunction: '',
@@ -52,6 +53,7 @@ export class EntitiesTableKeySettingsComponent extends WidgetSettingsComponent {
 
   protected onSettingsSet(settings: WidgetSettings) {
     this.entitiesTableKeySettingsForm = this.fb.group({
+      customTitle: [settings.customTitle, []],
       columnWidth: [settings.columnWidth, []],
       useCellStyleFunction: [settings.useCellStyleFunction, []],
       cellStyleFunction: [settings.cellStyleFunction, [Validators.required]],

ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts

@@ -43,6 +43,7 @@ export interface TableWidgetSettings {
 }
 
 export interface TableWidgetDataKeySettings {
+  customTitle?: string;
   columnWidth?: string;
   useCellStyleFunction: boolean;
   cellStyleFunction?: string;
@@ -475,3 +476,10 @@ export function constructTableCssString(widgetConfig: WidgetConfig): string {
     '}';
   return cssString;
 }
+
+export function getHeaderTitle(dataKey: DataKey, keySettings: TableWidgetDataKeySettings, utils: UtilsService) {
+  if (isDefined(keySettings.customTitle) && isNotEmptyStr(keySettings.customTitle)) {
+    return utils.customTranslation(keySettings.customTitle, keySettings.customTitle);
+  }
+  return dataKey.label;
+}

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

@@ -4679,6 +4679,7 @@
             "entity-label-column-title": "Entity label column title",
             "display-entity-type": "Display entity type column",
             "default-sort-order": "Default sort order",
+            "custom-title": "Custom header title",
             "column-width": "Column width (px or %)",
             "default-column-visibility": "Default column visibility",
             "column-visibility-visible": "Visible",