Merge branch 'development' of https://bitbucket.org/umwerk/instore-ma-app into development

src/app/modules/article-search/components/text-search/text-search.component.html

@@ -6,27 +6,12 @@
       >
     </div>
     <div class="align-center search-container">
-      <div class="search-wrapper">
-        <input
-          [(ngModel)]="searchParams"
-          (keypress)="keyHandler($event)"
-          class="search-box"
-          placeholder="Titel, Autor, Verlag, Schlagwort, ..."
-          type="text"
-          #search
-        />
-        <img
-          (click)="clear()"
-          *ngIf="searchParams"
-          class="clear-icon"
-          src="/assets/images/close.svg"
-        />
-        <img
-          (click)="search()"
-          class="search-icon"
-          src="/assets/images/search.svg"
-        />
-      </div>
+      <app-search
+        #searchInput
+        (input)="createTab()"
+        (search)="search($event)"
+        placeholder="Titel, Autor, Verlag, Schlagwort, ..."
+      ></app-search>
     </div>
     <div *ngIf="searchParams">
       <app-filter></app-filter>

src/app/modules/article-search/components/text-search/text-search.component.scss

@@ -51,61 +51,19 @@
 .article-search-description {
   font-size: 22px;
 }
-
-.search-box {
-  width: 100%;
-  height: 49px;
-  outline: none;
-  border: none;
-  background-color: transparent;
-  margin-left: 20px;
-  padding-top: 5px;
-  text-overflow: ellipsis;
-  padding-bottom: 5px;
-  color: black;
-  font-weight: bold;
-  font-size: 21px;
-  caret-color: $hima-button-color;
-}
-
-.search-icon {
-  top: calc(50% - 10px);
-  z-index: 2;
-  width: 20px;
-  margin: 20px;
-}
-
-.clear-icon {
-  z-index: 2;
-  width: 20px;
-  margin: 20px;
-}
-
-.search-box::placeholder {
-  color: black;
-}
-
 .search-container {
   display: flex;
   align-items: center;
   justify-content: center;
-}
-
-@media screen and (max-width: 1190px) {
-  .search-wrapper {
-    width: 62%;
+  app-search {
+    width: 75%;
   }
 }
 
-.search-wrapper {
-  margin-top: 20px;
-  width: 75%;
-  position: relative;
-  height: 60px;
-  border-radius: 40px;
-  border: 1px solid $color-inactive;
-  outline: none;
-  display: flex;
+@media screen and (max-width: 1190px) {
+  app-search {
+    width: 62%;
+  }
 }
 
 .recent-search-continer {

src/app/modules/article-search/components/text-search/text-search.component.ts

@@ -1,3 +1,4 @@
+import { SearchComponent } from './../../../../shared/components/search-input/search-input.component';
 import { Observable } from 'rxjs';
 import { Breadcrumb } from 'src/app/core/models/breadcrumb.model';
 import { Filter } from 'src/app/core/models/filter.model';
@@ -45,7 +46,7 @@ export class TextSearchComponent implements OnInit, AfterViewInit {
   @Input()
   searchParams = '';
 
-  @ViewChild('search') searchInput: ElementRef;
+  @ViewChild('searchInput') searchInput: SearchComponent;
 
   constructor(private store: Store, private router: Router) {}
 
@@ -53,10 +54,11 @@ export class TextSearchComponent implements OnInit, AfterViewInit {
     this.loadRecentArticles();
   }
   ngAfterViewInit() {
-    this.searchInput.nativeElement.focus();
+    this.searchInput.focus();
   }
 
-  search() {
+  search(searchParams) {
+    this.searchParams = searchParams;
     if (!this.searchParams) {
       return;
     }
@@ -82,18 +84,9 @@ export class TextSearchComponent implements OnInit, AfterViewInit {
     this.searchParams = null;
   }
 
-  keyHandler(event: any) {
-    this.createProcessIfDosntExists();
-    if (event.key === 'Enter') {
-      this.search();
-      return;
-    }
-  }
-
   showRecentSearchResults(article: RecentArticleSearch) {
-    this.searchParams = article.name;
-    this.createProcessIfDosntExists();
-    this.search();
+    this.createTab();
+    this.search(article.name);
   }
 
   searchProductsHandler(data: any) {
@@ -148,7 +141,7 @@ export class TextSearchComponent implements OnInit, AfterViewInit {
     this.store.dispatch(new AddProcess(newProcess));
   }
 
-  createProcessIfDosntExists() {
+  createTab() {
     this.loadProcesses();
     if (this.processes.length === 0) {
       this.createProcess();

src/app/modules/customer-search/components/search-customer-card/search-customer-card.component.html

@@ -1,14 +1,17 @@
 <div class="customer-section-search">
   <div class="customer-search-title">
-      <span>Kundensuche</span>
+    <span>Kundensuche</span>
   </div>
   <div class="customer-search-description">
-      <span>Wie lautet Ihr Name, Ihre E-Mail, Adresse oder Ihre PLZ?</span>
+    <span>Wie lautet Ihr Name, Ihre E-Mail, Adresse oder Ihre PLZ?</span>
   </div>
   <div class="search-wrapper">
-      <input [(ngModel)]="searchParams" (keypress)="keyHandler($event)" class="search-box" placeholder="Name, E-Mail, PLZ" type="text" #search [ngClass]="{'error-visible' : searchError}">
-      <span *ngIf="searchError" class="error-message">Ergibt keine Suchergebnisse</span>
-      <img (click)="search()" class="search-icon" src="../../../assets/images/search.svg" alt="search">
-      <img (click)="clear()" *ngIf="searchParams" class="clear-icon" src="../../../assets/images/close.svg" alt="close">
+    <app-search
+      #searchInput
+      (search)="search($event)"
+      (input)="searchError = false; createTab()"
+      placeholder="Name, E-Mail, PLZ"
+      [error]="searchError ? 'Ergibt keine Suchergebnisse' : ''"
+    ></app-search>
   </div>
-</div>
+</div>

src/app/modules/customer-search/components/search-customer-card/search-customer-card.component.scss

@@ -35,141 +35,4 @@
   justify-content: center;
   align-items: center;
   text-align: center;
-
-  .search-box {
-    width: 100%;
-    height: 63px;
-    border-radius: 40px;
-    border: 1px solid $color-inactive;
-    outline: none;
-    padding-right: 90px;
-    padding-left: 27px;
-    font-weight: bold;
-    font-size: 21px;
-    caret-color: $hima-button-color;
-
-    &::placeholder {
-      padding-left: 15px;
-      color: #000;
-    }
-  }
-
-  .search-icon {
-    position: absolute;
-    top: 22px;
-    z-index: 2;
-    height: 23px;
-    width: 23px;
-    right: 4%;
-  }
-
-  .clear-icon {
-    position: absolute;
-    top: 23px;
-    z-index: 2;
-    width: 20px;
-    right: 11%;
-  }
-
-  .error-message {
-    animation: shake 0.3s cubic-bezier(0.7, 0.07, 0.19, 0.97) both;
-    transform: translate3d(0, 0, 0);
-    position: absolute;
-    left: 45%;
-    font-size: 14px;
-    font-weight: bold;
-    color: $hima-error-msg-color;
-  }
-
-  .error-visible {
-    padding-right: 320px;
-  }
-}
-
-// OLD IPADS
-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
-  .search-wrapper {
-    .clear-icon {
-      right: 12%;
-    }
-
-    .error-message {
-      left: 45%;
-    }
-
-    .error-visible {
-      padding-right: 310px;
-    }
-  }
-}
-
-// OLD IPADS LANDSCAPE
-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
-  .search-wrapper {
-    .clear-icon {
-      right: 10%;
-    }
-
-    .error-message {
-      left: 58%;
-    }
-  }
-}
-
-// RETINA IPADS LANDSCAPE
-@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
-  .search-wrapper {
-    .clear-icon {
-      right: 9%;
-    }
-
-    .error-message {
-      left: 66%;
-    }
-
-    .error-visible {
-      padding-right: 345px;
-    }
-  }
-}
-
-// RETINA IPADS
-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
-  .search-wrapper {
-    .clear-icon {
-      right: 11%;
-    }
-
-    .error-message {
-      left: 56%;
-    }
-
-    .error-visible {
-      padding-right: 340px;
-    }
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .error-message {
-    left: 45% !important;
-  }
-}
-
-@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);
-  }
 }

src/app/modules/customer-search/components/search-customer-card/search-customer-card.component.ts

@@ -1,3 +1,4 @@
+import { SearchComponent } from './../../../../shared/components/search-input/search-input.component';
 import {
   Component,
   OnInit,
@@ -41,17 +42,18 @@ export class SearchCustomerCardComponent implements OnInit, AfterViewInit {
   searchError = false;
 
   @Input() searchParams = '';
-  @ViewChild('search') searchInput: ElementRef;
+  @ViewChild('searchInput') searchInput: SearchComponent;
 
   constructor(private store: Store, private router: Router) {}
 
   ngOnInit() {}
 
   ngAfterViewInit() {
-    this.searchInput.nativeElement.focus();
+    this.searchInput.focus();
   }
 
-  search() {
+  search(searchParams) {
+    this.searchParams = searchParams;
     if (!this.searchParams) {
       this.searchError = false;
       return;
@@ -78,14 +80,6 @@ export class SearchCustomerCardComponent implements OnInit, AfterViewInit {
     this.searchError = !this.searchError;
   }
 
-  keyHandler(event: any) {
-    this.createProcessIfDosntExists();
-    if (event.key === 'Enter') {
-      this.search();
-      return;
-    }
-  }
-
   loadProcesses() {
     this.processes$.subscribe((data: Process[]) => (this.processes = data));
   }
@@ -109,7 +103,7 @@ export class SearchCustomerCardComponent implements OnInit, AfterViewInit {
     this.store.dispatch(new AddProcess(newProcess));
   }
 
-  createProcessIfDosntExists() {
+  createTab() {
     if (!this.searchError) {
       this.loadProcesses();
       if (this.processes.length === 0) {

src/app/shared/components/search-input/search-input.component.scss

@@ -0,0 +1,83 @@
+@import '../../../../assets/scss/variables';
+
+:host {
+  display: block;
+  position: relative;
+  width: 100%;
+}
+
+.search-wrapper {
+  margin-top: 20px;
+  position: relative;
+  height: 60px;
+  border-radius: 40px;
+  border: 1px solid $color-inactive;
+  outline: none;
+  display: flex;
+  align-items: center;
+}
+
+.search-box {
+  width: 100%;
+  height: 49px;
+  outline: none;
+  border: none;
+  background-color: transparent;
+  margin-left: 20px;
+  padding-top: 5px;
+  text-overflow: ellipsis;
+  padding-bottom: 5px;
+  color: black;
+  font-weight: bold;
+  font-size: 21px;
+  caret-color: $hima-button-color;
+}
+
+.search-icon {
+  z-index: 2;
+  width: 24px;
+  min-height: 24px;
+  margin-right: 26px;
+  margin-left: 20px;
+}
+
+.clear-icon {
+  z-index: 2;
+  width: 24px;
+  min-height: 24px;
+  margin-left: 20px;
+}
+
+.search-box::placeholder {
+  color: black;
+}
+
+.error-message {
+  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;
+  text-align: left;
+  margin-left: 20px;
+
+  color: $hima-error-msg-color;
+  white-space: nowrap;
+}
+
+@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);
+  }
+}

src/app/shared/components/search-input/search-input.component.ts

@@ -0,0 +1,70 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  Output,
+  ViewChild,
+  ElementRef,
+  EventEmitter
+} from '@angular/core';
+
+@Component({
+  selector: 'app-search',
+  template: `
+    <div class="search-wrapper">
+      <input
+        [ngModel]="input"
+        (ngModelChange)="change($event)"
+        (keypress)="keyHandler($event)"
+        class="search-box"
+        [placeholder]="placeholder"
+        type="text"
+        #search
+      />
+      <span *ngIf="error" class="error-message">{{ error }}</span>
+      <img
+        (click)="clear()"
+        *ngIf="input.length"
+        class="clear-icon"
+        src="/assets/images/close.svg"
+      />
+      <img
+        (click)="search.emit(input)"
+        class="search-icon"
+        src="/assets/images/search.svg"
+      />
+    </div>
+  `,
+  styleUrls: ['./search-input.component.scss']
+})
+export class SearchComponent implements OnInit {
+  @Input() placeholder = '';
+  @Input() input = '';
+  @Input() error = '';
+  @Output() inputChange = new EventEmitter();
+  @Output() search = new EventEmitter();
+  @Output() keypress = new EventEmitter();
+  @ViewChild('search') searchInput: ElementRef;
+  constructor() {}
+
+  ngOnInit() {}
+
+  focus() {
+    this.searchInput.nativeElement.focus();
+  }
+
+  change(text: string) {
+    this.input = text;
+    this.inputChange.emit(text);
+  }
+
+  clear() {
+    this.change('');
+  }
+
+  keyHandler(event: any) {
+    if (event.key === 'Enter') {
+      this.search.emit(this.input);
+    }
+  }
+}

src/app/shared/shared.module.ts

@@ -1,12 +1,19 @@
+import { FormsModule } from '@angular/forms';
 import { CardComponent } from './components/card/card.component';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { LoadingComponent } from './components/loading/loading.component';
 import { ModalComponent } from './components/modal/modal.component';
+import { SearchComponent } from './components/search-input/search-input.component';
 
-const components = [CardComponent, LoadingComponent, ModalComponent];
+const components = [
+  CardComponent,
+  LoadingComponent,
+  ModalComponent,
+  SearchComponent
+];
 @NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, FormsModule],
   exports: [...components],
   declarations: [...components],
   providers: []

src/assets/images/search.svg

@@ -1,2 +1,2 @@
 <?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" height="512px" viewBox="0 0 512.00025 512" width="512px"><path d="m506.140625 477.859375-120.496094-120.496094c32.597657-39.078125 50.355469-87.851562 50.355469-139.363281 0-120.480469-97.5-218-218-218-120.480469 0-218 97.5-218 218 0 120.480469 97.5 218 218 218 51.511719 0 100.285156-17.757812 139.363281-50.355469l120.496094 120.496094c7.808594 7.8125 20.472656 7.8125 28.28125 0 7.8125-7.808594 7.8125-20.472656 0-28.28125zm-288.140625-81.859375c-98.148438 0-178-79.851562-178-178s79.851562-178 178-178 178 79.851562 178 178-79.851562 178-178 178zm0 0" fill="#ea0000" stroke-width="10" stroke="#ea0000"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="512px" viewBox="0 0 512.00025 512" width="512px"><path d="m506.140625 477.859375-120.496094-120.496094c32.597657-39.078125 50.355469-87.851562 50.355469-139.363281 0-120.480469-97.5-218-218-218-120.480469 0-218 97.5-218 218 0 120.480469 97.5 218 218 218 51.511719 0 100.285156-17.757812 139.363281-50.355469l120.496094 120.496094c7.808594 7.8125 20.472656 7.8125 28.28125 0 7.8125-7.808594 7.8125-20.472656 0-28.28125zm-288.140625-81.859375c-98.148438 0-178-79.851562-178-178s79.851562-178 178-178 178 79.851562 178 178-79.851562 178-178 178zm0 0" fill="#ea0000" stroke-width="20" stroke="#ea0000"/></svg>