@pega/angular-sdk-overrides 0.23.1

package/lib/template/simple-table-manual/helpers.ts

@@ -0,0 +1,294 @@
+import { getSeconds } from '@pega/angular-sdk-components';
+
+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 getFieldWidth(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, isDataObject, parameters) => {
+  return {
+    name,
+    config: {
+      type,
+      referenceList: fieldMetadata.datasource.name,
+      parameters: parameters ?? fieldMetadata.datasource.parameters,
+      personalization: false,
+      isDataObject,
+      grouping: true,
+      globalSearch: true,
+      reorderFields: true,
+      toggleFieldVisibility: true,
+      title: propertyLabel,
+      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: getFieldWidth(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()
+  };
+};
+
+export const filterDataByDate = (item, filterObj) => {
+  let bKeep;
+  let value = item[filterObj.ref] != null ?? item[filterObj.ref] != '' ? getSeconds(item[filterObj.ref]) : null;
+  let filterValue = filterObj.containsFilterValue != null && filterObj.containsFilterValue != '' ? getSeconds(filterObj.containsFilterValue) : null;
+
+  switch (filterObj.containsFilter) {
+    case 'notequal':
+      // becasue filterValue is in minutes, need to have a range of less than 60 secons
+
+      if (value != null && filterValue != null) {
+        // get rid of millisecons
+        value /= 1000;
+        filterValue /= 1000;
+
+        const diff = value - filterValue;
+        if (diff >= 0 && diff < 60) {
+          bKeep = false;
+        }
+      }
+
+      break;
+    case 'after':
+      if (value < filterValue) {
+        bKeep = false;
+      }
+      break;
+    case 'before':
+      if (value > filterValue) {
+        bKeep = false;
+      }
+      break;
+    case 'null':
+      if (value != null) {
+        bKeep = false;
+      }
+      break;
+    case 'notnull':
+      if (value == null) {
+        bKeep = false;
+      }
+      break;
+    default:
+      break;
+  }
+
+  return bKeep;
+};
+
+export const filterDataByCommonFields = (item, filterObj) => {
+  let bKeep;
+  const value = item[filterObj.ref].toLowerCase();
+  const filterValue = filterObj.containsFilterValue.toLowerCase();
+
+  switch (filterObj.containsFilter) {
+    case 'contains':
+      if (value.indexOf(filterValue) < 0) {
+        bKeep = false;
+      }
+      break;
+    case 'equals':
+      if (value != filterValue) {
+        bKeep = false;
+      }
+      break;
+    case 'startswith':
+      if (value.indexOf(filterValue) != 0) {
+        bKeep = false;
+      }
+      break;
+    default:
+      break;
+  }
+
+  return bKeep;
+};
+
+/**
+ * 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/lib/template/simple-table-manual/simple-table-manual.component.html

@@ -0,0 +1,147 @@
+<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 || allowEditingInModal" 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>
+      <ng-container matColumnDef="DeleteIcon">
+        <div *ngIf="allowEditingInModal">
+          <th mat-header-cell *matHeaderCellDef></th>
+          <td mat-cell *matCellDef="let element; index as j">
+            <div class="header-icon">
+              <button mat-icon-button [matMenuTriggerFor]="utilityMenu">
+                <img class="psdk-utility-card-actions-svg-icon" src="{{ settingsSvgIcon$ }}" />
+              </button>
+              <mat-menu #utilityMenu="matMenu" overlapTrigger="false">
+                <button mat-menu-item (click)="editRecord(element, j)">Edit</button>
+                <button mat-menu-item (click)="deleteRecord(j)">Delete</button>
+              </mat-menu>
+            </div>
+          </td>
+        </div>
+      </ng-container>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+    <table *ngIf="editableMode && !allowEditingInModal" 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 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"
+          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/lib/template/simple-table-manual/simple-table-manual.component.scss

@@ -0,0 +1,185 @@
+@import '@pega/angular-sdk-components/_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/lib/template/simple-table-manual/simple-table-manual.component.spec.ts

@@ -0,0 +1,24 @@
+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();
+  });
+});