Skip to content

Commit 1b34813

Browse files
4manasamanasa
4manasa
and
manasa
authored
DataReference, SimpleTableSelect and PromotedFilters component changes added (#87)
Co-authored-by: manasa <[email protected]>
1 parent 1a5afa3 commit 1b34813

17 files changed

+661
-6
lines changed

‎src/app/_components/_forms/dropdown/dropdown.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ export class DropdownComponent implements OnInit {
140140
this.componentReference = this.pConn$.getStateProps().value;
141141

142142
const optionsList = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject());
143-
optionsList.unshift({key: 'Select', value: 'Select...'});
143+
optionsList?.unshift({key: 'Select', value: 'Select...'});
144144
this.options$ = optionsList;
145145
if (this.value$ === '' && !this.bReadonly$) {
146146
this.value$ = 'Select';

‎src/app/_components/_templates/data-reference/data-reference.component.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div *ngIf="childrenToRender && childrenToRender.length > 0">
2+
<div *ngFor="let kid of childrenToRender">
3+
<div [ngSwitch]="kid.getPConnect().getComponentName()">
4+
<app-dropdown *ngSwitchCase="'Dropdown'" [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-dropdown>
5+
<app-simple-table-select *ngSwitchCase="'SimpleTableSelect'" [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-simple-table-select>
6+
</div>
7+
</div>
8+
</div>

‎src/app/_components/_templates/data-reference/data-reference.component.scss‎

Whitespace-only changes.

‎src/app/_components/_templates/data-reference/data-reference.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
2+
3+
import { DataReferenceComponent } from './data-reference.component';
4+
5+
describe('DataReferenceComponent', () => {
6+
let component: DataReferenceComponent;
7+
let fixture: ComponentFixture<DataReferenceComponent>;
8+
9+
beforeEach(waitForAsync(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ DataReferenceComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(DataReferenceComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/_components/_templates/data-reference/data-reference.component.ts‎

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
import { Component, OnInit, Input } from '@angular/core';
2+
import { AngularPConnectService } from "../../../_bridge/angular-pconnect";
3+
import { FormGroup } from '@angular/forms';
4+
const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
5+
@Component({
6+
selector: 'app-data-reference',
7+
templateUrl: './data-reference.component.html',
8+
styleUrls: ['./data-reference.component.scss']
9+
})
10+
export class DataReferenceComponent implements OnInit {
11+
12+
constructor(private angularPConnect: AngularPConnectService) { }
13+
14+
@Input() pConn$: any;
15+
@Input() formGroup$: FormGroup;
16+
arFields$: Array<any> = [];
17+
18+
label;
19+
showLabel;
20+
displayMode = "";
21+
allowAndPersistChangesInReviewMode = false;
22+
referenceType = "";
23+
selectionMode = "";
24+
displayAs = "";
25+
ruleClass = "";
26+
parameters;
27+
hideLabel = false;
28+
29+
// Used with AngularPConnect
30+
angularPConnectData: any = {};
31+
PCore$: any;
32+
childrenToRender: Array<any> = [];
33+
dropDownDataSource: String = "";
34+
isDisplayModeEnabled: Boolean = false;
35+
propsToUse: any = {};
36+
rawViewMetadata: any = {};
37+
viewName: String = "";
38+
firstChildMeta: any = {};
39+
refList: any;
40+
canBeChangedInReviewMode: Boolean = false;
41+
propName: String = ""
42+
firstChildPConnect;
43+
children;
44+
ngOnInit(): void {
45+
if (!this.PCore$) {
46+
this.PCore$ = window.PCore;
47+
}
48+
49+
// First thing in initialization is registering and subscribing to the AngularPConnect service
50+
this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
51+
this.children = this.pConn$.getChildren();
52+
this.updateSelf();
53+
}
54+
55+
// Callback passed when subscribing to store change
56+
onStateChange() {
57+
// Should always check the bridge to see if the component should
58+
// update itself (re-render)
59+
const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
60+
61+
// ONLY call updateSelf when the component should update
62+
if (bUpdateSelf) {
63+
this.updateSelf();
64+
}
65+
}
66+
67+
updateSelf() {
68+
// Update properties based on configProps
69+
const theConfigProps = this.pConn$.getConfigProps();
70+
this.label = theConfigProps.label;
71+
this.showLabel = theConfigProps.showLabel;
72+
this.displayMode = theConfigProps.displayMode;
73+
this.allowAndPersistChangesInReviewMode = theConfigProps.allowAndPersistChangesInReviewMode;
74+
this.referenceType = theConfigProps.referenceType;
75+
this.selectionMode = theConfigProps.selectionMode;
76+
this.displayAs = theConfigProps.displayAs;
77+
this.ruleClass = theConfigProps.ruleClass;
78+
this.parameters = theConfigProps.parameters;
79+
this.hideLabel = theConfigProps.hideLabel;
80+
81+
this.propsToUse = { label: this.label, showLabel: this.showLabel, ...this.pConn$.getInheritedProps() };
82+
if (this.propsToUse.showLabel === false) {
83+
this.propsToUse.label = '';
84+
}
85+
this.rawViewMetadata = this.pConn$.getRawMetadata();
86+
this.viewName = this.rawViewMetadata.name;
87+
this.firstChildMeta = this.rawViewMetadata.children[0];
88+
this.refList = this.rawViewMetadata.config.referenceList;
89+
this.canBeChangedInReviewMode = this.allowAndPersistChangesInReviewMode && (this.displayAs === 'autocomplete' || this.displayAs === 'dropdown');
90+
// this.childrenToRender = this.children;
91+
this.isDisplayModeEnabled = ["LABELS_LEFT", "STACKED_LARGE_VAL"].includes(this.displayMode);
92+
93+
if (this.firstChildMeta?.type !== 'Region') {
94+
this.firstChildPConnect = this.pConn$.getChildren()[0].getPConnect;
95+
96+
/* remove refresh When condition from those old view so that it will not be used for runtime */
97+
if (this.firstChildMeta.config?.readOnly) {
98+
delete this.firstChildMeta.config.readOnly;
99+
}
100+
if (this.firstChildMeta?.type === 'Dropdown') {
101+
this.firstChildMeta.config.datasource.source = this.rawViewMetadata.config?.parameters
102+
? this.dropDownDataSource
103+
: '@DATASOURCE '.concat(this.refList).concat('.pxResults');
104+
} else if (this.firstChildMeta?.type === 'AutoComplete') {
105+
this.firstChildMeta.config.datasource = this.refList;
106+
107+
/* Insert the parameters to the component only if present */
108+
if (this.rawViewMetadata.config?.parameters) {
109+
this.firstChildMeta.config.parameters = this.parameters;
110+
}
111+
}
112+
// set displayMode conditionally
113+
if (!this.canBeChangedInReviewMode) {
114+
this.firstChildMeta.config.displayMode = this.displayMode;
115+
}
116+
if (this.firstChildMeta.type === 'SimpleTableSelect' && this.selectionMode === SELECTION_MODE.MULTI) {
117+
this.propName = this.PCore$.getAnnotationUtils().getPropertyName(this.firstChildMeta.config.selectionList);
118+
} else {
119+
this.propName = this.PCore$.getAnnotationUtils().getPropertyName(this.firstChildMeta.config.value);
120+
}
121+
122+
const theRecreatedFirstChild = this.recreatedFirstChild();
123+
const viewsRegion = this.rawViewMetadata.children[1];
124+
if (viewsRegion?.name === 'Views' && viewsRegion.children.length) {
125+
this.childrenToRender = [theRecreatedFirstChild, ...this.children.slice(1)];
126+
} else {
127+
this.childrenToRender = [theRecreatedFirstChild];
128+
}
129+
}
130+
}
131+
132+
handleSelection(event) {
133+
const caseKey = this.pConn$.getCaseInfo().getKey();
134+
const refreshOptions = { autoDetectRefresh: true };
135+
if (this.canBeChangedInReviewMode && this.pConn$.getValue('__currentPageTabViewName')) {
136+
this.pConn$
137+
.getActionsApi()
138+
.refreshCaseView(caseKey, this.pConn$.getValue('__currentPageTabViewName'), null, refreshOptions);
139+
this.PCore$.getDeferLoadManager().refreshActiveComponents(this.pConn$.getContextName());
140+
} else {
141+
const pgRef = this.pConn$.getPageReference().replace('caseInfo.content', '');
142+
this.pConn$.getActionsApi().refreshCaseView(caseKey, this.viewName, pgRef, refreshOptions);
143+
}
144+
145+
// AutoComplete sets value on event.id whereas Dropdown sets it on event.target.value
146+
const propValue = event?.id || event?.target.value;
147+
if (propValue && this.canBeChangedInReviewMode && this.isDisplayModeEnabled) {
148+
this.PCore$.getDataApiUtils()
149+
.getCaseEditLock(caseKey)
150+
.then(caseResponse => {
151+
const pageTokens = this.pConn$.getPageReference().replace('caseInfo.content', '').split('.');
152+
let curr = {};
153+
const commitData = curr;
154+
155+
pageTokens.forEach(el => {
156+
if (el !== '') {
157+
curr[el] = {};
158+
curr = curr[el];
159+
}
160+
});
161+
162+
// expecting format like {Customer: {pyID:"C-100"}}
163+
const propArr = this.propName.split('.');
164+
propArr.forEach((element, idx) => {
165+
if (idx + 1 === propArr.length) {
166+
curr[element] = propValue;
167+
} else {
168+
curr[element] = {};
169+
curr = curr[element];
170+
}
171+
});
172+
173+
this.PCore$.getDataApiUtils()
174+
.updateCaseEditFieldsData(
175+
caseKey,
176+
{ [caseKey]: commitData },
177+
caseResponse.headers.etag,
178+
this.pConn$.getContextName()
179+
)
180+
.then(response => {
181+
this.PCore$.getContainerUtils().updateChildContainersEtag(
182+
this.pConn$.getContextName(),
183+
response.headers.etag
184+
);
185+
});
186+
});
187+
}
188+
};
189+
190+
// Re-create first child with overridden props
191+
// Memoized child in order to stop unmount and remount of the child component when data reference
192+
// rerenders without any actual change
193+
recreatedFirstChild() {
194+
const { type, config } = this.firstChildMeta;
195+
if (this.firstChildMeta?.type !== 'Region') {
196+
this.pConn$.clearErrorMessages({
197+
property: this.propName
198+
});
199+
if (!this.canBeChangedInReviewMode && this.isDisplayModeEnabled && this.selectionMode === SELECTION_MODE.SINGLE) {
200+
console.log('In SingleRef');
201+
return null;
202+
}
203+
204+
if (this.isDisplayModeEnabled && this.selectionMode === SELECTION_MODE.MULTI) {
205+
console.log('In multiRef');
206+
return null;
207+
}
208+
209+
// In the case of a datasource with parameters you cannot load the dropdown before the parameters
210+
if (type === 'Dropdown' && this.rawViewMetadata.config?.parameters && this.dropDownDataSource === null) {
211+
return null;
212+
}
213+
214+
return this.firstChildPConnect().createComponent({
215+
type,
216+
config: {
217+
...config,
218+
required: this.propsToUse.required,
219+
visibility: this.propsToUse.visibility,
220+
disabled: this.propsToUse.disabled,
221+
label: this.propsToUse.label,
222+
viewName: this.pConn$.getCurrentView(),
223+
parameters: this.rawViewMetadata.config.parameters,
224+
readOnly: false,
225+
localeReference: this.rawViewMetadata.config.localeReference,
226+
...(this.selectionMode === SELECTION_MODE.SINGLE ? { referenceType: this.referenceType } : ''),
227+
dataRelationshipContext: this.rawViewMetadata.config.contextClass && this.rawViewMetadata.config.name ? this.rawViewMetadata.config.name : null,
228+
hideLabel: this.hideLabel,
229+
onRecordChange: this.handleSelection
230+
}
231+
});
232+
}
233+
}
234+
235+
}

‎src/app/_components/_templates/list-view/list-view.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export class ListViewComponent implements OnInit {
3333

3434
@Input() pConn$: any;
3535
@Input() bInForm$: boolean = false;
36-
36+
@Input() payload;
3737

3838
repeatList$: MatTableDataSource<any>;
3939
fields$ : Array<any>;
@@ -134,7 +134,7 @@ export class ListViewComponent implements OnInit {
134134
this.searchIcon$ = this.utils.getImageSrc("search", this.PCore$.getAssetLoader().getStaticServerUrl());
135135

136136
// returns a promise
137-
const workListData = this.PCore$.getDataApiUtils().getData(refList, {});
137+
const workListData = this.PCore$.getDataApiUtils().getData(refList, this.payload);
138138

139139

140140

‎src/app/_components/_templates/promoted-filters/promoted-filters.component.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<div>
2+
<div>{{listViewProps.title}}</div>
3+
<div *ngIf="showFilters">
4+
<div *ngFor="let kid of processedFilters">
5+
<div [ngSwitch]="kid.getPConnect().getComponentName()">
6+
<app-text-input *ngSwitchCase="'TextInput'" [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-text-input>
7+
<app-currency *ngSwitchCase="'Currency'" [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-currency>
8+
<div *ngSwitchDefault >Region wants component not yet available: {{kid.getPConnect().getComponentName()}}</div>
9+
</div>
10+
</div>
11+
</div>
12+
13+
<div>
14+
<button key='1' type='button' (click)="clearFilterData()" data-testid='clear' mat-raised-button color="secondary">
15+
{{localizedVal('Clear', localeCategory)}}
16+
</button>
17+
<button style="float: 'right'" key='2' type='submit' (click)="getFilterData()" data-testid='search' mat-raised-button color="primary">
18+
{{localizedVal('Search', localeCategory)}}
19+
</button>
20+
</div>
21+
<div *ngIf="showTable">
22+
<app-list-view [pConn$]="pConn$" [payload]="payload"></app-list-view>
23+
</div>
24+
</div>

‎src/app/_components/_templates/promoted-filters/promoted-filters.component.scss‎

Whitespace-only changes.

‎src/app/_components/_templates/promoted-filters/promoted-filters.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
2+
3+
import { PromotedFiltersComponent } from './promoted-filters.component';
4+
5+
describe('PromotedFiltersComponent', () => {
6+
let component: PromotedFiltersComponent;
7+
let fixture: ComponentFixture<PromotedFiltersComponent>;
8+
9+
beforeEach(waitForAsync(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ PromotedFiltersComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(PromotedFiltersComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

0 commit comments

Comments
 (0)