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,6 +6,7 @@ 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 { TranslateService } from '@ngx-translate/core';
 
 export interface AttachmentUnitFormData {
     formProperties: FormProperties;
@@ -56,6 +57,7 @@ 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)]],
@@ -68,7 +70,7 @@ export class AttachmentUnitFormComponent implements OnChanges {
     private readonly statusChanges = toSignal(this.form.statusChanges ?? 'INVALID');
 
     isFormValid = computed(() => {
-        return (this.statusChanges() === 'VALID' || this.fileName()) && !this.isFileTooBig();
+        return this.statusChanges() === 'VALID' && !this.isFileTooBig() && this.nameControl?.value !== '' && this.fileName();
     });
 
     ngOnChanges(): void {
@@ -94,6 +96,22 @@ export class AttachmentUnitFormComponent implements OnChanges {
         this.isFileTooBig.set(this.file.size > MAX_FILE_SIZE);
     }
 
+    get tooltipText(): string | null {
+        // Both name and file are invalid
+        if (!this.fileInputTouched && this.nameControl?.invalid) {
+            return this.translateService.instant('artemisApp.attachmentUnit.createAttachmentUnit.nameAndFileRequiredValidationError');
+        }
+        // Only file is invalid
+        if (!this.fileInputTouched) {
+            return this.translateService.instant('artemisApp.attachmentUnit.createAttachmentUnit.fileRequiredValidationError');
+        }
+        // Only name is invalid
+        if (this.nameControl?.invalid) {
+            return this.translateService.instant('artemisApp.attachmentUnit.createAttachmentUnit.nameRequiredValidationError');
+        }
+        return null;
+    }
+
     get nameControl() {
         return this.form.get('name');
     }

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)",