diff --git a/src/mixins/ScreenBase.js b/src/mixins/ScreenBase.js
index dca6a885d..53d200e26 100644
--- a/src/mixins/ScreenBase.js
+++ b/src/mixins/ScreenBase.js
@@ -155,21 +155,17 @@ export default {
},
setValue(name, value, object = this, defaults = object) {
if (object && value !== undefined) {
- const splittedName = name.split('.');
- splittedName.forEach((attr, index) => {
+ const parsedName = name.split('.');
- let isLastElement, setValue;
- const originalValue = get(object, attr);
+ for (const attr of parsedName) {
+ let setValue;
+ let index = parsedName.indexOf(attr);
+ let isLastElement = index === parsedName.length - 1;
- if (index === splittedName.length - 1) {
- isLastElement = true;
- } else {
- isLastElement = false;
- }
+ const originalValue = get(object, attr);
if (isLastElement) {
setValue = value;
-
} else {
setValue = originalValue;
@@ -177,7 +173,7 @@ export default {
// Check defaults
setValue = get(defaults, attr);
}
-
+
if (!setValue) {
// Still no value? Set empty object
setValue = {};
@@ -193,9 +189,10 @@ export default {
attr,
setValue
);
+
object = get(object, attr);
defaults = get(defaults, attr);
- });
+ }
}
},
validationMessage(validation) {
diff --git a/src/mixins/computedFields.js b/src/mixins/computedFields.js
index 4560996ce..0e6d3961d 100644
--- a/src/mixins/computedFields.js
+++ b/src/mixins/computedFields.js
@@ -1,23 +1,18 @@
-import _ from 'lodash';
import { Parser } from 'expr-eval';
export default {
methods: {
evaluateExpression(expression, type) {
- let value = null;
-
const self = this;
+ let value = null;
try {
- //monitor if variable belongs to data (defined variables) or vdata (external variables)
- //in this way the event is not executed again when the variable is update
- const data = new Proxy(Object.assign({}, this), {
+ // Monitor if variable belongs to data (defined variables) or
+ // vdata (external variables)in this way the event is not
+ // executed again when the variable is update
+ const data = new Proxy(Object.assign({}, self, self.vdata), {
get(data, name) {
- if (data[name] === undefined || !_.isEqual(data[name]), self.vdata[name]) {
- return self.vdata[name];
- } else {
- return data[name];
- }
+ return undefined === data[name] ? self.vdata[name] : data[name];
},
set() {
throw 'You are not allowed to set properties from inside an expression';
diff --git a/src/mixins/extensions/ComputedFields.js b/src/mixins/extensions/ComputedFields.js
index d1be25643..e4d4fb152 100644
--- a/src/mixins/extensions/ComputedFields.js
+++ b/src/mixins/extensions/ComputedFields.js
@@ -3,14 +3,28 @@ import computedFields from '../computedFields';
export default {
methods: {
computedFields(screen, definition) {
+ // Add computed fields
screen.mixins.push(computedFields);
- definition.computed.forEach(computed => {
+
+ for (const computed of definition.computed) {
screen.computed[computed.property] = {
- get: new Function(`return this.evaluateExpression(${JSON.stringify(computed.formula)}, ${JSON.stringify(computed.type)});`),
- set() {},
+ get: (() => {
+ const formula = JSON.stringify(computed.formula);
+ const type = JSON.stringify(computed.type);
+
+ return new Function(`return this.evaluateExpression(${formula}, ${type});`);
+ })(),
+ set() {
+ // Do nothing (as it's not allowed)
+ },
};
- this.addWatch(screen, computed.property, `this.setValue(${JSON.stringify(computed.property)}, value, this.vdata);`);
- });
+
+ this.addWatch(
+ screen,
+ computed.property,
+ `this.setValue(${JSON.stringify(computed.property)}, value, this.vdata);`
+ );
+ }
},
},
mounted() {
diff --git a/tests/e2e/fixtures/FOUR-4853.json b/tests/e2e/fixtures/FOUR-4853.json
new file mode 100644
index 000000000..e255c579e
--- /dev/null
+++ b/tests/e2e/fixtures/FOUR-4853.json
@@ -0,0 +1,486 @@
+{
+ "type": "screen_package",
+ "version": "2",
+ "screens": [
+ {
+ "id": 14,
+ "screen_category_id": "1",
+ "title": "FOUR-4853",
+ "description": "test",
+ "type": "FORM",
+ "config": [
+ {
+ "name": "FOUR-4853",
+ "items": [
+ {
+ "label": "Line Input",
+ "config": {
+ "icon": "far fa-square",
+ "name": "foo.two",
+ "type": "text",
+ "label": "foo.two",
+ "helper": null,
+ "readonly": false,
+ "dataFormat": "string",
+ "validation": [],
+ "placeholder": null
+ },
+ "component": "FormInput",
+ "inspector": [
+ {
+ "type": "FormInput",
+ "field": "name",
+ "config": {
+ "name": "Variable Name",
+ "label": "Variable Name",
+ "helper": "A variable name is a symbolic name to reference information.",
+ "validation": "regex:\/^(?:[A-Za-z])(?:[0-9A-Z_.a-z])*[^.]$\/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "label",
+ "config": {
+ "label": "Label",
+ "helper": "The label describes the field's name"
+ }
+ },
+ {
+ "type": "FormMultiselect",
+ "field": "dataFormat",
+ "config": {
+ "name": "Data Type",
+ "label": "Data Type",
+ "helper": "The data type specifies what kind of data is stored in the variable.",
+ "options": [
+ {
+ "value": "string",
+ "content": "Text"
+ },
+ {
+ "value": "int",
+ "content": "Integer"
+ },
+ {
+ "value": "currency",
+ "content": "Currency"
+ },
+ {
+ "value": "percentage",
+ "content": "Percentage"
+ },
+ {
+ "value": "float",
+ "content": "Decimal"
+ },
+ {
+ "value": "datetime",
+ "content": "Datetime"
+ },
+ {
+ "value": "date",
+ "content": "Date"
+ },
+ {
+ "value": "password",
+ "content": "Password"
+ }
+ ],
+ "validation": "required"
+ }
+ },
+ {
+ "type": {
+ "extends": {
+ "props": [
+ "label",
+ "error",
+ "options",
+ "helper",
+ "name",
+ "value",
+ "selectedControl"
+ ],
+ "mixins": [
+ {
+ "props": {
+ "validation": {
+ "type": null
+ },
+ "validationData": {
+ "type": null
+ },
+ "validationField": {
+ "type": null
+ },
+ "validationMessages": {
+ "type": null
+ }
+ },
+ "watch": {
+ "validationData": {
+ "deep": true
+ }
+ },
+ "methods": [],
+ "computed": []
+ }
+ ],
+ "methods": [],
+ "computed": [],
+ "_compiled": true,
+ "inheritAttrs": false,
+ "staticRenderFns": []
+ },
+ "computed": [],
+ "_compiled": true,
+ "staticRenderFns": []
+ },
+ "field": "dataMask",
+ "config": {
+ "name": "Data Format",
+ "label": "Data Format",
+ "helper": "The data format for the selected type."
+ }
+ },
+ {
+ "type": "ValidationSelect",
+ "field": "validation",
+ "config": {
+ "label": "Validation Rules",
+ "helper": "The validation rules needed for this field"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "placeholder",
+ "config": {
+ "label": "Placeholder Text",
+ "helper": "The placeholder is what is shown in the field when no value is provided yet"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "helper",
+ "config": {
+ "label": "Helper Text",
+ "helper": "Help text is meant to provide additional guidance on the field's value"
+ }
+ },
+ {
+ "type": "FormCheckbox",
+ "field": "readonly",
+ "config": {
+ "label": "Read Only",
+ "helper": null
+ }
+ },
+ {
+ "type": "ColorSelect",
+ "field": "color",
+ "config": {
+ "label": "Text Color",
+ "helper": "Set the element's text color",
+ "options": [
+ {
+ "value": "text-primary",
+ "content": "primary"
+ },
+ {
+ "value": "text-secondary",
+ "content": "secondary"
+ },
+ {
+ "value": "text-success",
+ "content": "success"
+ },
+ {
+ "value": "text-danger",
+ "content": "danger"
+ },
+ {
+ "value": "text-warning",
+ "content": "warning"
+ },
+ {
+ "value": "text-info",
+ "content": "info"
+ },
+ {
+ "value": "text-light",
+ "content": "light"
+ },
+ {
+ "value": "text-dark",
+ "content": "dark"
+ }
+ ]
+ }
+ },
+ {
+ "type": "ColorSelect",
+ "field": "bgcolor",
+ "config": {
+ "label": "Background Color",
+ "helper": "Set the element's background color",
+ "options": [
+ {
+ "value": "alert alert-primary",
+ "content": "primary"
+ },
+ {
+ "value": "alert alert-secondary",
+ "content": "secondary"
+ },
+ {
+ "value": "alert alert-success",
+ "content": "success"
+ },
+ {
+ "value": "alert alert-danger",
+ "content": "danger"
+ },
+ {
+ "value": "alert alert-warning",
+ "content": "warning"
+ },
+ {
+ "value": "alert alert-info",
+ "content": "info"
+ },
+ {
+ "value": "alert alert-light",
+ "content": "light"
+ },
+ {
+ "value": "alert alert-dark",
+ "content": "dark"
+ }
+ ]
+ }
+ },
+ {
+ "type": {
+ "props": [
+ "value",
+ "helper"
+ ],
+ "watch": {
+ "value": {
+ "immediate": true
+ }
+ },
+ "methods": [],
+ "_scopeId": "data-v-172d71e1",
+ "computed": {
+ "effectiveValue": []
+ },
+ "_compiled": true,
+ "components": {
+ "MonacoEditor": {
+ "name": "monaco-editor",
+ "_Ctor": [],
+ "props": {
+ "amdRequire": []
+ },
+ "extends": {
+ "name": "MonacoEditor",
+ "model": {
+ "event": "change"
+ },
+ "props": {
+ "theme": {
+ "default": "vs"
+ },
+ "value": {
+ "required": true
+ },
+ "options": [],
+ "language": [],
+ "original": [],
+ "amdRequire": [],
+ "diffEditor": {
+ "default": false
+ }
+ },
+ "watch": {
+ "options": {
+ "deep": true,
+ "user": true
+ }
+ },
+ "methods": []
+ },
+ "methods": []
+ }
+ },
+ "staticRenderFns": []
+ },
+ "field": "defaultValue",
+ "config": {
+ "label": "Default Value",
+ "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed."
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "conditionalHide",
+ "config": {
+ "label": "Visibility Rule",
+ "helper": "This control is hidden until this expression is true"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customFormatter",
+ "config": {
+ "label": "Custom Format String",
+ "helper": "Use the Mask Pattern format
Date ##\/##\/####
SSN ###-##-####
Phone (###) ###-####",
+ "validation": null
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customCssSelector",
+ "config": {
+ "label": "CSS Selector Name",
+ "helper": "Use this in your custom css rules",
+ "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "ariaLabel",
+ "config": {
+ "label": "Aria Label",
+ "helper": "Attribute designed to help assistive technology (e.g. screen readers) attach a label"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "tabindex",
+ "config": {
+ "label": "Tab Order",
+ "helper": "Order in which a user will move focus from one control to another by pressing the Tab key",
+ "validation": "regex: [0-9]*"
+ }
+ }
+ ],
+ "editor-control": "FormInput",
+ "editor-component": "FormInput"
+ },
+ {
+ "label": "Rich Text",
+ "config": {
+ "icon": "fas fa-pencil-ruler",
+ "label": null,
+ "content": "
output: {{ output }}<\/p>",
+ "interactive": true,
+ "renderVarHtml": false
+ },
+ "component": "FormHtmlViewer",
+ "inspector": [
+ {
+ "type": "FormTextArea",
+ "field": "content",
+ "config": {
+ "rows": 5,
+ "label": "Content",
+ "value": null,
+ "helper": "The HTML text to display"
+ }
+ },
+ {
+ "type": "FormCheckbox",
+ "field": "renderVarHtml",
+ "config": {
+ "label": "Render HTML from a Variable",
+ "value": null,
+ "helper": null
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "conditionalHide",
+ "config": {
+ "label": "Visibility Rule",
+ "helper": "This control is hidden until this expression is true"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customFormatter",
+ "config": {
+ "label": "Custom Format String",
+ "helper": "Use the Mask Pattern format
Date ##\/##\/####
SSN ###-##-####
Phone (###) ###-####",
+ "validation": null
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customCssSelector",
+ "config": {
+ "label": "CSS Selector Name",
+ "helper": "Use this in your custom css rules",
+ "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "ariaLabel",
+ "config": {
+ "label": "Aria Label",
+ "helper": "Attribute designed to help assistive technology (e.g. screen readers) attach a label"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "tabindex",
+ "config": {
+ "label": "Tab Order",
+ "helper": "Order in which a user will move focus from one control to another by pressing the Tab key",
+ "validation": "regex: [0-9]*"
+ }
+ }
+ ],
+ "editor-control": "FormHtmlEditor",
+ "editor-component": "FormHtmlEditor"
+ }
+ ]
+ }
+ ],
+ "computed": [
+ {
+ "id": 2,
+ "name": "test",
+ "type": "javascript",
+ "formula": "return this.foo.one;",
+ "property": "output"
+ }
+ ],
+ "custom_css": null,
+ "created_at": "2021-12-17T21:24:43+00:00",
+ "updated_at": "2021-12-17T21:26:25+00:00",
+ "status": "ACTIVE",
+ "key": null,
+ "watchers": [],
+ "categories": [
+ {
+ "id": 1,
+ "name": "Uncategorized",
+ "status": "ACTIVE",
+ "is_system": 0,
+ "created_at": "2021-12-17T21:02:03+00:00",
+ "updated_at": "2021-12-17T21:02:03+00:00",
+ "pivot": {
+ "assignable_id": 14,
+ "category_id": 1,
+ "category_type": "ProcessMaker\\Models\\ScreenCategory"
+ }
+ }
+ ]
+ }
+ ],
+ "screen_categories": [],
+ "scripts": []
+}
\ No newline at end of file
diff --git a/tests/e2e/fixtures/FOUR-5086.json b/tests/e2e/fixtures/FOUR-5086.json
new file mode 100644
index 000000000..1bcd738f0
--- /dev/null
+++ b/tests/e2e/fixtures/FOUR-5086.json
@@ -0,0 +1,3826 @@
+{
+ "type": "screen_package",
+ "version": "2",
+ "screens": [
+ {
+ "id": 2,
+ "screen_category_id": "1",
+ "title": "Screen Form Task Start",
+ "description": "Screen with calcs",
+ "type": "FORM",
+ "config": [
+ {
+ "name": "Screen Form Task Start",
+ "items": [
+ {
+ "label": "Rich Text",
+ "config": {
+ "icon": "fas fa-pencil-ruler",
+ "label": null,
+ "content": "
<\/p>\n
TOTAL<\/strong><\/span><\/p>",
+ "interactive": true,
+ "renderVarHtml": false
+ },
+ "component": "FormHtmlViewer",
+ "inspector": [
+ {
+ "type": "FormTextArea",
+ "field": "content",
+ "config": {
+ "rows": 5,
+ "label": "Content",
+ "value": null,
+ "helper": "The HTML text to display"
+ }
+ },
+ {
+ "type": "FormCheckbox",
+ "field": "renderVarHtml",
+ "config": {
+ "label": "Render HTML from a Variable",
+ "value": null,
+ "helper": null
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "conditionalHide",
+ "config": {
+ "label": "Visibility Rule",
+ "helper": "This control is hidden until this expression is true"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customFormatter",
+ "config": {
+ "label": "Custom Format String",
+ "helper": "Use the Mask Pattern format
Date ##\/##\/####
SSN ###-##-####
Phone (###) ###-####",
+ "validation": null
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customCssSelector",
+ "config": {
+ "label": "CSS Selector Name",
+ "helper": "Use this in your custom css rules",
+ "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"
+ }
+ }
+ ],
+ "editor-control": "FormHtmlEditor",
+ "editor-component": "FormHtmlEditor"
+ }
+ ],
+ [
+ {
+ "label": "Line Input",
+ "config": {
+ "icon": "far fa-square",
+ "name": "total",
+ "type": "text",
+ "label": null,
+ "helper": null,
+ "readonly": true,
+ "dataFormat": "float",
+ "validation": [],
+ "placeholder": null,
+ "defaultValue": {
+ "mode": "js",
+ "value": null
+ }
+ },
+ "component": "FormInput",
+ "inspector": [
+ {
+ "type": "FormInput",
+ "field": "name",
+ "config": {
+ "name": "Variable Name",
+ "label": "Variable Name",
+ "helper": "A variable name is a symbolic name to reference information.",
+ "validation": "regex:\/^(?:[A-Z_a-z])(?:[0-9A-Z_a-z])*(?:[A-Z.a-z])*(? Date ##\/##\/####
SSN ###-##-####
Phone (###) ###-####",
+ "validation": null
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customCssSelector",
+ "config": {
+ "label": "CSS Selector Name",
+ "helper": "Use this in your custom css rules",
+ "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"
+ }
+ }
+ ],
+ "editor-control": "FormInput",
+ "editor-component": "FormInput"
+ }
+ ]
+ ],
+ "label": "Multicolumn \/ Table",
+ "config": {
+ "icon": "fas fa-table",
+ "label": null,
+ "options": [
+ {
+ "value": "1",
+ "content": "3"
+ },
+ {
+ "value": "2",
+ "content": "3"
+ },
+ {
+ "value": "2",
+ "content": "3"
+ },
+ {
+ "value": "2",
+ "content": "3"
+ }
+ ],
+ "customCssSelector": "lista"
+ },
+ "component": "FormMultiColumn",
+ "container": true,
+ "inspector": [
+ {
+ "type": "ContainerColumns",
+ "field": "options",
+ "config": {
+ "label": "Column Width",
+ "helper": null,
+ "validation": "columns-adds-to-12"
+ }
+ },
+ {
+ "type": "ColorSelect",
+ "field": "color",
+ "config": {
+ "label": "Text Color",
+ "helper": "Set the element's text color",
+ "options": [
+ {
+ "value": "text-primary",
+ "content": "primary"
+ },
+ {
+ "value": "text-secondary",
+ "content": "secondary"
+ },
+ {
+ "value": "text-success",
+ "content": "success"
+ },
+ {
+ "value": "text-danger",
+ "content": "danger"
+ },
+ {
+ "value": "text-warning",
+ "content": "warning"
+ },
+ {
+ "value": "text-info",
+ "content": "info"
+ },
+ {
+ "value": "text-light",
+ "content": "light"
+ },
+ {
+ "value": "text-dark",
+ "content": "dark"
+ }
+ ]
+ }
+ },
+ {
+ "type": "ColorSelect",
+ "field": "bgcolor",
+ "config": {
+ "label": "Background Color",
+ "helper": "Set the element's background color",
+ "options": [
+ {
+ "value": "alert alert-primary",
+ "content": "primary"
+ },
+ {
+ "value": "alert alert-secondary",
+ "content": "secondary"
+ },
+ {
+ "value": "alert alert-success",
+ "content": "success"
+ },
+ {
+ "value": "alert alert-danger",
+ "content": "danger"
+ },
+ {
+ "value": "alert alert-warning",
+ "content": "warning"
+ },
+ {
+ "value": "alert alert-info",
+ "content": "info"
+ },
+ {
+ "value": "alert alert-light",
+ "content": "light"
+ },
+ {
+ "value": "alert alert-dark",
+ "content": "dark"
+ }
+ ]
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "conditionalHide",
+ "config": {
+ "label": "Visibility Rule",
+ "helper": "This control is hidden until this expression is true"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customFormatter",
+ "config": {
+ "label": "Custom Format String",
+ "helper": "Use the Mask Pattern format
Date ##\/##\/####
SSN ###-##-####
Phone (###) ###-####",
+ "validation": null
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customCssSelector",
+ "config": {
+ "label": "CSS Selector Name",
+ "helper": "Use this in your custom css rules",
+ "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"
+ }
+ }
+ ],
+ "editor-control": "FormMultiColumn",
+ "editor-component": "MultiColumn"
+ },
+ {
+ "label": "Submit Button",
+ "config": {
+ "icon": "fas fa-share-square",
+ "name": null,
+ "event": "submit",
+ "label": "Submit",
+ "variant": "success",
+ "fieldValue": null,
+ "defaultSubmit": true,
+ "customCssSelector": null
+ },
+ "component": "FormButton",
+ "inspector": [
+ {
+ "type": "FormInput",
+ "field": "label",
+ "config": {
+ "label": "Label",
+ "helper": "The label describes the button's text"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "name",
+ "config": {
+ "name": "Variable Name",
+ "label": "Variable Name",
+ "helper": "A variable name is a symbolic name to reference information."
+ }
+ },
+ {
+ "type": "FormMultiselect",
+ "field": "event",
+ "config": {
+ "label": "Type",
+ "helper": "Choose whether the button should submit the form",
+ "options": [
+ {
+ "value": "submit",
+ "content": "Submit Button"
+ },
+ {
+ "value": "script",
+ "content": "Regular Button"
+ }
+ ]
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "fieldValue",
+ "config": {
+ "label": "Value",
+ "helper": "The value being submitted"
+ }
+ },
+ {
+ "type": "FormMultiselect",
+ "field": "variant",
+ "config": {
+ "label": "Button Variant Style",
+ "helper": "The variant determines the appearance of the button",
+ "options": [
+ {
+ "value": "primary",
+ "content": "Primary"
+ },
+ {
+ "value": "secondary",
+ "content": "Secondary"
+ },
+ {
+ "value": "success",
+ "content": "Success"
+ },
+ {
+ "value": "danger",
+ "content": "Danger"
+ },
+ {
+ "value": "warning",
+ "content": "Warning"
+ },
+ {
+ "value": "info",
+ "content": "Info"
+ },
+ {
+ "value": "light",
+ "content": "Light"
+ },
+ {
+ "value": "dark",
+ "content": "Dark"
+ },
+ {
+ "value": "link",
+ "content": "Link"
+ }
+ ]
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "conditionalHide",
+ "config": {
+ "label": "Visibility Rule",
+ "helper": "This control is hidden until this expression is true"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customFormatter",
+ "config": {
+ "label": "Custom Format String",
+ "helper": "Use the Mask Pattern format
Date ##\/##\/####
SSN ###-##-####
Phone (###) ###-####",
+ "validation": null
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customCssSelector",
+ "config": {
+ "label": "CSS Selector Name",
+ "helper": "Use this in your custom css rules",
+ "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"
+ }
+ }
+ ],
+ "editor-control": "FormSubmit",
+ "editor-component": "FormButton"
+ },
+ {
+ "items": [
+ [],
+ [],
+ []
+ ],
+ "label": "Multicolumn \/ Table",
+ "config": {
+ "icon": "fas fa-table",
+ "label": null,
+ "options": [
+ {
+ "value": "1",
+ "content": "4"
+ },
+ {
+ "value": "2",
+ "content": "4"
+ },
+ {
+ "value": "2",
+ "content": "4"
+ }
+ ]
+ },
+ "component": "FormMultiColumn",
+ "container": true,
+ "inspector": [
+ {
+ "type": "ContainerColumns",
+ "field": "options",
+ "config": {
+ "label": "Column Width",
+ "helper": null,
+ "validation": "columns-adds-to-12"
+ }
+ },
+ {
+ "type": "ColorSelect",
+ "field": "color",
+ "config": {
+ "label": "Text Color",
+ "helper": "Set the element's text color",
+ "options": [
+ {
+ "value": "text-primary",
+ "content": "primary"
+ },
+ {
+ "value": "text-secondary",
+ "content": "secondary"
+ },
+ {
+ "value": "text-success",
+ "content": "success"
+ },
+ {
+ "value": "text-danger",
+ "content": "danger"
+ },
+ {
+ "value": "text-warning",
+ "content": "warning"
+ },
+ {
+ "value": "text-info",
+ "content": "info"
+ },
+ {
+ "value": "text-light",
+ "content": "light"
+ },
+ {
+ "value": "text-dark",
+ "content": "dark"
+ }
+ ]
+ }
+ },
+ {
+ "type": "ColorSelect",
+ "field": "bgcolor",
+ "config": {
+ "label": "Background Color",
+ "helper": "Set the element's background color",
+ "options": [
+ {
+ "value": "alert alert-primary",
+ "content": "primary"
+ },
+ {
+ "value": "alert alert-secondary",
+ "content": "secondary"
+ },
+ {
+ "value": "alert alert-success",
+ "content": "success"
+ },
+ {
+ "value": "alert alert-danger",
+ "content": "danger"
+ },
+ {
+ "value": "alert alert-warning",
+ "content": "warning"
+ },
+ {
+ "value": "alert alert-info",
+ "content": "info"
+ },
+ {
+ "value": "alert alert-light",
+ "content": "light"
+ },
+ {
+ "value": "alert alert-dark",
+ "content": "dark"
+ }
+ ]
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "conditionalHide",
+ "config": {
+ "label": "Visibility Rule",
+ "helper": "This control is hidden until this expression is true"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customFormatter",
+ "config": {
+ "label": "Custom Format String",
+ "helper": "Use the Mask Pattern format
Date ##\/##\/####
SSN ###-##-####
Phone (###) ###-####",
+ "validation": null
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customCssSelector",
+ "config": {
+ "label": "CSS Selector Name",
+ "helper": "Use this in your custom css rules",
+ "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"
+ }
+ }
+ ],
+ "editor-control": "FormMultiColumn",
+ "editor-component": "MultiColumn"
+ }
+ ]
+ },
+ {
+ "name": "addPage",
+ "items": [
+ {
+ "label": "Image",
+ "config": {
+ "icon": "fas fa-image",
+ "name": "image",
+ "event": "submit",
+ "label": "Image",
+ "value": null,
+ "variant": "primary",
+ "renderImage": false
+ },
+ "component": "FormImage",
+ "inspector": [
+ {
+ "type": "FormInput",
+ "field": "name",
+ "config": {
+ "label": "Name",
+ "helper": "Image name"
+ }
+ },
+ {
+ "type": "ImageUpload",
+ "field": "image",
+ "config": {
+ "label": "Upload",
+ "helper": "Upload image"
+ }
+ },
+ {
+ "type": "ImageVariable",
+ "field": "imageName",
+ "config": {
+ "label": "Render from a variable name",
+ "helper": null
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "helper",
+ "config": {
+ "label": "Helper Text",
+ "helper": "Help text is meant to provide additional guidance on the field's value"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "height",
+ "config": {
+ "type": "number",
+ "label": "Height",
+ "helper": "Image height"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "width",
+ "config": {
+ "type": "number",
+ "label": "Width",
+ "helper": "image width"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "conditionalHide",
+ "config": {
+ "label": "Visibility Rule",
+ "helper": "This control is hidden until this expression is true"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customFormatter",
+ "config": {
+ "label": "Custom Format String",
+ "helper": "Use the Mask Pattern format
Date ##\/##\/####
SSN ###-##-####
Phone (###) ###-####",
+ "validation": null
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customCssSelector",
+ "config": {
+ "label": "CSS Selector Name",
+ "helper": "Use this in your custom css rules",
+ "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"
+ }
+ }
+ ],
+ "editor-control": "FormImage",
+ "editor-component": "FormImage"
+ }
+ ]
+ }
+ ],
+ "computed": [
+ {
+ "id": 1,
+ "name": "total",
+ "type": "javascript",
+ "formula": "var list = this.loop_1;\nvar resultado = 0;\nfor (i = 0; i < list.length; i++){\n resultado=resultado + list[i].tot; \n}\nreturn resultado;",
+ "property": "total"
+ },
+ {
+ "id": 2,
+ "name": "test",
+ "type": "javascript",
+ "formula": "\/\/select list with data\nlet dataSelected = this.form_select_list_1;\n\/\/loop we want to fill\nlet dataLoop = this.loop_1 || [];\n\nlet newRecordSelected = dataSelected.filter(item => {\n return !dataLoop.find(out => out.value == item.value)\n});\n\/\/ add a copy of the new selected item\nnewRecordSelected.forEach(item => dataLoop.push(JSON.parse(JSON.stringify(item))));\n\nlet removeFromLoop = dataLoop.filter(item => !dataSelected.find(inp => inp.value == item.value) );\n\/\/ remove From Loop the items\nremoveFromLoop.forEach(item => {\n let index = dataLoop.indexOf(item)\n dataLoop.splice(index, 1)\n});",
+ "property": "copySelectToLoop"
+ }
+ ],
+ "custom_css": "[selector='lista'] {\n color: black;\n margin: 1rem;\n padding: 1rem;\n border: 2px solid rgb(136, 136, 119);\n \/* IMPORTANTE *\/\n text-align: center;\n}\nbutton {width: 100%;}",
+ "created_at": "2021-03-30T19:51:20+00:00",
+ "updated_at": "2022-01-26T21:11:10+00:00",
+ "status": "ACTIVE",
+ "key": null,
+ "watchers": [],
+ "categories": [
+ {
+ "id": 1,
+ "name": "Uncategorized",
+ "status": "ACTIVE",
+ "is_system": 0,
+ "created_at": "2022-01-26T16:38:04+00:00",
+ "updated_at": "2022-01-26T16:38:04+00:00",
+ "pivot": {
+ "assignable_id": 2,
+ "category_id": 1,
+ "category_type": "ProcessMaker\\Models\\ScreenCategory"
+ }
+ }
+ ]
+ }
+ ],
+ "screen_categories": [],
+ "scripts": []
+}
\ No newline at end of file
diff --git a/tests/e2e/fixtures/FOUR-5139.json b/tests/e2e/fixtures/FOUR-5139.json
new file mode 100644
index 000000000..72e11c7d5
--- /dev/null
+++ b/tests/e2e/fixtures/FOUR-5139.json
@@ -0,0 +1 @@
+{"type":"screen_package","version":"2","screens":[{"id":13,"screen_category_id":"1","title":"FOUR-5139","description":"Fixture to test ticket FOUR-5139","type":"FORM","config":[{"name":"FOUR-5139","items":[{"items":[{"label":"Line Input","config":{"icon":"far fa-square","name":"form_input_1","type":"text","label":"New Input","helper":null,"dataFormat":"string","validation":null,"placeholder":null},"component":"FormInput","inspector":[{"type":"FormInput","field":"name","config":{"name":"Variable Name","label":"Variable Name","helper":"A variable name is a symbolic name to reference information.","validation":"regex:\/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(? Date ##\/##\/####
SSN ###-##-####
Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"FormInput","editor-component":"FormInput"}],"label":"Loop","config":{"icon":"fas fa-redo","name":"loop_1","label":null,"settings":{"add":true,"type":"existing","times":"3","varname":"loop_1"}},"component":"FormLoop","container":true,"inspector":[{"type":"LoopInspector","field":"settings","config":{"label":null,"helper":null}},{"type":"FormInput","field":"conditionalHide","config":{"label":"Visibility Rule","helper":"This control is hidden until this expression is true"}},{"type":"FormInput","field":"customFormatter","config":{"label":"Custom Format String","helper":"Use the Mask Pattern format
Date ##\/##\/####
SSN ###-##-####
Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"Loop","editor-component":"Loop"}]}],"computed":[{"id":2,"name":"loop_1","type":"javascript","formula":"let agents = this.loop_1;\n\nif (agents === undefined) {\n agents = [];\n}\n\nreturn agents;","property":"loop_1"}],"custom_css":null,"created_at":"2022-02-16T15:27:59+00:00","updated_at":"2022-02-16T15:29:15+00:00","status":"ACTIVE","key":null,"watchers":[],"categories":[{"id":1,"name":"Uncategorized","status":"ACTIVE","is_system":0,"created_at":"2022-02-16T13:46:12+00:00","updated_at":"2022-02-16T13:46:12+00:00","pivot":{"assignable_id":13,"category_id":1,"category_type":"ProcessMaker\\Models\\ScreenCategory"}}]}],"screen_categories":[],"scripts":[]}
\ No newline at end of file
diff --git a/tests/e2e/fixtures/FOUR-5161.json b/tests/e2e/fixtures/FOUR-5161.json
new file mode 100644
index 000000000..2d732ec4a
--- /dev/null
+++ b/tests/e2e/fixtures/FOUR-5161.json
@@ -0,0 +1,1111 @@
+{
+ "type": "screen_package",
+ "version": "2",
+ "screens": [
+ {
+ "id": 257,
+ "screen_category_id": "1",
+ "title": "gfdg",
+ "description": "dgdfg",
+ "type": "FORM",
+ "config": [
+ {
+ "name": "gfdg",
+ "items": [
+ {
+ "label": "Checkbox",
+ "config": {
+ "icon": "fas fa-check-square",
+ "name": "form_checkbox_1",
+ "label": "New Checkbox",
+ "helper": null,
+ "toggle": false,
+ "disabled": false,
+ "validation": [],
+ "initiallyChecked": false
+ },
+ "component": "FormCheckbox",
+ "inspector": [
+ {
+ "type": "FormInput",
+ "field": "name",
+ "config": {
+ "name": "Variable Name",
+ "label": "Variable Name",
+ "helper": "A variable name is a symbolic name to reference information.",
+ "validation": "regex:\/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(? Date ##\/##\/####
SSN ###-##-####
Phone (###) ###-####",
+ "validation": null
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customCssSelector",
+ "config": {
+ "label": "CSS Selector Name",
+ "helper": "Use this in your custom css rules",
+ "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"
+ }
+ }
+ ],
+ "editor-control": "FormCheckbox",
+ "editor-component": "FormCheckbox"
+ },
+ {
+ "items": [
+ {
+ "items": [
+ [
+ {
+ "label": "Line Input",
+ "config": {
+ "icon": "far fa-square",
+ "name": "color",
+ "type": "text",
+ "label": "New Input",
+ "helper": null,
+ "readonly": false,
+ "dataFormat": "string",
+ "validation": [
+ {
+ "value": "required",
+ "helper": "Checks if the length of the String representation of the value is >",
+ "content": "Required"
+ }
+ ],
+ "placeholder": null
+ },
+ "component": "FormInput",
+ "inspector": [
+ {
+ "type": "FormInput",
+ "field": "name",
+ "config": {
+ "name": "Variable Name",
+ "label": "Variable Name",
+ "helper": "A variable name is a symbolic name to reference information.",
+ "validation": "regex:\/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(? Date ##\/##\/####
SSN ###-##-####
Phone (###) ###-####",
+ "validation": null
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customCssSelector",
+ "config": {
+ "label": "CSS Selector Name",
+ "helper": "Use this in your custom css rules",
+ "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"
+ }
+ }
+ ],
+ "editor-control": "FormInput",
+ "editor-component": "FormInput"
+ }
+ ],
+ []
+ ],
+ "label": "Multicolumn \/ Table",
+ "config": {
+ "icon": "fas fa-table",
+ "label": null,
+ "options": [
+ {
+ "value": "1",
+ "content": "6"
+ },
+ {
+ "value": "2",
+ "content": "6"
+ }
+ ]
+ },
+ "component": "FormMultiColumn",
+ "container": true,
+ "inspector": [
+ {
+ "type": "ContainerColumns",
+ "field": "options",
+ "config": {
+ "label": "Column Width",
+ "validation": "columns-adds-to-12"
+ }
+ },
+ {
+ "type": "ColorSelect",
+ "field": "color",
+ "config": {
+ "label": "Text Color",
+ "helper": "Set the element's text color",
+ "options": [
+ {
+ "value": "text-primary",
+ "content": "primary"
+ },
+ {
+ "value": "text-secondary",
+ "content": "secondary"
+ },
+ {
+ "value": "text-success",
+ "content": "success"
+ },
+ {
+ "value": "text-danger",
+ "content": "danger"
+ },
+ {
+ "value": "text-warning",
+ "content": "warning"
+ },
+ {
+ "value": "text-info",
+ "content": "info"
+ },
+ {
+ "value": "text-light",
+ "content": "light"
+ },
+ {
+ "value": "text-dark",
+ "content": "dark"
+ }
+ ]
+ }
+ },
+ {
+ "type": "ColorSelect",
+ "field": "bgcolor",
+ "config": {
+ "label": "Background Color",
+ "helper": "Set the element's background color",
+ "options": [
+ {
+ "value": "alert alert-primary",
+ "content": "primary"
+ },
+ {
+ "value": "alert alert-secondary",
+ "content": "secondary"
+ },
+ {
+ "value": "alert alert-success",
+ "content": "success"
+ },
+ {
+ "value": "alert alert-danger",
+ "content": "danger"
+ },
+ {
+ "value": "alert alert-warning",
+ "content": "warning"
+ },
+ {
+ "value": "alert alert-info",
+ "content": "info"
+ },
+ {
+ "value": "alert alert-light",
+ "content": "light"
+ },
+ {
+ "value": "alert alert-dark",
+ "content": "dark"
+ }
+ ]
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "conditionalHide",
+ "config": {
+ "label": "Visibility Rule",
+ "helper": "This control is hidden until this expression is true"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customFormatter",
+ "config": {
+ "label": "Custom Format String",
+ "helper": "Use the Mask Pattern format
Date ##\/##\/####
SSN ###-##-####
Phone (###) ###-####",
+ "validation": null
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customCssSelector",
+ "config": {
+ "label": "CSS Selector Name",
+ "helper": "Use this in your custom css rules",
+ "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"
+ }
+ }
+ ],
+ "editor-control": "MultiColumn",
+ "editor-component": "MultiColumn"
+ }
+ ],
+ "label": "Loop",
+ "config": {
+ "icon": "fas fa-redo",
+ "name": "loop_1",
+ "label": null,
+ "settings": {
+ "add": true,
+ "type": "new",
+ "times": "1",
+ "varname": "loop_1"
+ },
+ "conditionalHide": "form_checkbox_1"
+ },
+ "component": "FormLoop",
+ "container": true,
+ "inspector": [
+ {
+ "type": "LoopInspector",
+ "field": "settings",
+ "config": {
+ "label": null,
+ "helper": null
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "conditionalHide",
+ "config": {
+ "label": "Visibility Rule",
+ "helper": "This control is hidden until this expression is true"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customFormatter",
+ "config": {
+ "label": "Custom Format String",
+ "helper": "Use the Mask Pattern format
Date ##\/##\/####
SSN ###-##-####
Phone (###) ###-####",
+ "validation": null
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customCssSelector",
+ "config": {
+ "label": "CSS Selector Name",
+ "helper": "Use this in your custom css rules",
+ "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "ariaLabel",
+ "config": {
+ "label": "Aria Label",
+ "helper": "Attribute designed to help assistive technology (e.g. screen readers) attach a label"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "tabindex",
+ "config": {
+ "label": "Tab Order",
+ "helper": "Order in which a user will move focus from one control to another by pressing the Tab key",
+ "validation": "regex: [0-9]*"
+ }
+ }
+ ],
+ "editor-control": "Loop",
+ "editor-component": "Loop"
+ },
+ {
+ "label": "Submit Button",
+ "config": {
+ "icon": "fas fa-share-square",
+ "name": null,
+ "event": "submit",
+ "label": "New Submit",
+ "variant": "primary",
+ "fieldValue": null,
+ "defaultSubmit": true
+ },
+ "component": "FormButton",
+ "inspector": [
+ {
+ "type": "FormInput",
+ "field": "label",
+ "config": {
+ "label": "Label",
+ "helper": "The label describes the button's text"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "name",
+ "config": {
+ "name": "Variable Name",
+ "label": "Variable Name",
+ "helper": "A variable name is a symbolic name to reference information."
+ }
+ },
+ {
+ "type": "FormMultiselect",
+ "field": "event",
+ "config": {
+ "label": "Type",
+ "helper": "Choose whether the button should submit the form",
+ "options": [
+ {
+ "value": "submit",
+ "content": "Submit Button"
+ },
+ {
+ "value": "script",
+ "content": "Regular Button"
+ }
+ ]
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "fieldValue",
+ "config": {
+ "label": "Value",
+ "helper": "The value being submitted"
+ }
+ },
+ {
+ "type": "FormMultiselect",
+ "field": "variant",
+ "config": {
+ "label": "Button Variant Style",
+ "helper": "The variant determines the appearance of the button",
+ "options": [
+ {
+ "value": "primary",
+ "content": "Primary"
+ },
+ {
+ "value": "secondary",
+ "content": "Secondary"
+ },
+ {
+ "value": "success",
+ "content": "Success"
+ },
+ {
+ "value": "danger",
+ "content": "Danger"
+ },
+ {
+ "value": "warning",
+ "content": "Warning"
+ },
+ {
+ "value": "info",
+ "content": "Info"
+ },
+ {
+ "value": "light",
+ "content": "Light"
+ },
+ {
+ "value": "dark",
+ "content": "Dark"
+ },
+ {
+ "value": "link",
+ "content": "Link"
+ }
+ ]
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "conditionalHide",
+ "config": {
+ "label": "Visibility Rule",
+ "helper": "This control is hidden until this expression is true"
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customFormatter",
+ "config": {
+ "label": "Custom Format String",
+ "helper": "Use the Mask Pattern format
Date ##\/##\/####
SSN ###-##-####
Phone (###) ###-####",
+ "validation": null
+ }
+ },
+ {
+ "type": "FormInput",
+ "field": "customCssSelector",
+ "config": {
+ "label": "CSS Selector Name",
+ "helper": "Use this in your custom css rules",
+ "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"
+ }
+ }
+ ],
+ "editor-control": "FormSubmit",
+ "editor-component": "FormButton"
+ }
+ ]
+ }
+ ],
+ "computed": [
+ {
+ "id": 1,
+ "name": "loop_1",
+ "type": "javascript",
+ "formula": "let loop_1 = this.loop_1;\nif (this.loop_1 && Array.isArray(this.loop_1) && this.loop_1.length > 0){\n for (let i = 0; i < loop_1.length; i++) {\n let color = loop_1[i].color;\n \n loop_1[i].decription = \"Color is :\" + color;\n }\n\treturn loop_1;\n}\nreturn [{}];",
+ "property": "loop_1"
+ }
+ ],
+ "custom_css": null,
+ "created_at": "2022-01-18T01:51:44+00:00",
+ "updated_at": "2022-01-18T02:27:20+00:00",
+ "status": "ACTIVE",
+ "key": null,
+ "watchers": [],
+ "categories": [
+ {
+ "id": 1,
+ "name": "Uncategorized",
+ "status": "ACTIVE",
+ "is_system": 0,
+ "created_at": "2022-01-04T13:18:09+00:00",
+ "updated_at": "2022-01-04T13:18:09+00:00",
+ "pivot": {
+ "assignable_id": 257,
+ "category_id": 1,
+ "category_type": "ProcessMaker\\Models\\ScreenCategory"
+ }
+ }
+ ]
+ }
+ ],
+ "screen_categories": [],
+ "scripts": []
+}
\ No newline at end of file
diff --git a/tests/e2e/specs/ComputedFields.spec.js b/tests/e2e/specs/ComputedFields.spec.js
index 244ec02cd..155b1e44c 100644
--- a/tests/e2e/specs/ComputedFields.spec.js
+++ b/tests/e2e/specs/ComputedFields.spec.js
@@ -1,7 +1,41 @@
describe('Computed fields', () => {
+ it('Make sure new rows can be added to the loop, even with a javascript-driven computed field', () => {
+ cy.server();
+ cy.visit('/');
+ cy.loadFromJson('FOUR-5139.json', 0);
+
+ // Enter preview mode
+ cy.get('[data-cy=mode-preview]').click();
+
+ // Add three inputs input in loop
+ cy.get('[data-cy=loop-loop_1-add]').click();
+ cy.get('[data-cy=loop-loop_1-add]').click();
+ cy.get('[data-cy=loop-loop_1-add]').click();
+
+ cy.get('[data-cy=screen-field-form_input_1]')
+ .first()
+ .clear()
+ .type('First input');
+
+ cy.assertPreviewData({
+ 'loop_1': [
+ {
+ 'form_input_1': 'First input',
+ },
+ {
+ 'form_input_1': '',
+ },
+ {
+ 'form_input_1': '',
+ },
+ ],
+ });
+ });
+
it('CRUD of computed fields', () => {
cy.visit('/');
+
// Create a calculated property
cy.get('[data-cy="topbar-calcs"]').click();
cy.get('[data-cy="calcs-add-property"]').click();
@@ -56,7 +90,7 @@ describe('Computed fields', () => {
it('Create a javascript computed field', () => {
cy.visit('/');
// Add an input field
- cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
+ cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
// Add a second input field
cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-element-container]', 'bottom');
@@ -86,7 +120,7 @@ describe('Computed fields', () => {
it('Create a computed field with formula', () => {
cy.visit('/');
// Add an input field
- cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
+ cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
// Add a second input field
cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-element-container]', 'bottom');
diff --git a/tests/e2e/specs/ValidationCalcsAndLoop.spec.js b/tests/e2e/specs/ValidationCalcsAndLoop.spec.js
new file mode 100644
index 000000000..4b4cd411a
--- /dev/null
+++ b/tests/e2e/specs/ValidationCalcsAndLoop.spec.js
@@ -0,0 +1,98 @@
+describe('Validation Calcs properties and loop', () => {
+ beforeEach(() => {
+ cy.server();
+ cy.visit('/');
+ });
+
+ it('Data is fully accessible from a collection screen', () => {
+ cy.loadFromJson('FOUR-4853.json', 0);
+ cy.get('[data-cy=mode-preview]').click();
+
+ cy.get('[data-cy=preview-data-input]')
+ .click()
+ .focused()
+ .type('{backspace}{backspace}')
+ .type('{\n"foo": {\n"one": "one",\n"two": "two"');
+
+ cy.get('[data-cy=mode-editor]').click();
+ cy.get('[data-cy=mode-preview]').click();
+
+ cy.get('[data-cy=preview-content] [data-cy="screen-field-foo.two"]')
+ .parent()
+ .should('contain.text', 'two');
+
+ cy.get(':nth-child(2) > .form-group > :nth-child(1) > div > p')
+ .should('contain.text', 'output: one');
+ });
+
+ it('Calcs working with select list and loop', () => {
+ cy.loadFromJson('FOUR-5086.json', 0);
+ cy.get('[data-cy=mode-preview]').click();
+
+ cy.get('[data-cy=preview-content] [data-cy="screen-field-form_select_list_1"]').selectOption('Don Quijote');
+
+ cy.get('[data-cy=preview-content] [data-cy="screen-field-cant"]').type('12');
+
+ // Check final result
+ cy.assertPreviewData(
+ {
+
+ 'form_select_list_1':
+ [
+ {
+ 'value':
+ 'https://www.infobae.com/new-resizer/9gv8XYFq7qmOw86jtRR_u7AlDdI=/420x630/filters:format(jpg):quality(85)/s3.amazonaws.com/arc-wordpress-client-uploads/infobae-wp/wp-content/uploads/2016/07/20201800/mejores-libros-Don-Quijote-sf.jpg',
+ 'content':
+ 'Don Quijote',
+ },
+ ],
+ 'loop_1':
+ [
+ {
+ 'value':
+ 'https://www.infobae.com/new-resizer/9gv8XYFq7qmOw86jtRR_u7AlDdI=/420x630/filters:format(jpg):quality(85)/s3.amazonaws.com/arc-wordpress-client-uploads/infobae-wp/wp-content/uploads/2016/07/20201800/mejores-libros-Don-Quijote-sf.jpg',
+ 'content':
+ 'Don Quijote',
+ 'cant':
+ 12,
+ 'tot':
+ 1200,
+ },
+ ],
+ 'total':
+ 1200,
+ });
+ });
+
+ it('Calcs working with loop', () => {
+ cy.loadFromJson('FOUR-5161.json', 0);
+ cy.get('[data-cy=mode-preview]').click();
+
+ cy.get('[data-cy=preview-content] [name=form_checkbox_1]').click();
+
+ cy.get('[data-cy=preview-content] [data-cy="screen-field-color"]').type('red');
+
+ cy.get('[data-cy=loop-loop_1-add]').click();
+
+ cy.get(':nth-child(2) > .container-fluid > :nth-child(1) > .page > :nth-child(1) > .row > :nth-child(1) > :nth-child(1) > .form-group > [data-cy=screen-field-color]').type('green');
+
+ // Check final result
+ cy.get('#screen-builder-container').then((div) => {
+ const data = div[0].__vue__.previewData;
+ expect(data).to.eql({
+ 'form_checkbox_1': true,
+ 'loop_1':[
+ {
+ 'decription': 'Color is :red',
+ 'color': 'red',
+ },
+ {
+ 'decription': 'Color is :green',
+ 'color': 'green',
+ },
+ ],
+ });
+ });
+ });
+
+});