refactoring

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

@@ -49,7 +49,7 @@
         <ng-container *abpPermission="prop.permission; runChangeDetection: false">
           <ng-container *abpVisible="row['_' + prop.name]?.visible">
             @if (!row['_' + prop.name].component) {
-              @if (prop.type === 'datetime') {
+              @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {
                 <div
                   [innerHTML]="
                   !prop.isExtra

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

@@ -14,7 +14,7 @@ import {
   TemplateRef,
   TrackByFunction,
 } from '@angular/core';
-import { AsyncPipe, formatDate, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
+import { AsyncPipe, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 
 import { Observable, filter, map } from 'rxjs';
 
@@ -24,13 +24,11 @@ import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import {
   ABP,
   ConfigStateService,
-  getShortDateFormat,
-  getShortDateShortTimeFormat,
-  getShortTimeFormat,
   ListService,
   LocalizationModule,
   PermissionDirective,
   PermissionService,
+  TimezoneService,
   UtcToLocalPipe,
 } from '@abp/ng.core';
 import {
@@ -79,6 +77,7 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
   protected readonly cdr = inject(ChangeDetectorRef);
   protected readonly locale = inject(LOCALE_ID);
   protected readonly config = inject(ConfigStateService);
+  protected readonly timeZoneService = inject(TimezoneService);
   protected readonly entityPropTypeClasses = inject(ENTITY_PROP_TYPE_CLASSES);
   protected readonly permissionService = inject(PermissionService);
 
@@ -136,10 +135,6 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
     (this.columnWidths as any) = widths;
   }
 
-  private getDate(value: Date | undefined, format: string | undefined) {
-    return value && format ? formatDate(value, format, this.locale) : '';
-  }
-
   private getIcon(value: boolean) {
     return value
       ? '<div class="text-success"><i class="fa fa-check" aria-hidden="true"></i></div>'
@@ -158,12 +153,6 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
         switch (prop.type) {
           case ePropType.Boolean:
             return this.getIcon(value);
-          case ePropType.Date:
-            return this.getDate(value, getShortDateFormat(this.config));
-          case ePropType.Time:
-            return this.getDate(value, getShortTimeFormat(this.config));
-          case ePropType.DateTime:
-            return this.getDate(value, getShortDateShortTimeFormat(this.config));
           case ePropType.Enum:
             return this.getEnum(value, prop.enumList || []);
           default:

npm/ng-packs/packages/core/src/lib/interceptors/timezone.interceptor.ts

@@ -10,8 +10,7 @@ export class TimezoneInterceptor implements HttpInterceptor {
   protected readonly timezoneService = inject(TimezoneService);
 
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    const timezone = this.timezoneService.getTimezone();
+    const timezone = this.timezoneService.timezone;
-    console.log(timezone);
     if (timezone) {
       req = req.clone({
         setHeaders: {

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

@@ -1,5 +1,7 @@
-import { Pipe, PipeTransform, Injectable, inject } from '@angular/core';
+import { Pipe, PipeTransform, Injectable, inject, LOCALE_ID } from '@angular/core';
 import { ConfigStateService, LocalizationService, TimezoneService } from '../services';
+import { getShortDateFormat, getShortDateShortTimeFormat, getShortTimeFormat } from '../utils';
+import { formatDate } from '@angular/common';
 
 @Injectable()
 @Pipe({
@@ -9,23 +11,51 @@ export class UtcToLocalPipe implements PipeTransform {
   protected readonly timezoneService = inject(TimezoneService);
   protected readonly configState = inject(ConfigStateService);
   protected readonly localizationService = inject(LocalizationService);
+  protected readonly locale = inject(LOCALE_ID);
 
-  transform(value: string | Date | null | undefined): string | Date {
+  transform(
+    value: string | Date | null | undefined,
+    propType: 'date' | 'datetime' | 'time',
+  ): string | Date {
     if (!value) return '';
 
     try {
-      const dateInput = new Date(value);
+      let format: string;
-
+      switch (propType) {
-      if (isNaN(dateInput.getTime())) {
+        case 'date':
-        return '';
+          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 localization = this.configState.getOne('localization');
+      if (this.timezoneService.isUtcClockEnabled) {
-      const locale = localization?.currentCulture?.cultureName ?? 'en-US';
+        const timeZone = this.timezoneService.timezone;
-      const options: Intl.DateTimeFormatOptions = this.timezoneService.isUtcClockEnabled
+        const options: Intl.DateTimeFormatOptions = { timeZone };
-        ? { timeZone: this.timezoneService.getTimezone() }
+        let localeStr: string;
-        : undefined;
+        switch (propType) {
-      return dateInput.toLocaleString(locale, options);
+          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);
+        }
+        return formatDate(localeStr, format, this.locale);
+      } else {
+        return formatDate(value, format, this.locale, format);
+      }
     } catch (err) {
       return value;
     }

npm/ng-packs/packages/core/src/lib/services/timezone.service.ts

@@ -25,7 +25,7 @@ export class TimezoneService {
     return Intl.DateTimeFormat().resolvedOptions().timeZone;
   }
 
-  getTimezone(): string {
+  get timezone(): string {
     if (!this.isUtcClockEnabled) {
       return this.getBrowserTimezone();
     }