@pega/dx-component-builder-sdk 0.1.47 → 0.1.49

package/src/tasks/create/templates/SDK-Angular/template/DETAILS/mock.stories.js.mustache

@@ -0,0 +1,294 @@
+const operatorDetails = {
+  data: {
+    pzLoadTime: "January 18, 2023 10:33:19 AM EST",
+    pzPageNameHash: "_pa1519192551088960pz",
+    pyOperatorInfo: {
+      pyUserName: "french DigV2",
+      pyPosition: "",
+      pyImageInsKey: "",
+      pySkills: [
+        {
+          pySkillName: "",
+          pzIndexOwnerKey: "DATA-ADMIN-OPERATOR-ID FRENCHTEST.DIGV2",
+          pySkillRating: 0,
+        },
+      ],
+      pyReportToUserName: "",
+      pyReportTo: "",
+      pyOrganization: "DXIL",
+      pyTitle: "",
+      pyLabel: "frenchTest.DigV2",
+      pyEmailAddress: "User@DigV2",
+      pyTelephone: "",
+    },
+  },
+  status: 200,
+  statusText: "",
+  headers: {
+    "content-length": "435",
+    "content-type": "application/json;charset=UTF-8",
+  },
+  request: {},
+};
+
+export default operatorDetails;
+
+export const pyReviewRaw = {
+  name: "pyReview",
+  type: "View",
+  config: {
+    template: "Details",
+    ruleClass: "MyCo-MyCompon-Work-MyComponents",
+    showLabel: true,
+    label: "@L Details",
+    localeReference: "@LR MYCO-MYCOMPON-WORK-MYCOMPONENTS!VIEW!PYREVIEW",
+    showHighlightedData: true,
+    highlightedData: [
+      {
+        type: "TextInput",
+        config: {
+          value: "@P .pyStatusWork",
+          label: "@L Work Status",
+          displayMode: "STACKED_LARGE_VAL",
+          displayAsStatus: true,
+        },
+      },
+      {
+        type: "TextInput",
+        config: {
+          value: "@P .pyID",
+          label: "@L Case ID",
+          displayMode: "STACKED_LARGE_VAL",
+        },
+      },
+      {
+        type: "DateTime",
+        config: {
+          value: "@P .pxCreateDateTime",
+          label: "@L Create date/time",
+          displayMode: "STACKED_LARGE_VAL",
+        },
+      },
+      {
+        type: "UserReference",
+        config: {
+          label: "@L Create Operator",
+          value: "@USER .pxCreateOperator",
+          placeholder: "Select...",
+          displayMode: "STACKED_LARGE_VAL",
+        },
+      },
+    ],
+    inheritedProps: [
+      {
+        prop: "label",
+        value: "@L Details",
+      },
+      {
+        prop: "showLabel",
+        value: true,
+      },
+    ],
+  },
+  children: [
+    {
+      name: "A",
+      type: "Region",
+      getPConnect: () => {
+        return {
+          getRawMetadata: () => {
+            return pyReviewRaw.children[0];
+          },
+        };
+      },
+      children: [
+        {
+          readOnly: undefined,
+          placeholder: "First Name",
+          value: "John",
+          label: "First Name",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+        },
+        {
+          readOnly: undefined,
+          placeholder: "Middle Name",
+          value: "",
+          label: "Middle Name",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+        },
+        {
+          readOnly: undefined,
+          placeholder: "Last Name",
+          value: "Doe",
+          label: "Last Name",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+        },
+        {
+          value: "john@doe.com",
+          label: "Email",
+          required: true,
+          testId: "CE8AE9DA5B7CD6C3DF2929543A9AF92D",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+        },
+        {
+          readOnly: undefined,
+          value: "+16397975093",
+          label: "Phone",
+          displayMode: "LABELS_LEFT",
+          hasSuggestions: false,
+        },
+        {
+          readOnly: undefined,
+          placeholder: "Price",
+          value: "90.99",
+          label: "Price",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {/* nothing */},
+              getStateProps: () => {
+                return {
+                  value: "",
+                };
+              },
+              getComponentName: () => {
+                return "currency";
+              },
+            };
+          },
+        },
+        {
+          readOnly: undefined,
+          value: "100 Mbps",
+          label: "Internet Plan",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {/* nothing */},
+              getStateProps: () => {
+                return {
+                  value: "",
+                };
+              },
+              getComponentName: () => {
+                return "radio";
+              },
+              getConfigProps: () => {
+                return {};
+              },
+              getDataObject: () => {
+                return {};
+              },
+            };
+          },
+        },
+        {
+          caseOpConfig: {
+            label: "Update operator",
+            createLabel: "Created",
+            updateLabel: "Updated",
+            updateDateTime: "2023-03-10T12:53:04.670Z",
+            createDateTime: "2023-03-10T12:52:20.054Z",
+            updateOperator: {
+              userId: "User.DigV2",
+              userName: "User DigV2",
+            },
+            createOperator: {
+              userId: "User.DigV2",
+              userName: "User DigV2",
+            },
+          },
+        },
+      ],
+    },
+  ],
+  classID: "MyCo-MyCompon-Work-MyComponents",
+};
+
+export const pyReviewResolved = {
+  readOnly: true,
+  template: "Details",
+  ruleClass: "MyCo-MyCompon-Work-MyComponents",
+  showLabel: true,
+  label: "Details",
+  localeReference: "MYCO-MYCOMPON-WORK-MYCOMPONENTS!VIEW!PYREVIEW",
+  showHighlightedData: true,
+  highlightedData: [
+    {
+      type: "TextInput",
+      config: {
+        value: "New",
+        label: "Work Status",
+        displayMode: "STACKED_LARGE_VAL",
+        displayAsStatus: true,
+      },
+    },
+    {
+      type: "TextInput",
+      config: {
+        value: "M-1002",
+        label: "Case ID",
+        displayMode: "STACKED_LARGE_VAL",
+      },
+    },
+    {
+      type: "DateTime",
+      config: {
+        value: "2022-12-11T20:06:27.232Z",
+        label: "Create date/time",
+        displayMode: "STACKED_LARGE_VAL",
+      },
+    },
+    {
+      type: "UserReference",
+      config: {
+        label: "Create Operator",
+        value: {
+          userId: "conns",
+          userName: "Sara Connor",
+        },
+        placeholder: "Select...",
+        displayMode: "STACKED_LARGE_VAL",
+      },
+    },
+  ],
+  displayMode: "LABELS_LEFT",
+};
+
+export const regionChildrenResolved = [
+  {
+    readOnly: true,
+    value: "",
+    label: "SLA Deadline",
+    displayMode: "LABELS_LEFT",
+  },
+  {
+    readOnly: true,
+    value: "",
+    label: "SLA Goal",
+    displayMode: "LABELS_LEFT",
+  },
+  {
+    readOnly: true,
+    value: "",
+    label: "SLA Start Time",
+    listType: "associated",
+    datasource: [
+      {
+        key: "AssignmentCreation",
+        value: "The creation time of the Assignment",
+      },
+      {
+        key: "CurrentTime",
+        value: "Current Date Time",
+      },
+    ],
+    displayMode: "LABELS_LEFT",
+  },
+];

package/src/tasks/create/templates/SDK-Angular/template/DETAILS-region/TwoColumnDetails.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="70px" viewBox="0 0 100 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>2 col </title>
+    <g id="Page-Config" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Page-layouts" transform="translate(-847.000000, -84.000000)">
+            <g id="2-col-" transform="translate(847.000000, 84.000000)">
+                <rect id="bg" stroke="#A5A8BC" stroke-width="0.5" fill="#E7E9EB" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                <g id="white" transform="translate(3.000000, 3.000000)" fill="#FFFFFF">
+                    <rect id="Rectangle" x="0" y="0" width="94" height="66.5"></rect>
+                </g>
+                <g id="gray-copy-2" transform="translate(6.000000, 6.000000)" fill="#8084A7">
+                    <rect id="Rectangle" x="0" y="-2.84217094e-14" width="42" height="63.8"></rect>
+                    <rect id="Rectangle" x="46" y="-2.84217094e-14" width="42" height="63.8"></rect>
+                </g>
+                <g id="labels-copy" transform="translate(22.000000, 17.000000)" fill="#FFFFFF" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500">
+                    <text id="B">
+                        <tspan x="45.75" y="12">B</tspan>
+                    </text>
+                    <g id="labels">
+                        <text id="A">
+                            <tspan x="0.75" y="12">A</tspan>
+                        </text>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/tasks/create/templates/SDK-Angular/template/DETAILS-region/config.json.mustache

@@ -0,0 +1,27 @@
+{
+  "name": "{{COMPONENT_KEY}}",
+  "label": "{{COMPONENT_LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "organization": "{{ORGANIZATION}}",
+  "version": "{{VERSION}}",
+  "library": "{{LIBRARY}}",
+  "allowedApplications": {{{ALLOWEDAPPS}}},
+  "componentKey": "{{COMPONENT_KEY}}",
+  "type": "{{TYPE}}",
+  "subtype": {{{SUB_TYPE}}},
+  "icon": "TwoColumnDetails.svg",
+  "properties": [
+    {
+      "name": "A",
+      "label": "Region A",
+      "format": "CONTENTPICKER",
+      "addTypeList": ["Fields", "Views", "UIComponents"]
+    },
+    {
+      "name": "B",
+      "label": "Region B",
+      "format": "CONTENTPICKER",
+      "addTypeList": ["Fields", "Views", "UIComponents"]
+    }
+  ]
+}

package/src/tasks/create/templates/SDK-Angular/template/DETAILS-region/demo.stories.jsx.mustache

@@ -0,0 +1,73 @@
+import { withKnobs } from "@storybook/addon-knobs";
+
+import {{COMPONENT_CLASS_NAME}} from "./index.tsx";
+
+import operatorDetails, { pyReviewRaw } from "./mock.stories";
+
+export default {
+  title: "{{COMPONENT_CLASS_NAME}}",
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}},
+  parameters: {
+    type: "DetailsRegion",
+  },
+};
+
+export const BaseYourOrgRequiredDxilDetailsRegion = () => {
+  if (!window.PCore) {
+    window.PCore = {};
+  }
+
+  window.PCore.getUserApi = () => {
+    return {
+      getOperatorDetails: () => {
+        return new Promise((resolve) => {
+          resolve(operatorDetails);
+        });
+      },
+    };
+  };
+
+  window.PCore.getEnvironmentInfo = () => {
+    return {
+      getUseLocale: () => {
+        return "en-US";
+      },
+    };
+  };
+
+  const props = {
+    NumCols: "2",
+    template: "DefaultForm",
+    showHighlightedData: false,
+    label: "Details Region",
+    showLabel: true,
+    getPConnect: () => {
+      return {
+        getChildren: () => {
+          return pyReviewRaw.children[0].children;
+        },
+        getRawMetadata: () => {
+          return pyReviewRaw;
+        },
+        getInheritedProps: () => {
+          return pyReviewRaw.config.inheritedProps;
+        },
+        setInheritedProp: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        },
+      };
+    },
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}}
+        {...props}
+      ></{{COMPONENT_CLASS_NAME}}>
+    </>
+  );
+};

package/src/tasks/create/templates/SDK-Angular/template/DETAILS-region/details.component.html.mustache

@@ -0,0 +1,6 @@
+<app-material-details
+  [arFields$]="arFields$"
+  [arFields2$]="arFields2$"
+  [arHighlightedFields]="highlightedDataArr"
+  [layout]="'two-column'"
+></app-material-details>

package/src/tasks/create/templates/SDK-Angular/template/DETAILS-region/details.component.scss.mustache

@@ -0,0 +1,7 @@
+.psdk-grid-filter {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}

package/src/tasks/create/templates/SDK-Angular/template/DETAILS-region/details.component.spec.ts.mustache

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { {{COMPONENT_CLASS_NAME}}Component } from './{{COMPONENT_CLASS_NAME_KEBAB}}.component';
+
+describe('{{COMPONENT_CLASS_NAME}}Component', () => {
+  let component: {{COMPONENT_CLASS_NAME}}Component;
+  let fixture: ComponentFixture<{{COMPONENT_CLASS_NAME}}Component>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ {{COMPONENT_CLASS_NAME}}Component ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent({{COMPONENT_CLASS_NAME}}Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/tasks/create/templates/SDK-Angular/template/DETAILS-region/details.component.ts.mustache

@@ -0,0 +1,92 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { AngularPConnectService } from '@pega/angular-sdk-library';
+import { MaterialDetailsComponent } from '@pega/angular-sdk-library';
+
+@Component({
+  selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
+  templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
+  styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
+  standalone: true,
+  imports: [MaterialDetailsComponent]
+})
+export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
+  constructor(private angularPConnect: AngularPConnectService) {}
+
+  @Input() pConn$: any;
+  @Input() formGroup$: FormGroup;
+
+  showHighlightedData: boolean;
+  highlightedDataArr: any;
+
+  arFields$: Array<any> = [];
+  arFields2$: Array<any> = [];
+  arFields3$: Array<any> = [];
+
+  propsToUse: any = {};
+
+  // Used with AngularPConnect
+  angularPConnectData: any = {};
+
+  ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    //this.updateSelf();
+    this.checkAndUpdate();
+  }
+
+  ngOnDestroy() {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  onStateChange() {
+    this.checkAndUpdate();
+  }
+
+  checkAndUpdate() {
+    // Should always check the bridge to see if the component should
+    // update itself (re-render)
+    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+
+    // ONLY call updateSelf when the component should update
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    const rawMetaData = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata().config);  
+    this.showHighlightedData = rawMetaData?.showHighlightedData;
+
+    if( this.showHighlightedData ){
+      const highlightedData = rawMetaData?.highlightedData;
+      this.highlightedDataArr = highlightedData.map(field => {
+        field.config.displayMode = 'STACKED_LARGE_VAL';
+
+        if (field.config.value === '@P .pyStatusWork') {
+          field.type = 'TextInput';
+          field.config.displayAsStatus = true;
+        }
+
+        return field;
+      });
+    }
+
+    this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+    this.pConn$.setInheritedProp('readOnly', true);
+    
+    let kids = this.pConn$.getChildren();
+    for (let kid of kids) {
+      let pKid = kid.getPConnect();
+      let pKidData = pKid.resolveConfigProps(pKid.getRawMetadata());
+      if (kids.indexOf(kid) == 0) {
+        this.arFields$ = pKidData.children;
+      } else {
+        this.arFields2$ = pKidData.children;
+      }
+    }
+  }
+}