ISSUE-139957: fixing when rules in views inside embedded data

Author: marekpelc-pega

scripts/dxcomponents/components/containers/view.component.js

@@ -123,8 +123,19 @@ export class ViewComponent extends ContainerBaseComponent {
     #evaluateVisibility(pConn, referenceContext) {
         const visibilityExpression = pConn.meta.config.visibility;
         if (!visibilityExpression || visibilityExpression.length === 0) return true;
+        const contextName = pConn.getContextName();
+        if (visibilityExpression.startsWith("@E ")) {
+            return this.#evaluateExpressionVisibility(contextName, referenceContext, visibilityExpression);
+        } else if(visibilityExpression.startsWith("@W ")) {
+            return this.#evaluateWhenVisibility(contextName, visibilityExpression);
+        } else {
+            console.warn(TAG, `Unsupported visibility expression: ${visibilityExpression}. Defaulting to visible.`);
+            return true;
+        }
+    }
 
-        let dataPage = this.#getDataPage(pConn.getContextName(), referenceContext);
+    #evaluateExpressionVisibility(contextName, referenceContext, visibilityExpression) {
+        let dataPage = this.#getDataPage(contextName, referenceContext);
         if (!dataPage) return false;
 
         const visibilityConditions = visibilityExpression.replace("@E ", "");
@@ -137,6 +148,38 @@ export class ViewComponent extends ContainerBaseComponent {
         });
     }
 
+    #evaluateWhenVisibility(contextName, visibilityExpression) {
+        let bVisibility = true;
+        // e.g. "@E .EmbeddedData_SelectedTestName == 'Readonly' && .EmbeddedData_SelectedSubCategory == 'Mode'"
+        const aVisibility = visibilityExpression.split('&&');
+        // e.g. ["EmbeddedData_SelectedTestName": "Readonly", "EmbeddedData_SelectedSubCategory": "Mode"]
+        // Reading values from the Store to evaluate the visibility expressions
+        const storeData = PCore.getStore().getState()?.data[contextName].caseInfo.content;
+
+        const initialVal = {};
+        const oProperties = aVisibility.reduce((properties, property) => {
+            const keyStartIndex = property.indexOf('.');
+            const keyEndIndex = property.indexOf('=') - 1;
+            const valueStartIndex = property.indexOf("'");
+            const valueEndIndex = property.lastIndexOf("'") - 1;
+            return {
+                ...properties,
+                [property.substr(keyStartIndex + 1, keyEndIndex - keyStartIndex - 1)]: property.substr(valueStartIndex + 1, valueEndIndex - valueStartIndex)
+            };
+        }, initialVal);
+
+        const propertyKeys = Object.keys(oProperties);
+        const propertyValues = Object.values(oProperties);
+
+        for (let propertyIndex = 0; propertyIndex < propertyKeys.length; propertyIndex++) {
+            if (storeData[propertyKeys[propertyIndex]] !== propertyValues[propertyIndex]) {
+                bVisibility = false;
+            }
+        }
+
+        return bVisibility;
+    }
+
     #getDataPage(context, referenceContext) {
         let pageReferenceKeys = referenceContext.replace("caseInfo.content.", "").split(".");
         let page = PCore.getStore().getState()?.data[context].caseInfo.content;