@processmaker/screen-builder 3.8.10 → 3.8.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "3.8.10",
+  "version": "3.8.12",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",

package/src/components/task.vue

@@ -531,6 +531,7 @@ export default {
       const url = `?user_id=${this.userId}&status=ACTIVE&process_request_id=${requestId}&include_sub_tasks=1${timestamp}`;
       return this.$dataProvider
         .getTasks(url).then((response) => {
+          this.$emit("load-data-task", response);
           if (response.data.data.length > 0) {
             let task = response.data.data[0];
             if (task.process_request_id !== this.requestId) {

package/src/form-builder-controls.js

@@ -489,7 +489,7 @@ export default [
           varname: 'dynamic_panel',
           indexName: '',
           add: false,
-          emptyStateMessage:  'No data available for this dynamic panel',
+          emptyStateMessage:  'No data available. Please configure an Index Name for this dynamic panel.',
         },
       },
       inspector: [

package/src/mixins/extensions/FormDynamicPanel.js

@@ -8,25 +8,13 @@ export default {
     };
   },
   methods: {
-    loadFormDynamicPanelProperties({ properties, element }) {
-      const variableName = element.config.settings.varname;
-      const index = element.config.settings.indexName;
-
-      // Add itemData to the properties of FormDynamicPanel
-      properties[':itemData'] = `${variableName} && ${variableName}[${index}]`;
-      
-      // Add emptyStateMessage property if configured
-      if (element.config.settings.emptyStateMessage) {
-        properties[':emptyStateMessage'] = this.byRef(element.config.settings.emptyStateMessage);
-      }
-      
-      // Add validationData for Mustache processing
-      properties[':validationData'] = 'getValidationData()';
-      
-      this.registerVariable(element.config.settings.varname, element);
-    },
-    loadFormDynamicPanelItems({ element, node, definition }) {
-      const nested = {
+    /**
+     * Builds the nested configuration for dynamic panel items
+     * @param {Object} element - The dynamic panel element
+     * @returns {Object} The nested configuration
+     */
+    buildNestedConfig(element) {
+      return {
         config: [
           {
             items: element.items,
@@ -35,21 +23,155 @@ export default {
         watchers: [], 
         isMobile: false
       };
+    },
 
+    /**
+     * Creates expressions for value and loop context based on index availability
+     * @param {string} variableName - The variable name
+     * @param {string} index - The index name
+     * @returns {Object} Object containing valueExpression and loopContextExpression
+     */
+    buildExpressions(variableName, index) {
+      if (index && index.trim()) {
+        return {
+          valueExpression: `${variableName} && ${variableName}[${index}]`,
+          loopContextExpression: `'${variableName} && ${variableName}[${index}]'`
+        };
+      }
+      
+      return {
+        valueExpression: variableName,
+        loopContextExpression: `'${variableName}'`
+      };
+    },
 
-      const variableName = element.config.settings.varname;
-      const index = element.config.settings.indexName;
-
-      // Add nested component inside dynamic panel
-      const child = this.createComponent("ScreenRenderer", {
+    /**
+     * Creates a ScreenRenderer component for the dynamic panel
+     * @param {Object} nested - The nested configuration
+     * @param {string} valueExpression - The value expression
+     * @param {string} loopContextExpression - The loop context expression
+     * @param {Object} definition - The definition object
+     * @returns {Object} The created component
+     */
+    createScreenRenderer(nested, valueExpression, loopContextExpression, definition) {
+      return this.createComponent("ScreenRenderer", {
         ":definition": this.byRef(nested),
-        ":value": `${variableName} && ${variableName}[${index}]`,
-        ":loop-context": `'${variableName} && ${variableName}[${index}]'`,
+        ":value": valueExpression,
+        ":loop-context": loopContextExpression,
         ":_parent": "getValidationData()",
         ":components": this.byRef(this.components),
         ":config-ref": this.byRef(this.configRef || definition.config),
         "@submit": "submitForm"
       });
+    },
+
+    /**
+     * Builds the itemData property based on variable name and index
+     * @param {string} variableName - The variable name
+     * @param {string} index - The index name
+     * @returns {string} The itemData expression
+     */
+    buildItemDataExpression(variableName, index) {
+      if (index && index.trim()) {
+        return `${variableName} && ${variableName}[${index}]`;
+      }
+      return variableName;
+    },
+
+    /**
+     * Gets a helpful empty state message based on whether index is configured
+     * @param {string} index - The index name
+     * @param {string} customMessage - Custom message from settings
+     * @returns {string} The appropriate empty state message
+     */
+    getEmptyStateMessage(index, customMessage) {
+      if (customMessage) {
+        return customMessage;
+      }
+      
+      if (!index || !index.trim()) {
+        console.warn('FormDynamicPanel: No Index Name configured. The dynamic panel will not function properly without an index.');
+        return 'No data available. Please configure an Index Name for this dynamic panel.';
+      }
+      
+      return 'No data available for this dynamic panel.';
+    },
+
+    /**
+     * Validates that required settings are present
+     * @param {Object} element - The dynamic panel element
+     * @returns {boolean} True if valid, false otherwise
+     */
+    validateElementSettings(element) {
+      if (!element.config || !element.config.settings) {
+        console.warn('FormDynamicPanel: Missing config or settings');
+        return false;
+      }
+      
+      if (!element.config.settings.varname) {
+        console.warn('FormDynamicPanel: Missing varname setting');
+        return false;
+      }
+      
+      return true;
+    },
+
+    /**
+     * Safely extracts settings from element with validation
+     * @param {Object} element - The dynamic panel element
+     * @returns {Object|null} Settings object or null if invalid
+     */
+    extractValidatedSettings(element) {
+      if (!this.validateElementSettings(element)) {
+        return null;
+      }
+      
+      return {
+        variableName: element.config.settings.varname,
+        index: element.config.settings.indexName || '',
+        emptyStateMessage: element.config.settings.emptyStateMessage
+      };
+    },
+
+    /**
+     * Loads the properties for the FormDynamicPanel
+     * @param {Object} params - The parameters object
+     */
+    loadFormDynamicPanelProperties({ properties, element }) {
+      const settings = this.extractValidatedSettings(element);
+      if (!settings) {
+        return;
+      }
+
+      // Add itemData to the properties of FormDynamicPanel
+      properties[':itemData'] = this.buildItemDataExpression(settings.variableName, settings.index);
+      
+      // Add emptyStateMessage property with helpful default
+      const emptyStateMessage = this.getEmptyStateMessage(settings.index, settings.emptyStateMessage);
+      properties[':emptyStateMessage'] = this.byRef(emptyStateMessage);
+      
+      // Add validationData for Mustache processing
+      properties[':validationData'] = 'getValidationData()';
+      
+      this.registerVariable(settings.variableName, element);
+    },
+    /**
+     * Loads the items for the FormDynamicPanel
+     * @param {Object} params - The parameters object
+     */
+    loadFormDynamicPanelItems({ element, node, definition }) {
+      const settings = this.extractValidatedSettings(element);
+      if (!settings) {
+        return;
+      }
+
+      const nested = this.buildNestedConfig(element);
+
+      // Build expressions based on index availability
+      const { valueExpression, loopContextExpression } = this.buildExpressions(settings.variableName, settings.index);
+
+      // Create and add the ScreenRenderer component
+      const child = this.createScreenRenderer(nested, valueExpression, loopContextExpression, definition);
       node.appendChild(child);
     }
   },