#805 Add Timeline (css only)

apps/sales/src/app/modules/shelf/components/history-log/history-log.component.html

@@ -1,14 +1,12 @@
-<div class="log-entry mt-30">
-  <app-shelf-history-timeline
-    [lastEntry]="last"
-    [firstEntry]="first"
-  ></app-shelf-history-timeline>
-
+<div class="log-entry mt-40" [class.last]="last" [class.first]="first">
+  <span class="timeline-dot"></span>
   <app-shelf-history-log-header
     [infoText]="history | historyDtoToInfoText"
     [statusText]="history | historyDtoToStatusText"
   ></app-shelf-history-log-header>
   <app-shelf-history-log-body
+    [oldStatus]="history | getStatusFromHistory: 'old'"
+    [newStatus]="history | getStatusFromHistory: 'new'"
     [changedBy]="history.changedBy"
   ></app-shelf-history-log-body>
 </div>

apps/sales/src/app/modules/shelf/components/history-log/history-log.component.scss

@@ -0,0 +1,55 @@
+@import 'variables';
+
+$offset: 10px;
+$line-top-offset: 3px;
+$dot-size: 16px;
+$dot-size-lg: 20px;
+
+.log-entry {
+  position: relative;
+  // calculate offset relative to container offset (22px)
+  padding-left: calc(70px - 22px);
+
+  &:before {
+    content: '';
+    position: absolute;
+    height: 130%;
+    width: 1px;
+    top: $line-top-offset;
+    left: $offset;
+    border: 1px solid $isa-light-blue-platinum;
+  }
+
+  &.last:before {
+    height: 10%;
+  }
+
+  .timeline-dot {
+    position: absolute;
+    top: 0;
+    left: $offset;
+    background: #fff;
+    width: 2px;
+
+    &:before {
+      content: '';
+      position: absolute;
+      background: $isa-light-blue-platinum;
+
+      top: $line-top-offset;
+      left: calc((#{$dot-size} - #{$line-top-offset}) / -2);
+      border-radius: 50%;
+      width: $dot-size;
+      height: $dot-size;
+    }
+  }
+
+  &.first {
+    .timeline-dot:before {
+      width: $dot-size-lg;
+      height: $dot-size-lg;
+      background: $isa-neutral-info;
+      left: calc(#{$dot-size} / -2);
+    }
+  }
+}

apps/sales/src/app/modules/shelf/components/history-log/history-log.module.ts

@@ -4,10 +4,10 @@ import { CommonModule } from '@angular/common';
 import {
   HistoryDtoToInfoTextPipe,
   HistoryDtoToStatusTextPipe,
+  GetStatusFromHistoryPipe,
 } from '../../pages/shelf-history/pipes';
 import { IconModule } from '@libs/ui';
 import { ShelfHistoryLogComponent } from './history-log.component';
-import { ShelfHistoryTimelineComponent } from './history-timeline';
 import { ShelfHistoryLogHeaderComponent } from './log-header';
 import { ShelfHistoryLogBodyComponent } from './log-body';
 
@@ -15,15 +15,14 @@ import { ShelfHistoryLogBodyComponent } from './log-body';
   imports: [CommonModule, IconModule],
   declarations: [
     ShelfHistoryLogComponent,
-    ShelfHistoryTimelineComponent,
     ShelfHistoryLogHeaderComponent,
     ShelfHistoryLogBodyComponent,
     HistoryDtoToInfoTextPipe,
     HistoryDtoToStatusTextPipe,
+    GetStatusFromHistoryPipe,
   ],
   exports: [
     ShelfHistoryLogComponent,
-    ShelfHistoryTimelineComponent,
     ShelfHistoryLogHeaderComponent,
     ShelfHistoryLogBodyComponent,
   ],

apps/sales/src/app/modules/shelf/components/history-log/history-timeline/history-timeline.component.ts

@@ -1,21 +0,0 @@
-import {
-  Component,
-  OnInit,
-  ChangeDetectionStrategy,
-  Input,
-} from '@angular/core';
-
-@Component({
-  selector: 'app-shelf-history-timeline',
-  templateUrl: 'history-timeline.component.html',
-  styleUrls: ['./history-timeline.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ShelfHistoryTimelineComponent implements OnInit {
-  @Input() lastEntry: boolean;
-  @Input() firstEntry: boolean;
-
-  constructor() {}
-
-  ngOnInit() {}
-}

apps/sales/src/app/modules/shelf/components/history-log/history-timeline/index.ts

@@ -1,4 +0,0 @@
-// start:ng42.barrel
-export * from './history-timeline.component';
-// end:ng42.barrel
-

apps/sales/src/app/modules/shelf/pages/shelf-history/history-logs/shelf-history-logs.component.html

@@ -5,8 +5,14 @@
     <hr class="isa-content-spacer" />
 
     <app-shelf-history-log
-      *ngFor="let history of history$ | async"
+      *ngFor="
+        let history of history$ | async | filterHistoriesWithStatusChange;
+        let first = first;
+        let last = last
+      "
       [history]="history"
+      [first]="first"
+      [last]="last"
     ></app-shelf-history-log>
   </div>
 </div>

apps/sales/src/app/modules/shelf/pages/shelf-history/pipes/get-status-from-history.pipe.spec.ts

@@ -0,0 +1,41 @@
+import { GetStatusFromHistoryPipe } from './get-status-from-history.pipe';
+import { historyDtoMock, historiesDtoMock } from '../../../shared/mockdata';
+
+fdescribe('Pipe: GetNewStatusFromHistoryPipe', () => {
+  let pipe: GetStatusFromHistoryPipe;
+
+  beforeEach(() => {
+    pipe = new GetStatusFromHistoryPipe();
+  });
+
+  it('should return the new status value', () => {
+    const historyWithState = historiesDtoMock.find((h) =>
+      h.values.some((v) => v.caption === 'Status')
+    );
+
+    const result = pipe.transform(historyWithState);
+    const expected = 'bestellt';
+
+    expect(result).toBe(expected);
+  });
+
+  it('should return an empty string if no status is found', () => {
+    const historyWithoutState = historyDtoMock;
+
+    const result = pipe.transform(historyWithoutState);
+    const expected = '';
+
+    expect(result).toBe(expected);
+  });
+
+  it('should return the old status value', () => {
+    const historyWithState = historiesDtoMock.find((h) =>
+      h.values.some((v) => v.caption === 'Status')
+    );
+
+    const result = pipe.transform(historyWithState, 'old');
+    const expected = 'eingetroffen';
+
+    expect(result).toBe(expected);
+  });
+});

apps/sales/src/app/modules/shelf/pages/shelf-history/pipes/get-status-from-history.pipe.ts

@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { HistoryDTO } from '@cmf/trade-api';
+
+@Pipe({
+  name: 'getStatusFromHistory',
+})
+export class GetStatusFromHistoryPipe implements PipeTransform {
+  transform(history: HistoryDTO, statusType: 'new' | 'old' = 'new'): string {
+    const hasStatusChange = history.values.some((v) => v.caption === 'Status');
+
+    if (!hasStatusChange) {
+      return '';
+    }
+
+    return statusType === 'old'
+      ? history.values.find((v) => v.caption === 'Status').previousValue
+      : history.values.find((v) => v.caption === 'Status').value;
+  }
+}

apps/sales/src/app/modules/shelf/pages/shelf-history/pipes/historyDtoToinfoText.pipe.spec.ts

@@ -3,7 +3,7 @@ import { HistoryDtoToInfoTextPipe } from './historyDtoToinfoText.pipe';
 import { HistoryDTO } from '@cmf/trade-api';
 import { historyDtoMock } from '../../../shared/mockdata';
 
-fdescribe('PIPE: HistoryDtoToInfoTextPipe', () => {
+fdescribe('Pipe: HistoryDtoToInfoTextPipe', () => {
   let pipe: HistoryDtoToInfoTextPipe;
 
   const mockHistory: HistoryDTO = historyDtoMock;

apps/sales/src/app/modules/shelf/pages/shelf-history/pipes/index.ts

@@ -2,4 +2,5 @@
 export * from './historyDtoToinfoText.pipe';
 export * from './historyDtoToStatusText.pipe';
 export * from './filter-histories-with-status-change.pipe';
+export * from './get-status-from-history.pipe';
 // end:ng42.barrel

apps/sales/src/scss/_variables.scss

@@ -21,6 +21,7 @@ $isa-customer-light: #a3b4c8;
 $isa-customer-active: #59647a;
 $isa-customer-active: #1f466c;
 $isa-neutral-info: #be8100;
+$isa-light-blue-platinum: #e1ebf5;
 
 /* LAYOUT */
 $layout-border-radius: 5px;