abp-extensible-table props validation according to timezone

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

@@ -49,18 +49,33 @@
         <ng-container *abpPermission="prop.permission; runChangeDetection: false">
           <ng-container *abpVisible="row['_' + prop.name]?.visible">
             @if (!row['_' + prop.name].component) {
-              <div
+              @if (prop.type === 'datetime') {
-                [innerHTML]="
+                <div
+                  [innerHTML]="
+                  !prop.isExtra
+                    ? (row['_' + prop.name]?.value | async | abpUtcToLocal)
+                    : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal) | abpLocalization)
+                "
+                  (click)="
+                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })
+                "
+                  [ngClass]="entityPropTypeClasses[prop.type]"
+                  [class.pointer]="prop.action"
+                ></div>
+              } @else {
+                <div
+                  [innerHTML]="
                   !prop.isExtra
                     ? (row['_' + prop.name]?.value | async)
                     : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)
                 "
-                (click)="
+                  (click)="
                   prop.action && prop.action({ getInjected: getInjected, record: row, index: i })
                 "
-                [ngClass]="entityPropTypeClasses[prop.type]"
+                  [ngClass]="entityPropTypeClasses[prop.type]"
-                [class.pointer]="prop.action"
+                  [class.pointer]="prop.action"
-              ></div>
+                ></div>
+              }
             } @else {
               <ng-container
                 *ngComponentOutlet="

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

@@ -237,8 +237,4 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
       this.cdr.markForCheck();
     });
   }
-
-  isDateType(prop: EntityProp<R>) {
-    return prop.type === ePropType.Date || prop.type === ePropType.DateTime;
-  }
 }

npm/ng-packs/packages/core/src/lib/core.module.ts

@@ -3,6 +3,7 @@ import {
   provideHttpClient,
   withInterceptorsFromDi,
   withXsrfConfiguration,
+  HTTP_INTERCEPTORS,
 } from '@angular/common/http';
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -31,6 +32,7 @@ import { ShortDatePipe } from './pipes/short-date.pipe';
 import { SafeHtmlPipe } from './pipes/safe-html.pipe';
 import { provideAbpCoreChild, provideAbpCore, withOptions } from './providers';
 import { UtcToLocalPipe } from './pipes';
+import { TimezoneInterceptor } from './interceptors';
 
 const standaloneDirectives = [
   AutofocusDirective,
@@ -88,7 +90,15 @@ const standaloneDirectives = [
     ShortTimePipe,
     ShortDatePipe,
   ],
-  providers: [LocalizationPipe, provideHttpClient(withInterceptorsFromDi())],
+  providers: [
+    LocalizationPipe,
+    provideHttpClient(withInterceptorsFromDi()),
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: TimezoneInterceptor,
+      multi: true,
+    },
+  ],
 })
 export class BaseCoreModule {}
 

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

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

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

@@ -10,8 +10,7 @@ export class UtcToLocalPipe implements PipeTransform {
   protected readonly configState = inject(ConfigStateService);
   protected readonly localizationService = inject(LocalizationService);
 
-  transform(value: string | Date | null | undefined, apply: boolean): string | Date {
+  transform(value: string | Date | null | undefined): string | Date {
-    if (!apply) return value;
     if (!value) return '';
 
     try {
@@ -21,11 +20,16 @@ export class UtcToLocalPipe implements PipeTransform {
         // Invalid date
         return '';
       }
+
       const localization = this.configState.getOne('localization');
-      return dateInput.toLocaleString(localization?.currentCulture?.cultureName ?? 'en-US', {
+      const locale = localization?.currentCulture?.cultureName ?? 'en-US';
-        timeZone: this.timezoneService.getTimezone(),
+      const options: Intl.DateTimeFormatOptions = this.timezoneService.isUtcClockEnabled
-      });
+        ? { timeZone: this.timezoneService.getTimezone() }
+        : undefined;
+      console.log(locale, options);
+      return dateInput.toLocaleString(locale, options);
     } catch (err) {
+      console.log(err);
       return value;
     }
   }

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

@@ -13,8 +13,8 @@ export class TimezoneService {
   public isUtcClockEnabled: boolean | undefined;
 
   constructor() {
-    this.configState.getOne$('timing').subscribe(timezoneSettings => {
+    this.configState.getOne$('setting').subscribe(settings => {
-      this.timeZoneNameFromSettings = timezoneSettings?.timeZone?.iana?.timeZoneName;
+      this.timeZoneNameFromSettings = settings?.values?.['Abp.Timing.TimeZone'];
     });
     this.configState.getOne$('clock').subscribe(clock => {
       this.isUtcClockEnabled = clock?.kind === 'Utc';
@@ -26,8 +26,10 @@ export class TimezoneService {
   }
 
   getTimezone(): string {
-    const fromCookie = this.getCookie(this.cookieKey);
+    if (!this.isUtcClockEnabled) {
-    return this.timeZoneNameFromSettings || fromCookie || this.getBrowserTimezone();
+      return this.getBrowserTimezone();
+    }
+    return this.timeZoneNameFromSettings || this.getBrowserTimezone();
   }
 
   setTimezone(timezone: string): void {