argos/dmp-frontend/src/app/ui/reference/reference-field/reference-field.component.ts

90 lines
3.3 KiB
TypeScript

import { Component, Input, OnInit } from '@angular/core';
import { UntypedFormArray, UntypedFormGroup } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { ReferenceType } from '@app/core/model/reference-type/reference-type';
import { ReferenceService } from '@app/core/services/reference/reference.service';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
import { BaseComponent } from '@common/base/base.component';
import { takeUntil } from 'rxjs/operators';
import { ReferenceDialogEditorComponent } from './editor/reference-dialog-editor.component';
import { Reference, ReferencePersist } from '@app/core/model/reference/reference';
import { ReferenceSearchLookup } from '@app/core/query/reference-search.lookup';
import { Guid } from '@common/types/guid';
import { nameof } from 'ts-simple-nameof';
@Component({
selector: 'app-reference-field-component',
templateUrl: 'reference-field.component.html',
styleUrls: ['./reference-field.component.scss']
})
export class ReferenceFieldComponent extends BaseComponent implements OnInit {
@Input() referenceType: ReferenceType = null;
@Input() form: UntypedFormGroup = null;
@Input() label: string = null;
@Input() required: boolean = false;
@Input() multiple: boolean = true;
@Input() hint: string;
@Input() placeholder: string;
multipleAutoCompleteSearchConfiguration: MultipleAutoCompleteConfiguration;
singleAutoCompleteSearchConfiguration: SingleAutoCompleteConfiguration;
constructor(
private referenceService: ReferenceService,
public enumUtils: EnumUtils,
private dialog: MatDialog,
) { super(); }
ngOnInit() {
if (this.multiple) {
this.multipleAutoCompleteSearchConfiguration = this.referenceService.getMultipleAutoCompleteSearchConfiguration(this.referenceType.id);
} else {
this.singleAutoCompleteSearchConfiguration = this.referenceService.getSingleAutocompleteSearchConfiguration(this.referenceType.id);
}
}
addReference() {
this.referenceService.searchWithDefinition(this.buildAutocompleteSearchLookup(this.referenceType.id))
.pipe(takeUntil(this._destroyed))
.subscribe(
references => {
const dialogRef = this.dialog.open(ReferenceDialogEditorComponent, {
width: '500px',
restoreFocus: false,
data: {
referenceTypeId: this.referenceType.id,
label: this.label ?? this.referenceType.name,
existingReferences: references.map(x => x.reference)
},
});
dialogRef.afterClosed()
.pipe(takeUntil(this._destroyed))
.subscribe(newResult => {
if (!newResult) { return; }
let results = this.form.value as ReferencePersist[];
if (results == undefined) results = [];
results.push(newResult);
this.form.setValue(results);
});
}
);
}
private buildAutocompleteSearchLookup(typeId: Guid): ReferenceSearchLookup {
const lookup: ReferenceSearchLookup = new ReferenceSearchLookup();
lookup.page = { size: 100, offset: 0 };
lookup.project = {
fields: [
nameof<Reference>(x => x.reference),
]
};
lookup.typeId = typeId;
lookup.order = { items: [nameof<Reference>(x => x.label)] };
return lookup;
}
}