Lectures: Disable submit button on invalid form and add tooltip

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

@@ -2,7 +2,7 @@
     <div class="col-12">
         <form [formGroup]="form" (ngSubmit)="submitForm()">
             <div class="form-group">
-                <label for="name">{{ 'artemisApp.attachmentUnit.createAttachmentUnit.name' | artemisTranslate }} *</label>
+                <label for="name">{{ 'artemisApp.attachmentUnit.createAttachmentUnit.name' | artemisTranslate }}*</label>
                 <input
                     type="text"
                     class="form-control"
@@ -63,7 +63,6 @@
                 @if (isFileTooBig()) {
                     <div class="alert alert-danger">
                         {{ 'artemisApp.attachmentUnit.createAttachmentUnit.fileTooBig' | artemisTranslate }}
-                        {{ 'artemisApp.attachmentUnit.createAttachmentUnit.fileLimitation' | artemisTranslate }}
                     </div>
                 }
                 @if (!fileName() && fileInputTouched) {
@@ -105,14 +104,16 @@
             </div>
             <div class="row">
                 <div class="col-12">
-                    <button id="submitButton" class="btn btn-primary" type="submit" [disabled]="!isFormValid()">
-                        <span jhiTranslate="entity.action.submit"></span>
-                    </button>
-                    @if (hasCancelButton()) {
-                        <button type="button" (click)="cancelForm()" class="btn btn-default">
-                            <fa-icon [icon]="faTimes" />&nbsp;<span jhiTranslate="entity.action.cancel"></span>
+                    <span [ngbTooltip]="tooltipText()" container="body" class="d-inline-block">
+                        <button id="submitButton" class="btn btn-primary" type="submit" [disabled]="!isFormValid()">
+                            <span jhiTranslate="entity.action.submit"></span>
                         </button>
-                    }
+                        @if (hasCancelButton()) {
+                            <button type="button" (click)="cancelForm()" class="btn btn-default">
+                                <fa-icon [icon]="faTimes" />&nbsp;<span jhiTranslate="entity.action.cancel"></span>
+                            </button>
+                        }
+                    </span>
                 </div>
             </div>
         </form>

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

@@ -6,7 +6,9 @@ import { ACCEPTED_FILE_EXTENSIONS_FILE_BROWSER, ALLOWED_FILE_EXTENSIONS_HUMAN_RE
 import { CompetencyLectureUnitLink } from 'app/entities/competency.model';
 import { MAX_FILE_SIZE } from 'app/shared/constants/input.constants';
 import { toSignal } from '@angular/core/rxjs-interop';
+import { map, of } from 'rxjs';
 import { FormDateTimePickerComponent } from 'app/shared/date-time-picker/date-time-picker.component';
+import { TranslateService } from '@ngx-translate/core';
 
 export interface AttachmentUnitFormData {
     formProperties: FormProperties;
@@ -50,7 +52,7 @@ export class AttachmentUnitFormComponent implements OnChanges {
 
     datePickerComponent = viewChild(FormDateTimePickerComponent);
 
-    // have to handle the file input as a special case at is not part of the reactive form
+    // have to handle the file input as a special case, as it is not part of the reactive form
     @ViewChild('fileInput', { static: false })
     fileInput: ElementRef;
     file: File;
@@ -59,19 +61,21 @@ export class AttachmentUnitFormComponent implements OnChanges {
     fileName = signal<string | undefined>(undefined);
     isFileTooBig = signal<boolean>(false);
 
+    private readonly translateService = inject(TranslateService);
     private readonly formBuilder = inject(FormBuilder);
     form: FormGroup = this.formBuilder.group({
         name: [undefined as string | undefined, [Validators.required, Validators.maxLength(255)]],
+        fileName: [undefined as string | undefined, [Validators.required]],
         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');
-
+    private readonly name = toSignal(this.nameControl?.valueChanges ?? of(''));
     isFormValid = computed(() => {
-        return (this.statusChanges() === 'VALID' || this.fileName()) && !this.isFileTooBig() && this.datePickerComponent()?.isValid();
+        return this.statusChanges() === 'VALID' && !this.isFileTooBig();
     });
 
     ngOnChanges(): void {
@@ -80,15 +84,20 @@ export class AttachmentUnitFormComponent implements OnChanges {
         }
     }
 
+    private readonly currentLanguage = toSignal(this.translateService.onLangChange.pipe(map((event) => event.lang)));
+
     onFileChange(event: Event): void {
         const input = event.target as HTMLInputElement;
         if (!input.files?.length) {
             return;
         }
         this.file = input.files[0];
         this.fileName.set(this.file.name);
+        this.form.patchValue({
+            fileName: this.file.name,
+        });
         // automatically set the name in case it is not yet specified
-        if (this.form && (this.nameControl?.value == undefined || this.nameControl?.value == '')) {
+        if (this.form && !this.name()) {
             this.form.patchValue({
                 // without extension
                 name: this.file.name.replace(/\.[^/.]+$/, ''),
@@ -97,6 +106,20 @@ export class AttachmentUnitFormComponent implements OnChanges {
         this.isFileTooBig.set(this.file.size > MAX_FILE_SIZE);
     }
 
+    tooltipText = computed(() => {
+        this.currentLanguage();
+        if (!this.fileName() && !this.name()) {
+            return this.translateService.instant('artemisApp.attachmentUnit.createAttachmentUnit.nameAndFileRequiredValidationError');
+        }
+        if (!this.fileName()) {
+            return this.translateService.instant('artemisApp.attachmentUnit.createAttachmentUnit.fileRequiredValidationError');
+        }
+        if (!this.name()) {
+            return this.translateService.instant('artemisApp.attachmentUnit.createAttachmentUnit.nameRequiredValidationError');
+        }
+        return undefined;
+    });
+
     get nameControl() {
         return this.form.get('name');
     }
@@ -140,6 +163,9 @@ export class AttachmentUnitFormComponent implements OnChanges {
         }
         if (formData?.fileProperties?.fileName) {
             this.fileName.set(formData?.fileProperties?.fileName);
+            this.form.patchValue({
+                fileName: formData?.fileProperties?.fileName,
+            });
         }
     }
 

src/main/webapp/i18n/de/lectureUnit.json

@@ -173,6 +173,7 @@
                 "file": "Datei",
                 "version": "Version",
                 "fileRequiredValidationError": "Du musst eine Datei zum Uploaden auswählen.",
+                "nameAndFileRequiredValidationError": "Der Name ist ein Pflichtfeld. Du musst eine Datei zum Uploaden auswählen.",
                 "chooseFile": "Datei auswählen",
                 "fileTooBig": "Die Datei ist zu groß! Die maximale Dateigröße beträgt 20 MB.",
                 "fileLimitation": "(max. Größe 20 MB)",

src/main/webapp/i18n/en/lectureUnit.json

@@ -173,6 +173,7 @@
                 "file": "File",
                 "version": "Version",
                 "fileRequiredValidationError": "You must select a file to upload.",
+                "nameAndFileRequiredValidationError": "Name is required. You must select a file to upload.",
                 "chooseFile": "Choose File",
                 "fileTooBig": "File is too big! The maximum file size is 20 MB.",
                 "fileLimitation": "(max. size 20 MB)",