import { Component, OnInit } from '@angular/core'; import { FormArray, UntypedFormGroup } from '@angular/forms'; import { MatDialog } from '@angular/material/dialog'; import { ActivatedRoute, Router } from '@angular/router'; import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service'; import { ReferenceTypeService } from '@app/core/services/reference-type/reference-type.service'; import { EnumUtils } from '@app/core/services/utilities/enum-utils.service'; // import { BreadcrumbItem } from '@app/ui/misc/breadcrumb/definition/breadcrumb-item'; import { DatePipe } from '@angular/common'; import { IsActive } from '@app/core/common/enum/is-active.enum'; import { AppPermission } from '@app/core/common/enum/permission.enum'; import { ReferenceFieldDataType } from '@app/core/common/enum/reference-field-data-type'; import { ExternalFetcherApiHTTPMethodType } from '@app/core/common/enum/external-fetcher-api-http-method-type'; import { ExternalFetcherSourceType } from '@app/core/common/enum/external-fetcher-source-type'; import { ReferenceType, ReferenceTypeDefinition, ReferenceTypePersist } from '@app/core/model/reference-type/reference-type'; import { AuthService } from '@app/core/services/auth/auth.service'; import { LoggingService } from '@app/core/services/logging/logging-service'; import { QueryParamsService } from '@app/core/services/utilities/query-params.service'; import { BaseEditor } from '@common/base/base-editor'; import { FormService } from '@common/forms/form-service'; import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component'; import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service'; import { FilterService } from '@common/modules/text-filter/filter-service'; import { Guid } from '@common/types/guid'; import { TranslateService } from '@ngx-translate/core'; import { map, takeUntil } from 'rxjs/operators'; import { ReferenceTypeEditorModel} from './reference-type-editor.model'; import { ReferenceTypeEditorResolver } from './reference-type-editor.resolver'; import { ReferenceTypeEditorService } from './reference-type-editor.service'; import { ConfigurationService } from '@app/core/services/configuration/configuration.service'; import { LockService } from '@app/core/services/lock/lock.service'; @Component({ selector: 'app-reference-type-editor-component', templateUrl: 'reference-type-editor.component.html', styleUrls: ['./reference-type-editor.component.scss'], providers: [ReferenceTypeEditorService] }) export class ReferenceTypeEditorComponent extends BaseEditor implements OnInit { isNew = true; isDeleted = false; formGroup: UntypedFormGroup = null; showInactiveDetails = false; referenceTypeSourceType = ExternalFetcherSourceType; referenceTypeExternalApiHTTPMethodType = ExternalFetcherApiHTTPMethodType; public referenceTypeSourceTypeEnum = this.enumUtils.getEnumValues(ExternalFetcherSourceType); public referenceFieldDataTypeEnum = this.enumUtils.getEnumValues(ReferenceFieldDataType); public referenceTypeExternalApiHTTPMethodTypeEnum = this.enumUtils.getEnumValues(ExternalFetcherApiHTTPMethodType); referenceTypes: ReferenceType[] = null; sourceKeysMap: Map = new Map(); protected get canDelete(): boolean { return !this.isDeleted && !this.isNew && this.hasPermission(this.authService.permissionEnum.DeleteReferenceType); } protected get canSave(): boolean { return !this.isDeleted && this.hasPermission(this.authService.permissionEnum.EditReferenceType); } protected get canFinalize(): boolean { return !this.isDeleted && this.hasPermission(this.authService.permissionEnum.EditReferenceType); } private hasPermission(permission: AppPermission): boolean { return this.authService.hasPermission(permission) || this.editorModel?.permissions?.includes(permission); } constructor( // BaseFormEditor injected dependencies protected dialog: MatDialog, protected language: TranslateService, protected formService: FormService, protected router: Router, protected uiNotificationService: UiNotificationService, protected httpErrorHandlingService: HttpErrorHandlingService, protected filterService: FilterService, protected datePipe: DatePipe, protected route: ActivatedRoute, protected queryParamsService: QueryParamsService, protected lockService: LockService, protected authService: AuthService, protected configurationService: ConfigurationService, // Rest dependencies. Inject any other needed deps here: public enumUtils: EnumUtils, public referenceTypeService: ReferenceTypeService, private logger: LoggingService, private referenceTypeEditorService: ReferenceTypeEditorService ) { super(dialog, language, formService, router, uiNotificationService, httpErrorHandlingService, filterService, datePipe, route, queryParamsService, lockService, authService, configurationService); } ngOnInit(): void { super.ngOnInit(); if ((this.formGroup.get('definition').get('sources') as FormArray).length == 0) { this.addSource(); } } getItem(itemId: Guid, successFunction: (item: ReferenceType) => void) { this.referenceTypeService.getSingle(itemId, ReferenceTypeEditorResolver.lookupFields()) .pipe(map(data => data as ReferenceType), takeUntil(this._destroyed)) .subscribe( data => successFunction(data), error => this.onCallbackError(error) ); } prepareForm(data: ReferenceType) { try { this.editorModel = data ? new ReferenceTypeEditorModel().fromModel(data) : new ReferenceTypeEditorModel(); this.getReferenceTypes(this.editorModel.id); this.isDeleted = data ? data.isActive === IsActive.Inactive : false; this.buildForm(); } catch (error) { this.logger.error('Could not parse referenceType item: ' + data + error); this.uiNotificationService.snackBarNotification(this.language.instant('COMMONS.ERRORS.DEFAULT'), SnackBarNotificationLevel.Error); } } buildForm() { this.formGroup = this.editorModel.buildForm(null, this.isDeleted || !this.authService.hasPermission(AppPermission.EditReferenceType)); this.referenceTypeEditorService.setValidationErrorModel(this.editorModel.validationErrorModel); } refreshData(): void { this.getItem(this.editorModel.id, (data: ReferenceType) => this.prepareForm(data)); } refreshOnNavigateToData(id?: Guid): void { this.formGroup.markAsPristine(); let route = []; if (id === null) { route.push('../..'); } else if (this.isNew) { route.push('../' + id); } else { route.push('..'); } this.router.navigate(route, { queryParams: { 'lookup': this.queryParamsService.serializeLookup(this.lookupParams), 'lv': ++this.lv }, replaceUrl: true, relativeTo: this.route }); } persistEntity(onSuccess?: (response) => void): void { const formData = this.formService.getValue(this.formGroup.getRawValue()) as ReferenceTypePersist; console.log(formData); this.referenceTypeService.persist(formData) .pipe(takeUntil(this._destroyed)).subscribe( complete => onSuccess ? onSuccess(complete) : this.onCallbackSuccess(complete), error => this.onCallbackError(error) ); } formSubmit(): void { this.formService.removeAllBackEndErrors(this.formGroup); this.formService.touchAllFormFields(this.formGroup); if (!this.isFormValid()) { return; } this.persistEntity(); } public delete() { const value = this.formGroup.value; if (value.id) { const dialogRef = this.dialog.open(ConfirmationDialogComponent, { maxWidth: '300px', data: { message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'), confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'), cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL') } }); dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => { if (result) { this.referenceTypeService.delete(value.id).pipe(takeUntil(this._destroyed)) .subscribe( complete => this.onCallbackSuccess(), error => this.onCallbackError(error) ); } }); } } clearErrorModel() { this.editorModel.validationErrorModel.clear(); this.formService.validateAllFormFields(this.formGroup); } // // // fields // // addField(): void { (this.formGroup.get('definition').get('fields') as FormArray).push(this.editorModel.createChildField((this.formGroup.get('definition').get('fields') as FormArray).length)); } removeField(fieldIndex: number): void { const fieldForm = this.formGroup.get('definition').get('fields') as FormArray; const fieldCode = fieldForm.at(fieldIndex).get('code').value; fieldForm.removeAt(fieldIndex); //Reapply validators ReferenceTypeEditorModel.reApplyDefinitionFieldsValidators( { formGroup: this.formGroup, validationErrorModel: this.editorModel.validationErrorModel } ) fieldForm.markAsDirty(); const sourceFormArray = (this.formGroup.get('definition').get('sources') as FormArray); if(sourceFormArray){ for (let i = 0; i < sourceFormArray.length; i++) { const optionsFormArray = (sourceFormArray.at(i).get('options') as FormArray); for (let j = 0; j < optionsFormArray.length; j++) { if (fieldCode == optionsFormArray.at(j).get('code').getRawValue()) { this.removeOption(i, j); } } const fieldMappingFormArray = (sourceFormArray.at(i).get('results').get('fieldsMapping') as FormArray); for (let j = 0; j < fieldMappingFormArray.length; j++) { if (fieldCode == fieldMappingFormArray.at(j).get('code').getRawValue()) { this.removeFieldMapping(i, j); } } } } } submitFields(): void { const fieldsFormArray = (this.formGroup.get('definition').get('fields') as FormArray); if (fieldsFormArray.valid) { const sourcesFormArray = (this.formGroup.get('definition').get('sources') as FormArray); if (fieldsFormArray.length > 0) { for (let j = 0; j < sourcesFormArray.length; j++) { for (let i = 0; i < fieldsFormArray.length; i++) { this.addFieldMapping(j, fieldsFormArray.at(i).get('code').value); this.addOption(j, fieldsFormArray.at(i).get('code').value); } } } } } addSource(): void { (this.formGroup.get('definition').get('sources') as FormArray).push(this.editorModel.createChildSource((this.formGroup.get('definition').get('sources') as FormArray).length)); const sourceIndex = (this.formGroup.get('definition').get('sources') as FormArray).length - 1; this.addFieldMapping(sourceIndex, "reference_id"); this.addFieldMapping(sourceIndex, "label"); this.addFieldMapping(sourceIndex, "description"); this.addOption(sourceIndex, "reference_id"); this.addOption(sourceIndex, "label"); this.addOption(sourceIndex, "description"); const fieldsFormArray = (this.formGroup.get('definition').get('fields') as FormArray); if (fieldsFormArray && fieldsFormArray.length > 0) { for (let i = 0; i < fieldsFormArray.length; i++) { this.addFieldMapping(sourceIndex, fieldsFormArray.at(i).get('code').value); this.addOption(sourceIndex, fieldsFormArray.at(i).get('code').value); } } } removeSource(sourceIndex: number): void { const formArray = (this.formGroup.get('definition').get('sources') as FormArray); formArray.removeAt(sourceIndex); ReferenceTypeEditorModel.reApplyDefinitionSourcesValidators( { formGroup: this.formGroup, validationErrorModel: this.editorModel.validationErrorModel } ) formArray.markAsDirty(); } // // // resultFieldsMapping // // addFieldMapping(sourceIndex: number, code: string): void { const fieldMappingSize = ((this.formGroup.get('definition').get('sources') as FormArray).at(sourceIndex).get('results').get('fieldsMapping') as FormArray).length; if (fieldMappingSize > 0) { for (let i = 0; i < fieldMappingSize; i++) { if (((this.formGroup.get('definition').get('sources') as FormArray).at(sourceIndex).get('results').get('fieldsMapping') as FormArray).at(i).get('code').getRawValue() == code) { return; } } } ((this.formGroup.get('definition').get('sources') as FormArray).at(sourceIndex).get('results').get('fieldsMapping') as FormArray).push(this.editorModel.createFieldsMapping(sourceIndex, fieldMappingSize)); ((this.formGroup.get('definition').get('sources') as FormArray).at(sourceIndex).get('results').get('fieldsMapping') as FormArray).at(fieldMappingSize).get('code').patchValue(code); } removeFieldMapping(sourceIndex: number, fieldMappingIndex: number): void { const formArray = ((this.formGroup.get('definition').get('sources') as FormArray).at(sourceIndex) as FormArray); (formArray.get('results').get('fieldsMapping') as FormArray).removeAt(fieldMappingIndex); ReferenceTypeEditorModel.reApplyDefinitionSourcesValidators( { formGroup: this.formGroup, validationErrorModel: this.editorModel.validationErrorModel } ); (this.formGroup.get('definition').get('sources') as FormArray).at(sourceIndex).get('fieldsMapping').markAsDirty(); } // Options addOption(sourceIndex: number, code: string): void { const optionsSize = ((this.formGroup.get('definition').get('sources') as FormArray).at(sourceIndex).get('options') as FormArray).length; if (optionsSize > 0) { for (let i = 0; i < optionsSize; i++) { if (((this.formGroup.get('definition').get('sources') as FormArray).at(sourceIndex).get('options') as FormArray).at(i).get('code').getRawValue() == code) { return; } } } ((this.formGroup.get('definition').get('sources') as FormArray).at(sourceIndex).get('options') as FormArray).push(this.editorModel.createOptions(sourceIndex, optionsSize)); ((this.formGroup.get('definition').get('sources') as FormArray).at(sourceIndex).get('options') as FormArray).at(optionsSize).get('code').patchValue(code); } removeOption(sourceIndex: number, optionIndex: number): void { const formArray = ((this.formGroup.get('definition').get('sources') as FormArray).at(sourceIndex) as FormArray); (formArray.get('options') as FormArray).removeAt(optionIndex); ReferenceTypeEditorModel.reApplyDefinitionSourcesValidators( { formGroup: this.formGroup, validationErrorModel: this.editorModel.validationErrorModel } ); (this.formGroup.get('definition').get('sources') as FormArray).at(sourceIndex).get('options').markAsDirty(); } private getReferenceTypes(excludedId?: Guid): void { let sourceKeys: string[] = []; const lookup = ReferenceTypeService.DefaultReferenceTypeLookup(); if (excludedId) lookup.excludedIds = [excludedId]; this.referenceTypeService.query(lookup) .pipe(takeUntil(this._destroyed)) .subscribe(response => { this.referenceTypes = response.items as ReferenceType[]; this.referenceTypes.forEach(referenceType => { sourceKeys = referenceType.definition.sources.map(x => x.key); this.sourceKeysMap.set(referenceType.id, sourceKeys); }) }); } selectedReferenceTypeChanged(id: Guid): void { let sourceKeys: string[] = []; this.referenceTypeService.getSingle(id, ReferenceTypeEditorResolver.lookupFields()) .pipe(takeUntil(this._destroyed)) .subscribe(data => { const referenceType = data as ReferenceType; // source keys referenceType.definition.sources.forEach(source => { if (!sourceKeys.includes(source.key)) sourceKeys.push(source.key) }); if (this.sourceKeysMap.has(referenceType.id) && this.sourceKeysMap.get(referenceType.id).length == 0) { this.sourceKeysMap.set(referenceType.id, sourceKeys); } }); } }