From 436815b3c43e10d355aae59b053fde94ebf0cc2f Mon Sep 17 00:00:00 2001
From: Monika <dotyk_zla@o2.pl>
Date: Thu, 2 Feb 2023 20:01:16 +0100
Subject: [PATCH 1/2] add searching by rating

---
 .../category-products.component.html          |  4 +-
 .../category-products.component.ts            | 38 +++++++++++++++++--
 .../query-models/search-params.query-model.ts |  1 +
 3 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/app/components/category-products/category-products.component.html b/src/app/components/category-products/category-products.component.html
index d2c1b41b..bb580458 100644
--- a/src/app/components/category-products/category-products.component.html
+++ b/src/app/components/category-products/category-products.component.html
@@ -25,7 +25,7 @@ <h5 class="mb-3">Categories</h5>
                             <!-- title -->
                             <h5 class="mb-3">Price</h5>
 
-                            <form [formGroup]="formSearchByPrice">
+                            <form [formGroup]="searchForm">
                                 <input type="search" formControlName="priceFrom" placeholder="Price From"
                                     class="form-control mb-2">
                                 <input type="search" formControlName="priceTo" placeholder="Price To"
@@ -41,7 +41,7 @@ <h5 class="mb-3">Rating</h5>
 
                             <div class="form-check mb-2" *ngFor="let star_list of [].constructor(5); let i = index">
                                 <!-- input -->
-                                <input class="form-check-input" type="checkbox" value="{{5-i}}">
+                                <input class="form-check-input" type="checkbox" value="{{5-i}}"  (change)="onCheckChange($event)">
                                 <label class="form-check-label" for="{{5-i}}">
                                     
                                     <i class="bi bi-star-fill text-warning" *ngFor="let star_ind of [].constructor(5-i)"></i>
diff --git a/src/app/components/category-products/category-products.component.ts b/src/app/components/category-products/category-products.component.ts
index 73fbfe5f..0d895326 100644
--- a/src/app/components/category-products/category-products.component.ts
+++ b/src/app/components/category-products/category-products.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { FormControl, FormGroup } from '@angular/forms';
+import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
 import { filter, map, startWith, switchMap, tap } from 'rxjs/operators';
 import { CategoryModel } from '@app/models/category.model';
 import { ProductsService } from '@app/services/products.service';
@@ -85,16 +85,17 @@ export class CategoryProductsComponent {
 
 
    //  SEARCH BY PRICE
-   readonly formSearchByPrice: FormGroup = new FormGroup({
+   readonly searchForm: FormGroup = new FormGroup({
     priceFrom: new FormControl(),
     priceTo: new FormControl(),
+    ratingsArray: new FormArray([]),
   });
 
   readonly productsByCategory$: Observable<ProductModel[]> = combineLatest([
     this._productsService.getAll(),
     this.category,
     this.sortBy$,
-    this.formSearchByPrice.valueChanges.pipe(startWith({ priceFrom: -1, priceTo: 9999999 })),
+    this.searchForm.valueChanges.pipe(startWith({ priceFrom: -1, priceTo: 9999999 })),
   ]).pipe(
     map(
       ([products, category, sortBy, searchValues]: [
@@ -104,6 +105,8 @@ export class CategoryProductsComponent {
         SearchParamsQueryModel
       ]) => {
 
+        console.log(searchValues)
+
         const filteredProducts = products.filter(
           (product) => product.categoryId === category.id
         ).filter(
@@ -111,6 +114,10 @@ export class CategoryProductsComponent {
           (!searchValues.priceFrom || product.price >= searchValues.priceFrom)
           &&
           (!searchValues.priceTo || product.price <= searchValues.priceTo)
+          &&
+          (!searchValues.ratingsArray || 
+            searchValues.ratingsArray.length === 0 || 
+            searchValues.ratingsArray.includes(Math.floor(product.ratingValue).toString()))
 				);
         
 
@@ -191,7 +198,6 @@ export class CategoryProductsComponent {
   )
     .pipe(
       tap(([pageNumberOptions, form]) => {
-
         return this._router.navigate([], {
           queryParams: {
             pageSize: form.pageSize,
@@ -202,5 +208,29 @@ export class CategoryProductsComponent {
     )
     .subscribe();
 
+    onCheckChange(event:Event) {
+      const formArray: FormArray = this.searchForm.get('ratingsArray') as FormArray;
+      const eventTarget = event.target as HTMLInputElement
 
+      /* Selected */
+      if(eventTarget.checked){
+        // Add a new control in the arrayForm
+        formArray.push(new FormControl(eventTarget.value));
+      }
+      /* unselected */
+      else{
+        // find the unselected element
+        let i: number = 0;
+    
+        formArray.controls.forEach((ctrl: AbstractControl) => {
+          if(ctrl.value == eventTarget.value) {
+            // Remove the unselected element from the arrayForm
+            formArray.removeAt(i);
+            return;
+          }
+    
+          i++;
+        });
+      }
+    }
 }
diff --git a/src/app/query-models/search-params.query-model.ts b/src/app/query-models/search-params.query-model.ts
index 0394907a..99cc8598 100644
--- a/src/app/query-models/search-params.query-model.ts
+++ b/src/app/query-models/search-params.query-model.ts
@@ -1,4 +1,5 @@
 export interface SearchParamsQueryModel {
   readonly priceFrom: number;
   readonly priceTo: number;
+  readonly ratingsArray: string[];
 }

From 11c1f88819e32daedd5d9126cca33fddae9fda71 Mon Sep 17 00:00:00 2001
From: Monika <dotyk_zla@o2.pl>
Date: Thu, 2 Feb 2023 20:08:11 +0100
Subject: [PATCH 2/2] remove priceTo from startWith

---
 .../components/category-products/category-products.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/category-products/category-products.component.ts b/src/app/components/category-products/category-products.component.ts
index 0d895326..8cc39997 100644
--- a/src/app/components/category-products/category-products.component.ts
+++ b/src/app/components/category-products/category-products.component.ts
@@ -95,7 +95,7 @@ export class CategoryProductsComponent {
     this._productsService.getAll(),
     this.category,
     this.sortBy$,
-    this.searchForm.valueChanges.pipe(startWith({ priceFrom: -1, priceTo: 9999999 })),
+    this.searchForm.valueChanges.pipe(startWith({ priceFrom: -1 })),
   ]).pipe(
     map(
       ([products, category, sortBy, searchValues]: [