@processmaker/screen-builder 3.7.0 → 3.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "3.7.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) {
       

package/src/components/vue-form-builder.vue

@@ -1382,14 +1382,7 @@ export default {
       return index > this.pageDelete ? index - 1 : index;
     },
     // This function is used to calculate the new index of the references FormRecordList
-    calcNewIndexForFormRecordList(index, referencedBy, config) {
-      if (config[this.pageDelete].items.length > 0) {
-        throw new Error(
-          `${this.$t(
-            "Can not delete this page, it is referenced by"
-          )}: ${referencedBy}`
-        );
-      }
+    calcNewIndexForFormRecordList(index, referencedBy) {
       return index > this.pageDelete ? index - 1 : index;
     },
     // Update Record list references
@@ -1398,11 +1391,12 @@ export default {
         page.items.forEach((item) => {
           if (item.component === "FormRecordList") {
             // eslint-disable-next-line no-param-reassign
-            item.config.form = this.calcNewIndexForFormRecordList(
-              item.config.form * 1,
-              item.config.label,
-              this.config,
-            );
+            if (this.isValidInteger(item.config.form)) {
+              item.config.form = this.calcNewIndexForFormRecordList(
+                item.config.form * 1,
+                item.config.label,
+              );
+            }
           }
         });
       });
@@ -1426,6 +1420,9 @@ export default {
     },
     async deletePage() {
       const back = _.cloneDeep(this.config);
+      if(!this.isNotReferenceToRecordForm()) {
+        return;
+      }
       try {
         this.updateRecordListReferences();
         this.updateNavigationButtonsReferences();
@@ -1446,6 +1443,32 @@ export default {
       });
       this.$store.dispatch("clipboardModule/pushState", this.clipboardPage.items);
     },
+    isNotReferenceToRecordForm() {
+      for (let page of this.config) {
+        for (let item of page.items) {
+          if (item.component === "FormRecordList") {
+            if (this.isValidInteger(item.config.form) && Number(item.config.form) === this.pageDelete) {
+              const referencedBy = item.config.label;
+              const message = `${this.$t("Can not delete this page, it is referenced by")}: ${referencedBy}`;
+              globalObject.ProcessMaker.alert(message, "danger");
+              return false;
+            }
+          }
+        }
+      }
+      return true;
+    },
+    isValidInteger(value) {
+      if (typeof value === 'boolean' || value === null || value === undefined) {
+        return false;
+      }
+      const str = String(value).trim();
+      if (str === '') {
+        return false;
+      }
+      const num = Number(str);
+      return Number.isInteger(num);
+    },
     inspect(element = {}) {
       this.closeTemplatesPanel();
       this.inspection = element;