UI: Refactoring timestamp format

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

@@ -30,25 +30,14 @@
   </div>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.table.columns</div>
-    <mat-slide-toggle class="mat-slide"  formControlName="showTimestamp">
-      {{ 'widgets.table.display-timestamp' | translate }}
-    </mat-slide-toggle>
-    <mat-slide-toggle class="mat-slide"  formControlName="showMilliseconds">
-      {{ 'widgets.table.display-milliseconds' | translate }}
-    </mat-slide-toggle>
-    <div class="tb-form-row space-between column-xs">
-      <div translate>widgets.table.time-format</div>
-      <mat-form-field appearance="outline" subscriptSizing="dynamic">
-        <mat-select formControlName="timeFormat">
-          <mat-option [value]="'12h'">
-            {{ 'widgets.table.time-format-12h' | translate }}
-          </mat-option>
-          <mat-option [value]="'24h'">
-            {{ 'widgets.table.time-format-24h' | translate }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
+
+    <div  class="tb-form-row column-xs">
+      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTimestamp">
+        {{ 'widgets.table.display-timestamp' | translate }}
+      </mat-slide-toggle>
+      <tb-date-format-select fxFlex [dateFormatList]="dateFormatList" formControlName="dateFormat"></tb-date-format-select>
     </div>
+
     <mat-slide-toggle class="mat-slide"  formControlName="enableStickyAction">
       {{ 'widgets.table.enable-sticky-action' | translate }}
     </mat-slide-toggle>

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

@@ -19,6 +19,7 @@ import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.m
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
+import { customDateFormat, simpleDateFormat } from '@shared/models/widget-settings.models';
 
 @Component({
   selector: 'tb-timeseries-table-widget-settings',
@@ -29,6 +30,10 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon
 
   timeseriesTableWidgetSettingsForm: UntypedFormGroup;
 
+  dateFormatList = ['yyyy-MM-dd HH:mm:ss', 'yyyy-MM-dd HH:mm:ss.SSS', 'MMM dd yyyy HH:mm', 'dd MMM yyyy HH:mm', 'yyyy MMM dd HH:mm',
+    'MM/dd/yyyy HH:mm', 'dd/MM/yyyy HH:mm', 'yyyy/MM/dd HH:mm:ss']
+    .map(f => simpleDateFormat(f)).concat([customDateFormat('EEE, MMMM dd, yyyy')]);
+
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
     super(store);
@@ -47,8 +52,7 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon
       showCellActionsMenu: true,
       reserveSpaceForHiddenAction: 'true',
       showTimestamp: true,
-      showMilliseconds: false,
-      timeFormat: '24h',
+      dateFormat: {format: 'yyyy-MM-dd HH:mm:ss'},
       displayPagination: true,
       useEntityLabel: false,
       defaultPageSize: 10,
@@ -60,6 +64,12 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon
   }
 
   protected onSettingsSet(settings: WidgetSettings) {
+    // For backward compatibility
+    const dateFormat = settings.dateFormat;
+    if (settings?.showMilliseconds) {
+      dateFormat.format = 'yyyy-MM-dd HH:mm:ss.SSS';
+    }
+
     this.timeseriesTableWidgetSettingsForm = this.fb.group({
       enableSearch: [settings.enableSearch, []],
       enableSelectColumnDisplay: [settings.enableSelectColumnDisplay, []],
@@ -68,8 +78,7 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon
       showCellActionsMenu: [settings.showCellActionsMenu, []],
       reserveSpaceForHiddenAction: [settings.reserveSpaceForHiddenAction, []],
       showTimestamp: [settings.showTimestamp, []],
-      showMilliseconds: [settings.showMilliseconds, []],
-      timeFormat: [settings.timeFormat, []],
+      dateFormat: [dateFormat, []],
       displayPagination: [settings.displayPagination, []],
       useEntityLabel: [settings.useEntityLabel, []],
       defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]],

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-select.component.ts

@@ -50,7 +50,17 @@ export class DateFormatSelectComponent implements OnInit, ControlValueAccessor {
   @Input()
   disabled: boolean;
 
-  dateFormatList = dateFormats;
+  private dateFormatValue = dateFormats;
+  get dateFormatList(): DateFormatSettings[] {
+    return this.dateFormatValue;
+  }
+
+  @Input()
+  set dateFormatList(value) {
+    if (value && value.length) {
+      this.dateFormatValue = value;
+    }
+  }
 
   dateFormatsCompare = compareDateFormats;
 

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

@@ -94,12 +94,13 @@ import {
 import { ComponentPortal } from '@angular/cdk/portal';
 import { FormBuilder } from '@angular/forms';
 import { DEFAULT_OVERLAY_POSITIONS } from '@shared/models/overlay.models';
+import { DateFormatSettings } from '@shared/models/widget-settings.models';
 
 export interface TimeseriesTableWidgetSettings extends TableWidgetSettings {
   showTimestamp: boolean;
   showMilliseconds: boolean;
   hideEmptyLines: boolean;
-  timeFormat: '12h' | '24h';
+  dateFormat: DateFormatSettings;
 }
 
 interface TimeseriesWidgetLatestDataKeySettings extends TableWidgetDataKeySettings {
@@ -321,8 +322,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
     this.hideEmptyLines = isDefined(this.settings.hideEmptyLines) ? this.settings.hideEmptyLines : false;
     this.useEntityLabel = isDefined(this.widgetConfig.settings.useEntityLabel) ? this.widgetConfig.settings.useEntityLabel : false;
     this.showTimestamp = this.settings.showTimestamp !== false;
-    const timeFormat: '12h' | '24h' = isDefined(this.settings.timeFormat) ? this.settings.timeFormat : '24h';
-    this.dateFormatFilter = `yyyy-MM-dd ${timeFormat === '24h' ? 'HH' : 'hh'}:mm:ss${this.settings.showMilliseconds ? '.SSS' : ''}`;
+    this.dateFormatFilter = isDefined(this.settings.dateFormat?.format) ? this.settings.dateFormat?.format : 'yyyy-MM-dd HH:mm:ss';
 
     this.rowStylesInfo = getRowStyleInfo(this.settings, 'rowData, ctx');
 

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

@@ -5692,7 +5692,6 @@
             "show-empty-space-hidden-action": "Mostrar espai buit en lloc de cel·la oculta",
             "dont-reserve-space-hidden-action": "No reserveu espai per als botons en cel·la oculta",
             "display-timestamp": "Mostra columna timestamp",
-            "display-milliseconds": "Mostrar mil·lisegons",
             "display-pagination": "Mostrar pàgines",
             "default-page-size": "Mida de pàgina per defecte",
             "use-entity-label-tab-name": "Usar etiqueta important al nom de la taula",

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

@@ -6261,8 +6261,7 @@
             "hidden-cell-button-display-mode": "Hidden cell button actions display mode",
             "show-empty-space-hidden-action": "Show empty space instead of hidden cell button action",
             "dont-reserve-space-hidden-action": "Don't reserve space for hidden action buttons",
-            "display-timestamp": "Display timestamp column",
-            "display-milliseconds": "Display timestamp milliseconds",
+            "display-timestamp": "Timestamp",
             "display-pagination": "Display pagination",
             "default-page-size": "Default page size",
             "use-entity-label-tab-name": "Use entity label in tab name",

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

@@ -6066,7 +6066,6 @@
             "show-empty-space-hidden-action": "Mostrar espacio vacío en lugar de celda oculta",
             "dont-reserve-space-hidden-action": "No reservar espacio para los botones en celda oculta",
             "display-timestamp": "Mostrar columna timestamp",
-            "display-milliseconds": "Mostrar milisegundos",
             "display-pagination": "Mostrar páginas",
             "default-page-size": "Tamaño de página por defecto",
             "use-entity-label-tab-name": "Usar etiqueta de entidad en el nombre de la tabla",

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

@@ -5072,7 +5072,6 @@
             "show-empty-space-hidden-action": "显示空白区域而不是隐藏单元格按钮操作",
             "dont-reserve-space-hidden-action": "不为隐藏的操作按钮预留空间",
             "display-timestamp": "显示时间戳列",
-            "display-milliseconds": "显示时间戳毫秒",
             "display-pagination": "显示分页",
             "default-page-size": "默认页面大小",
             "use-entity-label-tab-name": "在选项卡名称中使用实体标签",

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

@@ -4476,7 +4476,6 @@
             "show-empty-space-hidden-action": "顯示空格而不是隱藏儲存格的按鈕動作",
             "dont-reserve-space-hidden-action": "不要為隱藏的動作按鈕保留空格",
             "display-timestamp": "顯示時間戳列",
-            "display-milliseconds": "顯示毫秒時間戳",
             "display-pagination": "顯示分頁",
             "default-page-size": "預設頁面尺寸",
             "use-entity-label-tab-name": "在分頁標籤名稱中使用實體標籤",