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

libs/ui/src/lib/date-picker/date-picker.component.scss

@@ -17,6 +17,7 @@
   top: 30px;
   box-shadow: 0px -5px 54px 0px #dce2e9;
   border-radius: 5px;
+  z-index: 1;
 
   .grid {
     display: grid;

libs/ui/src/lib/date-picker/date-picker.component.ts

@@ -50,10 +50,10 @@ export class DatePickerComponent implements OnInit {
 
   initialize() {
     this.baseDate = this.selected ? this.selected : this.today;
-    this.currentDay = this.baseDate.getUTCDate();
-    this.month = this.baseDate.getUTCMonth();
+    this.currentDay = this.baseDate.getDate();
+    this.month = this.baseDate.getMonth();
     this.selectedMonth = this.month;
-    this.year = this.baseDate.getUTCFullYear();
+    this.year = this.baseDate.getFullYear();
     this.selectedYear = this.year;
     this.monthMatrix = this.fillMonthMatrix(this.month, this.year);
   }
@@ -85,9 +85,9 @@ export class DatePickerComponent implements OnInit {
   }
 
   confirm() {
-    const baseDay = this.baseDate.getUTCDate();
-    const baseMonth = this.baseDate.getUTCMonth();
-    const baseYear = this.baseDate.getUTCFullYear();
+    const baseDay = this.baseDate.getDate();
+    const baseMonth = this.baseDate.getMonth();
+    const baseYear = this.baseDate.getFullYear();
     if (this.currentDay === baseDay && this.selectedMonth === baseMonth && this.selectedYear === baseYear) {
       this.toggle();
       return;

libs/ui/src/lib/tag/index.ts

@@ -0,0 +1,2 @@
+export * from './tag.component';
+export * from './tag.module';

libs/ui/src/lib/tag/tag.component.html

@@ -0,0 +1,19 @@
+<div class="wrapper" (click)="clickTag($event)" [ngClass]="{ selected: selected === true }">
+  <div class="img" [ngClass]="{ selected: selected === true }">
+    <lib-icon name="Check_white" *ngIf="selected"></lib-icon>
+  </div>
+  <div class="text" [ngClass]="{ selected: selected === true }">
+    <span *ngIf="mode === 'label'">
+      {{ label }}
+    </span>
+    <input
+      id="input"
+      *ngIf="mode === 'input'"
+      [(ngModel)]="label"
+      [ngClass]="{ selected: selected === true }"
+      type="text"
+      (input)="inputUpdated($event)"
+      placeholder="..."
+    />
+  </div>
+</div>

libs/ui/src/lib/tag/tag.component.scss

@@ -0,0 +1,58 @@
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  padding: 6px 15px 6px 8px;
+  align-content: center;
+  border: 1.5px solid #cfd4d8;
+  border-radius: 30px;
+  cursor: pointer;
+
+  .img {
+    border: 1.5px solid #cfd4d8;
+    border-radius: 100%;
+    width: 21px;
+    height: 21px;
+
+    &.selected {
+      border: 1.5px solid #ffffff;
+    }
+
+    lib-icon {
+      margin-left: 3px;
+      margin-bottom: 3px;
+    }
+  }
+
+  .text {
+    font-size: 16px;
+    color: #cfd4d8;
+    padding-top: 3px;
+    padding-left: 10px;
+    position: relative;
+    bottom: 1px;
+  }
+}
+
+input {
+  border: none;
+  font-size: 16px;
+  width: 90px;
+  color: #cfd4d8;
+  caret-color: #cfd4d8;
+
+  &.selected {
+    color: #ffffff;
+    caret-color: #ffffff;
+    background-color: #d5d9dd;
+  }
+}
+
+input:focus {
+  outline: none;
+}
+
+.selected {
+  background-color: #d5d9dd;
+  border-color: #d5d9dd;
+  color: #ffffff !important;
+}

libs/ui/src/lib/tag/tag.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TagComponent } from './tag.component';
+
+describe('TagComponent', () => {
+  let component: TagComponent;
+  let fixture: ComponentFixture<TagComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TagComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TagComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/ui/src/lib/tag/tag.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit, Input, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
+import { isNullOrUndefined } from 'util';
+
+@Component({
+  selector: 'lib-tag',
+  templateUrl: './tag.component.html',
+  styleUrls: ['./tag.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TagComponent implements OnInit {
+  @Input() selected = false;
+  @Input() mode;
+  @Input() label;
+  @Output() changed = new EventEmitter<{ label: string; selected: boolean }>();
+  constructor() {}
+
+  ngOnInit() {}
+
+  clickTag(event: any) {
+    const breakingCondition = event.target.id === 'input' || (this.mode === 'input' && !this.label);
+    if (breakingCondition) {
+      return;
+    }
+    this.selected = !this.selected;
+    this.changed.emit({ label: this.label, selected: this.selected });
+  }
+
+  inputUpdated(event: any) {
+    if (isNullOrUndefined(event.target.value) || event.target.value === '') {
+      this.selected = false;
+    }
+    this.changed.emit({ label: this.label, selected: this.selected });
+  }
+}

libs/ui/src/lib/tag/tag.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TagComponent } from './tag.component';
+import { IconModule } from '../icon';
+import { FormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [TagComponent],
+  imports: [CommonModule, IconModule, FormsModule],
+  exports: [TagComponent],
+})
+export class TagModule {}

libs/ui/src/public_api.ts

@@ -19,3 +19,4 @@ export * from './lib/radio-button';
 export * from './lib/offline-overlay';
 export * from './lib/double-choice-switch';
 export * from './lib/date-picker';
+export * from './lib/tag';