From c6ce54cdeaa8650f7c5bda44c9d4f9ed62a15d14 Mon Sep 17 00:00:00 2001
From: Florian Glombik <63976129+florian-glombik@users.noreply.github.com>
Date: Sat, 30 Nov 2024 22:41:26 +0100
Subject: [PATCH] Lectures: Improve lecture attachment validation (#9893)

---
 .../lecture-attachments.component.html        |  50 ++++---
 .../lecture-attachments.component.scss        |   4 +
 .../lecture/lecture-attachments.component.ts  | 124 +++++++++++++-----
 .../lecture-attachments.component.spec.ts     |  82 +++++++-----
 4 files changed, 169 insertions(+), 91 deletions(-)

diff --git a/src/main/webapp/app/lecture/lecture-attachments.component.html b/src/main/webapp/app/lecture/lecture-attachments.component.html
index 6192f270d64e..82050a7c3efe 100644
--- a/src/main/webapp/app/lecture/lecture-attachments.component.html
+++ b/src/main/webapp/app/lecture/lecture-attachments.component.html
@@ -44,7 +44,6 @@ <h4 jhiTranslate="artemisApp.lecture.attachments.attachments"></h4>
                                             <th><span jhiTranslate="global.field.id"></span></th>
                                             <th><span jhiTranslate="artemisApp.lecture.attachments.name"></span></th>
                                             <th><span jhiTranslate="artemisApp.lecture.attachments.type"></span></th>
-                                            <th><span jhiTranslate="artemisApp.lecture.attachments.link"></span></th>
                                             <th><span jhiTranslate="artemisApp.lecture.attachments.releaseDate"></span></th>
                                             <th><span jhiTranslate="artemisApp.lecture.attachments.uploadDate"></span></th>
                                             <th><span jhiTranslate="artemisApp.lecture.attachments.version"></span></th>
@@ -53,25 +52,25 @@ <h4 jhiTranslate="artemisApp.lecture.attachments.attachments"></h4>
                                     </thead>
                                     <tbody>
                                         @for (attachment of attachments; track trackId($index, attachment)) {
-                                            <tr [ngClass]="{ 'edit-overlay-container': attachmentToBeCreated?.id === attachment?.id }">
+                                            <tr [ngClass]="{ 'edit-overlay-container': attachmentToBeUpdatedOrCreated()?.id === attachment?.id }">
                                                 <td>
                                                     {{ attachment.id }}
                                                 </td>
-                                                <td>{{ attachment.name }}</td>
-                                                <td>{{ attachment.attachmentType }}</td>
                                                 <td>
                                                     @if (!isDownloadingAttachmentLink) {
                                                         <a class="text-primary" (click)="downloadAttachment(attachment.link || '')">
                                                             {{ attachment.name }}
                                                         </a>
-                                                    }
-                                                    @if (isDownloadingAttachmentLink === attachment.link) {
+                                                    } @else if (isDownloadingAttachmentLink === attachment.link) {
                                                         <a class="text-primary">
                                                             <fa-icon [icon]="faSpinner" animation="spin" />
                                                             {{ 'artemisApp.courseOverview.lectureDetails.isDownloading' | artemisTranslate }}
                                                         </a>
+                                                    } @else {
+                                                        {{ attachment.name }}
                                                     }
                                                 </td>
+                                                <td>{{ attachment.attachmentType }}</td>
                                                 <td>{{ attachment.releaseDate | artemisDate }}</td>
                                                 <td>{{ attachment.uploadDate | artemisDate }}</td>
                                                 <td>
@@ -91,7 +90,7 @@ <h4 jhiTranslate="artemisApp.lecture.attachments.attachments"></h4>
                                                             </button>
                                                         }
                                                         <button
-                                                            [disabled]="attachmentToBeCreated?.id === attachment?.id"
+                                                            [disabled]="attachmentToBeUpdatedOrCreated()?.id === attachment?.id"
                                                             type="button"
                                                             (click)="editAttachment(attachment)"
                                                             class="btn btn-primary btn-sm me-1"
@@ -102,7 +101,7 @@ <h4 jhiTranslate="artemisApp.lecture.attachments.attachments"></h4>
                                                         @if (lecture().isAtLeastInstructor) {
                                                             <button
                                                                 type="button"
-                                                                [disabled]="attachmentToBeCreated?.id === attachment?.id"
+                                                                [disabled]="attachmentToBeUpdatedOrCreated()?.id === attachment?.id"
                                                                 jhiDeleteButton
                                                                 [entityTitle]="attachment?.name || ''"
                                                                 deleteQuestion="artemisApp.attachment.deleteQuestion"
@@ -114,7 +113,7 @@ <h4 jhiTranslate="artemisApp.lecture.attachments.attachments"></h4>
                                                         }
                                                     </div>
                                                 </td>
-                                                @if (attachmentToBeCreated?.id === attachment?.id) {
+                                                @if (attachmentToBeUpdatedOrCreated()?.id === attachment?.id) {
                                                     <div class="edit-overlay" jhiTranslate="artemisApp.lecture.attachments.isBeingEdited"></div>
                                                 }
                                             </tr>
@@ -125,11 +124,11 @@ <h4 jhiTranslate="artemisApp.lecture.attachments.attachments"></h4>
                         }
                     </div>
                 </div>
-                @if (attachmentToBeCreated) {
-                    <div>
+                @if (attachmentToBeUpdatedOrCreated()) {
+                    <form [formGroup]="form">
                         <div class="row">
                             <div class="col-12">
-                                @if (!attachmentToBeCreated.id) {
+                                @if (!attachmentToBeUpdatedOrCreated()!.id) {
                                     <h4 jhiTranslate="artemisApp.lecture.attachments.newAttachment"></h4>
                                 } @else {
                                     <h4 jhiTranslate="artemisApp.lecture.attachments.editAttachment"></h4>
@@ -140,11 +139,11 @@ <h4 jhiTranslate="artemisApp.lecture.attachments.editAttachment"></h4>
                             <div class="col-12 col-md-6">
                                 <div class="form-group">
                                     <label for="attachmentName" jhiTranslate="artemisApp.lecture.attachments.name"></label>
-                                    <input type="text" class="form-control" id="attachmentName" name="attachmentName" [(ngModel)]="attachmentToBeCreated.name" />
+                                    <input type="text" class="form-control" id="attachmentName" name="attachmentName" formControlName="attachmentName" />
                                 </div>
                                 <div class="form-group">
                                     <label
-                                        for="lectureAttachmentInput{{ attachmentToBeCreated.name }}"
+                                        for="lectureAttachmentInput{{ attachmentToBeUpdatedOrCreated()!.name }}"
                                         class="form-control-label"
                                         jhiTranslate="artemisApp.lecture.attachments.file"
                                         >File</label
@@ -158,12 +157,15 @@ <h4 jhiTranslate="artemisApp.lecture.attachments.editAttachment"></h4>
                                         <div class="custom-file overflow-ellipsis">
                                             <input
                                                 #fileInput
-                                                id="lectureAttachmentInput{{ attachmentToBeCreated.name }}"
+                                                id="lectureAttachmentInput{{ attachmentToBeUpdatedOrCreated()!.name }}"
                                                 type="file"
                                                 class="custom-file-input"
                                                 [accept]="acceptedFileExtensionsFileBrowser"
                                                 [placeholder]="'artemisApp.lecture.attachments.chooseFile' | artemisTranslate"
                                                 (change)="setLectureAttachment($event)"
+                                                [class.ng-invalid]="!isFileSelectionValid()"
+                                                [class.invalid-file-input-margin]="!isFileSelectionValid()"
+                                                formControlName="attachmentFileName"
                                                 aria-describedby="fileHelp"
                                             />
                                         </div>
@@ -175,22 +177,17 @@ <h4 jhiTranslate="artemisApp.lecture.attachments.editAttachment"></h4>
                                     }
                                 </div>
                                 <div class="form-group">
-                                    <jhi-date-time-picker
-                                        labelName="{{ 'artemisApp.lecture.attachments.releaseDate' | artemisTranslate }}"
-                                        [(ngModel)]="attachmentToBeCreated.releaseDate"
-                                        name="endDate"
-                                    />
+                                    <jhi-date-time-picker labelName="{{ 'artemisApp.lecture.attachments.releaseDate' | artemisTranslate }}" formControlName="releaseDate" />
                                 </div>
-                                @if (attachmentToBeCreated.id) {
+                                @if (attachmentToBeUpdatedOrCreated()!.id) {
                                     <div class="form-group">
                                         <label for="attachmentName" jhiTranslate="artemisApp.lecture.attachments.notificationText"></label>
                                         <input
                                             type="text"
                                             class="form-control"
                                             id="notificationText"
-                                            name="attachmentName"
+                                            formControlName="notificationText"
                                             [placeholder]="'artemisApp.lecture.attachments.notificationPlaceholder' | artemisTranslate"
-                                            [(ngModel)]="notificationText"
                                         />
                                     </div>
                                 }
@@ -198,7 +195,7 @@ <h4 jhiTranslate="artemisApp.lecture.attachments.editAttachment"></h4>
                         </div>
                         <div class="row">
                             <div class="col-12">
-                                <button id="upload-attachment" type="button" [disabled]="!isSubmitPossible" (click)="saveAttachment()" class="btn btn-primary me-2">
+                                <button id="upload-attachment" type="button" [disabled]="!isFormValid()" (click)="saveAttachment()" class="btn btn-primary me-2">
                                     <fa-icon [icon]="faPaperclip" />&nbsp;
                                     <span jhiTranslate="entity.action.saveAttachment"></span>
                                 </button>
@@ -207,9 +204,8 @@ <h4 jhiTranslate="artemisApp.lecture.attachments.editAttachment"></h4>
                                 </button>
                             </div>
                         </div>
-                    </div>
-                }
-                @if (!attachmentToBeCreated) {
+                    </form>
+                } @else {
                     <div class="row">
                         <div class="col-12">
                             <button type="button" (click)="addAttachment()" class="btn btn-primary" id="add-attachment">
diff --git a/src/main/webapp/app/lecture/lecture-attachments.component.scss b/src/main/webapp/app/lecture/lecture-attachments.component.scss
index 032cd21646d4..942076241dc9 100644
--- a/src/main/webapp/app/lecture/lecture-attachments.component.scss
+++ b/src/main/webapp/app/lecture/lecture-attachments.component.scss
@@ -21,3 +21,7 @@
     pointer-events: none;
     cursor: default;
 }
+
+.invalid-file-input-margin {
+    padding-left: 0.5em;
+}
diff --git a/src/main/webapp/app/lecture/lecture-attachments.component.ts b/src/main/webapp/app/lecture/lecture-attachments.component.ts
index 262bbfe593a5..c49304e3bee7 100644
--- a/src/main/webapp/app/lecture/lecture-attachments.component.ts
+++ b/src/main/webapp/app/lecture/lecture-attachments.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnDestroy, ViewChild, effect, inject, input, signal } from '@angular/core';
+import { Component, ElementRef, OnDestroy, ViewChild, computed, effect, inject, input, signal, viewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
 import { Lecture } from 'app/entities/lecture.model';
@@ -10,6 +10,16 @@ import { AttachmentService } from 'app/lecture/attachment.service';
 import { faEye, faPaperclip, faPencilAlt, faQuestionCircle, faSpinner, faTimes, faTrash } from '@fortawesome/free-solid-svg-icons';
 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';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { FormDateTimePickerComponent } from 'app/shared/date-time-picker/date-time-picker.component';
+
+export interface LectureAttachmentFormData {
+    attachmentName?: string;
+    attachmentFileName?: string;
+    releaseDate?: dayjs.Dayjs;
+    notificationText?: string;
+}
 
 @Component({
     selector: 'jhi-lecture-attachments',
@@ -32,16 +42,19 @@ export class LectureAttachmentsComponent implements OnDestroy {
     private readonly attachmentService = inject(AttachmentService);
     private readonly lectureService = inject(LectureService);
     private readonly fileService = inject(FileService);
+    private readonly formBuilder = inject(FormBuilder);
 
     @ViewChild('fileInput', { static: false }) fileInput: ElementRef;
+    datePickerComponent = viewChild(FormDateTimePickerComponent);
+
     lectureId = input<number>();
     showHeader = input<boolean>(true);
 
     lecture = signal<Lecture>(new Lecture());
     attachments: Attachment[] = [];
-    attachmentToBeCreated?: Attachment;
+    attachmentToBeUpdatedOrCreated = signal<Attachment | undefined>(undefined);
     attachmentBackup?: Attachment;
-    attachmentFile?: File;
+    attachmentFile = signal<File | undefined>(undefined);
     isDownloadingAttachmentLink?: string;
     notificationText?: string;
     erroredFile?: File;
@@ -53,6 +66,20 @@ export class LectureAttachmentsComponent implements OnDestroy {
 
     private routeDataSubscription?: Subscription;
 
+    form: FormGroup = this.formBuilder.group({
+        attachmentName: [undefined as string | undefined, [Validators.required]],
+        attachmentFileName: [undefined as string | undefined],
+        releaseDate: [undefined as dayjs.Dayjs | undefined],
+        notificationText: [undefined as string | undefined],
+    });
+
+    isFileSelectionValid = computed(() => {
+        return this.attachmentFile() || this.attachmentToBeUpdatedOrCreated()?.link;
+    });
+
+    private readonly statusChanges = toSignal(this.form.statusChanges ?? 'INVALID');
+    isFormValid = computed(() => this.statusChanges() === 'VALID' && this.isFileSelectionValid() && this.datePickerComponent()?.isValid());
+
     constructor() {
         effect(
             () => {
@@ -92,43 +119,40 @@ export class LectureAttachmentsComponent implements OnDestroy {
         return attachmentLink.endsWith('.pdf') ?? false;
     }
 
-    get isSubmitPossible(): boolean {
-        return !!(this.attachmentToBeCreated?.name && (this.attachmentFile || this.attachmentToBeCreated?.link));
-    }
-
     addAttachment(): void {
         const newAttachment = new Attachment();
         newAttachment.lecture = this.lecture();
         newAttachment.attachmentType = AttachmentType.FILE;
         newAttachment.version = 0;
         newAttachment.uploadDate = dayjs();
-        this.attachmentToBeCreated = newAttachment;
+        this.attachmentToBeUpdatedOrCreated.set(newAttachment);
     }
 
     /**
      * If there is an attachment to save, it will be created or updated depending on its current state. The file will be automatically provided with the request.
      */
     saveAttachment(): void {
-        if (!this.attachmentToBeCreated) {
+        if (!this.attachmentToBeUpdatedOrCreated()) {
             return;
         }
-        this.attachmentToBeCreated.version!++;
-        this.attachmentToBeCreated.uploadDate = dayjs();
+        this.attachmentToBeUpdatedOrCreated()!.version!++;
+        this.attachmentToBeUpdatedOrCreated()!.uploadDate = dayjs();
+        this.attachmentToBeUpdatedOrCreated()!.name = this.form.value.attachmentName ?? undefined;
+        this.attachmentToBeUpdatedOrCreated()!.releaseDate = this.form.value.releaseDate ?? undefined;
+        this.notificationText = this.form.value.notificationText ?? undefined;
 
-        if (!this.attachmentFile && !this.attachmentToBeCreated.id) {
+        if (!this.attachmentFile() && !this.attachmentToBeUpdatedOrCreated()!.id) {
             return;
         }
 
-        if (this.attachmentToBeCreated.id) {
+        if (this.attachmentToBeUpdatedOrCreated()!.id) {
             const requestOptions = {} as any;
             if (this.notificationText) {
                 requestOptions.notificationText = this.notificationText;
             }
-            this.attachmentService.update(this.attachmentToBeCreated.id, this.attachmentToBeCreated, this.attachmentFile, requestOptions).subscribe({
+            this.attachmentService.update(this.attachmentToBeUpdatedOrCreated()!.id!, this.attachmentToBeUpdatedOrCreated()!, this.attachmentFile(), requestOptions).subscribe({
                 next: (attachmentRes: HttpResponse<Attachment>) => {
-                    this.attachmentFile = undefined;
-                    this.attachmentToBeCreated = undefined;
-                    this.attachmentBackup = undefined;
+                    this.resetAttachmentFormVariables();
                     this.notificationText = undefined;
                     this.attachments = this.attachments.map((el) => {
                         return el.id === attachmentRes.body!.id ? attachmentRes.body! : el;
@@ -137,32 +161,61 @@ export class LectureAttachmentsComponent implements OnDestroy {
                 error: (error: HttpErrorResponse) => this.handleFailedUpload(error),
             });
         } else {
-            this.attachmentService.create(this.attachmentToBeCreated!, this.attachmentFile!).subscribe({
+            this.attachmentService.create(this.attachmentToBeUpdatedOrCreated()!, this.attachmentFile()!).subscribe({
                 next: (attachmentRes: HttpResponse<Attachment>) => {
                     this.attachments.push(attachmentRes.body!);
                     this.lectureService.findWithDetails(this.lecture().id!).subscribe((lectureResponse: HttpResponse<Lecture>) => {
                         this.lecture.set(lectureResponse.body!);
                     });
-                    this.attachmentFile = undefined;
-                    this.attachmentToBeCreated = undefined;
-                    this.attachmentBackup = undefined;
                     this.loadAttachments();
+                    this.resetAttachmentFormVariables();
                 },
                 error: (error: HttpErrorResponse) => this.handleFailedUpload(error),
             });
         }
     }
 
+    private clearFormValues(): void {
+        this.form.reset({
+            attachmentName: undefined,
+            attachmentFileName: undefined,
+            releaseDate: undefined,
+            notificationText: undefined,
+        });
+    }
+
+    private resetAttachmentFormVariables() {
+        this.attachmentFile.set(undefined);
+        this.attachmentToBeUpdatedOrCreated.set(undefined);
+        this.attachmentBackup = undefined;
+        this.clearFormValues();
+    }
+
     private handleFailedUpload(error: HttpErrorResponse): void {
         this.errorMessage = error.message;
-        this.erroredFile = this.attachmentFile;
+        this.erroredFile = this.attachmentFile();
         this.fileInput.nativeElement.value = '';
-        this.attachmentFile = undefined;
+        this.attachmentFile.set(undefined);
         this.resetAttachment();
     }
 
+    private setFormValues(formValues: LectureAttachmentFormData): void {
+        this.form.patchValue(formValues);
+    }
+
     editAttachment(attachment: Attachment): void {
-        this.attachmentToBeCreated = attachment;
+        if (this.fileInput) {
+            this.fileInput.nativeElement.value = '';
+        }
+
+        // attachmentFileName can only be set to an empty string due to security reasons in current angular version (18)
+        this.setFormValues({
+            attachmentName: attachment?.name,
+            releaseDate: dayjs(attachment?.releaseDate),
+            notificationText: this.notificationText,
+        });
+
+        this.attachmentToBeUpdatedOrCreated.set(attachment);
         this.attachmentBackup = Object.assign({}, attachment, {});
     }
 
@@ -180,8 +233,9 @@ export class LectureAttachmentsComponent implements OnDestroy {
         if (this.attachmentBackup) {
             this.resetAttachment();
         }
-        this.attachmentToBeCreated = undefined;
+        this.attachmentToBeUpdatedOrCreated.set(undefined);
         this.erroredFile = undefined;
+        this.resetAttachmentFormVariables();
     }
 
     resetAttachment(): void {
@@ -217,12 +271,20 @@ export class LectureAttachmentsComponent implements OnDestroy {
         if (!input.files?.length) {
             return;
         }
-        const attachmentFile = input.files[0];
-        this.attachmentFile = attachmentFile;
-        this.attachmentToBeCreated!.link = attachmentFile.name;
-        // automatically set the name in case it is not yet specified
-        if (this.attachmentToBeCreated!.name == undefined || this.attachmentToBeCreated!.name == '') {
-            this.attachmentToBeCreated!.name = this.attachmentFile.name.replace(/\.[^/.]+$/, '');
+        const file = input.files[0];
+        this.attachmentFile.set(file);
+        this.attachmentToBeUpdatedOrCreated()!.link = file.name;
+
+        this.attachmentToBeUpdatedOrCreated()!.name = this.form.value.attachmentName ?? undefined;
+        if (!this.attachmentToBeUpdatedOrCreated()!.name) {
+            const derivedFileName = this.determineAttachmentNameBasedOnFileName(file.name);
+            this.attachmentToBeUpdatedOrCreated()!.name = derivedFileName;
+            this.form.patchValue({ attachmentName: derivedFileName });
         }
     }
+
+    private determineAttachmentNameBasedOnFileName(fileName: string): string {
+        const FILE_EXTENSION_REGEX = /\.[^/.]+$/;
+        return fileName.replace(FILE_EXTENSION_REGEX, '');
+    }
 }
diff --git a/src/test/javascript/spec/component/lecture/lecture-attachments.component.spec.ts b/src/test/javascript/spec/component/lecture/lecture-attachments.component.spec.ts
index 83509866f1d9..0ec3ea836ec9 100644
--- a/src/test/javascript/spec/component/lecture/lecture-attachments.component.spec.ts
+++ b/src/test/javascript/spec/component/lecture/lecture-attachments.component.spec.ts
@@ -9,18 +9,19 @@ import { LectureAttachmentsComponent } from 'app/lecture/lecture-attachments.com
 import { AttachmentService } from 'app/lecture/attachment.service';
 import { FileService } from 'app/shared/http/file.service';
 import { HtmlForMarkdownPipe } from 'app/shared/pipes/html-for-markdown.pipe';
-import { MockComponent, MockDirective, MockPipe, MockProvider } from 'ng-mocks';
+import { MockDirective, MockModule, MockPipe, MockProvider } from 'ng-mocks';
 import { MockFileService } from '../../helpers/mocks/service/mock-file.service';
 import { ArtemisDatePipe } from 'app/shared/pipes/artemis-date.pipe';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { FormDateTimePickerComponent } from 'app/shared/date-time-picker/date-time-picker.component';
 import { DeleteButtonDirective } from 'app/shared/delete-dialog/delete-button.directive';
-import { NgModel } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { of, take, throwError } from 'rxjs';
 import { HttpResponse } from '@angular/common/http';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { LectureService } from 'app/lecture/lecture.service';
 import { RouterModule } from '@angular/router';
+import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
 
 describe('LectureAttachmentsComponent', () => {
     let comp: LectureAttachmentsComponent;
@@ -85,12 +86,19 @@ describe('LectureAttachmentsComponent', () => {
 
     beforeEach(() => {
         return TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, MockDirective(NgbTooltip), RouterModule],
+            imports: [
+                ArtemisTestModule,
+                MockDirective(NgbTooltip),
+                RouterModule,
+                ReactiveFormsModule,
+                FormsModule,
+                MockModule(OwlDateTimeModule),
+                MockModule(OwlNativeDateTimeModule),
+            ],
             declarations: [
                 LectureAttachmentsComponent,
-                MockComponent(FormDateTimePickerComponent),
+                FormDateTimePickerComponent,
                 MockDirective(DeleteButtonDirective),
-                MockDirective(NgModel),
                 MockPipe(ArtemisTranslatePipe),
                 MockPipe(HtmlForMarkdownPipe),
                 MockPipe(ArtemisDatePipe),
@@ -140,15 +148,18 @@ describe('LectureAttachmentsComponent', () => {
         fixture.detectChanges();
         jest.spyOn(attachmentService, 'create').mockReturnValue(of(new HttpResponse({ body: newAttachment })));
         const addAttachmentButton = fixture.debugElement.query(By.css('#add-attachment'));
-        expect(comp.attachmentToBeCreated).toBeUndefined();
+        expect(comp.attachmentToBeUpdatedOrCreated()).toBeUndefined();
         expect(addAttachmentButton).not.toBeNull();
         addAttachmentButton.nativeElement.click();
         fixture.detectChanges();
-        comp.attachmentFile = new File([''], 'Test-File.pdf', { type: 'application/pdf' });
+        comp.attachmentFile.set(new File([''], 'Test-File.pdf', { type: 'application/pdf' }));
         const uploadAttachmentButton = fixture.debugElement.query(By.css('#upload-attachment'));
         expect(uploadAttachmentButton).not.toBeNull();
-        expect(comp.attachmentToBeCreated).not.toBeNull();
-        comp.attachmentToBeCreated!.name = 'Test File Name';
+        expect(comp.attachmentToBeUpdatedOrCreated()).not.toBeNull();
+        comp.form.patchValue({
+            attachmentName: 'Test File Name',
+            releaseDate: dayjs(),
+        });
         fixture.detectChanges();
         expect(uploadAttachmentButton.nativeElement.disabled).toBeFalse();
         uploadAttachmentButton.nativeElement.click();
@@ -162,16 +173,19 @@ describe('LectureAttachmentsComponent', () => {
         attachmentServiceCreateStub.mockReturnValue(throwError(() => new Error('File too large')));
         fixture.detectChanges();
         const addAttachmentButton = fixture.debugElement.query(By.css('#add-attachment'));
-        expect(comp.attachmentToBeCreated).toBeUndefined();
+        expect(comp.attachmentToBeUpdatedOrCreated()).toBeUndefined();
         expect(addAttachmentButton).not.toBeNull();
         addAttachmentButton.nativeElement.click();
         fixture.detectChanges();
         const fakeBlob = { name: 'Test-File.pdf', size: 100000000000000000 };
-        comp.attachmentFile = fakeBlob as File;
+        comp.attachmentFile.set(fakeBlob as File);
         const uploadAttachmentButton = fixture.debugElement.query(By.css('#upload-attachment'));
         expect(uploadAttachmentButton).not.toBeNull();
-        expect(comp.attachmentToBeCreated).not.toBeNull();
-        comp.attachmentToBeCreated!.name = 'Test File Name';
+        expect(comp.attachmentToBeUpdatedOrCreated()).not.toBeNull();
+        comp.form.patchValue({
+            attachmentName: 'Test File Name',
+            releaseDate: dayjs(),
+        });
         fixture.detectChanges();
         expect(uploadAttachmentButton.nativeElement.disabled).toBeFalse();
         uploadAttachmentButton.nativeElement.click();
@@ -185,12 +199,12 @@ describe('LectureAttachmentsComponent', () => {
 
     it('should exit saveAttachment', fakeAsync(() => {
         fixture.detectChanges();
-        comp.attachmentToBeCreated = undefined;
+        comp.attachmentToBeUpdatedOrCreated.set(undefined);
         comp.saveAttachment();
         expect(attachmentServiceFindAllByLectureIdStub).toHaveBeenCalledOnce();
         expect(attachmentServiceCreateStub).not.toHaveBeenCalled();
         expect(attachmentServiceUpdateStub).not.toHaveBeenCalled();
-        expect(comp.attachmentToBeCreated).toBeUndefined();
+        expect(comp.attachmentToBeUpdatedOrCreated()).toBeUndefined();
     }));
 
     it('should reset on error for create', fakeAsync(() => {
@@ -204,13 +218,13 @@ describe('LectureAttachmentsComponent', () => {
         } as Attachment;
         const file = new File([''], 'Test-File.pdf', { type: 'application/pdf' });
         comp.fileInput = { nativeElement: { value: 'Test-File.pdf' } };
-        comp.attachmentToBeCreated = attachment;
-        comp.attachmentFile = file;
+        comp.attachmentToBeUpdatedOrCreated.set(attachment);
+        comp.attachmentFile.set(file);
         const attachmentServiceCreateStub = jest.spyOn(attachmentService, 'create').mockReturnValue(throwError(() => new Error(errorMessage)));
         comp.saveAttachment();
         expect(attachmentServiceCreateStub).toHaveBeenCalledExactlyOnceWith(attachment, file);
-        expect(comp.attachmentToBeCreated).toEqual(attachment);
-        expect(comp.attachmentFile).toBeUndefined();
+        expect(comp.attachmentToBeUpdatedOrCreated()).toEqual(attachment);
+        expect(comp.attachmentFile()).toBeUndefined();
         expect(comp.erroredFile).toEqual(file);
         expect(comp.errorMessage).toBe(errorMessage);
         expect(comp.fileInput.nativeElement.value).toBe('');
@@ -234,25 +248,27 @@ describe('LectureAttachmentsComponent', () => {
             const file = new File([''], 'Test-File.pdf', { type: 'application/pdf' });
             if (withFile) {
                 comp.fileInput.nativeElement.value = 'Test-File.pdf';
-                comp.attachmentFile = file;
+                comp.attachmentFile.set(file);
             }
-            comp.attachmentToBeCreated = attachment;
-            comp.notificationText = notification;
+            comp.attachmentToBeUpdatedOrCreated.set(attachment);
             comp.attachmentBackup = backup;
             comp.attachments = [attachment];
 
             // Do change
-            attachment.name = 'New Name';
+            comp.form.patchValue({
+                attachmentName: 'New Name',
+                notificationText: notification,
+            });
 
             const attachmentServiceUpdateStub = jest.spyOn(attachmentService, 'update').mockReturnValue(throwError(() => new Error(errorMessage)));
             comp.saveAttachment();
             expect(attachmentServiceUpdateStub).toHaveBeenCalledExactlyOnceWith(1, attachment, withFile ? file : undefined, { notificationText: notification });
-            expect(comp.attachmentToBeCreated).toEqual(attachment);
+            expect(comp.attachmentToBeUpdatedOrCreated()).toEqual(attachment);
             expect(comp.errorMessage).toBe(errorMessage);
             expect(comp.fileInput.nativeElement.value).toBe('');
             expect(comp.attachments).toEqual([backup]);
             expect(comp.attachmentBackup).toBeUndefined();
-            expect(comp.attachmentFile).toBeUndefined();
+            expect(comp.attachmentFile()).toBeUndefined();
 
             if (withFile) {
                 expect(comp.erroredFile).toEqual(file);
@@ -264,13 +280,13 @@ describe('LectureAttachmentsComponent', () => {
 
     it('should update Attachment', fakeAsync(() => {
         fixture.detectChanges();
-        comp.attachmentToBeCreated = {
+        comp.attachmentToBeUpdatedOrCreated.set({
             id: 1,
             lecture: comp.lecture,
             attachmentType: AttachmentType.FILE,
             version: 1,
             uploadDate: dayjs(),
-        } as Attachment;
+        } as Attachment);
         comp.notificationText = 'wow how did i get here';
         const attachmentServiceUpdateStub = jest.spyOn(attachmentService, 'update').mockReturnValue(
             of(
@@ -294,10 +310,10 @@ describe('LectureAttachmentsComponent', () => {
 
     it('should edit attachment', fakeAsync(() => {
         fixture.detectChanges();
-        comp.attachmentToBeCreated = undefined;
-        expect(comp.attachmentToBeCreated).toBeUndefined();
+        comp.attachmentToBeUpdatedOrCreated.set(undefined);
+        expect(comp.attachmentToBeUpdatedOrCreated()).toBeUndefined();
         comp.editAttachment(newAttachment);
-        expect(comp.attachmentToBeCreated).toBe(newAttachment);
+        expect(comp.attachmentToBeUpdatedOrCreated()).toBe(newAttachment);
         expect(comp.attachmentBackup).toEqual(newAttachment);
         expect(attachmentServiceFindAllByLectureIdStub).toHaveBeenCalledOnce();
     }));
@@ -374,10 +390,10 @@ describe('LectureAttachmentsComponent', () => {
                 files: [myBlob1, myBlob2],
             } as unknown as EventTarget,
         } as Event;
-        comp.attachmentToBeCreated = newAttachment;
+        comp.attachmentToBeUpdatedOrCreated.set(newAttachment);
         comp.setLectureAttachment(object);
-        expect(comp.attachmentFile).toBe(myBlob1);
-        expect(comp.attachmentToBeCreated.link).toBe(myBlob1.name);
+        expect(comp.attachmentFile()).toBe(myBlob1);
+        expect(comp.attachmentToBeUpdatedOrCreated()?.link).toBe(myBlob1.name);
         expect(attachmentServiceFindAllByLectureIdStub).toHaveBeenCalledOnce();
     }));