[HIMA-97] Scroll to last product

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

@@ -1,7 +1,8 @@
 <div
   class="card-container"
   [ngClass]="{ recommanded: product.recommandation }"
-  (click)="productDetails(product)"
+  (click)="productDetails(product, cardContainer)"
+  #cardContainer
 >
   <div class="icon-container">
     <img class="product-icon" [src]="imageUrl$ | async" />

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

@@ -20,6 +20,10 @@ export class ProductCardComponent implements OnInit {
 
   private _product: Product;
   @Select(ProcessState.getProducts) items$: Observable<ItemDTO[]>;
+
+  @Input() index: number;
+
+  getScrollPositionForProduct
   @Input()
   get product() { return this._product; }
   set product(val) {
@@ -65,7 +69,7 @@ export class ProductCardComponent implements OnInit {
     );
   }
 
-  productDetails(product: Product) {
+  productDetails(product: Product, element: HTMLElement) {
     // TODO: this is temporary solution for the incostency of product detail API
     this.items$.pipe(
       map(item => {
@@ -74,7 +78,7 @@ export class ProductCardComponent implements OnInit {
         }
       })
     ).subscribe(
-      (data: ItemDTO) => this.store.dispatch(new AddSelectedProduct(data))
+      (data: ItemDTO) => this.store.dispatch(new AddSelectedProduct(data, this.index))
     );
 
     const currentRoute = 'product-details/' + product.id;
@@ -82,7 +86,5 @@ export class ProductCardComponent implements OnInit {
     this.router.navigate([currentRoute]);
   }
 
-  ngOnInit() {
-  }
-
+  ngOnInit() {}
 }

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

@@ -8,10 +8,11 @@
     </div>
   </div>
 
-  <cdk-virtual-scroll-viewport itemSize="190" class="viewport">
-    <div *cdkVirtualFor="let product of ds;" class="product-item">
+  <cdk-virtual-scroll-viewport itemSize="190" class="viewport" #scroller>
+    <div *cdkVirtualFor="let product of ds; let i = index" class="product-item">
       <app-product-card
         [product]="product"
+        [index]="i"
         *ngIf="product != null; else loadingComponent"
       >
       </app-product-card>

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

@@ -1,6 +1,6 @@
 import { FilterState } from './../../core/store/state/filter.state';
 import { ProductService } from './../../core/services/product.service';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
 import { Search } from 'src/app/core/models/search.model';
 import { Process } from 'src/app/core/models/process.model';
 import { Product } from 'src/app/core/models/product.model';
@@ -22,6 +22,7 @@ import { DataSource, CollectionViewer } from '@angular/cdk/collections';
 import { procuctsMock } from 'mocks/products.mock';
 import { NotifierState } from 'src/app/core/store/state/notifier.state';
 import { Notify } from 'src/app/core/store/actions/notifier.actions';
+import {CdkVirtualScrollViewport} from '@angular/cdk/scrolling';
 
 @Component({
   selector: 'app-search-results',
@@ -29,12 +30,15 @@ import { Notify } from 'src/app/core/store/actions/notifier.actions';
   styleUrls: ['./search-results.component.scss'],
   animations: [staggerAnimation]
 })
-export class SearchResultsComponent implements OnInit {
+export class SearchResultsComponent implements OnInit, AfterViewInit {
   @Select(ProcessState.getProcesses) processes$: Observable<Process[]>;
+  @Select(ProcessState.getScrollPositionForProduct) scrollTo$: Observable<number>;
+  index:number;
   currentSearch: Search;
   products: Product[];
   @Select(ProcessState.getProducts) products$: Observable<ItemDTO[]>;
   skip = 0;
+  @ViewChild('scroller') scroller: CdkVirtualScrollViewport;
 
   dummies = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
   ds: SearchDataSource;
@@ -51,6 +55,13 @@ export class SearchResultsComponent implements OnInit {
       this.router.navigate(['dashboard']);
       return;
     }
+    
+    this.scrollTo$.subscribe((index: number) => {
+      if (index) {
+        this.index = index;
+      }
+    });
+
     this.store.select(NotifierState.getNotifier)
       .subscribe(
         (notification: boolean) => {
@@ -64,6 +75,7 @@ export class SearchResultsComponent implements OnInit {
             );
           }
         }
+
       );
     this.ds = new SearchDataSource(
       this.productService,
@@ -73,6 +85,15 @@ export class SearchResultsComponent implements OnInit {
     );
   }
 
+  ngAfterViewInit(){
+    setTimeout(() => {
+      if (this.index) {
+        this.scroller.scrollToIndex(this.index);
+      }
+    }, 200);
+      
+  }
+
   updateSearch() {
     this.store.selectOnce(FilterState.getFilters).subscribe(fil => {
       if (!!fil) {

src/app/core/models/process.model.ts

@@ -20,4 +20,5 @@ export interface Process {
   selectedItem: ItemDTO;
   preventLoading: boolean;
   activeUser: User;
+  productScrollTo: number;
 }

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

@@ -28,5 +28,5 @@ export class SetProducts {
 export class AddSelectedProduct {
   static readonly type = ADD_SELECTED_PRODUCT;
 
-  constructor(public payload: ItemDTO) {}
+  constructor(public payload: ItemDTO, public index: number) {}
 }

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

@@ -122,6 +122,11 @@ export class ProcessState {
     return state.processes.find(t => t.selected === true).cart;
   }
 
+  @Selector()
+  static getScrollPositionForProduct(state: ProcessStateModel) {
+    return state.processes.find(t => t.selected === true).productScrollTo;
+  }
+
   @Action(actions.AddProcess)
   add(ctx: StateContext<ProcessStateModel>, { payload }: actions.AddProcess) {
     const state = ctx.getState();
@@ -488,14 +493,15 @@ export class ProcessState {
   @Action(AddSelectedProduct)
   AddSelectedProduct(
     ctx: StateContext<ProcessStateModel>,
-    { payload }: AddSelectedProduct
+    { payload, index }: AddSelectedProduct
   ) {
     const state = ctx.getState();
     ctx.patchState({
       ...state,
       processes: this.changeSelectedItemForCurrentProcess(
         state.processes,
-        payload
+        payload,
+        index
       )
     });
   }
@@ -530,11 +536,12 @@ export class ProcessState {
 
   changeSelectedItemForCurrentProcess(
     processes: Process[],
-    item: ItemDTO
+    item: ItemDTO,
+    index: number
   ): Process[] {
     const newProcessState = processes.map(process => {
       if (process.selected === true) {
-        return { ...process, selectedItem: item };
+        return { ...process, selectedItem: item, productScrollTo: index };
       }
       return { ...process };
     });