-
+
+
+
\ No newline at end of file
diff --git a/src/app/features/components/products/product-list/product-list.component.ts b/src/app/features/components/products/product-list/product-list.component.ts
index c35b518..87ddd7c 100644
--- a/src/app/features/components/products/product-list/product-list.component.ts
+++ b/src/app/features/components/products/product-list/product-list.component.ts
@@ -1,282 +1,68 @@
-import { Component, OnInit, OnDestroy, inject } from '@angular/core';
+// /src/app/features/admin/components/products/product-list/product-list.component.ts
+
+import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import { CommonModule } from '@angular/common';
-import {
- FormBuilder,
- FormGroup,
- FormArray,
- FormControl,
- ReactiveFormsModule,
- Validators,
-} from '@angular/forms';
-import { Observable, Subscription } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-
-// Models
-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';
-import { CategoryService } from '../../../services/category.service';
-import { SupplierService } from '../../../services/supplier.service';
+import { AdminProduct } from '../../../../core/models/product.model';
+import { 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';
@Component({
selector: 'app-product-list',
standalone: true,
- imports: [CommonModule, ReactiveFormsModule],
+ imports: [CommonModule, GenericTableComponent, SearchBarComponent, ButtonComponent, IconComponent],
templateUrl: './product-list.component.html',
+ styleUrl: './product-list.component.css'
})
-export class ProductListComponent implements OnInit, OnDestroy {
- private productService = inject(ProductService);
- private categoryService = inject(CategoryService);
- private supplierService = inject(SupplierService);
- private fb = inject(FormBuilder);
+export class ProductListComponent implements OnChanges {
+ // --- Inputs & Outputs ---
+ @Input() products: (AdminProduct & { mainImage?: string; supplierName?: string })[] = [];
+ @Input() allColumns: ColumnConfig[] = [];
+ @Input() visibleColumns: ColumnConfig[] = [];
+
+ @Output() addNew = new EventEmitter
();
+ @Output() editProduct = new EventEmitter();
+ @Output() deleteProduct = new EventEmitter();
+ @Output() columnsChange = new EventEmitter();
+ @Output() searchChange = new EventEmitter();
- products$!: Observable;
- allCategories$!: Observable;
- allSuppliers$!: Observable;
+ filteredProducts: (AdminProduct & { mainImage?: string; supplierName?: string })[] = [];
+ isColumnFilterVisible = false;
- productForm: FormGroup;
- selectedProductId: string | null = null;
- private nameChangeSubscription?: Subscription;
+ constructor() {}
- // Eigenschaften für das Bild-Management
- existingImages: ProductImage[] = [];
- mainImageFile: File | null = null;
- additionalImageFiles: File[] = [];
-
- constructor() {
- this.productForm = this.fb.group({
- name: ['', Validators.required],
- slug: ['', Validators.required],
- sku: ['', Validators.required],
- description: [''],
- price: [0, [Validators.required, Validators.min(0)]],
- oldPrice: [null, [Validators.min(0)]],
- purchasePrice: [null, [Validators.min(0)]],
- stockQuantity: [0, [Validators.required, Validators.min(0)]],
- weight: [null, [Validators.min(0)]],
- isActive: [true],
- isFeatured: [false],
- featuredDisplayOrder: [0],
- supplierId: [null],
- categorieIds: this.fb.array([]),
- imagesToDelete: this.fb.array([]), // FormArray für die IDs der zu löschenden Bilder
- });
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes['products']) {
+ this.filteredProducts = this.products ? [...this.products] : [];
+ }
}
- // Getter für einfachen Zugriff auf FormArrays
- get categorieIds(): FormArray {
- return this.productForm.get('categorieIds') as FormArray;
+ onSearch(term: string): void {
+ this.searchChange.emit(term);
}
- get imagesToDelete(): FormArray {
- return this.productForm.get('imagesToDelete') as FormArray;
+ toggleColumnFilter(): void {
+ this.isColumnFilterVisible = !this.isColumnFilterVisible;
}
- ngOnInit(): void {
- this.loadInitialData();
- this.subscribeToNameChanges();
+ isColumnVisible(columnKey: string): boolean {
+ return this.visibleColumns.some(c => c.key === columnKey);
}
- ngOnDestroy(): void {
- this.nameChangeSubscription?.unsubscribe();
- }
-
- loadInitialData(): void {
- this.products$ = this.productService.getAll();
- this.allCategories$ = this.categoryService.getAll();
- this.allSuppliers$ = this.supplierService.getAll();
- }
-
- selectProduct(product: AdminProduct): void {
- this.selectedProductId = product.id;
- this.productForm.patchValue(product);
-
- this.categorieIds.clear();
- product.categorieIds?.forEach((id) =>
- this.categorieIds.push(this.fb.control(id))
- );
-
- this.existingImages = product.images || [];
- }
-
- clearSelection(): void {
- this.selectedProductId = null;
- this.productForm.reset({
- name: '',
- slug: '',
- sku: '',
- description: '',
- price: 0,
- oldPrice: null,
- purchasePrice: null,
- stockQuantity: 0,
- weight: null,
- isActive: true,
- isFeatured: false,
- featuredDisplayOrder: 0,
- supplierId: null,
- });
- this.categorieIds.clear();
- this.imagesToDelete.clear();
- this.existingImages = [];
- this.mainImageFile = null;
- this.additionalImageFiles = [];
- }
-
- 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 {
+ onColumnToggle(column: ColumnConfig, event: Event): void {
const checkbox = event.target as HTMLInputElement;
- const categoryId = checkbox.value;
+ let newVisibleColumns: ColumnConfig[];
+
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
+ newVisibleColumns = [...this.visibleColumns, column];
+ newVisibleColumns.sort((a, b) =>
+ this.allColumns.findIndex(c => c.key === a.key) -
+ this.allColumns.findIndex(c => c.key === b.key)
);
- if (index !== -1) {
- this.categorieIds.removeAt(index);
- }
- }
- }
-
- isCategorySelected(categoryId: string): boolean {
- return this.categorieIds.value.includes(categoryId);
- }
-
- 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);
- }
-
- onSubmit(): void {
- if (this.productForm.invalid) return;
-
- const formData = new FormData();
- const formValue = this.productForm.value;
-
- Object.keys(formValue).forEach((key) => {
- const value = formValue[key];
- if (key === 'categorieIds' || key === 'imagesToDelete') {
- // FormArrays müssen speziell behandelt werden
- (value as string[]).forEach((id) =>
- formData.append(this.capitalizeFirstLetter(key), id)
- );
- } else if (value !== null && value !== undefined && value !== '') {
- // Leere Strings für optionale number-Felder nicht mitsenden
- if (
- ['oldPrice', 'purchasePrice', 'weight'].includes(key) &&
- value === ''
- )
- return;
- formData.append(this.capitalizeFirstLetter(key), value);
- }
- });
-
- if (this.mainImageFile) {
- formData.append('MainImageFile', this.mainImageFile);
- }
- this.additionalImageFiles.forEach((file) => {
- formData.append('AdditionalImageFiles', file);
- });
-
- if (this.selectedProductId) {
- formData.append('Id', this.selectedProductId);
- this.productService
- .update(this.selectedProductId, formData)
- .subscribe(() => this.reset());
} else {
- this.productService.create(formData).subscribe(() => this.reset());
+ newVisibleColumns = this.visibleColumns.filter(c => c.key !== column.key);
}
+ this.columnsChange.emit(newVisibleColumns);
}
-
- onDelete(id: string): void {
- if (confirm('Produkt wirklich löschen?')) {
- this.productService.delete(id).subscribe(() => this.loadInitialData());
- }
- }
-
- private reset(): void {
- this.loadInitialData();
- this.clearSelection();
- }
-
- 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);
- }
- });
- }
-
- 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);
- }
-
- /**
- * Sucht das Hauptbild aus der Bilderliste eines Produkts und gibt dessen URL zurück.
- * Gibt eine Platzhalter-URL zurück, wenn kein Hauptbild gefunden wird.
- * @param images Die Liste der Produktbilder.
- * @returns Die URL des Hauptbildes oder eine Platzhalter-URL.
- */
- getMainImageUrl(images?: ProductImage[]): string {
- if (!images || images.length === 0) {
- return ''; // Platzhalter, wenn gar keine Bilder vorhanden sind
- }
- const mainImage = images.find(img => img.isMainImage);
- return mainImage?.url || images[0].url || ''; // Fallback auf das erste Bild, wenn kein Hauptbild markiert ist
- }
-}
+}
\ No newline at end of file
diff --git a/src/app/features/components/products/product-page/product-page.component.css b/src/app/features/components/products/product-page/product-page.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/features/components/products/product-page/product-page.component.html b/src/app/features/components/products/product-page/product-page.component.html
new file mode 100644
index 0000000..0353ccc
--- /dev/null
+++ b/src/app/features/components/products/product-page/product-page.component.html
@@ -0,0 +1,21 @@
+
+
Produktverwaltung
+
+
+
+
+
+
+
+
+
+
+ | {{ col.title }} |
+
+
+
+
+
+
+
+
+
+
+
+ {{ getProperty(item, col.key) }}
+
+
+ {{ getProperty(item, col.subKey) }}
+
+
+ ![]()
+
+ {{ getProperty(item, col.key) }}
+ {{ getProperty(item, col.subKey!) }}
+
+ ![Bild]()
+
+
+
+
+
+
+
+ |
+
+
+ | Keine Daten gefunden. |
+
+
+
+