@pega/sdk 0.0.1

package/templates/react-sdk-reference/src/components/template/AdvancedSearch/SearchGroups/SearchGroups.tsx

@@ -0,0 +1,329 @@
+import React, {
+  createElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Button, Grid, Select, MenuItem, Box } from '@mui/material';
+
+import { PConnectComponent } from '@pega/sdk-react';
+import TemplateContext from '../TemplateContext';
+import componentCachePersistUtils from '../SearchGroup/persistUtils';
+
+import { getCacheInfo, isValidInput } from './utils';
+import { useCacheWhenListViewReady } from './hooks';
+
+export const initializeSearchFields = (
+  searchFields,
+  getPConnect,
+  referenceListClassID,
+  searchFieldRestoreValues = {},
+) => {
+  const filtersProperties = {};
+  searchFields.forEach((field) => {
+    let val = '';
+    const { value, defaultValue = '' } = field.config;
+    const propPath = PCore.getAnnotationUtils().getPropertyName(value);
+
+    if (searchFieldRestoreValues[propPath]) {
+      val = searchFieldRestoreValues[propPath];
+    } else if (PCore.getAnnotationUtils().isProperty(defaultValue)) {
+      val = getPConnect().getValue(defaultValue.split(' ')[1]);
+    } else if (defaultValue.startsWith('@L')) {
+      val = defaultValue.split(' ')[1];
+    } else {
+      val = defaultValue;
+    }
+
+    filtersProperties[propPath] = val;
+
+    const valueSplit = value.split('@P ')[1]?.split('.').filter(Boolean) ?? [];
+    valueSplit.pop();
+
+    if (valueSplit.length) {
+      let path = '';
+      let currentClassID = referenceListClassID;
+      valueSplit.forEach((item) => {
+        path = path.length ? `${path}.${item}` : item;
+        currentClassID = (
+          PCore.getMetadataUtils().getPropertyMetadata(
+            item,
+            currentClassID,
+          ) as any
+        ).pageClass;
+        if (currentClassID) {
+          filtersProperties[`${path}.classID`] = currentClassID;
+        }
+      });
+    }
+  });
+  return filtersProperties;
+};
+
+const flattenObj = (obj) => {
+  const result = {};
+  Object.keys(obj).forEach((key) => {
+    if (!['context_data', 'pageInstructions'].includes(key)) {
+      if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
+        const temp = flattenObj(obj[key]);
+        Object.keys(temp).forEach((nestedKey) => {
+          result[`${key}.${nestedKey}`] = temp[nestedKey];
+        });
+      } else {
+        result[key] = obj[key];
+      }
+    }
+  });
+  return result;
+};
+
+export default function SearchGroups(props) {
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const {
+    getPConnect,
+    editableField,
+    localeReference,
+    setShowRecords,
+    searchSelectCacheKey,
+    cache,
+  } = props;
+  const referenceFieldName = editableField.replaceAll('.', '_');
+
+  const state: any = useRef({ searchFields: {}, activeGroupId: '' }).current;
+  const options =
+    componentCachePersistUtils.getComponentStateOptions(getPConnect);
+
+  const { searchGroups: groups, referenceList } =
+    getPConnect().getConfigProps();
+  const { useCache, initialActiveGroupId } = getCacheInfo(cache, groups);
+  const [activeGroupId, setActiveGroupId] = useState(initialActiveGroupId);
+  const [transientItemID, setTransientItemID] = useState<any>(null);
+  const [previousFormValues, setPreviousFormValues] = useState<any>(null);
+  const viewName = getPConnect().getCurrentView();
+
+  const rawGroupsConfig = getPConnect().getRawConfigProps().searchGroups;
+  const activeGroupIndex = groups.findIndex(
+    (group) => group.config.id === activeGroupId,
+  );
+  const { children: searchFieldsChildren = [] } =
+    activeGroupIndex !== -1 ? rawGroupsConfig[activeGroupIndex] : {};
+  const searchFields = searchFieldsChildren.map((field) => ({
+    ...field,
+    config: { ...field.config, isSearchField: true },
+  }));
+
+  const searchByRef = useRef(null);
+  const searchFieldsRef = useRef(null);
+  const isValidatorField = searchFields.some((field) => field.config.validator);
+  const { classID: referenceListClassID } =
+    PCore.getMetadataUtils().getDataPageMetadata(referenceList) as any;
+
+  const initialSearchFields = useMemo(
+    () =>
+      initializeSearchFields(
+        searchFields,
+        getPConnect,
+        referenceListClassID,
+        useCache && cache.activeGroupId === activeGroupId
+          ? cache.searchFields
+          : {},
+      ),
+    [activeGroupId, getPConnect, cache.searchFields],
+  );
+
+  useEffect(() => {
+    if (transientItemID) {
+      const filtersWithClassID = {
+        ...initialSearchFields,
+        classID: referenceListClassID,
+      };
+      // @ts-ignore
+      PCore.getContainerUtils().replaceTransientData({
+        transientItemID,
+        data: filtersWithClassID,
+      });
+    }
+  }, [activeGroupId]);
+
+  useEffect(() => {
+    const filtersWithClassID = {
+      ...initialSearchFields,
+      classID: referenceListClassID,
+    };
+
+    const transientId = getPConnect()
+      .getContainerManager()
+      .addTransientItem({
+        id: `${referenceFieldName}-${viewName}`,
+        data: filtersWithClassID,
+      });
+    setTransientItemID(transientId);
+  }, []);
+
+  const getFilterData = useCallback(() => {
+    // @ts-ignore
+    let changes = PCore.getFormUtils().getSubmitData(transientItemID, {
+      isTransientContext: true,
+      includeDisabledFields: true,
+    });
+
+    if (
+      Object.keys(cache.searchFields ?? {}).length > 0 &&
+      Object.keys(changes).length === 1
+    ) {
+      changes = cache.searchFields;
+    }
+
+    const formValues = flattenObj(changes);
+
+    if (
+      !PCore.isDeepEqual(previousFormValues, formValues) &&
+      PCore.getFormUtils().isFormValid(transientItemID) &&
+      isValidInput(formValues)
+    ) {
+      if (isValidatorField) {
+        // @ts-ignore
+        PCore.getMessageManager().clearContextMessages({
+          context: transientItemID,
+        });
+      }
+      setPreviousFormValues(formValues);
+      setShowRecords(true);
+      PCore.getPubSubUtils().publish(
+        PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS,
+        {
+          payload: formValues,
+          showRecords: true,
+          viewName,
+        },
+      );
+    }
+
+    state.activeGroupId = activeGroupId;
+    state.searchFields = changes;
+    state.selectedCategory = viewName;
+
+    componentCachePersistUtils.setComponentCache({
+      cacheKey: searchSelectCacheKey,
+      state,
+      options,
+    });
+  }, [
+    transientItemID,
+    setShowRecords,
+    viewName,
+    activeGroupId,
+    previousFormValues,
+  ]);
+
+  const resetFilterData = useCallback(() => {
+    // @ts-ignore
+    PCore.getNavigationUtils().resetComponentCache(searchSelectCacheKey);
+    const resetPayload = {
+      transientItemID,
+      data: initializeSearchFields(
+        searchFields,
+        getPConnect,
+        referenceListClassID,
+      ),
+      options: { reset: true },
+    };
+    // @ts-ignore
+    PCore.getContainerUtils().updateTransientData(resetPayload);
+  }, [transientItemID, initialSearchFields]);
+
+  useCacheWhenListViewReady(
+    cache,
+    viewName,
+    useCache,
+    getFilterData,
+    searchSelectCacheKey,
+  );
+
+  const searchDropdown = groups.length > 1 && (
+    <Grid container spacing={2}>
+      <Select
+        value={activeGroupId}
+        onChange={(e) => setActiveGroupId(e.target.value)}
+        ref={searchByRef}
+        fullWidth
+      >
+        {groups.map((group) => (
+          <MenuItem key={group.config.id} value={group.config.id}>
+            {group.config.label}
+          </MenuItem>
+        ))}
+      </Select>
+    </Grid>
+  );
+
+  const actionButtons = (
+    <Box display='flex' gap={2}>
+      <Button variant='outlined' onClick={resetFilterData}>
+        {localizedVal('Reset', 'SimpleTable')}
+      </Button>
+      <Button variant='contained' onClick={getFilterData}>
+        {localizedVal('Search', 'SimpleTable')}
+      </Button>
+    </Box>
+  );
+
+  const searchFieldsViewConfig = {
+    name: 'SearchFields',
+    type: 'View',
+    config: {
+      template: 'DefaultForm',
+      NumCols: '3',
+      contextName: transientItemID,
+      readOnly: false,
+      context: transientItemID,
+      localeReference,
+    },
+    children: [
+      {
+        name: 'Fields',
+        type: 'Region',
+        children: searchFields,
+      },
+    ],
+  };
+
+  const searchFieldsC11nEnv = PCore.createPConnect({
+    meta: searchFieldsViewConfig,
+    options: {
+      hasForm: true,
+      contextName: transientItemID,
+    },
+  });
+
+  const templateContext = useContext(TemplateContext);
+  const templateContextValue = useMemo(
+    () => ({ ...templateContext, outerColumnCount: undefined }),
+    [],
+  );
+
+  const searchFieldsViewComp = transientItemID ? (
+    <TemplateContext.Provider value={templateContextValue}>
+      <div ref={searchFieldsRef}>
+        {createElement(PConnectComponent, { ...searchFieldsC11nEnv })}
+      </div>
+    </TemplateContext.Provider>
+  ) : null;
+
+  const childrenToRender = [
+    searchDropdown,
+    searchFieldsViewComp,
+    actionButtons,
+  ];
+
+  return (
+    <Box display='flex' flexDirection='column' gap={2}>
+      {childrenToRender.map((child, index) => (
+        <React.Fragment key={index}>{child}</React.Fragment>
+      ))}
+    </Box>
+  );
+}

package/templates/react-sdk-reference/src/components/template/AdvancedSearch/SearchGroups/hooks.ts

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+
+const listViewConstants = {
+  EVENTS: {
+    LIST_VIEW_READY: 'LIST_VIEW_READY'
+  }
+};
+/**
+ * This hook registers a callback for the whenever list view component is ready
+ * then makes a call to get the data using the search fields pre-filled with cache data.
+ */
+
+export function useCacheWhenListViewReady(
+  cache: { searchFields: unknown },
+  viewName: string,
+  useCache: boolean,
+  getFilterData: (params: { isCalledFromCache: boolean }) => void,
+  searchSelectCacheKey: string
+) {
+  useEffect(() => {
+    if (Object.keys(cache.searchFields ?? {}).length > 0) {
+      PCore.getPubSubUtils().subscribe(
+        listViewConstants.EVENTS.LIST_VIEW_READY,
+        ({ viewName: viewNameFromListView }: { viewName: string }) => {
+          if (viewNameFromListView === viewName && useCache) {
+            getFilterData({ isCalledFromCache: true });
+          }
+        },
+        `${searchSelectCacheKey}-listview-ready`
+      );
+    }
+
+    return () => {
+      PCore.getPubSubUtils().unsubscribe(listViewConstants.EVENTS.LIST_VIEW_READY, `${searchSelectCacheKey}-listview-ready`);
+    };
+  }, []);
+}

package/templates/react-sdk-reference/src/components/template/AdvancedSearch/SearchGroups/index.tsx

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

package/templates/react-sdk-reference/src/components/template/AdvancedSearch/SearchGroups/utils.ts

@@ -0,0 +1,29 @@
+function isEmpty(value: any): boolean {
+  return (
+    // null or undefined
+    value === null ||
+    value === undefined ||
+    ((Array.isArray(value) || typeof value === 'string') && value.length === 0) ||
+    // is an Object and has no keys
+    (value.constructor === Object && Object.keys(value).length === 0)
+  );
+}
+
+export function getCacheInfo(
+  cache: { selectedCategory: string; activeGroupId: string; searchFields: unknown },
+  groups: { config: { id: string } }[]
+) {
+  let initialActiveGroupId = groups.length ? groups[0].config.id : '';
+
+  let useCache = false;
+  if (cache.activeGroupId && groups?.find(group => group.config.id === cache.activeGroupId)) {
+    initialActiveGroupId = cache.activeGroupId;
+    useCache = true;
+  }
+
+  return { useCache, initialActiveGroupId };
+}
+
+export function isValidInput(input: { [s: string]: unknown }) {
+  return Object.values(input).some(value => !isEmpty(value));
+}

package/templates/react-sdk-reference/src/components/template/AdvancedSearch/TemplateContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+const TemplateContext = createContext({
+  depth: 0,
+  columnCount: 1,
+  outerColumnCount: undefined,
+  templateOverrideMode: undefined,
+  inheritParentLayout: undefined,
+  lastContainerItem: undefined
+});
+export default TemplateContext;

package/templates/react-sdk-reference/src/components/template/AdvancedSearch/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "AdvancedSearch",
+  "label": "Advanced search",
+  "type": "Template",
+  "icon": "AdvancedSearch.svg",
+  "subtype": "SEARCH",
+  "hideTemplateEdit": true,
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/template/AdvancedSearch/index.tsx

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

package/templates/react-sdk-reference/src/components/template/AppShell/AppShell.css

@@ -0,0 +1,35 @@
+.appshell-top {
+  display: flex;
+  background-color: var(--app-background-color);
+}
+
+.appshell-main {
+  position: relative;
+  min-height: 100vh;
+  display: block;
+  width: 100%;
+}
+
+.psdk-icon {
+  padding: 0rem 0.125rem;
+  min-width: unset;
+}
+
+.progress-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background-color: 'var(--app-background-color)';
+  position: fixed;
+  z-index: 999;
+  top: 0rem;
+  left: 0rem;
+  opacity: 0.5;
+}
+
+.progress-spinner {
+  text-align: center;
+}