feature: fetch cart products from api

- show total cart item count on header
- fetch and show cart items on cart modal

src/app/app.routes.ts

@@ -7,7 +7,6 @@ export const routes: Routes = [
   {
     path: "",
     component: Home,
-    canActivate: [authGuard],
   },
   {
     path: "",

src/app/core/layouts/header/header.html

@@ -26,12 +26,18 @@
         >
           <lucide-angular [img]="UserIcon" class="w-5" />
         </button>
-        <button class="btn btn-ghost py-1 px-2 rounded-l-none! border-l-0!">
+        <button
+          class="btn btn-ghost py-1 px-2 rounded-l-none! border-l-0! relative"
+          popovertarget="popover-2"
+          style="anchor-name: --anchor-2"
+        >
           <lucide-angular [img]="CartIcon" class="w-5" />
+          <span class="absolute top-0 text-xs ml-1">{{ cartItemCount() }}</span>
         </button>
       </div>
     </div>
   </nav>
+
   <ul class="dropdown" id="popover-1" popover style="position-anchor: --anchor-1">
     @if (authService.authState() === AuthState.Unauthenticated) {
     <li><a class="block h-full w-full" routerLink="/login">Login</a></li>
@@ -45,4 +51,12 @@
     <li><a class="block h-full w-full" href="">Wishlist</a></li>
     <li><a class="block h-full w-full" href="">Notifications</a></li>
   </ul>
+
+  <app-cart
+    [cart]="cartItem()"
+    id="popover-2"
+    class="dropdown"
+    popover
+    style="position-anchor: --anchor-2"
+  />
 </header>

src/app/core/layouts/header/header.ts

@@ -1,11 +1,13 @@
-import { Component, inject } from "@angular/core";
+import { Component, computed, inject } from "@angular/core";
 import { LucideAngularModule, Search, ShoppingCart, User } from "lucide-angular";
 import { RouterLink } from "@angular/router";
 import { AuthService, AuthState } from "../../../features/auth/services/auth-service";
+import { CartService } from "@app/core/services/cart-service";
+import { Cart } from "@app/shared/components/cart/cart";
 
 @Component({
   selector: "app-header",
-  imports: [LucideAngularModule, RouterLink],
+  imports: [LucideAngularModule, RouterLink, Cart],
   templateUrl: "./header.html",
   styleUrl: "./header.css",
 })
@@ -14,5 +16,9 @@ export class Header {
   readonly CartIcon = ShoppingCart;
   readonly SearchIcon = Search;
   readonly authService = inject(AuthService);
+  readonly cartService = inject(CartService);
   protected readonly AuthState = AuthState;
+
+  cartItem = this.cartService.cartItem;
+  cartItemCount = computed(() => this.cartItem().itemsCount ?? 0);
 }

src/app/core/models/cart.model.ts

@@ -0,0 +1,15 @@
+export interface CartItemModel {
+  id: number;
+  title: string;
+  quantity: number;
+  price: number;
+  subtotal: number;
+  image: string;
+}
+
+export interface CartModel {
+  id: number;
+  itemsCount: number;
+  totalPrice: number;
+  items: CartItemModel[];
+}

src/app/core/services/cart-service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from "@angular/core/testing";
+
+import { CartService } from "./cart-service";
+
+describe("CartService", () => {
+  let service: CartService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CartService);
+  });
+
+  it("should be created", () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/core/services/cart-service.ts

@@ -0,0 +1,39 @@
+import { HttpClient, HttpErrorResponse } from "@angular/common/http";
+import { effect, inject, Injectable, signal } from "@angular/core";
+import { API_URL } from "../tokens/api-url-tokens";
+import { CartModel } from "../models/cart.model";
+import { AuthService, AuthState } from "@app/features/auth/services/auth-service";
+
+@Injectable({
+  providedIn: "root",
+})
+export class CartService {
+  private authService = inject(AuthService);
+  // dependencies
+  private http = inject(HttpClient);
+  private apiUrl = inject(API_URL);
+
+  cartItem = signal<CartModel>({} as CartModel);
+
+  constructor() {
+    effect(() => {
+      if (this.authService.isAuthenticated()) {
+        this.fetchCart();
+      } else {
+        this.cartItem.set({} as CartModel);
+      }
+    });
+  }
+
+  fetchCart() {
+    return this.http.get<CartModel>(this.apiUrl + "/cart").subscribe({
+      next: (data) => this.cartItem.set(data),
+      error: (error: HttpErrorResponse) => {
+        if (error.status === 401) {
+          this.authService.purgeAuth();
+        }
+        // show an error in toast
+      },
+    });
+  }
+}

src/app/features/auth/services/auth-service.ts

@@ -104,7 +104,7 @@ export class AuthService {
     this.authState.set(AuthState.Authenticated);
   }
 
-  private purgeAuth() {
+  purgeAuth() {
     this.localStorage.removeItem(this.userKey);
     this.user.set(null);
     this.authState.set(AuthState.Unauthenticated);

src/app/features/product/components/product-card/product-card.ts

@@ -1,7 +1,7 @@
 import { Component, inject, Input } from "@angular/core";
 import { ProductModel } from "../../../../core/models/product.model";
 import { Router } from "@angular/router";
-import { FavoriteButton } from "../../../../src/app/shared/components/favorite-button/favorite-button";
+import { FavoriteButton } from "../../../../shared/components/favorite-button/favorite-button";
 
 @Component({
   selector: "app-product-card",

src/app/features/product/show-product/show-product.ts

@@ -2,7 +2,7 @@ import { Component, inject, Input, signal, WritableSignal } from "@angular/core"
 import { ProductModel } from "../../../core/models/product.model";
 import { ProductService } from "../services/product-service";
 import { LucideAngularModule, Heart, ArrowRight, ArrowLeft } from "lucide-angular";
-import { FavoriteButton } from "../../../src/app/shared/components/favorite-button/favorite-button";
+import { FavoriteButton } from "../../../shared/components/favorite-button/favorite-button";
 
 @Component({
   selector: "app-show-product",

src/app/shared/components/cart-item/cart-item.html

@@ -0,0 +1,24 @@
+<li class="px-2! py-4! border-b border-b-gray-200">
+  <div class="flex space-x-5">
+    <div class="w-20 h-20 bg-gray-100 p-2 rounded-xl">
+      <img [src]="cartItem.image" class="object-cover h-full w-full rounded-lg" />
+    </div>
+    <div class="flex-1 flex flex-col">
+      <p class="text-sm truncate max-w-30 mt-2">{{ cartItem.title }}</p>
+      <div class="mt-auto flex space-x-4 items-center text-gray-600">
+        <p class="text-sm">Rs. {{ cartItem.price }} x {{ cartItem.quantity }}</p>
+        <button class="active:scale-80" title="Remove Item">
+          <lucide-angular [name]="TrashIcon" class="w-3" />
+        </button>
+      </div>
+    </div>
+    <div class="flex flex-col">
+      <p class="mt-2 font-medium flex-1">Rs. {{ cartItem.subtotal }}</p>
+      <div class="flex max-h-7 text-xs text-center text-gray-700">
+        <button class="btn btn-ghost py-1! px-2 rounded-r-none!">-</button>
+        <p class="py-1 px-2 border-y border-y-gray-300">{{ cartItem.quantity }}</p>
+        <button class="btn py-1! btn-ghost px-2 rounded-l-none!">+</button>
+      </div>
+    </div>
+  </div>
+</li>

src/app/shared/components/cart-item/cart-item.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { CartItem } from "./cart-item";
+
+describe("CartItem", () => {
+  let component: CartItem;
+  let fixture: ComponentFixture<CartItem>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CartItem],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CartItem);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/cart-item/cart-item.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from "@angular/core";
+import { CartItemModel } from "@app/core/models/cart.model";
+import { LucideAngularModule, Trash } from "lucide-angular";
+
+@Component({
+  selector: "app-cart-item",
+  imports: [LucideAngularModule],
+  templateUrl: "./cart-item.html",
+  styleUrl: "./cart-item.css",
+})
+export class CartItem {
+  @Input() cartItem!: CartItemModel;
+  TrashIcon = Trash;
+}

src/app/shared/components/cart/cart.html

@@ -0,0 +1,18 @@
+<ul>
+  @if (authService.authState() === AuthState.Unauthenticated) {
+  <li><a class="block h-full w-full" routerLink="/login">Login to access cart</a></li>
+  } @else if (authService.authState() === AuthState.Loading) {
+  <li><a class="block h-full w-full">Loading</a></li>
+  } @else {
+  <ol>
+    @for (item of cart.items; track item.id) {
+    <app-cart-item [cartItem]="item" />
+    }
+  </ol>
+
+  <div class="flex justify-between mt-4 px-2 font-bold text-lg">
+    <p>Total</p>
+    <p>Rs. {{ cart.totalPrice }}</p>
+  </div>
+  }
+</ul>

src/app/shared/components/cart/cart.spec.ts

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

src/app/shared/components/cart/cart.ts

@@ -0,0 +1,17 @@
+import { Component, computed, inject, Input } from "@angular/core";
+import { CartModel } from "@app/core/models/cart.model";
+import { CartItem } from "../cart-item/cart-item";
+import { AuthService, AuthState } from "@app/features/auth/services/auth-service";
+
+@Component({
+  selector: "app-cart",
+  imports: [CartItem],
+  templateUrl: "./cart.html",
+  styleUrl: "./cart.css",
+})
+export class Cart {
+  @Input() cart!: CartModel;
+
+  protected readonly authService = inject(AuthService);
+  protected readonly AuthState = AuthState;
+}

src/app/shared/components/favorite-button/favorite-button.ts

@@ -1,6 +1,6 @@
 import { Component, inject, Input } from "@angular/core";
 import { HeartIcon, LucideAngularModule } from "lucide-angular";
-import { FavoriteService } from "../../../../../core/services/favorite-service";
+import { FavoriteService } from "../../../core/services/favorite-service";
 
 @Component({
   selector: "app-favorite-button",

tsconfig.json

@@ -13,7 +13,14 @@
     "experimentalDecorators": true,
     "importHelpers": true,
     "target": "ES2022",
-    "module": "preserve"
+    "module": "preserve",
+    "baseUrl": "./src", // Paths are resolved relative to the baseUrl
+    "paths": {
+      "@app/*": ["app/*"],
+      "@shared/*": ["app/shared/*"],
+      "@core/*": ["app/core/*"],
+      "@env/*": ["environments/*"]
+    }
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,