refactoring

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html

@@ -53,8 +53,8 @@
                 <div
                   [innerHTML]="
                   !prop.isExtra
-                    ? (row['_' + prop.name]?.value | async | abpUtcToLocal)
-                    : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal) | abpLocalization)
+                    ? (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type)
+                    : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type) | abpLocalization)
                 "
                   (click)="
                   prop.action && prop.action({ getInjected: getInjected, record: row, index: i })

npm/ng-packs/packages/core/src/lib/pipes/utc-to-local.pipe.ts

@@ -15,43 +15,20 @@ export class UtcToLocalPipe implements PipeTransform {
 
   transform(
     value: string | Date | null | undefined,
-    propType: 'date' | 'datetime' | 'time',
+    type: 'date' | 'datetime' | 'time',
   ): string | Date {
     if (!value) return '';
 
-    try {
-      let format: string;
-      switch (propType) {
-        case 'date':
-          format = getShortDateFormat(this.configState);
-          break;
-        case 'datetime':
-          format = getShortDateShortTimeFormat(this.configState);
-          break;
-        case 'time':
-          format = getShortTimeFormat(this.configState);
-          break;
-        default:
-          format = getShortDateShortTimeFormat(this.configState);
-      }
+    const date = new Date(value);
+    if (isNaN(date.getTime())) return '';
 
+    const format = this.getFormat(type);
+
+    try {
       if (this.timezoneService.isUtcClockEnabled) {
         const timeZone = this.timezoneService.timezone;
         const options: Intl.DateTimeFormatOptions = { timeZone };
-        let localeStr: string;
-        switch (propType) {
-          case 'date':
-            localeStr = new Date(value).toLocaleDateString(this.locale, options);
-            break;
-          case 'datetime':
-            localeStr = new Date(value).toLocaleString(this.locale, options);
-            break;
-          case 'time':
-            localeStr = new Date(value).toLocaleTimeString(this.locale, options);
-            break;
-          default:
-            localeStr = new Date(value).toLocaleString(this.locale, options);
-        }
+        const localeStr = this.formatWithIntl(date, type, options);
         return formatDate(localeStr, format, this.locale);
       } else {
         return formatDate(value, format, this.locale, format);
@@ -60,4 +37,32 @@ export class UtcToLocalPipe implements PipeTransform {
       return value;
     }
   }
+
+  private getFormat(propType: 'date' | 'datetime' | 'time'): string {
+    switch (propType) {
+      case 'date':
+        return getShortDateFormat(this.configState);
+      case 'time':
+        return getShortTimeFormat(this.configState);
+      case 'datetime':
+      default:
+        return getShortDateShortTimeFormat(this.configState);
+    }
+  }
+
+  private formatWithIntl(
+    date: Date,
+    propType: 'date' | 'datetime' | 'time',
+    options: Intl.DateTimeFormatOptions,
+  ): string {
+    switch (propType) {
+      case 'date':
+        return date.toLocaleDateString(this.locale, options);
+      case 'time':
+        return date.toLocaleTimeString(this.locale, options);
+      case 'datetime':
+      default:
+        return date.toLocaleString(this.locale, options);
+    }
+  }
 }