admin/ShopSolution-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

good

Browse Source
This commit is contained in:
Tizian.Breuch
2025-10-29 18:54:23 +01:00
parent 9173f9b625
commit 8df2420aa0
6 changed files with 67 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/shared/components/ui/status-pill/status-pill.component.css
View File

@@ -48,4 +48,6 @@
:host-context(body.dark-theme) .pill-active { color: #a7f3d0; background-color: #166534; border-color: #22c55e; }
.pill-inactive { color: rgb(168, 168, 168); background-color: #ececec; border-color: #777777; }
:host-context(body.dark-theme) .pill-inactive { color: rgb(168, 168, 168); background-color: #ececec; border-color: #777777; }
:host-context(body.dark-theme) .pill-inactive { color: rgb(168, 168, 168); background-color: #ececec; border-color: #777777; }

4
src/app/shared/components/ui/status-pill/status-pill.component.html
View File

@@ -1,3 +1,5 @@
<!-- /src/app/shared/components/ui/status-pill/status-pill.component.html -->
<div class="status-pill" [ngClass]="cssClass">
{{ displayText }}
<span>{{ displayText }}</span>
</div>

46
src/app/shared/components/ui/status-pill/status-pill.component.ts
View File

@@ -1,24 +1,36 @@
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
// /src/app/shared/components/ui/status-pill/status-pill.component.ts
import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import { CommonModule, NgClass } from '@angular/common';
// import { OrderStatus } from '../../../../core/types/order';
import { IconComponent } from '../icon/icon.component'; // IconComponent importieren
@Component({
selector: 'app-status-pill',
standalone: true,
imports: [CommonModule, NgClass],
imports: [CommonModule, NgClass, IconComponent], // IconComponent hinzufügen
templateUrl: './status-pill.component.html',
styleUrl: './status-pill.component.css'
styleUrls: ['./status-pill.component.css']
})
export class StatusPillComponent implements OnChanges {
// Nimmt jetzt den neuen, sprechenden Status entgegen
@Input() status: string | boolean = 'info';
// --- INPUTS ---
// Nimmt den Status für die Farbe entgegen
@Input() status: string | boolean = 'info';
// Diese Eigenschaften werden vom Template verwendet
// NEU: Nimmt einen expliziten Text entgegen. Hat Vorrang vor dem Status-Text.
@Input() text?: string;
// NEU: Steuert, ob der "Entfernen"-Button angezeigt wird
@Input() removable = false;
// --- OUTPUT ---
// NEU: Wird ausgelöst, wenn der Entfernen-Button geklickt wird
@Output() remove = new EventEmitter<void>();
// --- Interne Eigenschaften für das Template ---
public displayText = '';
public cssClass = '';
// Eine Map, die Statusnamen auf Text und CSS-Klasse abbildet
private statusMap = new Map<any, { text: string, css: string }>([
private statusMap = new Map<any, { text: string, css: string }>([
['completed', { text: 'Abgeschlossen', css: 'pill-success' }],
['processing', { text: 'In Bearbeitung', css: 'pill-warning' }],
['cancelled', { text: 'Storniert', css: 'pill-danger' }],
@@ -27,17 +39,25 @@ export class StatusPillComponent implements OnChanges {
['inactive', { text: 'Nein', css: 'pill-inactive' }]
]);
ngOnChanges(changes: SimpleChanges): void {
if (changes['status']) {
ngOnChanges(changes: SimpleChanges): void {
if (changes['status'] || changes['text']) {
let statusKey = this.status;
// Konvertiere boolean in einen String-Key
if (typeof statusKey === 'boolean') {
statusKey = statusKey ? 'active' : 'inactive';
}
const details = this.statusMap.get(statusKey as string) || { text: statusKey.toString(), css: 'pill-secondary' };
this.displayText = details.text;
const details = this.statusMap.get(statusKey as string) || { text: 'Info', css: 'pill-secondary' };
// NEUE LOGIK: Wenn ein expliziter Text übergeben wird, hat dieser Vorrang
this.displayText = this.text ?? details.text;
this.cssClass = details.css;
}
}
// Methode, die das Event auslöst
onRemove(): void {
this.remove.emit();
}
}