[HIMA-182] [HIMA-217] working on wareneingang details page for one and multiple articles

2025-12-31 09:37:15 +01:00 · 2019-10-22 17:29:07 +02:00
parent ddcd8d17ec
commit 78555b85d3
20 changed files with 1151 additions and 7 deletions
--- a/apps/sales/src/app/modules/goods-in/components/goods-in-article-details/goods-in-article-details.component.html
+++ b/apps/sales/src/app/modules/goods-in/components/goods-in-article-details/goods-in-article-details.component.html
@@ -0,0 +1,64 @@
+<div class="align-right tags" *ngIf="isSubscription || isGift || isPayment || isPreorder">
+  <app-goods-in-order-tag *ngIf="isSubscription" type="subscribe"></app-goods-in-order-tag>
+  <app-goods-in-order-tag *ngIf="isGift" type="gift"></app-goods-in-order-tag>
+  <app-goods-in-order-tag *ngIf="isPayment" type="payment"></app-goods-in-order-tag>
+  <app-goods-in-order-tag *ngIf="isPreorder" type="preorder"></app-goods-in-order-tag>
+</div>
+<div class="item">
+  <img [src]="_article.coverUrl | bookImageUrl | async" alt="book" class="thumbnail" />
+  <div class="overview">
+    <span class="title">{{ _article.title }}</span>
+    <div class="labels">
+      <span class="label">Menge</span>
+      <span class="label">Preis</span>
+      <span class="label">ISBN/EAN</span>
+      <span class="label">Lieferant</span>
+      <ng-container *ngIf="expand">
+        <span class="label">Bestellkanal</span>
+        <span class="label">Zielfiliale</span>
+        <span class="label">MwSt</span>
+        <ng-container *ngIf="isPayed">
+          <span class="label">Zahlungsart</span>
+          <span class="label">Zahlungsreferenz</span>
+          <span class="label">Rechnungstext</span>
+          <span class="label">Belegnummer</span>
+          <span class="label">Belegart</span>
+          <span class="label">Erstellt am</span>
+          <span class="label">Zahlungsweg</span>
+        </ng-container>
+      </ng-container>
+    </div>
+    <div class="data">
+      <span class="text">{{ _article.quantity }}</span>
+      <span class="text">{{ _article.price | bookPrice }} {{ _article.currency || '&nbsp;' }}</span>
+      <span class="text">{{ _article.isbn || '&nbsp;' }}</span>
+      <span class="text">{{ _article.supplier || '&nbsp;' }}</span>
+      <ng-container *ngIf="expand">
+        <span class="text">{{ _article.orderChanel || '&nbsp;' }}</span>
+        <span class="text">{{ _article.targetBranch || '&nbsp;' }}</span>
+        <span class="text">{{ _article.mwst || '&nbsp;' }}</span>
+        <ng-container *ngIf="isPayed">
+          <span class="text">{{ paymentType || '-' }}</span>
+          <span class="text">{{ paymentReferenceNumber || '-' }}</span>
+          <span class="text">{{ _article.invoiceText || '&nbsp;' }}</span>
+          <span class="text">{{ _article.receiptNumber || '&nbsp;' }}</span>
+          <span class="text">{{ _article.receiptType || '&nbsp;' }}</span>
+          <span class="text">{{ _article.printedDate || '&nbsp;' }}</span>
+          <span class="text">{{ _article.placeOfPayment || '&nbsp;' }}</span>
+        </ng-container>
+      </ng-container>
+    </div>
+    <div class="labels" *ngIf="expand">
+      <span class="label">Meldenummer</span>
+    </div>
+    <div class="data" *ngIf="expand">
+      <span class="text">{{ _article.messageNumber || '&nbsp;' }}</span>
+    </div>
+    <div class="labels" *ngIf="expand">
+      <span class="label" *ngIf="_article.remark">Anmerkung</span>
+    </div>
+    <div class="data" *ngIf="expand">
+      <span class="text" *ngIf="_article.remark">{{ _article.remark || '&nbsp;' }}</span>
+    </div>
+  </div>
+</div>
--- a/apps/sales/src/app/modules/goods-in/components/goods-in-article-details/goods-in-article-details.component.scss
+++ b/apps/sales/src/app/modules/goods-in/components/goods-in-article-details/goods-in-article-details.component.scss
@@ -0,0 +1,80 @@
+.item {
+  display: flex;
+  flex-direction: row;
+
+  .thumbnail {
+    margin-top: 18px;
+    max-width: 58px;
+    max-height: 95px;
+    box-shadow: 0 0 18px 0 #b8b3b7;
+    border-radius: 6px;
+  }
+}
+
+.overview {
+  margin: 15px 0;
+  padding: 0 25px;
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 165px 1fr;
+
+  .title {
+    font-size: 16px;
+    font-weight: bold;
+    margin-right: 20px;
+    grid-column: 1 / span 2;
+  }
+
+  .labels,
+  .data {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    span {
+      color: #000000;
+      padding-bottom: 10px;
+      text-align: left;
+      line-height: 25px;
+      padding-bottom: 0px;
+    }
+  }
+
+  .extras {
+    display: flex;
+    flex-direction: row;
+    span {
+      color: #000000;
+      padding-bottom: 10px;
+      text-align: left;
+      line-height: 25px;
+      padding-bottom: 0px;
+    }
+  }
+
+  .labels span {
+    font-size: 16px;
+    font-weight: bold;
+    margin-right: 20px;
+    line-height: 25px;
+    padding-bottom: 0px;
+  }
+
+  .data span {
+    font-size: 16px;
+  }
+}
+
+.tags {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-bottom: -41px;
+  margin-top: -22px;
+  > * {
+    margin-right: -10px;
+  }
+  min-height: 67px;
+}
--- a/apps/sales/src/app/modules/goods-in/components/goods-in-article-details/goods-in-article-details.component.spec.ts
+++ b/apps/sales/src/app/modules/goods-in/components/goods-in-article-details/goods-in-article-details.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GoodsInArticleDetailsComponent } from './goods-in-article-details.component';
+
+describe('GoodsInArticleDetailsComponent', () => {
+  let component: GoodsInArticleDetailsComponent;
+  let fixture: ComponentFixture<GoodsInArticleDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GoodsInArticleDetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GoodsInArticleDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/apps/sales/src/app/modules/goods-in/components/goods-in-article-details/goods-in-article-details.component.ts
+++ b/apps/sales/src/app/modules/goods-in/components/goods-in-article-details/goods-in-article-details.component.ts
@@ -0,0 +1,243 @@
+import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { OrderItemDTO } from 'swagger/lib/oms/models/order-item-dto';
+import { SupplierState } from 'apps/sales/src/app/core/store/state/supplier.state';
+import { filter, take } from 'rxjs/operators';
+import { objectNotNull } from 'apps/sales/src/app/core/utils/app.utils';
+import { OrderStatus, orderChannelMapper, receiptType } from 'apps/sales/src/app/core/mappings/shelf.mapping';
+import { isNullOrUndefined } from 'util';
+import { EnvironmentChannel } from 'swagger/lib/oms/models/environment-channel';
+import { BranchSelectors } from 'apps/sales/src/app/core/store/selectors/branch.selector';
+import { LogisticianDTO } from 'swagger/lib/oms/models/logistician-dto';
+import { Store } from '@ngxs/store';
+import { CollectingShelfService } from 'apps/sales/src/app/core/services/collecting-shelf.service';
+import { DatePipe } from '@angular/common';
+import { ReceiptListItemDTO } from 'swagger/lib/oms/models/receipt-list-item-dto';
+
+@Component({
+  selector: 'app-goods-in-article-details',
+  templateUrl: './goods-in-article-details.component.html',
+  styleUrls: ['./goods-in-article-details.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GoodsInArticleDetailsComponent implements OnInit, OnDestroy {
+  destroy$ = new Subject();
+  features: { [key: string]: string };
+  showPayment = false;
+  isPayed = false;
+  isPreorder = false;
+  available = true;
+
+  @Input() paymentType: string;
+  @Input() paymentReferenceNumber: string;
+  @Input() expand = false;
+  @Input() set article(val: OrderItemDTO) {
+    if (val) {
+      this._article.orderId = val.order.id;
+      if (val.product) {
+        this._article.title = val.product.contributors ? val.product.contributors + ' - ' + val.product.name : val.product.name;
+        this._article.coverUrl = val.product.ean;
+        this._article.isbn = val.product.ean;
+      }
+
+      if (val.grossPrice && val.grossPrice.value) {
+        this._article.price = val.grossPrice.value.value;
+        this._article.currency = val.grossPrice.value.currency;
+      }
+
+      if (val.subsetItems && val.subsetItems.length > 0) {
+        const quantity = val.subsetItems
+          .filter(subItems => subItems && subItems.data && subItems.data.quantity)
+          .map(subItems => subItems.data.quantity)
+          .reduce((q1, q2) => q1 + q2);
+        this._article.quantity = `${quantity ? quantity : 0}x`;
+      }
+
+      if (val.features && val.features['fsk']) {
+        this._article.fsk = val.features['fsk'];
+      }
+
+      if (val.grossPrice && val.grossPrice.vat && val.grossPrice.vat.vatType) {
+        this._article.mwst = val.grossPrice.vat.inPercent + '%';
+      }
+
+      if (
+        val.subsetItems &&
+        val.subsetItems[0] &&
+        val.subsetItems[0].data &&
+        val.subsetItems[0].data.ssc &&
+        val.subsetItems[0].data.sscText
+      ) {
+        this._article.messageNumber = val.subsetItems[0].data.ssc + ' - ' + val.subsetItems[0].data.sscText;
+      }
+
+      if (
+        val.subsetItems &&
+        val.subsetItems[0] &&
+        val.subsetItems[0].data &&
+        val.subsetItems[0].data.supplier &&
+        val.subsetItems[0].data.supplier.id
+      ) {
+        this.store
+          .select(SupplierState.getSuppliers)
+          .pipe(
+            filter(data => objectNotNull(data)),
+            take(1)
+          )
+          .subscribe(suppliers => {
+            if (suppliers && suppliers[val.subsetItems[0].data.supplier.id]) {
+              this._article.supplier = suppliers[val.subsetItems[0].data.supplier.id].name;
+            }
+          });
+      }
+
+      if (val.subsetItems && val.subsetItems[0] && val.subsetItems[0].data && val.subsetItems[0].data.features) {
+        this.features = val.subsetItems[0].data.features;
+      }
+
+      if (val.subsetItems && val.subsetItems[0] && val.subsetItems[0].data && val.subsetItems[0].data.specialComment) {
+        this._article.remark = val.subsetItems[0].data.specialComment;
+      }
+
+      if (val.subsetItems && val.subsetItems[0] && val.subsetItems[0].data && val.subsetItems[0].data.processingStatus) {
+        const status = val.subsetItems[0].data.processingStatus;
+        if (status === OrderStatus.NotAvailable) {
+          this.available = false;
+        }
+        if (status === OrderStatus.InProcess || status === OrderStatus.ReOrdered) {
+          if (val.invoiceText) {
+            this._article.invoiceText = val.invoiceText;
+          }
+          if (val.order.id) {
+            this.getReceiptData(val.order.id);
+          }
+        } else {
+          this.showPayment = false;
+        }
+      }
+
+      if (val.subsetItems && val.subsetItems[0] && val.subsetItems[0].data && !isNullOrUndefined(val.subsetItems[0].data.isPrebooked)) {
+        this.isPreorder = val.subsetItems[0].data.isPrebooked;
+      }
+
+      this.cdrf.detectChanges();
+    }
+  }
+  @Input() set clientChannel(val: EnvironmentChannel) {
+    if (val) {
+      this._article.orderChanel = orderChannelMapper[val];
+      this.cdrf.detectChanges();
+    }
+  }
+  @Input() set targetBranch(val: number) {
+    if (val) {
+      const branches = this.store.selectSnapshot(BranchSelectors.getBranches);
+      if (branches && branches[val]) {
+        this._article.targetBranch = branches[val].name;
+        this.cdrf.detectChanges();
+      }
+    }
+  }
+  @Input() set logistician(val: LogisticianDTO) {
+    if (val) {
+      // this._article.supplier = val.name;
+      // this.cdrf.detectChanges();
+    }
+  }
+
+  get isSubscription() {
+    if (this.features) {
+      return !isNullOrUndefined(this.features['subscription']);
+    }
+    return false;
+  }
+
+  get isGift() {
+    if (this.features) {
+      return !isNullOrUndefined(this.features['promotion']);
+    }
+    return false;
+  }
+
+  get isPayment() {
+    return this.isPayed;
+  }
+
+  _article: {
+    orderId?: number;
+    title?: string;
+    coverUrl?: string;
+    price?: number;
+    currency?: string;
+    quantity?: string;
+    isbn?: string;
+    fsk?: string;
+    supplier?: string;
+    orderChanel?: string;
+    targetBranch?: string;
+    mwst?: string;
+    messageNumber?: string;
+    remark?: string;
+    invoiceText?: string;
+    receiptNumber?: string;
+    receiptType?: string;
+    printedDate?: string;
+    placeOfPayment?: string;
+  } = {
+    title: '-',
+    coverUrl: '-',
+    currency: '-',
+    quantity: '-',
+    isbn: '-',
+    fsk: '-',
+    supplier: '-',
+    orderChanel: '-',
+    targetBranch: '-',
+    mwst: '-',
+    messageNumber: '-',
+    remark: undefined,
+    invoiceText: '-',
+    receiptNumber: '-',
+    receiptType: '-',
+    printedDate: '-',
+    placeOfPayment: '-',
+  };
+
+  constructor(
+    private store: Store,
+    private cdrf: ChangeDetectorRef,
+    private shelfService: CollectingShelfService,
+    private datePipe: DatePipe
+  ) {}
+
+  ngOnInit() {}
+
+  ngOnDestroy() {
+    this.destroy$.next();
+  }
+
+  getReceiptData(orderId: number) {
+    this.shelfService
+      .getReceipt(orderId)
+      .toPromise()
+      .then((receiptList: ReceiptListItemDTO[]) => {
+        if (receiptList && receiptList.length > 0) {
+          this.showPayment = true;
+          const receipt = receiptList[0];
+          this._article.receiptNumber = receipt.receiptNumber;
+          this._article.receiptType = receiptType[receipt.receiptType];
+          if (receipt.printedDate) {
+            this._article.printedDate = this.datePipe.transform(receipt.printedDate, 'dd.MM.yy | HH:mm') + ' Uhr';
+          }
+          this._article.placeOfPayment = receipt.placeOfPayment;
+          if (receipt.paidAt && !isNullOrUndefined(receipt.paidAt)) {
+            this.isPayed = true;
+          } else {
+            this.isPayed = false;
+          }
+          this.cdrf.detectChanges();
+        }
+      })
+      .catch(error => {});
+  }
+}
--- a/apps/sales/src/app/modules/goods-in/components/goods-in-order-card/goods-in-order-card.component.ts
+++ b/apps/sales/src/app/modules/goods-in/components/goods-in-order-card/goods-in-order-card.component.ts
@@ -33,6 +33,7 @@ export class GoodsInOrderCardComponent implements OnInit {
  positiveStatuses = {
    16: true,
    128: true,
+    8192: true,
  };
  negativeStatuses = {
    512: true,
--- a/apps/sales/src/app/modules/goods-in/goods-in.module.ts
+++ b/apps/sales/src/app/modules/goods-in/goods-in.module.ts
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { GoodsInRoutingModule } from './goods-in-routing.module';
 import { GoodsInSearchComponent } from './pages/goods-in-search/goods-in-search.component';
-import { SearchInputModule, LoadingModule, IconModule } from '@libs/ui';
+import { SearchInputModule, LoadingModule, IconModule, ButtonModule, DropdownModule, DatePickerModule } from '@libs/ui';
 import { GoodsInSearchResultsComponent } from './pages/goods-in-search-results/goods-in-search-results.component';
 import { GoodsInOrderDetailsComponent } from './pages/goods-in-order-details/goods-in-order-details.component';
 import { GoodsInOrderLoadingComponent } from './components/order-loading/goods-in-order-loading.component';
@@ -10,6 +10,7 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
 import { GoodsInOrderCardComponent } from './components/goods-in-order-card/goods-in-order-card.component';
 import { SharedModule } from '../../shared/shared.module';
 import { GoodsInOrderTagComponent } from './components/goods-in-order-tag/goods-in-order-tag.component';
+import { GoodsInArticleDetailsComponent } from './components/goods-in-article-details/goods-in-article-details.component';

@NgModule({
  declarations: [
@@ -19,7 +20,19 @@ import { GoodsInOrderTagComponent } from './components/goods-in-order-tag/goods-
    GoodsInOrderLoadingComponent,
    GoodsInOrderCardComponent,
    GoodsInOrderTagComponent,
+    GoodsInArticleDetailsComponent,
+  ],
+  imports: [
+    CommonModule,
+    GoodsInRoutingModule,
+    SearchInputModule,
+    ScrollingModule,
+    LoadingModule,
+    SharedModule,
+    IconModule,
+    ButtonModule,
+    DropdownModule,
+    DatePickerModule,
  ],
-  imports: [CommonModule, GoodsInRoutingModule, SearchInputModule, ScrollingModule, LoadingModule, SharedModule, IconModule],
 })
 export class GoodsInModule {}
--- a/apps/sales/src/app/modules/goods-in/pages/goods-in-order-details/goods-in-order-details.component.html
+++ b/apps/sales/src/app/modules/goods-in/pages/goods-in-order-details/goods-in-order-details.component.html
@@ -1,3 +1,100 @@
-<p>
-  goods-in-order-details works!
-</p>
+<div class="card-container" *ngIf="order">
+  <!-- <div class="header">
+    <app-button class="align-right" (action)="editOrder()" type="small">Bearbeiten</app-button>
+  </div> -->
+  <div class="order-details">
+    <div class="main">
+      <span class="customer"> {{ order.buyer.firstName + ' ' + order.buyer.lastName }}</span>
+      <span class="status"> </span>
+      <span class="order">{{ order.orderNumber }}</span>
+    </div>
+    <div class="secondary">
+      <div>
+        <div class="grid first">
+          <span class="label">Bestelldatum</span>
+          <span class="data"> {{ order.orderDate | date: 'dd.MM.yy | HH:mm' }} Uhr</span>
+        </div>
+        <div class="grid first">
+          <span class="label">Bestellkanal</span>
+          <span class="data"> {{ orderChannel }}</span>
+        </div>
+      </div>
+      <div class="grid-wrapper">
+        <div class="grid">
+          <span class="label">Status</span>
+          <div class="status-wrapper">
+            <lib-icon *ngIf="isPositiveStatus" pr="5px" name="Check_branch"></lib-icon>
+            <lib-icon *ngIf="isNegativeStatus" pr="5px" name="Icon_Close_branch"></lib-icon>
+            <span class="data">
+              {{ status }}
+            </span>
+          </div>
+        </div>
+        <div class="grid">
+          <span class="label">vsl. Lieferdatum</span>
+          <span class="pickup-data">
+            <!-- <app-dropdown
+              class="dropdown"
+              [selected]="pickUpDate | date: 'dd.MM.yy'"
+              [options]="pickUpDateOptions"
+              (valueChanges)="pickUpDateSelected($event)"
+            ></app-dropdown> -->
+            <lib-date-picker [selected]="pickUpDate"></lib-date-picker>
+          </span>
+        </div>
+        <!-- <div class="grid" *ngIf="!arrived">
+          <span class="label">Geändert</span>
+          <span class="data" *ngIf="order.changed">
+            <span>{{ order.changed | date: 'dd.MM.yy' }}</span>
+          </span>
+        </div> -->
+      </div>
+    </div>
+  </div>
+  <hr class="spacer branch" />
+  <div class="items">
+    <ng-container *ngFor="let item of order.items; index as i">
+      <app-goods-in-article-details
+        [article]="item.data"
+        [paymentType]="paymentType"
+        [paymentReferenceNumber]="order.paymentReferenceNumber"
+        [clientChannel]="order.clientChannel"
+        [targetBranch]="order.targetBranch"
+        [logistician]="order.logistician"
+        [expand]="expanded(i)"
+        class="item"
+      ></app-goods-in-article-details>
+      <div class="history">
+        <app-button class="align-right" type="small">Historie</app-button>
+      </div>
+      <div class="multiple" *ngIf="order && order.items && order.items.length != 1">
+        <ng-container *ngTemplateOutlet="readMoreButton; context: { $implicit: i }"></ng-container>
+      </div>
+      <hr class="spacer branch" />
+    </ng-container>
+  </div>
+
+  <div class="single" *ngIf="order && order.items && order.items.length == 1">
+    <ng-container *ngTemplateOutlet="readMoreButton; context: { $implicit: 0 }"></ng-container>
+  </div>
+
+  <ng-template #readMoreButton let-index>
+    <div>
+      <span *ngIf="!expanded(index); else less" class="more-btn align-right expand-more" (click)="toggleMore(index)"
+        >Mehr Bestelldetails
+        <lib-icon name="Arrow_Next_branch" pl="8px" alt="more"></lib-icon>
+      </span>
+    </div>
+    <ng-template #less>
+      <span class="more-btn" (click)="toggleMore(index)">
+        <lib-icon name="Arrow_back_branch" pr="8px" alt="less"></lib-icon>
+        Weniger Bestelldetails
+      </span>
+    </ng-template>
+  </ng-template>
+
+  <div class="actions">
+    <app-button [primary]="true" *ngIf="isPositiveStatus" (action)="setAllArrived()">Status auf 'eingetroffen' setzen</app-button>
+    <app-button [primary]="true" *ngIf="isNegativeStatus" (action)="setAllBackToStock()">Status auf 'ans Lager' setzen</app-button>
+  </div>
+</div>
--- a/apps/sales/src/app/modules/goods-in/pages/goods-in-order-details/goods-in-order-details.component.scss
+++ b/apps/sales/src/app/modules/goods-in/pages/goods-in-order-details/goods-in-order-details.component.scss
@@ -0,0 +1,280 @@
+@import '../../../../../assets/scss/variables';
+
+.card-container {
+  background-color: white;
+  background-color: white;
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px 0px #dce2e9;
+  height: calc(100% - 70px);
+  margin-top: 10px;
+  overflow-y: scroll;
+  padding: 15px 20px;
+  scroll-behavior: smooth;
+}
+
+.spacer {
+  margin-top: 15px;
+  margin-bottom: 15px;
+  margin-left: -20px;
+  width: calc(100% + 40px);
+}
+
+.grid-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+// .invalid-spacer {
+//   background-color: $hima-error-msg-color;
+// }
+
+.header {
+  margin-bottom: 10px;
+  margin-left: -20px;
+  width: calc(100% + 30px);
+}
+
+.history {
+  margin-left: -20px;
+  width: calc(100% + 30px);
+}
+
+.align-right {
+  margin-right: 0;
+  margin-left: auto;
+  display: block;
+}
+
+.more-btn {
+  font-size: 16px;
+  font-weight: bold;
+  color: #596470;
+  display: flex;
+  align-items: center;
+  align-self: right;
+  cursor: pointer;
+  padding-left: 80px;
+}
+
+.expand-more {
+  justify-content: flex-end;
+  padding-left: 0px;
+}
+
+.order-details {
+  .main {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .customer {
+      font-size: 26px;
+      font-weight: bold;
+      color: black;
+    }
+    .status {
+      font-size: 16px;
+      font-weight: bold;
+      color: rgba(90, 114, 138, 1);
+      flex: 1 1 auto;
+      margin-left: 10px;
+    }
+    .order {
+      font-size: 26px;
+      font-weight: bold;
+      color: black;
+    }
+  }
+
+  .secondary {
+    margin-top: 15px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    width: 100%;
+    .grid {
+      display: grid;
+      grid-template-rows: 1fr;
+      grid-template-columns: 170px max-content;
+
+      &.first {
+        grid-template-columns: 120px max-content;
+      }
+    }
+    .label {
+      font-size: 16px;
+      color: rgba(0, 0, 0, 1);
+    }
+    .data {
+      font-size: 16px;
+      font-weight: bold;
+      color: rgba(0, 0, 0, 1);
+      position: relative;
+    }
+
+    .pickup-data {
+      font-size: 16px;
+      font-weight: bold;
+      color: rgba(0, 0, 0, 1);
+      position: relative;
+    }
+
+    .dropdown {
+      position: absolute;
+      right: -15px;
+      top: -5px;
+    }
+  }
+}
+
+.item {
+  display: block;
+  margin-bottom: -30px;
+}
+
+.actions {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 60px;
+  margin-bottom: 30px;
+}
+
+.status-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+.customer-feature {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 12px;
+  span {
+    font-weight: bold;
+    color: #557596;
+    font-size: 16px;
+  }
+}
+
+.edit-order {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: flex-end;
+  padding-bottom: 5px;
+  padding-top: 4px;
+  cursor: pointer;
+  span {
+    font-size: 18px;
+    color: #f70400;
+    font-weight: bold;
+  }
+}
+
+.not-available-extras {
+  display: flex;
+  flex-direction: column;
+  .row {
+    display: flex;
+    flex-direction: row;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    justify-content: space-between;
+
+    .data-container {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+
+      .label span {
+        font-size: 16px;
+        font-weight: bold;
+        margin-right: 20px;
+        line-height: 25px;
+        padding-bottom: 0px;
+      }
+
+      .data {
+        width: 100%;
+        .input {
+          font-family: 'Open Sans';
+          border: none;
+          font-size: 16px;
+          color: black;
+          opacity: 1;
+          text-align: left;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          width: 100%;
+          caret-color: #f70400;
+        }
+        .message-data {
+          display: flex;
+          flex-direction: row;
+          .input {
+            width: 50px;
+          }
+          span {
+            padding-left: 10px;
+          }
+        }
+      }
+
+      .input:focus {
+        outline: none;
+      }
+    }
+
+    .action {
+      cursor: pointer;
+      span {
+        font-size: 18px;
+        color: #f70400;
+        font-weight: bold;
+      }
+
+      .save-action {
+        display: flex;
+        flex-direction: row;
+      }
+    }
+  }
+}
+
+.invalid-feedback {
+  position: absolute;
+  width: 285px;
+  text-align: right;
+  right: 145px;
+  animation: shake 0.3s cubic-bezier(0.7, 0.07, 0.19, 0.97) both;
+  transform: translate3d(0, 0, 0);
+  font-size: 14px;
+  font-weight: bold;
+  color: $hima-error-msg-color;
+  margin-top: -20px;
+}
+
+@keyframes shake {
+  10% {
+    transform: translate3d(-1px, 0, 0);
+  }
+
+  50% {
+    transform: translate3d(2px, 0, 0);
+  }
+
+  70% {
+    transform: translate3d(-3px, 0, 0);
+  }
+
+  90% {
+    transform: translate3d(3px, 0, 0);
+  }
+}
--- a/apps/sales/src/app/modules/goods-in/pages/goods-in-order-details/goods-in-order-details.component.ts
+++ b/apps/sales/src/app/modules/goods-in/pages/goods-in-order-details/goods-in-order-details.component.ts
@@ -1,4 +1,11 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+import { take, switchMap, filter } from 'rxjs/operators';
+import { of } from 'rxjs';
+import { CollectingShelfService } from 'apps/sales/src/app/core/services/collecting-shelf.service';
+import { isNullOrUndefined } from 'util';
+import { OrderDTO } from 'swagger/lib/oms/models/order-dto';
+import { orderStatusMapper, orderChannelMapper } from 'apps/sales/src/app/core/mappings/shelf.mapping';

@Component({
  selector: 'app-goods-in-order-details',
@@ -6,7 +13,120 @@ import { Component, OnInit } from '@angular/core';
  styleUrls: ['./goods-in-order-details.component.scss'],
 })
 export class GoodsInOrderDetailsComponent implements OnInit {
-  constructor() {}
+  orderId: number;
+  processingStatus: number;
+  order: OrderDTO;
+  expand = {};
+  pickUpDate: Date;
+  orderChannel: string;
+  positiveStatuses = {
+    16: true,
+    128: true,
+    8192: true,
+  };
+  negativeStatuses = {
+    512: true,
+    1024: true,
+    2048: true,
+    4096: true,
+    16777216: true,
+  };
+  isPositiveStatus = false;
+  isNegativeStatus = false;
+  constructor(private route: ActivatedRoute, private shelfService: CollectingShelfService) {}

-  ngOnInit() {}
+  get status() {
+    if (this.processingStatus) {
+      return orderStatusMapper[this.processingStatus];
+    }
+  }
+
+  ngOnInit() {
+    this.initialize();
+  }
+
+  initialize() {
+    this.route.params
+      .pipe(
+        take(1),
+        switchMap(this.paramsToOrderSwitcher),
+        filter(order => !isNullOrUndefined(order))
+      )
+      .subscribe(this.orderResultHandler);
+  }
+
+  paramsToOrderSwitcher = (params: Params) => {
+    if (params && params['id'] && params['status']) {
+      this.orderId = params['id'];
+      this.processingStatus = params['status'];
+      return this.shelfService.getOrderByOrderId(this.orderId);
+    }
+    return of(undefined);
+  };
+
+  orderResultHandler = (order: OrderDTO) => {
+    this.order = this.filterOrder(order);
+    if (
+      this.order.items[0] &&
+      this.order.items[0].data.subsetItems[0] &&
+      this.order.items[0].data.subsetItems[0].data.estimatedShippingDate
+    ) {
+      this.pickUpDate = new Date(this.order.items[0].data.subsetItems[0].data.estimatedShippingDate);
+    }
+    if (this.processingStatus) {
+      this.isPositiveStatus = this.positiveStatuses[this.processingStatus] ? true : false;
+      this.isNegativeStatus = this.negativeStatuses[this.processingStatus] ? true : false;
+    }
+    if (this.order.clientChannel) {
+      this.orderChannel = orderChannelMapper[this.order.clientChannel];
+    }
+  };
+
+  filterOrder(orderDTO: OrderDTO) {
+    let order = orderDTO;
+    if (order) {
+      order = {
+        ...order,
+        items: [
+          ...order.items
+            .map(item => {
+              const subitems = {
+                ...item,
+                data: {
+                  ...item.data,
+                  subsetItems: [
+                    ...item.data.subsetItems
+                      .map(subitem => {
+                        if (subitem && subitem.data && subitem.data.processingStatus === +this.processingStatus) {
+                          return subitem;
+                        }
+                      })
+                      .filter(f => f && f.data),
+                  ],
+                },
+              };
+              return subitems;
+            })
+            .filter(f => f && f.data && f.data.subsetItems && f.data.subsetItems.length > 0),
+        ],
+      };
+    }
+    return order;
+  }
+
+  expanded(bookIndex) {
+    return !!this.expand[bookIndex];
+  }
+
+  toggleMore(bookIndex) {
+    this.expand[bookIndex] = !this.expand[bookIndex];
+  }
+
+  setAllBackToStock() {
+    // TODO: imelement status change for all set back to stock
+  }
+
+  setAllArrived() {
+    // TODO: implement status change for all set status to arrived
+  }
 }
--- a/apps/sales/src/assets/images/Arrow_Down_2_branch.svg
+++ b/apps/sales/src/assets/images/Arrow_Down_2_branch.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="10px" viewBox="0 0 18 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>Arrow_Down</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="UC1_04_Hugendubel_Instoreapp_Kunden_Artikelrecherche_2" transform="translate(-213.000000, -524.000000)" stroke="#596470" stroke-width="2.3">
+            <polyline id="Arrow_Down" points="215 526 222 532.5 229 526"></polyline>
+        </g>
+    </g>
+</svg>
--- a/apps/sales/src/assets/images/Arrow_Next_branch.svg
+++ b/apps/sales/src/assets/images/Arrow_Next_branch.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15px" height="13px" viewBox="0 0 15 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>Arrow_Next</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="UC1_21_Hugendubel_Instoreapp_Kunden_Warenkorb_Popup_Zahlungsart" transform="translate(-217.000000, -649.000000)" fill="#596470" stroke="#596470" stroke-width="0.1">
+            <path d="M230.733819,656.417268 C230.809301,656.367042 230.880065,656.306645 230.943808,656.235936 C231.028396,656.141781 231.093784,656.03705 231.140412,655.926559 C231.19823,655.788212 231.226645,655.640759 231.225548,655.493711 C231.227742,655.229338 231.134487,654.963638 230.943808,654.75163 C230.880065,654.680921 230.809301,654.620513 230.733819,654.570298 L225.970888,650.281854 C225.520301,649.876326 224.82714,649.912754 224.421644,650.363013 C224.016039,650.813272 224.052463,651.507005 224.502502,651.912402 L227.252764,654.38856 L219.097118,654.38856 C218.49124,654.38856 218,654.879796 218,655.485681 C218,656.091555 218.49124,656.582801 219.097118,656.582801 L227.270428,656.582801 L224.502502,659.075163 C224.052463,659.480549 224.016039,660.174292 224.421644,660.62455 C224.82714,661.074776 225.520301,661.1112 225.970888,660.705704 L230.733819,656.417268 Z" id="Arrow_Next"></path>
+        </g>
+    </g>
+</svg>
--- a/apps/sales/src/assets/images/Arrow_back_branch.svg
+++ b/apps/sales/src/assets/images/Arrow_back_branch.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15px" height="13px" viewBox="0 0 15 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>Arrow_Next</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="UC1_21_Hugendubel_Instoreapp_Kunden_Warenkorb_Popup_Zahlungsart_More" transform="translate(-80.000000, -683.000000)" fill="#596470" stroke="#596470" stroke-width="0.1">
+            <path d="M93.7338186,690.417268 C93.8093005,690.367042 93.8800648,690.306645 93.9438075,690.235936 C94.0283955,690.141781 94.0937839,690.03705 94.1404115,689.926559 C94.1982298,689.788212 94.2266452,689.640759 94.2255481,689.493711 C94.2277424,689.229338 94.1344871,688.963638 93.9438075,688.75163 C93.8800648,688.680921 93.8093005,688.620513 93.7338186,688.570298 L88.9708884,684.281854 C88.5203009,683.876326 87.8271401,683.912754 87.4216442,684.363013 C87.0160387,684.813272 87.0524631,685.507005 87.502502,685.912402 L90.2527643,688.38856 L82.0971175,688.38856 C81.4912403,688.38856 81,688.879796 81,689.485681 C81,690.091555 81.4912403,690.582801 82.0971175,690.582801 L90.2704279,690.582801 L87.502502,693.075163 C87.0524631,693.480549 87.0160387,694.174292 87.4216442,694.62455 C87.8271401,695.074776 88.5203009,695.1112 88.9708884,694.705704 L93.7338186,690.417268 Z" id="Arrow_Next" transform="translate(87.612793, 689.493768) rotate(-180.000000) translate(-87.612793, -689.493768) "></path>
+        </g>
+    </g>
+</svg>
--- a/apps/sales/src/styles.scss
+++ b/apps/sales/src/styles.scss
@@ -115,6 +115,10 @@ hr {
  outline: none;
  border: none;
  margin: 0;
+
+  &.branch {
+    background-color: #edeff0;
+  }
 }

 .form-group {
--- a/libs/ui/src/lib/date-picker/date-picker.component.html
+++ b/libs/ui/src/lib/date-picker/date-picker.component.html
@@ -0,0 +1,19 @@
+<div class="selected" (click)="toggle()">
+  <span>{{ selected | date: 'dd.MM.yy' }}</span>
+  <lib-icon class="icon" [rotateBackwards]="expanded" transition="all 0.2s linear" width="17px" name="Arrow_Down_2_branch"></lib-icon>
+</div>
+
+<div class="calendar" *ngIf="expanded">
+  <ng-container *ngFor="let week of monthMatrix; let first = first">
+    <div class="grid week-names" *ngIf="first">
+      <div *ngFor="let day of week">
+        {{ weeks[day] }}
+      </div>
+    </div>
+    <div class="grid days" *ngIf="!first">
+      <div *ngFor="let day of week">
+        {{ day === 0 ? '' : day }}
+      </div>
+    </div>
+  </ng-container>
+</div>
--- a/libs/ui/src/lib/date-picker/date-picker.component.scss
+++ b/libs/ui/src/lib/date-picker/date-picker.component.scss
@@ -0,0 +1,25 @@
+.selected {
+  font-size: 16px;
+  color: #000000;
+  font-weight: bold;
+  cursor: pointer;
+
+  span {
+    margin-right: 5px;
+  }
+}
+
+.calendar {
+  width: 398px;
+  height: 430px;
+  position: absolute;
+  background-color: #ffffff;
+  right: -20px;
+  top: 30px;
+  box-shadow: 0px -2px 24px 0px #dce2e9;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(7, 50px);
+}
--- a/libs/ui/src/lib/date-picker/date-picker.component.spec.ts
+++ b/libs/ui/src/lib/date-picker/date-picker.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatePickerComponent } from './date-picker.component';
+
+describe('DatePickerComponent', () => {
+  let component: DatePickerComponent;
+  let fixture: ComponentFixture<DatePickerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DatePickerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DatePickerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/libs/ui/src/lib/date-picker/date-picker.component.ts
+++ b/libs/ui/src/lib/date-picker/date-picker.component.ts
@@ -0,0 +1,100 @@
+import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
+import { ViewRef_ } from '@angular/core/src/view';
+
+@Component({
+  selector: 'lib-date-picker',
+  templateUrl: './date-picker.component.html',
+  styleUrls: ['./date-picker.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DatePickerComponent implements OnInit {
+  @Input() selected: Date;
+  expanded = false;
+  today = new Date();
+  baseDate: Date;
+  day: number;
+  month: number;
+  months = {
+    0: 'Januar',
+    1: 'Februar',
+    2: 'März',
+    3: 'April',
+    4: 'Mai',
+    5: 'Juni',
+    6: 'Juli',
+    7: 'August',
+    8: 'September',
+    9: 'Oktober',
+    10: 'November',
+    11: 'Dezember',
+  };
+  year: number;
+  monthMatrix = [];
+  weeks = {
+    0: 'M',
+    1: 'D',
+    2: 'M',
+    3: 'D',
+    4: 'F',
+    5: 'S',
+    6: 'S',
+  };
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  ngOnInit() {
+    this.initialize();
+  }
+
+  initialize() {
+    this.baseDate = this.selected ? this.selected : this.today;
+    this.day = this.baseDate.getUTCDate();
+    this.month = this.baseDate.getUTCMonth();
+    this.year = this.baseDate.getUTCFullYear();
+    this.monthMatrix = this.fillMonthMatrix(this.month, this.year);
+    console.log(this.monthMatrix);
+  }
+
+  fillMonthMatrix(month: number, year: number) {
+    const weeks = [[0, 1, 2, 3, 4, 5, 6]],
+      firstDate = new Date(year, month, 1),
+      lastDate = new Date(year, month + 1, 0),
+      numDays = lastDate.getDate();
+
+    let start = 1;
+    let end = firstDate.getDay() === 0 ? firstDate.getDay() + 1 : 7 - firstDate.getDay() + 1;
+    while (start <= numDays) {
+      const isFirstWeek = end <= 7;
+      const week = Array(7)
+        .fill(0)
+        .map((_, i) => {
+          const day = i + 1 + start - 1;
+          const firstWeekZeroCondition = isFirstWeek && i < 7 - day;
+          if (firstWeekZeroCondition) {
+            return 0;
+          }
+          const zeroShiftingFactor = isFirstWeek ? 6 - (end - start) : 0;
+          const result = day - zeroShiftingFactor;
+          return result < 1 ? 0 : result > numDays ? 0 : result;
+        });
+      weeks.push(week);
+      start = end + 1;
+      end = end + 7;
+      if (end > numDays) {
+        end = numDays;
+      }
+    }
+    return weeks;
+  }
+
+  toggle() {
+    this.expanded = !this.expanded;
+  }
+
+  detectChanges() {
+    setTimeout(() => {
+      if (this.cdr !== null && this.cdr !== undefined && !(this.cdr as ViewRef_).destroyed) {
+        this.cdr.detectChanges();
+      }
+    }, 0);
+  }
+}
--- a/libs/ui/src/lib/date-picker/date-picker.module.ts
+++ b/libs/ui/src/lib/date-picker/date-picker.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule, DatePipe } from '@angular/common';
+import { ButtonModule } from '../button';
+import { DatePickerComponent } from './date-picker.component';
+import { IconModule } from '../icon';
+
+@NgModule({
+  declarations: [DatePickerComponent],
+  imports: [CommonModule, ButtonModule, IconModule],
+  exports: [DatePickerComponent],
+})
+export class DatePickerModule {}
--- a/libs/ui/src/lib/date-picker/index.ts
+++ b/libs/ui/src/lib/date-picker/index.ts
@@ -0,0 +1,2 @@
+export * from './date-picker.component';
+export * from './date-picker.module';
--- a/libs/ui/src/public_api.ts
+++ b/libs/ui/src/public_api.ts
@@ -18,3 +18,4 @@ export * from './lib/select';
 export * from './lib/radio-button';
 export * from './lib/offline-overlay';
 export * from './lib/double-choice-switch';
+export * from './lib/date-picker';