@pega/dx-component-builder-sdk 8.23.15 → 8.23.17

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/simple-table-manual/helpers.ts

@@ -0,0 +1,234 @@
+declare var PCore;
+
+export const TABLE_CELL = "SdkRenderer";
+export const DELETE_ICON = "DeleteIcon";
+
+// BUG-615253: Workaround for autosize in table with lazy loading components
+/* istanbul ignore next */
+function getFiledWidth(field, label) {
+  let width;
+  switch (field.type) {
+    case "Time":
+      width = 150;
+      break;
+    case "Date":
+      width = 160;
+      break;
+    case "DateTime":
+      width = 205;
+      break;
+    case "AutoComplete":
+    case "TextArea":
+      width = 190;
+      break;
+    case "Currency":
+    case "TextInput":
+      width = 182;
+      break;
+    case "Checkbox":
+       
+      // eslint-disable-next-line no-case-declarations
+      const text = document.createElement("span");
+      document.body.appendChild(text);
+      text.style.fontSize = "13px";
+      text.style.position = "absolute";
+      text.innerHTML = label;
+      width = Math.ceil(text.clientWidth) + 30;
+      document.body.removeChild(text);
+      break;
+    default:
+      width = 180;
+  }
+  return width;
+}
+
+export const getContext = (thePConn) => {
+  const contextName = thePConn.getContextName();
+  const pageReference = thePConn.getPageReference();
+  // 8.7 change = referenceList may now be in top-level of state props, 
+  //  not always in config of state props
+  let { referenceList } = thePConn.getStateProps()?.config || thePConn.getStateProps();
+  const pageReferenceForRows = referenceList.startsWith(".")
+    ? `${pageReference}.${referenceList.substring(1)}`
+    : referenceList;
+
+  // removing "caseInfo.content" prefix to avoid setting it as a target while preparing pageInstructions
+  referenceList = pageReferenceForRows.replace(
+    PCore.getConstants().CASE_INFO.CASE_INFO_CONTENT,
+    ""
+  );
+
+  return {
+    contextName,
+    referenceListStr: referenceList,
+    pageReferenceForRows
+  };
+};
+
+export const populateRowKey = (rawData) => {
+  return rawData.map((row, index) => {
+    return { ...row, index };
+  });
+};
+
+export const getApiContext = (processedData, pConnect, reorderCB) => {
+  return {
+    fetchData: () => {
+      return new Promise((resolve) => {
+        resolve({
+          data: processedData,
+          filteredRecordCount: processedData.length,
+          totalRecordCount: processedData.length
+        });
+      });
+    },
+    fetchPersonalizations: () => {
+      return Promise.resolve({});
+    },
+    applyRowReorder: (sourceKey, destinationKey) => {
+      // indexes are keys for simple table so, it should work.
+      reorderCB();
+      return Promise.resolve(
+        pConnect
+          .getListActions()
+          .reorder(parseInt(sourceKey, 10), parseInt(destinationKey, 10))
+      );
+    }
+  };
+};
+
+export const buildMetaForListView = (
+  fieldMetadata,
+  fields,
+  type,
+  ruleClass,
+  name,
+  propertyLabel,
+  parameters
+) => {
+  return {
+    name,
+    config: {
+      type,
+      referenceList: fieldMetadata.datasource.name,
+      parameters: parameters ?? fieldMetadata.datasource.parameters,
+      personalization: false,
+      grouping: true,
+      globalSearch: true,
+      reorderFields: true,
+      toggleFieldVisibility: true,
+      personalizationId: "" /* TODO */,
+      template: "ListView",
+      presets: [
+        {
+          name: "presets",
+          template: "Table",
+          config: {},
+          children: [
+            {
+              name: "Columns",
+              type: "Region",
+              children: fields
+            }
+          ],
+          label: propertyLabel,
+          id: "P_" /* TODO */
+        }
+      ],
+      ruleClass
+    }
+  };
+};
+
+export const buildFieldsForTable = (configFields, fields, showDeleteButton) => {
+  const fieldDefs = configFields?.map((field, index) => {
+    return {
+      type: "text",
+      label: fields[index].config.label || fields[index].config.caption,
+      fillAvailableSpace: !!field.config.fillAvailableSpace,
+      id: index,
+      name: field.config.value.substr(4),
+      cellRenderer: TABLE_CELL,
+      sort: false,
+      noContextMenu: true,
+      showMenu: false,
+      meta: {
+        ...field
+      },
+      // BUG-615253: Workaround for autosize in table with lazy loading components
+      width: getFiledWidth(field, fields[index].config.label)
+    };
+  });
+
+  // ONLY add DELETE_ICON to fields when the table is requested as EDITABLE
+  if (showDeleteButton) {
+    fieldDefs.push({
+      type: "text",
+      label: "",
+      name: DELETE_ICON,
+      id: fieldDefs.length,
+      cellRenderer: DELETE_ICON,
+      sort: false,
+      noContextMenu: true,
+      showMenu: false,
+      // BUG-615253: Workaround for autosize in table with lazy loading components
+      width: 46
+    });  
+  }
+
+  return fieldDefs;
+};
+
+export const createMetaForTable = (fields, renderMode) => {
+  return {
+    height: {
+      minHeight: "auto",
+      fitHeightToElement: "fitHeightToElement",
+      deltaAdjustment: "deltaAdjustment",
+      autoSize: true
+    },
+    fieldDefs: fields,
+    itemKey: "index",
+    grouping: false,
+    reorderFields: false,
+    reorderItems: renderMode === "Editable",
+    dragHandle: renderMode === "Editable",
+    globalSearch: false,
+    personalization: false,
+    toggleFieldVisibility: false,
+    toolbar: false,
+    footer: false,
+    filterExpression: null,
+    editing: false,
+    timezone: PCore.getEnvironmentInfo().getTimeZone()
+  };
+};
+
+/**
+ * This method returns a callBack function for Add action.
+ * @param {object} pConnect - PConnect object
+ * @param {number} index - index of the page list to add
+ */
+export const getAddRowCallback = (pConnect, index) => {
+  return () => pConnect.getListActions().insert({}, index);
+};
+
+/**
+ * This method creates a PConnect object with proper options for Add and Delete actions
+ * @param {string} contextName - contextName
+ * @param {string} referenceList - referenceList
+ * @param {string} pageReference - pageReference
+ */
+export const createPConnect = (contextName, referenceList, pageReference) => {
+  const options = {
+    context: contextName,
+    pageReference,
+    referenceList
+  };
+
+  // create PConnect object
+  const config = { meta: {}, options };
+  const { getPConnect } = PCore.createPConnect(config);
+
+  return getPConnect();
+};

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/simple-table-manual/simple-table-manual.component.html

@@ -0,0 +1,164 @@
+<ng-container *ngIf="bVisible$">
+  <div class="simple-table-wrapper">
+    <h3 *ngIf="label" className="label" style="font-weight: bold">
+      {{ label }} <span class="results-count">{{ getResultsText() }}</span>
+    </h3>
+    <table *ngIf="readOnlyMode" mat-table [dataSource]="rowData" class="mat-elevation-z8" id="readonly-table" matSort>
+      <ng-container *ngFor="let dCol of processedFields" [matColumnDef]="dCol.config.name">
+        <th
+          mat-header-cell
+          *matHeaderCellDef
+          mat-sort-header
+          (click)="_headerSortClick($event, dCol)"
+          arrowPosition="before"
+        >
+          <div>{{ dCol.config.label }}</div>
+          <div class="psdk-mat-header-filter">
+            <img class="psdk-filter-svg-icon" name="filterOnIcon" />
+          </div>
+          <div (click)="$event.stopPropagation()">
+            <button mat-icon-button [matMenuTriggerFor]="groupMenu">
+              <img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
+            </button>
+            <mat-menu #groupMenu>
+              <button mat-menu-item (click)="_groupBy($event, dCol)">
+                <img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Group By</span>
+              </button>
+              <button *ngIf="_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_unGroupBy($event, dCol)">
+                <img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Ungroup</span>
+              </button>
+              <button mat-menu-item (click)="_filter($event, dCol)">
+                <img class="psdk-list-view-svg-icon" src="{{ filterSvgIcon$ }}" /><span>Filter</span>
+              </button>
+            </mat-menu>
+          </div>
+        </th>
+        <td mat-cell *matCellDef="let element">{{ element[dCol.config.name] }}</td>
+      </ng-container>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+    <table *ngIf="editableMode" mat-table [dataSource]="elementsData" class="mat-elevation-z8" id="editable-table">
+      <ng-container *ngFor="let dCol of fieldDefs; let i = index">
+        <ng-container *ngIf="dCol.name != 'DeleteIcon'" [matColumnDef]="dCol.name">
+          <th mat-header-cell *matHeaderCellDef class="psdk-mat-header">{{ dCol.label }}</th>
+          <td mat-cell *matCellDef="let element">
+            <component-mapper
+              [name]="element[i].getPConnect().getComponentName()"
+              [props]="{
+                pConn$: element[i].getPConnect(),
+                formGroup$: formGroup$
+              }"
+              errorMsg="Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}"
+            ></component-mapper>
+          </td>
+        </ng-container>
+      </ng-container>
+      <ng-container matColumnDef="DeleteIcon">
+        <th mat-header-cell *matHeaderCellDef></th>
+        <td mat-cell *matCellDef="let element; index as j">
+          <button id="delete-button" mat-icon-button (click)="deleteRecord(j)">
+            <img class="psdk-utility-card-action-svg-icon" src="{{ menuIconOverride$ }}" />
+          </button>
+        </td>
+      </ng-container>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+    <div class="psdk-no-records" id="no-records" *ngIf="editableMode && referenceList?.length === 0">
+      No Records Found.
+    </div>
+    <div class="psdk-no-records" id="no-records" *ngIf="readOnlyMode && rowData?.data?.length === 0">
+      No Records Found.
+    </div>
+  </div>
+  <button *ngIf="showAddRowButton" mat-button color="primary" style="font-size: 16px" (click)="addRecord()">
+    + Add
+  </button>
+</ng-container>
+
+<!-- pop overs for filters-->
+<div *ngIf="bShowFilterPopover$" class="psdk-dialog-background">
+  <div class="psdk-modal-file-top">
+    <h4>
+      Filter:<b> {{ filterContainsLabel$ }}</b>
+    </h4>
+    <div *ngIf="bContains$">
+      <mat-form-field class="psdk-full-width">
+        <mat-select [value]="filterContainsType$" (selectionChange)="_filterContainsType($event)">
+          <mat-option value="contains">Contains</mat-option>
+          <mat-option value="equals">Equals</mat-option>
+          <mat-option value="startswith">Starts with</mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field class="psdk-full-width">
+        <input
+          matInput
+          [placeholder]=""
+          type="text"
+          [value]="filterContainsValue$"
+          (change)="_filterContainsValue($event)"
+        />
+      </mat-form-field>
+    </div>
+
+    <div *ngIf="bDateTime$">
+      <mat-form-field class="psdk-full-width">
+        <mat-select [value]="filterContainsType$" (selectionChange)="_filterContainsType($event)">
+          <mat-option value="notequal">is not equal to</mat-option>
+          <mat-option value="after">after</mat-option>
+          <mat-option value="before">before</mat-option>
+          <mat-option value="null">is null</mat-option>
+          <mat-option value="notnull">is not null</mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field
+        *ngIf="bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'"
+        class="psdk-full-width"
+      >
+        <mat-label>Date</mat-label>
+        <input
+          matInput
+          #dateInput
+          [matDatepicker]="pegadate"
+          [placeholder]=""
+          type="text"
+          [value]="filterContainsValue$"
+          (dateChange)="_filterContainsDateValue($event, dateInput.value)"
+        />
+        <mat-datepicker-toggle matSuffix [for]="pegadate"></mat-datepicker-toggle>
+        <mat-datepicker #pegadate [startAt]="filterContainsValue$"></mat-datepicker>
+      </mat-form-field>
+
+      <mat-form-field
+        *ngIf="bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'"
+        class="psdk-full-width"
+      >
+        <mat-label>Date time</mat-label>
+        <input
+          matInput
+          type="datetime-local"
+          [value]="filterContainsValue$"
+          (change)="_filterContainsDateTimeValue($event)"
+        />
+      </mat-form-field>
+
+      <mat-form-field
+        *ngIf="bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'"
+        class="psdk-full-width"
+      >
+        <mat-label>Time</mat-label>
+        <input matInput type="time" [value]="filterContainsValue$" (change)="_filterContainsTimeValue($event)" />
+      </mat-form-field>
+    </div>
+
+    <component-mapper
+      name="ActionButtons"
+      [props]="{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }"
+      [parent]="this"
+      [outputEvents]="{ actionButtonClick: _onFilterActionButtonClick }"
+    ></component-mapper>
+  </div>
+</div>

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/simple-table-manual/simple-table-manual.component.scss

@@ -0,0 +1,185 @@
+@import '@pega/angular-sdk-library/_shared/styles.scss';
+
+/* Adapted from list-view.component.scss */
+
+.simple-table-wrapper {
+  width: 100%;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+table {
+  width: 100%;
+}
+
+::ng-deep .mat-sort-header-content {
+  white-space: normal;
+}
+
+::ng-deep td.mat-mdc-cell {
+  white-space: normal;
+}
+
+::ng-deep th.mat-mdc-header-cell,
+td.mat-mdc-cell,
+td.mat-mdc-footer-cell {
+  border-right: 1px solid lightgray;
+  padding: 8px !important;
+}
+
+::ng-deep .mat-mdc-button {
+  padding: 0px;
+  text-align: left;
+}
+
+.mat-mdc-icon-button {
+  width: fit-content;
+}
+
+.mat-mdc-row .mat-mdc-cell {
+  text-align: left;
+}
+
+.psdk-mat-header {
+  white-space: normal;
+  padding-right: 5px;
+}
+
+.psdk-mat-header-button {
+  display: inline-grid;
+}
+
+.psdk-mat-header-arrow {
+  display: inline-grid;
+  vertical-align: middle;
+}
+
+.psdk-mat-header-filter {
+  display: inline-grid;
+  vertical-align: middle;
+}
+
+.psdk-full-width {
+  width: 100%;
+}
+
+.psdk-search {
+  padding-left: 0.625rem;
+}
+
+.psdk-icon-search {
+  vertical-align: sub;
+  padding: 0rem 0.125rem;
+  min-width: unset;
+  width: 1.1rem;
+}
+
+.psdk-outer-div-in-form {
+  display: inline-grid;
+}
+
+.psdk-inner-div-in-form {
+  height: auto;
+  position: relative;
+  width: 100%;
+  overflow: auto;
+  max-height: 550px;
+  min-height: auto;
+}
+
+.psdk-list-view-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+  vertical-align: middle;
+  filter: $app-primary-color-filter;
+}
+
+.psdk-filter-svg-icon {
+  width: 1rem;
+  display: inline-block;
+  vertical-align: middle;
+  filter: $app-neutral-color-filter;
+}
+
+.psdk-arrow-svg-icon {
+  width: 1rem;
+  display: inline-block;
+  vertical-align: middle;
+  filter: $app-neutral-color-filter;
+}
+
+.psdk-filter-popover {
+  display: table;
+  margin: auto;
+  min-width: 100px;
+  background-color: white;
+  border: 1px solid black;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 0 10px 3px #777;
+  position: absolute;
+  z-index: 99;
+}
+
+.psdk-dialog-background {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(100, 100, 100, 0.4);
+  position: fixed;
+  z-index: 999;
+  top: 0px;
+  left: 0px;
+}
+
+.psdk-modal-file-top {
+  display: table;
+  margin: auto;
+  min-width: 150px;
+  background-color: white;
+  border: 1px solid black;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 0 10px 3px #777;
+}
+
+tr.mat-mdc-row {
+  cursor: pointer;
+}
+
+tr.mat-mdc-header-row {
+  background: #f5f5f5;
+}
+
+.psdk-data-readonly {
+  margin-top: 0.625rem;
+  width: 100%;
+}
+
+.psdk-no-records {
+  height: 56px;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  border: 1px solid lightgray;
+  border-top: none;
+  background: white;
+}
+
+.psdk-utility-card-action-svg-icon {
+  width: 1.4rem;
+}
+
+.label {
+  margin: 8px;
+}
+
+.results-count {
+  opacity: 0.7;
+  font-size: 0.8rem;
+  font-weight: bold;
+  margin-inline-start: 0.625rem;
+}

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/simple-table-manual/simple-table-manual.component.spec.ts

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