diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts index 079dd6b1a..682306b65 100644 --- a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts +++ b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts @@ -43,6 +43,12 @@ import { MatIconModule } from '@angular/material/icon'; ], }) export class FileAttributeComponent extends BaseFormComponent implements OnDestroy { + isInEditMode = false; + closedDatepicker = true; + @Input() fileAttribute!: IFileAttributeConfig; + @Input() file!: File; + @Input() dossier!: Dossier; + @Input() fileNameColumn = false; readonly #subscriptions = new Subscription(); readonly #shouldClose = computed( () => @@ -54,13 +60,21 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr !this.fileAttributesService.openAttributeEdits().length, ); - isInEditMode = false; - closedDatepicker = true; + get isDate(): boolean { + return this.fileAttribute.type === FileAttributeConfigTypes.DATE; + } - @Input() fileAttribute!: IFileAttributeConfig; - @Input() file!: File; - @Input() dossier!: Dossier; - @Input() fileNameColumn = false; + 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, @@ -93,14 +107,6 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr ); } - get isDate(): boolean { - return this.fileAttribute.type === FileAttributeConfigTypes.DATE; - } - - get fileAttributeValue(): string { - return this.file.fileAttributes.attributeIdToValue[this.fileAttribute.id]; - } - @Debounce(60) @HostListener('document:click', ['$event']) clickOutside($event: MouseEvent) { @@ -165,7 +171,13 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr this.#toggleEdit(); this.fileAttributesService.openAttributeEdits.mutate(value => { for (let index = 0; index < value.length; index++) { - if (JSON.stringify(value[index]) === JSON.stringify({ attribute: this.fileAttribute.id, file: this.file.id })) { + if ( + JSON.stringify(value[index]) === + JSON.stringify({ + attribute: this.fileAttribute.id, + file: this.file.id, + }) + ) { value.splice(index, 1); } } @@ -196,7 +208,7 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr #checkEmptyInput(): ValidatorFn { return (control: AbstractControl) => - (!this.isDate && !control.get(this.fileAttribute.id)?.value?.trim().length && !this.fileAttributeValue) || + (this.isText && !control.get(this.fileAttribute.id)?.value?.trim().length && !this.fileAttributeValue) || control.get(this.fileAttribute.id)?.value === this.fileAttributeValue ? { emptyString: true } : null; @@ -215,7 +227,15 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr } #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 { @@ -233,11 +253,16 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr } #focusOnEditInput(): void { - setTimeout(() => { - const input = document.getElementById(this.fileAttribute.id) as HTMLInputElement; - const end = input.value.length; - input?.setSelectionRange(end, end); - 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); diff --git a/yarn.lock b/yarn.lock index 5bbbaed9a..6ead4e4bb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9414,10 +9414,10 @@ mkdirp@^3.0.1: resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-3.0.1.tgz#e44e4c5607fb279c168241713cc6e0fea9adcb50" integrity sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg== -monaco-editor@0.44.0: - version "0.44.0" - resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.44.0.tgz#3c0fe3655923bbf7dd647057302070b5095b6c59" - integrity sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q== +monaco-editor@0.43.0: + version "0.43.0" + resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.43.0.tgz#cb02a8d23d1249ad00b7cffe8bbecc2ac09d4baf" + integrity sha512-cnoqwQi/9fml2Szamv1XbSJieGJ1Dc8tENVMD26Kcfl7xGQWp7OBKMjlwKVGYFJ3/AXJjSOGvcqK7Ry/j9BM1Q== moo@^0.5.1: version "0.5.2"