Development: Use signals in lecture add attachment form

src/main/webapp/app/lecture/lecture-attachments.component.ts

@@ -1,15 +1,14 @@
 import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { HttpClient, HttpErrorResponse, HttpResponse } from '@angular/common/http';
+import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
 import { Lecture } from 'app/entities/lecture.model';
-import { FileUploaderService } from 'app/shared/http/file-uploader.service';
 import dayjs from 'dayjs/esm';
 import { Subject } from 'rxjs';
 import { FileService } from 'app/shared/http/file.service';
 import { Attachment, AttachmentType } from 'app/entities/attachment.model';
 import { AttachmentService } from 'app/lecture/attachment.service';
 import { faEye, faPaperclip, faPencilAlt, faQuestionCircle, faSpinner, faTimes, faTrash } from '@fortawesome/free-solid-svg-icons';
-import { UPLOAD_FILE_EXTENSIONS } from 'app/shared/constants/file-extensions.constants';
+import { ACCEPTED_FILE_EXTENSIONS_FILE_BROWSER, ALLOWED_FILE_EXTENSIONS_HUMAN_READABLE } from 'app/shared/constants/file-extensions.constants';
 import { LectureService } from 'app/lecture/lecture.service';
 
 @Component({
@@ -18,6 +17,16 @@ import { LectureService } from 'app/lecture/lecture.service';
     styleUrls: ['./lecture-attachments.component.scss'],
 })
 export class LectureAttachmentsComponent implements OnInit, OnDestroy {
+    protected readonly faSpinner = faSpinner;
+    protected readonly faTimes = faTimes;
+    protected readonly faTrash = faTrash;
+    protected readonly faPencilAlt = faPencilAlt;
+    protected readonly faPaperclip = faPaperclip;
+    protected readonly faQuestionCircle = faQuestionCircle;
+    protected readonly faEye = faEye;
+    protected readonly allowedFileExtensions = ALLOWED_FILE_EXTENSIONS_HUMAN_READABLE;
+    protected readonly acceptedFileExtensionsFileBrowser = ACCEPTED_FILE_EXTENSIONS_FILE_BROWSER;
+
     @ViewChild('fileInput', { static: false }) fileInput: ElementRef;
     @Input() lectureId: number | undefined;
     @Input() showHeader = true;
@@ -33,29 +42,13 @@ export class LectureAttachmentsComponent implements OnInit, OnDestroy {
     errorMessage?: string;
     viewButtonAvailable: Record<number, boolean> = {};
 
-    // A human-readable list of allowed file extensions
-    readonly allowedFileExtensions = UPLOAD_FILE_EXTENSIONS.join(', ');
-    // The list of file extensions for the "accept" attribute of the file input field
-    readonly acceptedFileExtensionsFileBrowser = UPLOAD_FILE_EXTENSIONS.map((ext) => '.' + ext).join(',');
-
     private dialogErrorSource = new Subject<string>();
     dialogError$ = this.dialogErrorSource.asObservable();
 
-    // Icons
-    faSpinner = faSpinner;
-    faTimes = faTimes;
-    faTrash = faTrash;
-    faPencilAlt = faPencilAlt;
-    faPaperclip = faPaperclip;
-    faQuestionCircle = faQuestionCircle;
-    faEye = faEye;
-
     constructor(
         protected activatedRoute: ActivatedRoute,
         private attachmentService: AttachmentService,
         private lectureService: LectureService,
-        private httpClient: HttpClient,
-        private fileUploaderService: FileUploaderService,
         private fileService: FileService,
     ) {}
 

src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html

@@ -60,13 +60,13 @@
                         />
                     </div>
                 </div>
-                @if (isFileTooBig) {
+                @if (isFileTooBig()) {
                     <div class="alert alert-danger">
                         {{ 'artemisApp.attachmentUnit.createAttachmentUnit.fileTooBig' | artemisTranslate }}
                         {{ 'artemisApp.attachmentUnit.createAttachmentUnit.fileLimitation' | artemisTranslate }}
                     </div>
                 }
-                @if (!fileName && fileInputTouched) {
+                @if (!fileName() && fileInputTouched) {
                     <div class="alert alert-danger" jhiTranslate="artemisApp.attachmentUnit.createAttachmentUnit.fileRequiredValidationError"></div>
                 }
             </div>
@@ -105,7 +105,7 @@
             </div>
             <div class="row">
                 <div class="col-12">
-                    <button id="submitButton" class="btn btn-primary" type="submit" [disabled]="!isSubmitPossible">
+                    <button id="submitButton" class="btn btn-primary" type="submit" [disabled]="!isFormValid()">
                         <span jhiTranslate="entity.action.submit"></span>
                     </button>
                     @if (hasCancelButton) {

src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts

@@ -1,11 +1,11 @@
-import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, ViewChild, computed, inject, signal } from '@angular/core';
 import dayjs from 'dayjs/esm';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { TranslateService } from '@ngx-translate/core';
 import { faQuestionCircle, faTimes } from '@fortawesome/free-solid-svg-icons';
-import { UPLOAD_FILE_EXTENSIONS } from 'app/shared/constants/file-extensions.constants';
+import { ACCEPTED_FILE_EXTENSIONS_FILE_BROWSER, ALLOWED_FILE_EXTENSIONS_HUMAN_READABLE } from 'app/shared/constants/file-extensions.constants';
 import { CompetencyLectureUnitLink } from 'app/entities/competency.model';
 import { MAX_FILE_SIZE } from 'app/shared/constants/input.constants';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 export interface AttachmentUnitFormData {
     formProperties: FormProperties;
@@ -32,83 +32,65 @@ export interface FileProperties {
     selector: 'jhi-attachment-unit-form',
     templateUrl: './attachment-unit-form.component.html',
 })
-export class AttachmentUnitFormComponent implements OnInit, OnChanges {
-    @Input()
-    formData: AttachmentUnitFormData;
-    @Input()
-    isEditMode = false;
+export class AttachmentUnitFormComponent implements OnChanges {
+    protected readonly faQuestionCircle = faQuestionCircle;
+    protected readonly faTimes = faTimes;
+    protected readonly allowedFileExtensions = ALLOWED_FILE_EXTENSIONS_HUMAN_READABLE;
+    protected readonly acceptedFileExtensionsFileBrowser = ACCEPTED_FILE_EXTENSIONS_FILE_BROWSER;
 
-    // A human-readable list of allowed file extensions
-    readonly allowedFileExtensions = UPLOAD_FILE_EXTENSIONS.join(', ');
-    // The list of file extensions for the "accept" attribute of the file input field
-    readonly acceptedFileExtensionsFileBrowser = UPLOAD_FILE_EXTENSIONS.map((ext) => '.' + ext).join(',');
+    @Input() formData: AttachmentUnitFormData;
+    @Input() isEditMode = false;
 
-    faQuestionCircle = faQuestionCircle;
+    @Output() formSubmitted: EventEmitter<AttachmentUnitFormData> = new EventEmitter<AttachmentUnitFormData>();
 
-    @Output()
-    formSubmitted: EventEmitter<AttachmentUnitFormData> = new EventEmitter<AttachmentUnitFormData>();
-    form: FormGroup;
-
-    @Input()
-    hasCancelButton: boolean;
-    @Output()
-    onCancel: EventEmitter<any> = new EventEmitter<any>();
-
-    faTimes = faTimes;
+    @Input() hasCancelButton: boolean;
+    @Output() onCancel: EventEmitter<any> = new EventEmitter<any>();
 
     // have to handle the file input as a special case at is not part of the reactive form
     @ViewChild('fileInput', { static: false })
     fileInput: ElementRef;
     file: File;
-    fileName?: string;
     fileInputTouched = false;
-    isFileTooBig: boolean;
 
-    constructor(
-        private translateService: TranslateService,
-        private fb: FormBuilder,
-    ) {}
+    fileName = signal<string | undefined>(undefined);
+    isFileTooBig = signal<boolean>(false);
+
+    private readonly formBuilder = inject(FormBuilder);
+    form: FormGroup = this.formBuilder.group({
+        name: [undefined as string | undefined, [Validators.required, Validators.maxLength(255)]],
+        description: [undefined as string | undefined, [Validators.maxLength(1000)]],
+        releaseDate: [undefined as dayjs.Dayjs | undefined],
+        version: [{ value: 1, disabled: true }],
+        updateNotificationText: [undefined as string | undefined, [Validators.maxLength(1000)]],
+        competencyLinks: [undefined as CompetencyLectureUnitLink[] | undefined],
+    });
+    private readonly statusChanges = toSignal(this.form.statusChanges ?? 'INVALID');
+
+    isFormValid = computed(() => {
+        return (this.statusChanges() === 'VALID' || this.fileName()) && !this.isFileTooBig();
+    });
 
     ngOnChanges(): void {
-        this.initializeForm();
         if (this.isEditMode && this.formData) {
             this.setFormValues(this.formData);
         }
     }
 
-    ngOnInit(): void {
-        this.initializeForm();
-    }
-
-    private initializeForm() {
-        if (this.form) {
-            return;
-        }
-        this.form = this.fb.group({
-            name: [undefined as string | undefined, [Validators.required, Validators.maxLength(255)]],
-            description: [undefined as string | undefined, [Validators.maxLength(1000)]],
-            releaseDate: [undefined as dayjs.Dayjs | undefined],
-            version: [{ value: 1, disabled: true }],
-            updateNotificationText: [undefined as string | undefined, [Validators.maxLength(1000)]],
-            competencyLinks: [undefined as CompetencyLectureUnitLink[] | undefined],
-        });
-    }
-
     onFileChange(event: Event): void {
         const input = event.target as HTMLInputElement;
         if (!input.files?.length) {
             return;
         }
         this.file = input.files[0];
-        this.fileName = this.file.name;
+        this.fileName.set(this.file.name);
         // automatically set the name in case it is not yet specified
         if (this.form && (this.nameControl?.value == undefined || this.nameControl?.value == '')) {
             this.form.patchValue({
                 // without extension
                 name: this.file.name.replace(/\.[^/.]+$/, ''),
             });
         }
-        this.isFileTooBig = this.file.size > MAX_FILE_SIZE;
+        this.isFileTooBig.set(this.file.size > MAX_FILE_SIZE);
     }
 
     get nameControl() {
@@ -131,16 +113,12 @@ export class AttachmentUnitFormComponent implements OnInit, OnChanges {
         return this.form.get('version');
     }
 
-    get isSubmitPossible() {
-        return !(this.form.invalid || !this.fileName) && !this.isFileTooBig;
-    }
-
     submitForm() {
         const formValue = this.form.value;
         const formProperties: FormProperties = { ...formValue };
         const fileProperties: FileProperties = {
             file: this.file,
-            fileName: this.fileName,
+            fileName: this.fileName(),
         };
 
         this.formSubmitted.emit({
@@ -157,7 +135,7 @@ export class AttachmentUnitFormComponent implements OnInit, OnChanges {
             this.file = formData?.fileProperties?.file;
         }
         if (formData?.fileProperties?.fileName) {
-            this.fileName = formData?.fileProperties?.fileName;
+            this.fileName.set(formData?.fileProperties?.fileName);
         }
     }
 

src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/create-exercise-unit/create-exercise-unit.component.ts

@@ -18,25 +18,18 @@ import { faSort, faTimes } from '@fortawesome/free-solid-svg-icons';
     styleUrls: ['./create-exercise-unit.component.scss'],
 })
 export class CreateExerciseUnitComponent implements OnInit {
-    @Input()
-    hasCancelButton: boolean;
-    @Input()
-    hasCreateExerciseButton: boolean;
-    @Input()
-    shouldNavigateOnSubmit = true;
-    @Input()
-    lectureId: number | undefined;
-    @Input()
-    courseId: number | undefined;
-    @Input()
-    currentWizardStep: number;
+    protected readonly faTimes = faTimes;
+    protected readonly faSort = faSort;
 
-    @Output()
-    onCancel: EventEmitter<any> = new EventEmitter<any>();
-    @Output()
-    onExerciseUnitCreated: EventEmitter<any> = new EventEmitter<any>();
+    @Input() hasCancelButton: boolean;
+    @Input() hasCreateExerciseButton: boolean;
+    @Input() shouldNavigateOnSubmit = true;
+    @Input() lectureId: number | undefined;
+    @Input() courseId: number | undefined;
+    @Input() currentWizardStep: number;
 
-    faTimes = faTimes;
+    @Output() onCancel: EventEmitter<any> = new EventEmitter<any>();
+    @Output() onExerciseUnitCreated: EventEmitter<any> = new EventEmitter<any>();
 
     predicate = 'type';
     reverse = false;
@@ -45,9 +38,6 @@ export class CreateExerciseUnitComponent implements OnInit {
     exercisesAvailableForUnitCreation: Exercise[] = [];
     exercisesToCreateUnitFor: Exercise[] = [];
 
-    // Icons
-    faSort = faSort;
-
     constructor(
         private activatedRoute: ActivatedRoute,
         private router: Router,

src/main/webapp/app/shared/constants/file-extensions.constants.ts

@@ -45,6 +45,10 @@ export const UPLOAD_FILE_EXTENSIONS = [
     'odf',
 ];
 
+export const ALLOWED_FILE_EXTENSIONS_HUMAN_READABLE = UPLOAD_FILE_EXTENSIONS.join(', ');
+// The list of file extensions for the "accept" attribute of the file input field
+export const ACCEPTED_FILE_EXTENSIONS_FILE_BROWSER = UPLOAD_FILE_EXTENSIONS.map((ext) => '.' + ext).join(',');
+
 /**
  * The list of file extensions that are readable in a file editor.
  * Extensions are case-sensitive.

src/test/javascript/spec/component/lecture-unit/attachment-unit/attachment-unit-form.component.spec.ts

@@ -1,12 +1,11 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
-import { TranslateService } from '@ngx-translate/core';
 import { AttachmentUnitFormComponent, AttachmentUnitFormData } from 'app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component';
 import { FormDateTimePickerComponent } from 'app/shared/date-time-picker/date-time-picker.component';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import dayjs from 'dayjs/esm';
-import { MockComponent, MockDirective, MockPipe, MockProviders } from 'ng-mocks';
+import { MockComponent, MockDirective, MockPipe } from 'ng-mocks';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { CompetencySelectionComponent } from 'app/shared/competency-selection/competency-selection.component';
 import { MAX_FILE_SIZE } from 'app/shared/constants/input.constants';
@@ -25,7 +24,6 @@ describe('AttachmentUnitFormComponent', () => {
                 MockComponent(FaIconComponent),
                 MockComponent(CompetencySelectionComponent),
             ],
-            providers: [MockProviders(TranslateService)],
             schemas: [],
         })
             .compileComponents()
@@ -71,7 +69,7 @@ describe('AttachmentUnitFormComponent', () => {
         expect(attachmentUnitFormComponent.descriptionControl?.value).toEqual(formData.formProperties.description);
         expect(attachmentUnitFormComponent.versionControl?.value).toEqual(formData.formProperties.version);
         expect(attachmentUnitFormComponent.updateNotificationTextControl?.value).toEqual(formData.formProperties.updateNotificationText);
-        expect(attachmentUnitFormComponent.fileName).toEqual(formData.fileProperties.fileName);
+        expect(attachmentUnitFormComponent.fileName()).toEqual(formData.fileProperties.fileName);
         expect(attachmentUnitFormComponent.file).toEqual(formData.fileProperties.file);
     });
     it('should submit valid form', () => {
@@ -90,7 +88,7 @@ describe('AttachmentUnitFormComponent', () => {
         const fakeFile = new File([''], 'Test-File.pdf', { type: 'application/pdf' });
         attachmentUnitFormComponent.file = fakeFile;
         const exampleFileName = 'lorem Ipsum';
-        attachmentUnitFormComponent.fileName = exampleFileName;
+        attachmentUnitFormComponent.fileName.set(exampleFileName);
 
         attachmentUnitFormComponentFixture.detectChanges();
         expect(attachmentUnitFormComponent.form.valid).toBeTrue();
@@ -132,7 +130,7 @@ describe('AttachmentUnitFormComponent', () => {
         attachmentUnitFormComponent.updateNotificationTextControl!.setValue(exampleUpdateNotificationText);
         const fakeFile = new File([''], 'Test-File.pdf', { type: 'application/pdf' });
         attachmentUnitFormComponent.file = fakeFile;
-        attachmentUnitFormComponent.fileName = 'lorem Ipsum';
+        attachmentUnitFormComponent.fileName.set('lorem Ipsum');
 
         expect(attachmentUnitFormComponent.form.invalid).toBeTrue();
         const submitFormSpy = jest.spyOn(attachmentUnitFormComponent, 'submitForm');
@@ -166,7 +164,7 @@ describe('AttachmentUnitFormComponent', () => {
         attachmentUnitFormComponentFixture.detectChanges();
 
         const submitButton = attachmentUnitFormComponentFixture.debugElement.nativeElement.querySelector('#submitButton');
-        expect(attachmentUnitFormComponent.isFileTooBig).toBeTrue();
+        expect(attachmentUnitFormComponent.isFileTooBig()).toBeTrue();
         expect(submitButton.disabled).toBeTrue();
     });
 });