From d61f488aef07295e2d8c2011f867e0c26ad816b5 Mon Sep 17 00:00:00 2001
From: tshimber <tatiana.shimbereva@telekom.de>
Date: Tue, 11 Jul 2023 16:43:58 +0200
Subject: [PATCH] feat: filtering pipe added

---
 .../products-list.component.html              | 27 +++++++++----------
 .../products-list/products-list.component.ts  |  4 +--
 .../products-list/products-list.module.ts     |  2 ++
 .../filter-by-property.module.ts              | 10 +++++++
 .../filter-by-property.pipe.ts                | 27 +++++++++++++++++++
 .../shared/filter-by-property/is-string.ts    |  3 +++
 6 files changed, 56 insertions(+), 17 deletions(-)
 create mode 100644 src/app/shared/filter-by-property/filter-by-property.module.ts
 create mode 100644 src/app/shared/filter-by-property/filter-by-property.pipe.ts
 create mode 100644 src/app/shared/filter-by-property/is-string.ts

diff --git a/src/app/pages/products-list/products-list.component.html b/src/app/pages/products-list/products-list.component.html
index f85938e0..b066ab1c 100644
--- a/src/app/pages/products-list/products-list.component.html
+++ b/src/app/pages/products-list/products-list.component.html
@@ -11,23 +11,10 @@
 			let selectIndex = selectIndex
 		"
 	> -->
-
     <!-- hard -->
-    <!-- <ng-container
-		*appPagination="
-			let productsGroup of products | filterByProperty : propertyName : searchPropertyValue;
-			chankSize: 6;
-			let pageIndexes = pageIndexes;
-			let activeIndex = index;
-			let next = next;
-			let back = back;
-			let selectIndex = selectIndex
-		"
-	> -->
-
     <ng-container
         *appPagination="
-            let productsGroup of products;
+            let productsGroup of products | filterByProperty : propertyName : searchPropertyValue;
             chankSize: 6;
             let pageIndexes = pageIndexes;
             let activeIndex = index;
@@ -36,6 +23,17 @@
             let selectIndex = selectIndex
         "
     >
+        <!-- <ng-container
+        *appPagination="
+            let productsGroup of products;
+            chankSize: 6;
+            let pageIndexes = pageIndexes;
+            let activeIndex = index;
+            let next = next;
+            let back = back;
+            let selectIndex = selectIndex
+        "
+    > -->
         <div class="cards-container">
             <app-card
                 *ngFor="let product of productsGroup; trackBy: trackBy"
@@ -64,7 +62,6 @@
         </div>
     </ng-container>
 </ng-container>
-
 <ng-template #loader>
     <mat-spinner class="loader"></mat-spinner>
 </ng-template>
diff --git a/src/app/pages/products-list/products-list.component.ts b/src/app/pages/products-list/products-list.component.ts
index 89eb6dfc..07509d80 100644
--- a/src/app/pages/products-list/products-list.component.ts
+++ b/src/app/pages/products-list/products-list.component.ts
@@ -30,8 +30,8 @@ export class ProductsListComponent implements OnInit {
 
     name = 'Мышь';
 
-    readonly propertyName = 'feedbacksCount' as const; // keyof IProduct
-    searchPropertyValue = 2;
+    readonly propertyName = 'name' as const; // keyof IProduct
+    searchPropertyValue = 'а';
 
     constructor(
         // @Inject(ChangeDetectorRef) private readonly changeDetectorRef: ChangeDetectorRef,
diff --git a/src/app/pages/products-list/products-list.module.ts b/src/app/pages/products-list/products-list.module.ts
index 42d9f811..635b7aea 100644
--- a/src/app/pages/products-list/products-list.module.ts
+++ b/src/app/pages/products-list/products-list.module.ts
@@ -3,6 +3,7 @@ import {CommonModule} from '@angular/common';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
+import {FilterByPropertyModule} from 'src/app/shared/filter-by-property/filter-by-property.module';
 import {ProductsListComponent} from './products-list.component';
 import {CardModule} from './card/card.module';
 import {DumpNgIfModule} from '../../shared/dump-ng-if/dump-ng-if.module';
@@ -20,6 +21,7 @@ import {MyAsyncModule} from '../../shared/my-async/my-async.module';
         MatIconModule,
         MatButtonModule,
         MyAsyncModule,
+        FilterByPropertyModule,
     ],
     // providers: [
     //     ...CardModule.providers
diff --git a/src/app/shared/filter-by-property/filter-by-property.module.ts b/src/app/shared/filter-by-property/filter-by-property.module.ts
new file mode 100644
index 00000000..47e1bf21
--- /dev/null
+++ b/src/app/shared/filter-by-property/filter-by-property.module.ts
@@ -0,0 +1,10 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FilterByPropertyPipe} from './filter-by-property.pipe';
+
+@NgModule({
+    imports: [CommonModule],
+    declarations: [FilterByPropertyPipe],
+    exports: [FilterByPropertyPipe],
+})
+export class FilterByPropertyModule {}
diff --git a/src/app/shared/filter-by-property/filter-by-property.pipe.ts b/src/app/shared/filter-by-property/filter-by-property.pipe.ts
new file mode 100644
index 00000000..f72a180b
--- /dev/null
+++ b/src/app/shared/filter-by-property/filter-by-property.pipe.ts
@@ -0,0 +1,27 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {isString} from './is-string';
+
+@Pipe({
+    name: 'filterByProperty',
+})
+export class FilterByPropertyPipe implements PipeTransform {
+    transform<T, P extends keyof T>(
+        items: T[] | undefined | null,
+        searchingProperty: P,
+        searchValue: T[P],
+    ): T[] | undefined | null {
+        if (!items?.length) {
+            return items;
+        }
+
+        if (isString(searchValue)) {
+            const searchValueUpperCase = searchValue.toUpperCase();
+
+            return items.filter(item =>
+                (item[searchingProperty] as string).toUpperCase().includes(searchValueUpperCase),
+            );
+        }
+
+        return items.filter(item => item[searchingProperty] === searchValue);
+    }
+}
diff --git a/src/app/shared/filter-by-property/is-string.ts b/src/app/shared/filter-by-property/is-string.ts
new file mode 100644
index 00000000..cb4a1ade
--- /dev/null
+++ b/src/app/shared/filter-by-property/is-string.ts
@@ -0,0 +1,3 @@
+export function isString(item: any): item is string {
+    return typeof item === 'string';
+}