From 4d57345cabfeef58db5a293dcef3f50b85085f28 Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Wed, 9 Apr 2025 16:57:54 +0300
Subject: [PATCH] abp-extensible-table props validation according to timezone

---
 .../extensible-table.component.html           | 27 ++++++++++++++-----
 .../extensible-table.component.ts             |  4 ---
 .../packages/core/src/lib/core.module.ts      | 12 ++++++++-
 .../lib/interceptors/timezone.interceptor.ts  |  4 +--
 .../core/src/lib/pipes/utc-to-local.pipe.ts   | 14 ++++++----
 .../core/src/lib/services/timezone.service.ts | 10 ++++---
 6 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html
index 471aad0f15..9104caf6ce 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html
+++ b/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
-                [innerHTML]="
+              @if (prop.type === 'datetime') {
+                <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]"
-                [class.pointer]="prop.action"
-              ></div>
+                  [ngClass]="entityPropTypeClasses[prop.type]"
+                  [class.pointer]="prop.action"
+                ></div>
+              }
             } @else {
               <ng-container
                 *ngComponentOutlet="
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts
index 94b73dba1d..e80c480b15 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts
+++ b/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;
-  }
 }
diff --git a/npm/ng-packs/packages/core/src/lib/core.module.ts b/npm/ng-packs/packages/core/src/lib/core.module.ts
index 4238bcdb1e..33d7f0ad94 100644
--- a/npm/ng-packs/packages/core/src/lib/core.module.ts
+++ b/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 {}
 
diff --git a/npm/ng-packs/packages/core/src/lib/interceptors/timezone.interceptor.ts b/npm/ng-packs/packages/core/src/lib/interceptors/timezone.interceptor.ts
index 10d32a3672..1789eff2fb 100644
--- a/npm/ng-packs/packages/core/src/lib/interceptors/timezone.interceptor.ts
+++ b/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: {
diff --git a/npm/ng-packs/packages/core/src/lib/pipes/utc-to-local.pipe.ts b/npm/ng-packs/packages/core/src/lib/pipes/utc-to-local.pipe.ts
index aaa26eb873..200c9108f5 100644
--- a/npm/ng-packs/packages/core/src/lib/pipes/utc-to-local.pipe.ts
+++ b/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 {
-    if (!apply) return value;
+  transform(value: string | Date | null | undefined): string | Date {
     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', {
-        timeZone: this.timezoneService.getTimezone(),
-      });
+      const locale = localization?.currentCulture?.cultureName ?? 'en-US';
+      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;
     }
   }
diff --git a/npm/ng-packs/packages/core/src/lib/services/timezone.service.ts b/npm/ng-packs/packages/core/src/lib/services/timezone.service.ts
index a7ae4121b2..ee3587cfdf 100644
--- a/npm/ng-packs/packages/core/src/lib/services/timezone.service.ts
+++ b/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.timeZoneNameFromSettings = timezoneSettings?.timeZone?.iana?.timeZoneName;
+    this.configState.getOne$('setting').subscribe(settings => {
+      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);
-    return this.timeZoneNameFromSettings || fromCookie || this.getBrowserTimezone();
+    if (!this.isUtcClockEnabled) {
+      return this.getBrowserTimezone();
+    }
+    return this.timeZoneNameFromSettings || this.getBrowserTimezone();
   }
 
   setTimezone(timezone: string): void {