diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html index d2d92bff8..184941faf 100644 --- a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html +++ b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html @@ -1,7 +1,7 @@
@@ -9,8 +9,8 @@ {{ fileAttribute.label }}: {{ fileAttributeValue || '-' }} @@ -44,7 +44,7 @@
-
+
{ if ( @@ -39,6 +38,23 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr } }), ); + readonly #subscriptions = new Subscription(); + + get isDate(): boolean { + return this.fileAttribute.type === FileAttributeConfigTypes.DATE; + } + + get isNumber(): boolean { + return this.fileAttribute.type === FileAttributeConfigTypes.NUMBER; + } + + get isText(): boolean { + return this.fileAttribute.type === FileAttributeConfigTypes.TEXT; + } + + get fileAttributeValue(): string { + return this.file.fileAttributes.attributeIdToValue[this.fileAttribute.id]; + } constructor( router: Router, @@ -62,15 +78,6 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr this.#subscriptions.add(sub2.subscribe()); } - get isDate(): boolean { - return this.fileAttribute.type === FileAttributeConfigTypes.DATE; - } - - get fileAttributeValue(): string { - return this.file.fileAttributes.attributeIdToValue[this.fileAttribute.id]; - } - - @Debounce(50) @HostListener('document:click') clickOutside() { if (this.isInEditMode && this.closedDatepicker) { @@ -164,16 +171,40 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr config[key] = [dayjs(attrValue, 'YYYY-MM-DD', true).isValid() ? dayjs(attrValue).toDate() : attrValue]; }); return this._formBuilder.group(config, { - validators: control => - (!control.get(this.fileAttribute.id)?.value?.trim().length && !this.fileAttributeValue) || - control.get(this.fileAttribute.id)?.value === this.fileAttributeValue - ? { emptyString: true } - : null, + validators: [this.#checkEmptyInput(), this.#checkDate()], }); } + #checkEmptyInput(): ValidatorFn { + return (control: AbstractControl) => + (this.isText && !control.get(this.fileAttribute.id)?.value?.trim().length && !this.fileAttributeValue) || + control.get(this.fileAttribute.id)?.value === this.fileAttributeValue + ? { emptyString: true } + : null; + } + + #checkDate(): ValidatorFn { + return (control: AbstractControl) => { + const expr = new RegExp('(0?[1-9]|[12][0-9]|3[01])(/|.)(0?[1-9]|1[12])(/|.)\\d{2}'); + return this.isDate + ? (!expr.test(control.get(this.fileAttribute.id)?.value) && control.get(this.fileAttribute.id)?.value?.length) || + this.#formatAttributeValue(control.get(this.fileAttribute.id)?.value) === this.fileAttributeValue + ? { invalidDate: true } + : null + : null; + }; + } + #formatAttributeValue(attrValue) { - return this.isDate ? attrValue && dayjs(attrValue).format('YYYY-MM-DD') : attrValue.trim().replaceAll(/\s\s+/g, ' '); + if (this.isDate) { + return attrValue && dayjs(attrValue).format('YYYY-MM-DD'); + } + + if (this.isText) { + return attrValue.trim().replaceAll(/\s\s+/g, ' '); + } + + return attrValue; } #toggleEdit(): void { @@ -191,9 +222,16 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr } #focusOnEditInput(): void { - setTimeout(() => { - const input = document.getElementById(this.fileAttribute.id); - input?.focus(); - }, 100); + if (this.isDate || this.isText) { + setTimeout(() => { + const input = document.getElementById(this.fileAttribute.id) as HTMLInputElement; + if (!input) { + return; + } + const end = input.value.length; + input.setSelectionRange(end, end); + input.focus(); + }, 100); + } } } diff --git a/apps/red-ui/src/app/modules/shared/CustomDateAdapter.ts b/apps/red-ui/src/app/modules/shared/CustomDateAdapter.ts index 44edb6b08..e2a9337cf 100644 --- a/apps/red-ui/src/app/modules/shared/CustomDateAdapter.ts +++ b/apps/red-ui/src/app/modules/shared/CustomDateAdapter.ts @@ -8,7 +8,7 @@ import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core'; import dayjs, { Dayjs } from 'dayjs'; import utc from 'dayjs/plugin/utc'; import localeData from 'dayjs/plugin/localeData'; -import LocalizedFormat from 'dayjs/plugin/localizedFormat'; +import localizedFormat from 'dayjs/plugin/localizedFormat'; import customParseFormat from 'dayjs/plugin/customParseFormat'; export interface DayJsDateAdapterOptions { @@ -135,8 +135,7 @@ export class CustomDateAdapter extends DateAdapter { } createDate(year: number, month: number, date: number): Dayjs { - const returnDayjs = this._dayJs().set('year', year).set('month', month).set('date', date); - return returnDayjs; + return this._dayJs().set('year', year).set('month', month).set('date', date); } today(): Dayjs { @@ -145,8 +144,9 @@ export class CustomDateAdapter extends DateAdapter { parse(value: any, parseFormat: string): Dayjs | null { if (value && typeof value === 'string') { - return this._dayJs(value, dayjs().localeData().longDateFormat(parseFormat), this.locale); + return dayjs(value, parseFormat); } + // todo: is this necessary? return value ? this._dayJs(value).locale(this.locale) : null; } @@ -229,7 +229,7 @@ export class CustomDateAdapter extends DateAdapter { dayjs.extend(utc); } - dayjs.extend(LocalizedFormat); + dayjs.extend(localizedFormat); dayjs.extend(customParseFormat); dayjs.extend(localeData);