@processmaker/screen-builder 3.8.0 → 3.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "3.8.0",
+  "version": "3.8.1",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",
@@ -57,7 +57,7 @@
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.65.0",
+    "@processmaker/vue-form-elements": "^0.61.1",
     "@processmaker/vue-multiselect": "2.3.0",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
@@ -116,7 +116,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.65.0",
+    "@processmaker/vue-form-elements": "^0.61.1",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

package/src/components/SimpleErrorMessage.vue

@@ -3,6 +3,9 @@
         <p>
             <img src="../assets/icons/ErrorMessage.svg" class="simple-error-message-icon"/>
         </p>
+        <p>
+            <b-button variant="primary" @click="redirectToError">{{ $t(label) }}</b-button>
+        </p>
         <p>
             <span class="simple-error-message-title"> {{ $t(title) }} </span>
         </p>
@@ -14,12 +17,22 @@
 
 <script>
 export default {
+    props: ['instanceId'],
     data() {
         return {
             title: "We're Sorry",
             message:
-                "An error has occurred. Please try again. If the problem persists, please contact your administrator."
+                "An error has occurred. Please try again. If the problem persists, please contact your administrator.",
+            label: "View error details"
         };
+    },
+    methods: {
+        redirectToError() {
+            if (!this.instanceId) {
+                return;
+            }
+            window.location.href = `/requests/${this.instanceId}`;
+        }
     }
 };
 </script>

package/src/components/renderer/form-record-list.vue

@@ -254,6 +254,8 @@ import _ from "lodash";
 import { dateUtils } from "@processmaker/vue-form-elements";
 import VueFormRenderer from "@/components/vue-form-renderer.vue";
 import mustacheEvaluation from "../../mixins/mustacheEvaluation";
+import MustacheHelper from "../inspector/mustache-helper.vue";
+import Mustache from "mustache";
 
 const jsonOptionsActionsColumn = {
   key: "__actions",
@@ -264,7 +266,8 @@ const jsonOptionsActionsColumn = {
 
 export default {
   components: {
-    VueFormRenderer
+    VueFormRenderer,
+    MustacheHelper
   },
   mixins: [mustacheEvaluation],
   props: [
@@ -466,6 +469,18 @@ export default {
         this.currentPage = this.currentPage == 0 ? 1 : this.currentPage;
       }
     },
+    // Watch for changes in the option input field
+    "validationData.option": {
+      handler(newValue) {
+        if (this.source?.sourceOptions === "Collection" && this.source?.collectionFields?.pmql) {
+          this.onCollectionChange(
+            this.source?.collectionFields?.collectionId, 
+            this.source?.collectionFields?.pmql
+          );
+        }
+      },
+      immediate: false
+    }
   },
   mounted() {
     if (this._perPage) {
@@ -566,18 +581,123 @@ export default {
 
         return keys1.every(key => obj1[key] === obj2[key]);
     },
-    onCollectionChange(collectionId,pmql) {
-      let param = {params:{pmql:pmql}};
-      let rowsCollection = [];
+    onCollectionChange(collectionId, pmql) {
+      // If there is no PMQL, get all records
+      if (!pmql || pmql.trim() === "") {
+        this.fetchAllRecords(collectionId);
+        return;
+      }
+      
+      // Process Mustache variables in PMQL
+      const processedPmql = this.processMustacheInPmql(pmql);
+      
+      // If processing failed or resulted in invalid PMQL, return
+      if (!processedPmql) {
+        return;
+      }
+      
+      // Fetch records with processed PMQL
+      this.fetchRecordsWithPmql(collectionId, processedPmql);
+    },
+
+    /**
+     * Process Mustache variables in PMQL string
+     * @param {string} pmql - The PMQL string to process
+     * @returns {string|null} - Processed PMQL or null if invalid
+     */
+    processMustacheInPmql(pmql) {
+      if (!pmql || !pmql.includes("{{")) {
+        return pmql;
+      }
+
+      try {
+        // Get data from validationData
+        const data = this.validationData || {};
+        
+        // Clean up the PMQL by removing unnecessary quotes around Mustache variables
+        let processedPmql = pmql.replace(/"{{([^}]+)}}"/g, "{{$1}}");
+        
+        // Process Mustache variables
+        processedPmql = Mustache.render(processedPmql, data);
+        
+        // Check if the processed PMQL has empty values
+        if (this.hasEmptyValues(processedPmql)) {
+          this.collectionData = [];
+          return null;
+        }
+        
+        // Add quotes around string values in PMQL if they don't have them
+        processedPmql = processedPmql.replace(/= ([^"'\s]+)/g, '= "$1"');
+        
+        return processedPmql;
+      } catch (error) {
+        this.collectionData = [];
+        return null;
+      }
+    },
+
+    /**
+     * Check if processed PMQL contains empty values
+     * @param {string} processedPmql - The processed PMQL string
+     * @returns {boolean} - True if contains empty values
+     */
+    hasEmptyValues(processedPmql) {
+      const emptyValues = ['= ""', '= " "', "= null", "= undefined"];
+      return emptyValues.some(value => processedPmql.includes(value));
+    },
+
+    /**
+     * Validate if processed PMQL is valid for API call
+     * @param {string} processedPmql - The processed PMQL string
+     * @returns {boolean} - True if valid
+     */
+    isValidPmql(processedPmql) {
+      return processedPmql && 
+             processedPmql.trim() !== "" && 
+             !processedPmql.includes("{{");
+    },
+
+    /**
+     * Fetch all records from collection without PMQL filter
+     * @param {number} collectionId - The collection ID
+     */
+    fetchAllRecords(collectionId) {
       this.$dataProvider
-        .getCollectionRecordsList(collectionId, param)
+        .getCollectionRecordsList(collectionId, {})
         .then((response) => {
-          rowsCollection = response.data;
+          const rowsCollection = response.data;
+          this.changeCollectionColumns(rowsCollection, this.fields);
+        })
+        .catch(() => {
+          this.collectionData = [];
+        });
+    },
 
-          this.changeCollectionColumns(rowsCollection,this.fields);
+    /**
+     * Fetch records from collection with PMQL filter
+     * @param {number} collectionId - The collection ID
+     * @param {string} processedPmql - The processed PMQL string
+     */
+    fetchRecordsWithPmql(collectionId, processedPmql) {
+      // Final validation before making API call
+      if (!this.isValidPmql(processedPmql)) {
+        this.collectionData = [];
+        return;
+      }
+      
+      const param = { params: { pmql: processedPmql } };
+      
+      this.$dataProvider
+        .getCollectionRecordsList(collectionId, param)
+        .then((response) => {
+          const rowsCollection = response.data;
+          this.changeCollectionColumns(rowsCollection, this.fields);
+        })
+        .catch(() => {
+          this.collectionData = [];
         });
 
-      this.$emit('change', this.field);
+      this.$emit("change", this.field);
     },
     changeCollectionColumns(collectionFieldsColumns,columnsSelected) {