From 72dce002cdbcc445de025acb7a573ecb8c452d47 Mon Sep 17 00:00:00 2001
From: Arne Thamm <arne.thamm@dataport.de>
Date: Thu, 15 May 2025 16:22:29 +0200
Subject: [PATCH] OZG-8086 wizard component styling refactor g todo
---
...ten-anfragen-form-container.component.html | 6 ++
.../src/lib/wizard/wizard.component.ts | 75 +++++++++++++++++--
2 files changed, 76 insertions(+), 5 deletions(-)
diff --git a/alfa-client/libs/admin/reporting/src/lib/daten-anfragen/daten-anfragen-form-container/daten-anfragen-form-container.component.html b/alfa-client/libs/admin/reporting/src/lib/daten-anfragen/daten-anfragen-form-container/daten-anfragen-form-container.component.html
index 0ebb8ed48b..8e9474653f 100644
--- a/alfa-client/libs/admin/reporting/src/lib/daten-anfragen/daten-anfragen-form-container/daten-anfragen-form-container.component.html
+++ b/alfa-client/libs/admin/reporting/src/lib/daten-anfragen/daten-anfragen-form-container/daten-anfragen-form-container.component.html
@@ -1,3 +1,9 @@
+<div class="flex items-center gap-2">
+ <button >
+ ←
+ </button>
+ <h2 class="heading-2" data-test-id="datenanfrage-form-header-text">Datenanfrage</h2>
+</div>
<ods-wizard >
<div step1>hallo</div>
<div step2>hallo 2</div>
diff --git a/alfa-client/libs/design-system/src/lib/wizard/wizard.component.ts b/alfa-client/libs/design-system/src/lib/wizard/wizard.component.ts
index fbc321c5a4..e466b6664f 100644
--- a/alfa-client/libs/design-system/src/lib/wizard/wizard.component.ts
+++ b/alfa-client/libs/design-system/src/lib/wizard/wizard.component.ts
@@ -1,13 +1,78 @@
import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
@Component({
selector: 'ods-wizard',
standalone: true,
- imports: [],
- template: ` <ng-content select="[step1]" />
- xxx
- <ng-content select="[step2]" />`,
+ imports: [CommonModule],
+ template: `
+ <div class="wizard-container w-full">
+ <div class="steps flex justify-between mb-4">
+ <div
+ class="step flex-1 text-center"
+ [class.active]="step === 1"
+ (click)="goToStep(1)"
+ >
+ 1. Auswertung erstellen
+ </div>
+ <div
+ class="step flex-1 text-center"
+ [class.active]="step === 2"
+ (click)="goToStep(2)"
+ >
+ 2. Datenanfrage veröffentlichen
+ </div>
+ </div>
+ <div class="content flex justify-between mb-4">
+ <div *ngIf="step === 1">
+ <ng-content select="[step1]"/>
+ </div>
+ <ng-content *ngIf="step === 2" select="[step2]"/>
+ </div>
+ <div class="actions flex justify-end mt-4">
+ <button
+ class="btn mr-2"
+ [disabled]="step === 1"
+ (click)="goToStep(1)"
+ >
+ Back
+ </button>
+ <button
+ class="btn"
+ [disabled]="step === 2"
+ (click)="goToStep(2)"
+ >
+ Next
+ </button>
+ </div>
+ </div>
+ `,
+ styles: [
+ `
+ .wizard-container {
+ @apply w-full;
+ }
+ .steps .step {
+ @apply cursor-pointer px-4 py-2 border-b-2 text-center;
+ }
+ .steps .step.active {
+ @apply border-blue-500 text-blue-500 font-bold;
+ }
+ .btn {
+ @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;
+ }
+ .btn:disabled {
+ @apply bg-gray-300 cursor-not-allowed;
+ }
+ `,
+ ],
})
export class WizardComponent {
- @Input() step: 1 | 2;
+ @Input() step: 1 | 2 = 1;
+
+ goToStep(step: 1 | 2) {
+ if (step >= 1 && step <= 2) {
+ this.step = step;
+ }
+ }
}
--
GitLab