@pega/angular-sdk-overrides 0.23.1

package/lib/template/list-view/DefaultViewMeta.ts

@@ -0,0 +1,220 @@
+const LOCALIZATON_ANNOTATION = '@L ';
+const PROPERTY_ANNOTATION = '@P .';
+const USER_ANNOTATION = '@USER .';
+const ASSOCIATED_ANNOTATION = '@ASSOCIATED .';
+const ASSOCIATION_ANNOTATION = '@CA ';
+
+const getDefaultConfig = (fieldMeta, classID, show) => {
+  const {
+    name,
+    label,
+    fieldID,
+    fieldType,
+    dataType,
+    type,
+    classID: fieldMetaClassID,
+    displayAs,
+    displayAsLink,
+    category,
+    associationClassID,
+    associationID
+  } = fieldMeta;
+  return {
+    value: (associationClassID ? ASSOCIATION_ANNOTATION : PROPERTY_ANNOTATION).concat(fieldID),
+    label: LOCALIZATON_ANNOTATION.concat(name || label),
+    fieldType,
+    propertyType: dataType || type,
+    classID: classID || fieldMetaClassID,
+    displayAs,
+    displayAsLink,
+    category,
+    show,
+    ...(associationClassID ? { associationLabel: LOCALIZATON_ANNOTATION.concat(category) } : {}),
+    associationID
+  };
+};
+
+export function getDefaultViewMeta(fieldMeta, classID, showField) {
+  const { type, name, displayAs, fieldID, isUserReference, associationID, datasource, label, fieldType } = fieldMeta;
+  const mapperKey = type && displayAs ? type.concat(':').concat(displayAs) : type;
+  const defaultConfig = getDefaultConfig(fieldMeta, classID, showField);
+  let viewMeta;
+  switch (mapperKey) {
+    case 'True-False:pxCheckbox':
+      viewMeta = {
+        type: 'Checkbox',
+        config: {
+          ...defaultConfig,
+          trueLabel: '@L Yes',
+          falseLabel: '@L No',
+          caption: LOCALIZATON_ANNOTATION.concat(name || label),
+          label: undefined
+        }
+      };
+      break;
+    case 'Decimal:pxCurrency':
+      viewMeta = {
+        type: 'Currency',
+        config: defaultConfig
+      };
+      break;
+    case 'Date Time:pxDateTime':
+    case 'Date & time:pxDateTime':
+      viewMeta = {
+        type: 'DateTime',
+        config: defaultConfig
+      };
+      break;
+    case 'Date:pxDateTime':
+    case 'Date only:pxDateTime':
+      viewMeta = {
+        type: 'Date',
+        config: defaultConfig
+      };
+      break;
+    case 'Decimal:pxNumber':
+      viewMeta = {
+        type: 'Decimal',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxEmail':
+      viewMeta = {
+        type: 'Email',
+        config: defaultConfig
+      };
+      break;
+    case 'Integer:pxInteger':
+      viewMeta = {
+        type: 'Integer',
+        config: defaultConfig
+      };
+      break;
+    case 'Decimal:pxPercentage':
+      viewMeta = {
+        type: 'Percentage',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxPhone':
+      viewMeta = {
+        type: 'Phone',
+        config: {
+          ...defaultConfig,
+          datasource: {
+            source: '@DATASOURCE D_pyCountryCallingCodeList.pxResults',
+            fields: {
+              value: '@P .pyCallingCode'
+            }
+          }
+        }
+      };
+      break;
+    case 'TimeOfDay:pxDateTime':
+      viewMeta = {
+        type: 'Time',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxURL':
+    case 'Text:pxUrl':
+      viewMeta = {
+        type: 'URL',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxTextArea':
+      viewMeta = {
+        type: 'TextArea',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxRichTextEditor':
+      viewMeta = {
+        type: 'RichText',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxAutoComplete':
+      if (isUserReference || fieldType === 'User reference') {
+        viewMeta = {
+          type: 'UserReference',
+          config: {
+            ...defaultConfig,
+            value: USER_ANNOTATION.concat(fieldID),
+            placeholder: 'Select...',
+            displayAs: 'Search box',
+            associationID,
+            associationLabel: undefined
+          }
+        };
+      } else {
+        const { tableType = '' } = datasource || {};
+        viewMeta = {
+          type: 'AutoComplete',
+          config: {
+            ...defaultConfig,
+            placeholder: 'Select...',
+            listType: 'associated',
+            datasource: ASSOCIATED_ANNOTATION.concat(fieldID),
+            deferDatasource: tableType === 'DataPage'
+          }
+        };
+      }
+      break;
+    case 'Text:pxDropdown':
+      if (isUserReference || fieldType === 'User reference') {
+        viewMeta = {
+          type: 'UserReference',
+          config: {
+            ...defaultConfig,
+            value: USER_ANNOTATION.concat(fieldID),
+            placeholder: 'Select...',
+            displayAs: 'Drop-down list',
+            associationID,
+            associationLabel: undefined
+          }
+        };
+      } else {
+        const { tableType = '' } = datasource || {};
+        viewMeta = {
+          type: 'Dropdown',
+          config: {
+            ...defaultConfig,
+            placeholder: 'Select...',
+            listType: 'associated',
+            datasource: ASSOCIATED_ANNOTATION.concat(fieldID),
+            deferDatasource: tableType === 'DataPage'
+          }
+        };
+      }
+      break;
+    case 'Text:pxRadioButtons':
+      {
+        const { tableType = '' } = datasource || {};
+        viewMeta = {
+          type: 'RadioButtons',
+          config: {
+            ...defaultConfig,
+            placeholder: 'Select...',
+            listType: 'associated',
+            datasource: ASSOCIATED_ANNOTATION.concat(fieldID),
+            deferDatasource: tableType === 'DataPage'
+          }
+        };
+      }
+      break;
+    case 'Text:pxTextInput':
+      viewMeta = {
+        type: 'TextInput',
+        config: defaultConfig
+      };
+      break;
+    default:
+      viewMeta = {
+        type,
+        config: defaultConfig
+      };
+  }
+  return viewMeta;
+}

package/lib/template/list-view/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "ListView",
+  "label": "Table",
+  "description": "Table Template",
+  "type": "Template",
+  "subtype": "LIST",
+  "properties": []
+}

package/lib/template/list-view/list-view.component.html

@@ -0,0 +1,253 @@
+<div class="psdk-list-header">
+  <div>
+    <mat-form-field class="psdk-search" *ngIf="bShowSearch$">
+      <mat-label><img class="psdk-icon-search" src="{{ searchIcon$ }}" /> <span class="psdk-search-label">Search</span> </mat-label>
+      <input matInput id="search" (keyup)="applySearch($event)" placeholder="" />
+    </mat-form-field>
+
+    <div *ngIf="!bInForm$" class="psdk-outer-div-in-form">
+      <div class="psdk-inner-div-in-form" *ngIf="bColumnReorder$">
+        <div>
+          <table
+            mat-table
+            id="list-view"
+            [dataSource]="repeatList$"
+            matSort
+            cdkDropList
+            cdkDropListOrientation="horizontal"
+            (cdkDropListDropped)="drop($event)"
+          >
+            <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name" sticky="true">
+              <th mat-header-cell *matHeaderCellDef class="psdk-mat-header" (click)="_headerSortClick($event, dCol)" arrowPosition="before" cdkDrag>
+                {{ dCol.config.label }}
+                <div class="psdk-mat-header-filter">
+                  <img class="psdk-filter-svg-icon" name="filterOnIcon" />
+                </div>
+                <div class="psdk-mat-header-arrow">
+                  <img class="psdk-arrow-svg-icon" arrow="none" [attr.arrowid]="dCol.config.name" />
+                </div>
+                <div class="psdk-mat-header-button" (click)="$event.stopPropagation()">
+                  <button mat-icon-button [matMenuTriggerFor]="groupMenu">
+                    <img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
+                  </button>
+                  <mat-menu #groupMenu>
+                    <button *ngIf="!_showUnGroupBy(dCol) && bGrouping$" 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; index as i">
+                <button
+                  *ngIf="_showButton(dCol.config.name, dCol); else regular"
+                  mat-button
+                  color="primary"
+                  (click)="_listViewClick(dCol.config, element)"
+                >
+                  {{ element[dCol.config.name] }}
+                </button>
+                <ng-template #regular>
+                  {{ element[dCol.config.name] || '---' }}
+                </ng-template>
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns$; sticky: true"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
+
+            <!-- Group header -->
+            <ng-container matColumnDef="groupHeader">
+              <td mat-cell colspan="999" *matCellDef="let group">
+                <mat-icon *ngIf="group.expanded" [attr.style]="_getIconStyle(group.level)">expand_less</mat-icon>
+                <mat-icon *ngIf="!group.expanded" [attr.style]="_getIconStyle(group.level)">expand_more</mat-icon>
+                <strong
+                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{
+                    group.totalCounts
+                  }})</strong
+                >
+              </td>
+            </ng-container>
+
+            <tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup" (click)="_groupHeaderClick(row)"></tr>
+          </table>
+        </div>
+      </div>
+      <div class="psdk-inner-div-in-form" *ngIf="!bColumnReorder$">
+        <div>
+          <table mat-table id="list-view" [dataSource]="repeatList$" matSort>
+            <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name" sticky="true">
+              <th mat-header-cell *matHeaderCellDef class="psdk-mat-header" (click)="_headerSortClick($event, dCol)" arrowPosition="before">
+                {{ dCol.config.label }}
+                <div class="psdk-mat-header-filter">
+                  <img class="psdk-filter-svg-icon" name="filterOnIcon" />
+                </div>
+                <div class="psdk-mat-header-arrow">
+                  <img class="psdk-arrow-svg-icon" arrow="none" [attr.arrowid]="dCol.config.name" />
+                </div>
+                <div class="psdk-mat-header-button" (click)="$event.stopPropagation()">
+                  <button mat-icon-button [matMenuTriggerFor]="groupMenu">
+                    <img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
+                  </button>
+                  <mat-menu #groupMenu>
+                    <button *ngIf="!_showUnGroupBy(dCol) && bGrouping$" 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; index as i">
+                <button
+                  *ngIf="_showButton(dCol.config.name, dCol); else regular"
+                  mat-button
+                  color="primary"
+                  (click)="_listViewClick(dCol.config, element)"
+                >
+                  {{ element[dCol.config.name] }}
+                </button>
+                <ng-template #regular>
+                  {{ element[dCol.config.name] }}
+                </ng-template>
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns$; sticky: true"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
+
+            <!-- Group header -->
+            <ng-container matColumnDef="groupHeader">
+              <td mat-cell colspan="999" *matCellDef="let group">
+                <mat-icon *ngIf="group.expanded" [attr.style]="_getIconStyle(group.level)">expand_less</mat-icon>
+                <mat-icon *ngIf="!group.expanded" [attr.style]="_getIconStyle(group.level)">expand_more</mat-icon>
+                <strong
+                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{
+                    group.totalCounts
+                  }})</strong
+                >
+              </td>
+            </ng-container>
+
+            <tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup" (click)="_groupHeaderClick(row)"></tr>
+          </table>
+        </div>
+      </div>
+    </div>
+    <div *ngIf="bInForm$">
+      <div>
+        <div class="psdk-inner-div-in-form">
+          <table id="list-view" *ngIf="repeatListData.length > 0" mat-table [dataSource]="repeatList$" matSort>
+            <ng-container *ngIf="singleSelectionMode" matColumnDef="select">
+              <th mat-header-cell *matHeaderCellDef></th>
+              <td mat-cell *matCellDef="let row">
+                <mat-radio-button [value]="row[rowID]" (change)="fieldOnChange(row)"></mat-radio-button>
+              </td>
+            </ng-container>
+            <ng-container *ngIf="multiSelectionMode" matColumnDef="select">
+              <th mat-header-cell *matHeaderCellDef></th>
+              <td mat-cell *matCellDef="let row">
+                <mat-checkbox [value]="row[rowID]" (change)="onCheckboxClick(row, $event)"></mat-checkbox>
+              </td>
+            </ng-container>
+            <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header (click)="_headerSortClick($event, dCol)" arrowPosition="before">
+                {{ dCol.config.label }}
+              </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>
+          <div *ngIf="repeatListData?.length === 0">
+            <table id="list-view" *ngIf="repeatListData?.length === 0" mat-table [dataSource]="repeatList$">
+              <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name">
+                <th mat-header-cell *matHeaderCellDef>{{ dCol.config.label }}</th>
+              </ng-container>
+              <tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
+            </table>
+          </div>
+          <div class="psdk-no-records" *ngIf="repeatListData?.length === 0">No Records Found.</div>
+        </div>
+      </div>
+    </div>
+
+    <mat-paginator id="pagination" *ngIf="bInForm$" [pageSizeOptions]="[10, 20, 50, 100, 500, 1000]" showFirstLastButtons></mat-paginator>
+    <mat-paginator id="pagination" *ngIf="!bInForm$" [pageSizeOptions]="[10, 20, 50, 100, 500]" showFirstLastButtons></mat-paginator>
+  </div>
+
+  <!-- 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>
+</div>

package/lib/template/list-view/list-view.component.scss

@@ -0,0 +1,169 @@
+@import '@pega/angular-sdk-components/_shared/styles.scss';
+
+.psdk-list-header {
+  background-color: white;
+  padding: 1rem;
+  margin: 0.5rem;
+  border-radius: 0.6125rem;
+}
+
+table {
+  width: 100%;
+}
+
+::ng-deep .mat-sort-header-content {
+  white-space: nowrap;
+}
+
+::ng-deep td.mat-mdc-cell {
+  white-space: nowrap;
+}
+
+::ng-deep th.mat-mdc-header-cell,
+td.mat-mdc-cell,
+td.mat-mdc-footer-cell {
+  padding: 0rem 0.188rem;
+}
+
+::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: nowrap;
+  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;
+  padding-right: 0.625rem;
+}
+
+.psdk-icon-search {
+  vertical-align: sub;
+  padding: 0.125rem 0.125rem;
+  min-width: unset;
+  width: 1.1rem;
+}
+
+.psdk-outer-div-in-form {
+  padding: 1rem;
+  overflow: hidden;
+}
+
+.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;
+}
+
+.psdk-no-records {
+  height: 56px;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  border: 1px solid lightgray;
+  border-top: none;
+}
+
+.psdk-table-field-link {
+  color: $app-primary-color;
+  padding: 0;
+  cursor: pointer;
+  border: 0;
+  background-color: transparent;
+  align-items: center;
+}

package/lib/template/list-view/list-view.component.spec.ts

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