@pega/angular-sdk-overrides 0.23.1

package/lib/template/promoted-filters/promoted-filters.component.ts

@@ -0,0 +1,157 @@
+import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+const SUPPORTED_TYPES_IN_PROMOTED_FILTERS = [
+  'TextInput',
+  'Percentage',
+  'Email',
+  'Integer',
+  'Decimal',
+  'Checkbox',
+  'DateTime',
+  'Date',
+  'Time',
+  'Text',
+  'TextArea',
+  'Currency',
+  'URL',
+  'RichText'
+];
+
+@Component({
+  selector: 'app-promoted-filters',
+  templateUrl: './promoted-filters.component.html',
+  styleUrls: ['./promoted-filters.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class PromotedFiltersComponent implements OnInit, OnDestroy {
+  @Input() viewName;
+  @Input() filters;
+  @Input() listViewProps;
+  @Input() pageClass;
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+  @Input() parameters = {};
+
+  angularPConnectData: AngularPConnectData = {};
+
+  showFilters: boolean;
+  localeCategory = 'SimpleTable';
+  localizedVal;
+  filtersProperties = {};
+  showTable;
+  transientItemID;
+  processedFilters: any[] = [];
+  payload = {};
+
+  constructor(private angularPConnect: AngularPConnectService) {}
+
+  ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+    this.updateSelf();
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  onStateChange() {
+    // 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() {
+    this.localizedVal = PCore.getLocaleUtils().getLocaleValue;
+    this.filters.forEach(filter => {
+      this.filtersProperties[PCore.getAnnotationUtils().getPropertyName(filter.config.value)] = '';
+    });
+
+    const filtersWithClassID = { ...this.filtersProperties, classID: this.pageClass };
+    this.transientItemID = (this.pConn$.getContainerManager() as any).addTransientItem({ id: this.viewName, data: filtersWithClassID });
+    this.processedFilters = [];
+    this.filters.forEach(filter => {
+      const filterClone = { ...filter };
+      // convert any field which is not supported to TextInput and delete the placeholder as it may contain placeholder specific to original type.
+      if (!SUPPORTED_TYPES_IN_PROMOTED_FILTERS.includes(filterClone.type)) {
+        filterClone.type = 'TextInput';
+        delete filterClone.config.placeholder;
+      }
+      filterClone.config.contextName = this.transientItemID;
+      filterClone.config.readOnly = false;
+      filterClone.config.context = this.transientItemID;
+      filterClone.config.localeReference = this.listViewProps.localeReference;
+      const c11nEnv = PCore.createPConnect({
+        meta: filterClone,
+        options: {
+          hasForm: true,
+          contextName: this.transientItemID
+        }
+      });
+      this.processedFilters.push(c11nEnv);
+    });
+    this.showFilters = true;
+  }
+
+  formatPromotedFilters(promotedFilters) {
+    return Object.entries(promotedFilters).reduce((acc, [field, value]) => {
+      if (value) {
+        acc[field] = {
+          lhs: {
+            field
+          },
+          comparator: 'EQ',
+          rhs: {
+            value
+          }
+        };
+      }
+      return acc;
+    }, {});
+  }
+
+  isValidInput(input) {
+    return Object.values(input).findIndex(v => v) >= 0;
+  }
+
+  getFilterData() {
+    const changes = PCore.getFormUtils().getChanges(this.transientItemID);
+    const formValues = {};
+    Object.keys(changes).forEach(key => {
+      if (!['context_data', 'pageInstructions'].includes(key)) {
+        formValues[key] = changes[key];
+      }
+    });
+    const promotedFilters = this.formatPromotedFilters(formValues);
+    if (PCore.getFormUtils().isFormValid(this.transientItemID) && this.isValidInput(formValues)) {
+      this.showTable = true;
+      const Query: any = {
+        dataViewParameters: this.parameters || {}
+      };
+
+      if (Object.keys(promotedFilters).length > 0) {
+        Query.query = { filter: { filterConditions: promotedFilters } };
+      }
+      this.payload = Query;
+    }
+  }
+
+  clearFilterData() {
+    PCore.getContainerUtils().clearTransientData(this.transientItemID);
+    this.showTable = false;
+    this.pConn$?.getListActions?.()?.setSelectedRows([]); // Clear the selection (if any made by user)
+  }
+}

package/lib/template/repeating-structures/repeating-structures.component.html

@@ -0,0 +1,21 @@
+<div>
+  <mat-form-field class="psdk-search">
+    <mat-label
+      ><mat-icon class="psdk-icon-search" style="transform: scale(1.2); width: 2rem; vertical-align: sub" svgIcon="magnify" mastListIcon></mat-icon>
+      Search</mat-label
+    >
+    <input matInput (keyup)="applySearch($event)" placeholder="" />
+  </mat-form-field>
+
+  <table mat-table [dataSource]="repeatList$" matSort>
+    <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.name">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ dCol.label }}</th>
+      <td mat-cell *matCellDef="let element">{{ element[dCol.name] }}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns$" (click)="rowClick(row)"></tr>
+  </table>
+
+  <mat-paginator [pageSizeOptions]="[10, 20, 50, 100, 500]" showFirstLastButtons></mat-paginator>
+</div>

package/lib/template/repeating-structures/repeating-structures.component.scss

@@ -0,0 +1,17 @@
+table {
+  width: 100%;
+}
+
+.mat-mdc-row .mat-mdc-cell {
+  text-align: left;
+}
+
+.psdk-search {
+  padding-left: 0.625rem;
+}
+
+.psdk-icon-search {
+  vertical-align: sub;
+  padding: 0rem 0.125rem;
+  min-width: unset;
+}

package/lib/template/repeating-structures/repeating-structures.component.spec.ts

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

package/lib/template/repeating-structures/repeating-structures.component.ts

@@ -0,0 +1,155 @@
+import { Component, OnInit, Input, ViewChild, AfterViewInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { ProgressSpinnerService } from '@pega/angular-sdk-components';
+import { Utils } from '@pega/angular-sdk-components';
+
+interface RepeatingStructuresProps {
+  referenceList?: any[];
+  rowClickAction?: string;
+}
+
+@Component({
+  selector: 'app-repeating-structures',
+  templateUrl: './repeating-structures.component.html',
+  styleUrls: ['./repeating-structures.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatTableModule, MatSortModule, MatPaginatorModule]
+})
+export class RepeatingStructuresComponent implements OnInit, AfterViewInit {
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+  @Input() pConn$: typeof PConnect;
+
+  configProps$: RepeatingStructuresProps;
+  repeatList$: MatTableDataSource<any>;
+  fields$: any[];
+  displayedColumns$ = Array<string>();
+
+  constructor(
+    private psService: ProgressSpinnerService,
+    private utils: Utils
+  ) {}
+
+  ngOnInit(): void {
+    const componentConfig = (this.pConn$.getRawMetadata() as any).config || { fields: [] };
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+    this.fields$ = this.initializeColumns(componentConfig.fields);
+
+    const refList = this.configProps$.referenceList;
+    // @ts-ignore - second parameter pageReference for getValue method should be optional
+    const tableDataResults = JSON.parse(JSON.stringify(this.pConn$.getValue(refList)));
+
+    // update elements like date format
+    const updatedRefList = this.updateData(tableDataResults, this.fields$);
+
+    this.repeatList$ = new MatTableDataSource(updatedRefList);
+    this.displayedColumns$ = this.getDisplayColumns(this.fields$);
+    this.repeatList$.paginator = this.paginator;
+  }
+
+  ngAfterViewInit() {
+    // paginator has to exist for this to work,
+    // so called after init (paginator drawn)
+    this.repeatList$.paginator = this.paginator;
+    this.repeatList$.sort = this.sort;
+  }
+
+  applySearch(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.repeatList$.filter = filterValue.trim().toLowerCase();
+
+    if (this.repeatList$.paginator) {
+      this.repeatList$.paginator.firstPage();
+    }
+  }
+
+  rowClick(row) {
+    // eslint-disable-next-line sonarjs/no-small-switch
+    switch (this.configProps$.rowClickAction) {
+      case 'openAssignment':
+        this.psService.sendMessage(true);
+        this.openAssignment(row);
+        break;
+      default:
+        break;
+    }
+  }
+
+  updateData(listData: any[], fieldData: any[]): any[] {
+    const returnList: any[] = new Array<any>();
+    listData.forEach(row => {
+      // copy
+      const rowData = JSON.parse(JSON.stringify(listData[row]));
+
+      for (let fieldIndex = 0; fieldIndex < fieldData.length; fieldIndex++) {
+        if (fieldData[fieldIndex].type == 'date') {
+          const fieldName = fieldData[fieldIndex].name;
+          const formattedDate = rowData[fieldName];
+
+          // format date
+          // formattedDate = formattedDate.replace("GMT", "+0000");
+          this.utils.generateDateTime(formattedDate, 'MMMM D, YYYY h:mm:ss A');
+
+          // update
+          rowData[fieldName] = formattedDate;
+        }
+      }
+      returnList.push(rowData);
+    });
+    return returnList;
+  }
+
+  openAssignment(row) {
+    const { pxRefObjectClass, pzInsKey } = row;
+    const sTarget = this.pConn$.getContainerName();
+    const options: any = { containerName: sTarget };
+    this.pConn$
+      .getActionsApi()
+      .openAssignment(pzInsKey, pxRefObjectClass, options)
+      .then(() => {});
+  }
+
+  initializeData(data) {
+    data.forEach((item, idx) => {
+      item.__original_index = idx;
+      item.__level = 1;
+    });
+
+    return data;
+  }
+
+  getType(field) {
+    const { config = {}, type } = field;
+    const { formatType } = config;
+    if (formatType === 'datetime' || formatType === 'date') {
+      // currently cosmos has only support for date ... it also need to support dateTime
+      return 'date';
+    }
+    return type.toLowerCase();
+  }
+
+  initializeColumns(fields = []) {
+    return fields.map((field: any, originalColIndex) => ({
+      ...field,
+      type: this.getType(field),
+      name: field.config.value.substring(4),
+      label: field.config.label.substring(3),
+      id: originalColIndex,
+      groupingEnabled: true,
+      grouped: false,
+      minWidth: 50,
+      cellRenderer: this.getType(field) === 'text' ? null : field.type,
+      filter: true
+    }));
+  }
+
+  getDisplayColumns(fields: any[] = []): string[] {
+    return fields.map((field: any) => field.name);
+  }
+}

package/lib/template/simple-table/config-ext.json

@@ -0,0 +1,7 @@
+{
+  "name": "SimpleTable",
+  "description": "Datatype List Template",
+  "type": "Template",
+  "subtype": "DATAVIEW",
+  "properties": []
+}

package/lib/template/simple-table/simple-table.component.html

@@ -0,0 +1,13 @@
+<ng-container *ngIf="bVisible$">
+  <div *ngIf="fieldGroupProps || listViewProps; else table">
+    <div *ngIf="fieldGroupProps">
+      <component-mapper name="FieldGroupTemplate" [props]="{ configProps$: fieldGroupProps, pConn$, formGroup$ }"></component-mapper>
+    </div>
+    <div *ngIf="listViewProps">
+      <component-mapper name="ListView" [props]="{ pConn$: refToPConnect, payload: listViewProps }"></component-mapper>
+    </div>
+  </div>
+  <ng-template #table>
+    <component-mapper name="SimpleTableManual" [props]="{ pConn$, formGroup$ }"></component-mapper>
+  </ng-template>
+</ng-container>

package/lib/template/simple-table/simple-table.component.spec.ts

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

package/lib/template/simple-table/simple-table.component.ts

@@ -0,0 +1,171 @@
+import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { Utils } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { buildMetaForListView, getContext } from '@pega/angular-sdk-components';
+
+interface SimpleTableProps {
+  // If any, enter additional props that only exist on this component
+  multiRecordDisplayAs: string;
+  contextClass: any;
+  visibility: boolean;
+  label: string;
+  propertyLabel: string;
+  displayMode: string;
+  fieldMetadata: any;
+  hideLabel: boolean;
+  parameters: any;
+  isDataObject: boolean;
+  type: string;
+  ruleClass: string;
+  authorContext: string;
+  name: string;
+}
+
+@Component({
+  selector: 'app-simple-table',
+  templateUrl: './simple-table.component.html',
+  styleUrls: ['./simple-table.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class SimpleTableComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  angularPConnectData: AngularPConnectData = {};
+
+  bVisible$ = true;
+  configProps$: SimpleTableProps;
+  fieldGroupProps: any;
+  listViewProps: any;
+  refToPConnect: any;
+
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private utils: Utils
+  ) {}
+
+  ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+    // Then, continue on with other initialization
+
+    // call checkAndUpdate when initializing
+    this.checkAndUpdate();
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  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()) as SimpleTableProps;
+
+    if (this.configProps$.visibility != null) {
+      // eslint-disable-next-line no-multi-assign
+      this.bVisible$ = this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
+    }
+
+    const { multiRecordDisplayAs } = this.configProps$;
+    let { contextClass } = this.configProps$;
+    if (!contextClass) {
+      // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'
+      let listName = this.pConn$.getComponentConfig().referenceList;
+      listName = PCore.getAnnotationUtils().getPropertyName(listName);
+      // @ts-ignore - Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'
+      contextClass = this.pConn$.getFieldMetadata(listName)?.pageClass;
+    }
+    if (multiRecordDisplayAs === 'fieldGroup') {
+      this.fieldGroupProps = { ...this.configProps$, contextClass };
+    }
+
+    const {
+      label: labelProp,
+      propertyLabel,
+      displayMode,
+      fieldMetadata,
+      hideLabel,
+      parameters,
+      isDataObject,
+      type,
+      ruleClass,
+      authorContext,
+      name
+    } = this.configProps$;
+
+    const label = labelProp || propertyLabel;
+
+    const propsToUse = { label, ...this.pConn$.getInheritedProps() };
+    const isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';
+
+    if (fieldMetadata && fieldMetadata.type === 'Page List' && fieldMetadata.dataRetrievalType === 'refer') {
+      const {
+        children: [{ children: rawFields }],
+        parameters: rawParams
+      } = (this.pConn$.getRawMetadata() as any).config;
+
+      if (isDisplayModeEnabled && hideLabel) {
+        propsToUse.label = '';
+      }
+
+      const metaForListView = buildMetaForListView(
+        fieldMetadata,
+        rawFields,
+        type,
+        ruleClass,
+        name,
+        propsToUse.label,
+        isDataObject,
+        parameters // resolved params
+      );
+
+      const metaForPConnect = JSON.parse(JSON.stringify(metaForListView));
+      // @ts-ignore - PCore.getMetadataUtils().getPropertyMetadata - An argument for 'currentClassID' was not provided.
+      metaForPConnect.config.parameters = rawParams ?? PCore.getMetadataUtils().getPropertyMetadata(name)?.datasource?.parameters;
+
+      const { referenceListStr: referenceList } = getContext(this.pConn$);
+      let requiredContextForQueryInDisplayMode = {};
+      if (isDisplayModeEnabled) {
+        requiredContextForQueryInDisplayMode = {
+          referenceList
+        };
+      }
+      const options = {
+        context: this.pConn$.getContextName(),
+        pageReference: this.pConn$.getPageReference(),
+        ...requiredContextForQueryInDisplayMode
+      };
+
+      this.refToPConnect = PCore.createPConnect({ meta: metaForPConnect, options }).getPConnect();
+
+      this.listViewProps = {
+        ...metaForListView.config,
+        displayMode,
+        fieldName: authorContext
+      };
+    }
+  }
+
+  // Callback passed when subscribing to store change
+  onStateChange() {
+    this.checkAndUpdate();
+  }
+}