(WiP) Add Edit Order Item Header

apps/sales/src/app/modules/shelf/components/edit-order-item/edit-order-item.component.spec.ts

@@ -0,0 +1,22 @@
+import { ShelfEditOrderItemComponent } from '.';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+fdescribe('ShelfEditOrderItemComponent', () => {
+  let fixture: ComponentFixture<ShelfEditOrderItemComponent>;
+  let component: ShelfEditOrderItemComponent;
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      declarations: [ShelfEditOrderItemComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ShelfEditOrderItemComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should be created', () => {
+    expect(component instanceof ShelfEditOrderItemComponent).toBeTruthy();
+  });
+});

apps/sales/src/app/modules/shelf/components/edit-order-item/edit-order-item.component.ts

@@ -0,0 +1,21 @@
+import {
+  Component,
+  OnInit,
+  ChangeDetectionStrategy,
+  Input,
+} from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-shelf-edit-order-item',
+  templateUrl: 'edit-order-item.component.html',
+  styleUrls: ['./edit-order-item.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ShelfEditOrderItemComponent implements OnInit {
+  @Input() orderItemForm: FormGroup;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

apps/sales/src/app/modules/shelf/components/edit-order-item/edit-order-item.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ShelfEditOrderItemComponent } from './edit-order-item.component';
+import { IconModule } from '@libs/ui';
+
+@NgModule({
+  imports: [CommonModule, IconModule],
+  exports: [ShelfEditOrderItemComponent],
+  declarations: [ShelfEditOrderItemComponent],
+  providers: [],
+})
+export class ShelfEditOrderItemModule {}

apps/sales/src/app/modules/shelf/components/edit-order-item/header/edit-order-item-header.component.html

@@ -0,0 +1,15 @@
+<div class="header">
+  <div class="product-image">
+    <img *ngIf="src" class="thumbnail" [src]="src" alt="item.product.name" />
+  </div>
+  <div class="title">{{ title }}</div>
+  <div class="collapse" *ngIf="showCollapseArrow">
+    <lib-icon
+      class="isa-accordion-arrow"
+      [class.arrow-up]="!isOpen"
+      [class.arrow-down]="isOpen"
+      name="Arrow_right"
+      [height]="'16px'"
+    ></lib-icon>
+  </div>
+</div>

apps/sales/src/app/modules/shelf/components/edit-order-item/header/edit-order-item-header.component.ts

@@ -0,0 +1,19 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-shelf-edit-order-item-header',
+  templateUrl: 'edit-order-item-header.component.html',
+  styleUrls: ['./edit-order-item-header.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ShelfEditOrderItemHeaderComponent {
+  @Input() showCollapseArrow = true;
+  @Input() isOpen = false;
+
+  @Input() src = `https://produktbilder.ihugendubel.de/{{
+    orderItemListItem?.product.ean
+  }}.jpg?showDummy=true`;
+  @Input() title: string;
+
+  constructor() {}
+}

apps/sales/src/app/modules/shelf/components/edit-order-item/header/index.ts

@@ -0,0 +1,4 @@
+// start:ng42.barrel
+export * from './edit-order-item-header.component';
+// end:ng42.barrel
+

apps/sales/src/app/modules/shelf/components/edit-order-item/index.ts

@@ -0,0 +1,5 @@
+// start:ng42.barrel
+export * from './edit-order-item.component';
+export * from './edit-order-item.module';
+// end:ng42.barrel
+

apps/sales/src/app/modules/ui/select-input/select-input.component.html

@@ -8,9 +8,9 @@
       labelPipe ? labelPipe.transform(value) : value
     }}</span>
     <lib-icon
-      class="dp-button-icon"
-      [class.up]="dropdown.visible"
-      [class.down]="!dropdown.visible"
+      class="isa-accordion-arrow"
+      [class.arrow-up]="dropdown.visible"
+      [class.arrow-down]="!dropdown.visible"
       name="Arrow_right"
       [height]="'16px'"
     ></lib-icon>

apps/sales/src/app/modules/ui/select-input/select-input.component.scss

@@ -1,19 +1,5 @@
 @import 'variables';
 
-.dp-button-icon {
-  display: inline-flex;
-  transition: transform 200ms ease-in-out;
-  margin-left: 0.5rem;
-
-  &.dp-button-icon.up {
-    transform: rotate(-90deg);
-  }
-
-  &.dp-button-icon.down {
-    transform: rotate(-270deg);
-  }
-}
-
 .selected {
   margin-right: 10px;
 }

apps/sales/src/scss/modules/_content.scss

@@ -11,3 +11,17 @@
   margin-left: -10%;
   width: 120%;
 }
+
+.isa-accordion-arrow {
+  display: inline-flex;
+  transition: transform 200ms ease-in-out;
+  margin-left: 0.5rem;
+
+  &.arrow-up {
+    transform: rotate(-90deg);
+  }
+
+  &.arrow-down {
+    transform: rotate(-270deg);
+  }
+}