Customer search error message bug fix

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

@@ -6,10 +6,11 @@ import { ItemDTO, CatImageService } from 'cat-service';
 import { Observable } from 'rxjs';
 import { getFormatedPublicationDate } from 'src/app/core/utils/product.util';
 import { ProcessState, ProcessStateModel } from 'src/app/core/store/state/process.state';
-import { Select } from '@ngxs/store';
+import { Select, Store } 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';
+import { UpdateBreadcrump } from 'src/app/core/store/actions/process.actions';
 
 @Component({
   selector: 'app-product-details',
@@ -48,7 +49,8 @@ export class ProductDetailsComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private productService: ProductService,
-    private catImageService: CatImageService
+    private catImageService: CatImageService,
+    private store: Store
   ) { }
 
   ngOnInit() {
@@ -58,7 +60,12 @@ export class ProductDetailsComponent implements OnInit {
     this.productService.getItemById(this.id).subscribe(
       (item: ItemDTO) => {
         this.item = item;
-        return this.product = this.productDetailMapper(item);
+        this.product = this.productDetailMapper(item);
+        this.store.dispatch(new UpdateBreadcrump({
+          name: this.product.title.substring(0, 12) + (this.product.title.length > 12 ? '...' : ''),
+          path: '/product-details/' + item.id
+        }));
+        return this.product;
       }
     );
     this.selectedItem$.subscribe(

src/app/components/search-results/search-results.component.ts

@@ -146,7 +146,7 @@ export class SearchDataSource extends DataSource<Product | undefined> {
   }
 
   private fetchPage(page: number) {
-    if (page == 0) {
+    if (page === 0) {
       this.results = false;
     }
     if (this.fetchedPages.has(page)) {
@@ -182,7 +182,7 @@ export class SearchDataSource extends DataSource<Product | undefined> {
           ...data.result.map(item => this.productMapping.fromItemDTO(item))
         );
         this.dataStream.next(this.cachedData);
-        this.store.dispatch(new SetProducts([...this.cachedItemsDTO]));
+        this.store.dispatch(new SetProducts([...this.cachedItemsDTO], this.search));
       });
   }
 }

src/app/core/store/actions/process.actions.ts

@@ -17,6 +17,7 @@ export const ALLOW_PRODUCT_LOAD = '[POCESS] Allow product load';
 export const ADD_USER = '[PROCESS] Add new user to store';
 export const SET_EDIT_USER = '[PROCESS] User which data will be updated';
 export const ADD_BREADCRUMB = '[PROCESS] Add breadcrumb';
+export const UPDATE_BREADCRUMB = '[PROCESS] Update breadcrumb';
 
 export class AddProcess {
     static readonly type = ADD_PROCESS;
@@ -90,3 +91,9 @@ export class AddBreadcrumb {
 
     constructor(public payload: Breadcrumb) {}
 }
+
+export class UpdateBreadcrump {
+    static readonly type = ADD_BREADCRUMB;
+
+    constructor(public payload: Breadcrumb) {}
+}

src/app/core/store/actions/product.actions.ts

@@ -22,7 +22,7 @@ export class GetProducts {
 export class SetProducts {
   static readonly type = SET_PRODUCTS;
 
-  constructor(public payload: ItemDTO[]) {}
+  constructor(public payload: ItemDTO[], public search: string) {}
 }
 
 export class AddSelectedProduct {

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

@@ -407,7 +407,8 @@ export class ProcessState {
               payload.skip === 0
                 ? this.changeProducResultsForCurrentProcess(
                     state.processes,
-                    items
+                    items,
+                    ''
                   )
                 : this.extendProducResultsForCurrentProcess(
                     state.processes,
@@ -419,7 +420,7 @@ export class ProcessState {
     }
   }
   @Action(SetProducts, { cancelUncompleted: true })
-  setProducts(ctx: StateContext<ProcessStateModel>, { payload }: SetProducts) {
+  setProducts(ctx: StateContext<ProcessStateModel>, { payload, search }: SetProducts) {
     const state = ctx.getState();
     const currentProcess = getCurrentProcess(state.processes);
 
@@ -427,7 +428,8 @@ export class ProcessState {
       ...state,
       processes: this.changeProducResultsForCurrentProcess(
         state.processes,
-        payload
+        payload,
+        search
       )
     });
   }
@@ -505,15 +507,16 @@ export class ProcessState {
 
   changeProducResultsForCurrentProcess(
     processes: Process[],
-    items: ItemDTO[]
+    items: ItemDTO[],
+    search: string
   ): Process[] {
     const newProcessState = processes.map(process => {
       if (process.selected === true) {
-        return { ...process, itemsDTO: items, loading: false };
+        return { ...this.updateBreadcrumbForCurrentProcess(process, search, '/search-results#start'), itemsDTO: items, loading: false };
       }
-      return { ...process };
+      return { ...this.updateBreadcrumbForCurrentProcess(process, search, '/search-results#start') };
     });
-    return newProcessState;
+    return  newProcessState;
   }
 
   extendProducResultsForCurrentProcess(
@@ -582,7 +585,24 @@ export class ProcessState {
     });
   }
 
-  updateBreadcrumbForCurrentProcess(process: Process, payload: string, path: string) {
+  @Action(actions.UpdateBreadcrump)
+  updateBreadcrumb(
+    ctx: StateContext<ProcessStateModel>,
+    { payload }: actions.UpdateBreadcrump
+  ) {
+    const state = ctx.getState();
+    ctx.patchState({
+      ...state,
+      processes: state.processes.map(process => {
+        if (process.selected === true) {
+          return { ...this.updateBreadcrumbForCurrentProcess(process, payload.name, payload.path) };
+        }
+        return { ...process };
+      })
+    });
+  }
+
+  updateBreadcrumbForCurrentProcess(process: Process, payload: string, path: string): Process {
     const breadcrumbExist = process.breadcrumbs.filter(
       (breadcrumb: Breadcrumb) => breadcrumb.name === payload
     );
@@ -597,8 +617,8 @@ export class ProcessState {
         return breadcrumb;
       }
     );
-    if (updatedBreadcrumbs.length < 1) {
-      return {
+    if (!updatedBreadcrumbs.find(b => b.name === payload)) {
+      return <Process>{
         ...process,
         breadcrumbs: [
           ...process.breadcrumbs,
@@ -609,9 +629,9 @@ export class ProcessState {
         ]
       };
     }
-    return  {
+    return  <Process>{
       ...process,
-      breadcrumb: [...updatedBreadcrumbs]
+      breadcrumbs: [...updatedBreadcrumbs]
     };
   }
 }

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

@@ -22,6 +22,7 @@ import {
         #search
         autofocus
       />
+      <span *ngIf="error" class="error-message">{{ error }}</span>
       <img
         (click)="clear()"
         *ngIf="input.length"
@@ -34,7 +35,7 @@ import {
         src="/assets/images/Search_Icon.svg"
       />
     </div>
-    <div class="autocomplete-wrapper">
+    <div class="autocomplete-wrapper" *ngIf="autocompletePlaceHolder">
       <input type="text" class="autocomplete" disabled value="{{autocompletePlaceHolder}}" />
     </div>
   `,
@@ -43,7 +44,7 @@ import {
 export class SearchComponent implements OnInit {
   @Input() placeholder = '';
   @Input() input = '';
-  @Input() error = '';
+  @Input() error;
   @Input() autocompletePlaceHolder = '';
   @Output() inputChange = new EventEmitter();
   @Output() search = new EventEmitter();