From f85446d95025b89d0f7e6ecd8279c56b81c312e9 Mon Sep 17 00:00:00 2001 From: manasa Date: Fri, 15 May 2026 10:32:12 +0530 Subject: [PATCH] Query changes added --- .../components/field/Dropdown/Dropdown.tsx | 7 +- .../EmbeddedDataMulti/EmbeddedDataMulti.tsx | 121 ++++++++++++++++++ .../field/EmbeddedDataMulti/config-ext.json | 7 + .../field/EmbeddedDataMulti/index.tsx | 1 + .../field/Multiselect/Multiselect.tsx | 25 +++- .../src/components/field/Multiselect/utils.ts | 6 +- .../field/ObjectReference/ObjectReference.tsx | 60 +++++++++ .../components/template/ListView/ListView.tsx | 6 +- .../SimpleTableManual/SimpleTableManual.tsx | 66 +++++----- .../src/sdk-pega-component-map.js | 2 + 10 files changed, 265 insertions(+), 36 deletions(-) create mode 100644 packages/react-sdk-components/src/components/field/EmbeddedDataMulti/EmbeddedDataMulti.tsx create mode 100644 packages/react-sdk-components/src/components/field/EmbeddedDataMulti/config-ext.json create mode 100644 packages/react-sdk-components/src/components/field/EmbeddedDataMulti/index.tsx diff --git a/packages/react-sdk-components/src/components/field/Dropdown/Dropdown.tsx b/packages/react-sdk-components/src/components/field/Dropdown/Dropdown.tsx index 63ee518c..46dd7ac5 100644 --- a/packages/react-sdk-components/src/components/field/Dropdown/Dropdown.tsx +++ b/packages/react-sdk-components/src/components/field/Dropdown/Dropdown.tsx @@ -7,6 +7,7 @@ import { getDataPage } from '../../helpers/data_page'; import handleEvent from '../../helpers/event-utils'; import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map'; import type { PConnFieldProps } from '../../../types/PConnProps'; +import { useDeepMemo } from '../Multiselect/utils'; interface IOption { key: string; @@ -124,6 +125,10 @@ export default function Dropdown(props: DropdownProps) { } columns = preProcessColumns(columns); + const memoizedParameters = useDeepMemo(() => { + return parameters; + }, [parameters]); + useEffect(() => { if (theDatasource) { const list = Utils.getOptionList(props, getPConnect().getDataObject('')); // 1st arg empty string until typedef marked correctly @@ -156,7 +161,7 @@ export default function Dropdown(props: DropdownProps) { setOptions(optionsData); }); } - }, []); + }, [memoizedParameters]); const metaData = Array.isArray(fieldMetadata) ? fieldMetadata.filter(field => field?.classID === className)[0] : fieldMetadata; diff --git a/packages/react-sdk-components/src/components/field/EmbeddedDataMulti/EmbeddedDataMulti.tsx b/packages/react-sdk-components/src/components/field/EmbeddedDataMulti/EmbeddedDataMulti.tsx new file mode 100644 index 00000000..86173a1f --- /dev/null +++ b/packages/react-sdk-components/src/components/field/EmbeddedDataMulti/EmbeddedDataMulti.tsx @@ -0,0 +1,121 @@ +import type { PConnProps } from '../../../types/PConnProps'; + +interface EmbeddedDataMultiProps extends PConnProps { + addEditAction?: string; + addEditView?: string; + displayAs?: string; + editAction?: string; + editMode?: string; + editType?: string; + editView?: string; + readOnly?: boolean; + repeatingView?: string; + targetObjectClass?: string; + useSeparateActionForEdit?: boolean; + useSeparateViewForEdit?: boolean; +} + +export default function EmbeddedDataMulti(props: EmbeddedDataMultiProps) { + const { + getPConnect, + addEditAction, + addEditView, + displayAs, + editAction, + editMode, + editType, + editView, + readOnly = false, + repeatingView, + targetObjectClass, + useSeparateActionForEdit, + useSeparateViewForEdit + } = props; + + const pConn = getPConnect(); + const rawMetadata = pConn.getRawMetadata() as any; + const rawMetadataConfig = rawMetadata?.config; + + if (!rawMetadataConfig) { + return null; + } + + const renderMode = readOnly ? 'ReadOnly' : 'Editable'; + + let columnsChildren; + if (displayAs === 'table' || displayAs === 'simpleTable') { + columnsChildren = [ + { + children: rawMetadataConfig.columns || [], + name: 'Columns', + type: 'Region' + } + ]; + } + + let regionWithView: unknown[] = []; + if (displayAs === 'repeatingView') { + regionWithView = [ + { + children: [ + { + type: 'reference', + config: { + type: 'view', + name: repeatingView + } + } + ], + name: 'view', + type: 'Region' + } + ]; + } + + const { pagelistValue } = rawMetadataConfig; + const authorContext = pagelistValue?.startsWith('@P') ? pagelistValue?.substring(3) : pagelistValue; + + const simpleTableComponent = pConn.createComponent({ + type: 'View', + config: { + template: 'SimpleTable', + type: 'multirecordlist', + authorContext, + name: authorContext?.substring(1), + renderMode, + multiRecordDisplayAs: displayAs === 'repeatingView' ? 'fieldGroup' : displayAs, + referenceList: pagelistValue, + contextClass: targetObjectClass, + editMode, + editModeConfig: { + editType, + defaultView: addEditView, + defaultAction: addEditAction, + useSeparateViewForEdit, + useSeparateActionForEdit, + editView, + editAction + }, + label: rawMetadataConfig.label, + children: columnsChildren, + displayField: rawMetadataConfig.displayField, + uniqueField: rawMetadataConfig.uniqueField, + targetClassLabel: rawMetadataConfig.targetClassLabel, + targetClassLabelOption: rawMetadataConfig.targetClassLabelOption, + fieldHeader: rawMetadataConfig.repeatingViewHeadingSource, + heading: rawMetadataConfig.repeatingViewHeading, + allowActions: { + allowAdd: rawMetadataConfig.allowAdd ?? true, + allowEdit: rawMetadataConfig.allowEdit ?? true, + allowDelete: rawMetadataConfig.allowDelete ?? true, + allowDragDrop: rawMetadataConfig.allowDragDrop ?? true + }, + allowRowDelete: rawMetadataConfig.allowRowDelete ?? true, + allowRowEdit: rawMetadataConfig.allowRowEdit ?? true, + displayAs: displayAs === 'repeatingView' ? 'fieldGroup' : displayAs + }, + children: regionWithView + } as any); + + return <>{simpleTableComponent}; +} diff --git a/packages/react-sdk-components/src/components/field/EmbeddedDataMulti/config-ext.json b/packages/react-sdk-components/src/components/field/EmbeddedDataMulti/config-ext.json new file mode 100644 index 00000000..d6845d20 --- /dev/null +++ b/packages/react-sdk-components/src/components/field/EmbeddedDataMulti/config-ext.json @@ -0,0 +1,7 @@ +{ + "name": "EmbeddedDataMulti", + "description": "Embedded Data Multi", + "type": "Field", + "subtype": "EMBEDDEDDATA", + "properties": [] +} diff --git a/packages/react-sdk-components/src/components/field/EmbeddedDataMulti/index.tsx b/packages/react-sdk-components/src/components/field/EmbeddedDataMulti/index.tsx new file mode 100644 index 00000000..74ef639b --- /dev/null +++ b/packages/react-sdk-components/src/components/field/EmbeddedDataMulti/index.tsx @@ -0,0 +1 @@ +export { default } from './EmbeddedDataMulti'; diff --git a/packages/react-sdk-components/src/components/field/Multiselect/Multiselect.tsx b/packages/react-sdk-components/src/components/field/Multiselect/Multiselect.tsx index 4b869805..553fca82 100644 --- a/packages/react-sdk-components/src/components/field/Multiselect/Multiselect.tsx +++ b/packages/react-sdk-components/src/components/field/Multiselect/Multiselect.tsx @@ -44,13 +44,32 @@ export default function Multiselect(props) { } ]; let secondaryColumns: any = []; - if (secondaryFields) { - secondaryColumns = secondaryFields.map(secondaryField => ({ - value: secondaryField, + // Read columnsFormatter from raw (unresolved) metadata to get field property paths + // (e.g. "@P .pyLabel") instead of resolved data values (e.g. "New Complex Fields"). + // This matches Constellation's approach: pConn.getRawMetadata()?.config?.columnsFormatter + const columnsFormatter = (getPConnect().getRawMetadata()?.config as any)?.columnsFormatter; + const secondaryFieldsFromFormatter = columnsFormatter + ? columnsFormatter + .map(item => { + const property = item?.config?.value; + if (typeof property === 'string') { + if (property.startsWith('@USER ')) return property.substring(6); + if (property.startsWith('@P ')) return property.substring(3); + return property; + } + return undefined; + }) + .filter(Boolean) + : undefined; + const updatedSecondaryFields = secondaryFieldsFromFormatter || secondaryFields; + if (updatedSecondaryFields) { + secondaryColumns = updatedSecondaryFields.map(secondaryField => ({ + value: typeof secondaryField === 'string' ? secondaryField : undefined, display: 'true', secondary: 'true', useForSearch: 'true' })); + secondaryColumns = secondaryColumns.filter(col => col.value); } else { secondaryColumns = [ { diff --git a/packages/react-sdk-components/src/components/field/Multiselect/utils.ts b/packages/react-sdk-components/src/components/field/Multiselect/utils.ts index 02ea58f9..8938fe88 100644 --- a/packages/react-sdk-components/src/components/field/Multiselect/utils.ts +++ b/packages/react-sdk-components/src/components/field/Multiselect/utils.ts @@ -22,8 +22,10 @@ const useDeepMemo = (memoFn, key) => { const preProcessColumns = columns => { return columns?.map(col => { const tempColObj = { ...col }; - tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value; - if (tempColObj.setProperty) { + if (typeof col.value === 'string') { + tempColObj.value = col.value.startsWith('.') ? col.value.substring(1) : col.value; + } + if (typeof col.setProperty === 'string') { tempColObj.setProperty = col.setProperty && col.setProperty.startsWith('.') ? col.setProperty.substring(1) : col.setProperty; } return tempColObj; diff --git a/packages/react-sdk-components/src/components/field/ObjectReference/ObjectReference.tsx b/packages/react-sdk-components/src/components/field/ObjectReference/ObjectReference.tsx index df5f6f7d..4650b126 100644 --- a/packages/react-sdk-components/src/components/field/ObjectReference/ObjectReference.tsx +++ b/packages/react-sdk-components/src/components/field/ObjectReference/ObjectReference.tsx @@ -296,6 +296,15 @@ export default function ObjectReference(props: ObjectReferenceProps) { return getPConnect().createComponent({ type: 'SimpleTableSelect', config: { + ...(mode === 'single' + ? { + selectionKey: rawViewMetadata.config.value, + value: rawViewMetadata.config.value, + contextPage: rawViewMetadata.config.contextPage + } + : { + readonlyContextList: rawViewMetadata.config.pagelistValue + }), dataRelationshipContext: contextPageValue, defaultRowHeight: rawViewMetadata.config.defaultRowHeight, displayAs: tableDisplayAs, @@ -466,6 +475,52 @@ export default function ObjectReference(props: ObjectReferenceProps) { return getPConnect().createComponent(componentMeta); }; + const buildEmbeddedInsightTableChild = (rawConfig: any, referenceType: string, propsToUse: any) => { + const insightModel = propsToUse.insightModel; + const insightColumns: any[] = insightModel?.query?.columns ?? []; + + const columnChildren = insightColumns + .filter((col: any) => col.type === 'column' && col.field) + .map((col: any) => ({ + type: 'TextInput', + config: { + value: `@P .${col.field.fieldID}`, + label: col.field.name || col.field.fieldID + } + })); + + const presets = [ + { + children: [{ children: columnChildren, name: 'Columns', type: 'Region' }], + config: {}, + id: 'P_', + label: '', + name: 'presets', + template: 'Table' + } + ]; + console.log('Building EmbeddedInsightTable child with config', rawConfig); + const componentMeta = { + type: 'SimpleTableManual', + config: { + contextClass: rawConfig.targetObjectClass, + presets, + label: propsToUse.label, + readonlyContextList: rawConfig.pagelistValue, + referenceList: rawConfig.pagelistValue, + renderMode: 'ReadOnly', + dataPageName: rawConfig.referenceList, + fieldMetadata: { + datasource: { + parameters: rawConfig.parameters ?? {} + } + } + } + }; + + return getPConnect().createComponent(componentMeta); + }; + const recreatedFirstChild = useMemo(() => { const type = rawViewMetadata.config.componentType; @@ -497,6 +552,11 @@ export default function ObjectReference(props: ObjectReferenceProps) { return buildCardsChild(); } + // EmbeddedInsightTable type + if (type === 'EmbeddedInsightTable') { + return buildEmbeddedInsightTableChild(rawViewMetadata.config, referenceType, propsToUse); + } + if (type === 'CheckboxGroup') { const displayField = rawViewMetadata.config.displayField; const primaryField = displayField?.startsWith('@P') ? displayField?.substring(3) : displayField; diff --git a/packages/react-sdk-components/src/components/template/ListView/ListView.tsx b/packages/react-sdk-components/src/components/template/ListView/ListView.tsx index ff9d458a..3c9f11eb 100644 --- a/packages/react-sdk-components/src/components/template/ListView/ListView.tsx +++ b/packages/react-sdk-components/src/components/template/ListView/ListView.tsx @@ -56,6 +56,7 @@ interface ListViewProps extends PConnProps { compositeKeys?: any; showDynamicFields?: boolean; readonlyContextList?: any; + selectedValues?: any; value: any; viewName?: string; showRecords?: boolean; @@ -88,11 +89,14 @@ export default function ListView(props: ListViewProps) { compositeKeys, showDynamicFields, viewName, - readonlyContextList: selectedValues, + readonlyContextList, + selectedValues: selectedValuesProp, value, displayAs, localeReference } = props; + // Use selectedValues prop (passed from SimpleTableSelect) with fallback to readonlyContextList + const selectedValues = selectedValuesProp ?? readonlyContextList; let { showRecords } = props; const ref = useRef({}).current; const cosmosTableRef = useRef(null); diff --git a/packages/react-sdk-components/src/components/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx b/packages/react-sdk-components/src/components/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx index 60ab5bcf..c56b12fa 100644 --- a/packages/react-sdk-components/src/components/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx +++ b/packages/react-sdk-components/src/components/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx @@ -55,6 +55,7 @@ interface SimpleTableManualProps extends PConnProps { viewForEditModal: any; validatemessage?: string; required?: boolean; + targetClassLabel?: string; } const useStyles = makeStyles((/* theme */) => ({ @@ -128,10 +129,11 @@ export default function SimpleTableManual(props: PropsWithChildren[]>([]); const [elements, setElementsData] = useState([]); const [order, setOrder] = useState('asc'); const [orderBy, setOrderBy] = useState(''); @@ -190,7 +192,9 @@ export default function SimpleTableManual(props: PropsWithChildren { @@ -238,6 +242,8 @@ export default function SimpleTableManual(props: PropsWithChildren col !== 'DeleteIcon'); + const getFormattedValue = (val, key) => { const rawField = fieldsWithPropNames.find(item => item.propName === key); let options = {}; @@ -270,7 +276,7 @@ export default function SimpleTableManual(props: PropsWithChildren { - return displayedColumns.reduce((dataForRow, colKey) => { + return dataColumns.reduce((dataForRow, colKey) => { dataForRow[colKey] = getRowValue(item, colKey); return dataForRow; }, {}); @@ -279,7 +285,7 @@ export default function SimpleTableManual(props: PropsWithChildren { const data = formatRowsData(listData); @@ -296,7 +302,7 @@ export default function SimpleTableManual(props: PropsWithChildren { - if (allowEditingInModal && defaultView) { - pConn - .getActionsApi() + if (allowEditingInModal && (defaultView || defaultActionId)) { + pConn.getActionsApi().openEmbeddedDataModal( + defaultView, // @ts-expect-error - .openEmbeddedDataModal(defaultView, pConn, referenceListStr, referenceList.length, PCore.getConstants().RESOURCE_STATUS.CREATE); + pConn, + referenceListStr, + referenceList.length, + PCore.getConstants().RESOURCE_STATUS.CREATE, + targetClassLabel, + editType, + defaultActionId + ); } else { pConn.getListActions().insert({ classID: contextClass }, referenceList.length); } @@ -341,16 +354,17 @@ export default function SimpleTableManual(props: PropsWithChildren { setEditAnchorEl(null); if (typeof selectedRowIndex.current === 'number') { - pConn - .getActionsApi() + pConn.getActionsApi().openEmbeddedDataModal( + bUseSeparateViewForEdit ? editView : defaultView, // @ts-expect-error - .openEmbeddedDataModal( - bUseSeparateViewForEdit ? editView : defaultView, - pConn, - referenceListStr, - selectedRowIndex.current, - PCore.getConstants().RESOURCE_STATUS.UPDATE - ); + pConn, + referenceListStr, + selectedRowIndex.current, + PCore.getConstants().RESOURCE_STATUS.UPDATE, + targetClassLabel, + editType, + editActionId + ); } }; @@ -434,12 +448,7 @@ export default function SimpleTableManual(props: PropsWithChildren { - newElements[index] = elements[el[1]]; - }); - return newElements; + return stabilizedThis.map(el => el[0]); } function _menuClick(event, columnId: string, columnType: string, labelValue: string) { @@ -691,11 +700,10 @@ export default function SimpleTableManual(props: PropsWithChildren { return ( - {row.map((item, childIndex) => { - const theColKey = displayedColumns[childIndex]; + {Object.keys(row).map(colKey => { return ( - - {item} + + {row[colKey] || '---'} ); })} diff --git a/packages/react-sdk-components/src/sdk-pega-component-map.js b/packages/react-sdk-components/src/sdk-pega-component-map.js index 860731e2..d06204a5 100644 --- a/packages/react-sdk-components/src/sdk-pega-component-map.js +++ b/packages/react-sdk-components/src/sdk-pega-component-map.js @@ -42,6 +42,7 @@ import DetailsTwoColumn from './components/template/Details/DetailsTwoColumn/Det import Dropdown from './components/field/Dropdown'; import DynamicTabs from './components/template/Details/DynamicTabs'; import Email from './components/field/Email/Email'; +import EmbeddedDataMulti from './components/field/EmbeddedDataMulti'; import ErrorBoundary from './components/infra/ErrorBoundary'; import FieldGroup from './components/designSystemExtension/FieldGroup'; import FieldGroupList from './components/designSystemExtension/FieldGroupList'; @@ -167,6 +168,7 @@ const pegaSdkComponentMap = { Dropdown, DynamicTabs, Email, + EmbeddedDataMulti, ErrorBoundary, FieldGroup, FieldGroupList,