Unify date formats and fix of manually editing dates

CHANGELOG.md

@@ -21,6 +21,7 @@ the detailed section referring to by linking pull requests or issues.
 #### Patch
 
 - Check contract limits before negotiating a new one.
+- Date and time related fixes, unified date format.
 - Enhance EDC UI terminologies for create data offer tab
 
 ## [v4.1.2] - 2024-08-20

src/app/app.module.ts

@@ -1,24 +1,5 @@
 import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
 import {NgModule} from '@angular/core';
-import {MatButtonModule} from '@angular/material/button';
-import {MatCardModule} from '@angular/material/card';
-import {MAT_DATE_LOCALE, MatNativeDateModule} from '@angular/material/core';
-import {MatDatepickerModule} from '@angular/material/datepicker';
-import {MatDialogModule} from '@angular/material/dialog';
-import {
-  MAT_FORM_FIELD_DEFAULT_OPTIONS,
-  MatFormFieldDefaultOptions,
-} from '@angular/material/form-field';
-import {MatIconModule} from '@angular/material/icon';
-import {MatListModule} from '@angular/material/list';
-import {MatSidenavModule} from '@angular/material/sidenav';
-import {MatSnackBarModule} from '@angular/material/snack-bar';
-import {MatToolbarModule} from '@angular/material/toolbar';
-import {
-  MAT_TOOLTIP_DEFAULT_OPTIONS,
-  MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY,
-  MatTooltipDefaultOptions,
-} from '@angular/material/tooltip';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {NgxsModule} from '@ngxs/store';
@@ -28,6 +9,7 @@ import {AppComponent} from './app.component';
 import {PageNotFoundComponent} from './component-library/error-404-component/page-not-found.component';
 import {provideAppConfig} from './core/config/app-config-initializer';
 import {ApiKeyInterceptor} from './core/services/api/api-key.interceptor';
+import {SharedModule} from './shared.module';
 
 @NgModule({
   imports: [
@@ -36,17 +18,7 @@ import {ApiKeyInterceptor} from './core/services/api/api-key.interceptor';
     BrowserModule,
     HttpClientModule,
 
-    // Angular Material
-    MatButtonModule,
-    MatCardModule,
-    MatDatepickerModule,
-    MatDialogModule,
-    MatIconModule,
-    MatListModule,
-    MatNativeDateModule,
-    MatSidenavModule,
-    MatSnackBarModule,
-    MatToolbarModule,
+    SharedModule,
 
     // NgXs
     NgxsModule.forRoot([]),
@@ -62,22 +34,6 @@ import {ApiKeyInterceptor} from './core/services/api/api-key.interceptor';
     provideAppConfig(),
 
     {provide: HTTP_INTERCEPTORS, multi: true, useClass: ApiKeyInterceptor},
-
-    {provide: MAT_DATE_LOCALE, useValue: 'en-GB'},
-    {
-      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
-      useValue: {
-        appearance: 'outline',
-        color: 'accent',
-      } as MatFormFieldDefaultOptions,
-    },
-    {
-      provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
-      useValue: <MatTooltipDefaultOptions>{
-        ...MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY(),
-        disableTooltipInteractivity: true,
-      },
-    },
   ],
   bootstrap: [AppComponent],
 })

src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts

@@ -268,7 +268,7 @@ export class AssetPropertyGridGroupBuilder {
         icon: 'category',
         label: 'Signed',
         ...this.propertyGridUtils.guessValue(
-          this.propertyGridUtils.formatDate(
+          this.propertyGridUtils.formatDateWithTime(
             contractAgreement.contractSigningDate,
           ),
         ),
@@ -404,14 +404,16 @@ export class AssetPropertyGridGroupBuilder {
     end: Date | undefined,
   ): string {
     if (!end) {
-      return `Start: ${start!.toLocaleDateString()}`;
+      return `Start: ${this.propertyGridUtils.formatDate(start)}`;
     }
 
     if (!start) {
-      return `End: ${end.toLocaleDateString()}`;
+      return `End: ${this.propertyGridUtils.formatDate(end)}`;
     }
 
-    return `${start.toLocaleDateString()} - ${end.toLocaleDateString()}`;
+    return `${this.propertyGridUtils.formatDate(
+      start,
+    )} - ${this.propertyGridUtils.formatDate(end)}`;
   }
 
   buildOnRequestContactInformation(

src/app/component-library/policy-editor/model/policy-form-adapter.ts

@@ -55,7 +55,7 @@ export const localDateAdapter: PolicyFormAdapter<Date | null> = {
       if (!value) {
         return value;
       }
-      return format(new Date(value), 'yyyy-MM-dd');
+      return format(new Date(value), 'dd/MM/yyyy');
     } catch (e) {
       return '' + value;
     }

src/app/component-library/policy-editor/policy-editor.module.ts

@@ -1,17 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatButtonModule} from '@angular/material/button';
-import {MatChipsModule} from '@angular/material/chips';
-import {MatDatepickerModule} from '@angular/material/datepicker';
-import {MatDialogModule} from '@angular/material/dialog';
-import {MatDividerModule} from '@angular/material/divider';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatIconModule} from '@angular/material/icon';
-import {MatInputModule} from '@angular/material/input';
-import {MatMenuModule} from '@angular/material/menu';
-import {MatSelectModule} from '@angular/material/select';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {SharedModule} from 'src/app/shared.module';
 import {PipesAndDirectivesModule} from '../pipes-and-directives/pipes-and-directives.module';
 import {ParticipantIdSelectComponent} from './editor/controls/participant-id-select/participant-id-select.component';
 import {PolicyFormAddMenuComponent} from './editor/policy-form-add-menu/policy-form-add-menu.component';
@@ -34,18 +24,7 @@ import {PolicyRendererComponent} from './renderer/policy-renderer/policy-rendere
     ReactiveFormsModule,
 
     // Angular Material
-    MatChipsModule,
-    MatTooltipModule,
-    MatButtonModule,
-    MatDialogModule,
-    MatDividerModule,
-    MatDatepickerModule,
-    MatFormFieldModule,
-    MatMenuModule,
-    MatSelectModule,
-    MatTooltipModule,
-    MatInputModule,
-    MatIconModule,
+    SharedModule,
 
     // EDC UI Modules
     PipesAndDirectivesModule,

src/app/component-library/property-grid/property-grid/property-grid-field.service.ts

@@ -17,11 +17,19 @@ export class PropertyGridFieldService {
     };
   }
 
+  formatDateWithTime(date: Date | null | undefined): string {
+    if (!date) {
+      return '';
+    }
+
+    return formatDate(date, 'dd/MM/yyyy HH:mm:ss', this.locale);
+  }
+
   formatDate(date: Date | null | undefined): string {
     if (!date) {
       return '';
     }
 
-    return formatDate(date, 'yyyy-MM-dd HH:mm:ss', this.locale);
+    return formatDate(date, 'dd/MM/yyyy', this.locale);
   }
 }

src/app/component-library/ui-elements/ago/ago.component.ts

@@ -8,7 +8,7 @@ import {Component, Input} from '@angular/core';
 @Component({
   selector: 'ago',
   template: `<span
-    [matTooltip]="(date | date : 'EEEE yyyy-MM-dd hh:mm') ?? ''"
+    [matTooltip]="(date | date : 'EEEE dd/MM/yyyy HH:mm') ?? ''"
     >{{ date | ago | async }}</span
   >`,
 })

src/app/core/adapters/custom-date-adapter.ts

@@ -0,0 +1,21 @@
+import {NativeDateAdapter} from '@angular/material/core';
+import {isValid, parse as parseDate} from 'date-fns';
+import {format as formateDate} from 'date-fns-tz';
+
+export class CustomDateAdapter extends NativeDateAdapter {
+  parse(value: any): Date | null {
+    if (typeof value === 'string' && value.indexOf('/') > -1) {
+      const parsedDate = parseDate(value, 'dd/MM/yyyy', new Date());
+      return isValid(parsedDate) ? parsedDate : null;
+    }
+
+    const timestamp = typeof value === 'number' ? value : Date.parse(value);
+    return isNaN(timestamp) ? null : new Date(timestamp);
+  }
+
+  format(date: Date, displayFormat: Object): string {
+    return formateDate(date, 'dd/MM/yyyy', {
+      timeZone: 'UTC',
+    });
+  }
+}

src/app/core/services/api/fake-backend/connector-fake-impl/contract-agreement-fake-service.ts

@@ -71,7 +71,7 @@ let contractAgreements: ContractAgreementCard[] = [
     direction: 'CONSUMING',
     counterPartyAddress: 'http://edc2:11003/api/v1/ids/data',
     counterPartyId: 'MDSL1234XX.C1234XX',
-    contractSigningDate: new Date('2022-03-25T11:18:59.659Z'),
+    contractSigningDate: new Date('2022-03-25T14:18:59.659Z'),
     asset: TestAssets.toDummyAsset(TestAssets.boring),
     contractPolicy: TestPolicies.connectorRestricted,
     terminationInformation: undefined,

src/app/core/services/api/fake-backend/connector-fake-impl/data/test-policies.ts

@@ -26,12 +26,12 @@ export namespace TestPolicies {
       constraint(
         policyLeftExpressions.policyEvaluationTime,
         'GEQ',
-        '2021-01-01',
+        '2020-12-31T23:00:00.000Z',
       ),
       constraint(
         policyLeftExpressions.policyEvaluationTime,
         'LT',
-        '2025-01-01',
+        '2024-12-31T23:00:00.000Z',
       ),
       multi(
         'OR',

src/app/shared.module.ts

@@ -0,0 +1,87 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
+import {MatChipsModule} from '@angular/material/chips';
+import {
+  DateAdapter,
+  MAT_DATE_LOCALE,
+  MatNativeDateModule,
+} from '@angular/material/core';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatDividerModule} from '@angular/material/divider';
+import {
+  MAT_FORM_FIELD_DEFAULT_OPTIONS,
+  MatFormFieldDefaultOptions,
+  MatFormFieldModule,
+} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {MatListModule} from '@angular/material/list';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatSelectModule} from '@angular/material/select';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {
+  MAT_TOOLTIP_DEFAULT_OPTIONS,
+  MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY,
+  MatTooltipDefaultOptions,
+  MatTooltipModule,
+} from '@angular/material/tooltip';
+import {CustomDateAdapter} from './core/adapters/custom-date-adapter';
+
+const MODULES = [
+  MatButtonModule,
+  MatCardModule,
+  MatChipsModule,
+  MatDatepickerModule,
+  MatDialogModule,
+  MatDividerModule,
+  MatFormFieldModule,
+  MatIconModule,
+  MatInputModule,
+  MatListModule,
+  MatMenuModule,
+  MatNativeDateModule,
+  MatSelectModule,
+  MatSidenavModule,
+  MatSnackBarModule,
+  MatToolbarModule,
+  MatTooltipModule,
+];
+
+const COMPONENTS: NgModule['declarations'] = [];
+
+@NgModule({
+  imports: [
+    // Angular
+    CommonModule,
+
+    // Angular Material
+    ...MODULES,
+  ],
+  exports: [...MODULES, ...COMPONENTS],
+  declarations: COMPONENTS,
+  providers: [
+    {provide: DateAdapter, useClass: CustomDateAdapter},
+
+    {provide: MAT_DATE_LOCALE, useValue: 'en-GB'},
+    {
+      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+      useValue: {
+        appearance: 'outline',
+        color: 'accent',
+      } as MatFormFieldDefaultOptions,
+    },
+    {
+      provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
+      useValue: <MatTooltipDefaultOptions>{
+        ...MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY(),
+        disableTooltipInteractivity: true,
+      },
+    },
+  ],
+})
+export class SharedModule {}