feature: add product page

- add UI
- add dialog for preview selected images

src/app/app.html

@@ -1,3 +1,7 @@
+<div class="flex min-h-screen flex-col antialiased m-0">
   <app-header />
+  <main class="flex-1">
     <router-outlet></router-outlet>
+  </main>
   <app-footer />
+</div>

src/app/app.routes.ts

@@ -12,4 +12,10 @@ export const routes: Routes = [
     path: "",
     loadChildren: () => import("./features/auth/auth.routes").then((routes) => routes.AuthRoutes),
   },
+  {
+    path: "products",
+    loadChildren: () =>
+      import("./features/product/product.routes").then((routes) => routes.productRoutes),
+    // canActivate: [authGuard]
+  },
 ];

src/app/features/product/add-product/add-product.html

@@ -0,0 +1,86 @@
+<section class="wrapper">
+  <h1 class="h1">Add Product</h1>
+  <section class="card">
+    <form class="flex flex-col sm:flex-row gap-4">
+      <fieldset class="flex flex-col space-y-4 min-w-0 flex-1">
+        <fieldset class="fieldset">
+          <legend class="fieldset-legend">Title</legend>
+          <input class="input" id="title" placeholder="Enter product title" type="text" />
+          <!--        <app-error fieldName="email" [control]="loginForm.get('email')" />-->
+        </fieldset>
+
+        <fieldset class="fieldset">
+          <legend class="fieldset-legend">Description</legend>
+          <textarea class="input" id="description" rows="5"></textarea>
+          <!--        <app-error fieldName="email" [control]="loginForm.get('email')" />-->
+        </fieldset>
+
+        <fieldset class="fieldset">
+          <legend class="fieldset-legend">Select category</legend>
+          <select class="input">
+            <option>Select Category</option>
+            <option>Electronics</option>
+            <option>Fashion</option>
+            <option>Books</option>
+          </select>
+          <!--        <app-error fieldName="email" [control]="loginForm.get('email')" />-->
+        </fieldset>
+      </fieldset>
+      <fieldset class="flex flex-col space-y-4 min-w-0 flex-1">
+        <fieldset class="fieldset">
+          <legend class="fieldset-legend">Image</legend>
+          <div class="grid grid-cols-1 sm:grid-cols-3 sm:h-40 gap-4">
+            <app-image-input
+              (imageSelected)="openPreview($event)"
+              [bgImageUrl]="selectedImages()['image_1']?.url"
+              id="image_1"
+            />
+
+            <app-image-input
+              (imageSelected)="openPreview($event)"
+              [bgImageUrl]="selectedImages()['image_2']?.url"
+              id="image_2"
+            />
+            <app-image-input
+              (imageSelected)="openPreview($event)"
+              [bgImageUrl]="selectedImages()['image_3']?.url"
+              id="image_3"
+            />
+            <dialog
+              #imageDialog
+              class="relative min-w-11/12 min-h-11/12 m-auto p-4 rounded-xl bg-gray-50 overflow-x-hidden backdrop:bg-black/50 backdrop:backdrop-blur-xs"
+            >
+              <div class="flex flex-col gap-4 overflow-hidden">
+                <div class="flex self-end gap-4 fixed top-10 right-10">
+                  <button
+                    (click)="closeDialog()"
+                    class="btn btn-ghost bg-gray-50 py-1 px-4 shadow-xl"
+                    type="button"
+                  >
+                    ✕ Close
+                  </button>
+
+                  <button
+                    (click)="confirmImage()"
+                    class="btn btn-black py-1 px-4 shadow-xl"
+                    type="button"
+                  >
+                    ✓ Select
+                  </button>
+                </div>
+                <div class="overflow-y-scroll rounded-lg">
+                  <img
+                    [src]="activeImage()?.url"
+                    alt="Product Preview"
+                    class="w-full h-auto object-contain"
+                  />
+                </div>
+              </div>
+            </dialog>
+          </div>
+        </fieldset>
+        <button class="btn btn-black py-2">Add Product</button>
+      </fieldset>
+    </form>
+  </section>
+</section>

src/app/features/product/add-product/add-product.spec.ts

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

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

@@ -0,0 +1,41 @@
+import { Component, ElementRef, signal, ViewChild } from "@angular/core";
+import { ReactiveFormsModule } from "@angular/forms";
+import { ImageInput } from "../../../shared/components/image-input/image-input";
+
+export interface ImageSelection {
+  id: string;
+  url: string;
+  file: File;
+}
+
+@Component({
+  selector: "app-add-product",
+  imports: [ReactiveFormsModule, ImageInput],
+  templateUrl: "./add-product.html",
+  styleUrl: "./add-product.css",
+})
+export class AddProduct {
+  @ViewChild("imageDialog") imageDialog!: ElementRef<HTMLDialogElement>;
+  activeImage = signal<ImageSelection | null>(null);
+  selectedImages = signal<Record<string, { url: string; file: File }>>({});
+
+  openPreview(image: ImageSelection) {
+    this.activeImage.set(image);
+    this.imageDialog.nativeElement.showModal();
+  }
+
+  confirmImage() {
+    // Add the current image to the selected images
+    const current = this.activeImage();
+    if (current) {
+      this.selectedImages.update((images) => ({ ...images, [current.id]: current }));
+    }
+    console.log(this.selectedImages());
+    this.closeDialog();
+  }
+
+  closeDialog() {
+    this.activeImage.set(null);
+    this.imageDialog.nativeElement.close();
+  }
+}

src/app/features/product/product.html

@@ -0,0 +1 @@
+<p>product works!</p>

src/app/features/product/product.routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from "@angular/router";
+import { AddProduct } from "./add-product/add-product";
+
+export const productRoutes: Routes = [
+  {
+    path: "create",
+    component: AddProduct,
+  },
+];

src/app/features/product/product.spec.ts

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

src/app/features/product/product.ts

@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-product",
+  imports: [],
+  templateUrl: "./product.html",
+  styleUrl: "./product.css",
+})
+export class Product {}

src/app/shared/components/image-input/image-input.html

@@ -0,0 +1,29 @@
+<div class="relative input-image input-image-ghost h-full w-full">
+  @if (bgImageUrl) {
+  <label
+    [for]="id"
+    [style.backgroundImage]="'url(' + bgImageUrl + ')'"
+    class="absolute inset-0 bg-cover bg-center bg-no-repeat p-4 w-full h-full flex flex-col space-y-4 justify-center items-center cursor-pointer rounded-xl"
+  >
+    <div class="absolute inset-0 bg-black/40 rounded-xl"></div>
+
+    <lucide-angular [img]="cameraIcon" class="w-10 h-10 text-white stroke-1 z-10" />
+    <p class="text-white text-sm font-semibold z-10">Change image</p>
+  </label>
+  } @else {
+  <label
+    [for]="id"
+    class="absolute inset-0 p-4 w-full h-full flex flex-col space-y-4 justify-center items-center cursor-pointer hover:bg-gray-50 rounded-xl"
+  >
+    <lucide-angular [img]="cameraIcon" class="w-10 h-10 text-gray-400 stroke-1" />
+    <p class="text-gray-500 text-sm">Click to upload</p>
+  </label>
+  }
+  <input
+    (change)="handleFileSelect($event)"
+    [id]="id"
+    class="absolute opacity-0 w-full h-full top-0 right-0"
+    placeholder="Upload image"
+    type="file"
+  />
+</div>

src/app/shared/components/image-input/image-input.spec.ts

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

src/app/shared/components/image-input/image-input.ts

@@ -0,0 +1,26 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Camera, LucideAngularModule } from "lucide-angular";
+import { ImageSelection } from "../../../features/product/add-product/add-product";
+
+@Component({
+  selector: "app-image-input",
+  imports: [LucideAngularModule],
+  templateUrl: "./image-input.html",
+  styleUrl: "./image-input.css",
+})
+export class ImageInput {
+  cameraIcon = Camera;
+
+  @Output() imageSelected = new EventEmitter<ImageSelection>();
+  @Input() id!: string;
+  @Input() bgImageUrl: string | undefined;
+
+  handleFileSelect(event: Event) {
+    const input = event.target as HTMLInputElement;
+    if (input.files && input.files[0]) {
+      const file = input.files[0];
+      const url = URL.createObjectURL(file);
+      this.imageSelected.emit({ id: this.id, url: url, file: file });
+    }
+  }
+}

src/styles.css

@@ -13,7 +13,7 @@
 }
 
 body {
-  @apply bg-gray-100;
+  @apply bg-gray-100  antialiased m-0;
 }
 
 .wrapper {
@@ -21,7 +21,7 @@ body {
 }
 
 .btn {
-  @apply rounded-full transition-all duration-200 font-medium ease-out flex justify-center active:translate-y-px disabled:opacity-50 disabled:cursor-not-allowed;
+  @apply rounded-xl py-2 transition-all duration-200 font-medium ease-out flex justify-center active:translate-y-px disabled:opacity-50 disabled:cursor-not-allowed;
 }
 
 .btn-ghost {
@@ -39,6 +39,7 @@ body {
 .fieldset {
   @apply space-y-1;
 }
+
 .fieldset-legend {
   @apply text-xs font-bold ml-2 text-gray-800;
 }
@@ -51,6 +52,14 @@ body {
   @apply p-3 border border-gray-300 rounded-xl text-sm w-full;
 }
 
+.input-image {
+  @apply rounded-xl border bg-teal-100 border-teal-500 border-dashed;
+}
+
+.input-image-ghost {
+  @apply bg-gray-100 border-gray-300;
+}
+
 .dropdown {
   position-area: span-left bottom;
   @apply p-4 mt-2 border border-gray-300 shadow-lg rounded-xl space-y-2 text-gray-800;
@@ -59,3 +68,16 @@ body {
 .dropdown li {
   @apply rounded-lg hover:bg-linear-to-r hover:from-teal-300 hover:to-transparent px-5 py-1;
 }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @apply font-space text-gray-800;
+}
+
+h1 {
+  @apply text-3xl my-4 ml-2;
+}