styling

src/app/features/demo/components/demo2/demo2.component.html

@@ -1,19 +1,83 @@
-<div class="dashboard-grid">
-  <app-kpi-card
-    *ngFor="let kpi of kpiData"
-    [value]="kpi.value"
-    [label]="kpi.label"
-    [color]="kpi.color"
-    [iconName]="kpi.iconName"
-  >
-  </app-kpi-card>
-</div>
+<main>
+  <app-slide-toggle
+    label="Dark Mode"
+    [ngModel]="darkModeAktiv"
+    (ngModelChange)="onDarkModeChange($event)"
+    name="mainDarkModeToggle"
+  ></app-slide-toggle>
 
-<app-orders-table
-  [data]="ordersData"
-   [itemsPerPage]="5"
-  (view)="handleViewDetails($event)"
-  (edit)="handleEditOrder($event)"
-  (delete)="handleDeleteOrder($event)"
->
-</app-orders-table>
+  <div class="dashboard-grid grid-col-span-4">
+    <app-kpi-card
+      *ngFor="let kpi of kpiData"
+      [value]="kpi.value"
+      [label]="kpi.label"
+      [color]="kpi.color"
+      [iconName]="kpi.iconName"
+    >
+    </app-kpi-card>
+  </div>
+
+  <div class="grid-col-span-4">
+    <app-form-group title="Table">
+      <app-orders-table
+        [data]="ordersData"
+        [itemsPerPage]="5"
+        (view)="handleViewDetails($event)"
+        (edit)="handleEditOrder($event)"
+        (delete)="handleDeleteOrder($event)"
+      >
+      </app-orders-table>
+    </app-form-group>
+  </div>
+
+  <div class="grid-col-span-2">
+    <app-form-group
+      title="Persönliche Daten"
+      description="Diese Informationen sind öffentlich sichtbar."
+    >
+      <app-form-select
+        label="Land"
+        [options]="countryOptions"
+        [(ngModel)]="selectedCountry"
+      >
+      </app-form-select>
+
+      <app-form-field label="Benutzername" type="text" [(value)]="benutzername">
+      </app-form-field>
+
+      <app-form-field label="E-Mail-Adresse" type="email" [(value)]="email">
+      </app-form-field>
+
+      <app-form-textarea label="Biografie" [rows]="5" [(ngModel)]="biografie">
+      </app-form-textarea>
+    </app-form-group>
+  </div>
+
+  <div class="grid-col-span-2">
+    <app-form-group
+      title="Anwendungs-Einstellungen"
+      description="Diese Informationen sind öffentlich sichtbar."
+    >
+      <app-slide-toggle
+        labelPosition="right"
+        label="Push-Benachrichtigungen"
+        [(ngModel)]="benachrichtigungenAktiv"
+        name="notificationsToggle"
+      ></app-slide-toggle>
+
+      <app-slide-toggle
+        label="Dark Mode"
+        [ngModel]="darkModeAktiv"
+        (ngModelChange)="onDarkModeChange($event)"
+        name="mainDarkModeToggle"
+      ></app-slide-toggle>
+
+      <app-slide-toggle
+        label="Privates Profil (Feature gesperrt)"
+        [(ngModel)]="profilIstPrivat"
+        name="privacyToggle"
+        [disabled]="true"
+      ></app-slide-toggle>
+    </app-form-group>
+  </div>
+</main>

src/app/features/demo/components/demo2/demo2.component.ts

@@ -1,4 +1,11 @@
-import { Component } from '@angular/core';
+import {
+  Component,
+  Inject,
+  OnInit,
+  PLATFORM_ID,
+  Renderer2,
+} from '@angular/core';
+import { DOCUMENT } from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { CardComponent } from '../../../../shared/components/ui/card/card.component';
 // Wir müssen KpiColor hier importieren, um es als Typ verwenden zu können
@@ -10,7 +17,20 @@ import {
   OrdersTableComponent,
   Order,
 } from '../../../../shared/components/data-display/orders-table/orders-table.component';
-import { PaginatorComponent } from '../../../../shared/components/data-display/paginator/paginator.component';
+import { FormFieldComponent } from '../../../../shared/components/form/form-field/form-field.component';
+import { FormGroupComponent } from '../../../../shared/components/form/form-group/form-group.component';
+import {
+  FormSelectComponent,
+  SelectOption,
+} from '../../../../shared/components/form/form-select/form-select.component';
+
+import { FormsModule } from '@angular/forms';
+
+import { FormTextareaComponent } from '../../../../shared/components/form/form-textarea/form-textarea.component';
+
+import { SlideToggleComponent } from '../../../../shared/components/form/slide-toggle/slide-toggle.component';
+
+import { isPlatformBrowser } from '@angular/common';
 
 // Wir definieren ein Interface für unsere KPI-Daten für Typsicherheit
 interface Kpi {
@@ -25,10 +45,15 @@ interface Kpi {
   standalone: true,
   imports: [
     CommonModule,
-    CardComponent,
+
     KpiCardComponent,
     OrdersTableComponent,
-    PaginatorComponent,
+    FormGroupComponent,
+    FormFieldComponent,
+    FormSelectComponent,
+    FormsModule,
+    FormTextareaComponent,
+    SlideToggleComponent,
   ],
   templateUrl: './demo2.component.html',
 })
@@ -127,21 +152,111 @@ export class Demo2Component {
       status: 'danger',
       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',
+    },
   ];
 
-  // Eigenschaften für den Paginator
-  currentPage = 1;
-  totalItems = this.ordersData.length;
-  itemsPerPage = 10;
+  benutzername: string = '';
+  email: string = '';
+  aktuellesPasswort: any = '';
+  neuesPasswort: any = '';
 
-  // --- EVENT-HANDLER FÜR DIE KIND-KOMPONENTEN ---
+  selectedCountry: string | null = null;
 
-  onPageChange(newPage: number): void {
-    this.currentPage = newPage;
-    console.log('Seite gewechselt zu:', newPage);
-    // In einer echten Anwendung würden Sie hier die Daten neu laden
+  countryOptions: SelectOption[] = [
+    { value: 'de', label: 'Deutschland' },
+    { value: 'at', label: 'Österreich' },
+    { value: 'ch', label: 'Schweiz' },
+  ];
+
+  biografie: string =
+    'Dies ist eine Beispiel-Biografie, die über mehrere Zeilen gehen kann.';
+
+  benachrichtigungenAktiv: boolean = true;
+  profilIstPrivat: boolean = false;
+
+  private readonly darkModeKey = 'app-dark-mode-setting';
+  darkModeAktiv: boolean = false;
+
+  constructor(
+    private renderer: Renderer2,
+    @Inject(DOCUMENT) private document: Document,
+    @Inject(PLATFORM_ID) private platformId: Object
+  ) {}
+
+  ngOnInit(): void {
+    this.loadThemeSetting();
   }
 
+  private loadThemeSetting(): void {
+    if (isPlatformBrowser(this.platformId)) {
+      try {
+        const storedValue = localStorage.getItem(this.darkModeKey);
+        // Setze den Zustand der Komponente basierend auf dem gespeicherten Wert.
+        this.darkModeAktiv = storedValue === 'true';
+      } catch (e) {
+        console.error('Could not access localStorage:', e);
+      }
+    }
+    // Wende das Theme an - entweder den Standardwert (false) oder den geladenen Wert.
+    this.updateTheme(this.darkModeAktiv);
+  }
+
+  onDarkModeChange(isEnabled: boolean): void {
+    this.darkModeAktiv = isEnabled;
+
+    // --- KORREKTUR 2: Speichere die neue Einstellung ---
+    if (isPlatformBrowser(this.platformId)) {
+      try {
+        localStorage.setItem(this.darkModeKey, String(isEnabled));
+      } catch (e) {
+        console.error('Could not write to localStorage:', e);
+      }
+    }
+
+    // Wende die visuelle Änderung an.
+    this.updateTheme(isEnabled);
+  }
+
+  // This method is CORRECT. It just needs to be called.
+  private updateTheme(isEnabled: boolean): void {
+    if (isEnabled) {
+      this.renderer.addClass(this.document.body, 'dark-theme');
+    } else {
+      this.renderer.removeClass(this.document.body, 'dark-theme');
+    }
+  }
   handleDeleteOrder(orderId: string): void {
     console.log('Lösche Bestellung mit ID:', orderId);
     // Hier könnten Sie z.B. einen Bestätigungs-Dialog öffnen