From 1475b13360d3ceacdfbe258e8366b734cb3ae93c Mon Sep 17 00:00:00 2001
From: Igor Propisnov <info@igor-propisnov.com>
Date: Thu, 22 Aug 2024 10:05:46 +0200
Subject: [PATCH] added step validation

---
 .../create-event/create-event.component.html  |  9 +--
 .../create-event/create-event.component.ts    | 58 ++++++++++++++-----
 2 files changed, 48 insertions(+), 19 deletions(-)

diff --git a/frontend/src/app/pages/event-root/create-event/create-event.component.html b/frontend/src/app/pages/event-root/create-event/create-event.component.html
index ae2d82f..e280ad0 100644
--- a/frontend/src/app/pages/event-root/create-event/create-event.component.html
+++ b/frontend/src/app/pages/event-root/create-event/create-event.component.html
@@ -51,13 +51,10 @@
         @if (currentStep() < steps.length - 1) {
           <button
             type="button"
-            class="btn btn-primary btn-outline"
-            (click)="nextStep()"
-            [disabled]="currentStep() === steps.length - 1"
-            [class.opacity-50]="currentStep() === steps.length - 1">
+            [class]="getNextButtonClass()"
+            (click)="nextStep()">
             <span>
-              Next to
-              <span class="font-bold">{{ steps[currentStep() + 1] }}</span>
+              {{ getNextButtonText() }}
             </span>
           </button>
         }
diff --git a/frontend/src/app/pages/event-root/create-event/create-event.component.ts b/frontend/src/app/pages/event-root/create-event/create-event.component.ts
index b2faf48..eb06dd3 100644
--- a/frontend/src/app/pages/event-root/create-event/create-event.component.ts
+++ b/frontend/src/app/pages/event-root/create-event/create-event.component.ts
@@ -4,6 +4,7 @@ import {
   ChangeDetectionStrategy,
   signal,
   WritableSignal,
+  effect,
 } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
@@ -22,6 +23,8 @@ export class CreateEventComponent {
   public currentStep: WritableSignal<number> = signal(0);
   public readonly steps: string[] = ['Basic', 'Tickets', 'Review'];
   public form!: FormGroup;
+  public isCurrentStepValid: WritableSignal<boolean> = signal(false);
+  public hasAttemptedNextStep: WritableSignal<boolean> = signal(false);
 
   public constructor(private readonly formBuilder: FormBuilder) {
     this.form = this.formBuilder.group({
@@ -30,6 +33,18 @@ export class CreateEventComponent {
       eventDate: ['', Validators.required],
       eventTime: ['', Validators.required],
     });
+
+    effect(() => {
+      this.isCurrentStepValid.set(this.isStepValid(this.currentStep()));
+      this.hasAttemptedNextStep.set(false); // Reset when step changes
+    });
+
+    this.form.valueChanges.subscribe(() => {
+      this.isCurrentStepValid.set(this.isStepValid(this.currentStep()));
+      if (this.isCurrentStepValid()) {
+        this.hasAttemptedNextStep.set(false); // Reset when form becomes valid
+      }
+    });
   }
 
   public getStepContent(index: number): string {
@@ -58,23 +73,28 @@ export class CreateEventComponent {
   }
 
   public isStepValid(stepIndex: number): boolean {
-    // TODO: Implementiere die tatsächliche Validierungslogik hier
-    // Für Demonstrationszwecke nehmen wir an, dass der erste Schritt immer gültig ist,
-    // und die anderen zufällig gültig oder ungültig sind
-    return true;
-
-    // In Zukunft könnte es so aussehen:
-    // switch(stepIndex) {
-    //   case 0: return this.isBasicStepValid();
-    //   case 1: return this.isTicketsStepValid();
-    //   case 2: return this.isReviewStepValid();
-    //   default: return false;
-    // }
+    switch (stepIndex) {
+      case 0:
+        return this.form.valid;
+      case 1:
+        // TODO: Implement validation for Tickets step
+        return true;
+      case 2:
+        // TODO: Implement validation for Review step
+        return true;
+      default:
+        return false;
+    }
   }
 
   public nextStep(): void {
     if (this.currentStep() < this.steps.length - 1) {
-      this.currentStep.set(this.currentStep() + 1);
+      if (this.isCurrentStepValid()) {
+        this.currentStep.set(this.currentStep() + 1);
+        this.hasAttemptedNextStep.set(false);
+      } else {
+        this.hasAttemptedNextStep.set(true);
+      }
     }
   }
 
@@ -83,4 +103,16 @@ export class CreateEventComponent {
       this.currentStep.set(this.currentStep() - 1);
     }
   }
+
+  public getNextButtonClass(): string {
+    return this.hasAttemptedNextStep() && !this.isCurrentStepValid()
+      ? 'btn btn-outline btn-warning'
+      : 'btn btn-primary btn-outline';
+  }
+
+  public getNextButtonText(): string {
+    return this.hasAttemptedNextStep() && !this.isCurrentStepValid()
+      ? 'Required Fields Missing'
+      : `Next to ${this.steps[this.currentStep() + 1]}`;
+  }
 }