@processmaker/screen-builder 2.64.0 → 2.64.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.64.0",
+  "version": "2.64.1",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -39,7 +39,7 @@
     "@cypress/code-coverage": "^3.8.1",
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.43.0",
+    "@processmaker/vue-form-elements": "0.43.2",
     "@processmaker/vue-multiselect": "^2.2.0",
     "@vue/cli-plugin-babel": "^3.6.0",
     "@vue/cli-plugin-e2e-cypress": "^4.0.3",
@@ -88,7 +88,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.43.0",
+    "@processmaker/vue-form-elements": "0.43.2",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

package/src/components/screen-renderer.vue

@@ -62,6 +62,14 @@ export default {
   name: "ScreenRenderer",
   components: { WatchersSynchronous, ScreenRendererError },
   mixins: [Json2Vue, CurrentPageProperty],
+  props: {
+    // property used to pass the context of the screen used as prefix for the file upload component
+    // e.g. `multi_instance_var.1` or `loop_var.1`
+    loopContext: {
+      type: String,
+      default: ""
+    }
+  },
   data() {
     return {
       currentDefinition: null,

package/src/components/task.vue

@@ -16,6 +16,7 @@
             :custom-css="screen.custom_css"
             :watchers="screen.watchers"
             :key="refreshScreen"
+            :loop-context="loopContext"
             @update="onUpdate"
             @submit="submit"
           />
@@ -74,6 +75,7 @@ export default {
     csrfToken: { type: String, default: null },
     value: { type: Object, default: () => {} },
     beforeLoadTask: { type: Function, default: defaultBeforeLoadTask },
+    initialLoopContext: { type: String, default: "" }
   },
   data() {
     return {
@@ -230,7 +232,7 @@ export default {
       }
     },
     loadTask() {
-      const url = `/${this.taskId}?include=data,user,requestor,processRequest,component,screen,requestData,bpmnTagName,interstitial,definition,nested,userRequestPermission`;
+      const url = `/${this.taskId}?include=data,user,requestor,processRequest,component,screen,requestData,loopContext,bpmnTagName,interstitial,definition,nested,userRequestPermission`;
       // For Vocabularies
       if (window.ProcessMaker && window.ProcessMaker.packages && window.ProcessMaker.packages.includes('package-vocabularies')) {
         window.ProcessMaker.VocabulariesSchemaUrl = `vocabularies/task_schema/${this.taskId}`;
@@ -256,6 +258,7 @@ export default {
     prepareTask() {
       this.resetScreenState();
       this.requestData = _.get(this.task, 'request_data', {});
+      this.loopContext = _.get(this.task, "loop_context", "");
       this.refreshScreen++;
 
       this.$emit('task-updated', this.task);
@@ -497,6 +500,7 @@ export default {
     this.processId = this.initialProcessId;
     this.nodeId = this.initialNodeId;
     this.requestData = this.value;
+    this.loopContext = this.initialLoopContext;
   },
   destroyed() {
     this.unsubscribeSocketListeners();

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

@@ -1,7 +1,19 @@
 <template>
   <div :class="containerClass">
     <custom-css-output>{{ customCssWrapped }}</custom-css-output>
-    <screen-renderer ref="renderer" :value="data" :_parent="_parent" :definition="definition" :current-page="currentPage" @submit="submit" data-cy="screen-renderer" :show-errors="showErrors" :test-screen-definition="testScreenDefinition || false" class="p-0"/>
+    <screen-renderer
+      ref="renderer"
+      :value="data"
+      :_parent="_parent"
+      :definition="definition"
+      :current-page="currentPage"
+      data-cy="screen-renderer"
+      :show-errors="showErrors"
+      :test-screen-definition="testScreenDefinition || false"
+      class="p-0"
+      :loop-context="loopContext"
+      @submit="submit"
+    />
   </div>
 </template>
 

package/src/mixins/extensions/DefaultValues.js

@@ -28,9 +28,14 @@ export default {
       const safeDotName = this.safeDotName(name);
       const defaultComputedName = `default_${safeDotName}__`;
       this.addData(screen, `${name}_was_filled__`, `!!this.getValue(${JSON.stringify(name)}, this.vdata) || !!this.getValue(${JSON.stringify(name)}, data)`);
-      this.addMounted(screen, `if (!this.${name}) {
-        this.tryFormField(${JSON.stringify(name)}, () => {this.${this.dot2bracket(name)} = ${value};});
-      }`);
+      this.addMounted(
+        screen, 
+        `if (!this.${safeDotName}) {
+            this.tryFormField(${JSON.stringify(name)}, () => {
+            this.${safeDotName} = ${value};
+            this.setValue(${JSON.stringify(name)}, ${value}, this.vdata, this);});
+        }`
+      );
       screen.computed[defaultComputedName] = {
         get: new Function(`return this.tryFormField(${JSON.stringify(name)}, () => ${value});`),
         set() {},

package/src/mixins/extensions/LoopContainer.js

@@ -1,51 +1,60 @@
 export default {
   props: {
     configRef: null,
-    loopContext: null,
+    loopContext: null
   },
   data() {
     return {
-      loops: [],
+      loops: []
     };
   },
   methods: {
     loadFormLoopProperties({ properties, element }) {
       this.registerVariable(element.config.settings.varname, element);
-      this.loops.push({ variable: element.config.settings.varname, element, properties });
+      this.loops.push({
+        variable: element.config.settings.varname,
+        element,
+        properties
+      });
     },
     loadFormLoopItems({ element, node, definition }) {
-      const loop = this.createComponent('div', {
-        'v-for': `(loopRow, index) in ${element.config.settings.varname}`,
+      const safeDotName = this.safeDotName(element.config.settings.varname);
+      const loop = this.createComponent("div", {
+        "v-for": `(loopRow, index) in ${safeDotName}`
       });
       const nested = {
         config: [
           {
-            items: element.items,
-          },
+            items: element.items
+          }
         ],
-        watchers: definition.watchers,
+        watchers: definition.watchers
       };
 
-      let loopContext = '';
+      let loopContext = "";
       if (this.loopContext) {
-        loopContext = this.loopContext + '.';
+        loopContext = `${this.loopContext}.`;
       }
       loopContext += element.config.settings.varname;
 
       // Add nested component inside loop
-      const child = this.createComponent('ScreenRenderer', {
-        ':definition': this.byRef(nested),
-        ':value': 'loopRow',
-        ':loop-context': `'${loopContext}.' + index`,
-        ':_parent': 'getValidationData()',
-        ':components': this.byRef(this.components),
-        ':config-ref': this.byRef(this.configRef || definition.config),
-        '@submit': 'submitForm',
+      const child = this.createComponent("ScreenRenderer", {
+        ":definition": this.byRef(nested),
+        ":value": "loopRow",
+        ":loop-context": `'${loopContext}.' + index`,
+        ":_parent": "getValidationData()",
+        ":components": this.byRef(this.components),
+        ":config-ref": this.byRef(this.configRef || definition.config),
+        "@submit": "submitForm"
       });
-      const addLoopRow = this.createComponent('AddLoopRow', {
-        ':value': element.config.settings.varname,
-        ':config': this.byRef(element.config),
-        ':error': `${this.checkVariableExists('$v.vdata.' + element.config.name)} && validationMessage($v.vdata.${element.config.name}) || ${this.checkVariableExists('$v.schema.' + element.config.name)} && validationMessage($v.schema.${element.config.name})`,
+      const addLoopRow = this.createComponent("AddLoopRow", {
+        ":value": safeDotName,
+        ":config": this.byRef(element.config),
+        ":error": `${this.checkVariableExists(
+          `$v.vdata.${element.config.name}`
+        )} && validationMessage($v.vdata.${element.config.name})
+        || ${this.checkVariableExists(`$v.schema.${element.config.name}`)}
+        && validationMessage($v.schema.${element.config.name})`
       });
       loop.appendChild(child);
       node.appendChild(loop);
@@ -53,24 +62,24 @@ export default {
       // Register nested component as Array
       this.registerNestedVariable(
         element.config.settings.varname,
-        element.config.settings.varname + '.index.',
+        `${element.config.settings.varname}.index.`,
         nested
       );
-    },
+    }
   },
   mounted() {
-    this.alias['FormLoop'] = 'div';
+    this.alias.FormLoop = "div";
     this.extensions.push({
       beforeload() {
         this.loops.splice(0);
       },
       onloadproperties(params) {
-        if (params.element.container && params.componentName === 'FormLoop') {
+        if (params.element.container && params.componentName === "FormLoop") {
           this.loadFormLoopProperties(params);
         }
       },
       onloaditems(params) {
-        if (params.element.container && params.componentName === 'FormLoop') {
+        if (params.element.container && params.componentName === "FormLoop") {
           this.loadFormLoopItems(params);
         }
       }