feat: Implement full gallery management feature with image upload capabilities across frontend and backend.

Author: beginwebdev2002

backend/src/modules/gallery/domain/gallery.entity.ts

@@ -4,10 +4,7 @@ export class Gallery {
     public readonly title: string,
     public readonly imageUrl: string,
     public readonly category: string, // 'makeup' | 'veil' | 'service'
-    public readonly tags: string[] = [],
     public readonly status: string = 'draft',
     public readonly alt: string = '',
-    public readonly filename: string = '',
-    public readonly createdAt: Date = new Date(),
   ) {}
 }

backend/src/modules/gallery/infrastructure/schemas/gallery.schema.ts

@@ -14,17 +14,12 @@ export class GallerySchemaEntity {
   @Prop({ required: true })
   category: string;
 
-  @Prop([String])
-  tags: string[];
-
   @Prop({ default: 'draft' })
   status: string;
 
   @Prop()
   alt: string;
 
-  @Prop()
-  filename: string;
 }
 
 export const GallerySchema = SchemaFactory.createForClass(GallerySchemaEntity);

backend/src/modules/gallery/presentation/dto/create-gallery.dto.ts

@@ -1,38 +1,22 @@
-import {
-  IsString,
-  IsNotEmpty,
-  IsUrl,
-  IsOptional,
-  IsArray,
-} from 'class-validator';
+import { IsString, IsNotEmpty, IsOptional } from 'class-validator';
 
 export class CreateGalleryDto {
   @IsString()
   @IsNotEmpty()
   title: string;
 
-  @IsUrl()
-  @IsNotEmpty()
+  @IsOptional()
   imageUrl: string;
 
   @IsString()
   @IsNotEmpty()
   category: string;
 
-  @IsArray()
-  @IsString({ each: true })
-  @IsOptional()
-  tags?: string[];
-
   @IsString()
   @IsOptional()
   status?: string;
 
   @IsString()
   @IsOptional()
   alt?: string;
-
-  @IsString()
-  @IsOptional()
-  filename?: string;
 }

backend/src/modules/gallery/presentation/gallery.controller.ts

@@ -88,17 +88,13 @@ export class GalleryController {
         ? `/uploads/gallery/${files[0].filename}`
         : null;
 
-    const galleryData = {
-      ...updateGalleryDto,
-    };
-
     if (imagePath) {
-      (galleryData as any).imageUrl = imagePath;
+      updateGalleryDto.imageUrl = imagePath;
     }
 
     return this.galleryService.update(
       id,
-      galleryData as unknown as Partial<Gallery>,
+      updateGalleryDto as unknown as Partial<Gallery>,
     );
   }
 

frontend/src/features/gallery/index.ts

@@ -0,0 +1 @@
+export * from "./model/gallery.data";

frontend/src/features/gallery/model/gallery.data.ts

@@ -0,0 +1,27 @@
+import { required } from "@angular/forms/signals";
+import { Gallery } from "@shared/models";
+
+export const galleryFormData: Gallery = {
+  imageUrl: "",
+  title: "",
+  category: "visage",
+  status: "draft",
+  alt: "",
+};
+
+export const resetGalleryData: Gallery = {
+  imageUrl: "",
+  title: "",
+  category: "visage",
+  status: "draft",
+  alt: "",
+};
+
+export function galleryValidationSchema(schemaPath: any) {
+  required(schemaPath.title, {
+    message: $localize`:@@galleryTitleRequiredMessage: Title is required`,
+  });
+  required(schemaPath.category, {
+    message: $localize`:@@galleryCategoryRequiredMessage: Category is required`,
+  });
+}

frontend/src/pages/gallery/gallery.component.html

@@ -46,23 +46,6 @@ <h2 class="font-serif text-4xl text-gray-900 mb-2" i18n="@@galleryTitle">Gallery
     }
   </div>
 
-  <!-- Drag & Drop Area -->
-  <div 
-    (dragover)="onDragOver($event)" 
-    (dragleave)="onDragLeave($event)" 
-    (drop)="onDrop($event)"
-    class="mb-10 p-8 border-2 border-dashed border-gray-200 rounded-2xl bg-white flex flex-col items-center justify-center text-center cursor-pointer transition-all group"
-    [class]="isDragging() 
-      ? 'border-primary bg-primary/10 scale-105' 
-      : 'hover:border-primary hover:bg-primary/5'"
-  >
-    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center shadow-sm mb-4 group-hover:scale-110 transition-transform">
-      <span class="material-symbols-outlined text-3xl text-primary">cloud_upload</span>
-    </div>
-    <h3 class="font-serif text-lg text-gray-800 mb-1" i18n="@@galleryDragDropTitle">Drag and drop files here</h3>
-    <p class="text-sm text-gray-500" i18n="@@galleryDragDropSubtitle">Supported formats: JPG, PNG, WEBP (Max 5MB)</p>
-  </div>
-
   @if (viewMode() === 'grid') {
     <!-- Image Grid -->
     <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 animate-page-enter">
@@ -101,7 +84,6 @@ <h3 class="font-serif text-lg text-gray-800 mb-1" i18n="@@galleryDragDropTitle">
                           </td>
                           <td class="px-6 py-4 whitespace-nowrap">
                               <div class="text-sm font-medium text-gray-900">{{ image.title }}</div>
-                              <div class="text-xs text-gray-500 font-mono">{{ image.filename }}</div>
                           </td>
                           <td class="px-6 py-4 whitespace-nowrap">
                               <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">

frontend/src/pages/gallery/gallery.component.ts

@@ -55,12 +55,9 @@ export class GalleryComponent implements OnInit {
       id: "",
       imageUrl: "",
       title: "",
-      filename: "",
       category: GalleryCategories.VISAGE, // Default
-      createdAt: "",
       status: "draft",
       alt: "",
-      tags: [],
     };
   }
 
@@ -78,8 +75,8 @@ export class GalleryComponent implements OnInit {
     this.isModalOpen.set(false);
   }
 
-  saveImage(event: { image: Gallery; file: File | null }) {
-    const { image, file } = event;
+  saveImage(event: { data: any; file: File | null }) {
+    const { data: image, file } = event;
     const args: any[] = [{ ...image }];
     if (file) args.push(file);
     const formData = convertFormData(...args);

frontend/src/pages/gallery/ui/gallery-card/gallery-card.component.html

@@ -1,6 +1,6 @@
 <div class="group bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden flex flex-col transition-all duration-300 hover:shadow-lg hover:-translate-y-1 reveal-item" [style.animation-delay.ms]="index() * 75">
   <div (click)="onViewImage()" class="relative aspect-[4/5] overflow-hidden cursor-pointer">
-    <img [src]="image().imageUrl" [alt]="image().alt" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"/>
+    <img [src]="imageUrl()" [alt]="image().alt" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"/>
     <div class="absolute top-4 left-4 bg-gray-900/80 backdrop-blur-sm px-3 py-1.5 rounded-full text-[10px] font-bold uppercase tracking-wider text-white shadow-sm">
       {{ image().category }}
     </div>
@@ -11,7 +11,6 @@
   <div class="p-5 flex-1 flex flex-col justify-between">
     <div>
       <h3 class="font-serif text-lg text-gray-900 mb-1">{{ image().title }}</h3>
-      <p class="text-xs text-gray-400 font-mono truncate">{{ image().filename }}</p>
     </div>
     <div class="mt-4 flex items-center justify-between border-t border-gray-100 pt-3">
       <div class="flex items-center gap-2">

frontend/src/pages/gallery/ui/gallery-card/gallery-card.component.ts

@@ -2,11 +2,13 @@ import { CommonModule } from "@angular/common";
 import {
   ChangeDetectionStrategy,
   Component,
+  computed,
   input,
   output,
   OnInit,
 } from "@angular/core";
 import { Gallery } from "@shared/models";
+import { linkServerConvert } from "@shared/lib";
 
 @Component({
   selector: "app-gallery-card",
@@ -23,6 +25,8 @@ export class GalleryCardComponent implements OnInit {
   viewImage = output<string>();
   deleteCard = output<string>();
 
+  imageUrl = computed(() => this.image().imageUrl ? linkServerConvert(this.image().imageUrl) : "public/images/treatments-no-img.png");
+
   ngOnInit(): void {}
 
   onEdit() {