From 7de36df5e85fc0843328672ee59f02d3f1cfb3c0 Mon Sep 17 00:00:00 2001 From: CarliPinell Date: Wed, 9 Jul 2025 08:48:05 -0400 Subject: [PATCH 1/3] saving pmql issue in front end side --- src/components/renderer/form-record-list.vue | 73 ++++++++++++++++++-- 1 file changed, 67 insertions(+), 6 deletions(-) diff --git a/src/components/renderer/form-record-list.vue b/src/components/renderer/form-record-list.vue index 83ac01e43..2939d2b43 100644 --- a/src/components/renderer/form-record-list.vue +++ b/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,64 @@ export default { return keys1.every(key => obj1[key] === obj2[key]); }, - onCollectionChange(collectionId,pmql) { - let param = {params:{pmql:pmql}}; + onCollectionChange(collectionId, pmql) { + // Si no hay PMQL, no hacer nada + if (!pmql || pmql.trim() === "") { + return; + } + + // Process Mustache variables in PMQL + let processedPmql = pmql; + if (pmql && pmql.includes("{{")) { + try { + // Get data from validationData + const data = this.validationData || {}; + + // Clean up the PMQL by removing unnecessary quotes around Mustache variables + processedPmql = pmql.replace(/"{{([^}]+)}}"/g, "{{$1}}"); + + // Process Mustache variables + processedPmql = Mustache.render(processedPmql, data); + + // Check if the processed PMQL has empty values and handle them + if ( + processedPmql.includes('= ""') || + processedPmql.includes('= " "') || + processedPmql.includes('= null') || + processedPmql.includes('= undefined') + ) { + this.collectionData = []; + return; + } + + // Add quotes around string values in PMQL if they don't have them + processedPmql = processedPmql.replace(/= ([^"'\s]+)/g, '= "$1"'); + } catch (error) { + this.collectionData = []; + return; + } + } + + // Final validation before making API call + if (!processedPmql || processedPmql.trim() === "" || processedPmql.includes("{{")) { + this.collectionData = []; + return; + } + + const param = { params: { pmql: processedPmql } }; let rowsCollection = []; + this.$dataProvider .getCollectionRecordsList(collectionId, param) .then((response) => { rowsCollection = response.data; - - this.changeCollectionColumns(rowsCollection,this.fields); + this.changeCollectionColumns(rowsCollection, this.fields); + }) + .catch((error) => { + this.collectionData = []; }); - this.$emit('change', this.field); + this.$emit("change", this.field); }, changeCollectionColumns(collectionFieldsColumns,columnsSelected) { From 6908fc297d259863145730500a281c08b30cd01e Mon Sep 17 00:00:00 2001 From: CarliPinell Date: Wed, 9 Jul 2025 11:25:39 -0400 Subject: [PATCH 2/3] fixing get all values with pmql field empty --- src/components/renderer/form-record-list.vue | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/renderer/form-record-list.vue b/src/components/renderer/form-record-list.vue index 2939d2b43..a8117de83 100644 --- a/src/components/renderer/form-record-list.vue +++ b/src/components/renderer/form-record-list.vue @@ -582,8 +582,18 @@ export default { return keys1.every(key => obj1[key] === obj2[key]); }, onCollectionChange(collectionId, pmql) { - // Si no hay PMQL, no hacer nada + // If there is no PMQL, return if (!pmql || pmql.trim() === "") { + // When PMQL is empty, call API without PMQL parameter to get all records + this.$dataProvider + .getCollectionRecordsList(collectionId, {}) + .then((response) => { + const rowsCollection = response.data; + this.changeCollectionColumns(rowsCollection, this.fields); + }) + .catch((error) => { + this.collectionData = []; + }); return; } From 09eb2869d7c5e3303b8c35f28266332a90fedf6e Mon Sep 17 00:00:00 2001 From: CarliPinell Date: Wed, 9 Jul 2025 11:36:48 -0400 Subject: [PATCH 3/3] mustache syntax pmql solved --- src/components/renderer/form-record-list.vue | 135 +++++++++++++------ 1 file changed, 92 insertions(+), 43 deletions(-) diff --git a/src/components/renderer/form-record-list.vue b/src/components/renderer/form-record-list.vue index a8117de83..ac596f547 100644 --- a/src/components/renderer/form-record-list.vue +++ b/src/components/renderer/form-record-list.vue @@ -582,69 +582,118 @@ export default { return keys1.every(key => obj1[key] === obj2[key]); }, onCollectionChange(collectionId, pmql) { - // If there is no PMQL, return + // If there is no PMQL, get all records if (!pmql || pmql.trim() === "") { - // When PMQL is empty, call API without PMQL parameter to get all records - this.$dataProvider - .getCollectionRecordsList(collectionId, {}) - .then((response) => { - const rowsCollection = response.data; - this.changeCollectionColumns(rowsCollection, this.fields); - }) - .catch((error) => { - this.collectionData = []; - }); + this.fetchAllRecords(collectionId); return; } // Process Mustache variables in PMQL - let processedPmql = pmql; - if (pmql && pmql.includes("{{")) { - try { - // Get data from validationData - const data = this.validationData || {}; - - // Clean up the PMQL by removing unnecessary quotes around Mustache variables - processedPmql = pmql.replace(/"{{([^}]+)}}"/g, "{{$1}}"); - - // Process Mustache variables - processedPmql = Mustache.render(processedPmql, data); - - // Check if the processed PMQL has empty values and handle them - if ( - processedPmql.includes('= ""') || - processedPmql.includes('= " "') || - processedPmql.includes('= null') || - processedPmql.includes('= undefined') - ) { - this.collectionData = []; - return; - } - - // Add quotes around string values in PMQL if they don't have them - processedPmql = processedPmql.replace(/= ([^"'\s]+)/g, '= "$1"'); - } catch (error) { + 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; + 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, {}) + .then((response) => { + const rowsCollection = response.data; + this.changeCollectionColumns(rowsCollection, this.fields); + }) + .catch(() => { + this.collectionData = []; + }); + }, + + /** + * 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 (!processedPmql || processedPmql.trim() === "" || processedPmql.includes("{{")) { + if (!this.isValidPmql(processedPmql)) { this.collectionData = []; return; } const param = { params: { pmql: processedPmql } }; - let rowsCollection = []; this.$dataProvider .getCollectionRecordsList(collectionId, param) .then((response) => { - rowsCollection = response.data; + const rowsCollection = response.data; this.changeCollectionColumns(rowsCollection, this.fields); }) - .catch((error) => { + .catch(() => { this.collectionData = []; });