From e967707c18dc32fe3fff6e3c17325a00b94114d8 Mon Sep 17 00:00:00 2001 From: Vishal Date: Tue, 31 Oct 2023 20:34:29 +0530 Subject: [PATCH 1/2] Add link a Case not working --- .../tests/e2e/MediaCo/portal.spec.js | 6 +- .../infra/defer-load/defer-load.component.ts | 34 ++-- .../list-page/list-page.component.html | 2 +- .../list-view/list-view.component.html | 14 +- .../list-view/list-view.component.scss | 17 +- .../template/list-view/list-view.component.ts | 168 ++++++++++++------ 6 files changed, 152 insertions(+), 89 deletions(-) diff --git a/packages/angular-sdk-components/tests/e2e/MediaCo/portal.spec.js b/packages/angular-sdk-components/tests/e2e/MediaCo/portal.spec.js index 316cff89..281543ed 100644 --- a/packages/angular-sdk-components/tests/e2e/MediaCo/portal.spec.js +++ b/packages/angular-sdk-components/tests/e2e/MediaCo/portal.spec.js @@ -6,7 +6,7 @@ const endpoints = require('../../../../../sdk-config.json'); test.beforeEach(async ({ page }) => { await page.setViewportSize({ width: 1920, height: 1080 }); - await page.goto('http://localhost:3500/portal', { waitUntil: 'networkidle' }); + await page.goto(config.config.baseUrl, { waitUntil: 'networkidle' }); }); let caseID; test.describe('E2E test', () => { @@ -146,7 +146,7 @@ test.describe('E2E test', () => { const worklist = page.locator('div[id="worklist"]:has-text("My Worklist")'); await expect(worklist).toBeVisible(); - const caseButton = page.locator(`span:has-text('${caseID}')`); + const caseButton = page.locator(`button:has-text('${caseID}')`); await caseButton.click(); const mgrDiscountInput = page.locator('input[data-test-id="D69ECA63310344EDB0D0F9881CF9B662"]'); @@ -167,7 +167,7 @@ test.describe('E2E test', () => { const worklist = page.locator('div[id="worklist"]:has-text("My Worklist")'); await expect(worklist).toBeVisible(); - const caseButton = page.locator(`span:has-text('${caseID}')`); + const caseButton = page.locator(`button:has-text('${caseID}')`); await caseButton.click(); const tvConnected = page.locator('mat-checkbox[data-test-id="EEF2AA5E42FD9F0FB0A44EA0B2D52921"]'); diff --git a/projects/angular-sdk-library/src/lib/_components/infra/defer-load/defer-load.component.ts b/projects/angular-sdk-library/src/lib/_components/infra/defer-load/defer-load.component.ts index faafae0c..54b847a5 100644 --- a/projects/angular-sdk-library/src/lib/_components/infra/defer-load/defer-load.component.ts +++ b/projects/angular-sdk-library/src/lib/_components/infra/defer-load/defer-load.component.ts @@ -32,7 +32,7 @@ export class DeferLoadComponent implements OnInit { angularPConnectData: any = {}; constants: any; - currentLoadedAssignment = ""; + currentLoadedAssignment = ''; isContainerPreview: boolean; loadViewCaseID: any; resourceType: any; @@ -53,12 +53,6 @@ export class DeferLoadComponent implements OnInit { this.PCore$ = window.PCore; } this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange); - - const { CASE, PAGE, DATA } = this.constants.RESOURCE_TYPES; - this.CASE = CASE; - this.PAGE = PAGE; - this.DATA = DATA; - this.loadActiveTab(); } @@ -79,7 +73,6 @@ export class DeferLoadComponent implements OnInit { } ngOnChanges() { - this.loadViewCaseID = this.pConn$.getValue(this.constants.PZINSKEY) || this.pConn$.getValue(this.constants.CASE_INFO.CASE_INFO_ID); let containerItemData; const targetName = this.pConn$.getTarget(); @@ -87,6 +80,11 @@ export class DeferLoadComponent implements OnInit { this.containerName = this.PCore$.getContainerUtils().getActiveContainerItemName(targetName); containerItemData = this.PCore$.getContainerUtils().getContainerItemData(targetName, this.containerName); } + const { CASE, PAGE, DATA } = this.constants.RESOURCE_TYPES; + this.CASE = CASE; + this.PAGE = PAGE; + this.DATA = DATA; + const { resourceType = this.CASE } = containerItemData || { resourceType: this.loadViewCaseID ? this.CASE : this.PAGE }; this.resourceType = resourceType; this.isContainerPreview = /preview_[0-9]*/g.test(this.pConn$.getContextName()); @@ -126,7 +124,7 @@ export class DeferLoadComponent implements OnInit { } }; const configObject = this.PCore$.createPConnect(config); - configObject.getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT') + configObject.getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT'); this.loadedPConn$ = ReferenceComponent.normalizePConn(configObject.getPConnect()); this.componentName$ = this.loadedPConn$.getComponentName(); if (this.deferLoadId) { @@ -134,18 +132,14 @@ export class DeferLoadComponent implements OnInit { } } // this.cdRef.detectChanges(); - }; + } loadActiveTab() { if (this.resourceType === this.DATA) { // Rendering defer loaded tabs in data context if (this.containerName) { const dataContext = this.PCore$.getStoreValue('.dataContext', 'dataInfo', this.containerName); - const dataContextParameters = this.PCore$.getStoreValue( - '.dataContextParameters', - 'dataInfo', - this.containerName - ); + const dataContextParameters = this.PCore$.getStoreValue('.dataContextParameters', 'dataInfo', this.containerName); this.pConn$ .getActionsApi() @@ -153,7 +147,7 @@ export class DeferLoadComponent implements OnInit { skipSemanticUrl: true, isDeferLoaded: true }) - .then(data => { + .then((data) => { this.onResponse(data); }); } else { @@ -164,12 +158,14 @@ export class DeferLoadComponent implements OnInit { this.pConn$ .getActionsApi() .loadView(encodeURI(this.loadViewCaseID), this.name, this.getViewOptions()) - .then(data => { + .then((data) => { this.onResponse(data); }); } else { - this.pConn$.getActionsApi().refreshCaseView(encodeURI(this.loadViewCaseID), this.name) - .then(data => { + this.pConn$ + .getActionsApi() + .refreshCaseView(encodeURI(this.loadViewCaseID), this.name) + .then((data) => { this.onResponse(data.root); }); } diff --git a/projects/angular-sdk-library/src/lib/_components/template/list-page/list-page.component.html b/projects/angular-sdk-library/src/lib/_components/template/list-page/list-page.component.html index 2d5b85e5..7cb46fdb 100644 --- a/projects/angular-sdk-library/src/lib/_components/template/list-page/list-page.component.html +++ b/projects/angular-sdk-library/src/lib/_components/template/list-page/list-page.component.html @@ -1 +1 @@ - + diff --git a/projects/angular-sdk-library/src/lib/_components/template/list-view/list-view.component.html b/projects/angular-sdk-library/src/lib/_components/template/list-view/list-view.component.html index 498aea5f..8dcb02f2 100644 --- a/projects/angular-sdk-library/src/lib/_components/template/list-view/list-view.component.html +++ b/projects/angular-sdk-library/src/lib/_components/template/list-view/list-view.component.html @@ -1,11 +1,11 @@
- Search + Search -
+
@@ -40,12 +40,12 @@ *ngIf="_showButton(dCol.config.name, dCol); else regular" mat-button color="primary" - (click)="_listViewClick(dCol.config.name, element[dCol.config.name], i)" + (click)="_listViewClick(dCol.config, element)" > {{ element[dCol.config.name] }} - {{ element[dCol.config.name] }} + {{ element[dCol.config.name] || "---" }} @@ -104,7 +104,7 @@ *ngIf="_showButton(dCol.config.name, dCol); else regular" mat-button color="primary" - (click)="_listViewClick(dCol.config.name, element[dCol.config.name], i)" + (click)="_listViewClick(dCol.config, element)" > {{ element[dCol.config.name] }} @@ -135,7 +135,7 @@ -
+
@@ -159,7 +159,7 @@ - +
diff --git a/projects/angular-sdk-library/src/lib/_components/template/list-view/list-view.component.scss b/projects/angular-sdk-library/src/lib/_components/template/list-view/list-view.component.scss index 86fc7cc0..7c013eee 100644 --- a/projects/angular-sdk-library/src/lib/_components/template/list-view/list-view.component.scss +++ b/projects/angular-sdk-library/src/lib/_components/template/list-view/list-view.component.scss @@ -63,17 +63,19 @@ td.mat-mdc-footer-cell { .psdk-search { padding-left: 0.625rem; + padding-right: 0.625rem; } .psdk-icon-search { vertical-align: sub; - padding: 0rem 0.125rem; + padding: 0.125rem 0.125rem; min-width: unset; width: 1.1rem; } .psdk-outer-div-in-form { - display: inline-grid; + padding: 1rem; + overflow: hidden; } .psdk-inner-div-in-form { @@ -145,7 +147,7 @@ td.mat-mdc-footer-cell { } tr.mat-mdc-row { - cursor: pointer; + // cursor: pointer; } .psdk-no-records { @@ -156,3 +158,12 @@ tr.mat-mdc-row { border: 1px solid lightgray; border-top: none; } + +.psdk-table-field-link{ + color: $app-primary-color; + padding: 0; + cursor: pointer; + border: 0; + background-color: transparent; + align-items: center; +} diff --git a/projects/angular-sdk-library/src/lib/_components/template/list-view/list-view.component.ts b/projects/angular-sdk-library/src/lib/_components/template/list-view/list-view.component.ts index a42e0876..a7ebde75 100644 --- a/projects/angular-sdk-library/src/lib/_components/template/list-view/list-view.component.ts +++ b/projects/angular-sdk-library/src/lib/_components/template/list-view/list-view.component.ts @@ -64,7 +64,7 @@ export class ListViewComponent implements OnInit { @ViewChild(MatSort) sort: MatSort; @Input() pConn$: any; - @Input() bInForm$: boolean = false; + @Input() bInForm$: boolean = true; @Input() payload; PCore$: any; @@ -72,7 +72,7 @@ export class ListViewComponent implements OnInit { repeatList$: MatTableDataSource; fields$: Array; - displayedColumns$ = Array(); + displayedColumns$ = Array(); groupByColumns$: Array = []; configProps: any; @@ -127,6 +127,7 @@ export class ListViewComponent implements OnInit { rowID: any; response: any; compositeKeys: any; + showDynamicFields: any; constructor(private psService: ProgressSpinnerService, private utils: Utils) {} @@ -144,6 +145,7 @@ export class ListViewComponent implements OnInit { this.bShowSearch$ = this.utils.getBooleanValue(this.configProps.globalSearch); this.bColumnReorder$ = this.utils.getBooleanValue(this.configProps.reorderFields); this.bGrouping$ = this.utils.getBooleanValue(this.configProps.grouping); + this.showDynamicFields = this.configProps?.showDynamicFields; this.menuSvgIcon$ = this.utils.getImageSrc('more', this.utils.getSDKStaticContentUrl()); this.arrowDownSvgIcon$ = this.utils.getImageSrc('arrow-down', this.utils.getSDKStaticContentUrl()); @@ -162,45 +164,62 @@ export class ListViewComponent implements OnInit { this.getListData(); } + getFieldsMetadata(refList) { + return this.PCore$.getAnalyticsUtils().getDataViewMetadata(refList, this.showDynamicFields); + } + getListData() { const componentConfig = this.pConn$.getComponentConfig(); if (this.configProps) { const refList = this.configProps?.referenceList; - + const fieldsMetaDataPromise = this.getFieldsMetadata(refList); // returns a promise - const workListData = this.PCore$.getDataApiUtils().getData(refList, this.payload); + const workListDataPromise = this.PCore$.getDataApiUtils().getData(refList, this.payload); this.bShowFilterPopover$ = false; - workListData.then((workListJSON: Object) => { - // don't update these fields until we return from promise - this.fields$ = this.configProps.presets[0].children[0].children; - // this is an unresovled version of this.fields$, need unresolved, so can get the property reference - let columnFields = componentConfig.presets[0].children[0].children; - - const tableDataResults = workListJSON['data'].data; - - this.displayedColumns$ = this.getDisplayColums(columnFields); - this.fields$ = this.updateFields(this.fields$, this.displayedColumns$); - this.response = tableDataResults; - this.updatedRefList = this.updateData(tableDataResults, this.fields$); - if (this.selectionMode === SELECTION_MODE.SINGLE && this.updatedRefList?.length > 0) { - this.displayedColumns$?.unshift('select'); - this.singleSelectionMode = true; - } else if (this.selectionMode === SELECTION_MODE.MULTI && this.updatedRefList?.length > 0) { - this.displayedColumns$?.unshift('select'); - this.multiSelectionMode = true; - } + this.psService.sendMessage(true); + + Promise.all([fieldsMetaDataPromise, workListDataPromise]) + .then((results: any) => { + const fieldsMetaData = results[0]; + const workListData = results[1]; + + this.fields$ = this.configProps.presets[0].children[0].children; + // this is an unresovled version of this.fields$, need unresolved, so can get the property reference + let columnFields = componentConfig.presets[0].children[0].children; + + const tableDataResults = workListData['data'].data; + + const columns = this.getDisplayColumns(columnFields, fieldsMetaData.data.fields, this.fields$); + this.fields$ = this.updateFields(this.fields$, fieldsMetaData.data.fields, columns); + this.displayedColumns$ = columns.map((col) => { + return col.id; + }); + this.response = tableDataResults; + this.updatedRefList = this.updateData(tableDataResults, this.fields$); + if (this.selectionMode === SELECTION_MODE.SINGLE && this.updatedRefList?.length > 0) { + this.displayedColumns$?.unshift('select'); + this.singleSelectionMode = true; + } else if (this.selectionMode === SELECTION_MODE.MULTI && this.updatedRefList?.length > 0) { + this.displayedColumns$?.unshift('select'); + this.multiSelectionMode = true; + } - this.repeatList$ = new MatTableDataSource(this.updatedRefList); - this.repeatList$.filterPredicate = this.customFilterPredicate.bind(this); + this.repeatList$ = new MatTableDataSource(this.updatedRefList); + this.repeatList$.filterPredicate = this.customFilterPredicate.bind(this); - // keeping an original copy to get back after possible sorts, filters and groupBy - this.repeatListData = this.repeatList$.data.slice(); + // keeping an original copy to get back after possible sorts, filters and groupBy + this.repeatListData = this.repeatList$.data.slice(); - this.repeatList$.paginator = this.paginator; - this.repeatList$.sort = this.sort; - }); + this.repeatList$.paginator = this.paginator; + this.repeatList$.sort = this.sort; + this.psService.sendMessage(false); + }) + .catch(() => { + console.error("Couldn't fetch either the fieldsMetaData or workListData"); + this.psService.sendMessage(false); + }); } } @@ -228,10 +247,10 @@ export class ListViewComponent implements OnInit { moveItemInArray(this.displayedColumns$, event.previousIndex, event.currentIndex); } - updateFields(arFields, arColumns): Array { + updateFields(arFields, arColumns, fields): Array { let arReturn = arFields; for (let i in arReturn) { - arReturn[i].config.name = arColumns[i]; + arReturn[i].config = { ...arReturn[i].config, ...fields[i], name: fields[i].id }; } return arReturn; @@ -291,14 +310,14 @@ export class ListViewComponent implements OnInit { this.pConn$?.getListActions()?.setSelectedRows([reqObj]); } - rowClick(row) { - switch (this.configProps.rowClickAction) { - case 'openAssignment': - this.psService.sendMessage(true); - this.openAssignment(row); - break; - } - } + // rowClick(row) { + // switch (this.configProps.rowClickAction) { + // case 'openAssignment': + // this.psService.sendMessage(true); + // this.openAssignment(row); + // break; + // } + // } _getIconStyle(level): string { let sReturn = ''; @@ -340,14 +359,32 @@ export class ListViewComponent implements OnInit { return bReturn; } - _listViewClick(name, value, index) { - switch (name) { - case 'pxTaskLabel': - this.openAssignment(this.repeatList$.data[index]); - break; - case 'pxRefObjectInsName': - this.openWork(this.repeatList$.data[index]); - break; + _listViewClick(column, row) { + const name = column.id; + if (column.displayAsLink) { + const { pxObjClass } = row; + let { pzInsKey } = row; + if (column.isAssociation) { + const associationCategory = name.split(':')[0]; + pzInsKey = row[`${associationCategory}:pzInsKey`]; + } + if (column.isAssignmentLink) { + this.pConn$.getActionsApi().openAssignment(pzInsKey, pxObjClass, { + containerName: 'primary', + channelName: '' + }); + } else { + this.pConn$.getActionsApi().openWorkByHandle(pzInsKey, pxObjClass); + } + } else { + switch (name) { + case 'pxTaskLabel': + this.openAssignment(row); + break; + case 'pxRefObjectInsName': + this.openWork(row); + break; + } } } @@ -957,9 +994,9 @@ export class ListViewComponent implements OnInit { } openWork(row) { - const { pxRefObjectClass, pxRefObjectKey } = row; - - if (pxRefObjectClass != '' && pxRefObjectKey != '') { + const pxRefObjectClass = row.pxRefObjectClass || row.pxObjClass; + const { pxRefObjectKey } = row; + if (pxRefObjectClass !== '' && pxRefObjectKey !== '') { this.pConn$.getActionsApi().openWorkByHandle(pxRefObjectKey, pxRefObjectClass); } } @@ -999,14 +1036,33 @@ export class ListViewComponent implements OnInit { })); } - getDisplayColums(fields = []) { - let arReturn = fields.map((field, colIndex) => { + // eslint-disable-next-line @typescript-eslint/default-param-last + getDisplayColumns(colFields = [], fields, presetFields) { + const AssignDashObjects = ['Assign-Worklist', 'Assign-WorkBasket']; + const arReturn = colFields.map((field: any, index) => { let theField = field.config.value.substring(field.config.value.indexOf(' ') + 1); - if (theField.indexOf('.') == 0) { + if (theField.indexOf('.') === 0) { theField = theField.substring(1); } - - return theField; + const colIndex = fields.findIndex(ele => ele.fieldID === theField); + const displayAsLink = field.config.displayAsLink; + const headerRow: any = {}; + headerRow.id = theField; + headerRow.type = field.type; + headerRow.displayAsLink = displayAsLink; + headerRow.numeric = field.type === 'Decimal' || field.type === 'Integer' || field.type === 'Percentage' || field.type === 'Currency' || false; + headerRow.disablePadding = false; + headerRow.label = presetFields[index].config.label; + if(colIndex >= 0){ + headerRow.classID = fields[colIndex].classID; + } + if (displayAsLink) { + headerRow.isAssignmentLink = AssignDashObjects.includes(headerRow.classID); + if (field.config.value?.startsWith('@CA')) { + headerRow.isAssociation = true; + } + } + return headerRow; }); return arReturn; } From 6f20de8c78abe18bbc91e9f555923d44afc52d93 Mon Sep 17 00:00:00 2001 From: Vishal Date: Tue, 31 Oct 2023 20:38:53 +0530 Subject: [PATCH 2/2] Fix an issue with ToDo component --- .../src/lib/_components/widget/todo/todo.component.html | 4 ++-- .../src/lib/_components/widget/todo/todo.component.scss | 7 ++++++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/projects/angular-sdk-library/src/lib/_components/widget/todo/todo.component.html b/projects/angular-sdk-library/src/lib/_components/widget/todo/todo.component.html index c12043cf..aee1ecca 100644 --- a/projects/angular-sdk-library/src/lib/_components/widget/todo/todo.component.html +++ b/projects/angular-sdk-library/src/lib/_components/widget/todo/todo.component.html @@ -14,8 +14,8 @@
{{ getAssignmentName(assignment) }}
-
- {{ localizedVal('Task in', localeCategory) }} {{ assignment.name }} {{ getID(assignment) }} +
+ Task in • {{ assignment?.status }} diff --git a/projects/angular-sdk-library/src/lib/_components/widget/todo/todo.component.scss b/projects/angular-sdk-library/src/lib/_components/widget/todo/todo.component.scss index c76a4261..d7eef6d2 100644 --- a/projects/angular-sdk-library/src/lib/_components/widget/todo/todo.component.scss +++ b/projects/angular-sdk-library/src/lib/_components/widget/todo/todo.component.scss @@ -31,6 +31,12 @@ .psdk-todo-id { color: $app-primary-color; + padding: 0; + cursor: pointer; + border: 0; + background-color: transparent; + align-items: center; + } .psdk-avatar { @@ -75,7 +81,6 @@ .psdk-todo-assignment-task { color: $app-neutral-color; - cursor: pointer; } .psdk-todo-assignment-action {