Merge pull request #62 from pegasystems/feature/map

add support for Map and AutoSave

cspell.json

@@ -14,8 +14,10 @@
   ],
   "allowCompoundWords": true,
   "words": [
+    "arcgis",
     "camelcase",
     "daygrid",
+    "ESRI",
     "fullcalendar",
     "Gantt",
     "IBAN",

package.json

@@ -37,6 +37,7 @@
     "fix:pkg": "sort-package-json package.json packages/*/package.json"
   },
   "dependencies": {
+    "@arcgis/core": "^4.29.10",
     "@fullcalendar/core": "^6.1.13",
     "@fullcalendar/daygrid": "^6.1.13",
     "@fullcalendar/react": "^6.1.13",

src/components/Pega_Extensions_AutoSave/Docs.mdx

@@ -0,0 +1,17 @@
+import { Meta, Primary, Controls, Story } from '@storybook/blocks';
+import * as DemoStories from './demo.stories';
+
+<Meta of={DemoStories} />
+
+# Overview
+
+This component will auto-save a specific input field on blur without having to click on the 'Save for later' button. This component does not render any UI.
+You can enhance this component and instead of auto-saving the value on blur, you can save the value regularly if it has changed (for example every 2 seconds).
+
+To use this component, select a Text field in the form and enter the name of the property to monitor.
+
+Reference: [Article on Pega Community](https://support.pega.com/discussion/auto-save-assignment-change-field-constellation-application)
+
+## Props
+
+<Controls />

src/components/Pega_Extensions_AutoSave/config.json

@@ -0,0 +1,20 @@
+{
+  "name": "Pega_Extensions_AutoSave",
+  "label": "AutoSave Field on change",
+  "description": "AutoSave Field on change",
+  "organization": "Pega",
+  "version": "1.0.0",
+  "library": "Extensions",
+  "allowedApplications": [],
+  "componentKey": "Pega_Extensions_AutoSave",
+  "type": "Field",
+  "subtype": "Text",
+  "properties": [
+    {
+      "name": "propertyName",
+      "label": "Name of the property to autosave on Change (example: '.pyDescription')",
+      "format": "TEXT"
+    }
+  ],
+  "defaultConfig": {}
+}

src/components/Pega_Extensions_AutoSave/demo.stories.tsx

@@ -0,0 +1,48 @@
+import type { StoryObj } from '@storybook/react';
+import { PegaExtensionsAutoSave } from './index';
+
+export default {
+  title: 'Fields/AutoSave Field',
+  argTypes: {
+    getPConnect: {
+      table: {
+        disable: true
+      }
+    }
+  },
+  component: PegaExtensionsAutoSave
+};
+
+const setPCore = () => {
+  (window as any).PCore = {
+    getConstants: () => {},
+    getCascadeManager: () => {
+      return {
+        registerFields: (f: string) => f,
+        unRegisterFields: (f: string) => f
+      };
+    }
+  };
+};
+
+type Story = StoryObj<typeof PegaExtensionsAutoSave>;
+
+export const Default: Story = {
+  render: args => {
+    setPCore();
+    const props = {
+      ...args,
+      getPConnect: () => {
+        return {
+          getContextName: () => '',
+          getPageReference: () => '',
+          getValue: () => 'C-123'
+        };
+      }
+    };
+    return <PegaExtensionsAutoSave {...props} />;
+  },
+  args: {
+    propertyName: '.pyDescription'
+  }
+};

src/components/Pega_Extensions_AutoSave/demo.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import * as DemoStories from './demo.stories';
+
+const { Default } = composeStories(DemoStories);
+
+// eslint-disable-next-line jest/expect-expect
+test('renders AutoSave with default args', () => {
+  render(<Default />);
+});

src/components/Pega_Extensions_AutoSave/index.ts

@@ -0,0 +1,81 @@
+import { useEffect } from 'react';
+
+type AutoSaveProps = {
+  propertyName: string;
+  getPConnect: any;
+};
+
+export const PegaExtensionsAutoSave = (props: AutoSaveProps) => {
+  const { getPConnect, propertyName = '' } = props;
+  const pConn = getPConnect();
+  if (!propertyName) return null;
+
+  const saveAssignment = () => {
+    /* Get the current case etag */
+    const etag = pConn.getValue('caseInfo.headers.etag');
+
+    const assignmentID = pConn.getValue(
+      (window as any).PCore.getConstants().CASE_INFO.ASSIGNMENT_ID
+    );
+    const actionID = pConn.getValue((window as any).PCore.getConstants().CASE_INFO.ACTIVE_ACTION_ID)
+      ? pConn.getValue((window as any).PCore.getConstants().CASE_INFO.ACTIVE_ACTION_ID)
+      : pConn.getValue((window as any).PCore.getConstants().CASE_INFO.ASSIGNMENTACTION_ID);
+
+    /* Payload to resolve dx api */
+    const payload = {
+      queryPayload: {
+        assignmentID,
+        actionID
+      },
+      body: {
+        content: {
+          /* Property or field name */
+          pyDescription: pConn.getValue(propertyName)
+        }
+      },
+      headers: {
+        /* etag as part of header */
+        'if-match': etag
+      }
+    };
+
+    /* Triggers save dx api */
+    (window as any).PCore.getRestClient()
+      .invokeRestApi('save', payload)
+      .then((response: any) => {
+        /* Upon successful, update the latest etag. */
+        const updatedEtag = response.headers.etag;
+        (window as any).PCore.getContainerUtils().updateCaseContextEtag(
+          pConn.getContextName(),
+          updatedEtag
+        );
+      });
+  };
+
+  useEffect(() => {
+    const subId = Date.now();
+    /* Register field change event. */
+    (window as any).PCore.getCascadeManager().registerFields(
+      pConn.getContextName(),
+      pConn.getPageReference(),
+      [propertyName],
+      saveAssignment,
+      subId
+    );
+
+    /* Unregister fields */
+    return () => {
+      (window as any).PCore.getCascadeManager().unRegisterFields(
+        pConn.getContextName(),
+        pConn.getPageReference(),
+        [propertyName],
+        saveAssignment,
+        subId
+      );
+    };
+  }, [propertyName]);
+
+  return null;
+};
+
+export default PegaExtensionsAutoSave;

src/components/Pega_Extensions_Map/Docs.mdx

@@ -0,0 +1,37 @@
+import { Meta, Primary, Controls, Story } from '@storybook/blocks';
+import * as DemoStories from './demo.stories';
+
+<Meta of={DemoStories} />
+
+# Overview
+
+The Map component showcases how to run the ArcGIS Map component inside Constellation UI - The [ArcGIS Maps SDK for JavaScript](https://developers.arcgis.com/javascript/latest/) helps build interactive user experiences and 2D and 3D visualizations.
+
+The component supports the following features:
+
+- Center on a global map by providing latitude, longitude and zoom
+- Allow to draw a set of positions by clicking on the map - double click to terminate the polyline
+- Clear action to delete the trajectory
+- Read only mode when put in the display template
+- Can pass a URL field type that can be used to store a base64 image of the map
+
+To use this component, you will need an embedded data list with 2 fields: Latitude and Longitude. In a form template, add a new view based on this template and select the 2 properties
+from the embedded list data object - make sure to put the Latitude field first. If needed, you can specify a 3rd field on the case type formatted as URL that can hold
+an image of the map - the Image field must be large enough to hold the base64 content (see length to 50000) and should not have any validation enabled on the field for URL.
+
+<Primary />
+
+## Props
+
+<Controls />
+
+# Example
+
+Here is a demo of how to configure this component in App Studio. For this example, we have created a 'Map' case type and we will render Map component.
+The case type is composed of an embedded data list called 'Positions'
+
+![Embedded data model configuration](Map_Configuration_1.png)
+
+To use the template, add the fields to the region in this order
+
+![Template configuration](Map_Configuration_2.png)

src/components/Pega_Extensions_Map/config.json

@@ -0,0 +1,55 @@
+{
+  "name": "Pega_Extensions_Map",
+  "label": "ESRI Map Component",
+  "description": "ESRI Map Component",
+  "organization": "Pega",
+  "version": "1.0.0",
+  "library": "Extensions",
+  "allowedApplications": [],
+  "componentKey": "Pega_Extensions_Map",
+  "type": "Template",
+  "subtype": "FORM",
+  "properties": [
+    {
+      "name": "heading",
+      "label": "Heading",
+      "format": "TEXT",
+      "required": true
+    },
+    {
+      "name": "Latitude",
+      "label": "Latitude",
+      "format": "TEXT"
+    },
+    {
+      "name": "Longitude",
+      "label": "Longitude",
+      "format": "TEXT"
+    },
+    {
+      "name": "Zoom",
+      "label": "Zoom",
+      "format": "TEXT"
+    },
+    {
+      "name": "height",
+      "label": "Height of the map",
+      "format": "TEXT"
+    },
+    {
+      "name": "A",
+      "label": "Region A",
+      "format": "CONTENTPICKER",
+      "addTypeList": [
+        "Fields"
+      ]
+    }
+  ],
+  "defaultConfig": {
+    "heading": "Map",
+    "Latitude": "35",
+    "Longitude": "-110",
+    "Zoom": "4",
+    "height": "40rem"
+  }
+}