hw7

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>

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,

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

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 {}

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);
+    }
+}

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';
+}