Sort filters 157855828

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

@@ -21,5 +21,13 @@ <h4 title="men casual shirts" class="q">Showing {{productsCount}} of {{productsT
         <li data-sortkey=":high">High</li>
       </label>
     </ul> -->
+
+    <form>
+      <select [(ngModel)]="selectedOption" name="Relevance" (click)="sortFilter()">
+        <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,19 @@ export class ContentHeaderComponent implements OnInit {
   @Input() productsCount;
   @Input() productsTotal_count;
 
+  options = [
+    { name: 'Relevance', value: 0 },
+    { name: 'Newest', value: 1 },
+    { name: 'A To Z', value: 2 },
+    { name: 'Z To A', value: 3 }
+  ]
+
+  selectedOption: string;
+  printedOption: string;
+
   selectedSize = 'COZY';
   searchKeyword = ''
-  constructor() { }
+  constructor(private routernomal: Router) { }
 
   ngOnInit() {
 
@@ -32,4 +43,38 @@ export class ContentHeaderComponent implements OnInit {
     return this.selectedSize === 'COMPACT';
   }
 
+  sortFilter() {
+    if (this.selectedOption === 'Newest') {
+      const urlTree = this.routernomal.createUrlTree([], {
+        queryParams: { 'q[s]': 'updated_at+asc' },
+        queryParamsHandling: 'merge',
+        preserveFragment: true
+      });
+      this.routernomal.navigateByUrl(urlTree);
+    }
+    if (this.selectedOption === 'Relevance') {
+      const urlTree = this.routernomal.createUrlTree([], {
+        queryParams: { 'q[s]': '' },
+        queryParamsHandling: 'merge',
+        preserveFragment: true
+      });
+      this.routernomal.navigateByUrl(urlTree);
+    }
+    if (this.selectedOption === 'A To Z') {
+      const urlTree = this.routernomal.createUrlTree([], {
+        queryParams: { 'q[s]': 'name+asc' },
+        queryParamsHandling: 'merge',
+        preserveFragment: true
+      });
+      this.routernomal.navigateByUrl(urlTree);
+    }
+    if (this.selectedOption === 'Z To A') {
+      const urlTree = this.routernomal.createUrlTree([], {
+        queryParams: { 'q[s]': 'name+desc' },
+        queryParamsHandling: 'merge',
+        preserveFragment: true
+      });
+      this.routernomal.navigateByUrl(urlTree);
+    }
+  }
 }

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

@@ -40,11 +40,22 @@ export class HeaderSearchComponent implements OnInit {
       keyword = keyword.trim();
       const search = new URLSearchParams();
       search.set('q[name_cont]', 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_all]': keyword,
+            'page': this.queryParams.page,
+            'q[s]': this.queryParams['q[s]']
+          }
+        });
       this.store.dispatch(this.searchActions.clearCategeoryLevel());
     }
   }
@@ -53,6 +64,9 @@ 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()));
   }
 
@@ -65,8 +79,14 @@ export class HeaderSearchComponent implements OnInit {
 
     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_all]' in this.queryParams) {
+      this.onSearch(this.queryParams['q[name_cont_all]'])
+    }
   }
 }

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()
   }