Sort filters 157855828 (#140)

* Added Sort filters and Pretty_name
1. Added newest,alfabetical sorts.
2. Added Pretty name for selected category.

* Fixed Requested changes

* Added Fixes

src/app/home/content/content-header/content-header.component.html

@@ -21,5 +21,14 @@ <h4 title="men casual shirts" class="q">Showing {{productsCount}} of {{productsT
         <li data-sortkey=":high">High</li>
       </label>
     </ul> -->
+
+    <form>
+      <strong>Sort by</strong><select [(ngModel)]="selectedOption" name="Relevance" (click)="sortFilter()">
+        <option [ngValue] = "Relevance">Relevance</option>
+        <option *ngFor="let opt of options">
+          {{opt.name}}
+        </option>
+      </select>
+    </form>
   </div>
 </div>

src/app/home/content/content-header/content-header.component.ts

@@ -1,3 +1,4 @@
+import { Router } from '@angular/router';
 import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
 
 @Component({
@@ -11,9 +12,23 @@ export class ContentHeaderComponent implements OnInit {
   @Input() productsCount;
   @Input() productsTotal_count;
 
+  options = [
+    { name: 'Newest', value: 1 },
+    { name: 'A To Z', value: 2 },
+    { name: 'Z To A', value: 3 }
+  ]
+  queryMap = {
+    Newest: 'updated_at+asc',
+    Relevance: '',
+    'A To Z': 'ascend_by_master_price',
+    'Z To A': 'name+desc',
+  }
+
+  selectedOption: 'Relevance';
+
   selectedSize = 'COZY';
   searchKeyword = ''
-  constructor() { }
+  constructor(private routernomal: Router) { }
 
   ngOnInit() {
 
@@ -32,4 +47,12 @@ export class ContentHeaderComponent implements OnInit {
     return this.selectedSize === 'COMPACT';
   }
 
+  sortFilter() {
+    const urlTree = this.routernomal.createUrlTree([], {
+      queryParams: { 'q[s]': this.queryMap[this.selectedOption] },
+      queryParamsHandling: 'merge',
+      preserveFragment: true
+    });
+    this.routernomal.navigateByUrl(urlTree);
+  }
 }

src/app/home/home.component.ts

@@ -48,7 +48,6 @@ export class HomeComponent implements OnInit {
   products: any;
   isProducts = false;
   isFilterOn = false;
-  gopal = false;
 
   constructor(
     private store: Store<AppState>,

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

@@ -12,6 +12,7 @@ <h4> Catgeories</h4>
 
 <div *ngIf="isFilterOn">
   <ul class="list-group" *ngIf="taxonomiList; let child_taxonomy">
+    <p>{{taxonomiList.pretty_name}}</p>
     <h4 *ngIf="categoryLevel.length > 0"> Catgeories</h4>
     <li *ngIf="categoryLevel.length > 0">
       <i class="fa fa-chevron-left" aria-hidden="true"></i>

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

@@ -2,7 +2,7 @@ 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 { Component, OnInit, Input, EventEmitter, Output, OnChanges } from '@angular/core';
 import { URLSearchParams } from '@angular/http'
 import { getChildTaxons } from '../../reducers/selectors';
 

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

@@ -39,12 +39,23 @@ export class HeaderSearchComponent implements OnInit {
     if (keyword !== '') {
       keyword = keyword.trim();
       const search = new URLSearchParams();
-      search.set('q[name_cont]', keyword)
+      search.set('q[name_cont_any]', keyword)
+
       if ('page' in this.queryParams) {
         search.set('page', this.queryParams.page)
       }
+      if ('q[s]' in this.queryParams) {
+        search.set('q[s]', this.queryParams['q[s]'])
+      }
       this.store.dispatch(this.searchActions.getproductsByKeyword(search.toString()));
-      this.router.navigate(['/search'], { queryParams: { 'q[name_cont_all]': keyword, 'page': this.queryParams.page } });
+      this.router.navigate(
+        ['/search'], {
+          queryParams: {
+            'q[name_cont_any]': keyword,
+            'page': this.queryParams.page,
+            'q[s]': this.queryParams['q[s]']
+          }
+        });
       this.store.dispatch(this.searchActions.clearCategeoryLevel());
     }
   }
@@ -53,20 +64,29 @@ export class HeaderSearchComponent implements OnInit {
     const search = new URLSearchParams();
     search.set('id', this.queryParams.id);
     search.set('page', this.queryParams.page)
+    if ('q[s]' in this.queryParams) {
+      search.set('q[s]', this.queryParams['q[s]'])
+    }
     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 ('q[name_cont_any]' in this.queryParams && 'page' in this.queryParams) {
+      this.onSearch(this.queryParams['q[name_cont_any]'])
+    } else if ('q[name_cont_any]' in this.queryParams) {
+      this.onSearch(this.queryParams['q[name_cont_any]'])
     }
 
     if ('id' in this.queryParams && 'page' in this.queryParams) {
       this.catgeoryFilter()
+    } else if ('id' in this.queryParams && 'q[s]' in this.queryParams) {
+      this.catgeoryFilter()
     } else if ('id' in this.queryParams) {
       this.catgeoryFilter()
     }
+
+    if ('q[s]' in this.queryParams && 'q[name_cont_any]' in this.queryParams) {
+      this.onSearch(this.queryParams['q[name_cont_any]'])
+    }
   }
 }

src/app/layout/header/header.component.ts

@@ -104,8 +104,6 @@ export class HeaderComponent implements OnInit {
     this.isAuthenticated = this.store.select(getAuthStatus);
     this.totalCartItems = this.store.select(getTotalCartItems);
     this.screenwidth = window.outerWidth;
-
-
 
     this.test()
   }

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

@@ -12,7 +12,7 @@ export class ProductActions {
   static GET_ALL_TAXONOMIES_SUCCESS = 'GET_ALL_TAXONOMIES_SUCCESS';
   static GET_ALL_PRODUCTS_SEARCH_SUCCESS = 'GET_ALL_PRODUCTS_SEARCH_SUCCESS';
 
-  getAllProducts(pageNumber= 1) {
+  getAllProducts(pageNumber = 1) {
     return {
       type: ProductActions.GET_ALL_PRODUCTS,
       payload: pageNumber