@pega/sdk 0.0.1

package/templates/react-sdk-reference/src/components/field/Location/Location.tsx

@@ -0,0 +1,258 @@
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { Box, TextField, Alert } from '@mui/material';
+import AddLocationAltIcon from '@mui/icons-material/AddLocationAlt';
+import InputAdornment from '@mui/material/InputAdornment';
+import IconButton from '@mui/material/IconButton';
+import { GoogleMap, Marker, useLoadScript } from '@react-google-maps/api';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnFieldProps } from '@pega/sdk-react';
+import handleEvent from '../../helpers/event-utils';
+
+import './Location.css';
+
+interface LocationProps extends PConnFieldProps {
+  coordinates?: string;
+  onlyCoordinates?: boolean;
+  showMap?: boolean;
+  showMapReadOnly?: boolean;
+}
+
+const mapContainerStyle = {
+  width: '100%',
+  height: '300px',
+  marginTop: '0px'
+};
+
+const defaultCenter = {
+  lat: 18.5204,
+  lng: 73.8567
+};
+
+const disabledMapOptions = {
+  gestureHandling: 'none',
+  keyboardShortcuts: false,
+  disableDefaultUI: true,
+  clickableIcons: false,
+  zoomControl: false,
+  mapTypeControl: false,
+  scaleControl: false,
+  streetViewControl: false,
+  rotateControl: false,
+  fullscreenControl: false
+};
+
+export default function Location(props: LocationProps) {
+  const TextInput = getComponentFromRegistry('TextInput');
+  const FieldValueList = getComponentFromRegistry('FieldValueList');
+
+  const {
+    getPConnect,
+    label,
+    required = false,
+    disabled = false,
+    value = '',
+    validatemessage,
+    status,
+    readOnly = false,
+    testId,
+    displayMode,
+    hideLabel = false,
+    placeholder,
+    helperText,
+    coordinates = '',
+    onlyCoordinates = false,
+    showMap,
+    showMapReadOnly
+  } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+  const coordPropName = (pConn.getStateProps() as any).coordinates;
+
+  const [inputValue, setInputValue] = useState<string>(value ?? '');
+  const [mapCenter, setMapCenter] = useState(defaultCenter);
+  const [markerPosition, setMarkerPosition] = useState<google.maps.LatLngLiteral | null>(null);
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const autocompleteRef = useRef<google.maps.places.Autocomplete | null>(null);
+
+  const { isLoaded } = useLoadScript({
+    googleMapsApiKey: pConn.getGoogleMapsAPIKey?.() || '',
+    libraries: ['places', 'geocoding']
+  });
+
+  const hasError = status === 'error' && !!validatemessage && !disabled;
+
+  useEffect(() => {
+    if (onlyCoordinates && coordinates) {
+      setInputValue(coordinates);
+    } else {
+      setInputValue(value ?? '');
+    }
+    if (coordinates) {
+      const [lat, lng] = coordinates.split(',').map(parseFloat);
+
+      if (!isNaN(lat) && !isNaN(lng)) {
+        setMapCenter({ lat, lng });
+        setMarkerPosition({ lat, lng });
+      }
+    }
+  }, [value, coordinates, onlyCoordinates]);
+
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = event.target.value ?? '';
+      setInputValue(newValue);
+      handleEvent(actions, 'changeNblur', propName, newValue);
+
+      if (newValue === '' && coordPropName) {
+        actions.updateFieldValue(coordPropName, '');
+        setMarkerPosition(null);
+      }
+    },
+    [actions, propName, coordPropName]
+  );
+
+  const handlePlaceChanged = useCallback(() => {
+    if (autocompleteRef.current) {
+      const place = autocompleteRef.current.getPlace();
+      if (place.geometry?.location) {
+        const lat = place.geometry.location.lat();
+        const lng = place.geometry.location.lng();
+        const address = place.formatted_address || place.name || '';
+        const coordinateString = `${lat}, ${lng}`;
+
+        setMapCenter({ lat, lng });
+        setMarkerPosition({ lat, lng });
+
+        if (onlyCoordinates) {
+          setInputValue(coordinateString);
+          handleEvent(actions, 'changeNblur', propName, coordinateString);
+          if (coordPropName) {
+            actions.updateFieldValue(coordPropName, coordinateString);
+          }
+        } else {
+          setInputValue(address);
+          handleEvent(actions, 'changeNblur', propName, address);
+          if (coordPropName) {
+            actions.updateFieldValue(coordPropName, coordinateString);
+          }
+        }
+      }
+    }
+  }, [actions, propName, coordPropName, onlyCoordinates]);
+
+  useEffect(() => {
+    if (isLoaded && inputRef.current && !autocompleteRef.current) {
+      autocompleteRef.current = new google.maps.places.Autocomplete(inputRef.current);
+      autocompleteRef.current.addListener('place_changed', handlePlaceChanged);
+    }
+  }, [isLoaded, handlePlaceChanged]);
+
+  const handleGetCurrentLocation = useCallback(() => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        position => {
+          const lat = position.coords.latitude;
+          const lng = position.coords.longitude;
+          const coordinateString = `${lat}, ${lng}`;
+
+          setMapCenter({ lat, lng });
+          setMarkerPosition({ lat, lng });
+
+          if (onlyCoordinates) {
+            setInputValue(coordinateString);
+            handleEvent(actions, 'changeNblur', propName, coordinateString);
+            if (coordPropName) {
+              actions.updateFieldValue(coordPropName, coordinateString);
+            }
+          } else {
+            const geocoder = new window.google.maps.Geocoder();
+            geocoder.geocode({ location: { lat, lng } }, (results, responseStatus) => {
+              if (responseStatus === 'OK' && results && results[0]) {
+                const address = results[0].formatted_address;
+                setInputValue(address);
+                handleEvent(actions, 'changeNblur', propName, address);
+                if (coordPropName) {
+                  actions.updateFieldValue(coordPropName, coordinateString);
+                }
+              }
+            });
+          }
+        },
+        error => {
+          console.error('Error getting current location: ', error);
+        }
+      );
+    }
+  }, [actions, propName, coordPropName, onlyCoordinates]);
+
+  if (displayMode === 'DISPLAY_ONLY') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+  }
+
+  const map = (
+    <div style={{ opacity: disabled ? 0.7 : 1 }}>
+      <Box mt={1} style={{ flex: 1 }}>
+        <GoogleMap mapContainerStyle={mapContainerStyle} center={mapCenter} zoom={14} options={disabled ? disabledMapOptions : undefined}>
+          {markerPosition && <Marker position={markerPosition} />}
+        </GoogleMap>
+      </Box>
+    </div>
+  );
+
+  if (readOnly) {
+    return (
+      <div>
+        <TextInput {...props} />
+        {isLoaded && showMapReadOnly && map}
+      </div>
+    );
+  }
+
+  const testProps: any = { 'data-test-id': testId };
+
+  return (
+    <div>
+      {hasError && (
+        <Alert severity='error' sx={{ mb: 1 }}>
+          {validatemessage}
+        </Alert>
+      )}
+
+      {isLoaded && (
+        <TextField
+          fullWidth
+          label={hideLabel ? '' : label}
+          required={required}
+          disabled={disabled}
+          error={hasError}
+          placeholder={placeholder ?? 'Search location'}
+          helperText={helperText}
+          value={inputValue}
+          onChange={handleChange}
+          inputRef={inputRef}
+          slotProps={{
+            input: {
+              endAdornment: (
+                <InputAdornment position='end'>
+                  <IconButton onClick={handleGetCurrentLocation} disabled={disabled} edge='end'>
+                    <AddLocationAltIcon />
+                  </IconButton>
+                </InputAdornment>
+              ),
+              inputProps: { ...testProps }
+            }
+          }}
+        />
+      )}
+
+      {isLoaded && showMap && map}
+    </div>
+  );
+}

package/templates/react-sdk-reference/src/components/field/Location/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "Location",
+  "description": "Location input field with optional coordinates",
+  "type": "Field",
+  "subtype": "Text-Location",
+  "icon": "images/pz-text-input-active.svg",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/field/Location/index.tsx

@@ -0,0 +1 @@
+export { default } from './Location';

package/templates/react-sdk-reference/src/components/field/Multiselect/Multiselect.tsx

@@ -0,0 +1,238 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Autocomplete, TextField } from '@mui/material';
+import { doSearch, getDisplayFieldsMetaData, useDeepMemo, preProcessColumns, getGroupDataForItemsTree } from './utils';
+import { insertInstruction, deleteInstruction } from '../../helpers/instructions-utils';
+import { debounce } from 'throttle-debounce';
+
+export default function Multiselect(props) {
+  const {
+    getPConnect,
+    label,
+    placeholder,
+    referenceList,
+    selectionKey,
+    primaryField,
+    initialCaseClass,
+    showSecondaryInSearchOnly = false,
+    listType = '',
+    isGroupData = false,
+    referenceType,
+    secondaryFields,
+    groupDataSource = [],
+    parameters = {},
+    matchPosition = 'contains',
+    maxResultsDisplay,
+    groupColumnsConfig = [{}],
+    selectionList,
+    value
+  } = props;
+  let { datasource = [], columns = [{}] } = props;
+
+  if (referenceList.length > 0) {
+    datasource = referenceList;
+    columns = [
+      {
+        value: primaryField,
+        display: 'true',
+        useForSearch: true,
+        primary: 'true'
+      },
+      {
+        value: selectionKey,
+        setProperty: selectionKey,
+        key: 'true'
+      }
+    ];
+    let secondaryColumns: any = [];
+    if (secondaryFields) {
+      secondaryColumns = secondaryFields.map(secondaryField => ({
+        value: secondaryField,
+        display: 'true',
+        secondary: 'true',
+        useForSearch: 'true'
+      }));
+    } else {
+      secondaryColumns = [
+        {
+          value: selectionKey,
+          display: 'true',
+          secondary: 'true',
+          useForSearch: 'true'
+        }
+      ];
+    }
+    if (referenceType === 'Case') {
+      columns = [...columns, ...secondaryColumns];
+    }
+  }
+  const [inputValue, setInputValue] = useState(value);
+  const [selectedItems, setSelectedItems] = useState([]);
+
+  const dataConfig = useDeepMemo(() => {
+    return {
+      dataSource: datasource,
+      groupDataSource,
+      isGroupData,
+      showSecondaryInSearchOnly,
+      parameters,
+      matchPosition,
+      listType,
+      maxResultsDisplay: maxResultsDisplay || '100',
+      columns: preProcessColumns(columns),
+      groupColumnsConfig: preProcessColumns(groupColumnsConfig)
+    };
+  }, [
+    datasource,
+    groupDataSource,
+    isGroupData,
+    showSecondaryInSearchOnly,
+    parameters,
+    matchPosition,
+    listType,
+    maxResultsDisplay,
+    columns,
+    groupColumnsConfig
+  ]);
+  const groupsDisplayFieldMeta = useMemo(
+    () => (listType !== 'associated' ? getDisplayFieldsMetaData(dataConfig.groupColumnsConfig) : null),
+    [dataConfig.groupColumnsConfig]
+  );
+
+  const itemsTreeBaseData = getGroupDataForItemsTree(groupDataSource, groupsDisplayFieldMeta, showSecondaryInSearchOnly) || [];
+
+  const [itemsTree, setItemsTree] = useState(
+    isGroupData ? getGroupDataForItemsTree(groupDataSource, groupsDisplayFieldMeta, showSecondaryInSearchOnly) : []
+  );
+
+  const displayFieldMeta = listType !== 'associated' ? getDisplayFieldsMetaData(dataConfig.columns) : null;
+  const getCaseListBasedOnParamsDebounced: any = useRef();
+  const pConn = getPConnect();
+  const contextName = pConn.getContextName();
+  const listActions = pConn.getListActions();
+  const dataApiObj: any = useRef();
+
+  // main search function trigger
+  const getCaseListBasedOnParams = async (searchText, group, selectedRows, currentItemsTree, isTriggeredFromSearch = false) => {
+    if (referenceList && referenceList.length > 0) {
+      selectedRows = await listActions.getSelectedRows(true);
+
+      selectedRows =
+        selectedRows &&
+        selectedRows.map(item => {
+          return {
+            id: item[selectionKey.startsWith('.') ? selectionKey.substring(1) : selectionKey],
+            primary: item[primaryField.startsWith('.') ? primaryField.substring(1) : primaryField]
+          };
+        });
+      setSelectedItems(selectedRows);
+    }
+
+    // if items tree is null or text search is triggered then always should use fresh data object, we use the original object
+    const initalItemsTree = isTriggeredFromSearch || !currentItemsTree ? [...itemsTreeBaseData] : [...currentItemsTree];
+    const res = await doSearch(
+      searchText,
+      group,
+      initialCaseClass,
+      displayFieldMeta,
+      dataApiObj.current,
+      initalItemsTree,
+      isGroupData,
+      showSecondaryInSearchOnly,
+      selectedRows || []
+    );
+    setItemsTree(res);
+  };
+
+  useEffect(() => {
+    if (referenceList && referenceList.length > 0) {
+      pConn.setReferenceList(selectionList);
+    }
+  }, [pConn]);
+
+  useEffect(() => {
+    getCaseListBasedOnParamsDebounced.current = debounce(500, getCaseListBasedOnParams);
+  }, []);
+
+  useEffect(() => {
+    if (listType !== 'associated') {
+      PCore.getDataApi()
+        ?.init(dataConfig, contextName)
+        .then(dataObj => {
+          dataApiObj.current = dataObj;
+          if (!isGroupData) {
+            getCaseListBasedOnParamsDebounced.current(inputValue ?? '', '', [...selectedItems], [...itemsTree]);
+          }
+        });
+    }
+  }, [dataConfig, listType, dataConfig.columns, inputValue, dataConfig.groupColumnsConfig, showSecondaryInSearchOnly]);
+
+  const onSearchHandler = ev => {
+    const searchText = ev.target.value;
+    setInputValue(searchText);
+    getCaseListBasedOnParamsDebounced.current(searchText, '', [...selectedItems], [...itemsTree], true);
+  };
+
+  const setSelectedItemsForReferenceList = item => {
+    // Clear error messages if any
+    const propName = pConn.getStateProps().selectionList;
+    pConn.clearErrorMessages({
+      property: propName
+    });
+    const { selected } = item;
+    if (selected) {
+      insertInstruction(pConn, selectionList, selectionKey, primaryField, item);
+    } else {
+      deleteInstruction(pConn, selectionList, selectionKey, item);
+    }
+  };
+
+  const handleChange = (event, newSelectedValues) => {
+    let clickedItem;
+    let updatedItems: any = [];
+    if (newSelectedValues && newSelectedValues.length > 0) {
+      updatedItems = newSelectedValues.map(ele => {
+        ele.selected = true;
+        return ele;
+      });
+    }
+    if (newSelectedValues.length > selectedItems.length) {
+      clickedItem = newSelectedValues.filter(item => !selectedItems.some((ele: any) => ele.id === item.id));
+    } else {
+      clickedItem = selectedItems.filter((item: any) => !newSelectedValues.some((ele: any) => ele.id === item.id));
+      clickedItem[0].selected = false;
+    }
+    itemsTree.forEach(ele => {
+      ele.selected = !!updatedItems.find(item => item.id === ele.id);
+    });
+
+    setSelectedItems(updatedItems);
+    setItemsTree(itemsTree);
+
+    setInputValue('');
+
+    // if this is a referenceList case
+    if (referenceList) setSelectedItemsForReferenceList(clickedItem[0]);
+  };
+
+  return (
+    <Autocomplete
+      multiple
+      fullWidth
+      options={itemsTree}
+      disableCloseOnSelect
+      // getOptionSelected={(option: any, val: any) => option?.primary === val?.primary}
+      getOptionLabel={(option: any) => option?.primary}
+      onChange={handleChange}
+      value={selectedItems}
+      // renderOption={(_props, option: any, { selected }) => (
+      //   <>
+      //     <Checkbox icon={icon} checkedIcon={checkedIcon} style={{ marginRight: 8 }} checked={selected} />
+      //     {option.primary}
+      //   </>
+      // )}
+      renderInput={params => (
+        <TextField {...params} variant='outlined' fullWidth label={label} placeholder={placeholder} size='small' onChange={onSearchHandler} />
+      )}
+    />
+  );
+}

package/templates/react-sdk-reference/src/components/field/Multiselect/index.tsx

@@ -0,0 +1 @@
+export { default } from './Multiselect';