From 026a5700e025c131704bcec35f4aed54badb96f7 Mon Sep 17 00:00:00 2001
From: Florian Glombik <florian.glombik@tum.de>
Date: Wed, 6 Nov 2024 21:37:47 +0100
Subject: [PATCH] Introduce signal for easy retrieval of valid state

---
 .../date-time-picker.component.html            |  4 ++--
 .../date-time-picker.component.ts              | 18 +++++++++++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html
index 90af5cb06b92..fcfa651b61a6 100644
--- a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html
+++ b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html
@@ -19,8 +19,8 @@
         #dateInput="ngModel"
         class="form-control position-relative ps-5"
         id="date-input-field"
-        [ngClass]="{ 'is-invalid': error() || dateInput.invalid || (requiredField() && !dateInput.value) || warning(), 'border-warning': warning() }"
-        [class.ng-invalid]="error() || dateInput.invalid || (requiredField() && !dateInput.value) || warning()"
+        [ngClass]="{ 'is-invalid': isValid(), 'border-warning': warning() }"
+        [class.ng-invalid]="!isValid()"
         [ngModel]="value"
         [disabled]="disabled()"
         [min]="minDate()"
diff --git a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts
index d02dba86213d..eacc3eefcf02 100644
--- a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts
+++ b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, ViewChild, computed, forwardRef, input, output } from '@angular/core';
+import { Component, Input, ViewChild, computed, forwardRef, input, output, signal } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgModel } from '@angular/forms';
 import { faCalendarAlt, faCircleXmark, faClock, faGlobe, faQuestionCircle, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
 import dayjs from 'dayjs/esm';
@@ -37,6 +37,19 @@ export class FormDateTimePickerComponent implements ControlValueAccessor {
     shouldDisplayTimeZoneWarning = input<boolean>(true); // Displays a warning that the current time zone might differ from the participants'.
     valueChange = output<void>();
 
+    protected isInputValid = signal<boolean>(false);
+    protected dateInputValue = signal<string>('');
+
+    isValid = computed(() => {
+        const isInvalid = this.error() || !this.isInputValid() || (this.requiredField() && !this.dateInputValue()) || this.warning();
+        return !isInvalid;
+    });
+
+    private updateSignals(): void {
+        this.isInputValid.set(!Boolean(this.dateInput.invalid));
+        this.dateInputValue.set(this.dateInput.value);
+    }
+
     private onChange?: (val?: dayjs.Dayjs) => void;
 
     /**
@@ -44,6 +57,7 @@ export class FormDateTimePickerComponent implements ControlValueAccessor {
      */
     valueChanged() {
         this.valueChange.emit();
+        this.updateSignals();
     }
 
     /**
@@ -57,6 +71,7 @@ export class FormDateTimePickerComponent implements ControlValueAccessor {
         } else {
             this.value = value;
         }
+        this.updateSignals();
     }
 
     /**
@@ -117,5 +132,6 @@ export class FormDateTimePickerComponent implements ControlValueAccessor {
      */
     clearDate() {
         this.dateInput.reset(undefined);
+        this.updateSignals();
     }
 }