From 8552ee47d3028959d152a17283ae7045afd384a6 Mon Sep 17 00:00:00 2001 From: Danial Arbabi Date: Thu, 21 Nov 2024 19:20:11 +0100 Subject: [PATCH 01/10] Added varying tooltip to submit button --- .../attachment-unit-form.component.html | 31 ++++++++++++++----- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html index 7c8434dc9023..333c89c701cd 100644 --- a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html +++ b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html @@ -2,7 +2,7 @@
- +
- - @if (hasCancelButton()) { - - } + @if (hasCancelButton()) { + + } +
From 8580d8b5811adbada49b4acca2ac1e8f2fe3722e Mon Sep 17 00:00:00 2001 From: Danial Arbabi Date: Sun, 24 Nov 2024 15:35:11 +0100 Subject: [PATCH 02/10] Refactor: Moved logic from html to ts component --- .../attachment-unit-form.component.html | 15 +------------ .../attachment-unit-form.component.ts | 21 ++++++++++++++++++- 2 files changed, 21 insertions(+), 15 deletions(-) diff --git a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html index 333c89c701cd..830f28a68685 100644 --- a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html +++ b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html @@ -105,20 +105,7 @@
- + diff --git a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts index 1bc42524d04b..489ce70d35ab 100644 --- a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts +++ b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts @@ -7,6 +7,7 @@ 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 { FormDateTimePickerComponent } from 'app/shared/date-time-picker/date-time-picker.component'; +import { TranslateService } from '@ngx-translate/core'; export interface AttachmentUnitFormData { formProperties: FormProperties; @@ -59,6 +60,7 @@ export class AttachmentUnitFormComponent implements OnChanges { fileName = signal(undefined); isFileTooBig = signal(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)]], @@ -71,7 +73,7 @@ export class AttachmentUnitFormComponent implements OnChanges { private readonly statusChanges = toSignal(this.form.statusChanges ?? 'INVALID'); isFormValid = computed(() => { - return (this.statusChanges() === 'VALID' || this.fileName()) && !this.isFileTooBig() && this.datePickerComponent()?.isValid(); + return this.statusChanges() === 'VALID' && !this.isFileTooBig() && this.nameControl?.value != '' && this.fileName(); }); ngOnChanges(): void { @@ -97,6 +99,23 @@ export class AttachmentUnitFormComponent implements OnChanges { this.isFileTooBig.set(this.file.size > MAX_FILE_SIZE); } + get tooltipText(): string | null { + if (!this.fileInputTouched && this.nameControl?.invalid) { + return ( + this.translateService.instant('artemisApp.attachmentUnit.createAttachmentUnit.nameRequiredValidationError') + + ' ' + + this.translateService.instant('artemisApp.attachmentUnit.createAttachmentUnit.fileRequiredValidationError') + ); + } + if (!this.fileInputTouched) { + return this.translateService.instant('artemisApp.attachmentUnit.createAttachmentUnit.fileRequiredValidationError'); + } + if (this.nameControl?.invalid) { + return this.translateService.instant('artemisApp.attachmentUnit.createAttachmentUnit.nameRequiredValidationError'); + } + return null; + } + get nameControl() { return this.form.get('name'); } From 3e91727ab0a97b063ebe6ad41344ee36ee0c381d Mon Sep 17 00:00:00 2001 From: Danial Arbabi Date: Sun, 24 Nov 2024 15:45:02 +0100 Subject: [PATCH 03/10] Enable tooltip on whole button --- .../attachment-unit-form/attachment-unit-form.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html index 830f28a68685..24f23aa70d3d 100644 --- a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html +++ b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html @@ -105,7 +105,7 @@
- + From 7a22b78c9bf5d9fd382f96c858c54612755f3a1c Mon Sep 17 00:00:00 2001 From: Danial Arbabi Date: Sun, 24 Nov 2024 15:46:08 +0100 Subject: [PATCH 04/10] Remove duplicate file to big message --- .../attachment-unit-form/attachment-unit-form.component.html | 1 - 1 file changed, 1 deletion(-) diff --git a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html index 24f23aa70d3d..aa6abb07f540 100644 --- a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html +++ b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html @@ -63,7 +63,6 @@ @if (isFileTooBig()) {
{{ 'artemisApp.attachmentUnit.createAttachmentUnit.fileTooBig' | artemisTranslate }} - {{ 'artemisApp.attachmentUnit.createAttachmentUnit.fileLimitation' | artemisTranslate }}
} @if (!fileName() && fileInputTouched) { From 359c500e2b545ebbaabbd40ae6aec6b41301c520 Mon Sep 17 00:00:00 2001 From: Danial Arbabi Date: Sun, 24 Nov 2024 16:29:50 +0100 Subject: [PATCH 05/10] Added combined error message to lectureUnit translation --- .../attachment-unit-form.component.ts | 9 ++++----- src/main/webapp/i18n/de/lectureUnit.json | 1 + src/main/webapp/i18n/en/lectureUnit.json | 1 + 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts index 489ce70d35ab..55e9bddb1191 100644 --- a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts +++ b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts @@ -100,16 +100,15 @@ export class AttachmentUnitFormComponent implements OnChanges { } get tooltipText(): string | null { + // Both name and file are invalid if (!this.fileInputTouched && this.nameControl?.invalid) { - return ( - this.translateService.instant('artemisApp.attachmentUnit.createAttachmentUnit.nameRequiredValidationError') + - ' ' + - this.translateService.instant('artemisApp.attachmentUnit.createAttachmentUnit.fileRequiredValidationError') - ); + 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'); } diff --git a/src/main/webapp/i18n/de/lectureUnit.json b/src/main/webapp/i18n/de/lectureUnit.json index 2ed9397e04ff..4e8d8efa8002 100644 --- a/src/main/webapp/i18n/de/lectureUnit.json +++ b/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)", diff --git a/src/main/webapp/i18n/en/lectureUnit.json b/src/main/webapp/i18n/en/lectureUnit.json index d54a06f188b1..8513f82b8306 100644 --- a/src/main/webapp/i18n/en/lectureUnit.json +++ b/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)", From 4db4fc53a6e63bfe7c56dfee88f5229a381c5c8f Mon Sep 17 00:00:00 2001 From: Danial Arbabi Date: Sun, 24 Nov 2024 17:07:49 +0100 Subject: [PATCH 06/10] Usage of strict equality for consistency in condition --- .../attachment-unit-form/attachment-unit-form.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts index 55e9bddb1191..da8d1558e219 100644 --- a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts +++ b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts @@ -73,7 +73,7 @@ export class AttachmentUnitFormComponent implements OnChanges { private readonly statusChanges = toSignal(this.form.statusChanges ?? 'INVALID'); isFormValid = computed(() => { - return this.statusChanges() === 'VALID' && !this.isFileTooBig() && this.nameControl?.value != '' && this.fileName(); + return this.statusChanges() === 'VALID' && !this.isFileTooBig() && this.nameControl?.value !== '' && this.fileName(); }); ngOnChanges(): void { From 46271d051da6d03fedf73a139127477969dd9ead Mon Sep 17 00:00:00 2001 From: Laxer Date: Fri, 6 Dec 2024 18:09:12 +0100 Subject: [PATCH 07/10] Fix grammar mistake in comment --- .../attachment-unit-form/attachment-unit-form.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts index da8d1558e219..77739dce8704 100644 --- a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts +++ b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts @@ -51,7 +51,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; From d3a99cba05615122e88b3a6274bc8ae632f32a77 Mon Sep 17 00:00:00 2001 From: Laxer Date: Fri, 6 Dec 2024 18:10:29 +0100 Subject: [PATCH 08/10] Add name signal and refactor tooltipText --- .../attachment-unit-form.component.html | 2 +- .../attachment-unit-form.component.ts | 22 +++++++++---------- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html index aa6abb07f540..f658308506ef 100644 --- a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html +++ b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html @@ -104,7 +104,7 @@
- + diff --git a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts index 77739dce8704..ac170ca6a3f4 100644 --- a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts +++ b/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 { of } from 'rxjs'; import { FormDateTimePickerComponent } from 'app/shared/date-time-picker/date-time-picker.component'; import { TranslateService } from '@ngx-translate/core'; @@ -71,9 +72,9 @@ export class AttachmentUnitFormComponent implements OnChanges { 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.isFileTooBig() && this.nameControl?.value !== '' && this.fileName(); + return this.statusChanges() === 'VALID' && !this.isFileTooBig() && this.name() && this.fileName(); }); ngOnChanges(): void { @@ -90,7 +91,7 @@ export class AttachmentUnitFormComponent implements OnChanges { this.file = input.files[0]; 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 == '')) { + if (this.form && !this.name()) { this.form.patchValue({ // without extension name: this.file.name.replace(/\.[^/.]+$/, ''), @@ -99,21 +100,18 @@ 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) { + tooltipText = computed(() => { + if (!this.fileName() && !this.name()) { return this.translateService.instant('artemisApp.attachmentUnit.createAttachmentUnit.nameAndFileRequiredValidationError'); } - // Only file is invalid - if (!this.fileInputTouched) { + if (!this.fileName()) { return this.translateService.instant('artemisApp.attachmentUnit.createAttachmentUnit.fileRequiredValidationError'); } - // Only name is invalid - if (this.nameControl?.invalid) { + if (!this.name()) { return this.translateService.instant('artemisApp.attachmentUnit.createAttachmentUnit.nameRequiredValidationError'); } - return null; - } + return undefined; + }); get nameControl() { return this.form.get('name'); From 91c466f21e4421fad7fd46e84e1704ecf94c4266 Mon Sep 17 00:00:00 2001 From: Danial Arbabi Date: Fri, 6 Dec 2024 18:54:53 +0100 Subject: [PATCH 09/10] Tracking of new language signal to compute new tooltip for different language --- .../attachment-unit-form/attachment-unit-form.component.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts index ac170ca6a3f4..92f071e8a537 100644 --- a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts +++ b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts @@ -6,7 +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 { of } from 'rxjs'; +import { map, of } from 'rxjs'; import { FormDateTimePickerComponent } from 'app/shared/date-time-picker/date-time-picker.component'; import { TranslateService } from '@ngx-translate/core'; @@ -83,6 +83,8 @@ 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) { @@ -101,6 +103,7 @@ export class AttachmentUnitFormComponent implements OnChanges { } tooltipText = computed(() => { + this.currentLanguage(); if (!this.fileName() && !this.name()) { return this.translateService.instant('artemisApp.attachmentUnit.createAttachmentUnit.nameAndFileRequiredValidationError'); } From 5f7febaf17ac95f55b4055c3dc7aae4789107a71 Mon Sep 17 00:00:00 2001 From: Laxer Date: Sat, 11 Jan 2025 15:59:21 +0100 Subject: [PATCH 10/10] Integrate fileName into FormGroup --- .../attachment-unit-form.component.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts index 92f071e8a537..300fb97fb844 100644 --- a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts +++ b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.ts @@ -65,6 +65,7 @@ export class AttachmentUnitFormComponent implements OnChanges { 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 }], @@ -74,7 +75,7 @@ export class AttachmentUnitFormComponent implements OnChanges { private readonly statusChanges = toSignal(this.form.statusChanges ?? 'INVALID'); private readonly name = toSignal(this.nameControl?.valueChanges ?? of('')); isFormValid = computed(() => { - return this.statusChanges() === 'VALID' && !this.isFileTooBig() && this.name() && this.fileName(); + return this.statusChanges() === 'VALID' && !this.isFileTooBig(); }); ngOnChanges(): void { @@ -92,6 +93,9 @@ export class AttachmentUnitFormComponent implements OnChanges { } 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.name()) { this.form.patchValue({ @@ -159,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, + }); } }