Skip to content

Commit c752fd6

Browse files
mohas22mohas22
mohas22
authored and
mohas22
committed
updated autocomplete and dropdown for object reference
1 parent 284eced commit c752fd6

File tree

4 files changed

+88
-176
lines changed

4 files changed

+88
-176
lines changed

‎packages/angular-sdk-components/src/lib/_components/field/auto-complete/auto-complete.component.ts‎

Lines changed: 4 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
1+
import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy, Output, EventEmitter } from '@angular/core';
22
import { CommonModule } from '@angular/common';
33
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
44
import { MatOptionModule } from '@angular/material/core';
@@ -7,7 +7,6 @@ import { MatInputModule } from '@angular/material/input';
77
import { MatFormFieldModule } from '@angular/material/form-field';
88
import { interval, Observable } from 'rxjs';
99
import { map, startWith } from 'rxjs/operators';
10-
import { ComponentMetadataConfig } from '@pega/pcore-pconnect-typedefs/interpreter/types';
1110
import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
1211
import { Utils } from '../../../_helpers/utils';
1312
import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
@@ -48,13 +47,7 @@ interface AutoCompleteProps extends PConnFieldProps {
4847
export class AutoCompleteComponent implements OnInit, OnDestroy {
4948
@Input() pConn$: typeof PConnect;
5049
@Input() formGroup$: FormGroup;
51-
@Input() parentProps?: {
52-
parentPconn: typeof PConnect;
53-
rawViewMetadata: ComponentMetadataConfig;
54-
canBeChangedInReviewMode: boolean;
55-
isDisplayModeEnabled: boolean;
56-
mode: string;
57-
};
50+
@Output() onRecordChange: EventEmitter<any> = new EventEmitter();
5851

5952
// Used with AngularPConnect
6053
angularPConnectData: AngularPConnectData = {};
@@ -339,78 +332,12 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
339332
}
340333
const value = key;
341334
handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
342-
if (this.configProps$?.onRecordChange) {
343-
this.configProps$.onRecordChange(event);
344-
}
345335

346-
if (this.parentProps?.parentPconn.getComponentName() === 'ObjectReference') {
347-
this.onRecordChange(event);
336+
if (this.onRecordChange) {
337+
this.onRecordChange.emit(value);
348338
}
349339
}
350340

351-
onRecordChange = event => {
352-
const caseKey = this.parentProps?.parentPconn.getCaseInfo().getKey() ?? '';
353-
const refreshOptions = { autoDetectRefresh: true, propertyName: '' };
354-
refreshOptions.propertyName = this.parentProps?.rawViewMetadata.config?.value;
355-
356-
if (!this.parentProps?.canBeChangedInReviewMode || !this.parentProps?.parentPconn.getValue('__currentPageTabViewName')) {
357-
const pgRef = this.parentProps?.parentPconn.getPageReference().replace('caseInfo.content', '') ?? '';
358-
const viewName = this.parentProps?.rawViewMetadata.name;
359-
if (viewName && viewName.length > 0) {
360-
getPConnect().getActionsApi().refreshCaseView(caseKey, viewName, pgRef, refreshOptions);
361-
}
362-
}
363-
364-
const propValue = event?.value || event?.target?.value;
365-
const propName =
366-
this.parentProps?.rawViewMetadata.type === 'SimpleTableSelect' && this.parentProps.mode === 'multi'
367-
? PCore.getAnnotationUtils().getPropertyName(this.parentProps?.rawViewMetadata.config?.selectionList)
368-
: PCore.getAnnotationUtils().getPropertyName(this.parentProps?.rawViewMetadata.config?.value);
369-
370-
if (propValue && this.parentProps?.canBeChangedInReviewMode && this.parentProps.isDisplayModeEnabled) {
371-
PCore.getCaseUtils()
372-
.getCaseEditLock(caseKey, '')
373-
.then(caseResponse => {
374-
const pageTokens = this.parentProps?.parentPconn.getPageReference().replace('caseInfo.content', '').split('.');
375-
let curr = {};
376-
const commitData = curr;
377-
378-
pageTokens?.forEach(el => {
379-
if (el !== '') {
380-
curr[el] = {};
381-
curr = curr[el];
382-
}
383-
});
384-
385-
// expecting format like {Customer: {pyID:"C-100"}}
386-
const propArr = propName.split('.');
387-
propArr.forEach((element, idx) => {
388-
if (idx + 1 === propArr.length) {
389-
curr[element] = propValue;
390-
} else {
391-
curr[element] = {};
392-
curr = curr[element];
393-
}
394-
});
395-
396-
PCore.getCaseUtils()
397-
.updateCaseEditFieldsData(
398-
caseKey,
399-
{ [caseKey]: commitData },
400-
caseResponse.headers.etag,
401-
this.parentProps?.parentPconn?.getContextName() ?? ''
402-
)
403-
.then(response => {
404-
PCore.getContainerUtils().updateParentLastUpdateTime(
405-
this.parentProps?.parentPconn.getContextName() ?? '',
406-
response.data.data.caseInfo.lastUpdateTime
407-
);
408-
PCore.getContainerUtils().updateRelatedContextEtag(this.parentProps?.parentPconn.getContextName() ?? '', response.headers.etag);
409-
});
410-
});
411-
}
412-
};
413-
414341
getErrorMessage() {
415342
let errMessage = '';
416343

‎packages/angular-sdk-components/src/lib/_components/field/dropdown/dropdown.component.ts‎

Lines changed: 5 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
1+
import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy, EventEmitter, Output } from '@angular/core';
22
import { CommonModule } from '@angular/common';
33
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
44
import { MatOptionModule } from '@angular/material/core';
55
import { MatSelectModule } from '@angular/material/select';
66
import { MatFormFieldModule } from '@angular/material/form-field';
77
import { interval } from 'rxjs';
88
import isEqual from 'fast-deep-equal';
9-
import { ComponentMetadataConfig } from '@pega/pcore-pconnect-typedefs/interpreter/types';
109
import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
1110
import { DatapageService } from '../../../_services/datapage.service';
1211
import { Utils } from '../../../_helpers/utils';
@@ -74,13 +73,7 @@ interface DropdownProps extends PConnFieldProps {
7473
export class DropdownComponent implements OnInit, OnDestroy {
7574
@Input() pConn$: typeof PConnect;
7675
@Input() formGroup$: FormGroup;
77-
@Input() parentProps?: {
78-
parentPconn: typeof PConnect;
79-
rawViewMetadata: ComponentMetadataConfig;
80-
canBeChangedInReviewMode: boolean;
81-
isDisplayModeEnabled: boolean;
82-
mode: string;
83-
};
76+
@Output() onRecordChange: EventEmitter<any> = new EventEmitter();
8477

8578
// Used with AngularPConnect
8679
angularPConnectData: AngularPConnectData = {};
@@ -344,80 +337,15 @@ export class DropdownComponent implements OnInit, OnDestroy {
344337
event.value = '';
345338
}
346339
handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
347-
if (this.configProps$?.onRecordChange) {
348-
this.configProps$.onRecordChange(event);
349-
}
340+
350341
this.pConn$.clearErrorMessages({
351342
property: this.propName
352343
});
353-
if (this.parentProps?.parentPconn.getComponentName() === 'ObjectReference') {
354-
this.onRecordChange(event);
344+
if (this.onRecordChange) {
345+
this.onRecordChange.emit(event.value);
355346
}
356347
}
357348

358-
onRecordChange = event => {
359-
const caseKey = this.parentProps?.parentPconn.getCaseInfo().getKey() ?? '';
360-
const refreshOptions = { autoDetectRefresh: true, propertyName: '' };
361-
refreshOptions.propertyName = this.parentProps?.rawViewMetadata.config?.value;
362-
363-
if (!this.parentProps?.canBeChangedInReviewMode || !this.parentProps?.parentPconn.getValue('__currentPageTabViewName')) {
364-
const pgRef = this.parentProps?.parentPconn.getPageReference().replace('caseInfo.content', '') ?? '';
365-
const viewName = this.parentProps?.rawViewMetadata.name;
366-
if (viewName && viewName.length > 0) {
367-
getPConnect().getActionsApi().refreshCaseView(caseKey, viewName, pgRef, refreshOptions);
368-
}
369-
}
370-
371-
const propValue = event?.value || event?.target?.value;
372-
const propName =
373-
this.parentProps?.rawViewMetadata.type === 'SimpleTableSelect' && this.parentProps.mode === 'multi'
374-
? PCore.getAnnotationUtils().getPropertyName(this.parentProps?.rawViewMetadata.config?.selectionList)
375-
: PCore.getAnnotationUtils().getPropertyName(this.parentProps?.rawViewMetadata.config?.value);
376-
377-
if (propValue && this.parentProps?.canBeChangedInReviewMode && this.parentProps.isDisplayModeEnabled) {
378-
PCore.getCaseUtils()
379-
.getCaseEditLock(caseKey, '')
380-
.then(caseResponse => {
381-
const pageTokens = this.parentProps?.parentPconn.getPageReference().replace('caseInfo.content', '').split('.');
382-
let curr = {};
383-
const commitData = curr;
384-
385-
pageTokens?.forEach(el => {
386-
if (el !== '') {
387-
curr[el] = {};
388-
curr = curr[el];
389-
}
390-
});
391-
392-
// expecting format like {Customer: {pyID:"C-100"}}
393-
const propArr = propName.split('.');
394-
propArr.forEach((element, idx) => {
395-
if (idx + 1 === propArr.length) {
396-
curr[element] = propValue;
397-
} else {
398-
curr[element] = {};
399-
curr = curr[element];
400-
}
401-
});
402-
403-
PCore.getCaseUtils()
404-
.updateCaseEditFieldsData(
405-
caseKey,
406-
{ [caseKey]: commitData },
407-
caseResponse.headers.etag,
408-
this.parentProps?.parentPconn?.getContextName() ?? ''
409-
)
410-
.then(response => {
411-
PCore.getContainerUtils().updateParentLastUpdateTime(
412-
this.parentProps?.parentPconn.getContextName() ?? '',
413-
response.data.data.caseInfo.lastUpdateTime
414-
);
415-
PCore.getContainerUtils().updateRelatedContextEtag(this.parentProps?.parentPconn.getContextName() ?? '', response.headers.etag);
416-
});
417-
});
418-
}
419-
};
420-
421349
getLocalizedOptionValue(opt: IOption) {
422350
return this.pConn$.getLocalizedValue(
423351
opt.value,

‎packages/angular-sdk-components/src/lib/_components/field/object-reference/object-reference.component.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,11 @@
77
</div>
88
</ng-template>
99
<ng-template #loadDynamicComp>
10-
<component-mapper *ngIf="newComponentName" [name]="newComponentName" [props]="{ pConn$: newPconn, formGroup$, parentProps }"></component-mapper>
10+
<component-mapper
11+
*ngIf="newComponentName"
12+
[name]="newComponentName"
13+
[props]="{ pConn$: newPconn, formGroup$ }"
14+
[parent]="this"
15+
[outputEvents]="{ onRecordChange: onRecordChange }"
16+
></component-mapper>
1117
</ng-template>

‎packages/angular-sdk-components/src/lib/_components/field/object-reference/object-reference.component.ts‎

Lines changed: 72 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { PConnFieldProps } from '../../../_types/PConnProps.interface';
55
import { generateColumns, getDataRelationshipContextFromKey } from './utils';
66
import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
77
import { CommonModule } from '@angular/common';
8+
import { ComponentMetadataConfig } from '@pega/pcore-pconnect-typedefs/interpreter/types';
89

910
interface ObjectReferenceProps extends PConnFieldProps {
1011
showPromotedFilters: boolean;
@@ -35,7 +36,7 @@ export class ObjectReferenceComponent implements OnInit, OnDestroy {
3536
canBeChangedInReviewMode: boolean;
3637
newComponentName: string;
3738
newPconn: typeof PConnect;
38-
parentProps: {};
39+
rawViewMetadata: ComponentMetadataConfig | undefined;
3940

4041
constructor(private angularPConnect: AngularPConnectService) {}
4142

@@ -72,28 +73,30 @@ export class ObjectReferenceComponent implements OnInit, OnDestroy {
7273
const inline = this.configProps.inline;
7374
const showPromotedFilters = this.configProps.showPromotedFilters;
7475
const referenceType: string = targetObjectType === 'case' ? 'Case' : 'Data';
75-
const rawViewMetadata = this.pConn$.getRawMetadata();
76-
const refFieldMetadata = this.pConn$.getFieldMetadata(rawViewMetadata?.config?.value?.split('.', 2)[1]);
76+
this.rawViewMetadata = this.pConn$.getRawMetadata();
77+
const refFieldMetadata = this.pConn$.getFieldMetadata(this.rawViewMetadata?.config?.value?.split('.', 2)[1]);
7778

7879
// Destructured properties
7980
const propsToUse = { ...this.pConn$.getInheritedProps(), ...this.configProps };
8081

8182
// Computed variables
8283
this.isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';
83-
this.canBeChangedInReviewMode = editableInReview && ['Autocomplete', 'Dropdown'].includes((rawViewMetadata?.config as any)?.componentType);
84+
this.canBeChangedInReviewMode = editableInReview && ['Autocomplete', 'Dropdown'].includes((this.rawViewMetadata?.config as any)?.componentType);
8485
// componentType is not defined in ComponentMetadataConfig type so using any
85-
this.type = (rawViewMetadata?.config as any)?.componentType;
86+
this.type = (this.rawViewMetadata?.config as any)?.componentType;
8687

8788
if (this.type === 'SemanticLink' && !this.canBeChangedInReviewMode) {
8889
const config: any = {
89-
...rawViewMetadata?.config,
90-
primaryField: (rawViewMetadata?.config as any).displayField
90+
...this.rawViewMetadata?.config,
91+
primaryField: (this.rawViewMetadata?.config as any).displayField
9192
};
92-
config.caseClass = (rawViewMetadata?.config as any).targetObjectClass;
93+
config.caseClass = (this.rawViewMetadata?.config as any).targetObjectClass;
9394
config.text = config.primaryField;
9495
config.caseID = config.value;
9596
config.contextPage = `@P .${
96-
(rawViewMetadata?.config as any)?.displayField ? getDataRelationshipContextFromKey((rawViewMetadata?.config as any).displayField) : null
97+
(this.rawViewMetadata?.config as any)?.displayField
98+
? getDataRelationshipContextFromKey((this.rawViewMetadata?.config as any).displayField)
99+
: null
97100
}`;
98101
config.resourceParams = {
99102
workID: config.value
@@ -110,8 +113,8 @@ export class ObjectReferenceComponent implements OnInit, OnDestroy {
110113
displayMode,
111114
referenceType,
112115
hideLabel,
113-
dataRelationshipContext: (rawViewMetadata?.config as any)?.displayField
114-
? getDataRelationshipContextFromKey((rawViewMetadata?.config as any).displayField)
116+
dataRelationshipContext: (this.rawViewMetadata?.config as any)?.displayField
117+
? getDataRelationshipContextFromKey((this.rawViewMetadata?.config as any).displayField)
115118
: null
116119
}
117120
},
@@ -124,7 +127,7 @@ export class ObjectReferenceComponent implements OnInit, OnDestroy {
124127

125128
if (this.type !== 'SemanticLink' && !this.isDisplayModeEnabled) {
126129
// 1) Set datasource
127-
const config: any = { ...rawViewMetadata?.config };
130+
const config: any = { ...this.rawViewMetadata?.config };
128131
generateColumns(config, this.pConn$, referenceType);
129132
config.deferDatasource = true;
130133
config.listType = 'datapage';
@@ -190,16 +193,64 @@ export class ObjectReferenceComponent implements OnInit, OnDestroy {
190193
);
191194
this.newComponentName = component?.getPConnect().getComponentName();
192195
this.newPconn = component?.getPConnect();
193-
if (rawViewMetadata?.config) {
194-
rawViewMetadata.config = config ? { ...config } : rawViewMetadata.config;
196+
if (this.rawViewMetadata?.config) {
197+
this.rawViewMetadata.config = config ? { ...config } : this.rawViewMetadata.config;
195198
}
196-
this.parentProps = {
197-
parentPconn: this.pConn$,
198-
rawViewMetadata,
199-
canBeChangedInReviewMode: this.canBeChangedInReviewMode,
200-
isDisplayModeEnabled: this.isDisplayModeEnabled,
201-
mode
202-
};
199+
}
200+
}
201+
202+
onRecordChange(value) {
203+
const caseKey = this.pConn$.getCaseInfo().getKey() ?? '';
204+
const refreshOptions = { autoDetectRefresh: true, propertyName: '' };
205+
refreshOptions.propertyName = this.rawViewMetadata?.config?.value;
206+
207+
if (!this.canBeChangedInReviewMode || !this.pConn$.getValue('__currentPageTabViewName')) {
208+
const pgRef = this.pConn$.getPageReference().replace('caseInfo.content', '') ?? '';
209+
const viewName = this.rawViewMetadata?.name;
210+
if (viewName && viewName.length > 0) {
211+
getPConnect().getActionsApi().refreshCaseView(caseKey, viewName, pgRef, refreshOptions);
212+
}
213+
}
214+
215+
const propValue = value;
216+
const propName =
217+
this.rawViewMetadata?.type === 'SimpleTableSelect' && this.configProps.mode === 'multi'
218+
? PCore.getAnnotationUtils().getPropertyName(this.rawViewMetadata?.config?.selectionList)
219+
: PCore.getAnnotationUtils().getPropertyName(this.rawViewMetadata?.config?.value);
220+
221+
if (propValue && this.canBeChangedInReviewMode && this.isDisplayModeEnabled) {
222+
PCore.getCaseUtils()
223+
.getCaseEditLock(caseKey, '')
224+
.then(caseResponse => {
225+
const pageTokens = this.pConn$.getPageReference().replace('caseInfo.content', '').split('.');
226+
let curr = {};
227+
const commitData = curr;
228+
229+
pageTokens?.forEach(el => {
230+
if (el !== '') {
231+
curr[el] = {};
232+
curr = curr[el];
233+
}
234+
});
235+
236+
// expecting format like {Customer: {pyID:"C-100"}}
237+
const propArr = propName.split('.');
238+
propArr.forEach((element, idx) => {
239+
if (idx + 1 === propArr.length) {
240+
curr[element] = propValue;
241+
} else {
242+
curr[element] = {};
243+
curr = curr[element];
244+
}
245+
});
246+
247+
PCore.getCaseUtils()
248+
.updateCaseEditFieldsData(caseKey, { [caseKey]: commitData }, caseResponse.headers.etag, this.pConn$?.getContextName() ?? '')
249+
.then(response => {
250+
PCore.getContainerUtils().updateParentLastUpdateTime(this.pConn$.getContextName() ?? '', response.data.data.caseInfo.lastUpdateTime);
251+
PCore.getContainerUtils().updateRelatedContextEtag(this.pConn$.getContextName() ?? '', response.headers.etag);
252+
});
253+
});
203254
}
204255
}
205256
}

0 commit comments

Comments
 (0)