styles

2025-09-09 16:09:28 +02:00
parent 5601cd0110
commit b97fc21024
17 changed files with 645 additions and 249 deletions
--- a/src/app/features/demo/components/demo2/demo2.component.html
+++ b/src/app/features/demo/components/demo2/demo2.component.html
@@ -6,81 +6,8 @@
  <!-- =================================================================== -->
  <!-- 1. SIDEBAR (Statisch, da sehr spezifisch für dieses Layout)         -->
  <!-- =================================================================== -->
-  <aside class="sidebar">
-    <div class="sidebar-header"><h1 class="sidebar-title">CustomDash</h1></div>
-    <nav class="sidebar-nav">
-      <a href="#" class="nav-item active"
-        ><svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
-          <polyline points="9 22 9 12 15 12 15 22"></polyline></svg
-        ><span>Übersicht</span></a
-      >
-      <a href="#" class="nav-item"
-        ><svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <line x1="18" y1="20" x2="18" y2="10"></line>
-          <line x1="12" y1="20" x2="12" y2="4"></line>
-          <line x1="6" y1="20" x2="6" y2="14"></line></svg
-        ><span>Analysen</span></a
-      >
-      <a href="#" class="nav-item"
-        ><svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path
-            d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
-          ></path></svg
-        ><span>Berichte</span></a
-      >
-    </nav>
-    <div class="sidebar-footer">
-      <a href="#" class="nav-item"
-        ><svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path
-            d="M10.3 21.7c.9.9 2.5.9 3.4 0l6.9-6.9c.9-.9.9-2.5 0-3.4l-6.9-6.9c-.9-.9-2.5-.9-3.4 0l-6.9 6.9c-.9.9-.9-2.5 0 3.4l6.9 6.9z"
-          ></path></svg
-        ><span>Einstellungen</span></a
-      >
-    </div>
-  </aside>

+  <app-sidebar></app-sidebar>
  <!-- =================================================================== -->
  <!-- 2. HAUPTINHALT                                                      -->
  <!-- =================================================================== -->
@@ -130,83 +57,11 @@

      <app-card class="grid-col-span-2">
        <h3 class="card-header">Letzte Bestellungen</h3>
-        <div class="table-container">
-          <table class="modern-table">
-            <thead>
-              <tr>
-                <th class="sortable">
-                  <span>Kunde</span
-                  ><svg
-                    class="sort-icon"
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  >
-                    <path
-                      d="M8 3v18l8-9L8 3z"
-                      transform="rotate(90 12 12)"
-                    ></path>
-                  </svg>
-                </th>
-                <th>Bestell-ID</th>
-                <th>Status</th>
-                <th class="text-right">Betrag</th>
-                <th class="text-center">Aktionen</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <div class="user-cell">
-                    <img
-                      src="https://i.pravatar.cc/40?u=max"
-                      alt="Avatar Max Mustermann"
-                    />
-                    <div>
-                      <div class="user-name">Max Mustermann</div>
-                      <div class="user-email">
-                        max.mustermann&#64;example.com
-                      </div>
-                    </div>
-                  </div>
-                </td>
-                <td><span class="mono">#10543</span></td>
-                <td>
-                  <app-status-pill status="success"
-                    >Abgeschlossen</app-status-pill
-                  >
-                </td>
-                <td class="text-right amount">€ 129,99</td>
-                <td class="actions-cell">
-                  <app-button
-                    color="icon"
-                    tooltip="Details anzeigen"
-                    iconName="eye"
-                  ></app-button>
-
-                  <app-button
-                    color="icon"
-                    tooltip="Bearbeiten"
-                    iconName="edit"
-                  ></app-button>
-
-                  <app-button
-                    color="icon-danger"
-                    tooltip="Löschen"
-                    iconName="delete"
-                    (click)="openDialog()"
-                  ></app-button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+        <!-- <app-orders-table
+          [orders]="ordersData"
+          (deleteOrder)="handleDeleteOrder($event)"
+        >
+        </app-orders-table> -->
        <app-paginator
          [currentPage]="currentPage"
          [totalItems]="totalItems"
@@ -246,20 +101,24 @@
        <h3 class="card-header">Buttons, Chips & Interaktion</h3>
        <div class="component-grid">
          <div class="button-group">
-            <app-button color="primary">Primary</app-button>
-            <app-button color="secondary">Secondary</app-button>
-            <app-button color="stroked">Stroked</app-button>
-            <app-button color="flat">Flat</app-button>
-            <app-button color="icon" tooltip="Favorit hinzufügen"
-              >...</app-button
-            >
+            <app-button buttonType="primary">Primary</app-button>
+            <app-button buttonType="secondary">Secondary</app-button>
+            <app-button buttonType="stroked">Stroked</app-button>
+            <app-button buttonType="flat">Flat</app-button>
+            <app-button buttonType="icon"
+              tooltip="Favorit hinzufügen"
+              iconName="favorite"
+              svgColor="red"
+            ></app-button>

            <app-button
-              color="icon"
+              buttonType="icon"
              tooltip="Details anzeigen"
              iconName="eye"
            ></app-button>
          </div>
+
+
          <div class="chip-set">
            <app-chip label="Technologie" [removable]="true"></app-chip>
            <app-chip
@@ -287,14 +146,14 @@
            </div>
          </div>

-          
+          <app-menu [items]="actionMenuItems"></app-menu>
        </div>
      </app-card>

      <app-card class="grid-col-span-2">
        <h3 class="card-header">Indikatoren & Feedback</h3>
        <div class="card-body component-grid">
-          <app-button color="secondary" (click)="triggerSnackbar()"
+          <app-button buttonType="secondary" (click)="triggerSnackbar()"
            >Snackbar anzeigen</app-button
          >
          <app-alert type="success"
@@ -407,8 +266,8 @@
      <p>Sind Sie sicher? Diese Aktion kann nicht rückgängig gemacht werden.</p>
    </div>
    <div dialog-actions>
-      <app-button color="stroked" (click)="closeDialog()">Abbrechen</app-button>
-      <app-button color="primary" (click)="closeDialog()"
+      <app-button buttonType="stroked" (click)="closeDialog()">Abbrechen</app-button>
+      <app-button buttonType="primary" (click)="closeDialog()"
        >Ja, endgültig löschen</app-button
      >
    </div>
--- a/src/app/features/demo/components/demo2/demo2.component.ts
+++ b/src/app/features/demo/components/demo2/demo2.component.ts
@@ -12,11 +12,17 @@ import { PageHeaderComponent } from '../../../../shared/components/layout/page-h
 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';
-import { MenuComponent } from '../../../../shared/components/overlays/menu/menu.component';
+import {
+  MenuComponent,
+  MenuItem,
+} from '../../../../shared/components/overlays/menu/menu.component';
 import { AlertComponent } from '../../../../shared/components/ui/alert/alert.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';

@Component({
  selector: 'app-demo2',
@@ -37,6 +43,8 @@ import { ExpansionPanelComponent } from '../../../../shared/components/layout/ex
    PaginatorComponent,
    SkeletonComponent,
    ExpansionPanelComponent,
+    SidebarComponent,
+    OrdersTableComponent
  ],
  templateUrl: './demo2.component.html',
  styleUrl: './demo2.component.css',
@@ -45,13 +53,54 @@ export class Demo2Component implements OnInit {
  // Zustands-Variablen für diese Demo-Seite
  isLoading = true;
  isDialogOpen = false;
-  isComponentMenuOpen = 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[] = [
+    {
+      label: 'Bearbeiten',
+      action: () => this.snackbarService.show('Bearbeiten geklickt!'),
+    },
+    {
+      label: 'Kopieren',
+      action: () => console.log('Kopieren geklickt!'),
+    },
+    {
+      dividerBefore: true,
+      label: 'Löschen',
+      action: () => this.openDialog(), // Öffnet z.B. den Bestätigungs-Dialog
+      isDanger: true,
+    },
+  ];
+
+   ordersData: Order[] = [
+    {
+      id: '10543',
+      user: { name: 'Max Mustermann', email: 'max.mustermann@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.pan@example.com', avatarUrl: 'https://i.pravatar.cc/40?u=peter' },
+      amount: '€ 87,00',
+      status: 'danger',
+      statusText: 'Storniert'
+    }
+  ];
+
  constructor(private snackbarService: SnackbarService) {}

  ngOnInit(): void {
@@ -80,4 +129,9 @@ export class Demo2Component implements OnInit {
    console.log('Wechsle zu Seite:', newPage);
    // Hier würde die Logik zum Neuladen der Tabellendaten folgen
  }
+
+   handleDeleteOrder(orderId: string) {
+    console.log('Lösche Bestellung mit ID:', orderId);
+    this.openDialog(); // Öffnet z.B. den globalen Dialog
+  }
 }