Added Pagination for Products Page. (#136)

src/app/app.module.ts

@@ -9,6 +9,7 @@ import { HttpModule } from '@angular/http';
 import { RouterModule, PreloadAllModules } from '@angular/router';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 
+
 // Components
 import { AppComponent } from './app.component';
 // Routes
@@ -43,7 +44,8 @@ import 'rxjs/add/observable/of';
   ],
   imports: [
     RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
-    StoreModule.forRoot(reducers, { metaReducers }), 
+    StoreModule.forRoot(reducers, { metaReducers }),
+
 
     /**
      * Store devtools instrument the store retaining past versions of state

src/app/core/services/product.service.ts

@@ -43,7 +43,7 @@ export class ProductService {
    *
    * @memberof ProductService
    */
-  getProducts(): any { return this.http.get<Array<Product>>(`api/v1/products?per_page=20`) }
+  getProducts(pageNumber: number): Observable<{}> { return this.http.get<Array<Product>>(`api/v1/products?page=${pageNumber}&per_page=20`) }
 
   markAsFavorite(id: number): Observable<{}> { return this.http.post<{}>(`favorite_products`, { id: id }) }
 
@@ -63,11 +63,10 @@ export class ProductService {
   }
 
   getproductsByKeyword(keyword: string): Observable<Array<Product>> {
-    return this.http.get<Array<Product>>(`api/v1/products?${keyword}`)
+    return this.http.get<Array<Product>>(`api/v1/products?${keyword}&per_page=20`)
   }
 
   getChildTaxons(taxonomyId: string, taxonId: string): Observable<Array<Taxonomy>> {
     return this.http.get<Array<Taxonomy>>(`/api/v1/taxonomies/${taxonomyId}/taxons/${taxonId}`)
   }
-
 }

src/app/home/content/product-list/product-list.component.html

@@ -45,5 +45,7 @@ <h3 *ngIf="products.total_count === 0">Sorry, no results found! Please check the
         </div>
       </li>
     </ul>
+    <pagination *ngIf="products.total_count > products.per_page" [totalItems]="products.total_count" [itemsPerPage]="products.per_page"
+      [(ngModel)]="products.current_page" (pageChanged)="pageChanged($event)"></pagination>
   </section>
 </div>

src/app/home/content/product-list/product-list.component.ts

@@ -1,13 +1,11 @@
 import { getSelectedTaxonIds } from './../../reducers/selectors';
-import { Observable } from 'rxjs/Observable';
-import { CheckoutService } from './../../../core/services/checkout.service';
 import { CheckoutActions } from './../../../checkout/actions/checkout.actions';
 import { AppState } from './../../../interfaces';
 import { Store } from '@ngrx/store';
 import { Product } from './../../../core/models/product';
 import { environment } from './../../../../environments/environment';
 import { Component, OnInit, Input } from '@angular/core';
-
+import { Router, ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-product-list',
@@ -18,13 +16,19 @@ export class ProductListComponent implements OnInit {
   @Input() products;
   @Input('taxonIds') selectedTaxonIds;
   @Input() toggleLayout;
-
-
+  page: number;
+  queryParams: any;
 
   constructor(
-    private checkoutService: CheckoutService,
     private store: Store<AppState>,
-    private checkoutActions: CheckoutActions) { }
+    private checkoutActions: CheckoutActions,
+    private router: ActivatedRoute,
+    private routernomal: Router) {
+    this.router.queryParams
+      .subscribe(params => {
+        this.queryParams = params
+      });
+  }
 
   ngOnInit() { }
 
@@ -44,4 +48,14 @@ export class ProductListComponent implements OnInit {
   trackByFn(index, item) {
     return index;
   }
+
+  pageChanged(event: any): void {
+    this.page = event.page;
+    const urlTree = this.routernomal.createUrlTree([], {
+      queryParams: { page: this.page },
+      queryParamsHandling: 'merge',
+      preserveFragment: true
+    });
+    this.routernomal.navigateByUrl(urlTree);
+  }
 }

src/app/home/home.component.ts

@@ -22,7 +22,7 @@ import { Product } from '../core/models/product';
       <app-categories
         [taxonomiList]="taxonomies$ | async"
         (onSelected)= "OnCategeorySelected($event)"
-        (showAllProducts)="showAllProducts()"
+        (showAll)="showAll()"
         [isFilterOn]= "isFilterOn"
         [categoryLevel]= "categoryLevel$ | async" >
       </app-categories>
@@ -48,14 +48,15 @@ export class HomeComponent implements OnInit {
   products: any;
   isProducts = false;
   isFilterOn = false;
+  gopal = false;
 
   constructor(
     private store: Store<AppState>,
     private actions: ProductActions,
     private searchActions: SearchActions,
     private productService: ProductService) {
     // Get all products for the product list component
-    this.store.dispatch(this.actions.getAllProducts());
+    this.store.dispatch(this.actions.getAllProducts(1));
     this.store.dispatch(this.actions.getAllTaxonomies());
     // this.products$ = this.store.select(getProducts);
     this.taxonomies$ = this.store.select(getTaxonomies);
@@ -79,8 +80,7 @@ export class HomeComponent implements OnInit {
     this.brands$ = this.store.select(taxonomiByName)
     this.isFilterOn = true
   }
-  showAllProducts() {
-    this.store.select(showAllProducts)
-      .subscribe(data => this.products = data)
+  showAll() {
+    this.isFilterOn = false
   }
 }

src/app/home/index.ts

@@ -1,3 +1,4 @@
+import { PaginationModule } from 'ngx-bootstrap/pagination';
 import { BrandFilterComponent } from './sidebar/brand-filter/brand-filter.component';
 import { CategoriesComponent } from './sidebar/categories/categories.component';
 import { LpTrItemComponent } from './landing/lp-top-rated/lp-tr-item/lp-tr-item.component';
@@ -77,6 +78,7 @@ import { reducers } from './reducers/index';
     RouterModule.forChild(routes),
     CarouselModule,
     DragScrollModule,
+    PaginationModule.forRoot(),
 
     /**
      * StoreModule.forFeature is used for composing state

src/app/home/sidebar/categories/categories.component.html

@@ -1,21 +1,23 @@
-<ul class="list-group" *ngIf="taxonomiList[0]; let catgeory_taxonomy">
-  <h4> Catgeories</h4>
-  <li *ngFor="let categoryItem of catgeory_taxonomy.root.taxons" (click)="emitSelection(categoryItem.id)">
-    <a class="list-group-item list-group-item-action" [routerLink]="['/products']" [queryParams]="{'q[name_cont]': categoryItem.name, id: categoryItem.id}">
-      {{categoryItem.name}}
-    </a>
-  </li>
-</ul>
+<div *ngIf="!isFilterOn">
+  <ul class="list-group" *ngIf="taxonomiList[0]; let catgeory_taxonomy">
+    <h4> Catgeories</h4>
+    <li *ngFor="let categoryItem of catgeory_taxonomy.root.taxons" (click)="emitSelection(categoryItem.id)">
+      <a class="list-group-item list-group-item-action" [routerLink]="['/products']" [queryParams]="{'q[name_cont]': categoryItem.name, id: categoryItem.id, page: 1}">
+        {{categoryItem.name}}
+      </a>
+    </li>
+  </ul>
+</div>
 <!-- </div> -->
 
 <div *ngIf="isFilterOn">
   <ul class="list-group" *ngIf="taxonomiList; let child_taxonomy">
-    <h4> Catgeories</h4>
+    <h4 *ngIf="categoryLevel.length > 0"> Catgeories</h4>
     <li *ngIf="categoryLevel.length > 0">
-      <a [routerLink]="['/products']">
+
       <i class="fa fa-chevron-left" aria-hidden="true"></i>
-      <strong (click)=showAllProduct()>All</strong>
-      </a>
+      <strong (click)=showAllCategory()>All</strong>
+
     </li>
     <li *ngFor="let levels of categoryLevel; let index =i" (click)="emitSelection()">
       <a [routerLink]="['/products']" [queryParams]="{'q[name_cont]': levels.name, id: levels.id}">

src/app/home/sidebar/categories/categories.component.ts

@@ -1,13 +1,11 @@
-import { ProductActions } from './../../../product/actions/product-actions';
-import { ProductService } from './../../../core/services/product.service';
 import { ActivatedRoute } from '@angular/router';
 import { AppState } from './../../../interfaces';
 import { Store } from '@ngrx/store';
 import { SearchActions } from './../../reducers/search.actions';
 import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
 import { URLSearchParams } from '@angular/http'
 import { getChildTaxons } from '../../reducers/selectors';
-import { debug } from 'util';
+
 
 @Component({
   selector: 'app-categories',
@@ -18,20 +16,17 @@ export class CategoriesComponent implements OnInit {
   @Input() taxonomiList;
   @Input() isFilterOn;
   @Input() categoryLevel;
-  brands: any;
-
 
   @Output() onSelected = new EventEmitter<Object>();
-  @Output() showAllProducts = new EventEmitter<Object>();
+  @Output() showAll = new EventEmitter<Object>();
+
   queryParams: any;
   isItemSelected: any;
-
+  brands: any;
   constructor(
     private searchActions: SearchActions,
     private store: Store<AppState>,
-    private router: ActivatedRoute,
-    private productService: ProductService,
-    private productActions: ProductActions,
+    private router: ActivatedRoute
   ) {
     this.router.queryParams
       .subscribe(params => {
@@ -44,8 +39,10 @@ export class CategoriesComponent implements OnInit {
       this.catgeoryFilter();
     }
   }
-  showAllProduct() {
-    this.showAllProducts.emit()
+  showAllCategory() {
+    window.location.reload();
+    this.isFilterOn = false
+    this.showAll.emit()
   }
 
   /**
@@ -55,6 +52,9 @@ export class CategoriesComponent implements OnInit {
    */
   catgeoryFilter() {
     const search = new URLSearchParams();
+    if ('page' in this.queryParams) {
+      search.set('page', this.queryParams.page);
+    }
     search.set('id', this.queryParams.id);
     this.store.dispatch(this.searchActions.getProducsByTaxon(search.toString()));
   }
@@ -64,4 +64,3 @@ export class CategoriesComponent implements OnInit {
     this.onSelected.emit({ id: this.queryParams.id, name: this.queryParams['q[name_cont]'] });
   }
 }
-

src/app/layout/footer/component/footer-contact-info/footer-contact-info.component.html

@@ -27,7 +27,7 @@
       </div>
       <div class="col-12  col-md-4 col-sm-3 col-lg-3 text-right">
         <strong>
-          <a href="#main" class="backtopbtn">
+          <a class="backtopbtn" (click)="scollTop()">
             <span>Back to Top <i class="fa fa-angle-up pl-2" aria-hidden="true"></i></span>
           </a>
         </strong>

src/app/layout/footer/component/footer-contact-info/footer-contact-info.component.ts

@@ -12,5 +12,7 @@ export class FooterContactInfoComponent implements OnInit {
 
   ngOnInit() {
   }
-
+  scollTop() {
+    window.scrollTo(0, 0)
+  }
 }

src/app/layout/header/components/header-search/header-search.component.ts

@@ -22,31 +22,45 @@ export class HeaderSearchComponent implements OnInit {
     this.activatedRouter.queryParams
       .subscribe(params => {
         this.queryParams = params
+        this.loadPage()
       });
   }
 
   ngOnInit() {
-    if ('q[name_cont_all]' in this.queryParams) {
-      this.onSearch(this.queryParams['q[name_cont_all]'])
-    }
-    if ('id' in this.queryParams) {
-      this.catgeoryFilter()
-    }
+    this.loadPage();
   }
   onSearch(keyword: string) {
     if (keyword !== '') {
       keyword = keyword.trim();
       const search = new URLSearchParams();
       search.set('q[name_cont]', keyword)
+      if ('page' in this.queryParams) {
+        search.set('page', this.queryParams.page)
+      }
       this.store.dispatch(this.searchActions.getproductsByKeyword(search.toString()));
-      this.router.navigate(['/products'], { queryParams: { 'q[name_cont_all]': keyword } });
+      this.router.navigate(['/products'], { queryParams: { 'q[name_cont_all]': keyword, 'page': this.queryParams.page } });
       this.store.dispatch(this.searchActions.clearCategeoryLevel());
     }
   }
 
   catgeoryFilter() {
     const search = new URLSearchParams();
     search.set('id', this.queryParams.id);
+    search.set('page', this.queryParams.page)
     this.store.dispatch(this.searchActions.getProducsByTaxon(search.toString()));
   }
+
+  loadPage() {
+    if ('q[name_cont_all]' in this.queryParams && 'page' in this.queryParams) {
+      this.onSearch(this.queryParams['q[name_cont_all]'])
+    } else if ('q[name_cont_all]' in this.queryParams) {
+      this.onSearch(this.queryParams['q[name_cont_all]'])
+    }
+
+    if ('id' in this.queryParams && 'page' in this.queryParams) {
+      this.catgeoryFilter()
+    } else if ('id' in this.queryParams) {
+      this.catgeoryFilter()
+    }
+  }
 }

src/app/product/actions/product-actions.ts

@@ -12,8 +12,11 @@ export class ProductActions {
   static GET_ALL_TAXONOMIES_SUCCESS = 'GET_ALL_TAXONOMIES_SUCCESS';
   static GET_ALL_PRODUCTS_SEARCH_SUCCESS = 'GET_ALL_PRODUCTS_SEARCH_SUCCESS';
 
-  getAllProducts() {
-    return { type: ProductActions.GET_ALL_PRODUCTS };
+  getAllProducts(pageNumber: number) {
+    return {
+      type: ProductActions.GET_ALL_PRODUCTS,
+      payload: pageNumber
+    };
   }
 
   getProductDetail(id: string) {

src/app/product/effects/product.effects.ts

@@ -21,7 +21,7 @@ export class ProductEffects {
   @Effect()
   GetAllProducts$: Observable<Action> = this.actions$
     .ofType(ProductActions.GET_ALL_PRODUCTS)
-    .switchMap((action: any) => this.productService.getProducts())
+    .switchMap((action: any) => this.productService.getProducts(action.payload))
     .map((data: any) => this.productActions.getAllProductsSuccess({ products: data }));
 
   // tslint:disable-next-line:member-ordering
@@ -66,4 +66,3 @@ export class ProductEffects {
     .switchMap((action: any) => this.productService.getTaxonByName(action.payload))
     .map((data: any) => this.searchActions.getTaxonomiesByNameSuccess({ taxonomiList: data }));
 }
-

yarn.lock

@@ -4664,6 +4664,10 @@ ngx-drag-scroll@^1.7.7:
   version "1.7.8"
   resolved "https://registry.yarnpkg.com/ngx-drag-scroll/-/ngx-drag-scroll-1.7.8.tgz#9b6828bdf208eaed0da5c9bb143898665ed05d46"
 
+ngx-pagination@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/ngx-pagination/-/ngx-pagination-3.1.1.tgz#fcde5cb5fd4a1bd6aa785ff062a55f3deefcd3ac"
+
 ngx-progressbar@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ngx-progressbar/-/ngx-progressbar-2.1.1.tgz#cecd88435ac660be445caeaded19b85f4a1e47be"