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
2021-08-25 11:01:57 +02:00 · 2021-08-25 11:01:57 +02:00 · 0f65abb001
parent 3f124f47db
commit 0f65abb001
11 changed files with 59 additions and 16 deletions
--- a/.github/workflows/continuous-integration.yml
+++ b/.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
--- a/web/src/app/history/task-history-query/task-history-query.component.html
+++ b/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">
--- a/web/src/app/monitor/components/classification-report/classification-report.component.html
+++ b/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">
--- a/web/src/app/monitor/components/task-report/task-report.component.html
+++ b/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">
--- a/web/src/app/monitor/components/timestamp-report/timestamp-report.component.html
+++ b/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>
--- a/web/src/app/monitor/components/workbasket-report/workbasket-report.component.html
+++ b/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">
--- a/web/src/app/shared/pipes/german-time-format.pipe.spec.ts
+++ b/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');
+  });
+});
--- a/web/src/app/shared/pipes/german-time-format.pipe.ts
+++ b/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;
+}
--- a/web/src/app/shared/shared.module.ts
+++ b/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,
--- a/web/src/app/workplace/components/task-list/task-list.component.html
+++ b/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>
--- a/web/src/app/workplace/components/task-status-details/task-status-details.component.html
+++ b/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>