Merge remote-tracking branch 'origin/development' into feature/HIMA-67-seemless-product-search-v2

projects/cat-service/src/lib/cat-search-mock.data.ts

@@ -6393,7 +6393,7 @@ export const CAT_SEARCH_SETTINGS = {
       { 'label': 'Berechnet', 'by': 'rank', 'desc': true },
       { 'label': 'Autor aufsteigend', 'by': 'a' },
       { 'label': 'Autor absteigend', 'by': 'a', 'desc': true },
-      { 'label': 'ET austeigend', 'by': 'pd' },
+      { 'label': 'ET aufsteigend', 'by': 'pd' },
       { 'label': 'ET absteigend', 'by': 'pd', 'desc': true },
       { 'label': 'Preis aufsteigend', 'by': 'p' },
       { 'label': 'Preis absteigend', 'by': 'p', 'desc': true },

src/app/components/product-details/product-details.component.html

@@ -57,7 +57,7 @@
         </div>
         <div class="publication-format-pages standart-text">
           <div class="publication">
-            <span>{{product.publicationDate}}</span>
+            <span>{{formatDate(product.publicationDate)}}</span>
           </div>
           <div>
             <span>|</span>

src/app/components/product-details/product-details.component.scss

@@ -91,7 +91,7 @@
 
 .icon {
     height: 17px;
-    margin-top: 2px;
+    margin-top: 4px;
 }
 
 .stock-label span {
@@ -159,6 +159,9 @@
 
 .reserve {
     padding-right: 150px;
+    background-color: transparent;
+    outline: none;
+    border: none;
 }
 
 .other-formats {

src/app/components/product-details/product-details.component.ts

@@ -9,6 +9,7 @@ import { ProcessState, ProcessStateModel } from 'src/app/core/store/state/proces
 import { Select } from '@ngxs/store';
 import { stateNameErrorMessage } from '@ngxs/store/src/decorators/state';
 import { Process } from 'src/app/core/models/process.model';
+import { formatDate } from '@angular/common';
 
 @Component({
   selector: 'app-product-details',
@@ -145,4 +146,9 @@ export class ProductDetailsComponent implements OnInit {
   cartActionCompleted(open: boolean) {
     // Logic if needed
   }
+
+  formatDate(date: string): string {
+    const dateToFormat = new Date(date);
+    return `${dateToFormat.getMonth()}/${dateToFormat.getFullYear()}`;
+  }
 }

src/app/core/store/state/autocomplete.state.ts

@@ -28,7 +28,7 @@ export class AutocompleteState {
             take: 1
         }).subscribe(
             (result: PagedApiResponse<string>) => {
-                const response = result.result[0];
+                const response = result.result[1];
                 ctx.patchState({
                     ...state,
                     result: response

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

@@ -10,7 +10,9 @@
         #searchInput
         (input)="createTab()"
         (search)="search($event)"
+        (inputChange)="autocomplete($event)"
         placeholder="Titel, Autor, Verlag, Schlagwort, ..."
+        autocompletePlaceHolder="{{autocompletePlaceHolder}}"
       ></app-search>
     </div>
     <div *ngIf="searchParams">

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

@@ -27,6 +27,8 @@ import {
 import { Router } from '@angular/router';
 import { Select, Store } from '@ngxs/store';
 import { FilterState } from 'src/app/core/store/state/filter.state';
+import { AutocompleteState } from 'src/app/core/store/state/autocomplete.state';
+import { LoadAutocomplete } from 'src/app/core/store/actions/autocomplete.actions';
 
 @Component({
   selector: 'app-text-search',
@@ -41,8 +43,11 @@ export class TextSearchComponent implements OnInit, AfterViewInit {
   products$: Observable<Product[]>;
   products: Product[];
   filters: Filter[];
+  timer: any;
+  autocompletePlaceHolder = '';
   @Select(ProcessState.getProcesses) processes$: Observable<Process[]>;
   @Select(FilterState.getSelectedFilters) filters$: Observable<Filter[]>;
+  @Select(AutocompleteState.getAutocompleteResults) autocompleteResults: Observable<string>;
   processes: Process[];
 
   @Input()
@@ -50,7 +55,7 @@ export class TextSearchComponent implements OnInit, AfterViewInit {
 
   @ViewChild('searchInput') searchInput: SearchComponent;
 
-  constructor(private store: Store, private router: Router) {}
+  constructor(private store: Store, private router: Router) { }
 
   ngOnInit() {
     this.loadRecentArticles();
@@ -144,4 +149,22 @@ export class TextSearchComponent implements OnInit, AfterViewInit {
       this.createProcess();
     }
   }
+
+  autocomplete(search: string) {
+    if (search.length > 0) {
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
+      this.timer = setTimeout(() => {
+        this.store.dispatch(new LoadAutocomplete(search));
+        this.autocompleteResults.subscribe(
+          (res: string) => {
+            this.autocompletePlaceHolder = res;
+          }
+        );
+      }, 1);
+    } else {
+      this.autocompletePlaceHolder = '';
+    }
+  }
 }

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

@@ -20,6 +20,7 @@
 .search-box {
   width: 100%;
   height: 49px;
+  position: relative;
   outline: none;
   border: none;
   background-color: transparent;
@@ -30,6 +31,26 @@
   color: black;
   font-weight: bold;
   font-size: 21px;
+  z-index: 7;
+}
+
+.autocomplete {
+  position: relative;
+  left: 21px;
+  top: -57px;
+  z-index: 1;
+  color: silver;
+  font-weight: bold;
+  font-size: 21px;
+  width: 180%;
+  height: 49px;
+  outline: none;
+  border: none;
+}
+
+.autocomplete-wrapper {
+  overflow: inherit;
+  position: absolute;
 }
 
 .search-icon {

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

@@ -7,10 +7,6 @@ import {
   ElementRef,
   EventEmitter
 } from '@angular/core';
-import { Store, Select } from '@ngxs/store';
-import { LoadAutocomplete } from 'src/app/core/store/actions/autocomplete.actions';
-import { AutocompleteState } from 'src/app/core/store/state/autocomplete.state';
-import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-search',
@@ -25,7 +21,6 @@ import { Observable } from 'rxjs';
         type="text"
         #search
       />
-      <span *ngIf="error" class="error-message">{{ error }}</span>
       <img
         (click)="clear()"
         *ngIf="input.length"
@@ -35,9 +30,12 @@ import { Observable } from 'rxjs';
       <img
         (click)="emitSearch(input)"
         class="search-icon"
-        src="/assets/images/search.svg"
+        src="/assets/images/Search_Icon.svg"
       />
     </div>
+    <div class="autocomplete-wrapper">
+      <input type="text" class="autocomplete" disabled value="{{autocompletePlaceHolder}}" />
+    </div>
   `,
   styleUrls: ['./search-input.component.scss']
 })
@@ -45,13 +43,12 @@ export class SearchComponent implements OnInit {
   @Input() placeholder = '';
   @Input() input = '';
   @Input() error = '';
+  @Input() autocompletePlaceHolder = '';
   @Output() inputChange = new EventEmitter();
   @Output() search = new EventEmitter();
   @Output() keypress = new EventEmitter();
   @ViewChild('search') searchInput: ElementRef;
-  @Select(AutocompleteState.getAutocompleteResults) autocompleteResults: Observable<string>;
-  constructor(private store: Store) { }
-  statingTime = new Date(2018, 1, 1);
+  constructor() { }
 
   ngOnInit() {
   }
@@ -63,22 +60,6 @@ export class SearchComponent implements OnInit {
   change(text: string) {
     this.input = text;
     this.inputChange.emit(text);
-    if (text.length > 0) {
-      const lastSearchTime = this.statingTime.getTime();
-      const date = new Date();
-      const currSearchTime = date.getTime();
-      const timeDiff = Math.abs(currSearchTime - lastSearchTime);
-      const diffSeconds = Math.ceil(timeDiff / 1000);
-      console.log(diffSeconds);
-      if (diffSeconds < 1.1) {
-        return;
-      }
-      this.statingTime = date;
-      this.store.dispatch(new LoadAutocomplete(text));
-      this.autocompleteResults.subscribe(
-        (res: string) => console.log(res)
-      );
-    }
   }
 
   clear() {

src/assets/images/Search_Icon.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" 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>Search_Icon</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="UC1_03_Hugendubel_Instoreapp_Kunden_Artikelrecherche_1" transform="translate(-611.000000, -443.000000)" fill="#F70400" stroke="#FB0000">
+            <path d="M615.932133,459.837311 C614.342267,458.2472 613.466667,456.133489 613.466667,453.884844 C613.466667,451.6362 614.342267,449.522244 615.932378,447.932378 C617.522244,446.342267 619.6362,445.466667 621.884844,445.466667 C624.133489,445.466667 626.247444,446.342267 627.837311,447.932133 C631.119467,451.214289 631.119467,456.554667 627.837311,459.837067 C626.247444,461.426933 624.133489,462.302533 621.884844,462.302533 C619.6362,462.302533 617.522244,461.426933 615.932133,459.837311 Z M629.371444,460.334511 C632.7174,456.455422 632.553622,450.574578 628.874244,446.8952 C627.007422,445.028133 624.525089,444 621.884844,444 C619.2446,444 616.762022,445.028133 614.8952,446.8952 C613.028133,448.762022 612,451.244356 612,453.884844 C612,456.525089 613.028133,459.007422 614.8952,460.874244 C616.762022,462.741311 619.244356,463.769444 621.8846,463.769444 C624.278933,463.769444 626.541267,462.921467 628.334756,461.371933 L632.7482,465.785378 C632.8912,465.928378 633.078933,466 633.266667,466 C633.4544,466 633.642133,465.928378 633.785133,465.785133 C634.071622,465.498889 634.071622,465.034689 633.785133,464.748444 L629.371444,460.334511 Z" id="Search_Icon"></path>
+        </g>
+    </g>
+</svg>