@pega/dx-component-builder-sdk 0.1.46 → 0.1.48

package/src/tasks/create/templates/SDK-Angular/widget/PAGE-CASE/OneColumnPage.svg

@@ -0,0 +1,36 @@
+<?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>1 col </title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="100" height="70"></rect>
+    </defs>
+    <g id="Concepts" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Templates" transform="translate(-98.000000, -108.000000)">
+            <g id="Change-template" transform="translate(42.000000, 36.000000)">
+                <g id="1-col-" transform="translate(56.000000, 72.000000)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <rect stroke="#A5A8BC" stroke-width="0.5" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                    <g id="white" mask="url(#mask-2)" fill="#FFFFFF">
+                        <g transform="translate(3.000000, 3.000000)" id="Rectangle">
+                            <rect x="0" y="0" width="94" height="66.5"></rect>
+                        </g>
+                    </g>
+                    <g id="gray" mask="url(#mask-2)" fill="#8084A7">
+                        <g transform="translate(6.000000, 6.000000)" id="Rectangle">
+                            <rect x="0" y="-2.84217094e-14" width="88" height="77.8"></rect>
+                        </g>
+                    </g>
+                    <g id="labels" mask="url(#mask-2)" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500">
+                        <g transform="translate(44.000000, 17.000000)" id="A">
+                            <text>
+                                <tspan x="0.75" y="12" fill="#FFFFFF">A</tspan>
+                            </text>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/tasks/create/templates/SDK-Angular/widget/PAGE-CASE/config.json.mustache

@@ -0,0 +1,66 @@
+{
+  "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": "OneColumnPage.svg",
+  "properties": [
+    {
+      "name": "title",
+      "label": "Label value",
+      "format": "TEXT"
+    },
+    {
+      "format": "SELECT",
+      "label": "Usage",
+      "name": "label",
+      "defaultValue": "Create operator",
+      "localize": true,
+      "source": [
+        {
+          "key": "Create operator",
+          "value": "Create operator"
+        },
+        {
+          "key": "Update operator",
+          "value": "Update operator"
+        },
+        {
+          "key": "Resolve operator",
+          "value": "Resolve operator"
+        }
+      ]
+    },
+
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY"
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+    "label": "Create operator",
+    "title": "Create operator",
+    "createLabel": "@L Created",
+    "updateLabel": "@L Updated",
+    "createOperator": "@USER .pxCreateOperator",
+    "updateOperator": "@USER .pxUpdateOperator",
+    "createDateTime": "@P .pxCreateDateTime",
+    "updateDateTime": "@P .pxUpdateDateTime",
+    "resolveLabel": "@L Resolved",
+    "resolveOperator": "@USER .pyResolvedUserID",
+    "resolveDateTime": "@P .pyResolvedTimestamp"
+  }
+}

package/src/tasks/create/templates/SDK-Angular/widget/PAGE-CASE/demo.stories.jsx.mustache

@@ -0,0 +1,52 @@
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { caseOpConfig, operatorDetails } from './mock.stories';
+
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+window.PCore.getUserApi = () => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
+};
+
+export const Base{{COMPONENT_CLASS_NAME}} = () => {
+
+  const props = {
+    caseOpConfig,
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} />
+    </>
+  );
+};

package/src/tasks/create/templates/SDK-Angular/widget/PAGE-CASE/mock.stories.js.mustache

@@ -0,0 +1,52 @@
+
+export const caseOpConfig = {
+  label: 'Create operator',
+  createLabel: 'Created',
+  updateLabel: 'Updated',
+  updateDateTime: '2023-01-16T14:53:33.280Z',
+  createDateTime: '2023-01-16T14:53:33.198Z',
+  updateOperator: {
+    userId: 'admin@mediaco',
+    userName: 'admin'
+  },
+  createOperator: {
+    userId: 'admin@mediaco',
+    userName: 'admin'
+  },
+  hideLabel: true,
+  key: '_532zx1dah',
+  displayMode: 'LABELS_LEFT'
+};
+
+export 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: {}
+};

package/src/tasks/create/templates/SDK-Angular/widget/PAGE-CASE/page-case.component.html.mustache

@@ -0,0 +1,28 @@
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
+<div class="psdk-case-summary-fields">
+  <dl *ngFor="let field of primaryFields$" class="psdk-case-summary-fields-primary">
+    <div class="psdk-csf-primary-field">
+      <dt class="psdk-csf-primary-field-header">
+        {{ field.config.displayLabel }}
+      </dt>
+      <dd class="psdk-csf-primary-field-data">
+       <div>
+        <component-mapper
+          *ngIf="field.config.label.toLowerCase() == 'create operator'"
+          name="Operator"
+          [props]="{ name$: field.config.createOperator.userName, date$: field.config.updateDateTime, id$: field.config.createOperator.userId }"
+        ></component-mapper>
+      </div>
+      <div>
+        <component-mapper
+          *ngIf="field.config.label.toLowerCase() == 'updated'"
+          name="Operator"
+          [props]="{ name$: field.config.updateOperator.userName, date$: field.config.updateDateTime, id$: field.config.updateOperator.userId }"
+        ></component-mapper>
+      </div>
+      </dd>
+    </div>
+  </dl>
+</div>
+<%={{ }}=%>     {{! revert delimiters for mustache }}

package/src/tasks/create/templates/SDK-Angular/widget/PAGE-CASE/page-case.component.scss.mustache

@@ -0,0 +1,137 @@
+@import '@pega/angular-sdk-library/_shared/styles.scss';
+
+.psdk-case-summary {
+  display: block;
+  margin: 0.625rem;
+}
+
+.psdk-case-summary-primary {
+  text-align: left;
+  margin-bottom: 0.75rem;
+}
+
+.psdk-case-summary-secondary {
+  text-align: left;
+  margin-bottom: 0.75rem;
+}
+
+.psdk-case-summary-status {
+  text-align: left;
+  margin-bottom: 0.75rem;
+}
+
+.psdk-case-summary-status-data {
+  display: block;
+  background-color: lavender;
+  color: $app-primary-color;
+  padding: 0rem 0.625rem;
+  display: inline;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  line-height: 1.5rem;
+}
+
+.psdk-case-summary-primary .label {
+  font-weight: 600;
+}
+
+.psdk-case-summary-primary .data {
+  font-weight: 600;
+  font-size: 1.625rem;
+}
+
+.psdk-case-summary-secondary .label {
+  font-weight: 600;
+}
+.psdk-case-summary-secondary .data {
+  font-weight: 600;
+  color: $app-primary-color;
+  padding-left: 1.25rem;
+}
+
+.psdk-case-summary-fields {
+  padding: calc(2 * 0.5rem);
+  display: inline-flex;
+  grid-row-gap: calc(2 * 0.5rem);
+  column-gap: 4rem;
+}
+
+.psdk-case-summary-fields-primary {
+  grid-template-columns: 20ch 1fr;
+  display: grid;
+  grid-column-gap: calc(2 * 0.5rem);
+  grid-row-gap: calc(2 * 0.5rem);
+}
+
+.psdk-csf-primary-field {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-column-gap: calc(0 * 0.5rem);
+}
+
+.psdk-csf-primary-field-header {
+  word-break: break-word;
+  grid-column-start: 1;
+  grid-row-start: 1;
+  max-width: max-content;
+  font-size: 0.8125rem;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.8);
+}
+
+.psdk-csf-primary-field-data {
+  word-break: break-word;
+  grid-column-start: 1;
+  grid-row-start: 2;
+  margin-inline-start: unset;
+}
+
+.psdk-case-summary-fields-secondary {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-column-gap: calc(2 * 0.5rem);
+  grid-row-gap: calc(1 * 0.5rem);
+}
+
+.psdk-csf-secondary-field {
+  display: grid;
+  grid-template-columns: auto;
+  grid-column-gap: calc(2 * 0.5rem);
+}
+
+.psdk-csf-secondary-field-header {
+  word-break: break-word;
+  grid-column-start: 1;
+  grid-row-start: 1;
+  max-width: max-content;
+  font-size: 0.8125rem;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.8);
+}
+
+.psdk-csf-secondary-field-data {
+  word-break: break-word;
+  grid-column-start: 2;
+  grid-row-start: 1;
+  margin-inline-start: unset;
+}
+
+span.psdk-csf-text-style {
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+span.psdk-csf-status-style {
+  background-color: #e9eef3;
+  border-radius: calc(0.25 * 0.5rem);
+  color: #4c5a67;
+  display: inline-block;
+  font-size: 0.75rem;
+  font-weight: bold;
+  line-height: calc(0.5rem * 2.5);
+  height: calc(0.5rem * 2.5);
+  padding: 0 0.5rem;
+  text-transform: uppercase;
+}

package/src/tasks/create/templates/SDK-Angular/widget/PAGE-CASE/page-case.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/widget/PAGE-CASE/page-case.component.ts.mustache

@@ -0,0 +1,115 @@
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Utils } from '@pega/angular-sdk-library';
+import { ComponentMapperComponent } from '@pega/angular-sdk-library';
+import { AngularPConnectService } from '@pega/angular-sdk-library';
+
+declare const window: any;
+
+@Component({
+  selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
+  templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
+  styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
+   @Input() status$: string;
+  @Input() bShowStatus$: boolean;
+
+  @Input() primaryFields$: Array<any>;
+
+  @Input() pConn$: any;
+  PCore$: any;
+
+  // For interaction with AngularPConnect
+  angularPConnectData: any = {};
+  configProps$: Object;
+
+  controlName$: string;
+
+
+  constructor(private utils: Utils, private angularPConnect: AngularPConnectService) {}
+
+  ngOnInit(): void {
+
+    if (!this.PCore$) {
+      this.PCore$ = window.PCore;
+    }
+
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+    this.controlName$ = this.angularPConnect.getComponentID(this);
+
+    // call updateSelf when initializing
+    // this.updateSelf();
+    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
+  updateSelf(): void {
+    // moved this from ngOnInit() and call this from there instead...
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+
+    this.primaryFields$ = new Array();
+
+    let createConfig = {}
+    createConfig["label"] = this.configProps$["label"];
+    createConfig["updateDateTime"] = this.configProps$["createDateTime"];
+    createConfig["displayLabel"] = this.configProps$["createLabel"];
+    createConfig["createOperator"] = this.configProps$["createOperator"];
+    let elConfig = {};
+    elConfig["config"] = createConfig;
+
+    this.primaryFields$.push(elConfig);
+
+    let updateConfig = {};
+    updateConfig["label"] = this.configProps$["updateLabel"];
+    updateConfig["updateDateTime"] = this.configProps$["updateDateTime"];
+    updateConfig["displayLabel"] = this.configProps$["updateLabel"];
+    updateConfig["updateOperator"] = this.configProps$["updateOperator"];
+    let elConfig1 = {};
+    elConfig1["config"] = updateConfig;
+
+    this.primaryFields$.push(elConfig1);
+  }
+
+  // Callback passed when subscribing to store change
+  onStateChange() {
+    this.checkAndUpdate();
+  }
+
+  ngOnChanges() {
+    this.updateLabelAndDate(this.primaryFields$);
+  }
+
+  updateLabelAndDate(arData: Array<any>) {
+    for (let field of arData) {
+      switch (field.type.toLowerCase()) {
+        case 'caseoperator':
+          if (field.config.label.toLowerCase() == 'create operator') {
+            field.config['displayLabel'] = field.config.createLabel;
+          } else if (field.config.label.toLowerCase() == 'update operator') {
+            field.config['displayLabel'] = field.config.updateLabel;
+          }
+          break;
+        case 'date':
+          field.config.value = this.utils.generateDate(field.config.value, 'Date-Long');
+          break;
+      }
+    }
+  }
+}

package/src/tasks/create/templates/SDK-React/field/Boolean/index.tsx.mustache

@@ -25,6 +25,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     readOnly,
     testId,
     required,
+    disabled,
     status,
     helperText,
     validatemessage,
@@ -61,15 +62,14 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     thePConn.getValidationApi().validate(event.target.checked);
   };
 
-  let theCheckbox = <Checkbox color='primary' />;
+  let theCheckbox = <Checkbox color='primary' disabled={disabled} />;
 
   if (readOnly) {
     // Workaround for lack of InputProps readOnly from https://github.com/mui-org/material-ui/issues/17043
     //  Also note that we need to turn off the onChange call in the FormControlLabel wrapper, too. See below!
-    theCheckbox = <Checkbox value={value || false} onChange={handleChange} readOnly={readOnly} />;
+    theCheckbox = <Checkbox value={value || false} readOnly={readOnly} />;
   }
 
-
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     <FormControl required={required} error={status === 'error'}>

package/src/tasks/create/templates/SDK-React/field/Date/index.tsx.mustache

@@ -100,10 +100,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
           onChange={handleChange}
           onBlur={!readOnly ? onBlur : undefined}
           onAccept={handleAccept}
-    {{! pick new delimiteres for mustache }}
+    {{! pick new delimiters for mustache }}
     {{=<% %>=}}
           InputProps={{ ...testProp }}
-    <%={{ }}=%>     {{! revert delimiteres for mustache }}
+    <%={{ }}=%>     {{! revert delimiters for mustache }}
         />
       </MuiPickersUtilsProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>

package/src/tasks/create/templates/SDK-React/field/DateTime/index.tsx.mustache

@@ -47,19 +47,18 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
 
 
   if (displayMode === 'LABELS_LEFT') {
-    const formattedDate = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} />;
+    const formattedDateTime = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    const formattedDate = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} variant='stacked' />;
+    const formattedDateTime = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} variant='stacked' />;
   }
 
   if (readOnly) {
-    const formattedDate = format(props.value, 'datetime');
-    props.value = formattedDate;
-    return <TextInput {...props} />;
+    const formattedDateTime = format(props.value, 'datetime');
+    return <TextInput {...props} value={formattedDateTime} />;
   }
 
   const handleChange = date => {

package/src/tasks/create/templates/SDK-React/field/Decimal/demo.stories.jsx.mustache

@@ -26,11 +26,15 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
-            }
+            },
+            triggerFieldChange: () => {/* nothing */}
           };
         },
         getStateProps: () => {
           return { value: '.name' };
+        },
+        getComponentName: () => {
+          return 'Decimal';
         }
       };
     },