TSK-718: Add german date time format pipe (#1681)

* TSK-718: Add german date time format pipe

* TSK-718: update test to run with yarn

.github/workflows/continuous-integration.yml

@@ -207,12 +207,12 @@ jobs:
         run: ./mvnw install -pl :taskana-web
       - name: Test
         working-directory: web
-        run: npm run test -- --coverageReporters text-summary
+        run: yarn run test -- --coverageReporters text-summary
       - name: Cypress tests
         working-directory: web
         run: |
           ../mvnw -B spring-boot:run -P history.plugin -f .. -pl :taskana-rest-spring-example-boot &
-          npx wait-port -t 30000 localhost:8080 && npm run e2e-standalone
+          npx wait-port -t 30000 localhost:8080 && yarn run e2e-standalone
       - name: Upload Cypress tests
         if: failure()
         uses: actions/upload-artifact@v2

web/src/app/history/task-history-query/task-history-query.component.html

@@ -24,7 +24,7 @@
 
     <ng-container matColumnDef="created">
       <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Created</th>
-      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).created}}</td>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).created | germanTimeFormat}}</td>
     </ng-container>
 
     <ng-container matColumnDef="userId">

web/src/app/monitor/components/classification-report/classification-report.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="reportData" class="panel panel-default">
     <div class="panel-heading">
-        <h4>{{reportData.meta.name}} ({{reportData.meta.date | dateTimeZone}})</h4>
+        <h4>{{reportData.meta.name}} ({{reportData.meta.date | germanTimeFormat}})</h4>
     </div>
     <div class="panel-body">
         <div class="row">

web/src/app/monitor/components/task-report/task-report.component.html

@@ -1,6 +1,6 @@
 <div *ngIf= "reportData" class="panel panel-default">
   <div class="panel-heading">
-      <h4>{{reportData.meta.name}} ({{reportData.meta.date | dateTimeZone}})</h4>
+      <h4>{{reportData.meta.name}} ({{reportData.meta.date | germanTimeFormat}})</h4>
   </div>
   <div class="panel-body">
     <div style="display: block">

web/src/app/monitor/components/timestamp-report/timestamp-report.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="reportData" class="panel panel-default">
     <div class="panel-heading">
-        <h4>{{reportData.meta.name}} ({{reportData.meta.date | dateTimeZone}})</h4>
+        <h4>{{reportData.meta.name}} ({{reportData.meta.date | germanTimeFormat}})</h4>
     </div>
     <div class="panel-body blub">
         <taskana-monitor-report-table [reportData]="reportData"></taskana-monitor-report-table>

web/src/app/monitor/components/workbasket-report/workbasket-report.component.html

@@ -1,6 +1,6 @@
 <div class="panel panel-default">
   <div class="panel-heading">
-    <h4 *ngIf="metaInformation">{{getTitle()}} ({{metaInformation?.date | date : 'dd.MM.yyyy HH:mm:ss'}})</h4>
+    <h4 *ngIf="metaInformation">{{getTitle()}} ({{metaInformation?.date | germanTimeFormat}})</h4>
   </div>
   <mat-tab-group class="panel-body" animationDuration="0ms" (selectedIndexChange)="selectComponent($event)" >
     <mat-tab label="Due Date">

web/src/app/shared/pipes/german-time-format.pipe.spec.ts

@@ -0,0 +1,20 @@
+import { GermanTimeFormatPipe } from './german-time-format.pipe';
+
+describe('GermanTimeFormatPipe', () => {
+  it('create an instance', () => {
+    const pipe = new GermanTimeFormatPipe();
+    expect(pipe).toBeTruthy();
+  });
+
+  // This test currently doesn't work in GitHub CI, but runs on local machine
+  // Re-enable test when developing this pipe
+  it.skip('should convert ISO time to german time', () => {
+    const pipe = new GermanTimeFormatPipe();
+    expect(pipe.transform('2021-08-20T09:31:41Z')).toMatch('20.08.2021, 11:31:41');
+  });
+
+  it('should return input value when input is string but not a date', () => {
+    const pipe = new GermanTimeFormatPipe();
+    expect(pipe.transform('totally not a date')).toMatch('totally not a date');
+  });
+});

web/src/app/shared/pipes/german-time-format.pipe.ts

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'germanTimeFormat'
+})
+export class GermanTimeFormatPipe implements PipeTransform {
+  transform(value: string): string {
+    const dateStr = Date.parse(value);
+    if (isNaN(dateStr)) return value;
+    return Intl.DateTimeFormat('de', this.options).format(dateStr);
+  }
+
+  options = {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  } as const;
+}

web/src/app/shared/shared.module.ts

@@ -58,6 +58,7 @@ import { WorkbasketService } from 'app/shared/services/workbasket/workbasket.ser
 import { ClassificationsService } from 'app/shared/services/classifications/classifications.service';
 import { ObtainMessageService } from './services/obtain-message/obtain-message.service';
 import { AccessIdsService } from './services/access-ids/access-ids.service';
+import { GermanTimeFormatPipe } from './pipes/german-time-format.pipe';
 
 const MODULES = [
   CommonModule,
@@ -99,11 +100,12 @@ const DECLARATIONS = [
   ProgressSpinnerComponent,
   DialogPopUpComponent,
   WorkbasketFilterComponent,
-  TaskFilterComponent
+  TaskFilterComponent,
+  GermanTimeFormatPipe
 ];
 
 @NgModule({
-  declarations: DECLARATIONS,
+  declarations: [DECLARATIONS],
   imports: [
     MODULES,
     MatRadioModule,
@@ -117,7 +119,7 @@ const DECLARATIONS = [
     ReactiveFormsModule,
     MatProgressSpinnerModule
   ],
-  exports: DECLARATIONS,
+  exports: [DECLARATIONS, GermanTimeFormatPipe],
   providers: [
     {
       provide: HTTP_INTERCEPTORS,

web/src/app/workplace/components/task-list/task-list.component.html

@@ -18,7 +18,7 @@
           <div class="task-list__task-info">
             <p> <b>{{task.name}}</b>,&nbsp;<i *ngIf="task.owner">{{task.owner}} </i> </p>
             <p> State: {{task.state}} </p>
-            <p> Due: {{task.due | dateTimeZone }} </p>
+            <p> Due: {{task.due | germanTimeFormat }} </p>
           </div>
 
         </div>

web/src/app/workplace/components/task-status-details/task-status-details.component.html

@@ -7,7 +7,7 @@
     <mat-form-field appearance="outline">
       <mat-label>Modification Date</mat-label>
       <label for="task-modified"></label>
-      <input matInput type="text" disabled id="task-modified" placeholder="Modified Date" [value]="task.modified | dateTimeZone"
+      <input matInput type="text" disabled id="task-modified" placeholder="Modified Date" [value]="task.modified | germanTimeFormat"
              name="task.modified">
     </mat-form-field>
 
@@ -16,7 +16,7 @@
     <mat-form-field appearance="outline">
       <mat-label>Completion Date</mat-label>
       <label for="task-completed"></label>
-      <input matInput type="text" disabled id="task-completed" placeholder="Complete Date" [value]="task.completed | dateTimeZone"
+      <input matInput type="text" disabled id="task-completed" placeholder="Complete Date" [value]="task.completed | germanTimeFormat"
              name="task.completed">
     </mat-form-field>
 
@@ -56,7 +56,7 @@
     <mat-form-field appearance="outline">
       <mat-label>Claim Date</mat-label>
       <label for="task-claimed"></label>
-      <input matInput type="text" disabled id="task-claimed" placeholder="Claimed Date" [value]="task.claimed | dateTimeZone"
+      <input matInput type="text" disabled id="task-claimed" placeholder="Claimed Date" [value]="task.claimed | germanTimeFormat"
              name="task.claimed">
     </mat-form-field>
 
@@ -64,7 +64,7 @@
     <mat-form-field appearance="outline">
       <mat-label>Planned Date</mat-label>
       <label for="task-planned"></label>
-      <input matInput type="text" disabled id="task-planned" placeholder="Planned Date" [value]="task.planned | dateTimeZone"
+      <input matInput type="text" disabled id="task-planned" placeholder="Planned Date" [value]="task.planned | germanTimeFormat"
              name="task.planned">
     </mat-form-field>
 
@@ -72,7 +72,7 @@
     <mat-form-field appearance="outline">
       <mat-label>Creation Date</mat-label>
       <label for="task-created"></label>
-      <input matInput type="text" disabled id="task-created" placeholder="Creation Date" [value]="task.created | dateTimeZone"
+      <input matInput type="text" disabled id="task-created" placeholder="Creation Date" [value]="task.created | germanTimeFormat"
              name="task.created">
     </mat-form-field>