Development: Use signals in lecture unit wizard

src/main/webapp/app/lecture/wizard-mode/lecture-wizard-units.component.html

@@ -1,5 +1,5 @@
 <div>
-    <h1><span jhiTranslate="artemisApp.lecture.wizardMode.steps.unitsStepTitle"></span></h1>
+    <h2><span jhiTranslate="artemisApp.lecture.wizardMode.steps.unitsStepTitle"></span></h2>
     <p><span jhiTranslate="artemisApp.lecture.wizardMode.steps.unitsStepMessage"></span></p>
     <jhi-lecture-unit-management
         [lectureId]="this.lecture.id"
@@ -12,16 +12,14 @@ <h1><span jhiTranslate="artemisApp.lecture.wizardMode.steps.unitsStepTitle"></sp
         <div class="form-group w-100 d-flex justify-content-start">
             <jhi-unit-creation-card [emitEvents]="true" (onUnitCreationCardClicked)="onCreateLectureUnit($event)" />
         </div>
-    }
-    @if (isAnyUnitFormOpen()) {
+    } @else {
         <div class="form-group">
             @if (!isEditingLectureUnit) {
                 <h4><span jhiTranslate="artemisApp.lecture.wizardMode.newLectureUnit"></span></h4>
-            }
-            @if (isEditingLectureUnit) {
+            } @else {
                 <h4><span jhiTranslate="artemisApp.lecture.wizardMode.editLectureUnit"></span></h4>
             }
-            @if (isTextUnitFormOpen) {
+            @if (isTextUnitFormOpen()) {
                 <jhi-text-unit-form
                     [isEditMode]="isEditingLectureUnit"
                     [hasCancelButton]="true"
@@ -30,7 +28,7 @@ <h4><span jhiTranslate="artemisApp.lecture.wizardMode.editLectureUnit"></span></
                     [formData]="textUnitFormData"
                 />
             }
-            @if (isVideoUnitFormOpen) {
+            @if (isVideoUnitFormOpen()) {
                 <jhi-video-unit-form
                     [isEditMode]="isEditingLectureUnit"
                     [hasCancelButton]="true"
@@ -39,7 +37,7 @@ <h4><span jhiTranslate="artemisApp.lecture.wizardMode.editLectureUnit"></span></
                     [formData]="videoUnitFormData"
                 />
             }
-            @if (isOnlineUnitFormOpen) {
+            @if (isOnlineUnitFormOpen()) {
                 <jhi-online-unit-form
                     [isEditMode]="isEditingLectureUnit"
                     [hasCancelButton]="true"
@@ -48,7 +46,7 @@ <h4><span jhiTranslate="artemisApp.lecture.wizardMode.editLectureUnit"></span></
                     [formData]="onlineUnitFormData"
                 />
             }
-            @if (isAttachmentUnitFormOpen) {
+            @if (isAttachmentUnitFormOpen()) {
                 <jhi-attachment-unit-form
                     [isEditMode]="isEditingLectureUnit"
                     [hasCancelButton]="true"
@@ -57,7 +55,7 @@ <h4><span jhiTranslate="artemisApp.lecture.wizardMode.editLectureUnit"></span></
                     [formData]="attachmentUnitFormData"
                 />
             }
-            @if (isExerciseUnitFormOpen) {
+            @if (isExerciseUnitFormOpen()) {
                 <jhi-create-exercise-unit
                     [shouldNavigateOnSubmit]="false"
                     (onExerciseUnitCreated)="onExerciseUnitCreated()"

src/main/webapp/app/lecture/wizard-mode/lecture-wizard-units.component.ts

@@ -1,13 +1,13 @@
-import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, ViewChild, computed, signal, viewChild } from '@angular/core';
 import { Lecture } from 'app/entities/lecture.model';
 import { TextUnit } from 'app/entities/lecture-unit/textUnit.model';
 import { VideoUnit } from 'app/entities/lecture-unit/videoUnit.model';
 import { OnlineUnit } from 'app/entities/lecture-unit/onlineUnit.model';
 import { AttachmentUnit } from 'app/entities/lecture-unit/attachmentUnit.model';
-import { TextUnitFormData } from 'app/lecture/lecture-unit/lecture-unit-management/text-unit-form/text-unit-form.component';
-import { VideoUnitFormData } from 'app/lecture/lecture-unit/lecture-unit-management/video-unit-form/video-unit-form.component';
-import { OnlineUnitFormData } from 'app/lecture/lecture-unit/lecture-unit-management/online-unit-form/online-unit-form.component';
-import { AttachmentUnitFormData } from 'app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component';
+import { TextUnitFormComponent, TextUnitFormData } from 'app/lecture/lecture-unit/lecture-unit-management/text-unit-form/text-unit-form.component';
+import { VideoUnitFormComponent, VideoUnitFormData } from 'app/lecture/lecture-unit/lecture-unit-management/video-unit-form/video-unit-form.component';
+import { OnlineUnitFormComponent, OnlineUnitFormData } from 'app/lecture/lecture-unit/lecture-unit-management/online-unit-form/online-unit-form.component';
+import { AttachmentUnitFormComponent, AttachmentUnitFormData } from 'app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component';
 import { LectureUnit, LectureUnitType } from 'app/entities/lecture-unit/lectureUnit.model';
 import { onError } from 'app/shared/util/global.utils';
 import { Attachment, AttachmentType } from 'app/entities/attachment.model';
@@ -31,13 +31,25 @@ export class LectureUpdateWizardUnitsComponent implements OnInit {
     @Input() lecture: Lecture;
 
     @ViewChild(LectureUnitManagementComponent, { static: false }) unitManagementComponent: LectureUnitManagementComponent;
+    textUnitForm = viewChild(TextUnitFormComponent);
+    videoUnitForm = viewChild(VideoUnitFormComponent);
+    onlineUnitForm = viewChild(OnlineUnitFormComponent);
+    attachmentUnitForm = viewChild(AttachmentUnitFormComponent);
+    isUnitConfigurationValid = computed(() => {
+        return (
+            (this.textUnitForm()?.isFormValid() || !this.isTextUnitFormOpen()) &&
+            (this.videoUnitForm()?.isFormValid() || !this.isVideoUnitFormOpen()) &&
+            (this.onlineUnitForm()?.isFormValid() || !this.isOnlineUnitFormOpen()) &&
+            (this.attachmentUnitForm()?.isFormValid() || !this.isAttachmentUnitFormOpen())
+        );
+    });
 
     isEditingLectureUnit: boolean;
-    isTextUnitFormOpen: boolean;
-    isExerciseUnitFormOpen: boolean;
-    isVideoUnitFormOpen: boolean;
-    isOnlineUnitFormOpen: boolean;
-    isAttachmentUnitFormOpen: boolean;
+    isTextUnitFormOpen = signal<boolean>(false);
+    isExerciseUnitFormOpen = signal<boolean>(false);
+    isVideoUnitFormOpen = signal<boolean>(false);
+    isOnlineUnitFormOpen = signal<boolean>(false);
+    isAttachmentUnitFormOpen = signal<boolean>(false);
 
     currentlyProcessedTextUnit: TextUnit;
     currentlyProcessedVideoUnit: VideoUnit;
@@ -71,33 +83,33 @@ export class LectureUpdateWizardUnitsComponent implements OnInit {
 
         switch (type) {
             case LectureUnitType.TEXT:
-                this.isTextUnitFormOpen = true;
+                this.isTextUnitFormOpen.set(true);
                 break;
             case LectureUnitType.EXERCISE:
-                this.isExerciseUnitFormOpen = true;
+                this.isExerciseUnitFormOpen.set(true);
                 break;
             case LectureUnitType.VIDEO:
-                this.isVideoUnitFormOpen = true;
+                this.isVideoUnitFormOpen.set(true);
                 break;
             case LectureUnitType.ONLINE:
-                this.isOnlineUnitFormOpen = true;
+                this.isOnlineUnitFormOpen.set(true);
                 break;
             case LectureUnitType.ATTACHMENT:
-                this.isAttachmentUnitFormOpen = true;
+                this.isAttachmentUnitFormOpen.set(true);
                 break;
         }
     }
 
-    isAnyUnitFormOpen(): boolean {
-        return this.isTextUnitFormOpen || this.isVideoUnitFormOpen || this.isOnlineUnitFormOpen || this.isAttachmentUnitFormOpen || this.isExerciseUnitFormOpen;
-    }
+    isAnyUnitFormOpen = computed(() => {
+        return this.isTextUnitFormOpen() || this.isVideoUnitFormOpen() || this.isOnlineUnitFormOpen() || this.isAttachmentUnitFormOpen() || this.isExerciseUnitFormOpen();
+    });
 
     onCloseLectureUnitForms() {
-        this.isTextUnitFormOpen = false;
-        this.isVideoUnitFormOpen = false;
-        this.isOnlineUnitFormOpen = false;
-        this.isAttachmentUnitFormOpen = false;
-        this.isExerciseUnitFormOpen = false;
+        this.isTextUnitFormOpen.set(false);
+        this.isVideoUnitFormOpen.set(false);
+        this.isOnlineUnitFormOpen.set(false);
+        this.isAttachmentUnitFormOpen.set(false);
+        this.isExerciseUnitFormOpen.set(false);
     }
 
     createEditTextUnit(formData: TextUnitFormData) {
@@ -258,11 +270,11 @@ export class LectureUpdateWizardUnitsComponent implements OnInit {
         this.currentlyProcessedOnlineUnit = lectureUnit as OnlineUnit;
         this.currentlyProcessedAttachmentUnit = lectureUnit as AttachmentUnit;
 
-        this.isTextUnitFormOpen = lectureUnit.type === LectureUnitType.TEXT;
-        this.isVideoUnitFormOpen = lectureUnit.type === LectureUnitType.VIDEO;
-        this.isExerciseUnitFormOpen = lectureUnit.type === LectureUnitType.EXERCISE;
-        this.isOnlineUnitFormOpen = lectureUnit.type === LectureUnitType.ONLINE;
-        this.isAttachmentUnitFormOpen = lectureUnit.type === LectureUnitType.ATTACHMENT;
+        this.isTextUnitFormOpen.set(lectureUnit.type === LectureUnitType.TEXT);
+        this.isVideoUnitFormOpen.set(lectureUnit.type === LectureUnitType.VIDEO);
+        this.isExerciseUnitFormOpen.set(lectureUnit.type === LectureUnitType.EXERCISE);
+        this.isOnlineUnitFormOpen.set(lectureUnit.type === LectureUnitType.ONLINE);
+        this.isAttachmentUnitFormOpen.set(lectureUnit.type === LectureUnitType.ATTACHMENT);
 
         switch (lectureUnit.type) {
             case LectureUnitType.TEXT:

src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html

@@ -1,14 +1,14 @@
 @if (labelName) {
     <label for="date-input-field" class="form-control-label col">
-        {{ labelName }}
+        {{ labelName() }}
     </label>
 }
-@if (labelTooltip) {
-    <fa-stack class="text-secondary icon-full-size" [ngbTooltip]="labelTooltip">
+@if (labelTooltip()) {
+    <fa-stack class="text-secondary icon-full-size" [ngbTooltip]="labelTooltip()">
         <fa-icon [icon]="faQuestionCircle" stackItemSize="1x" />
     </fa-stack>
 }
-@if (shouldDisplayTimeZoneWarning) {
+@if (shouldDisplayTimeZoneWarning()) {
     <fa-stack ngbTooltip="{{ 'entity.timeZoneWarning' | artemisTranslate: { timeZone: currentTimeZone } }}" class="icon-full-size">
         <fa-icon [icon]="faGlobe" stackItemSize="1x" class="text-lightgrey" />
         <fa-icon [icon]="faClock" stackItemSize="1x" transform="shrink-6 down-5 right-5" class="text-secondary" />
@@ -19,12 +19,12 @@
         #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"
-        [max]="maxDate"
+        [disabled]="disabled()"
+        [min]="minDate()"
+        [max]="maxDate()"
         (ngModelChange)="updateField($event)"
         [owlDateTime]="dt"
         name="datePicker"
@@ -38,12 +38,12 @@
         </button>
     </div>
 
-    <owl-date-time [startAt]="startDate" #dt />
+    <owl-date-time [startAt]="startDate()" #dt />
 </div>
-@if (dateInput.invalid || (requiredField && !dateInput.value)) {
-    <div class="invalid-feedback" jhiTranslate="entity.dateMissingOrNotValid" [translateValues]="{ labelName: labelName }"></div>
+@if (dateInput.invalid || (requiredField() && !dateInput.value)) {
+    <div class="invalid-feedback" jhiTranslate="entity.dateMissingOrNotValid" [translateValues]="{ labelName: labelName() }"></div>
 }
-@if (warning) {
+@if (warning()) {
     <div class="invalid-feedback">
         <fa-icon class="text-warning" [icon]="faTriangleExclamation" />
         <span class="visible-date-warning" jhiTranslate="entity.warningError" ngbTooltip="{{ 'entity.warningToolTip' | artemisTranslate }}"></span>

src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, ViewChild, forwardRef } 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';
@@ -16,26 +16,39 @@ import dayjs from 'dayjs/esm';
     ],
 })
 export class FormDateTimePickerComponent implements ControlValueAccessor {
+    protected readonly faCalendarAlt = faCalendarAlt;
+    protected readonly faGlobe = faGlobe;
+    protected readonly faClock = faClock;
+    protected readonly faQuestionCircle = faQuestionCircle;
+    protected readonly faCircleXmark = faCircleXmark;
+    protected readonly faTriangleExclamation = faTriangleExclamation;
+
     @ViewChild('dateInput', { static: false }) dateInput: NgModel;
-    @Input() labelName: string;
-    @Input() labelTooltip: string;
+    labelName = input<string>();
+    labelTooltip = input<string>();
     @Input() value: any;
-    @Input() disabled: boolean;
-    @Input() error: boolean;
-    @Input() warning: boolean;
-    @Input() requiredField: boolean = false;
-    @Input() startAt?: dayjs.Dayjs; // Default selected date. By default, this sets it to the current time without seconds or milliseconds;
-    @Input() min?: dayjs.Dayjs; // Dates before this date are not selectable.
-    @Input() max?: dayjs.Dayjs; // Dates after this date are not selectable.
-    @Input() shouldDisplayTimeZoneWarning = true; // Displays a warning that the current time zone might differ from the participants'.
-    @Output() valueChange = new EventEmitter();
-
-    readonly faCalendarAlt = faCalendarAlt;
-    readonly faGlobe = faGlobe;
-    readonly faClock = faClock;
-    readonly faQuestionCircle = faQuestionCircle;
-    readonly faCircleXmark = faCircleXmark;
-    readonly faTriangleExclamation = faTriangleExclamation;
+    disabled = input<boolean>();
+    error = input<boolean>();
+    warning = input<boolean>();
+    requiredField = input<boolean>(false);
+    startAt? = input<dayjs.Dayjs>(); // Default selected date. By default, this sets it to the current time without seconds or milliseconds;
+    min? = input<dayjs.Dayjs>(); // Dates before this date are not selectable.
+    max? = input<dayjs.Dayjs>(); // Dates after this date are not selectable.
+    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();
     }
 
     /**
@@ -91,17 +106,17 @@ export class FormDateTimePickerComponent implements ControlValueAccessor {
         return Intl.DateTimeFormat().resolvedOptions().timeZone;
     }
 
-    get startDate(): Date | null {
-        return this.convertToDate(this.startAt ?? dayjs().startOf('minutes'));
-    }
+    startDate = computed(() => {
+        return this.convertToDate(this.startAt?.() ?? dayjs().startOf('minutes'));
+    });
 
-    get minDate(): Date | null {
-        return this.convertToDate(this.min);
-    }
+    minDate = computed(() => {
+        return this.convertToDate(this.min?.());
+    });
 
-    get maxDate(): Date | null {
-        return this.convertToDate(this.max);
-    }
+    maxDate = computed(() => {
+        return this.convertToDate(this.max?.());
+    });
 
     /**
      * Function that converts a possibly undefined dayjs value to a date or null.
@@ -117,5 +132,6 @@ export class FormDateTimePickerComponent implements ControlValueAccessor {
      */
     clearDate() {
         this.dateInput.reset(undefined);
+        this.updateSignals();
     }
 }