@pega/angular-sdk-overrides 24.2.10 → 25.1.10

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

@@ -44,18 +44,20 @@ function getFieldWidth(field, label) {
 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 { readonlyContextList, referenceList = readonlyContextList } = thePConn.getStateProps()?.config || thePConn.getStateProps();
+
   const pageReferenceForRows = referenceList.startsWith('.') ? `${pageReference}.${referenceList.substring(1)}` : referenceList;
+  const viewName = thePConn.viewName;
 
   // removing "caseInfo.content" prefix to avoid setting it as a target while preparing pageInstructions
-  referenceList = pageReferenceForRows.replace(PCore.getConstants().CASE_INFO.CASE_INFO_CONTENT, '');
+  // skipping the removal as StateMachine itself is removing this case info prefix while preparing pageInstructions
+  // referenceList = pageReferenceForRows.replace(PCore.getConstants().CASE_INFO.CASE_INFO_CONTENT, '');
 
   return {
     contextName,
     referenceListStr: referenceList,
-    pageReferenceForRows
+    pageReferenceForRows,
+    viewName
   };
 };
 
@@ -124,11 +126,125 @@ export const buildMetaForListView = (fieldMetadata, fields, type, ruleClass, nam
   };
 };
 
-export const buildFieldsForTable = (configFields, fields, showDeleteButton) => {
+const PRIMARY_FIELDS = 'pyPrimaryFields';
+const SUPPORTED_FIELD_TYPES = [
+  'Address',
+  'TextArea',
+  'TextInput',
+  'Phone',
+  'Email',
+  'Time',
+  'URL',
+  'Percentage',
+  'Integer',
+  'Decimal',
+  'Date',
+  'DateTime',
+  'Currency',
+  'Checkbox',
+  'Dropdown',
+  'AutoComplete',
+  'UserReference',
+  'RichText'
+];
+
+export const getConfigFields = (rawFields, contextClass, primaryFieldsViewIndex) => {
+  let primaryFields: any = [];
+  let configFields: any = [];
+
+  if (primaryFieldsViewIndex > -1) {
+    let primaryFieldVMD: any = PCore.getMetadataUtils().resolveView(PRIMARY_FIELDS);
+    if (Array.isArray(primaryFieldVMD)) {
+      primaryFieldVMD = primaryFieldVMD.find(primaryFieldView => primaryFieldView.classID === contextClass);
+      primaryFields = primaryFieldVMD?.children?.[0]?.children || [];
+    } else if (primaryFieldVMD?.classID === contextClass) {
+      primaryFields = primaryFieldVMD?.children?.[0]?.children || [];
+    }
+
+    if (primaryFields.length) {
+      primaryFields = primaryFields.filter(primaryField => SUPPORTED_FIELD_TYPES.includes(primaryField.type));
+    }
+  }
+
+  configFields = [...rawFields.slice(0, primaryFieldsViewIndex), ...primaryFields, ...rawFields.slice(primaryFieldsViewIndex + 1)];
+  // filter duplicate fields after combining raw fields and primary fields
+  return configFields.filter((field, index) => configFields.findIndex(_field => field.config?.value === _field.config?.value) === index);
+};
+
+export function isFLProperty(label) {
+  return label?.startsWith('@FL');
+}
+
+/**
+ * [getFieldLabel]
+ * Description - A utility that returns resolved field label for "@FL" annotation i.e from data model.
+ * @param {Object} fieldConfig
+ * @returns {string} resolved label string
+ *
+ * example:
+ * fieldConfig = {label: "@FL .pyID", classID: "TestCase-Work"};
+ * return "Case ID"
+ */
+export function getFieldLabel(fieldConfig) {
+  const { label, classID, caption } = fieldConfig;
+  let fieldLabel = (label ?? caption)?.substring(4);
+  const labelSplit = fieldLabel?.split('.');
+  const propertyName = labelSplit?.pop();
+  const fieldMetaData: any = PCore.getMetadataUtils().getPropertyMetadata(propertyName, classID) ?? {};
+  fieldLabel = fieldMetaData.label ?? fieldMetaData.caption ?? propertyName;
+  return fieldLabel;
+}
+
+export const updateFieldLabels = (fields, configFields, primaryFieldsViewIndex, pConnect, options) => {
+  const labelsOfFields: any = [];
+  const { columnsRawConfig = [] } = options;
+  fields.forEach((field, idx) => {
+    const rawColumnConfig = columnsRawConfig[idx]?.config;
+    if (field.config.value === PRIMARY_FIELDS) {
+      labelsOfFields.push('');
+    } else if (isFLProperty(rawColumnConfig?.label ?? rawColumnConfig?.caption)) {
+      labelsOfFields.push(getFieldLabel(rawColumnConfig) || field.config.label || field.config.caption);
+    } else {
+      labelsOfFields.push(field.config.label || field.config.caption);
+    }
+  });
+
+  if (primaryFieldsViewIndex > -1) {
+    const totalPrimaryFieldsColumns = configFields.length - fields.length + 1;
+    if (totalPrimaryFieldsColumns) {
+      const primaryFieldLabels: any = [];
+      for (let i = primaryFieldsViewIndex; i < primaryFieldsViewIndex + totalPrimaryFieldsColumns; i += 1) {
+        let label = configFields[i].config?.label;
+        if (isFLProperty(label)) {
+          label = getFieldLabel(configFields[i].config);
+        } else if (label.startsWith('@')) {
+          label = label.substring(3);
+        }
+        if (pConnect) {
+          label = pConnect.getLocalizedValue(label);
+        }
+        primaryFieldLabels.push(label);
+      }
+      labelsOfFields.splice(primaryFieldsViewIndex, 1, ...primaryFieldLabels);
+    } else {
+      labelsOfFields.splice(primaryFieldsViewIndex, 1);
+    }
+  }
+  return labelsOfFields;
+};
+
+export const buildFieldsForTable = (configFields, pConnect, showDeleteButton, options) => {
+  const { primaryFieldsViewIndex, fields } = options;
+
+  // get resolved field labels for primary fields raw config included in configFields
+  const fieldsLabels = updateFieldLabels(fields, configFields, primaryFieldsViewIndex, pConnect, {
+    columnsRawConfig: pConnect.getRawConfigProps()?.children?.find(item => item?.name === 'Columns')?.children
+  });
+
   const fieldDefs = configFields?.map((field, index) => {
     return {
       type: 'text',
-      label: fields[index].config.label || fields[index].config.caption,
+      label: fieldsLabels[index],
       fillAvailableSpace: !!field.config.fillAvailableSpace,
       id: `${index}`,
       name: field.config.value.substr(4),
@@ -189,7 +305,7 @@ export const createMetaForTable = (fields, renderMode) => {
 };
 
 export const filterDataByDate = (item, filterObj) => {
-  let bKeep;
+  let bKeep = true;
   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;
 
@@ -237,7 +353,7 @@ export const filterDataByDate = (item, filterObj) => {
 };
 
 export const filterDataByCommonFields = (item, filterObj) => {
-  let bKeep;
+  let bKeep = true;
   const value = item[filterObj.ref].toLowerCase();
   const filterValue = filterObj.containsFilterValue.toLowerCase();
 
@@ -288,7 +404,7 @@ export const createPConnect = (contextName, referenceList, pageReference) => {
 
   // create PConnect object
   const config = { meta: {}, options };
-  const { getPConnect } = PCore.createPConnect(config);
+  const { getPConnect } = PCore.createPConnect(config as any);
 
   return getPConnect();
 };

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

@@ -3,8 +3,8 @@
     <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">
+    <table *ngIf="readOnlyMode || allowEditingInModal" mat-table [dataSource]="elementsData" class="mat-elevation-z8" id="readonly-table" matSort>
+      <ng-container *ngFor="let dCol of processedFields; let i = index" [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">
@@ -27,7 +27,16 @@
             </mat-menu>
           </div>
         </th>
-        <td mat-cell *matCellDef="let element">{{ element[dCol.config.name] || '---' }}</td>
+        <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 matColumnDef="DeleteIcon">
         <div *ngIf="allowEditingInModal">
@@ -35,7 +44,7 @@
           <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$ }}" />
+                <mat-icon>more_vert</mat-icon>
               </button>
               <mat-menu #utilityMenu="matMenu" overlapTrigger="false">
                 <button mat-menu-item (click)="editRecord(element, j)">Edit</button>
@@ -47,6 +56,11 @@
       </ng-container>
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+      <tr class="mat-row psdk-no-records" *matNoDataRow>
+        <td id="no-records" class="mat-cell" [attr.colspan]="displayedColumns.length">
+          {{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}
+        </td>
+      </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">
@@ -68,17 +82,22 @@
         <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$ }}" />
+            <mat-icon>delete</mat-icon>
           </button>
         </td>
       </ng-container>
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+      <tr class="mat-row psdk-no-records" *matNoDataRow>
+        <td id="no-records" class="mat-cell" [attr.colspan]="displayedColumns.length">
+          {{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}
+        </td>
+      </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>
+  <button *ngIf="showAddRowButton" mat-button color="primary" style="font-size: 16px" (click)="addRecord()">
+    + {{ localizedVal('Add', localeCategory) }}
+  </button>
 </ng-container>
 
 <!-- pop overs for filters-->

package/lib/template/simple-table-manual/simple-table-manual.component.scss

@@ -5,6 +5,10 @@
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   overflow-y: auto;
+  box-shadow:
+    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
 }
 
 table {
@@ -22,8 +26,14 @@ table {
 ::ng-deep th.mat-mdc-header-cell,
 td.mat-mdc-cell,
 td.mat-mdc-footer-cell {
-  border-right: 1px solid var(--app-neutral-light-color);
+  border-right: 1px solid var(--mat-sys-outline-variant);
   padding: 8px !important;
+  min-width: 10rem;
+}
+
+::ng-deep th.mat-mdc-header-cell:last-child,
+td.mat-mdc-cell:last-child {
+  min-width: 2rem;
 }
 
 ::ng-deep .mat-mdc-button {
@@ -66,13 +76,6 @@ td.mat-mdc-footer-cell {
   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;
 }
@@ -111,7 +114,7 @@ td.mat-mdc-footer-cell {
   display: table;
   margin: auto;
   min-width: 100px;
-  background-color: var(--app-form-color);
+  background-color: var(--mat-sys-surface-container);
   border: 1px solid var(--app-inverse-form-color);
   border-radius: 10px;
   padding: 20px;
@@ -127,7 +130,6 @@ td.mat-mdc-footer-cell {
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: var(--app-dialog-background-color);
   position: fixed;
   z-index: 999;
   top: 0px;
@@ -138,7 +140,6 @@ td.mat-mdc-footer-cell {
   display: table;
   margin: auto;
   min-width: 150px;
-  background-color: var(--app-form-color);
   border: 1px solid var(--app-inverse-form-color);
   border-radius: 10px;
   padding: 20px;
@@ -150,7 +151,6 @@ tr.mat-mdc-row {
 }
 
 tr.mat-mdc-header-row {
-  background: var(--app-table-header-background-color);
 }
 
 .psdk-data-readonly {
@@ -160,16 +160,14 @@ tr.mat-mdc-header-row {
 
 .psdk-no-records {
   height: 56px;
-  justify-content: center;
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--app-neutral-light-color);
+  text-align: center;
+  border: 1px solid var(--mat-sys-outline-variant);
   border-top: none;
-  background: var(--app-form-color);
 }
 
 .psdk-utility-card-action-svg-icon {
   width: 1.4rem;
+  filter: var(--app-primary-color-filter);
 }
 
 .label {