@pega/dx-component-builder-sdk 0.23.1 → 0.23.2

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/promoted-filters/promoted-filters.component.ts

@@ -0,0 +1,167 @@
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { AngularPConnectService } from '@pega/angular-sdk-library';
+import { ListViewComponent } from '@pega/angular-sdk-library';
+import { ComponentMapperComponent } from '@pega/angular-sdk-library';
+
+declare const window: any;
+
+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, ListViewComponent, forwardRef(() => ComponentMapperComponent)]
+})
+export class PromotedFiltersComponent implements OnInit {
+  @Input() viewName;
+  @Input() filters;
+  @Input() listViewProps;
+  @Input() pageClass;
+  @Input() pConn$: any;
+  @Input() formGroup$: FormGroup;
+  @Input() parameters = {};
+
+  angularPConnectData: any = {};
+  PCore$: any;
+
+  showFilters: boolean;
+  localeCategory = 'SimpleTable';
+  localizedVal;
+  filtersProperties = {};
+  showTable;
+  transientItemID;
+  processedFilters = [];
+  payload = {};
+
+  constructor(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.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 = this.PCore$.getLocaleUtils().getLocaleValue;
+    this.filters.forEach((filter) => {
+      this.filtersProperties[this.PCore$.getAnnotationUtils().getPropertyName(filter.config.value)] = '';
+    });
+
+    const filtersWithClassID = { ...this.filtersProperties, classID: this.pageClass };
+    this.transientItemID = this.pConn$
+      .getContainerManager()
+      .addTransientItem({ id: this.viewName, data: filtersWithClassID });
+    this.processedFilters = [];
+    this.filters.map((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 = this.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 = this.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 (this.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() {
+    this.PCore$.getContainerUtils().clearTransientData(this.transientItemID);
+    this.showTable = false;
+    this.pConn$?.getListActions?.()?.setSelectedRows([]); // Clear the selection (if any made by user)
+  }
+}

package/tests/assets/components/SDK-Angular/createAll/override-sdk/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/tests/assets/components/SDK-Angular/createAll/override-sdk/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/tests/assets/components/SDK-Angular/createAll/override-sdk/template/repeating-structures/repeating-structures.component.spec.ts

@@ -0,0 +1,25 @@
+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/tests/assets/components/SDK-Angular/createAll/override-sdk/template/repeating-structures/repeating-structures.component.ts

@@ -0,0 +1,155 @@
+import { Component, OnInit, Input, ViewChild } 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-library';
+import { Utils } from '@pega/angular-sdk-library';
+
+@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 {
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+  @Input() pConn$: any;
+
+  configProps: any;
+  repeatList$: MatTableDataSource<any>;
+  fields$: Array<any>;
+  displayedColumns$ = Array<string>();
+
+  constructor(private psService: ProgressSpinnerService, private utils: Utils) {}
+
+  ngOnInit(): void {
+    const componentConfig = this.pConn$.getRawMetadata().config || { fields: [] };
+    this.configProps = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+    this.fields$ = this.initializeColumns(componentConfig.fields);
+
+    const refList = this.configProps.referenceList;
+    const tableDataResults = JSON.parse(JSON.stringify(this.pConn$.getValue(refList)));
+
+    // update elements like date format
+    let updatedRefList = this.updateData(tableDataResults, this.fields$);
+
+    this.repeatList$ = new MatTableDataSource(updatedRefList);
+    this.displayedColumns$ = this.getDisplayColums(this.fields$);
+    this.repeatList$.paginator = this.paginator;
+  }
+
+  ngOnDestroy() {}
+
+  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) {
+    switch (this.configProps.rowClickAction) {
+      case 'openAssignment':
+        this.psService.sendMessage(true);
+        this.openAssignment(row);
+        break;
+    }
+  }
+
+  updateData(listData: Array<any>, fieldData: Array<any>): Array<any> {
+    let returnList: Array<any> = new Array<any>();
+    for (let row in listData) {
+      // copy
+      let rowData = JSON.parse(JSON.stringify(listData[row]));
+
+      for (let field in fieldData) {
+        if (fieldData[field].type == 'date') {
+          let fieldName = fieldData[field].name;
+          let 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;
+    let sTarget = this.pConn$.getContainerName();
+    let options = { 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, 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
+    }));
+  }
+
+  getDisplayColums(fields = []) {
+    return fields.map((field, colIndex) => field.name);
+  }
+}

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/simple-table/config.json

@@ -0,0 +1,62 @@
+{
+  "name": "SimpleTable",
+  "description": "Datatype List Template",
+  "type": "Template",
+  "subtype": "DATAVIEW",
+  "icon": "EditableTable.svg",
+  "hideTemplatePicker": true,
+  "hideFromTemplatePicker": true,
+  "editing": true,
+  "properties": [
+    {
+      "name": "parameters",
+      "label": "",
+      "format": "PARAMETERS"
+    },
+    {
+      "name": "renderMode",
+      "label": "Mode",
+      "format": "RENDERMODE"
+    },
+    {
+      "name": "Columns",
+      "label": "Columns",
+      "format": "CONTENTPICKER",
+      "addTypeList": ["Fields", "Associations"],
+      "hideModifyIcons": false,
+      "modifyPanelOverrideProp": "renderMode",
+      "modifyPanelOverride": {
+        "ReadOnly": "ListField"
+      }
+    },
+    {
+      "name": "fillAvailableSpace",
+      "label": "Column to take up remaining width",
+      "format": "FILLCOLUMNWIDTH"
+    },
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "required",
+          "label": "Required",
+          "format": "REQUIRED",
+          "saveToReference": true
+        },
+        {
+          "name": "disabled",
+          "label": "Disabled",
+          "format": "DISABLED",
+          "saveToReference": true
+        },
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY",
+          "saveToReference": true
+        }
+      ]
+    }
+  ]
+}

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

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

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

@@ -0,0 +1,25 @@
+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/tests/assets/components/SDK-Angular/createAll/override-sdk/template/simple-table/simple-table.component.ts

@@ -0,0 +1,86 @@
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { AngularPConnectService } from '@pega/angular-sdk-library';
+import { Utils } from '@pega/angular-sdk-library';
+import { ComponentMapperComponent } from '@pega/angular-sdk-library';
+
+declare const window: any;
+
+@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 {
+  @Input() pConn$: any;
+  @Input() formGroup$: FormGroup;
+
+  angularPConnectData: any = {};
+  PCore$: any;
+
+  bVisible$: boolean = true;
+  configProps$: any;
+  fieldGroupProps: 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);
+    if (!this.PCore$) {
+      this.PCore$ = window.PCore;
+    }
+    // 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());
+
+    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) {
+      let listName = this.pConn$.getComponentConfig().referenceList;
+      listName = this.PCore$.getAnnotationUtils().getPropertyName(listName);
+      contextClass = this.pConn$.getFieldMetadata(listName)?.pageClass;
+    }
+    if (multiRecordDisplayAs === 'fieldGroup') {
+      this.fieldGroupProps = { ...this.configProps$, contextClass };
+    }
+  }
+
+  // Callback passed when subscribing to store change
+  onStateChange() {
+    this.checkAndUpdate();
+  }
+}
+