lab 4

Author: ARCHER1511

src/Interfaces/IProduct.ts

@@ -1,9 +1,11 @@
-export interface IProduct 
-{
-    id : number;
+import { IRating } from "./IRating";
+
+export interface IProduct {
+    id: number;
     title: string;
     price: number;
     description: string;
     category: string;
     image: string;
+    rating: IRating;
 }

src/Interfaces/IRating.ts

@@ -0,0 +1,4 @@
+export interface IRating {
+  rate: number;
+  count: number;
+}

src/app/app.config.ts

@@ -3,7 +3,11 @@ import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
+import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration(withEventReplay())]
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }),
+            provideRouter(routes), 
+            provideClientHydration(withEventReplay()),
+            provideHttpClient()]
 };

src/app/app.routes.ts

@@ -7,6 +7,7 @@ export const routes: Routes = [
     {path:'products', loadComponent: ()=> import('./pages/all-products/all-products.component').then(m => m.AllProductsComponent), title: 'Products'},
     {path: 'products/:id', loadComponent: () => import('./pages/details/details.component').then(m => m.DetailsComponent), title: 'Product Details'},
     {path: 'categories', loadComponent: () => import('./pages/category/category.component').then(m => m.CategoryComponent), title: 'Categories'},
+    {path: 'jewelery', loadComponent: () => import('./pages/jewelery/jewelery.component').then(m => m.JeweleryComponent), title: 'Jewelery'},
     {path: '**', redirectTo: 'not_found', pathMatch: 'full'},
     {path: 'not_found', loadComponent: () => import('./pages/not-found/not-found.component').then(m => m.NotFoundComponent), title: 'Not Found'}
 ];

src/app/components/feature-product/feature-product.component.ts

@@ -1,15 +1,33 @@
-import { Component, inject} from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ProductService } from '../../services/product.service';
 import { IProduct } from '../../../Interfaces/IProduct';
 import { RouterLink } from '@angular/router';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-feature-product',
   imports: [RouterLink],
   templateUrl: './feature-product.component.html',
   styleUrl: './feature-product.component.scss'
 })
-export class FeatureProductComponent {
-    readonly _products = inject(ProductService);
-    products : IProduct[] = this._products.products; // Display only the first two products
+export class FeatureProductComponent implements OnInit, OnDestroy {
+  products: IProduct[] = [];
+  private productSubscription?: Subscription;
+
+  constructor(private productService: ProductService) {}
+
+  ngOnInit(): void {
+    this.productSubscription = this.productService.getAllProducts().subscribe({
+      next: (products: IProduct[]) => {
+        this.products = products;
+      },
+      error: (err) => {
+        console.error('Error fetching products:', err);
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.productSubscription?.unsubscribe();
+  }
 }

src/app/components/jewelry/jewelry.component.html

@@ -0,0 +1,24 @@
+<div class="container mt-4">
+  <h2 class="mb-4 text-center">Jewelry Collection</h2>
+  <div class="row row-cols-1 row-cols-md-3 g-4">
+    @for (product of jewelryProducts; track product.id) {
+      <div class="col">
+        <div class="card h-100 shadow-sm">
+          <a [routerLink]="['/products', product.id]" class="text-decoration-none">
+            <img [src]="product.image" [alt]="product.title" class="card-img-top" style="height: 250px; object-fit: cover;">
+          </a>
+          <div class="card-body d-flex flex-column">
+            <h5 class="card-title">{{ product.title }}</h5>
+            <p class="text-muted">{{ product.category }}</p>
+            <p class="card-text">{{ product.description }}</p>
+            <div class="mt-auto fw-bold text-success">${{ product.price }}</div>
+            <a class="btn btn-outline-primary mt-3 w-100" [routerLink]="['/products', product.id]">Details</a>
+          </div>
+        </div>
+      </div>
+    } @empty {
+      <div class="alert alert-warning w-100 text-center">No jewelry items found.</div>
+    }
+  </div>
+</div>
+

src/app/components/jewelry/jewelry.component.scss

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { JewelryComponent } from './jewelry.component';
+
+describe('JewelryComponent', () => {
+  let component: JewelryComponent;
+  let fixture: ComponentFixture<JewelryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [JewelryComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(JewelryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/jewelry/jewelry.component.spec.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IProduct } from '../../../Interfaces/IProduct';
+import { ProductService } from '../../services/product.service';
+import { RouterLink } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+
+
+@Component({
+  standalone: true,
+  selector: 'app-jewelry',
+  imports: [CommonModule, RouterLink],
+  templateUrl: './jewelry.component.html',
+  styleUrls: ['./jewelry.component.scss']
+})
+export class JewelryComponent implements OnInit, OnDestroy {
+  jewelryProducts: IProduct[] = [];
+  private productSubscription?: Subscription;
+
+  constructor(private productService: ProductService) {}
+
+ ngOnInit(): void {
+  this.productSubscription = this.productService.getAllProducts()
+    .pipe(
+      map(data => data.filter(p => p.category === 'jewelery'))
+    )
+    .subscribe({
+      next: filtered => this.jewelryProducts = filtered,
+      error: err => console.error('Failed to fetch jewelry products', err)
+    });
+}
+
+
+
+  ngOnDestroy(): void {
+    this.productSubscription?.unsubscribe();
+  }
+}
+

src/app/components/jewelry/jewelry.component.ts

@@ -23,6 +23,9 @@
         <li class="nav-item">
           <a class="nav-link" routerLinkActive="active" routerLink="categories">Categories</a>
         </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" routerLink="jewelery">Jewelery</a>
+        </li>
       </ul>
     </div>
   </div>