images works

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

@@ -41,4 +41,5 @@ export interface AdminProduct {
   images?: ProductImage[];
   isFeatured: boolean;
   featuredDisplayOrder: number;
+  rowVersion?: string;
 }

src/app/features/components/products/product-category-dropdown/product-category-dropdown.component.ts

@@ -26,56 +26,80 @@ export interface SelectOption {
   ],
 })
 export class ProductCategoryDropdownComponent implements ControlValueAccessor {
-  @Input() label = '';
   @Input() options: SelectOption[] = [];
+  @Input() label = '';
   @Input() placeholder = 'Bitte wählen...';
 
-  public isOpen = false;
   public selectedValues: any[] = [];
-  private elementRef = inject(ElementRef);
+  public isOpen = false;
+  public isDisabled = false;
 
-  onChange: (value: any[]) => void = () => {};
-  onTouched: () => void = () => {};
+  // Callbacks, die von Angular überschrieben werden
+  private onChange: (value: any[]) => void = () => {};
+  private onTouched: () => void = () => {};
 
-  writeValue(values: any[]): void { this.selectedValues = Array.isArray(values) ? values : []; }
-  registerOnChange(fn: any): void { this.onChange = fn; }
-  registerOnTouched(fn: any): void { this.onTouched = fn; }
+  // --- ControlValueAccessor Implementierung ---
 
-  @HostListener('document:click', ['$event'])
-  onDocumentClick(event: Event): void {
-    if (this.isOpen && !this.elementRef.nativeElement.contains(event.target)) {
-      this.closeDropdown();
+  // Wird von Angular aufgerufen, um Werte ins Formular zu schreiben (z.B. beim Laden)
+  writeValue(value: any[]): void {
+    if (value && Array.isArray(value)) {
+      this.selectedValues = value;
+    } else {
+      this.selectedValues = [];
     }
   }
 
-  toggleDropdown(event: Event): void {
-    event.stopPropagation();
-    this.isOpen = !this.isOpen;
-    if (!this.isOpen) { this.onTouched(); }
+  // Registriert die Funktion, die aufgerufen wird, wenn sich der Wert ändert
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
   }
 
-  closeDropdown(): void {
-    if (this.isOpen) {
-      this.isOpen = false;
+  // Registriert die Funktion, die aufgerufen wird, wenn das Feld "berührt" wurde
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  // Optional: Wenn das Feld deaktiviert wird
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+  }
+
+  // --- UI Logik ---
+
+  toggleDropdown(event: Event): void {
+    event.preventDefault();
+    if (this.isDisabled) return;
+    this.isOpen = !this.isOpen;
+    if (!this.isOpen) {
       this.onTouched();
     }
   }
 
+  isSelected(value: any): boolean {
+    return this.selectedValues.includes(value);
+  }
+
+  getLabelForValue(value: any): string {
+    const option = this.options.find(o => o.value === value);
+    return option ? option.label : String(value);
+  }
+
   onOptionToggle(value: any): void {
-    const index = this.selectedValues.indexOf(value);
-    if (index > -1) {
-      this.selectedValues.splice(index, 1);
+    if (this.isSelected(value)) {
+      // Entfernen
+      this.selectedValues = this.selectedValues.filter(v => v !== value);
     } else {
-      this.selectedValues.push(value);
+      // Hinzufügen
+      this.selectedValues = [...this.selectedValues, value];
     }
-    this.onChange([...this.selectedValues]); // Wichtig: Neue Array-Instanz senden
+    // Angular mitteilen, dass sich der Wert geändert hat
+    this.onChange(this.selectedValues);
+    this.onTouched();
   }
 
-  onPillRemove(value: any, event: any): void { // Typ korrigiert
-    event.stopPropagation();
-    this.onOptionToggle(value);
+  onPillRemove(value: any, event: any): void {
+    event.stopPropagation(); // Verhindert, dass das Dropdown aufgeht/zugeht
+    this.selectedValues = this.selectedValues.filter(v => v !== value);
+    this.onChange(this.selectedValues);
   }
-
-  isSelected(value: any): boolean { return this.selectedValues.includes(value); }
-  getLabelForValue(value: any): string { return this.options.find(opt => opt.value === value)?.label || ''; }
 }

src/app/features/components/products/product-edit/product-edit.component.ts

@@ -1,42 +1,20 @@
-// /src/app/features/admin/components/products/product-edit/product-edit.component.ts
-
 import { Component, OnInit, OnDestroy, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
-import {
-  FormBuilder,
-  FormGroup,
-  FormArray,
-  FormControl,
-  ReactiveFormsModule,
-  Validators,
-} from '@angular/forms';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { DomSanitizer } from '@angular/platform-browser';
-import { Observable, Subscription } from 'rxjs';
-import {
-  map,
-  startWith,
-  debounceTime,
-  distinctUntilChanged,
-  finalize,
-} from 'rxjs/operators';
+import { Observable, Subscription, of } from 'rxjs';
+import { switchMap, finalize, map } from 'rxjs/operators';
 
-// Models, Services und UI-Komponenten
-import {
-  AdminProduct,
-  ProductImage,
-} from '../../../../core/models/product.model';
+import { AdminProduct, ProductImage } from '../../../../core/models/product.model';
 import { Category } from '../../../../core/models/category.model';
 import { ProductService } from '../../../services/product.service';
 import { CategoryService } from '../../../services/category.service';
 import { SupplierService } from '../../../services/supplier.service';
 import { SnackbarService } from '../../../../shared/services/snackbar.service';
-import { CardComponent } from '../../../../shared/components/ui/card/card.component';
-import {
-  ImagePreview,
-  ProductFormComponent,
-} from '../product-form/product-form.component';
+import { ImagePreview, ProductFormComponent } from '../product-form/product-form.component';
 import { SelectOption } from '../../../../shared/components/form/form-select/form-select.component';
+import { Supplier } from '../../../../core/models/supplier.model';
 
 @Component({
   selector: 'app-product-edit',
@@ -46,304 +24,272 @@ import { SelectOption } from '../../../../shared/components/form/form-select/for
   styleUrls: ['./product-edit.component.css'],
 })
 export class ProductEditComponent implements OnInit, OnDestroy {
-  // --- Injektionen ---
+  // --- Injected Services ---
   private route = inject(ActivatedRoute);
   private router = inject(Router);
+  private fb = inject(FormBuilder);
   private productService = inject(ProductService);
   private categoryService = inject(CategoryService);
   private supplierService = inject(SupplierService);
-  private fb = inject(FormBuilder);
   private snackbarService = inject(SnackbarService);
   private sanitizer = inject(DomSanitizer);
 
-  // --- Komponenten-Status ---
-  productId!: string;
-  isLoading = true;
-  productForm: FormGroup;
-  private nameChangeSubscription?: Subscription;
-  allCategories$!: Observable<Category[]>;
-  supplierOptions$!: Observable<SelectOption[]>;
+  // --- Component State ---
+  public productForm!: FormGroup;
+  public isLoading = true;
+  private productId!: string;
+  private subscriptions = new Subscription();
 
-  // --- NEUER STATE FÜR BILD-MANAGEMENT ---
-  existingImages: ProductImage[] = [];
-  newImageFiles: File[] = [];
-  mainImageIdentifier: string | null = null; // Hält die ID oder den Dateinamen des Hauptbildes
-  allImagesForForm: ImagePreview[] = []; // Die kombinierte Liste für die Child-Komponente
+  // WICHTIG: Die RowVersion speichern wir hier, nicht im Formular
+  private loadedRowVersion: string | null = null;
+
+  public allCategories$!: Observable<Category[]>;
+  public supplierOptions$!: Observable<SelectOption[]>;
+
+  // --- Image Management ---
+  public allImagesForForm: ImagePreview[] = [];
+  private newImageFiles = new Map<string, File>();
+  private imagesToDelete: string[] = [];
 
   constructor() {
-    this.productForm = this.fb.group({
-      id: ['', Validators.required],
-      name: ['', Validators.required],
-      slug: ['', Validators.required],
-      sku: ['', Validators.required],
-      price: [0, [Validators.required, Validators.min(0)]],
-      stockQuantity: [0, [Validators.required, Validators.min(0)]],
-      description: [''],
-      oldPrice: [null, [Validators.min(0)]],
-      purchasePrice: [null, [Validators.min(0)]],
-      weight: [null, [Validators.min(0)]],
-      isActive: [true],
-      isFeatured: [false],
-      featuredDisplayOrder: [0],
-      supplierId: [null],
-      categorieIds: new FormControl([]),
-      imagesToDelete: this.fb.array([]),
-    });
+    this.initForm();
   }
 
-  get imagesToDelete(): FormArray {
-    return this.productForm.get('imagesToDelete') as FormArray;
+  private initForm(): void {
+    // RowVersion nehmen wir hier raus, um Manipulationen zu verhindern
+    this.productForm = this.fb.group({
+      name: ['', Validators.required],
+      description: ['', Validators.required],
+      sku: ['', Validators.required],
+      price: [0, [Validators.required, Validators.min(0)]],
+      oldPrice: [null],
+      isActive: [true],
+      stockQuantity: [0, [Validators.required, Validators.min(0)]],
+      slug: ['', Validators.required],
+      weight: [0],
+      supplierId: [null],
+      purchasePrice: [null],
+      isFeatured: [false],
+      featuredDisplayOrder: [0],
+      categorieIds: [[]]
+    });
   }
 
   ngOnInit(): void {
-    const id = this.route.snapshot.paramMap.get('id');
-    if (!id) {
-      this.snackbarService.show('Produkt-ID fehlt.');
-      this.router.navigate(['/shop/products']);
-      return;
-    }
-    this.productId = id;
-    this.loadDropdownData();
-    this.loadProductData();
-    this.subscribeToNameChanges();
+    this.loadInitialData();
   }
 
-  ngOnDestroy(): void {
-    this.nameChangeSubscription?.unsubscribe();
-    this.allImagesForForm.forEach((image) => {
-      if (typeof image.url === 'object') {
-        // Nur Object-URLs von neuen Bildern freigeben
-        URL.revokeObjectURL(image.url as string);
+  private loadInitialData(): void {
+    this.isLoading = true;
+    this.allCategories$ = this.categoryService.getAll();
+
+    this.supplierOptions$ = this.supplierService.getAll().pipe(
+      map((suppliers: Supplier[]) =>
+        suppliers
+          .filter(s => !!s.name)
+          .map(s => ({ value: s.id, label: s.name as string }))
+      )
+    );
+
+    const productSub = this.route.paramMap.pipe(
+      switchMap(params => {
+        const id = params.get('id');
+        if (id) {
+          this.productId = id;
+          return this.productService.getById(id);
+        }
+        this.snackbarService.show('Keine Produkt-ID gefunden.');
+        this.router.navigate(['/shop/products']);
+        return of(null);
+      })
+    ).subscribe({
+      next: product => {
+        if (product) {
+          this.patchForm(product);
+          if (product.images) {
+            this.initializeImages(product.images);
+          }
+        }
+        this.isLoading = false;
+      },
+      error: () => {
+        this.isLoading = false;
+        this.snackbarService.show('Fehler beim Laden der Produktdaten.');
       }
     });
+    this.subscriptions.add(productSub);
+  }
+
+  private patchForm(product: AdminProduct): void {
+    // 1. RowVersion sicher extrahieren und trimmen
+    const rawVersion = product.rowVersion || (product as any).RowVersion;
+    this.loadedRowVersion = rawVersion ? String(rawVersion).trim() : null;
+
+    console.log('Geladene RowVersion:', this.loadedRowVersion);
+
+    // 2. Formularwerte setzen
+    this.productForm.patchValue({
+      name: product.name,
+      description: product.description,
+      sku: product.sku,
+      price: product.price,
+      oldPrice: product.oldPrice,
+      isActive: product.isActive,
+      stockQuantity: product.stockQuantity,
+      slug: product.slug,
+      weight: product.weight,
+      supplierId: product.supplierId,
+      purchasePrice: product.purchasePrice,
+      isFeatured: product.isFeatured,
+      featuredDisplayOrder: product.featuredDisplayOrder,
+      categorieIds: product.categorieIds || [],
+    });
   }
 
-  loadDropdownData(): void {
-    this.allCategories$ = this.categoryService.getAll();
-    this.supplierOptions$ = this.supplierService.getAll().pipe(
-      map((suppliers) =>
-        suppliers.map((s) => ({ value: s.id, label: s.name || 'Unbenannt' }))
-      ),
-      startWith([])
-    );
+  private initializeImages(images: ProductImage[]): void {
+    this.allImagesForForm = images
+      .filter(img => !!img.url)
+      .map(img => ({
+        identifier: img.id,
+        url: img.url as string,
+        isMainImage: img.isMainImage,
+      })).sort((a, b) => (a.isMainImage ? -1 : 1));
   }
 
-  loadProductData(): void {
-    this.isLoading = true;
-    this.productService
-      .getById(this.productId)
-      .pipe(
-        finalize(() => {
-          this.isLoading = false;
-        })
-      )
-      .subscribe({
-        next: (product) => {
-          if (product) {
-            this.populateForm(product);
-          } else {
-            this.snackbarService.show('Produkt nicht gefunden.');
-            this.router.navigate(['/shop/products']);
-          }
-        },
-        error: (err) => {
-          this.snackbarService.show('Fehler beim Laden des Produkts.');
-          console.error('Fehler beim Laden der Produktdaten:', err);
-          this.router.navigate(['/shop/products']);
-        },
+  // --- Image Event Handlers ---
+
+  onFilesSelected(files: File[]): void {
+    for (const file of files) {
+      const tempId = `new_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+      const url = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file));
+
+      this.newImageFiles.set(tempId, file);
+
+      this.allImagesForForm.push({
+        identifier: tempId,
+        url: url,
+        isMainImage: this.allImagesForForm.length === 1, // Wenn es das erste Bild ist, direkt Main
       });
+    }
   }
 
-// AFTER (CORRECT)
-populateForm(product: AdminProduct): void {
-  // This single line handles ALL form controls, including setting 
-  // the 'categorieIds' FormControl to the array from the product object.
-  this.productForm.patchValue(product);
+  onSetMainImage(identifier: string): void {
+    this.allImagesForForm.forEach(img => {
+      img.isMainImage = img.identifier === identifier;
+    });
+  }
 
-  // The obsolete FormArray logic has been removed.
+  onDeleteImage(identifier: string): void {
+    const imageIndex = this.allImagesForForm.findIndex(img => img.identifier === identifier);
+    if (imageIndex === -1) return;
 
-  this.existingImages = product.images || [];
-  const mainImage = this.existingImages.find((img) => img.isMainImage);
-  this.mainImageIdentifier =
-    mainImage?.id ||
-    (this.existingImages.length > 0 ? this.existingImages[0].id : null);
+    const deletedImage = this.allImagesForForm[imageIndex];
+    this.allImagesForForm.splice(imageIndex, 1);
 
-  this.rebuildAllImagesForForm();
-}
+    if (this.newImageFiles.has(identifier)) {
+      this.newImageFiles.delete(identifier);
+    } else {
+      this.imagesToDelete.push(identifier);
+    }
+
+    if (deletedImage.isMainImage && this.allImagesForForm.length > 0) {
+      this.allImagesForForm[0].isMainImage = true;
+    }
+  }
 
   onSubmit(): void {
     if (this.productForm.invalid) {
       this.productForm.markAllAsTouched();
-      this.snackbarService.show('Bitte füllen Sie alle Pflichtfelder aus.');
+      this.snackbarService.show('Bitte füllen Sie alle erforderlichen Felder aus.');
       return;
     }
-    this.prepareSubmissionData();
-    const formData = this.createFormData();
-    this.productService.update(this.productId, formData).subscribe({
+
+    this.isLoading = true;
+    const formData = this.createUpdateFormData();
+
+    this.productService.update(this.productId, formData).pipe(
+      finalize(() => this.isLoading = false)
+    ).subscribe({
       next: () => {
-        this.snackbarService.show('Produkt erfolgreich aktualisiert');
+        this.snackbarService.show('Produkt erfolgreich aktualisiert!');
         this.router.navigate(['/shop/products']);
       },
       error: (err) => {
-        this.snackbarService.show('Ein Fehler ist aufgetreten.');
-        console.error(err);
-      },
+        console.error('Update failed', err);
+        // Spezifische Behandlung für 409
+        if (err.status === 409) {
+           this.snackbarService.show('Konflikt beim Speichern. Bitte laden Sie die Seite neu.');
+        } else {
+           this.snackbarService.show('Fehler beim Aktualisieren des Produkts.');
+        }
+      }
     });
   }
 
+  private createUpdateFormData(): FormData {
+    const formData = new FormData();
+    const val = this.productForm.getRawValue();
+
+    // 1. ZUERST ID und RowVersion anhängen (Wichtig für Backend-Parser)
+    formData.append('Id', this.productId);
+    
+    // if (this.loadedRowVersion) {
+    //     formData.append('RowVersion', this.loadedRowVersion);
+    // }
+
+    // 2. Einfache Felder
+    formData.append('Name', val.name);
+    formData.append('Description', val.description);
+    formData.append('SKU', val.sku);
+    formData.append('Slug', val.slug);
+    formData.append('IsActive', String(val.isActive));
+    formData.append('IsFeatured', String(val.isFeatured));
+    formData.append('FeaturedDisplayOrder', String(val.featuredDisplayOrder || 0));
+
+    // 3. Zahlen sicher als String mit Punkt formatieren
+    // Das verhindert Fehler, wenn der Browser "12,50" senden würde
+    const formatNumber = (num: any) => (num === null || num === undefined || num === '') ? '' : String(Number(num));
+
+    formData.append('Price', formatNumber(val.price));
+    formData.append('StockQuantity', formatNumber(val.stockQuantity));
+    
+    if (val.oldPrice) formData.append('OldPrice', formatNumber(val.oldPrice));
+    if (val.weight) formData.append('Weight', formatNumber(val.weight));
+    if (val.purchasePrice) formData.append('PurchasePrice', formatNumber(val.purchasePrice));
+    if (val.supplierId) formData.append('SupplierId', val.supplierId);
+
+    // 4. Arrays / Listen
+    if (Array.isArray(val.categorieIds)) {
+      val.categorieIds.forEach((id: string) => formData.append('CategorieIds', id));
+    }
+
+    if (this.imagesToDelete.length > 0) {
+      this.imagesToDelete.forEach(id => formData.append('ImagesToDelete', id));
+    }
+
+    // 5. Dateien - Ganz am Ende anhängen
+    const mainImagePreview = this.allImagesForForm.find(img => img.isMainImage);
+    const mainImageTempId = mainImagePreview ? mainImagePreview.identifier : null;
+
+    this.newImageFiles.forEach((file, tempId) => {
+      // Dateinamen bereinigen, um Parsing-Probleme zu vermeiden
+      const safeFileName = file.name.replace(/[^a-zA-Z0-9.-]/g, '_');
+      
+      if (tempId === mainImageTempId) {
+        formData.append('MainImageFile', file, safeFileName);
+      } else {
+        formData.append('AdditionalImageFiles', file, safeFileName);
+      }
+    });
+
+    return formData;
+  }
+  
   cancel(): void {
     this.router.navigate(['/shop/products']);
   }
 
-  // --- NEUE EVENT-HANDLER FÜR BILDER ---
-  onFilesSelected(files: File[]): void {
-    this.newImageFiles.push(...files);
-    if (!this.mainImageIdentifier && this.newImageFiles.length > 0) {
-      this.mainImageIdentifier = this.newImageFiles[0].name;
-    }
-    this.rebuildAllImagesForForm();
-  }
-
-  onSetMainImage(identifier: string): void {
-    this.mainImageIdentifier = identifier;
-    this.rebuildAllImagesForForm();
-  }
-
-  onDeleteImage(identifier: string): void {
-    const isExisting = this.existingImages.some((img) => img.id === identifier);
-    if (isExisting) {
-      this.imagesToDelete.push(new FormControl(identifier));
-      this.existingImages = this.existingImages.filter(
-        (img) => img.id !== identifier
-      );
-    } else {
-      this.newImageFiles = this.newImageFiles.filter(
-        (file) => file.name !== identifier
-      );
-    }
-
-    if (this.mainImageIdentifier === identifier) {
-      const firstExisting =
-        this.existingImages.length > 0 ? this.existingImages[0].id : null;
-      const firstNew =
-        this.newImageFiles.length > 0 ? this.newImageFiles[0].name : null;
-      this.mainImageIdentifier = firstExisting || firstNew;
-    }
-    this.rebuildAllImagesForForm();
-  }
-
-  // --- Private Helfermethoden ---
-  private rebuildAllImagesForForm(): void {
-    this.allImagesForForm.forEach((image) => {
-      if (typeof image.url === 'object')
-        URL.revokeObjectURL(image.url as string);
-    });
-
-    const combined: ImagePreview[] = [];
-    this.existingImages
-      .filter((img) => !!img.url) // Stellt sicher, dass nur Bilder mit URL verwendet werden
-      .forEach((img) => {
-        combined.push({
-          identifier: img.id,
-          url: img.url!,
-          isMainImage: img.id === this.mainImageIdentifier,
-        });
-      });
-
-    this.newImageFiles.forEach((file) => {
-      combined.push({
-        identifier: file.name,
-        url: this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file)),
-        isMainImage: file.name === this.mainImageIdentifier,
-      });
-    });
-
-    this.allImagesForForm = combined;
-  }
-
-  private createFormData(): FormData {
-    const formData = new FormData();
-    const formValue = this.productForm.getRawValue();
-
-    Object.keys(formValue).forEach((key) => {
-      const value = formValue[key];
-      if (key === 'categorieIds' || key === 'imagesToDelete') {
-        (value as string[]).forEach((id) =>
-          formData.append(this.capitalizeFirstLetter(key), id)
-        );
-      } else if (value !== null && value !== undefined && value !== '') {
-        formData.append(this.capitalizeFirstLetter(key), value.toString());
-      }
-    });
-
-    const mainImageFile = this.newImageFiles.find(
-      (f) => f.name === this.mainImageIdentifier
-    );
-    if (mainImageFile) {
-      formData.append('MainImageFile', mainImageFile);
-    } else if (this.mainImageIdentifier) {
-      formData.append('MainImageId', this.mainImageIdentifier);
-    }
-
-    this.newImageFiles
-      .filter((f) => f.name !== this.mainImageIdentifier)
-      .forEach((file) => formData.append('AdditionalImageFiles', file));
-
-    return formData;
-  }
-
-  // Private Helfermethoden
-  private prepareSubmissionData(): void {
-    const nameControl = this.productForm.get('name');
-    const slugControl = this.productForm.get('slug');
-    const skuControl = this.productForm.get('sku');
-
-    if (nameControl && slugControl && !slugControl.value) {
-      slugControl.setValue(this.generateSlug(nameControl.value), {
-        emitEvent: false,
-      });
-    }
-    if (nameControl && skuControl && !skuControl.value) {
-      skuControl.setValue(this.generateSkuValue(nameControl.value), {
-        emitEvent: false,
-      });
-    }
-  }
-
-  private subscribeToNameChanges(): void {
-    const nameControl = this.productForm.get('name');
-    const slugControl = this.productForm.get('slug');
-
-    if (nameControl && slugControl) {
-      this.nameChangeSubscription = nameControl.valueChanges
-        .pipe(debounceTime(400), distinctUntilChanged())
-        .subscribe((name) => {
-          if (name && !slugControl.dirty) {
-            slugControl.setValue(this.generateSlug(name));
-          }
-        });
-    }
-  }
-
-  private generateSlug(name: string): string {
-    return name
-      .toLowerCase()
-      .replace(/\s+/g, '-')
-      .replace(
-        /[äöüß]/g,
-        (char) => ({ ä: 'ae', ö: 'oe', ü: 'ue', ß: 'ss' }[char] || '')
-      )
-      .replace(/[^a-z0-9-]/g, '')
-      .replace(/-+/g, '-');
-  }
-
-  private generateSkuValue(name: string): string {
-    const prefix = name.substring(0, 4).toUpperCase().replace(/\s+/g, '');
-    const randomPart = Math.random().toString(36).substring(2, 8).toUpperCase();
-    return `${prefix}-${randomPart}`;
-  }
-
-  private capitalizeFirstLetter(string: string): string {
-    return string.charAt(0).toUpperCase() + string.slice(1);
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
   }
 }

src/app/features/components/products/product-list/product-list.component.ts

@@ -16,7 +16,7 @@ import { IconComponent } from '../../../../shared/components/ui/icon/icon.compon
 @Component({
   selector: 'app-product-list',
   standalone: true,
-  imports: [CommonModule, CurrencyPipe, GenericTableComponent, SearchBarComponent, ButtonComponent, IconComponent],
+  imports: [CommonModule, GenericTableComponent, SearchBarComponent, ButtonComponent, IconComponent],
   providers: [DatePipe],
   templateUrl: './product-list.component.html',
   styleUrl: './product-list.component.css'