data display
This commit is contained in:
Tizian.Breuch
@@ -1,147 +1,157 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { SnackbarService } from '../../../../shared/services/snackbar.service';
|
||||
|
||||
// Importieren ALLER wiederverwendbaren Komponenten, die im Template genutzt werden
|
||||
import { ButtonComponent } from '../../../../shared/components/ui/button/button.component';
|
||||
import { CardComponent } from '../../../../shared/components/ui/card/card.component';
|
||||
import { ChipComponent } from '../../../../shared/components/ui/chip/chip.component';
|
||||
import { FormFieldComponent } from '../../../../shared/components/form/form-field/form-field.component';
|
||||
import { KpiCardComponent } from '../../../../shared/components/data-display/kpi-card/kpi-card.component';
|
||||
import { PageHeaderComponent } from '../../../../shared/components/layout/page-header/page-header.component';
|
||||
import { SlideToggleComponent } from '../../../../shared/components/form/slide-toggle/slide-toggle.component';
|
||||
import { StatusPillComponent } from '../../../../shared/components/ui/status-pill/status-pill.component';
|
||||
import { DialogComponent } from '../../../../shared/components/overlays/dialog/dialog.component';
|
||||
// Wir müssen KpiColor hier importieren, um es als Typ verwenden zu können
|
||||
import {
|
||||
MenuComponent,
|
||||
MenuItem,
|
||||
} from '../../../../shared/components/overlays/menu/menu.component';
|
||||
import { AlertComponent } from '../../../../shared/components/ui/alert/alert.component';
|
||||
KpiCardComponent,
|
||||
KpiColor,
|
||||
} from '../../../../shared/components/data-display/kpi-card/kpi-card.component';
|
||||
import {
|
||||
OrdersTableComponent,
|
||||
Order,
|
||||
} from '../../../../shared/components/data-display/orders-table/orders-table.component';
|
||||
import { PaginatorComponent } from '../../../../shared/components/data-display/paginator/paginator.component';
|
||||
import { SkeletonComponent } from '../../../../shared/components/ui/skeleton/skeleton.component';
|
||||
import { ExpansionPanelComponent } from '../../../../shared/components/layout/expansion-panel/expansion-panel.component';
|
||||
import { SidebarComponent } from '../../../../shared/components/layout/sidebar/sidebar.component';
|
||||
|
||||
import { OrdersTableComponent, Order } from '../../../../shared/components/data-display/orders-table/orders-table.component';
|
||||
import { FormSelectComponent, SelectOption } from '../../../../shared/components/form/form-select/form-select.component';
|
||||
import { FormTextareaComponent } from '../../../../shared/components/form/form-textarea/form-textarea.component';
|
||||
// Wir definieren ein Interface für unsere KPI-Daten für Typsicherheit
|
||||
interface Kpi {
|
||||
value: string;
|
||||
label: string;
|
||||
color: KpiColor; // <-- Hier verwenden wir den importierten Typ
|
||||
iconName: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-demo2',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
ButtonComponent,
|
||||
CardComponent,
|
||||
ChipComponent,
|
||||
FormFieldComponent,
|
||||
KpiCardComponent,
|
||||
PageHeaderComponent,
|
||||
SlideToggleComponent,
|
||||
StatusPillComponent,
|
||||
DialogComponent,
|
||||
MenuComponent,
|
||||
AlertComponent,
|
||||
PaginatorComponent,
|
||||
SkeletonComponent,
|
||||
ExpansionPanelComponent,
|
||||
SidebarComponent,
|
||||
OrdersTableComponent,
|
||||
FormSelectComponent,
|
||||
FormTextareaComponent
|
||||
PaginatorComponent,
|
||||
],
|
||||
templateUrl: './demo2.component.html',
|
||||
styleUrl: './demo2.component.css',
|
||||
})
|
||||
export class Demo2Component implements OnInit {
|
||||
// Zustands-Variablen für diese Demo-Seite
|
||||
isLoading = true;
|
||||
isDialogOpen = false;
|
||||
// isComponentMenuOpen = false; // <--- DIESE ZEILE ENTFERNEN, DA SIE NICHT MEHR BENÖTIGT WIRD
|
||||
|
||||
// Eigenschaften für den Paginator
|
||||
currentPage = 1;
|
||||
totalItems = 123;
|
||||
itemsPerPage = 10;
|
||||
|
||||
actionMenuItems: MenuItem[] = [
|
||||
export class Demo2Component {
|
||||
kpiData: Kpi[] = [
|
||||
{
|
||||
label: 'Bearbeiten',
|
||||
action: () => this.snackbarService.show('Bearbeiten geklickt!'),
|
||||
value: '€ 14.750',
|
||||
label: 'Umsatz',
|
||||
color: 'green',
|
||||
iconName: 'placeholder',
|
||||
},
|
||||
{
|
||||
label: 'Kopieren',
|
||||
action: () => console.log('Kopieren geklickt!'),
|
||||
value: '1.284',
|
||||
label: 'Neue Nutzer',
|
||||
color: 'blue',
|
||||
iconName: 'placeholder',
|
||||
},
|
||||
{
|
||||
dividerBefore: true,
|
||||
label: 'Löschen',
|
||||
action: () => this.openDialog(), // Öffnet z.B. den Bestätigungs-Dialog
|
||||
isDanger: true,
|
||||
value: '312',
|
||||
label: 'Bestellungen',
|
||||
color: 'orange',
|
||||
iconName: 'placeholder',
|
||||
},
|
||||
{
|
||||
value: '99.8%',
|
||||
label: 'Verfügbarkeit',
|
||||
color: 'purple',
|
||||
iconName: 'placeholder',
|
||||
},
|
||||
];
|
||||
|
||||
ordersData: Order[] = [
|
||||
ordersData: Order[] = [
|
||||
{
|
||||
id: '10543',
|
||||
user: { name: 'Max Mustermann', email: 'max.mustermann@example.com', avatarUrl: 'https://i.pravatar.cc/40?u=max' },
|
||||
user: {
|
||||
name: 'Max Mustermann',
|
||||
email: 'max.m@example.com',
|
||||
avatarUrl: 'https://i.pravatar.cc/40?u=max',
|
||||
},
|
||||
amount: '€ 129,99',
|
||||
status: 'success',
|
||||
statusText: 'Abgeschlossen'
|
||||
statusText: 'Abgeschlossen',
|
||||
},
|
||||
{
|
||||
id: '10542',
|
||||
user: { name: 'Erika Mustermann', email: 'erika.m@example.com', avatarUrl: 'https://i.pravatar.cc/40?u=erika' },
|
||||
user: {
|
||||
name: 'Erika Mustermann',
|
||||
email: 'erika.m@example.com',
|
||||
avatarUrl: 'https://i.pravatar.cc/40?u=erika',
|
||||
},
|
||||
amount: '€ 49,50',
|
||||
status: 'warning',
|
||||
statusText: 'In Bearbeitung'
|
||||
statusText: 'In Bearbeitung',
|
||||
},
|
||||
{
|
||||
id: '10541',
|
||||
user: { name: 'Peter Pan', email: 'peter.pan@example.com', avatarUrl: 'https://i.pravatar.cc/40?u=peter' },
|
||||
user: {
|
||||
name: 'Peter Pan',
|
||||
email: 'peter.p@example.com',
|
||||
avatarUrl: 'https://i.pravatar.cc/40?u=peter',
|
||||
},
|
||||
amount: '€ 87,00',
|
||||
status: 'danger',
|
||||
statusText: 'Storniert'
|
||||
}
|
||||
statusText: 'Storniert',
|
||||
},
|
||||
{
|
||||
id: '10543',
|
||||
user: {
|
||||
name: 'Max Mustermann',
|
||||
email: 'max.m@example.com',
|
||||
avatarUrl: 'https://i.pravatar.cc/40?u=max',
|
||||
},
|
||||
amount: '€ 129,99',
|
||||
status: 'success',
|
||||
statusText: 'Abgeschlossen',
|
||||
},
|
||||
{
|
||||
id: '10542',
|
||||
user: {
|
||||
name: 'Erika Mustermann',
|
||||
email: 'erika.m@example.com',
|
||||
avatarUrl: 'https://i.pravatar.cc/40?u=erika',
|
||||
},
|
||||
amount: '€ 49,50',
|
||||
status: 'warning',
|
||||
statusText: 'In Bearbeitung',
|
||||
},
|
||||
{
|
||||
id: '10541',
|
||||
user: {
|
||||
name: 'Peter Pan',
|
||||
email: 'peter.p@example.com',
|
||||
avatarUrl: 'https://i.pravatar.cc/40?u=peter',
|
||||
},
|
||||
amount: '€ 87,00',
|
||||
status: 'danger',
|
||||
statusText: 'Storniert',
|
||||
},
|
||||
];
|
||||
|
||||
cityOptions: SelectOption[] = [
|
||||
{ value: 'berlin', label: 'Berlin' },
|
||||
{ value: 'munich', label: 'München' },
|
||||
{ value: 'hamburg', label: 'Hamburg' }
|
||||
];
|
||||
// Eigenschaften für den Paginator
|
||||
currentPage = 1;
|
||||
totalItems = this.ordersData.length;
|
||||
itemsPerPage = 10;
|
||||
|
||||
// --- EVENT-HANDLER FÜR DIE KIND-KOMPONENTEN ---
|
||||
|
||||
constructor(private snackbarService: SnackbarService) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
setTimeout(() => {
|
||||
this.isLoading = false;
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Methoden für den Dialog
|
||||
openDialog(): void {
|
||||
this.isDialogOpen = true;
|
||||
}
|
||||
closeDialog(): void {
|
||||
this.isDialogOpen = false;
|
||||
}
|
||||
|
||||
// Methode für den Snackbar-Trigger
|
||||
triggerSnackbar(): void {
|
||||
const time = new Date().toLocaleTimeString();
|
||||
this.snackbarService.show('Neues Ereignis um ' + time);
|
||||
}
|
||||
|
||||
// Methode für den Paginator
|
||||
onPageChange(newPage: number): void {
|
||||
this.currentPage = newPage;
|
||||
console.log('Wechsle zu Seite:', newPage);
|
||||
// Hier würde die Logik zum Neuladen der Tabellendaten folgen
|
||||
console.log('Seite gewechselt zu:', newPage);
|
||||
// In einer echten Anwendung würden Sie hier die Daten neu laden
|
||||
}
|
||||
|
||||
handleDeleteOrder(orderId: string) {
|
||||
handleDeleteOrder(orderId: string): void {
|
||||
console.log('Lösche Bestellung mit ID:', orderId);
|
||||
this.openDialog(); // Öffnet z.B. den globalen Dialog
|
||||
// Hier könnten Sie z.B. einen Bestätigungs-Dialog öffnen
|
||||
}
|
||||
handleViewDetails(orderId: string): void {
|
||||
console.log('View Bestellung mit ID:', orderId);
|
||||
// Hier könnten Sie z.B. einen Bestätigungs-Dialog öffnen
|
||||
}
|
||||
handleEditOrder(orderId: string): void {
|
||||
console.log('Edit Bestellung mit ID:', orderId);
|
||||
// Hier könnten Sie z.B. einen Bestätigungs-Dialog öffnen
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user