@pega/dx-component-builder-sdk 0.242.4 → 0.242.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/tasks/create/templates/Constellation/field/Decimal/index.tsx.mustache +6 -3
- package/src/tasks/create/templates/Constellation/field/Decimal-Currency/index.tsx.mustache +3 -1
- package/src/tasks/create/templates/Constellation/field/Decimal-Percentage/index.tsx.mustache +5 -2
- package/src/tasks/create/templates/Constellation/field/Picklist-Autocomplete/index.tsx.mustache +52 -10
- package/src/tasks/create/templates/Constellation/field/Picklist-Autocomplete/utils.ts.mustache +1 -1
- package/src/tasks/create/templates/Constellation/template/DETAILS/Avatar.tsx.mustache +7 -5
- package/src/tasks/create/templates/Constellation/template/DETAILS-region/Avatar.tsx.mustache +7 -5
- package/src/tasks/create/templates/Constellation/widget/PAGE-CASE/Avatar.tsx.mustache +7 -5
- package/src/tasks/create/templates/SDK-React/field/Decimal/index.tsx.mustache +1 -1
- package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/index.tsx.mustache +1 -1
- package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/index.tsx.mustache +1 -1
- package/src/tasks/create/templates/SDK-React/template/FORM-region/demo.stories.tsx.mustache +27 -12
- package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/FieldValueList/FieldValueList.tsx +2 -2
- package/tests/assets/sdk-r/components/create/override-sdk/field/Phone/Phone.tsx +5 -5
- package/tests/assets/sdk-r/components/create/override-sdk/infra/NavBar/NavBar.css +1 -0
- package/tests/assets/sdk-r/components/create/override-sdk/template/ListView/ListView.tsx +29 -28
- package/tests/assets/sdk-r/components/create/override-sdk/template/SimpleTableManual/SimpleTableManual.tsx +10 -5
- package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyCurrency/index.tsx +3 -1
- package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyDecimal/index.tsx +6 -3
- package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyPercentage/index.tsx +5 -2
- package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MySearchbox/index.tsx +52 -10
- package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MySearchbox/utils.ts +1 -1
- package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyDetails/Avatar.tsx +7 -5
- package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyTwoColumnDetails/Avatar.tsx +7 -5
- package/tests/assets/sdk-r/components/createAll/custom-constellation/widget/Pega_DXIL_MyPageCaseWidget/Avatar.tsx +7 -5
- package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyCurrency/index.tsx +1 -1
- package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDecimal/index.tsx +1 -1
- package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPercentage/index.tsx +1 -1
- package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPhone/index.tsx +5 -5
- package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnForm/demo.stories.tsx +28 -13
- package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/FieldValueList/FieldValueList.tsx +2 -2
- package/tests/assets/sdk-r/components/createAll/override-sdk/field/Phone/Phone.tsx +5 -5
- package/tests/assets/sdk-r/components/createAll/override-sdk/infra/NavBar/NavBar.css +1 -0
- package/tests/assets/sdk-r/components/createAll/override-sdk/template/ListView/ListView.tsx +29 -28
- package/tests/assets/sdk-r/components/createAll/override-sdk/template/SimpleTableManual/SimpleTableManual.tsx +10 -5
- package/tests/functional/sdk-r/localCreateAllListDeleteAllCustom.test.js +1 -1
- package/tests/functional/sdk-r/localCreateAllListDeleteAllOverride.test.js +1 -1
- package/tests/functional/sdk-r/localCreateBuildAllDeleteAllCustom.test.js +2 -2
- package/tests/functional/sdk-r/localCreateBuildDeleteCustom.test.js +1 -1
- package/tests/functional/sdk-r/localCreateBuildDeleteOverride.test.js +2 -2
- package/tests/functional/sdk-r/localCreateListDeleteCustom.test.js +1 -1
- package/tests/functional/sdk-r/localCreateListDeleteOverride.test.js +1 -1
- package/tests/functional/sdk-r/localCreateMapAllClearMap.test.js +1 -1
- package/tests/functional/sdk-r/localCreatePublishAllDeleteAllCustom.test.js +2 -2
- package/tests/functional/sdk-r/localCreatePublishAllDeleteAllOverride.test.js +1 -1
- package/tests/functional/sdk-r/localCreatePublishDeleteCustom.test.js +1 -1
- package/tests/functional/sdk-r/localCreatePublishDeleteOverride.test.js +2 -2
- package/tests/functional/sdk-r/localCreateRenameDeleteCustom.test.js +1 -1
|
@@ -1034,34 +1034,35 @@ export default function ListView(props: ListViewProps) {
|
|
|
1034
1034
|
</TableRow>
|
|
1035
1035
|
</TableHead>
|
|
1036
1036
|
<TableBody>
|
|
1037
|
-
{
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
{
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
{
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1037
|
+
{arRows &&
|
|
1038
|
+
stableSort(arRows, getComparator(order, orderBy))
|
|
1039
|
+
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
|
|
1040
|
+
.map(row => {
|
|
1041
|
+
return (
|
|
1042
|
+
<TableRow key={row.pxRefObjectInsName || row.pyID}>
|
|
1043
|
+
{arColumns.map(column => {
|
|
1044
|
+
const value = row[column.id];
|
|
1045
|
+
return (
|
|
1046
|
+
<TableCell key={column.id} align={column.align} className={classes.cell}>
|
|
1047
|
+
{_showButton(column.id, row) || column.displayAsLink ? (
|
|
1048
|
+
<Link
|
|
1049
|
+
component='button'
|
|
1050
|
+
onClick={() => {
|
|
1051
|
+
_listViewClick(row, column);
|
|
1052
|
+
}}
|
|
1053
|
+
underline='hover'
|
|
1054
|
+
>
|
|
1055
|
+
{column.format && typeof value === 'number' ? column.format(value) : value}
|
|
1056
|
+
</Link>
|
|
1057
|
+
) : (
|
|
1058
|
+
<>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
|
|
1059
|
+
)}
|
|
1060
|
+
</TableCell>
|
|
1061
|
+
);
|
|
1062
|
+
})}
|
|
1063
|
+
</TableRow>
|
|
1064
|
+
);
|
|
1065
|
+
})}
|
|
1065
1066
|
</TableBody>
|
|
1066
1067
|
</Table>
|
|
1067
1068
|
</TableContainer>
|
|
@@ -258,11 +258,16 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
|
|
|
258
258
|
function generateRowsData() {
|
|
259
259
|
// if referenceList is empty and dataPageName property value exists then make a datapage fetch call and get the list of data.
|
|
260
260
|
if (!referenceList.length && dataPageName) {
|
|
261
|
-
getDataPage(dataPageName, parameters, context)
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
261
|
+
getDataPage(dataPageName, parameters, context)
|
|
262
|
+
.then(listData => {
|
|
263
|
+
const data = formatRowsData(listData);
|
|
264
|
+
myRows = data;
|
|
265
|
+
setRowData(data);
|
|
266
|
+
})
|
|
267
|
+
.catch(e => {
|
|
268
|
+
// eslint-disable-next-line no-console
|
|
269
|
+
console.log(e);
|
|
270
|
+
});
|
|
266
271
|
} else {
|
|
267
272
|
// The referenceList prop has the JSON data for each row to be displayed
|
|
268
273
|
// in the table. So, iterate over referenceList to create the dataRows that
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
|
|
1
2
|
import { useState, useEffect } from 'react';
|
|
2
3
|
import {
|
|
3
4
|
CurrencyInput as CosmosCurrency,
|
|
@@ -261,8 +262,9 @@ function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
|
|
|
261
262
|
});
|
|
262
263
|
}}
|
|
263
264
|
onBlur={(enteredValue) => {
|
|
264
|
-
const parsedValue = enteredValue !== '' ? Number(enteredValue)
|
|
265
|
+
const parsedValue = enteredValue !== '' ? Number(enteredValue) : enteredValue;
|
|
265
266
|
if (!readOnly && (!value || value !== parsedValue)) {
|
|
267
|
+
// @ts-ignore
|
|
266
268
|
handleEvent(actions, 'changeNblur', propName, parsedValue);
|
|
267
269
|
if (hasSuggestions) {
|
|
268
270
|
pConn.ignoreSuggestion('');
|
|
@@ -88,8 +88,9 @@ function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
|
|
|
88
88
|
}, [validatemessage, hasSuggestions, status]);
|
|
89
89
|
|
|
90
90
|
const { decimalPrecision, currencyDecimalPrecision } = props;
|
|
91
|
-
let numberOfDecimals
|
|
91
|
+
let numberOfDecimals = parseInt(decimalPrecision, 10);
|
|
92
92
|
if (Number.isNaN(numberOfDecimals)) {
|
|
93
|
+
// @ts-ignore
|
|
93
94
|
numberOfDecimals = decimalPrecision === '' ? undefined : 2;
|
|
94
95
|
}
|
|
95
96
|
let noOfFractionDigits = currencyDecimalPrecision === 'auto' ? undefined : parseInt(currencyDecimalPrecision, 10);
|
|
@@ -222,13 +223,15 @@ function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
|
|
|
222
223
|
}
|
|
223
224
|
setDecimalValue(enteredValue);
|
|
224
225
|
if (value !== (enteredValue !== '' ? Number(enteredValue) : '')) {
|
|
225
|
-
|
|
226
|
+
// @ts-ignore
|
|
227
|
+
handleEvent(actions, 'change', propName, enteredValue !== '' ? Number(enteredValue) : '');
|
|
226
228
|
hasValueChange.current = true;
|
|
227
229
|
}
|
|
228
230
|
}}
|
|
229
231
|
onBlur={() => {
|
|
230
232
|
if (!value || hasValueChange.current) {
|
|
231
|
-
|
|
233
|
+
// @ts-ignore
|
|
234
|
+
handleEvent(actions, 'blur', propName, decimalValue !== '' ? Number(decimalValue) : '');
|
|
232
235
|
if (hasSuggestions) {
|
|
233
236
|
pConn.ignoreSuggestion("");
|
|
234
237
|
}
|
|
@@ -94,8 +94,9 @@ function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
|
|
|
94
94
|
}
|
|
95
95
|
}, [validatemessage, hasSuggestions, status]);
|
|
96
96
|
|
|
97
|
-
let numberOfDecimals
|
|
97
|
+
let numberOfDecimals = parseInt(decimalPrecision, 10);
|
|
98
98
|
if (Number.isNaN(numberOfDecimals)) {
|
|
99
|
+
// @ts-ignore
|
|
99
100
|
numberOfDecimals = decimalPrecision === '' ? undefined : 2;
|
|
100
101
|
}
|
|
101
102
|
|
|
@@ -240,13 +241,15 @@ function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
|
|
|
240
241
|
}
|
|
241
242
|
setPercentageValue(enteredValue);
|
|
242
243
|
if (value !== enteredValue) {
|
|
244
|
+
// @ts-ignore
|
|
243
245
|
handleEvent(actions, 'change', propName, enteredValue);
|
|
244
246
|
hasValueChange.current = true;
|
|
245
247
|
}
|
|
246
248
|
}}
|
|
247
249
|
onBlur={() => {
|
|
248
|
-
const parsedValue = percentageValue !== '' ? Number(percentageValue)
|
|
250
|
+
const parsedValue = percentageValue !== '' ? Number(percentageValue) : '';
|
|
249
251
|
if (!value || hasValueChange.current) {
|
|
252
|
+
// @ts-ignore
|
|
250
253
|
handleEvent(actions, 'blur', propName, parsedValue);
|
|
251
254
|
if (hasSuggestions) {
|
|
252
255
|
pConn.ignoreSuggestion("");
|
|
@@ -497,14 +497,14 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
|
|
|
497
497
|
const pConn = getPConnect();
|
|
498
498
|
const contextName = getPConnect().getContextName();
|
|
499
499
|
const actions = pConn.getActionsApi();
|
|
500
|
-
const [dataApiObj, setDataApiObj] = useState(() => ({}
|
|
500
|
+
const [dataApiObj, setDataApiObj] = useState(() => ({}));
|
|
501
501
|
const [filterValue, setFilterValue] = useState('');
|
|
502
502
|
const [loading, setLoading] = useState(listType !== 'associated');
|
|
503
503
|
// const selected = useMemo(() => menuHelpers.getSelected(items)[0], [items]);
|
|
504
504
|
const [selected, setSelected] = useState();
|
|
505
505
|
const hasMoreResults = useRef(true);
|
|
506
506
|
const inputValueRef = useRef('');
|
|
507
|
-
const displayFieldMeta
|
|
507
|
+
const displayFieldMeta = useRef(null);
|
|
508
508
|
const [actualValue, setActualValue] = useState();
|
|
509
509
|
const [newRecordCreated, setNewRecordCreated] = useState();
|
|
510
510
|
|
|
@@ -645,13 +645,15 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
|
|
|
645
645
|
}
|
|
646
646
|
PCore.getDataApi()
|
|
647
647
|
.init(dataConfig, contextName)
|
|
648
|
-
.then(
|
|
648
|
+
.then(dataObj => {
|
|
649
|
+
// @ts-ignore
|
|
649
650
|
setDataApiObj(dataObj);
|
|
650
651
|
// To avoid calling doSearch if someone types/pastes value before the API call is made
|
|
651
652
|
if (!filterValue)
|
|
652
653
|
doSearch(
|
|
653
654
|
'',
|
|
654
655
|
getDisplayFieldsMetaData(dataConfig.columns),
|
|
656
|
+
// @ts-ignore
|
|
655
657
|
dataObj,
|
|
656
658
|
setItems as any,
|
|
657
659
|
setLoading,
|
|
@@ -677,10 +679,12 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
|
|
|
677
679
|
if (!dataRefMount && !displayMode && listType === 'datapage') {
|
|
678
680
|
PCore.getDataApi()
|
|
679
681
|
.init(dataConfig, contextName)
|
|
680
|
-
.then(
|
|
682
|
+
.then(dataObj => {
|
|
683
|
+
// @ts-ignore
|
|
681
684
|
setDataApiObj(dataObj);
|
|
682
685
|
// To avoid calling doSearch if someone types/pastes value before the API call is made
|
|
683
686
|
if (!filterValue) {
|
|
687
|
+
// @ts-ignore
|
|
684
688
|
if (displayFieldMeta?.current?.key === displayFieldMeta?.current?.primary) {
|
|
685
689
|
const displayItem = {
|
|
686
690
|
id: value,
|
|
@@ -692,6 +696,7 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
|
|
|
692
696
|
doSearch(
|
|
693
697
|
'',
|
|
694
698
|
getDisplayFieldsMetaData(dataConfig.columns),
|
|
699
|
+
// @ts-ignore
|
|
695
700
|
dataObj,
|
|
696
701
|
setItems as any,
|
|
697
702
|
setLoading,
|
|
@@ -711,6 +716,7 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
|
|
|
711
716
|
doSearch(
|
|
712
717
|
'',
|
|
713
718
|
getDisplayFieldsMetaData(dataConfig.columns),
|
|
719
|
+
// @ts-ignore
|
|
714
720
|
dataObj,
|
|
715
721
|
setItems as any,
|
|
716
722
|
setLoading,
|
|
@@ -769,16 +775,22 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
|
|
|
769
775
|
) {
|
|
770
776
|
PCore.getDataApi()
|
|
771
777
|
.init(dataConfig, contextName)
|
|
772
|
-
.then(
|
|
778
|
+
.then(dataObj => {
|
|
779
|
+
// @ts-ignore
|
|
773
780
|
setDataApiObj(dataObj);
|
|
781
|
+
// @ts-ignore
|
|
774
782
|
buildColumnForDisplayValue(dataObj);
|
|
775
783
|
// SET matchPosition to EQUALS to return exact matching record
|
|
784
|
+
// @ts-ignore
|
|
776
785
|
dataObj.matchPosition = 'equals';
|
|
786
|
+
// @ts-ignore
|
|
777
787
|
dataObj
|
|
778
788
|
.fetchData(value)
|
|
779
789
|
.then((displayResponse: { data: Array<never> }) => {
|
|
780
790
|
let columnsWithSetProperty: string | Array<any> = [];
|
|
791
|
+
// @ts-ignore
|
|
781
792
|
if (dataApiObj.columns) {
|
|
793
|
+
// @ts-ignore
|
|
782
794
|
columnsWithSetProperty = dataApiObj.columns
|
|
783
795
|
.filter(
|
|
784
796
|
(col: { setProperty: string }) =>
|
|
@@ -793,9 +805,12 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
|
|
|
793
805
|
const searchedItem = displayResponseData.map((entry: { [x: string]: any }) => {
|
|
794
806
|
const secondaryArr: Array<any> = [];
|
|
795
807
|
const secondaryFieldValues: Array<any> = [];
|
|
808
|
+
// @ts-ignore
|
|
796
809
|
displayFieldMeta.current.secondary.forEach((col: string) => {
|
|
810
|
+
// @ts-ignore
|
|
797
811
|
if (!displayFieldMeta.hidden.includes(col)) secondaryArr.push(entry[col]);
|
|
798
812
|
if (columnsWithSetProperty.includes(col)) {
|
|
813
|
+
// @ts-ignore
|
|
799
814
|
if (dataApiObj.isQueryable) {
|
|
800
815
|
secondaryFieldValues.push(entry[col]);
|
|
801
816
|
} else {
|
|
@@ -804,7 +819,9 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
|
|
|
804
819
|
}
|
|
805
820
|
});
|
|
806
821
|
return {
|
|
822
|
+
// @ts-ignore
|
|
807
823
|
id: entry[displayFieldMeta.current.key],
|
|
824
|
+
// @ts-ignore
|
|
808
825
|
primary: entry[displayFieldMeta.current.primary],
|
|
809
826
|
secondary: secondaryArr,
|
|
810
827
|
secondaryFieldValues
|
|
@@ -815,11 +832,13 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
|
|
|
815
832
|
setSelected(searchedItem[0]);
|
|
816
833
|
setActualValue(value);
|
|
817
834
|
// RESET matchPosition
|
|
835
|
+
// @ts-ignore
|
|
818
836
|
dataObj.matchPosition = dataConfig.matchPosition;
|
|
819
837
|
})
|
|
820
838
|
.catch(() => {
|
|
821
839
|
setActualValue(value);
|
|
822
840
|
// RESET matchPosition
|
|
841
|
+
// @ts-ignore
|
|
823
842
|
dataObj.matchPosition = dataConfig.matchPosition;
|
|
824
843
|
});
|
|
825
844
|
});
|
|
@@ -837,17 +856,21 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
|
|
|
837
856
|
};
|
|
838
857
|
})
|
|
839
858
|
);
|
|
840
|
-
|
|
859
|
+
// @ts-ignore
|
|
860
|
+
setSelected(null);
|
|
841
861
|
inputValueRef.current = '';
|
|
842
862
|
};
|
|
843
863
|
|
|
844
864
|
const onChangeHandler = (ev: { target: { value: any } }) => {
|
|
845
865
|
if (hasSuggestions) {
|
|
846
|
-
|
|
866
|
+
// @ts-ignore
|
|
867
|
+
pConn.ignoreSuggestion();
|
|
847
868
|
setStatus(undefined);
|
|
848
869
|
}
|
|
849
870
|
|
|
871
|
+
// @ts-ignore
|
|
850
872
|
dataApiObj.columns = dataConfig.columns;
|
|
873
|
+
// @ts-ignore
|
|
851
874
|
dataApiObj.matchPosition = dataConfig.matchPosition;
|
|
852
875
|
const searchText = ev.target.value;
|
|
853
876
|
inputValueRef.current = searchText;
|
|
@@ -856,14 +879,15 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
|
|
|
856
879
|
clearSelections();
|
|
857
880
|
}
|
|
858
881
|
setFilterValue(searchText);
|
|
882
|
+
// @ts-ignore
|
|
859
883
|
if (listType === 'datapage' && dataApiObj.isQueryable) {
|
|
860
884
|
hasMoreResults.current = true;
|
|
861
885
|
if (searchText.length < 5) {
|
|
862
886
|
searchHandlerThrottled(
|
|
863
887
|
searchText,
|
|
888
|
+
// @ts-ignore
|
|
864
889
|
displayFieldMeta.current,
|
|
865
890
|
dataApiObj,
|
|
866
|
-
// @ts-ignore
|
|
867
891
|
setItems,
|
|
868
892
|
setLoading,
|
|
869
893
|
hasMoreResults
|
|
@@ -871,9 +895,9 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
|
|
|
871
895
|
} else {
|
|
872
896
|
searchHandlerDebounced(
|
|
873
897
|
searchText,
|
|
898
|
+
// @ts-ignore
|
|
874
899
|
displayFieldMeta.current,
|
|
875
900
|
dataApiObj,
|
|
876
|
-
// @ts-ignore
|
|
877
901
|
setItems,
|
|
878
902
|
setLoading,
|
|
879
903
|
hasMoreResults
|
|
@@ -881,12 +905,14 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
|
|
|
881
905
|
}
|
|
882
906
|
} else if (
|
|
883
907
|
listType === 'associated' ||
|
|
908
|
+
// @ts-ignore
|
|
884
909
|
(listType === 'datapage' && dataApiObj?.isQueryable === false)
|
|
885
910
|
) {
|
|
886
911
|
paginateHelperApis.resetIndexes();
|
|
887
912
|
const progressivePaginatedRecords = paginateHelperApis.fetchData(
|
|
888
913
|
inputValueRef.current,
|
|
889
914
|
false,
|
|
915
|
+
// @ts-ignore
|
|
890
916
|
dataApiObj.columns
|
|
891
917
|
);
|
|
892
918
|
setItems(progressivePaginatedRecords);
|
|
@@ -913,19 +939,21 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
|
|
|
913
939
|
|
|
914
940
|
setFilterValue('');
|
|
915
941
|
if (!selected && inputValueRef.current !== '') {
|
|
942
|
+
// @ts-ignore
|
|
916
943
|
if (listType === 'datapage' && dataApiObj.isQueryable) {
|
|
917
944
|
hasMoreResults.current = true;
|
|
918
945
|
searchHandlerThrottled(
|
|
919
946
|
'',
|
|
947
|
+
// @ts-ignore
|
|
920
948
|
displayFieldMeta.current,
|
|
921
949
|
dataApiObj,
|
|
922
|
-
// @ts-ignore
|
|
923
950
|
setItems,
|
|
924
951
|
setLoading,
|
|
925
952
|
hasMoreResults
|
|
926
953
|
);
|
|
927
954
|
} else if (
|
|
928
955
|
listType === 'associated' ||
|
|
956
|
+
// @ts-ignore
|
|
929
957
|
(listType === 'datapage' && dataApiObj?.isQueryable === false)
|
|
930
958
|
) {
|
|
931
959
|
paginateHelperApis.resetIndexes();
|
|
@@ -948,6 +976,7 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
|
|
|
948
976
|
// @ts-ignore
|
|
949
977
|
setSelected(menuHelpers.getSelected(updatedItems)[0]);
|
|
950
978
|
// const { id: itemId } = menuHelpers.getSelected(updatedItems)[0];
|
|
979
|
+
// @ts-ignore
|
|
951
980
|
const assocProp = pConn.getStateProps().value;
|
|
952
981
|
const propValue = setValueToAssocProp(
|
|
953
982
|
assocProp,
|
|
@@ -980,6 +1009,7 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
|
|
|
980
1009
|
const loadMore = () => {
|
|
981
1010
|
if (
|
|
982
1011
|
(listType === 'associated' ||
|
|
1012
|
+
// @ts-ignore
|
|
983
1013
|
(listType === 'datapage' && dataApiObj?.isQueryable === false)) &&
|
|
984
1014
|
paginateHelperApis.hasMoreResults(inputValueRef.current)
|
|
985
1015
|
) {
|
|
@@ -989,18 +1019,23 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
|
|
|
989
1019
|
progressivePaginatedRecords = removeDuplicates(previousItems, progressivePaginatedRecords);
|
|
990
1020
|
return [...previousItems, ...progressivePaginatedRecords];
|
|
991
1021
|
});
|
|
1022
|
+
// @ts-ignore
|
|
992
1023
|
} else if (listType === 'datapage' && dataApiObj.isQueryable && hasMoreResults.current) {
|
|
993
1024
|
setLoading(true);
|
|
994
1025
|
dataApiObj
|
|
1026
|
+
// @ts-ignore
|
|
995
1027
|
.fetchPaginatedData(inputValueRef.current)
|
|
996
1028
|
.then((response: { pageSize: number; data: Array<never> }) => {
|
|
997
1029
|
setLoading(false);
|
|
1030
|
+
// @ts-ignore
|
|
998
1031
|
if (response.pageSize === 0 || response.pageSize < dataApiObj.pageSize) {
|
|
999
1032
|
hasMoreResults.current = false;
|
|
1000
1033
|
}
|
|
1001
1034
|
const listObjData = response.data || [];
|
|
1002
1035
|
let columnsWithSetProperty: string | Array<any> = [];
|
|
1036
|
+
// @ts-ignore
|
|
1003
1037
|
if (dataApiObj.columns) {
|
|
1038
|
+
// @ts-ignore
|
|
1004
1039
|
columnsWithSetProperty = dataApiObj.columns
|
|
1005
1040
|
.filter(
|
|
1006
1041
|
(col: { setProperty: string }) =>
|
|
@@ -1014,9 +1049,12 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
|
|
|
1014
1049
|
const searchedItems = listObjData.map((entry: { [x: string]: any }) => {
|
|
1015
1050
|
const secondaryArr: Array<any> = [];
|
|
1016
1051
|
const secondaryFieldValues: Array<any> = [];
|
|
1052
|
+
// @ts-ignore
|
|
1017
1053
|
displayFieldMeta.current.secondary.forEach((col: string) => {
|
|
1054
|
+
// @ts-ignore
|
|
1018
1055
|
if (!displayFieldMeta.current.hidden.includes(col)) secondaryArr.push(entry[col]);
|
|
1019
1056
|
if (columnsWithSetProperty.includes(col)) {
|
|
1057
|
+
// @ts-ignore
|
|
1020
1058
|
if (dataApiObj.isQueryable) {
|
|
1021
1059
|
secondaryFieldValues.push(entry[col]);
|
|
1022
1060
|
} else {
|
|
@@ -1025,7 +1063,9 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
|
|
|
1025
1063
|
}
|
|
1026
1064
|
});
|
|
1027
1065
|
return {
|
|
1066
|
+
// @ts-ignore
|
|
1028
1067
|
id: entry[displayFieldMeta.current.key],
|
|
1068
|
+
// @ts-ignore
|
|
1029
1069
|
primary: entry[displayFieldMeta.current.primary],
|
|
1030
1070
|
secondary: secondaryArr,
|
|
1031
1071
|
secondaryFieldValues
|
|
@@ -1036,6 +1076,7 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
|
|
|
1036
1076
|
})
|
|
1037
1077
|
.catch(() => {
|
|
1038
1078
|
setLoading(false);
|
|
1079
|
+
// @ts-ignore
|
|
1039
1080
|
dataApiObj.pageSize -= 1;
|
|
1040
1081
|
});
|
|
1041
1082
|
}
|
|
@@ -1119,6 +1160,7 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
|
|
|
1119
1160
|
selected: item.items ? undefined : !!item.selected || item.id === selected?.id
|
|
1120
1161
|
})),
|
|
1121
1162
|
onItemClick: selectItem,
|
|
1163
|
+
// @ts-ignore
|
|
1122
1164
|
emptyText: pConn.getLocalizedValue('No items'),
|
|
1123
1165
|
loading,
|
|
1124
1166
|
loadMore,
|
|
@@ -187,7 +187,7 @@ export const updatePropertiesForNewRecord = (
|
|
|
187
187
|
dataObj
|
|
188
188
|
.fetchData(newCaseId)
|
|
189
189
|
// @ts-ignore
|
|
190
|
-
.then(
|
|
190
|
+
.then(displayResponse => {
|
|
191
191
|
let columnsWithSetProperty = [];
|
|
192
192
|
if (dataApiObj.columns) {
|
|
193
193
|
columnsWithSetProperty = dataApiObj.columns
|
|
@@ -22,8 +22,8 @@ function Avatar(props: PegaDxilMyDetailsAvatarProps) {
|
|
|
22
22
|
// TODO Below if conditions can be removed once we have apis to get worklist/mywork info
|
|
23
23
|
// This is non CaseView case (Dashboard, MyWork etc)
|
|
24
24
|
if (!metaObj) {
|
|
25
|
-
userName = PCore.getEnvironmentInfo().getOperatorName()
|
|
26
|
-
userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier()
|
|
25
|
+
userName = PCore.getEnvironmentInfo().getOperatorName();
|
|
26
|
+
userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
|
|
27
27
|
} else {
|
|
28
28
|
userName = metaObj.name;
|
|
29
29
|
userIdentifier = metaObj.ID;
|
|
@@ -46,20 +46,22 @@ function Avatar(props: PegaDxilMyDetailsAvatarProps) {
|
|
|
46
46
|
const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
|
|
47
47
|
const [userState, setUserState]: any = useState(currentState === 'online' ? 'active' : 'inactive');
|
|
48
48
|
|
|
49
|
-
|
|
49
|
+
// @ts-ignore
|
|
50
|
+
const handleUserStateChange = ({ state }) => {
|
|
50
51
|
setUserState(state === 'online' ? 'active' : 'inactive');
|
|
51
52
|
};
|
|
52
53
|
|
|
53
54
|
useEffect(() => {
|
|
54
55
|
const subId = PCore.getMessagingServiceManager()
|
|
55
56
|
.getUserPresence()
|
|
56
|
-
|
|
57
|
+
// @ts-ignore
|
|
58
|
+
.subscribe(userIdentifier, handleUserStateChange);
|
|
57
59
|
|
|
58
60
|
return function cleanup() {
|
|
59
61
|
PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
|
|
60
62
|
};
|
|
61
63
|
}, [userIdentifier, handleUserStateChange]);
|
|
62
|
-
|
|
64
|
+
// @ts-ignore
|
|
63
65
|
return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
|
|
64
66
|
}
|
|
65
67
|
|
|
@@ -22,8 +22,8 @@ function Avatar(props: PegaDxilMyTwoColumnDetailsAvatarProps) {
|
|
|
22
22
|
// TODO Below if conditions can be removed once we have apis to get worklist/mywork info
|
|
23
23
|
// This is non CaseView case (Dashboard, MyWork etc)
|
|
24
24
|
if (!metaObj) {
|
|
25
|
-
userName = PCore.getEnvironmentInfo().getOperatorName()
|
|
26
|
-
userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier()
|
|
25
|
+
userName = PCore.getEnvironmentInfo().getOperatorName();
|
|
26
|
+
userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
|
|
27
27
|
} else {
|
|
28
28
|
userName = metaObj.name;
|
|
29
29
|
userIdentifier = metaObj.ID;
|
|
@@ -46,20 +46,22 @@ function Avatar(props: PegaDxilMyTwoColumnDetailsAvatarProps) {
|
|
|
46
46
|
const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
|
|
47
47
|
const [userState, setUserState]: any = useState(currentState === 'online' ? 'active' : 'inactive');
|
|
48
48
|
|
|
49
|
-
|
|
49
|
+
// @ts-ignore
|
|
50
|
+
const handleUserStateChange = ({ state }) => {
|
|
50
51
|
setUserState(state === 'online' ? 'active' : 'inactive');
|
|
51
52
|
};
|
|
52
53
|
|
|
53
54
|
useEffect(() => {
|
|
54
55
|
const subId = PCore.getMessagingServiceManager()
|
|
55
56
|
.getUserPresence()
|
|
56
|
-
|
|
57
|
+
// @ts-ignore
|
|
58
|
+
.subscribe(userIdentifier, handleUserStateChange);
|
|
57
59
|
|
|
58
60
|
return function cleanup() {
|
|
59
61
|
PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
|
|
60
62
|
};
|
|
61
63
|
}, [userIdentifier, handleUserStateChange]);
|
|
62
|
-
|
|
64
|
+
// @ts-ignore
|
|
63
65
|
return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
|
|
64
66
|
}
|
|
65
67
|
|
|
@@ -22,8 +22,8 @@ function Avatar(props: PegaDxilMyPageCaseWidgetAvatarProps) {
|
|
|
22
22
|
// TODO Below if conditions can be removed once we have apis to get worklist/mywork info
|
|
23
23
|
// This is non CaseView case (Dashboard, MyWork etc)
|
|
24
24
|
if (!metaObj) {
|
|
25
|
-
userName = PCore.getEnvironmentInfo().getOperatorName()
|
|
26
|
-
userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier()
|
|
25
|
+
userName = PCore.getEnvironmentInfo().getOperatorName();
|
|
26
|
+
userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
|
|
27
27
|
} else {
|
|
28
28
|
userName = metaObj.name;
|
|
29
29
|
userIdentifier = metaObj.ID;
|
|
@@ -46,20 +46,22 @@ function Avatar(props: PegaDxilMyPageCaseWidgetAvatarProps) {
|
|
|
46
46
|
const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
|
|
47
47
|
const [userState, setUserState]: any = useState(currentState === 'online' ? 'active' : 'inactive');
|
|
48
48
|
|
|
49
|
-
|
|
49
|
+
// @ts-ignore
|
|
50
|
+
const handleUserStateChange = ({ state }) => {
|
|
50
51
|
setUserState(state === 'online' ? 'active' : 'inactive');
|
|
51
52
|
};
|
|
52
53
|
|
|
53
54
|
useEffect(() => {
|
|
54
55
|
const subId = PCore.getMessagingServiceManager()
|
|
55
56
|
.getUserPresence()
|
|
56
|
-
|
|
57
|
+
// @ts-ignore
|
|
58
|
+
.subscribe(userIdentifier, handleUserStateChange);
|
|
57
59
|
|
|
58
60
|
return function cleanup() {
|
|
59
61
|
PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
|
|
60
62
|
};
|
|
61
63
|
}, [userIdentifier, handleUserStateChange]);
|
|
62
|
-
|
|
64
|
+
// @ts-ignore
|
|
63
65
|
return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
|
|
64
66
|
}
|
|
65
67
|
|
package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyCurrency/index.tsx
CHANGED
|
@@ -62,7 +62,7 @@ export default function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
|
|
|
62
62
|
const theCurrSep = theSymbols.theDigitGroupSeparator;
|
|
63
63
|
|
|
64
64
|
const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
|
|
65
|
-
const formattedValue = format(value, pConn.getComponentName()
|
|
65
|
+
const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
|
|
66
66
|
|
|
67
67
|
let readOnlyProp = {}; // Note: empty if NOT ReadOnly
|
|
68
68
|
|
package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDecimal/index.tsx
CHANGED
|
@@ -73,7 +73,7 @@ export default function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
|
|
|
73
73
|
if (formatter === 'Currency') {
|
|
74
74
|
formattedValue = format(value, formatter.toLowerCase(), theCurrencyOptions);
|
|
75
75
|
} else {
|
|
76
|
-
formattedValue = format(value, pConn.getComponentName()
|
|
76
|
+
formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
if (displayMode === 'DISPLAY_ONLY') {
|
package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPercentage/index.tsx
CHANGED
|
@@ -54,7 +54,7 @@ export default function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
|
|
|
54
54
|
const helperTextToDisplay = validatemessage || helperText;
|
|
55
55
|
|
|
56
56
|
const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
|
|
57
|
-
const formattedValue = format(value, pConn.getComponentName()
|
|
57
|
+
const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
|
|
58
58
|
|
|
59
59
|
let readOnlyProp = {}; // Note: empty if NOT ReadOnly
|
|
60
60
|
|
package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPhone/index.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import MuiPhoneNumber from 'material-ui-phone-number';
|
|
2
1
|
import { useEffect, useState } from 'react';
|
|
2
|
+
import { MuiTelInput } from 'mui-tel-input';
|
|
3
3
|
|
|
4
4
|
import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
|
|
5
5
|
import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
|
|
@@ -63,12 +63,12 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
|
|
|
63
63
|
return (
|
|
64
64
|
<div>
|
|
65
65
|
<StyledPegaDxilMyPhoneWrapper>
|
|
66
|
-
<
|
|
66
|
+
<MuiTelInput
|
|
67
67
|
fullWidth
|
|
68
68
|
helperText={helperTextToDisplay}
|
|
69
69
|
placeholder={placeholder ?? ''}
|
|
70
70
|
size='small'
|
|
71
|
-
defaultCountry='
|
|
71
|
+
defaultCountry='US'
|
|
72
72
|
required={required}
|
|
73
73
|
disabled={disabled}
|
|
74
74
|
onChange={onChange}
|
|
@@ -99,13 +99,13 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
|
|
|
99
99
|
|
|
100
100
|
return (
|
|
101
101
|
<StyledPegaDxilMyPhoneWrapper>
|
|
102
|
-
<
|
|
102
|
+
<MuiTelInput
|
|
103
103
|
fullWidth
|
|
104
104
|
variant='outlined'
|
|
105
105
|
helperText={helperTextToDisplay}
|
|
106
106
|
placeholder={placeholder ?? ''}
|
|
107
107
|
size='small'
|
|
108
|
-
defaultCountry='
|
|
108
|
+
defaultCountry='US'
|
|
109
109
|
required={required}
|
|
110
110
|
disabled={disabled}
|
|
111
111
|
onChange={handleChange}
|