ok

src/app/features/components/products/product-create/product-create.component.css

@@ -0,0 +1,23 @@
+.form-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 1rem;
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+h3[card-header] {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
+  color: var(--text-color-secondary);
+}

src/app/features/components/products/product-create/product-create.component.html

@@ -0,0 +1,27 @@
+<!-- /src/app/features/admin/components/products/product-create/product-create.component.html -->
+<div *ngIf="isLoading; else formContent" class="loading-container">
+  <p>Lade Formulardaten...</p>
+</div>
+
+<ng-template #formContent>
+  <div class="form-header">
+    <h3 card-header>Neues Produkt erstellen</h3>
+  </div>
+
+  <app-product-form
+    [productForm]="productForm"
+    [allCategories]="(allCategories$ | async) || []"
+    [supplierOptions]="(supplierOptions$ | async) || []"
+    [existingImages]="[]"
+    [mainImagePreview]="mainImagePreview"
+    [additionalImagesPreview]="additionalImagesPreview"
+    [isLoading]="isLoading"
+    submitButtonText="Produkt erstellen"
+    (formSubmit)="onSubmit()"
+    (formCancel)="cancel()"
+    (mainFileSelected)="onMainFileSelected($event)"
+    (additionalFilesSelected)="onAdditionalFilesSelected($event)"
+    (newImageRemoved)="onNewImageRemoved($event)"
+  >
+  </app-product-form>
+</ng-template>

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

@@ -0,0 +1,224 @@
+// /src/app/features/admin/components/products/product-create/product-create.component.ts
+import { Component, OnInit, OnDestroy, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+import {
+  FormBuilder,
+  FormGroup,
+  FormArray,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { Observable, Subscription } from 'rxjs';
+import {
+  debounceTime,
+  distinctUntilChanged,
+  map,
+  startWith,
+  tap,
+} from 'rxjs/operators';
+
+// Models, Services und UI-Komponenten importieren
+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 { ProductFormComponent } from '../product-form/product-form.component';
+import { SelectOption } from '../../../../shared/components/form/form-select/form-select.component';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-product-create',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    CardComponent,
+    ProductFormComponent,
+  ],
+  templateUrl: './product-create.component.html',
+  styleUrls: ['./product-create.component.css'],
+})
+export class ProductCreateComponent implements OnInit, OnDestroy {
+  private sanitizer = inject(DomSanitizer);
+  private router = inject(Router);
+  private productService = inject(ProductService);
+  private categoryService = inject(CategoryService);
+  private supplierService = inject(SupplierService);
+  private fb = inject(FormBuilder);
+  private snackbarService = inject(SnackbarService);
+
+  isLoading = true;
+  productForm: FormGroup;
+
+  allCategories$!: Observable<Category[]>;
+  supplierOptions$!: Observable<SelectOption[]>;
+
+  private nameChangeSubscription?: Subscription;
+
+  mainImageFile: File | null = null;
+  additionalImageFiles: File[] = [];
+  mainImagePreview: string | null = null;
+  additionalImagesPreview: { name: string; url: SafeUrl }[] = [];
+
+  constructor() {
+    this.productForm = this.fb.group({
+      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: this.fb.array([]),
+    });
+  }
+
+  ngOnInit(): void {
+    this.loadDropdownData();
+    this.subscribeToNameChanges();
+    this.isLoading = false;
+  }
+
+  ngOnDestroy(): void {
+    this.nameChangeSubscription?.unsubscribe();
+  }
+
+  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([])
+    );
+  }
+
+  onSubmit(): void {
+    if (this.productForm.invalid) {
+      this.productForm.markAllAsTouched();
+      this.snackbarService.show('Bitte füllen Sie alle Pflichtfelder aus.');
+      return;
+    }
+
+    const formData = this.createFormData();
+
+    this.productService.create(formData).subscribe({
+      next: () => {
+        this.snackbarService.show('Produkt erstellt');
+        this.router.navigate(['/admin/products']);
+      },
+      error: (err) => {
+        this.snackbarService.show('Ein Fehler ist aufgetreten.');
+        console.error(err);
+      },
+    });
+  }
+
+  cancel(): void {
+    this.router.navigate(['/admin/products']);
+  }
+
+  private createFormData(): FormData {
+    const formData = new FormData();
+    const formValue = this.productForm.value;
+
+    Object.keys(formValue).forEach((key) => {
+      const value = formValue[key];
+      if (key === 'categorieIds') {
+        (value as string[]).forEach((id) =>
+          formData.append('CategorieIds', id)
+        );
+      } else if (value !== null && value !== undefined && value !== '') {
+        formData.append(this.capitalizeFirstLetter(key), value.toString());
+      }
+    });
+
+    if (this.mainImageFile) {
+      formData.append('MainImageFile', this.mainImageFile);
+    }
+    this.additionalImageFiles.forEach((file) => {
+      formData.append('AdditionalImageFiles', file);
+    });
+
+    return formData;
+  }
+
+  private subscribeToNameChanges(): void {
+    this.nameChangeSubscription = this.productForm
+      .get('name')
+      ?.valueChanges.pipe(debounceTime(300), distinctUntilChanged())
+      .subscribe((name) => {
+        if (name && !this.productForm.get('slug')?.dirty) {
+          const slug = this.generateSlug(name);
+          this.productForm.get('slug')?.setValue(slug);
+        }
+      });
+  }
+
+  onMainFileSelected(file: File): void {
+    this.mainImageFile = file;
+    const reader = new FileReader();
+    reader.onload = () => {
+      this.mainImagePreview = reader.result as string;
+    };
+    reader.readAsDataURL(file);
+  }
+
+  private generateSlug(name: string): string {
+    return name
+      .toLowerCase()
+      .replace(/\s+/g, '-')
+      .replace(/[äöüß]/g, (char) => {
+        switch (char) {
+          case 'ä':
+            return 'ae';
+          case 'ö':
+            return 'oe';
+          case 'ü':
+            return 'ue';
+          case 'ß':
+            return 'ss';
+          default:
+            return '';
+        }
+      })
+      .replace(/[^a-z0-9-]/g, '')
+      .replace(/-+/g, '-');
+  }
+
+  private capitalizeFirstLetter(string: string): string {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+  }
+
+  onAdditionalFilesSelected(files: File[]): void {
+    this.additionalImageFiles.push(...files);
+    files.forEach((file) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        this.additionalImagesPreview.push({
+          name: file.name,
+          url: this.sanitizer.bypassSecurityTrustUrl(reader.result as string),
+        });
+      };
+      reader.readAsDataURL(file);
+    });
+  }
+
+  onNewImageRemoved(fileName: string): void {
+    this.additionalImageFiles = this.additionalImageFiles.filter(
+      (f) => f.name !== fileName
+    );
+    this.additionalImagesPreview = this.additionalImagesPreview.filter(
+      (p) => p.name !== fileName
+    );
+  }
+}

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

@@ -1,5 +1,3 @@
-:host { display: block; }
-
 .form-header {
   display: flex;
   justify-content: space-between;
@@ -9,56 +7,17 @@
   border-bottom: 1px solid var(--color-border);
 }
 
-h3[card-header] { margin: 0; }
+h3[card-header] {
-
+  margin: 0;
-.form-section { margin-bottom: 1.5rem; }
+  font-size: 1.5rem;
-.section-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 1.25rem; color: var(--color-text); }
+  font-weight: 600;
-
+  color: var(--color-text);
-.form-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1.5rem;
 }
 
-.grid-col-span-2 { grid-column: 1 / -1; }
+.loading-container {
-
+  display: flex;
-.input-with-button { display: flex; gap: 0.5rem; }
+  justify-content: center;
-.input-with-button input { flex-grow: 1; }
+  align-items: center;
-
+  min-height: 300px;
-.category-checkbox-group {
+  color: var(--text-color-secondary);
-  max-height: 150px;
-  overflow-y: auto;
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-md);
-  padding: 0.75rem;
-}
-
-.checkbox-item { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
-.checkbox-item input { margin: 0; }
-.checkbox-item label { font-weight: normal; }
-
-.image-management {
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  gap: 1.5rem;
-  align-items: start;
-}
-
-.image-upload-fields { display: flex; flex-direction: column; gap: 1rem; }
-.image-preview-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; }
-.image-preview-item { position: relative; }
-.image-preview-item img {
-  width: 80px; height: 80px; object-fit: cover;
-  border-radius: var(--border-radius-md);
-  border: 2px solid var(--color-border);
-}
-.image-preview-item img.main-image { border-color: var(--color-success); }
-.image-preview-item app-button { position: absolute; top: -10px; right: -10px; }
-
-.checkbox-group { display: flex; align-items: center; gap: 2rem; }
-.form-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; }
-.divider { border: none; border-top: 1px solid var(--color-border); margin: 2rem 0; }
-
-@media (max-width: 992px) {
-  .image-management { grid-template-columns: 1fr; }
 }

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

@@ -1,108 +1,26 @@
-<!-- /src/app/features/admin/components/products/product-edit/product-edit.component.html -->
-
-<app-card>
 <div *ngIf="isLoading; else formContent" class="loading-container">
   <p>Lade Produktdaten...</p>
 </div>
 
 <ng-template #formContent>
-    <form [formGroup]="productForm" (ngSubmit)="onSubmit()" novalidate>
   <div class="form-header">
-        <h3 card-header>{{ isEditMode ? "Produkt bearbeiten" : "Neues Produkt erstellen" }}</h3>
+    <h3 card-header>Produkt bearbeiten</h3>
   </div>
-
+  <app-product-form
-      <div class="edit-layout">
+    [productForm]="productForm"
-        <!-- LINKE SPALTE -->
+    [allCategories]="(allCategories$ | async) || []"
-        <div class="main-content">
+    [supplierOptions]="(supplierOptions$ | async) || []"
-          <app-card>
+    [existingImages]="existingImages"
-            <h4 card-header>Allgemein</h4>
+    [mainImagePreview]="mainImagePreview"
-            <div class="form-section">
+    [additionalImagesPreview]="additionalImagesPreview"
-              <app-form-field label="Name"><input type="text" formControlName="name"></app-form-field>
+    [isLoading]="isLoading"
-              <app-form-field label="Slug"><input type="text" formControlName="slug"></app-form-field>
+    submitButtonText="Änderungen speichern"
-              <app-form-textarea label="Beschreibung" [rows]="8" formControlName="description"></app-form-textarea>
+    (formSubmit)="onSubmit()"
-            </div>
+    (formCancel)="cancel()"
-          </app-card>
+    (mainFileSelected)="onMainFileSelected($event)"
-
+    (additionalFilesSelected)="onAdditionalFilesSelected($event)"
-          <app-card>
+    (existingImageDeleted)="onExistingImageDeleted($event)"
-            <h4 card-header>Produktbilder</h4>
+    (newImageRemoved)="onNewImageRemoved($event)"
-            <!-- ... (Bild-Management bleibt gleich) ... -->
+  >
-          </app-card>
+  </app-product-form>
-
-          <app-card>
-            <h4 card-header>Preisgestaltung</h4>
-            <div class="form-grid price-grid">
-              <!-- KORREKTUR: Wrapper entfernt, formControlName auf die Komponente -->
-              <app-form-field label="Preis (€)" type="number" formControlName="price"></app-form-field>
-              <app-form-field label="Alter Preis (€)" type="number" formControlName="oldPrice"></app-form-field>
-              <app-form-field label="Einkaufspreis (€)" type="number" formControlName="purchasePrice"></app-form-field>
-            </div>
-          </app-card>
-        </div>
-
-        <!-- RECHTE SPALTE -->
-        <div class="sidebar-content">
-          <app-card>
-            <h4 card-header>Status</h4>
-            <div class="form-section">
-              <app-slide-toggle formControlName="isActive">Aktiv (im Shop sichtbar)</app-slide-toggle>
-            </div>
-          </app-card>
-
-          <app-card>
-            <h4 card-header>Organisation</h4>
-            <div class="form-section">
-              <div class="form-field">
-                <label class="form-label">SKU (Artikelnummer)</label>
-                <div class="input-with-button">
-                  <input type="text" class="form-input" formControlName="sku" />
-                  <app-button buttonType="icon" (click)="generateSku()" iconName="placeholder"></app-button>
-                </div>
-              </div>
-              <app-form-field label="Lagerbestand" type="number" formControlName="stockQuantity"></app-form-field>
-              <app-form-field label="Gewicht (kg)" type="number" formControlName="weight"></app-form-field>
-              <app-form-select label="Lieferant" [options]="(supplierOptions$ | async) || []" formControlName="supplierId"></app-form-select>
-            </div>
-          </app-card>
-          
-          <app-card>
-            <h4 card-header>Kategorien</h4>
-            <div class="form-section">
-              <div class="multi-select-container">
-                <div class="selected-pills">
-                  <span *ngFor="let catId of categorieIds.value" class="pill">
-                    {{ getCategoryName(catId) }}
-                    <app-icon iconName="x" (click)="removeCategoryById(catId)"></app-icon>
-                  </span>
-                  <span *ngIf="categorieIds.length === 0" class="placeholder">Keine ausgewählt</span>
-                </div>
-                <div class="category-checkbox-group">
-                  <label *ngFor="let category of allCategories$ | async">
-                    <input type="checkbox" [value]="category.id" [checked]="isCategorySelected(category.id)" (change)="onCategoryChange($event)">
-                    {{ category.name }}
-                  </label>
-                </div>
-              </div>
-            </div>
-          </app-card>
-
-          <app-card>
-            <h4 card-header>Hervorheben</h4>
-            <div class="form-section">
-              <app-slide-toggle formControlName="isFeatured">Auf Startseite anzeigen</app-slide-toggle>
-              <app-form-field *ngIf="productForm.get('isFeatured')?.value" label="Anzeigereihenfolge">
-                <input type="number" formControlName="featuredDisplayOrder">
-              </app-form-field>
-            </div>
-          </app-card>
-        </div>
-      </div>
-
-      <div class="form-actions">
-        <app-button buttonType="stroked" (click)="cancel()">Abbrechen</app-button>
-        <app-button submitType="submit" buttonType="primary" [disabled]="productForm.invalid || isLoading">
-          {{ isEditMode ? "Änderungen speichern" : "Produkt erstellen" }}
-        </app-button>
-      </div>
-    </form>
 </ng-template>
-</app-card>

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

@@ -1,16 +1,29 @@
-// /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,
+  FormArray,
+  FormControl,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { Observable, Subscription } from 'rxjs';
-import { debounceTime, distinctUntilChanged, map, startWith, tap } from 'rxjs/operators';
+import {
+  map,
+  startWith,
+  debounceTime,
+  distinctUntilChanged,
+} from 'rxjs/operators';
 
 // Models
-import { AdminProduct, ProductImage } from '../../../../core/models/product.model';
+import {
+  AdminProduct,
+  ProductImage,
+} from '../../../../core/models/product.model';
 import { Category } from '../../../../core/models/category.model';
-import { Supplier } from '../../../../core/models/supplier.model';
 
 // Services
 import { ProductService } from '../../../services/product.service';
@@ -18,23 +31,25 @@ import { CategoryService } from '../../../services/category.service';
 import { SupplierService } from '../../../services/supplier.service';
 import { SnackbarService } from '../../../../shared/services/snackbar.service';
 
-// Wiederverwendbare UI- & Form-Komponenten
+// UI Components
 import { CardComponent } from '../../../../shared/components/ui/card/card.component';
-import { ButtonComponent } from '../../../../shared/components/ui/button/button.component';
+import { ProductFormComponent } from '../product-form/product-form.component';
-import { IconComponent } from '../../../../shared/components/ui/icon/icon.component';
+import { SelectOption } from '../../../../shared/components/form/form-select/form-select.component';
-import { FormFieldComponent } from '../../../../shared/components/form/form-field/form-field.component';
-import { FormSelectComponent, SelectOption } from '../../../../shared/components/form/form-select/form-select.component';
-import { FormTextareaComponent } from '../../../../shared/components/form/form-textarea/form-textarea.component';
-import { SlideToggleComponent } from '../../../../shared/components/form/slide-toggle/slide-toggle.component';
 
 @Component({
   selector: 'app-product-edit',
   standalone: true,
-  imports: [ CommonModule, ReactiveFormsModule, CardComponent, ButtonComponent, IconComponent, FormFieldComponent, FormSelectComponent, FormTextareaComponent, SlideToggleComponent ],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    CardComponent,
+    ProductFormComponent,
+  ],
   templateUrl: './product-edit.component.html',
-  styleUrl: './product-edit.component.css'
+  styleUrls: ['./product-edit.component.css'],
 })
 export class ProductEditComponent implements OnInit, OnDestroy {
+  // Service-Injektionen
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private productService = inject(ProductService);
@@ -42,53 +57,65 @@ export class ProductEditComponent implements OnInit, OnDestroy {
   private supplierService = inject(SupplierService);
   private fb = inject(FormBuilder);
   private snackbarService = inject(SnackbarService);
+  private sanitizer = inject(DomSanitizer);
 
-  productId: string | null = null;
+  // Komponenten-Status
-  isEditMode = false;
+  productId!: string;
   isLoading = true;
   productForm: FormGroup;
+  private nameChangeSubscription?: Subscription;
 
+  // Daten für Dropdowns und Formular
   allCategories$!: Observable<Category[]>;
   supplierOptions$!: Observable<SelectOption[]>;
-  allCategories: Category[] = [];
 
-  private nameChangeSubscription?: Subscription;
+  // State für Bild-Management
   existingImages: ProductImage[] = [];
   mainImageFile: File | null = null;
   additionalImageFiles: File[] = [];
+  mainImagePreview: string | SafeUrl | null = null;
+  additionalImagesPreview: { name: string; url: SafeUrl }[] = [];
 
   constructor() {
     this.productForm = this.fb.group({
-      name: ['', Validators.required], slug: ['', Validators.required], sku: ['', Validators.required],
+      id: ['', Validators.required], // ID ist für das Update zwingend erforderlich
-      description: [''], price: [0, [Validators.required, Validators.min(0)]],
+      name: ['', Validators.required],
-      oldPrice: [null, [Validators.min(0)]], purchasePrice: [null, [Validators.min(0)]],
+      slug: ['', Validators.required],
-      stockQuantity: [0, [Validators.required, Validators.min(0)]], weight: [null, [Validators.min(0)]],
+      sku: ['', Validators.required],
-      isActive: [true], isFeatured: [false], featuredDisplayOrder: [0],
+      price: [0, [Validators.required, Validators.min(0)]],
-      supplierId: [null], categorieIds: this.fb.array([]), imagesToDelete: this.fb.array([])
+      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: this.fb.array([]),
+      imagesToDelete: this.fb.array([]), // Wird für das Backend gefüllt
     });
   }
 
-  get categorieIds(): FormArray { return this.productForm.get('categorieIds') as FormArray; }
+  get categorieIds(): FormArray {
-  get imagesToDelete(): FormArray { return this.productForm.get('imagesToDelete') as FormArray; }
+    return this.productForm.get('categorieIds') as FormArray;
+  }
+  get imagesToDelete(): FormArray {
+    return this.productForm.get('imagesToDelete') as FormArray;
+  }
 
   ngOnInit(): void {
-    this.productId = this.route.snapshot.paramMap.get('id');
+    const id = this.route.snapshot.paramMap.get('id');
-    this.isEditMode = !!this.productId;
+    if (!id) {
+      this.snackbarService.show('Produkt-ID fehlt. Umleitung zur Übersicht.');
+      this.router.navigate(['/admin/products']);
+      return;
+    }
+    this.productId = id;
 
     this.loadDropdownData();
+    this.loadProductData();
     this.subscribeToNameChanges();
-
-    if (this.isEditMode && this.productId) {
-      this.isLoading = true;
-      this.productService.getById(this.productId).subscribe(product => {
-        if (product) {
-          this.populateForm(product);
-        }
-        this.isLoading = false;
-      });
-    } else {
-      this.isLoading = false;
-    }
   }
 
   ngOnDestroy(): void {
@@ -96,71 +123,46 @@ export class ProductEditComponent implements OnInit, OnDestroy {
   }
 
   loadDropdownData(): void {
-    this.allCategories$ = this.categoryService.getAll().pipe(
+    this.allCategories$ = this.categoryService.getAll();
-      tap(categories => this.allCategories = categories)
-    );
     this.supplierOptions$ = this.supplierService.getAll().pipe(
-      map(suppliers => suppliers.map(s => ({ value: s.id, label: s.name || 'Unbenannt' }))),
+      map((suppliers) =>
+        suppliers.map((s) => ({ value: s.id, label: s.name || 'Unbenannt' }))
+      ),
       startWith([])
     );
   }
 
+  loadProductData(): void {
+    this.isLoading = true;
+    this.productService.getById(this.productId).subscribe({
+      next: (product) => {
+        if (product) {
+          this.populateForm(product);
+        } else {
+          this.snackbarService.show('Produkt nicht gefunden.');
+          this.router.navigate(['/admin/products']);
+        }
+        this.isLoading = false;
+      },
+      error: () => {
+        this.snackbarService.show('Fehler beim Laden des Produkts.');
+        this.isLoading = false;
+        this.router.navigate(['/admin/products']);
+      },
+    });
+  }
+
   populateForm(product: AdminProduct): void {
     this.productForm.patchValue(product);
+
     this.categorieIds.clear();
-    product.categorieIds?.forEach(id => this.categorieIds.push(this.fb.control(id)));
+    product.categorieIds?.forEach((id) =>
+      this.categorieIds.push(new FormControl(id))
+    );
+
     this.existingImages = product.images || [];
-  }
+    const mainImage = this.existingImages.find((img) => img.isMainImage);
-
+    this.mainImagePreview = mainImage?.url ?? null;
-  onMainFileChange(event: Event): void {
-    const file = (event.target as HTMLInputElement).files?.[0];
-    if (file) this.mainImageFile = file;
-  }
-  
-  onAdditionalFilesChange(event: Event): void {
-    const files = (event.target as HTMLInputElement).files;
-    if (files) this.additionalImageFiles = Array.from(files);
-  }
-
-  deleteExistingImage(imageId: string, event: Event): void {
-    event.preventDefault();
-    this.imagesToDelete.push(this.fb.control(imageId));
-    this.existingImages = this.existingImages.filter(img => img.id !== imageId);
-  }
-
-  onCategoryChange(event: Event): void {
-    const checkbox = event.target as HTMLInputElement;
-    const categoryId = checkbox.value;
-    if (checkbox.checked) {
-      if (!this.categorieIds.value.includes(categoryId)) this.categorieIds.push(new FormControl(categoryId));
-    } else {
-      const index = this.categorieIds.controls.findIndex(x => x.value === categoryId);
-      if (index !== -1) this.categorieIds.removeAt(index);
-    }
-  }
-
-  isCategorySelected(categoryId: string): boolean {
-    return this.categorieIds.value.includes(categoryId);
-  }
-
-  getCategoryName(categoryId: string): string {
-    return this.allCategories.find(c => c.id === categoryId)?.name || '';
-  }
-
-  removeCategoryById(categoryId: string): void {
-    const index = this.categorieIds.controls.findIndex(x => x.value === categoryId);
-    if (index !== -1) {
-      this.categorieIds.removeAt(index);
-    }
-  }
-
-  generateSku(): void {
-    const name = this.productForm.get('name')?.value || 'PROD';
-    const prefix = name.substring(0, 4).toUpperCase().replace(/\s+/g, '');
-    const randomPart = Math.random().toString(36).substring(2, 8).toUpperCase();
-    const sku = `${prefix}-${randomPart}`;
-    this.productForm.get('sku')?.setValue(sku);
-    this.snackbarService.show('Neue SKU generiert!');
   }
 
   onSubmit(): void {
@@ -170,35 +172,20 @@ export class ProductEditComponent implements OnInit, OnDestroy {
       return;
     }
 
-    const formData = new FormData();
+    this.prepareSubmissionData();
-    const formValue = this.productForm.value;
+    const formData = this.createFormData();
 
-    Object.keys(formValue).forEach((key) => {
+    this.productService.update(this.productId, formData).subscribe({
-      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 !== '') {
-        if (['oldPrice', 'purchasePrice', 'weight'].includes(key) && value === '') return;
-        formData.append(this.capitalizeFirstLetter(key), value.toString());
-      }
-    });
-
-    if (this.mainImageFile) formData.append('MainImageFile', this.mainImageFile);
-    this.additionalImageFiles.forEach((file) => formData.append('AdditionalImageFiles', file));
-
-    const operation: Observable<any> = this.isEditMode
-      ? this.productService.update(this.productId!, formData)
-      : this.productService.create(formData);
-      
-    operation.subscribe({
       next: () => {
-        this.snackbarService.show(this.isEditMode ? 'Produkt aktualisiert' : 'Produkt erstellt');
+        this.snackbarService.show('Produkt erfolgreich aktualisiert');
         this.router.navigate(['/admin/products']);
       },
-      error: (err: any) => {
+      error: (err) => {
-        this.snackbarService.show('Ein Fehler ist aufgetreten.');
+        this.snackbarService.show(
+          'Ein Fehler ist aufgetreten. Details siehe Konsole.'
+        );
         console.error(err);
-      }
+      },
     });
   }
 
@@ -206,20 +193,130 @@ export class ProductEditComponent implements OnInit, OnDestroy {
     this.router.navigate(['/admin/products']);
   }
 
-  private subscribeToNameChanges(): void {
+  // Handler für Bild-Events von der Form-Komponente
-    this.nameChangeSubscription = this.productForm.get('name')?.valueChanges.pipe(debounceTime(300), distinctUntilChanged())
+  onMainFileSelected(file: File): void {
-      .subscribe((name) => {
+    this.mainImageFile = file;
-        if (name && !this.productForm.get('slug')?.dirty) {
+    const reader = new FileReader();
-          const slug = this.generateSlug(name);
+    reader.onload = () => {
-          this.productForm.get('slug')?.setValue(slug);
+      this.mainImagePreview = this.sanitizer.bypassSecurityTrustUrl(
+        reader.result as string
+      );
+    };
+    reader.readAsDataURL(file);
   }
+
+  onAdditionalFilesSelected(files: File[]): void {
+    this.additionalImageFiles.push(...files);
+    files.forEach((file) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        this.additionalImagesPreview.push({
+          name: file.name,
+          url: this.sanitizer.bypassSecurityTrustUrl(reader.result as string),
+        });
+      };
+      reader.readAsDataURL(file);
     });
   }
 
+  onExistingImageDeleted(imageId: string): void {
+    if (!this.imagesToDelete.value.includes(imageId)) {
+      this.imagesToDelete.push(new FormControl(imageId));
+    }
+    this.existingImages = this.existingImages.filter(
+      (img) => img.id !== imageId
+    );
+    // Wenn das gelöschte Bild das Hauptbild war, leeren wir die Vorschau
+    if (
+      this.mainImagePreview ===
+      this.existingImages.find((i) => i.id === imageId)?.url
+    ) {
+      this.mainImagePreview = null;
+    }
+  }
+
+  onNewImageRemoved(fileName: string): void {
+    this.additionalImageFiles = this.additionalImageFiles.filter(
+      (f) => f.name !== fileName
+    );
+    this.additionalImagesPreview = this.additionalImagesPreview.filter(
+      (p) => p.name !== fileName
+    );
+  }
+
+  // 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 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());
+      }
+    });
+
+    if (this.mainImageFile)
+      formData.append('MainImageFile', this.mainImageFile);
+    this.additionalImageFiles.forEach((file) =>
+      formData.append('AdditionalImageFiles', file)
+    );
+
+    return formData;
+  }
+
+  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) => {
+    return name
-      switch (char) { case 'ä': return 'ae'; case 'ö': return 'oe'; case 'ü': return 'ue'; case 'ß': return 'ss'; default: return ''; }
+      .toLowerCase()
-    }).replace(/[^a-z0-9-]/g, '').replace(/-+/g, '-');
+      .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 {

src/app/features/components/products/product-form/product-form.component.css

@@ -0,0 +1,267 @@
+/* /src/app/features/admin/components/products/product-form/product-form.component.css */
+
+/* ==========================================================================
+   Globale Variablen & Grund-Layout
+   ========================================================================== */
+
+:host {
+  --form-spacing-vertical: 1.5rem; /* Vertikaler Abstand zwischen Formular-Sektionen */
+  --form-spacing-horizontal: 1.5rem; /* Innenabstand der Sektionen */
+  --grid-gap: 1.5rem; /* Abstand zwischen den Spalten und Karten */
+  --border-radius: 8px;
+
+  --text-color-secondary: #64748b;
+  --background-color-light: #f8fafc;
+}
+
+.edit-layout {
+  display: grid;
+  grid-template-columns: 2fr 1fr; /* 2/3 für Hauptinhalt, 1/3 für Sidebar */
+  gap: var(--grid-gap);
+}
+
+.main-content,
+.sidebar-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--grid-gap);
+}
+
+/* ==========================================================================
+   Karten-Styling (app-card)
+   ========================================================================== */
+
+/* Wir stylen die app-card von außen, um ein konsistentes Layout zu gewährleisten. */
+app-card {
+  display: block; /* Stellt sicher, dass die Karte den vollen Platz einnimmt */
+  width: 100%;
+}
+
+/* Stile, die innerhalb der Karten gelten */
+.form-section {
+  padding: var(--form-spacing-horizontal);
+  display: flex;
+  flex-direction: column;
+  gap: var(--form-spacing-vertical);
+}
+
+h4[card-header] {
+  margin-bottom: 0; /* Entfernt Standard-Margin des Headers */
+}
+
+/* ==========================================================================
+   Allgemeine Formular-Elemente
+   ========================================================================== */
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.form-label {
+  font-weight: 500;
+  color: #334155;
+}
+
+.form-input,
+input[type="text"],
+input[type="number"] {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.form-input:focus,
+input[type="text"]:focus,
+input[type="number"]:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
+}
+
+.form-hint {
+  font-size: 0.875rem;
+  color: var(--text-color-secondary);
+  margin-top: -0.75rem; /* Reduziert den Abstand nach oben */
+}
+
+.input-with-button {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.input-with-button .form-input {
+  flex-grow: 1;
+}
+
+/* ==========================================================================
+   Spezifisches Sektions-Styling
+   ========================================================================== */
+
+/* Preisgestaltung Grid */
+.price-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: var(--grid-gap);
+}
+
+/* Bild-Management */
+.image-upload-section {
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+.image-upload-section:last-of-type {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.image-gallery {
+  margin-top: 1rem;
+}
+
+.gallery-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-color-secondary);
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: 1rem;
+}
+
+.image-preview-container {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+}
+
+.image-preview {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.main-image-preview {
+  width: 100%;
+  height: auto;
+  max-height: 250px;
+  margin-bottom: 1rem;
+}
+
+.main-image-badge {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  background-color: var(--color-primary);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 16px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.image-preview-container app-button {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
+  --button-icon-color: white; /* Angenommen, dein Button kann dies überschreiben */
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.image-preview-container:hover app-button {
+  opacity: 1;
+}
+
+.additional-images-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+/* Kategorien-Auswahl */
+.multi-select-container {
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+}
+
+.selected-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.pill {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background-color: var(--background-color-light);
+  border: 1px solid var(--color-border);
+  padding: 0.25rem 0.75rem;
+  border-radius: 16px;
+  font-size: 0.875rem;
+}
+
+.pill app-icon {
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+}
+.pill app-icon:hover {
+  color: var(--color-danger);
+}
+
+.placeholder {
+  color: var(--text-color-secondary);
+}
+
+.category-checkbox-group {
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 0.75rem;
+}
+
+.category-checkbox-group label {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0;
+}
+
+/* ==========================================================================
+   Aktions-Buttons
+   ========================================================================== */
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+  margin-top: var(--grid-gap);
+  padding-top: var(--grid-gap);
+  border-top: 1px solid var(--color-border);
+}
+
+/* ==========================================================================
+   Responsives Design
+   ========================================================================== */
+
+@media (max-width: 1024px) {
+  .edit-layout {
+    grid-template-columns: 1fr; /* Eine Spalte auf kleineren Bildschirmen */
+  }
+}
+
+.required-indicator {
+  color: var(--color-danger);
+  margin-left: 4px;
+}

src/app/features/components/products/product-form/product-form.component.html

@@ -0,0 +1,201 @@
+<!-- /src/app/features/admin/components/products/product-form/product-form.component.html -->
+
+<form [formGroup]="productForm" (ngSubmit)="onSubmit()" novalidate>
+  <div class="edit-layout">
+
+    <!-- ================================================================= -->
+    <!-- LINKE SPALTE (HAUPTINHALT)                                      -->
+    <!-- ================================================================= -->
+    <div class="main-content">
+
+      <!-- Card: Allgemeine Produktinformationen -->
+      <app-card>
+        <h4 card-header>Allgemein</h4>
+        <div class="form-section">
+          <!-- Umgestellt auf die neue, intelligente Komponente -->
+          <app-form-field
+            label="Name"
+            type="text"
+            formControlName="name"
+            [control]="productForm.get('name')">
+          </app-form-field>
+
+          <app-form-field
+            label="Slug"
+            type="text"
+            formControlName="slug"
+            [control]="productForm.get('slug')">
+          </app-form-field>
+
+          <!-- Textarea bleibt eine eigene Komponente, da sie spezielle Eigenschaften hat -->
+          <app-form-textarea
+            label="Beschreibung"
+            [rows]="8"
+            formControlName="description"
+            [control]="productForm.get('description')">
+          </app-form-textarea>
+        </div>
+      </app-card>
+
+      <!-- Card: Bild-Management (bleibt unverändert, da es sich um file-inputs handelt) -->
+      <app-card>
+        <h4 card-header>Produktbilder</h4>
+        <div class="form-section">
+          <div class="image-upload-section">
+            <label class="form-label">Hauptbild</label>
+            <p class="form-hint">Laden Sie hier das primäre Bild hoch.</p>
+            <input type="file" accept="image/*" (change)="onMainFileChange($event)" />
+          </div>
+          <div class="image-upload-section">
+            <label class="form-label">Zusätzliche Bilder</label>
+            <p class="form-hint">Weitere Bilder für die Produktdetailseite.</p>
+            <input type="file" accept="image/*" multiple (change)="onAdditionalFilesChange($event)" />
+          </div>
+        </div>
+        <div *ngIf="hasImages" class="image-gallery">
+          <h5 class="gallery-title">Vorschau</h5>
+          <div *ngIf="mainImagePreview" class="image-preview-container main-image-preview">
+            <img [src]="mainImagePreview" alt="Vorschau Hauptbild" class="image-preview" />
+            <span class="main-image-badge">Hauptbild</span>
+          </div>
+          <div class="additional-images-grid">
+            <div *ngFor="let image of additionalExistingImages" class="image-preview-container">
+              <img [src]="image.url" [alt]="'Bild ' + image.id" class="image-preview" />
+              <app-button buttonType="icon-danger" (click)="deleteExistingImage(image.id, $event)" iconName="delete"></app-button>
+            </div>
+            <div *ngFor="let preview of additionalImagesPreview" class="image-preview-container">
+              <img [src]="preview.url" [alt]="preview.name" class="image-preview" />
+              <app-button buttonType="icon-danger" (click)="removeNewImage(preview.name, $event)" iconName="delete"></app-button>
+            </div>
+          </div>
+        </div>
+      </app-card>
+
+      <!-- Card: Preisgestaltung -->
+      <app-card>
+        <h4 card-header>Preisgestaltung</h4>
+        <div class="form-grid price-grid">
+          <app-form-field
+            label="Preis (€)"
+            type="number"
+            formControlName="price"
+            [control]="productForm.get('price')">
+          </app-form-field>
+
+          <app-form-field
+            label="Alter Preis (€)"
+            type="number"
+            formControlName="oldPrice"
+            [control]="productForm.get('oldPrice')">
+          </app-form-field>
+
+          <app-form-field
+            label="Einkaufspreis (€)"
+            type="number"
+            formControlName="purchasePrice"
+            [control]="productForm.get('purchasePrice')">
+          </app-form-field>
+        </div>
+      </app-card>
+    </div>
+
+    <!-- ================================================================= -->
+    <!-- RECHTE SPALTE (SEITENLEISTE)                                    -->
+    <!-- ================================================================= -->
+    <div class="sidebar-content">
+      <!-- Card: Status -->
+      <app-card>
+        <h4 card-header>Status</h4>
+        <div class="form-section">
+          <app-slide-toggle formControlName="isActive">Aktiv (im Shop sichtbar)</app-slide-toggle>
+        </div>
+      </app-card>
+
+      <!-- Card: Organisation -->
+      <app-card>
+        <h4 card-header>Organisation</h4>
+        <div class="form-section">
+          <!-- SKU bleibt manuell, da es ein spezielles Layout mit einem Button hat -->
+          <div class="form-field">
+            <label class="form-label">SKU (Artikelnummer) <span class="required-indicator">*</span></label>
+            <div class="input-with-button">
+              <input type="text" class="form-input" formControlName="sku" />
+              <app-button buttonType="icon" (click)="generateSku()" iconName="refresh-cw"></app-button>
+            </div>
+          </div>
+
+          <app-form-field
+            label="Lagerbestand"
+            type="number"
+            formControlName="stockQuantity"
+            [control]="productForm.get('stockQuantity')">
+          </app-form-field>
+
+          <app-form-field
+            label="Gewicht (kg)"
+            type="number"
+            formControlName="weight"
+            [control]="productForm.get('weight')">
+          </app-form-field>
+
+          <app-form-select
+            label="Lieferant"
+            [options]="supplierOptions"
+            formControlName="supplierId">
+          </app-form-select>
+        </div>
+      </app-card>
+
+      <!-- Card: Kategorien (bleibt unverändert, da es sich um eine komplexe Checkbox-Gruppe handelt) -->
+      <app-card>
+        <h4 card-header>Kategorien</h4>
+        <div class="form-section">
+          <div class="multi-select-container">
+            <div class="selected-pills">
+              <span *ngFor="let catId of categorieIds.value" class="pill">
+                {{ getCategoryName(catId) }}
+                <app-icon iconName="x" (click)="removeCategoryById(catId)"></app-icon>
+              </span>
+              <span *ngIf="categorieIds.length === 0" class="placeholder">Keine ausgewählt</span>
+            </div>
+            <div class="category-checkbox-group">
+              <label *ngFor="let category of allCategories">
+                <input type="checkbox" [value]="category.id" [checked]="isCategorySelected(category.id)" (change)="onCategoryChange($event)" />
+                {{ category.name }}
+              </label>
+            </div>
+          </div>
+        </div>
+      </app-card>
+
+      <!-- Card: Hervorheben -->
+      <app-card>
+        <h4 card-header>Hervorheben</h4>
+        <div class="form-section">
+          <app-slide-toggle formControlName="isFeatured">Auf Startseite anzeigen</app-slide-toggle>
+
+          <app-form-field
+            *ngIf="productForm.get('isFeatured')?.value"
+            label="Anzeigereihenfolge"
+            type="number"
+            formControlName="featuredDisplayOrder"
+            [control]="productForm.get('featuredDisplayOrder')">
+          </app-form-field>
+        </div>
+      </app-card>
+    </div>
+  </div>
+
+  <!-- ================================================================= -->
+  <!-- FORMULAR-AKTIONEN (SPEICHERN/ABBRECHEN)                         -->
+  <!-- ================================================================= -->
+  <div class="form-actions">
+    <app-button buttonType="stroked" (click)="cancel()">Abbrechen</app-button>
+    <app-button
+      submitType="submit"
+      buttonType="primary"
+      [disabled]="!productForm.valid || isLoading">
+      {{ submitButtonText }}
+    </app-button>
+  </div>
+</form>

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

@@ -0,0 +1,134 @@
+// /src/app/features/admin/components/products/product-form/product-form.component.ts
+
+import { Component, Input, Output, EventEmitter, inject, OnChanges, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup, FormArray, ReactiveFormsModule, FormControl } from '@angular/forms';
+import { SafeUrl } from '@angular/platform-browser';
+
+// Models
+import { ProductImage } from '../../../../core/models/product.model';
+import { Category } from '../../../../core/models/category.model';
+
+// Services
+import { SnackbarService } from '../../../../shared/services/snackbar.service';
+
+// UI Components
+import { CardComponent } from '../../../../shared/components/ui/card/card.component';
+import { ButtonComponent } from '../../../../shared/components/ui/button/button.component';
+import { IconComponent } from '../../../../shared/components/ui/icon/icon.component';
+import { FormFieldComponent } from '../../../../shared/components/form/form-field/form-field.component';
+import { FormSelectComponent, SelectOption } from '../../../../shared/components/form/form-select/form-select.component';
+import { FormTextareaComponent } from '../../../../shared/components/form/form-textarea/form-textarea.component';
+import { SlideToggleComponent } from '../../../../shared/components/form/slide-toggle/slide-toggle.component';
+
+@Component({
+  selector: 'app-product-form',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    CardComponent,
+    ButtonComponent,
+    IconComponent,
+    FormFieldComponent,
+    FormSelectComponent,
+    FormTextareaComponent,
+    SlideToggleComponent,
+  ],
+  templateUrl: './product-form.component.html',
+  styleUrls: ['./product-form.component.css']
+})
+export class ProductFormComponent {
+  @Input() productForm!: FormGroup;
+  @Input() allCategories: Category[] = [];
+  @Input() supplierOptions: SelectOption[] = [];
+  @Input() isLoading = false;
+  @Input() submitButtonText = 'Speichern';
+  
+  // Inputs & Outputs für Bilder
+  @Input() existingImages: ProductImage[] = [];
+  @Input() mainImagePreview: string | SafeUrl | null = null;
+  @Input() additionalImagesPreview: { name: string, url: string | SafeUrl }[] = [];
+
+  @Output() formSubmit = new EventEmitter<void>();
+  @Output() formCancel = new EventEmitter<void>();
+  @Output() mainFileSelected = new EventEmitter<File>();
+  @Output() additionalFilesSelected = new EventEmitter<File[]>();
+  @Output() existingImageDeleted = new EventEmitter<string>();
+  @Output() newImageRemoved = new EventEmitter<string>();
+
+  private snackbarService = inject(SnackbarService);
+
+  // GETTER FÜR DAS TEMPLATE
+  get categorieIds(): FormArray { return this.productForm.get('categorieIds') as FormArray; }
+
+  get hasImages(): boolean {
+    return !!this.mainImagePreview || this.additionalImagesPreview.length > 0 || this.existingImages.length > 0;
+  }
+  
+  // NEU: Getter, der die Filter-Logik aus dem Template entfernt
+  get additionalExistingImages(): ProductImage[] {
+    return this.existingImages.filter(image => !image.isMainImage);
+  }
+
+  // FORMULAR-INTERAKTIONEN
+  onSubmit(): void { this.formSubmit.emit(); }
+  cancel(): void { this.formCancel.emit(); }
+
+  // BILD-MANAGEMENT
+  onMainFileChange(event: Event): void {
+    const file = (event.target as HTMLInputElement).files?.[0];
+    if (file) this.mainFileSelected.emit(file);
+  }
+  
+  onAdditionalFilesChange(event: Event): void {
+    const files = (event.target as HTMLInputElement).files;
+    if (files) this.additionalFilesSelected.emit(Array.from(files));
+  }
+
+  deleteExistingImage(imageId: string, event: Event): void {
+    event.preventDefault();
+    this.existingImageDeleted.emit(imageId);
+  }
+
+  removeNewImage(fileName: string, event: Event): void {
+     event.preventDefault();
+     this.newImageRemoved.emit(fileName);
+  }
+
+  // KATEGORIE- & SKU-HELFER
+  generateSku(): void {
+    const name = this.productForm.get('name')?.value || 'PROD';
+    const prefix = name.substring(0, 4).toUpperCase().replace(/\s+/g, '');
+    const randomPart = Math.random().toString(36).substring(2, 8).toUpperCase();
+    const sku = `${prefix}-${randomPart}`;
+    this.productForm.get('sku')?.setValue(sku);
+    this.snackbarService.show('Neue SKU generiert!');
+  }
+
+  onCategoryChange(event: Event): void {
+    const checkbox = event.target as HTMLInputElement;
+    const categoryId = checkbox.value;
+    if (checkbox.checked) {
+      if (!this.categorieIds.value.includes(categoryId)) {
+        this.categorieIds.push(new FormControl(categoryId));
+      }
+    } else {
+      const index = this.categorieIds.controls.findIndex(x => x.value === categoryId);
+      if (index !== -1) this.categorieIds.removeAt(index);
+    }
+  }
+
+  isCategorySelected(categoryId: string): boolean {
+    return this.categorieIds.value.includes(categoryId);
+  }
+
+  getCategoryName(categoryId: string): string {
+    return this.allCategories.find(c => c.id === categoryId)?.name || '';
+  }
+
+  removeCategoryById(categoryId: string): void {
+    const index = this.categorieIds.controls.findIndex(x => x.value === categoryId);
+    if (index !== -1) this.categorieIds.removeAt(index);
+  }
+}

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

@@ -3,18 +3,12 @@
 import { Component, OnInit, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
-import {
+import { AdminProduct, ProductImage } from '../../../../core/models/product.model';
-  AdminProduct,
-  ProductImage,
-} from '../../../../core/models/product.model';
 import { ProductService } from '../../../services/product.service';
 import { SupplierService } from '../../../services/supplier.service';
 import { SnackbarService } from '../../../../shared/services/snackbar.service';
 import { StorageService } from '../../../../core/services/storage.service';
-import {
+import { GenericTableComponent, ColumnConfig } from '../../../../shared/components/data-display/generic-table/generic-table.component';
-  GenericTableComponent,
-  ColumnConfig,
-} from '../../../../shared/components/data-display/generic-table/generic-table.component';
 import { SearchBarComponent } from '../../../../shared/components/layout/search-bar/search-bar.component';
 import { ButtonComponent } from '../../../../shared/components/ui/button/button.component';
 import { IconComponent } from '../../../../shared/components/ui/icon/icon.component';
@@ -22,18 +16,10 @@ import { IconComponent } from '../../../../shared/components/ui/icon/icon.compon
 @Component({
   selector: 'app-product-list',
   standalone: true,
-  imports: [
+  imports: [CommonModule, CurrencyPipe, DatePipe, GenericTableComponent, SearchBarComponent, ButtonComponent, IconComponent],
-    CommonModule,
-    CurrencyPipe,
-    DatePipe,
-    GenericTableComponent,
-    SearchBarComponent,
-    ButtonComponent,
-    IconComponent,
-  ],
   providers: [DatePipe],
   templateUrl: './product-list.component.html',
-  styleUrl: './product-list.component.css',
+  styleUrl: './product-list.component.css'
 })
 export class ProductListComponent implements OnInit {
   private productService = inject(ProductService);
@@ -45,62 +31,31 @@ export class ProductListComponent implements OnInit {
   
   private readonly TABLE_SETTINGS_KEY = 'product-table-columns';
 
-  allProducts: (AdminProduct & {
+  allProducts: (AdminProduct & { mainImage?: string; supplierName?: string })[] = [];
-    mainImage?: string;
+  filteredProducts: (AdminProduct & { mainImage?: string; supplierName?: string })[] = [];
-    supplierName?: string;
-  })[] = [];
-  filteredProducts: (AdminProduct & {
-    mainImage?: string;
-    supplierName?: string;
-  })[] = [];
   isColumnFilterVisible = false;
 
   readonly allTableColumns: ColumnConfig[] = [
     { key: 'mainImage', title: 'Bild', type: 'image' },
     { key: 'name', title: 'Name', type: 'text', subKey: 'sku' },
     { key: 'price', title: 'Preis', type: 'currency', cssClass: 'text-right' },
-    {
+    { key: 'stockQuantity', title: 'Lager', type: 'text', cssClass: 'text-right' },
-      key: 'stockQuantity',
-      title: 'Lager',
-      type: 'text',
-      cssClass: 'text-right',
-    },
     { key: 'supplierName', title: 'Lieferant', type: 'text' },
     { key: 'isActive', title: 'Aktiv', type: 'status' },
     { key: 'id', title: 'ID', type: 'text' },
     { key: 'description', title: 'Beschreibung', type: 'text' },
-    {
+    { key: 'oldPrice', title: 'Alter Preis', type: 'currency', cssClass: 'text-right' },
-      key: 'oldPrice',
+    { key: 'purchasePrice', title: 'Einkaufspreis', type: 'currency', cssClass: 'text-right' },
-      title: 'Alter Preis',
-      type: 'currency',
-      cssClass: 'text-right',
-    },
-    {
-      key: 'purchasePrice',
-      title: 'Einkaufspreis',
-      type: 'currency',
-      cssClass: 'text-right',
-    },
     { key: 'isInStock', title: 'Auf Lager', type: 'status' },
-    { key: 'weight', title: 'Gewicht', type: 'number', cssClass: 'text-right' },
+    { key: 'weight', title: 'Gewicht', type: 'text', cssClass: 'text-right' },
     { key: 'slug', title: 'Slug', type: 'text' },
-    { key: 'createdDate', title: 'Erstellt am', type: 'date' },
+    { key: 'createdDate', title: 'Erstellt am', type: 'text' },
-    { key: 'lastModifiedDate', title: 'Zuletzt geändert', type: 'date' },
+    { key: 'lastModifiedDate', title: 'Zuletzt geändert', type: 'text' },
     { key: 'supplierId', title: 'Lieferanten-ID', type: 'text' },
     { key: 'categorieIds', title: 'Kategorie-IDs', type: 'text' },
     { key: 'isFeatured', title: 'Hervorgehoben', type: 'status' },
-    {
+    { key: 'featuredDisplayOrder', title: 'Anzeigereihenfolge (hervorgehoben)', type: 'number', cssClass: 'text-right' },
-      key: 'featuredDisplayOrder',
+    { key: 'actions', title: 'Aktionen', type: 'actions', cssClass: 'text-right' }
-      title: 'Anzeigereihenfolge (hervorgehoben)',
-      type: 'number',
-      cssClass: 'text-right',
-    },
-    {
-      key: 'actions',
-      title: 'Aktionen',
-      type: 'actions',
-      cssClass: 'text-right',
-    },
 ];
   visibleTableColumns: ColumnConfig[] = [];
 
@@ -113,16 +68,15 @@ export class ProductListComponent implements OnInit {
   }
 
   loadProducts(): void {
-    this.productService.getAll().subscribe((products) => {
+    this.productService.getAll().subscribe(products => {
-      this.supplierService.getAll().subscribe((suppliers) => {
+      this.supplierService.getAll().subscribe(suppliers => {
-        this.allProducts = products.map((p) => {
+        this.allProducts = products.map(p => {
-          const supplier = suppliers.find((s) => s.id === p.supplierId);
+          const supplier = suppliers.find(s => s.id === p.supplierId);
           return {
             ...p,
             mainImage: this.getMainImageUrl(p.images),
             supplierName: supplier?.name || '-',
-            createdDate:
+            createdDate: this.datePipe.transform(p.createdDate, 'dd.MM.yyyy HH:mm') || '-',
-              this.datePipe.transform(p.createdDate, 'dd.MM.yyyy HH:mm') || '-',
           };
         });
         this.onSearch('');
@@ -132,19 +86,18 @@ export class ProductListComponent implements OnInit {
 
   onSearch(term: string): void {
     const lowerTerm = term.toLowerCase();
-    this.filteredProducts = this.allProducts.filter(
+    this.filteredProducts = this.allProducts.filter(p => 
-      (p) =>
       p.name?.toLowerCase().includes(lowerTerm) ||
       p.sku?.toLowerCase().includes(lowerTerm)
     );
   }
 
   onAddNew(): void {
-    this.router.navigate(['/shop/products/new']);
+    this.router.navigate(['/shop/products/create']);
   }
 
   onEditProduct(productId: string): void {
-    this.router.navigate(['/shop/products', productId]);
+    this.router.navigate(['/shop/products/edit', productId]);
   }
 
   onDeleteProduct(productId: string): void {
@@ -157,26 +110,14 @@ export class ProductListComponent implements OnInit {
   }
 
   private loadTableSettings(): void {
-    const savedKeys = this.storageService.getItem<string[]>(
+    const savedKeys = this.storageService.getItem<string[]>(this.TABLE_SETTINGS_KEY);
-      this.TABLE_SETTINGS_KEY
+    const defaultKeys = ['mainImage', 'name', 'price', 'stockQuantity', 'isActive', 'actions'];
-    );
+    const keysToUse = (savedKeys && savedKeys.length > 0) ? savedKeys : defaultKeys;
-    const defaultKeys = [
+    this.visibleTableColumns = this.allTableColumns.filter(c => keysToUse.includes(c.key));
-      'mainImage',
-      'name',
-      'price',
-      'stockQuantity',
-      'isActive',
-      'actions',
-    ];
-    const keysToUse =
-      savedKeys && savedKeys.length > 0 ? savedKeys : defaultKeys;
-    this.visibleTableColumns = this.allTableColumns.filter((c) =>
-      keysToUse.includes(c.key)
-    );
   }
 
   private saveTableSettings(): void {
-    const visibleKeys = this.visibleTableColumns.map((c) => c.key);
+    const visibleKeys = this.visibleTableColumns.map(c => c.key);
     this.storageService.setItem(this.TABLE_SETTINGS_KEY, visibleKeys);
   }
 
@@ -185,29 +126,26 @@ export class ProductListComponent implements OnInit {
   }
 
   isColumnVisible(columnKey: string): boolean {
-    return this.visibleTableColumns.some((c) => c.key === columnKey);
+    return this.visibleTableColumns.some(c => c.key === columnKey);
   }
 
   onColumnToggle(column: ColumnConfig, event: Event): void {
     const checkbox = event.target as HTMLInputElement;
     if (checkbox.checked) {
       this.visibleTableColumns.push(column);
-      this.visibleTableColumns.sort(
+      this.visibleTableColumns.sort((a, b) => 
-        (a, b) =>
+        this.allTableColumns.findIndex(c => c.key === a.key) - 
-          this.allTableColumns.findIndex((c) => c.key === a.key) -
+        this.allTableColumns.findIndex(c => c.key === b.key)
-          this.allTableColumns.findIndex((c) => c.key === b.key)
       );
     } else {
-      this.visibleTableColumns = this.visibleTableColumns.filter(
+      this.visibleTableColumns = this.visibleTableColumns.filter(c => c.key !== column.key);
-        (c) => c.key !== column.key
-      );
     }
     this.saveTableSettings();
   }
 
   getMainImageUrl(images?: ProductImage[]): string {
     if (!images || images.length === 0) return 'https://via.placeholder.com/50';
-    const mainImage = images.find((img) => img.isMainImage);
+    const mainImage = images.find(img => img.isMainImage);
     return mainImage?.url || images[0]?.url || 'https://via.placeholder.com/50';
   }
 }

src/app/features/components/products/product-new/product-new.component.html

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

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

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-product-new',
-  imports: [],
-  templateUrl: './product-new.component.html',
-  styleUrl: './product-new.component.css'
-})
-export class ProductNewComponent {
-
-}

src/app/features/components/products/products.routes.ts

@@ -3,21 +3,22 @@
 import { Routes } from '@angular/router';
 import { ProductListComponent } from './product-list/product-list.component';
 import { ProductEditComponent } from './product-edit/product-edit.component';
+import { ProductCreateComponent } from './product-create/product-create.component';
 
 export const PRODUCTS_ROUTES: Routes = [
   {
     path: '',
     component: ProductListComponent,
-    title: 'Produktübersicht' 
+    title: 'Produktübersicht',
   },
   {
-    path: 'new', 
+    path: 'create',
-    component: ProductEditComponent, 
+    component: ProductCreateComponent,
-    title: 'Neues Produkt erstellen' 
+    title: 'Product | Create',
   },
   {
-    path: ':id', 
+    path: 'edit/:id',
     component: ProductEditComponent,
-    title: 'Produkt bearbeiten' 
+    title: 'Product | Edit',
   },
 ];

src/app/shared/components/form/form-field/form-field.component.css

@@ -46,12 +46,16 @@
   position: absolute;
   top: 50%; /* Vertikal zentrieren (Schritt 1) */
   left: 1rem; /* Linken Abstand wie beim Input-Padding halten */
-  transform: translateY(-50%); /* Vertikal zentrieren (Schritt 2 - Feinjustierung) */
+  transform: translateY(
+    -50%
+  ); /* Vertikal zentrieren (Schritt 2 - Feinjustierung) */
 
   border-radius: 4px;
   /* Aussehen & Typografie */
   color: var(--color-text-light);
-  background-color: var(--color-surface); /* WICHTIG: Überdeckt die Input-Linie beim Schweben */
+  background-color: var(
+    --color-surface
+  ); /* WICHTIG: Überdeckt die Input-Linie beim Schweben */
   padding: 0 0.25rem;
 
   /* Verhalten */
@@ -75,7 +79,9 @@
 .form-input:focus ~ .form-label,
 .form-input:not(:placeholder-shown) ~ .form-label {
   top: 0;
-  transform: translateY(-50%); /* Bleibt für die Zentrierung auf der Border-Linie wichtig */
+  transform: translateY(
+    -50%
+  ); /* Bleibt für die Zentrierung auf der Border-Linie wichtig */
   font-size: 0.8rem;
   color: var(--color-primary);
 }
@@ -101,3 +107,17 @@
   font-size: 0.8rem;
   color: var(--color-primary);
 }
+
+.required-indicator {
+  color: var(--color-danger);
+  font-weight: bold;
+  margin-left: 2px;
+}
+
+/* Styling für die Fehlermeldung */
+.error-message {
+  color: var(--color-danger);
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+  padding-left: 0.25rem;
+}

src/app/shared/components/form/form-field/form-field.component.html

@@ -1,3 +1,6 @@
+<!-- /src/app/shared/components/form/form-field/form-field.component.html -->
+
+<div class="form-field-wrapper">
   <div class="form-field">
     <input 
       [type]="type"
@@ -9,5 +12,15 @@
       (ngModelChange)="onChange($event)"
       (blur)="onTouched()">
     
-  <label [for]="controlId" class="form-label">{{ label }}</label>
+    <label [for]="controlId" class="form-label">
+      {{ label }}
+      <!-- Der Indikator wird jetzt nur bei Bedarf angezeigt -->
+      <span *ngIf="isRequired" class="required-indicator">*</span>
+    </label>
+  </div>
+
+  <!-- Anzeige für Validierungsfehler -->
+  <div *ngIf="showErrors && errorMessage" class="error-message">
+    {{ errorMessage }}
+  </div>
 </div>

src/app/shared/components/form/form-field/form-field.component.ts

@@ -2,7 +2,7 @@
 
 import { Component, Input, forwardRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { AbstractControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { AbstractControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, Validators } from '@angular/forms'; // Validators importieren
 
 @Component({
   selector: 'app-form-field',
@@ -10,10 +10,10 @@ import { AbstractControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule }
   imports: [
     CommonModule,
     FormsModule,
-    ReactiveFormsModule // <-- WICHTIG: Hinzufügen, um mit AbstractControl zu arbeiten
+    ReactiveFormsModule
   ],
   templateUrl: './form-field.component.html',
-  styleUrl: './form-field.component.css',
+  styleUrls: ['./form-field.component.css'],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -23,44 +23,42 @@ import { AbstractControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule }
   ],
 })
 export class FormFieldComponent {
-  // --- KORREKTUR: Erweitere die erlaubten Typen ---
   @Input() type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' = 'text';
   @Input() label: string = '';
-  
+  @Input() control?: AbstractControl | null;
-  // Neuer Input, um das FormControl für die Fehleranzeige zu erhalten
+  @Input() showErrors = true;
-  @Input() control?: AbstractControl;
-  @Input() showErrors = true; // Standardmäßig Fehler anzeigen
 
   controlId = `form-field-${Math.random().toString(36).substring(2, 9)}`;
-
-  // --- Eigenschaften & Methoden für ControlValueAccessor ---
   value: string | number = '';
   onChange: (value: any) => void = () => {};
   onTouched: () => void = () => {};
   disabled = false;
 
-  writeValue(value: any): void {
+  // NEU: Getter, der automatisch prüft, ob das Feld ein Pflichtfeld ist.
-    this.value = value;
+  get isRequired(): boolean {
+    if (!this.control) {
+      return false;
     }
-  registerOnChange(fn: any): void {
+    // hasValidator prüft, ob ein bestimmter Validator auf dem Control gesetzt ist.
-    this.onChange = fn;
+    return this.control.hasValidator(Validators.required);
-  }
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-  setDisabledState?(isDisabled: boolean): void {
-    this.disabled = isDisabled;
   }
 
-  // Hilfsfunktion für das Template, um Fehler zu finden
   get errorMessage(): string | null {
     if (!this.control || !this.control.errors || (!this.control.touched && !this.control.dirty)) {
       return null;
     }
-    if (this.control.hasError('required')) return 'Dieses Feld ist erforderlich.';
+    const errors = this.control.errors;
-    if (this.control.hasError('email')) return 'Bitte geben Sie eine gültige E-Mail-Adresse ein.';
+    if (errors['required']) return 'Dieses Feld ist erforderlich.';
-    if (this.control.hasError('min')) return `Der Wert muss mindestens ${this.control.errors['min'].min} sein.`;
+    if (errors['email']) return 'Bitte geben Sie eine gültige E-Mail-Adresse ein.';
-    // ... weitere Fehlermeldungen hier
+    if (errors['min']) return `Der Wert muss mindestens ${errors['min'].min} sein.`;
+    if (errors['max']) return `Der Wert darf maximal ${errors['max'].max} sein.`;
+    if (errors['minlength']) return `Mindestens ${errors['minlength'].requiredLength} Zeichen erforderlich.`;
+    
     return 'Ungültige Eingabe.';
   }
+
+  writeValue(value: any): void { this.value = value; }
+  registerOnChange(fn: any): void { this.onChange = fn; }
+  registerOnTouched(fn: any): void { this.onTouched = fn; }
+  setDisabledState?(isDisabled: boolean): void { this.disabled = isDisabled; }
 }

src/app/shared/components/form/form-textarea/form-textarea.component.css

@@ -77,3 +77,17 @@ border-radius: 4px;
   font-size: 0.8rem;
   color: var(--color-primary);
 }
+
+.required-indicator {
+  color: var(--color-danger);
+  font-weight: bold;
+  margin-left: 2px;
+}
+
+/* Styling für die Fehlermeldung */
+.error-message {
+  color: var(--color-danger);
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+  padding-left: 0.25rem;
+}

src/app/shared/components/form/form-textarea/form-textarea.component.html

@@ -1,13 +1,24 @@
+<!-- /src/app/shared/components/form/form-textarea/form-textarea.component.html -->
+
+<div class="form-field-wrapper">
   <div class="form-field">
     <textarea
       class="form-input"
       [id]="controlId"
-    placeholder=" "
       [rows]="rows"
+      placeholder=" "
+      [disabled]="disabled"
       [(ngModel)]="value"
       (ngModelChange)="onChange($event)"
-    (blur)="onTouched()"
+      (blur)="onTouched()"></textarea>
-    [disabled]="disabled"></textarea>
     
-  <label [for]="controlId" class="form-label">{{ label }}</label>
+    <label [for]="controlId" class="form-label">
+      {{ label }}
+      <span *ngIf="isRequired" class="required-indicator">*</span>
+    </label>
+  </div>
+  
+  <div *ngIf="showErrors && errorMessage" class="error-message">
+    {{ errorMessage }}
+  </div>
 </div>

src/app/shared/components/form/form-textarea/form-textarea.component.ts

@@ -1,38 +1,54 @@
+// /src/app/shared/components/form/form-textarea/form-textarea.component.ts
+
 import { Component, Input, forwardRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
+import { AbstractControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-form-textarea',
   standalone: true,
-  imports: [
+  imports: [ CommonModule, FormsModule, ReactiveFormsModule ],
-    CommonModule,
-    ReactiveFormsModule,
-    FormsModule // Wichtig für [(ngModel)]
-  ],
   templateUrl: './form-textarea.component.html',
-  styleUrl: './form-textarea.component.css',
+  styleUrls: ['./form-textarea.component.css'],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
       useExisting: forwardRef(() => FormTextareaComponent),
-      multi: true
+      multi: true,
-    }
+    },
-  ]
+  ],
 })
-export class FormTextareaComponent implements ControlValueAccessor {
+export class FormTextareaComponent {
   @Input() label: string = '';
-  @Input() rows = 3; // Standardanzahl der Zeilen
+  @Input() rows: number = 4;
   
-  // Eindeutige ID für die Verknüpfung
+  // NEU: Hinzufügen des 'control' Inputs, genau wie in form-field
-  controlId = `form-textarea-${Math.random().toString(36).substring(2)}`;
+  @Input() control?: AbstractControl | null; 
   
-  // --- Logik für ControlValueAccessor ---
+  @Input() showErrors = true;
+
+  controlId = `form-textarea-${Math.random().toString(36).substring(2, 9)}`;
   value: string = '';
   onChange: (value: any) => void = () => {};
   onTouched: () => void = () => {};
   disabled = false;
 
+  get isRequired(): boolean {
+    if (!this.control) return false;
+    return this.control.hasValidator(Validators.required);
+  }
+
+  get errorMessage(): string | null {
+    if (!this.control || !this.control.errors || (!this.control.touched && !this.control.dirty)) {
+      return null;
+    }
+    const errors = this.control.errors;
+    if (errors['required']) return 'Dieses Feld ist erforderlich.';
+    if (errors['minlength']) return `Mindestens ${errors['minlength'].requiredLength} Zeichen erforderlich.`;
+    
+    return 'Ungültige Eingabe.';
+  }
+
   writeValue(value: any): void { this.value = value; }
   registerOnChange(fn: any): void { this.onChange = fn; }
   registerOnTouched(fn: any): void { this.onTouched = fn; }