RED-7783: Fixed numeric and date file attrs

This commit is contained in:
Adina Țeudan 2023-10-19 21:33:24 +03:00
parent 1ff1ab1133
commit 769a9085c9
3 changed files with 57 additions and 32 deletions

View File

@ -43,6 +43,12 @@ import { MatIconModule } from '@angular/material/icon';
], ],
}) })
export class FileAttributeComponent extends BaseFormComponent implements OnDestroy { 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 #subscriptions = new Subscription();
readonly #shouldClose = computed( readonly #shouldClose = computed(
() => () =>
@ -54,13 +60,21 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
!this.fileAttributesService.openAttributeEdits().length, !this.fileAttributesService.openAttributeEdits().length,
); );
isInEditMode = false; get isDate(): boolean {
closedDatepicker = true; return this.fileAttribute.type === FileAttributeConfigTypes.DATE;
}
@Input() fileAttribute!: IFileAttributeConfig; get isNumber(): boolean {
@Input() file!: File; return this.fileAttribute.type === FileAttributeConfigTypes.NUMBER;
@Input() dossier!: Dossier; }
@Input() fileNameColumn = false;
get isText(): boolean {
return this.fileAttribute.type === FileAttributeConfigTypes.TEXT;
}
get fileAttributeValue(): string {
return this.file.fileAttributes.attributeIdToValue[this.fileAttribute.id];
}
constructor( constructor(
router: Router, 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) @Debounce(60)
@HostListener('document:click', ['$event']) @HostListener('document:click', ['$event'])
clickOutside($event: MouseEvent) { clickOutside($event: MouseEvent) {
@ -165,7 +171,13 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
this.#toggleEdit(); this.#toggleEdit();
this.fileAttributesService.openAttributeEdits.mutate(value => { this.fileAttributesService.openAttributeEdits.mutate(value => {
for (let index = 0; index < value.length; index++) { 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); value.splice(index, 1);
} }
} }
@ -196,7 +208,7 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
#checkEmptyInput(): ValidatorFn { #checkEmptyInput(): ValidatorFn {
return (control: AbstractControl) => 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 control.get(this.fileAttribute.id)?.value === this.fileAttributeValue
? { emptyString: true } ? { emptyString: true }
: null; : null;
@ -215,7 +227,15 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
} }
#formatAttributeValue(attrValue) { #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 { #toggleEdit(): void {
@ -233,11 +253,16 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
} }
#focusOnEditInput(): void { #focusOnEditInput(): void {
setTimeout(() => { if (this.isDate || this.isText) {
const input = document.getElementById(this.fileAttribute.id) as HTMLInputElement; setTimeout(() => {
const end = input.value.length; const input = document.getElementById(this.fileAttribute.id) as HTMLInputElement;
input?.setSelectionRange(end, end); if (!input) {
input?.focus(); return;
}, 100); }
const end = input.value.length;
input.setSelectionRange(end, end);
input.focus();
}, 100);
}
} }
} }

View File

@ -8,7 +8,7 @@ import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
import dayjs, { Dayjs } from 'dayjs'; import dayjs, { Dayjs } from 'dayjs';
import utc from 'dayjs/plugin/utc'; import utc from 'dayjs/plugin/utc';
import localeData from 'dayjs/plugin/localeData'; import localeData from 'dayjs/plugin/localeData';
import LocalizedFormat from 'dayjs/plugin/localizedFormat'; import localizedFormat from 'dayjs/plugin/localizedFormat';
import customParseFormat from 'dayjs/plugin/customParseFormat'; import customParseFormat from 'dayjs/plugin/customParseFormat';
export interface DayJsDateAdapterOptions { export interface DayJsDateAdapterOptions {
@ -135,8 +135,7 @@ export class CustomDateAdapter extends DateAdapter<Dayjs> {
} }
createDate(year: number, month: number, date: number): Dayjs { createDate(year: number, month: number, date: number): Dayjs {
const returnDayjs = this._dayJs().set('year', year).set('month', month).set('date', date); return this._dayJs().set('year', year).set('month', month).set('date', date);
return returnDayjs;
} }
today(): Dayjs { today(): Dayjs {
@ -145,8 +144,9 @@ export class CustomDateAdapter extends DateAdapter<Dayjs> {
parse(value: any, parseFormat: string): Dayjs | null { parse(value: any, parseFormat: string): Dayjs | null {
if (value && typeof value === 'string') { 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; return value ? this._dayJs(value).locale(this.locale) : null;
} }
@ -229,7 +229,7 @@ export class CustomDateAdapter extends DateAdapter<Dayjs> {
dayjs.extend(utc); dayjs.extend(utc);
} }
dayjs.extend(LocalizedFormat); dayjs.extend(localizedFormat);
dayjs.extend(customParseFormat); dayjs.extend(customParseFormat);
dayjs.extend(localeData); dayjs.extend(localeData);

View File

@ -9414,10 +9414,10 @@ mkdirp@^3.0.1:
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-3.0.1.tgz#e44e4c5607fb279c168241713cc6e0fea9adcb50" resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-3.0.1.tgz#e44e4c5607fb279c168241713cc6e0fea9adcb50"
integrity sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg== integrity sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==
monaco-editor@0.44.0: monaco-editor@0.43.0:
version "0.44.0" version "0.43.0"
resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.44.0.tgz#3c0fe3655923bbf7dd647057302070b5095b6c59" resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.43.0.tgz#cb02a8d23d1249ad00b7cffe8bbecc2ac09d4baf"
integrity sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q== integrity sha512-cnoqwQi/9fml2Szamv1XbSJieGJ1Dc8tENVMD26Kcfl7xGQWp7OBKMjlwKVGYFJ3/AXJjSOGvcqK7Ry/j9BM1Q==
moo@^0.5.1: moo@^0.5.1:
version "0.5.2" version "0.5.2"