exercise 4 - Templates - Socks Shop

Author: jonathanrasquin

itenium-socks/package-lock.json

@@ -20,6 +20,7 @@
     "@angular/router": "^18.0.0",
     "@fortawesome/angular-fontawesome": "^0.15.0",
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "ngx-pagination": "^6.0.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

itenium-socks/package.json

@@ -5,16 +5,33 @@ <h2>
         Our Socks
       </h2>
     </div>
+    <div>
+      <label>
+        Filter by Name:
+        <input type="text" (input)="onFilterName($event)">
+      </label>
+      <label>
+        Filter by Color:
+        <input type="text" (input)="onFilterColor($event)">
+      </label>
+      <label>
+        Sort by:
+        <select (change)="onSortBy($event)">
+          <option value="name">Name</option>
+          <option value="price">Price</option>
+        </select>
+      </label>
+    </div>
     <div class="row">
-      <div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let sock of socks$ | async">
+      <div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let sock of filteredSocks$ | async">
         <div class="box">
           <a href="/socks/{{ sock.id }}">
             <div class="img-box">
               <img src="sock-images/Socks-{{ sock.brand }}-{{ sock.variant }}.png" />
             </div>
             <div class="detail-box">
               <h6>{{ sock.name }}</h6>
-              <h6><span>{{ sock.price }}</span></h6>
+              <h6><span>{{ sock.price | price }}</span></h6>
             </div>
             <div class="new">
               <span class="favourite" [style.color]="sock.color"><i class="fa fa-star"></i></span>
@@ -24,4 +41,8 @@ <h6><span>{{ sock.price }}</span></h6>
       </div>
     </div>
   </div>
+  <div>
+    <button (click)="onPageChange(currentPageSubject.value - 1)" [disabled]="currentPageSubject.value === 1">Previous</button>
+    <button (click)="onPageChange(currentPageSubject.value + 1)">Next</button>
+  </div>
 </section>

itenium-socks/src/app/socks/shop.component.html

@@ -1,21 +1,78 @@
 import { Component } from '@angular/core';
 import { SocksService } from './socks.service';
-import { Observable } from 'rxjs';
+import { Observable,BehaviorSubject, combineLatest  } from 'rxjs';
 import { Sock } from './sock.model';
 import { AsyncPipe, NgFor } from '@angular/common';
+import { NgxPaginationModule } from 'ngx-pagination';
+import { map } from 'rxjs/operators';
+import { PricePipe } from '../price.pipe';
 
 @Component({
   selector: 'app-shop',
   standalone: true,
-  imports: [NgFor, AsyncPipe],
+  imports: [NgFor, AsyncPipe, NgxPaginationModule, PricePipe],
   templateUrl: './shop.component.html'
 })
 export class ShopComponent {
   socks$!: Observable<Sock[]>;
+  filteredSocks$!: Observable<Sock[]>;
+
+  public nameFilterSubject = new BehaviorSubject<string>('');
+  public colorFilterSubject = new BehaviorSubject<string>('');
+  public sortBySubject = new BehaviorSubject<string>('name');
+  public currentPageSubject = new BehaviorSubject<number>(1);
+  public pageSize = 10;
 
   constructor(private socksService: SocksService) {}
 
   ngOnInit(): void {
     this.socks$ = this.socksService.get();
+
+    this.filteredSocks$ = combineLatest([
+      this.socks$,
+      this.nameFilterSubject.asObservable(),
+      this.colorFilterSubject.asObservable(),
+      this.sortBySubject.asObservable(),
+      this.currentPageSubject.asObservable()
+    ]).pipe(
+      map(([socks, nameFilter, colorFilter, sortBy, currentPage]) => {
+        let filtered = socks.filter(sock =>
+          sock.name.toLowerCase().includes(nameFilter.toLowerCase()) &&
+          sock.variant.toLowerCase().includes(colorFilter.toLowerCase())
+        );
+
+        filtered = filtered.sort((a, b) => {
+          if (sortBy === 'name') {
+            return a.name.localeCompare(b.name);
+          } else if (sortBy === 'price') {
+            return a.price - b.price;
+          }
+          return 0;
+        });
+
+        const startIndex = (currentPage - 1) * this.pageSize;
+        return filtered.slice(startIndex, startIndex + this.pageSize);
+      })
+    );
   }
+
+  onFilterName(event: Event) {
+    const name = (event.target as HTMLInputElement).value;
+    this.nameFilterSubject.next(name);
+  }
+
+  onFilterColor(event: Event) {
+    const color = (event.target as HTMLInputElement).value;
+    this.colorFilterSubject.next(color);
+  }
+
+  onSortBy(event: Event) {
+    const sortBy = (event.target as HTMLInputElement).value;
+    this.sortBySubject.next(sortBy);
+  }
+
+  onPageChange(page: number) {
+    this.currentPageSubject.next(page);
+  }
+
 }