3 |
13 |
14 |
15 |
26 |
27 |
43 |
--------------------------------------------------------------------------------
/src/components/VariableNameGenerator.js:
--------------------------------------------------------------------------------
1 | export default class VariableNameGenerator {
2 | names = [];
3 |
4 | GetVariableNames(configuration) {
5 | configuration.forEach(item => {
6 |
7 | //If the element has containers
8 | if (Array.isArray(item)) {
9 | this.GetVariableNames(item);
10 | }
11 |
12 | //If the element has items
13 | if (item.items) {
14 | this.GetVariableNames(item.items);
15 | }
16 |
17 | //If the element has its variable name set
18 | if (item.config && item.config.name) {
19 | this.names.push(`${item.config.name}`);
20 | }
21 |
22 | });
23 |
24 | }
25 |
26 | generate(config, component) {
27 | this.names = [];
28 | this.GetVariableNames(config);
29 | let definitionId = this.generateNameId(this.snakeCase(component), 1);
30 | this.names.push(definitionId);
31 |
32 | return [this.names, definitionId];
33 | }
34 |
35 | snakeCase(name) {
36 | return name.replace(/\W+/g, ' ')
37 | .split(/ |\B(?=[A-Z])/)
38 | .map(word => word.toLowerCase())
39 | .join('_');
40 | }
41 |
42 | generateNameId = (name, id) => {
43 | let generated = name + '_' + id;
44 | if (this.names.indexOf(generated) !== -1) {
45 | id++;
46 | generated = this.generateNameId(name, id);
47 | }
48 | return generated;
49 | };
50 |
51 | }
52 |
--------------------------------------------------------------------------------
/src/components/basic-search.vue:
--------------------------------------------------------------------------------
1 |
2 | 4 | 5 |
6 |
5 | 7 | 8 |
9 |10 | 11 |
12 |
3 |
19 |
20 |
21 |
53 |
54 |
92 |
--------------------------------------------------------------------------------
/src/components/custom-css-output.js:
--------------------------------------------------------------------------------
1 | export default {
2 | name: 'custom-css-output',
3 | render(createElement) {
4 | return createElement('style', this.$slots.default);
5 | },
6 | };
--------------------------------------------------------------------------------
/src/components/custom-css.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
18 |
5 |
13 |
14 |
17 | {{ $t("You can set CSS Selector names in the inspector. Use them here with [selector='my-selector']") }}
18 |
19 |
21 |
22 | {{ cssErrors }}
24 | {{ $t('Cancel') }}
26 | {{ $t('Save') }}
27 |
3 |
4 |
16 |
17 |
18 |
59 |
--------------------------------------------------------------------------------
/src/components/inspector/collection-designer-mode.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
14 |
74 |
--------------------------------------------------------------------------------
/src/components/inspector/collection-display-mode.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
12 |
3 |
19 |
20 |
21 |
84 |
--------------------------------------------------------------------------------
/src/components/inspector/color-select.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
13 |
14 |
15 | {{ $t("Update collection on submit") }}
16 |
17 |
18 |
3 |
34 |
35 |
36 |
86 |
87 |
96 |
--------------------------------------------------------------------------------
/src/components/inspector/data-source-types.js:
--------------------------------------------------------------------------------
1 | export const dataSources = [
2 | { value: 'provideData', text: 'Provide Values' },
3 | { value: 'dataObject', text: 'Request Data' },
4 | { value: 'dataConnector', text: 'Data Connector' },
5 | { value: 'collection', text: 'Collection' },
6 | ];
7 |
8 | export const dataSourceValues = dataSources.reduce((values, source) => {
9 | values[source.value] = source.value;
10 | return values;
11 | }, {});
12 |
--------------------------------------------------------------------------------
/src/components/inspector/device-visibility.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
7 |
16 |
25 |
26 |
27 |
28 |
29 |
30 | {{ $t("Clear Color Selection") }}
31 |
32 |
33 |
3 |
23 |
24 |
25 |
62 |
63 |
72 |
--------------------------------------------------------------------------------
/src/components/inspector/edit-option.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
11 | {{ $t("Show for Desktop") }}
12 |
13 |
14 |
19 | {{ $t("Show for Mobile") }}
20 |
21 |
22 |
3 |
27 |
28 |
29 |
45 |
--------------------------------------------------------------------------------
/src/components/inspector/encrypted-config.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {{ $t('Add Option') }}
5 |
6 |
7 | {{ $t('Edit Option') }}
8 |
9 |
10 |
11 |
26 |
13 |
15 |
16 | {{ optionError }}
14 |
4 |
24 |
25 |
26 |
27 |
76 |
77 |
79 |
--------------------------------------------------------------------------------
/src/components/inspector/form-multiselect.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
10 | {{ $t("Encrypted") }}
11 |
12 |
13 |
23 |
14 |
22 |
3 |
14 |
15 | {{ $t("No elements found. Consider changing the search query.") }}
16 |
17 |
18 | {{ $t("No Data Available") }}
19 |
20 |
21 |
22 |
33 |
34 |
35 |
74 |
75 |
80 |
--------------------------------------------------------------------------------
/src/components/inspector/image-upload.vue:
--------------------------------------------------------------------------------
1 |
2 |
26 |
31 | {{ helper }}
32 |
27 | {{ error }}
28 |
29 | {{ error }}
30 |
3 |
12 | {{ $t('Upload') }}
13 |
14 | {{ $t('Preview') }}
15 |
19 |
20 |
21 |
52 |
53 |
62 |
--------------------------------------------------------------------------------
/src/components/inspector/image-variable.vue:
--------------------------------------------------------------------------------
1 |
2 |
16 | ![]()
17 |
18 |
3 |
6 |
7 |
8 |
63 |
--------------------------------------------------------------------------------
/src/components/inspector/index.js:
--------------------------------------------------------------------------------
1 | export { default as CollectionSelectList } from "./collection-select-list.vue";
2 | export { default as CollectionRecordsList } from "./collection-records-list.vue";
3 | export { default as collectionDataSource } from "./collection-data-source.vue";
4 | export { default as CollectionDisplayMode } from "./collection-display-mode.vue";
5 | export { default as CollectionDesignerMode } from "./collection-designer-mode.vue";
6 | export { default as ColorSelect } from "./color-select.vue";
7 | export { default as ColorSelectRecord } from "./color-select.vue";
8 | export { default as ColorSelectModern } from "./color-select-modern.vue";
9 | export { default as ColumnSetup } from "./column-setup.vue";
10 | export { default as ContainerColumns } from "./container-columns.vue";
11 | export { default as DataMapping } from "./data-mapping.vue";
12 | export { dataSources, dataSourceValues } from "./data-source-types";
13 | export { default as DefaultValueEditor } from "./default-value-editor.vue";
14 | export { default as DeviceVisibility } from "./device-visibility.vue";
15 | export { default as EditOption } from "./edit-option.vue";
16 | export { default as FormMultiselect } from "./form-multiselect.vue";
17 | export { default as ImageUpload } from "./image-upload.vue";
18 | export { default as ImageVariable } from "./image-variable.vue";
19 | export { default as InputVariable } from "./input-variable.vue";
20 | export { default as LoopInspector } from "./loop.vue";
21 | export { default as MustacheHelper } from "./mustache-helper.vue";
22 | export { default as OptionsList } from "./options-list.vue";
23 | export { default as OutboundConfig } from "./outbound-config.vue";
24 | export { default as PageSelect } from "./page-select.vue";
25 | export { default as ScreenSelector } from "./screen-selector.vue";
26 | export { default as SelectDataTypeMask } from "./select-data-type-mask.vue";
27 | export { default as Tooltip } from "./tooltip.vue";
28 | export { default as ValidationSelect } from "./validation-select.vue";
29 | export { default as LoadingSubmitButton } from "./loading-submit-button.vue";
30 | export { default as LabelSubmitButton } from "./label-submit-button.vue";
31 | export { default as AnalyticsSelector } from "./analytics-selector.vue";
32 | export { default as EncryptedConfig } from "./encrypted-config.vue";
33 |
--------------------------------------------------------------------------------
/src/components/inspector/label-submit-button.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 |
13 |
14 |
50 |
--------------------------------------------------------------------------------
/src/components/inspector/loading-submit-button.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
11 |
3 |
12 |
13 |
14 |
48 |
--------------------------------------------------------------------------------
/src/components/inspector/mustache-helper.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
11 |
7 | {}
8 |
9 |
10 |
11 |
16 |
17 |
26 |
--------------------------------------------------------------------------------
/src/components/inspector/page-select.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
14 |
15 | {{ $t('No elements found. Consider changing the search query.') }}
16 |
17 |
18 | {{ $t('No Data Available') }}
19 |
20 |
21 | {{ helper }}
22 |
23 |
24 |
25 |
45 |
--------------------------------------------------------------------------------
/src/components/inspector/select-data-type-mask.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
14 | {{ $t('No elements found. Consider changing the search query.') }}
15 | {{ $t('No Data Available') }}
16 |
17 |
18 |
24 |
25 |
26 |
51 |
--------------------------------------------------------------------------------
/src/components/renderer/add-loop-row.vue:
--------------------------------------------------------------------------------
1 |
2 |
19 |
22 | {{ helper }}
23 | {{ error }}
20 | {{ error }}
21 |
3 |
4 |
5 |
7 |
8 |
9 |
13 |
14 |
22 |
23 |
24 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
64 |
--------------------------------------------------------------------------------
/src/components/renderer/avatar-dropdown.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ error }}
6 |
3 |
20 |
21 |
22 |
58 |
59 |
83 |
--------------------------------------------------------------------------------
/src/components/renderer/form-avatar.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {{ title }}
5 |
6 |
7 |
8 |
9 |
10 |
19 |
11 |
12 |
13 | 
15 |
16 |
17 |
18 |
15 |
3 | 
4 |
5 | {{ $t(title) }}
6 |
7 |
8 | {{ $t(linkText) }}
9 |
10 |
11 |
12 |
13 |
29 |
30 |
45 |
--------------------------------------------------------------------------------
/src/components/renderer/form-image.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
9 |
28 |
29 |
37 |
--------------------------------------------------------------------------------
/src/components/renderer/form-input-masked.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
90 |
91 |
93 |
--------------------------------------------------------------------------------
/src/components/renderer/form-new-request.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 | {{ $t(title) }}
6 |
7 |
3 |
23 |
24 |
25 |
84 |
--------------------------------------------------------------------------------
/src/components/renderer/form-record-list-static.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
19 |
8 |
9 |
18 |
14 |
16 |
17 |
20 |
22 |
3 |
5 |
6 |
20 |
21 |
22 |
23 |
40 |
--------------------------------------------------------------------------------
/src/components/renderer/form-text.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ $t(label) }}
4 || 8 | {{ field.content }} 9 | | 10 |
|---|
| 15 | {{ formatIfDate(mustache(field.value, val)) }} 16 | | 17 |
3 |
4 |
5 |
6 |
7 |
45 |
--------------------------------------------------------------------------------
/src/components/renderer/index.js:
--------------------------------------------------------------------------------
1 | export { default as AddLoopRow } from "./add-loop-row.vue";
2 | export { default as FileDownload } from "./file-download.vue";
3 | export { default as FileUpload } from "./file-upload.vue";
4 | export { default as FormAvatar } from "./form-avatar.vue";
5 | export { default as FormButton } from "./form-button.vue";
6 | export { default as FormImage } from "./form-image.vue";
7 | export { default as FormInputMasked } from "./form-masked-input.vue";
8 | export { default as FormLoop } from "./form-loop.vue";
9 | export { default as FormMaskedInput } from "./form-masked-input.vue";
10 | // export { default as FormMultiColumn } from "./form-multi-column.vue";
11 | export { default as FormNestedScreen } from "./form-nested-screen.vue";
12 | export { default as FormRecordList } from "./form-record-list.vue";
13 | export { default as FormRecordListStatic } from "./form-record-list-static.vue";
14 | export { default as FormText } from "./form-text.vue";
15 | export { default as NewFormMultiColumn } from "./new-form-multi-column.vue";
16 | export { default as ScreenRendererError } from "./screen-renderer-error.vue";
17 | export { default as FormListTable } from "./form-list-table.vue";
18 | export { default as FormAnalyticsChart } from "./form-analytics-chart.vue";
19 | export { default as FormRequests } from "./form-requests.vue";
20 | export { default as FormTasks } from "./form-tasks.vue";
21 | export { default as LinkButton } from "./link-button.vue";
22 | export { default as FormCollectionRecordControl } from "./form-collection-record-control.vue";
23 | export { default as FormCollectionViewControl } from "./form-collection-view-control.vue";
24 |
--------------------------------------------------------------------------------
/src/components/renderer/link-button.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ label }}
4 |
5 |
6 |
7 |
26 |
31 |
--------------------------------------------------------------------------------
/src/components/renderer/new-form-multi-column.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
10 |
--------------------------------------------------------------------------------
/src/components/renderer/screen-renderer-error.vue:
--------------------------------------------------------------------------------
1 |
2 | - {{ error }}
Loading Data...
3 |
4 |
5 |
10 |
--------------------------------------------------------------------------------
/src/components/utils/index.js:
--------------------------------------------------------------------------------
1 | import DefaultLoadingSpinner from "./default-loading-spinner.vue";
2 | import MultipleUploadsCheckbox from "./multiple-uploads-checkbox.vue";
3 | import RequiredCheckbox from "./required-checkbox.vue";
4 |
5 | export { DefaultLoadingSpinner, MultipleUploadsCheckbox, RequiredCheckbox };
6 |
--------------------------------------------------------------------------------
/src/components/utils/multiple-uploads-checkbox.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ $t('Upload multiple files') }}
4 |
5 |
6 |
7 |
35 |
--------------------------------------------------------------------------------
/src/components/utils/required-checkbox.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ $t('Required') }}
4 |
5 |
6 |
7 |
35 |
--------------------------------------------------------------------------------
/src/customLogs.js:
--------------------------------------------------------------------------------
1 | export default class CustomLog {
2 | static logWithStyle(icon, type, name, status, message, color) {
3 | const baseColor = color === '255, 0, 0' ? 'red' : 'green';
4 | const style = `background-color: rgba(${color}, 0.1); color: ${baseColor}; padding: 2px 4px; border-radius: 3px;`;
5 | const transparentStyle = 'background-color: transparent';
6 |
7 | const logPrefix = `%c${icon} %c${type} "${name}" has`;
8 | const logStatus = `%c${status}`;
9 |
10 | if (status === 'RUN') {
11 | console.log(`${logPrefix} ${logStatus}`, style, transparentStyle, style);
12 | } else if (status === 'FAILED') {
13 | console.groupCollapsed(`${logPrefix} ${logStatus}`, style, transparentStyle, style);
14 | console.log(`%c${message}`, style);
15 | console.groupEnd();
16 | }
17 | }
18 |
19 | static success(type, name) {
20 | this.logWithStyle('\u2705', type, name, 'RUN', '', '0, 128, 0');
21 | }
22 |
23 | static error(type, name, message) {
24 | this.logWithStyle('\u274C', type, name, 'FAILED', message, '255, 0, 0');
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/form-input-mask-config.js:
--------------------------------------------------------------------------------
1 | import currencies from './currency.json';
2 |
3 | export default {
4 | defaultMask: {
5 | label: 'Data Format',
6 | options: [],
7 | config: {},
8 | },
9 | currency: {
10 | label: 'Currency Format',
11 | options: currencies,
12 | optionsLabel: 'code',
13 | config: currencies,
14 | },
15 | };
16 |
--------------------------------------------------------------------------------
/src/global-properties.js:
--------------------------------------------------------------------------------
1 | export const formTypes = {
2 | form: 'form',
3 | display: 'display',
4 | };
5 |
6 | export default [
7 | {
8 | inspector: [
9 | {
10 | type: 'FormInput',
11 | field: 'conditionalHide',
12 | config: {
13 | label: 'Visibility Rule',
14 | helper: 'This control is hidden until this expression is true',
15 | },
16 | },
17 | {
18 | type: 'DeviceVisibility',
19 | field: 'deviceVisibility',
20 | config: {
21 | label: 'Device Visibility',
22 | helper: 'This control is hidden until this expression is true',
23 | },
24 | },
25 | {
26 | type: 'FormInput',
27 | field: 'customFormatter',
28 | config: {
29 | label: 'Custom Format String',
30 | helper: 'Use the Mask Pattern format Date ##/##/####
SSN ###-##-####
Phone (###) ###-####', 31 | validation: '', 32 | }, 33 | }, 34 | { 35 | type: 'FormInput', 36 | field: 'customCssSelector', 37 | config: { 38 | label: 'CSS Selector Name', 39 | helper: 'Use this in your custom css rules', 40 | validation: 'regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]', 41 | }, 42 | }, 43 | { 44 | type: 'FormInput', 45 | field: 'ariaLabel', 46 | config: { 47 | label: 'Aria Label', 48 | helper: 'Attribute designed to help assistive technology (e.g. screen readers) attach a label', 49 | }, 50 | }, 51 | { 52 | type: 'FormInput', 53 | field: 'tabindex', 54 | config: { 55 | label: 'Tab Order', 56 | helper: 'Order in which a user will move focus from one control to another by pressing the Tab key', 57 | validation: 'regex: [0-9]*', 58 | }, 59 | }, 60 | { 61 | type: 'EncryptedConfig', 62 | field: 'encryptedConfig', 63 | config: { 64 | label: 'Encrypted', 65 | helper: '', 66 | }, 67 | }, 68 | ], 69 | }, 70 | ]; 71 | -------------------------------------------------------------------------------- /src/itemProcessingUtils.js: -------------------------------------------------------------------------------- 1 | /* istanbul ignore file */ 2 | import moment from 'moment-timezone'; 3 | 4 | function processFormItem(item) { 5 | if (item.component !== 'FormMultiColumn') { 6 | return item; 7 | } 8 | 9 | return item.items.flatMap(processFormItem); 10 | } 11 | 12 | export function getItemsFromConfig(config) { 13 | return config 14 | .flatMap(page => page.items) 15 | .flatMap(processFormItem); 16 | } 17 | 18 | export function getDefaultValueForItem(item) { 19 | let defaultValue = null; 20 | 21 | if (['FormInput', 'FormTextArea', 'FormText'].includes(item.component)) { 22 | defaultValue = ''; 23 | } 24 | 25 | if (item.component === 'FormCheckbox') { 26 | defaultValue = item.config.initiallyChecked || false; 27 | } 28 | 29 | if (item.component === 'FormRecordList') { 30 | defaultValue = []; 31 | } 32 | 33 | if (item.component === 'FormDatePicker') { 34 | defaultValue = generateNewDate(item.config.dataFormat); 35 | } 36 | 37 | if (item.component === 'FormButton' && item.config.event === 'script') { 38 | defaultValue = 0; 39 | } 40 | 41 | return defaultValue; 42 | } 43 | 44 | function generateNewDate(dataFormat) { 45 | let timezone = moment.tz.guess(); 46 | 47 | if (typeof window.ProcessMaker !== 'undefined' && window.ProcessMaker.user && window.ProcessMaker.user.timezone) { 48 | timezone = window.ProcessMaker.user.timezone; 49 | } 50 | 51 | const date = moment.tz(timezone); 52 | 53 | if (dataFormat !== 'datetime') { 54 | date.startOf('day'); 55 | } 56 | 57 | return date.toISOString(); 58 | } 59 | -------------------------------------------------------------------------------- /src/mixins/CurrentPageProperty.js: -------------------------------------------------------------------------------- 1 | export default { 2 | props: { 3 | currentPage: null, 4 | }, 5 | methods: { 6 | updateCurrentPage() { 7 | if (this.currentPage!==undefined && this.currentPage!==null) { 8 | this.setCurrentPage(this.currentPage); 9 | } 10 | }, 11 | }, 12 | watch: { 13 | currentPage() { 14 | this.updateCurrentPage(); 15 | }, 16 | }, 17 | mounted() { 18 | this.$nextTick(() => { 19 | this.updateCurrentPage(); 20 | }); 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /src/mixins/DeviceDetector.js: -------------------------------------------------------------------------------- 1 | export const MAX_MOBILE_WIDTH = 480; 2 | export const originalDevicePixelRatio = window.devicePixelRatio; 3 | export default { 4 | created() { 5 | window.addEventListener("resize", this.resizeHandler); 6 | }, 7 | destroyed() { 8 | window.removeEventListener("resize", this.resizeHandler); 9 | }, 10 | mounted() { 11 | this.$nextTick(() => { 12 | this.checkIfIsMobile(); 13 | }); 14 | }, 15 | methods: { 16 | resizeHandler() { 17 | this.checkIfIsMobile(); 18 | }, 19 | checkIfIsMobile() { 20 | const renderer = document.getElementById("vue-form-renderer"); 21 | const isModelerInspector = this.data && this.data.$type && this.data.$type.startsWith("bpmn:"); 22 | if (this.definition && !isModelerInspector) { 23 | this.definition.isMobile = 24 | renderer && 25 | renderer.offsetWidth <= MAX_MOBILE_WIDTH && 26 | originalDevicePixelRatio === window.devicePixelRatio; 27 | } 28 | } 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /src/mixins/HasColorProperty.js: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | methods: { 4 | elementCssClass(element) { 5 | const css = []; 6 | element.config.bgcolor ? css.push(element.config.bgcolor) : null; 7 | element.config.color ? css.push(element.config.color) : null; 8 | element.config.bgcolormodern ? css.push(element.config.bgcolormodern) : null; 9 | return css.join(' '); 10 | }, 11 | elementCssClassModern(element) { 12 | const css = []; 13 | element.config.bgcolormodern ? css.push(element.config.bgcolormodern) : null; 14 | return css.join(' '); 15 | } 16 | }, 17 | }; 18 | 19 | -------------------------------------------------------------------------------- /src/mixins/VisibilityRule.js: -------------------------------------------------------------------------------- 1 | import { Parser } from 'expr-eval'; 2 | 3 | export default { 4 | methods: { 5 | visibilityRuleIsVisible(rule, name, deviceVisibility) { 6 | const visibility = deviceVisibility || { showForDesktop: true, showForMobile: true, isMobile: false }; 7 | const visibleInDevice = 8 | (visibility.isMobile && visibility.showForMobile) || (!visibility.isMobile && visibility.showForDesktop); 9 | 10 | try { 11 | if (rule && rule.trim().length > 0) { 12 | const dataWithParent = this.getDataReference(); 13 | const isVisible = Boolean(Parser.evaluate(rule, dataWithParent)); 14 | 15 | return isVisible && visibleInDevice; 16 | } 17 | 18 | return visibleInDevice; 19 | } catch (e) { 20 | // empty. 21 | } 22 | 23 | return false; 24 | } 25 | } 26 | }; 27 | -------------------------------------------------------------------------------- /src/mixins/canOpenJsonFile.js: -------------------------------------------------------------------------------- 1 | import FileUpload from 'vue-upload-component'; 2 | 3 | const reader = new FileReader(); 4 | 5 | export default { 6 | components: { FileUpload }, 7 | data() { 8 | return { 9 | uploadedJson: null, 10 | jsonFiles: [], 11 | }; 12 | }, 13 | watch: { 14 | jsonFiles([fileObject]) { 15 | if (fileObject) { 16 | reader.readAsText(fileObject.file); 17 | } 18 | }, 19 | }, 20 | methods: { 21 | loadScreenPackage() { 22 | const json = JSON.parse(this.uploadedJson); 23 | let screen; 24 | if (json instanceof Array) { 25 | screen = { config:json, computed: [], customCSS: null }; 26 | } else if (json && json.screens instanceof Array) { 27 | screen = json.screens[0]; 28 | if (window.exampleScreens instanceof Array) { 29 | window.exampleScreens = json.screens; 30 | } 31 | } else if (json && json.screens && json.screens.config) { 32 | screen = json.screens; 33 | } 34 | this.$refs.builder.config.splice(0, Infinity, ...screen.config); 35 | this.$refs.builder.migrateConfig(); 36 | this.computed.splice(0, Infinity, ...screen.computed); 37 | this.customCSS = screen.customCSS; 38 | }, 39 | clearUpload() { 40 | this.uploadedJson = null; 41 | this.jsonFiles = []; 42 | }, 43 | setUploadedJson(event) { 44 | this.uploadedJson = event.target.result; 45 | }, 46 | }, 47 | created() { 48 | reader.onload = this.setUploadedJson; 49 | }, 50 | }; 51 | -------------------------------------------------------------------------------- /src/mixins/computedFields.js: -------------------------------------------------------------------------------- 1 | import { Parser } from "expr-eval"; 2 | import CustomLog from '../customLogs'; 3 | 4 | export default { 5 | methods: { 6 | evaluateExpression(expression, type) { 7 | let value = null; 8 | 9 | try { 10 | // Monitor if variable belongs to data (defined variables) or 11 | // vdata (external variables)in this way the event is not 12 | // executed again when the variable is update 13 | const data = this.getDataReference(null, () => { 14 | throw new Error( 15 | "You are not allowed to set properties from inside an expression" 16 | ); 17 | }); 18 | 19 | if (type === "expression") { 20 | value = Parser.evaluate(expression, data); 21 | } else { 22 | // Create a new function with the expression and bind the data context 23 | // eslint-disable-next-line no-new-func 24 | value = new Function(expression).bind(data); 25 | return { result: value(), error: null }; 26 | } 27 | 28 | if (value instanceof Date) { 29 | value = value.toISOString(); 30 | } 31 | return { result: value, error: null }; 32 | } catch (error) { 33 | // Catch any errors and return them 34 | return { result: null, error }; 35 | } 36 | }, 37 | /** 38 | * Logs an error message with a custom format. 39 | * @param {string} name - The name of the calculation. 40 | * @param {string} message - The error message. 41 | */ 42 | customErrorLog(name, message) { 43 | CustomLog.error('Calc', name, message); 44 | }, 45 | 46 | /** 47 | * Logs a success message with a custom format. 48 | * @param {string} name - The name of the calculation. 49 | */ 50 | customSuccessLog(name) { 51 | CustomLog.success('Calc', name); 52 | }, 53 | } 54 | }; 55 | -------------------------------------------------------------------------------- /src/mixins/extensions/AccordionContainer.js: -------------------------------------------------------------------------------- 1 | export default { 2 | mounted() { 3 | this.extensions.push({ 4 | onloadproperties({ componentName, properties, element }) { 5 | if (componentName === 'FormAccordion') { 6 | properties[':value'] = this.byRef(element.items); 7 | } 8 | }, 9 | }); 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /src/mixins/extensions/ComputedFields.js: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: { 3 | /** 4 | * Implements computed fields like this: 5 | * 6 | * calcProperty() { 7 | * let value = this.evaluateExpression('return formula();', 'javascript'); 8 | * value = this.addNonDefinedComputedAttributes(value); 9 | * this.setValueAsync("calcProperty", value, this.vdata); 10 | * } 11 | */ 12 | computedFields(screen, definition, logsEnabled = true) { 13 | // For each computed field defined 14 | definition.computed.forEach((computed) => { 15 | if (computed.byPass) { 16 | // If the computed field has bypass set to true, skip it 17 | return; 18 | } 19 | const formula = JSON.stringify(computed.formula); 20 | const type = JSON.stringify(computed.type); 21 | const name = JSON.stringify(computed.property); 22 | const safeDotName = this.safeDotName(computed.property); 23 | const code = ` 24 | const evaluatedExpression = this.evaluateExpression(${formula}, ${type}); 25 | // Handle errors if any 26 | if (evaluatedExpression.error) { 27 | if (${logsEnabled}) { 28 | this.customErrorLog(${name}, evaluatedExpression.error); 29 | } 30 | } else { 31 | // Add non-defined computed attributes 32 | const value = this.addNonDefinedComputedAttributes(evaluatedExpression.result); 33 | // Set the value 34 | this.setValue(${name}, value, this.vdata); 35 | 36 | // Log the successful calculation if logging is enabled 37 | if (${logsEnabled}) { 38 | this.customSuccessLog(${name}); 39 | } 40 | 41 | // Return the result 42 | return value; 43 | } 44 | `; 45 | this.addComputed(screen, safeDotName, code, ""); 46 | // required to enable reactivity of computed field 47 | this.addWatch(screen, safeDotName, ""); 48 | }); 49 | } 50 | }, 51 | mounted() { 52 | this.extensions.push({ 53 | onbuild({ screen, definition }) { 54 | if (definition.computed) { 55 | this.computedFields(screen, definition); 56 | } 57 | } 58 | }); 59 | } 60 | }; 61 | -------------------------------------------------------------------------------- /src/mixins/extensions/CustomCss.js: -------------------------------------------------------------------------------- 1 | export default { 2 | mounted() { 3 | this.extensions.push({ 4 | onloaditems({ element, wrapper }) { 5 | if (element.config.customCssSelector) { 6 | wrapper.setAttribute('selector', element.config.customCssSelector); 7 | } 8 | }, 9 | }); 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /src/mixins/extensions/DataManager.js: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: { 3 | dataFields(screen, definition) { 4 | const localVariables = this.variables.filter( 5 | (v) => !this.isComputedVariable(v.name, definition) 6 | ); 7 | localVariables.forEach((v) => { 8 | const { component } = v.element; 9 | const dataFormat = v.config.dataFormat || null; 10 | const safeDotName = this.safeDotName(v.name); 11 | this.addData( 12 | screen, 13 | safeDotName, 14 | ` 15 | this.getValue(${JSON.stringify(v.name)}, this.vdata) || 16 | this.getValue(${JSON.stringify(v.name)}, data) || 17 | this.initialValue( 18 | '${component}', 19 | '${dataFormat}', 20 | ${JSON.stringify(v.config)}) 21 | `, 22 | v.name 23 | ); 24 | this.addWatch( 25 | screen, 26 | `vdata.${v.name}`, 27 | `if (this.canUpdate("${safeDotName}")) { 28 | this.${safeDotName} = value; 29 | }` 30 | ); 31 | }); 32 | this.addProp(screen, "vdata", null); 33 | }, 34 | /** 35 | * Replace `.` by `_DOT_` in a variable name 36 | * @param {string} name 37 | * @returns {string} 38 | */ 39 | safeDotName(name) { 40 | // if starts with _parent returns as is 41 | if (name.startsWith("_parent")) { 42 | return name; 43 | } 44 | return name.replace(/\./g, "_DOT_"); 45 | } 46 | }, 47 | mounted() { 48 | this.extensions.push({ 49 | onbuild({ screen, definition }) { 50 | this.dataFields(screen, definition); 51 | } 52 | }); 53 | } 54 | }; 55 | -------------------------------------------------------------------------------- /src/mixins/extensions/InputText.js: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | mounted() { 4 | this.alias['FormInput'] = 'form-masked-input'; 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /src/mixins/extensions/MultiColumn.js: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: { 3 | loadMultiColumnProperties({ properties, element }) { 4 | properties.class = this.elementCssClass(element); 5 | properties.ref = 'container'; 6 | properties.selected = 'selected'; 7 | //properties['v-model'] = "element.items"; 8 | //@submit="submit" 9 | properties[':config'] = JSON.stringify(element.config); 10 | //:ancestor-screens="ancestorScreens" 11 | properties.name = element.config && element.config.name !== undefined ? element.config.name : null; 12 | //@pageNavigate="pageNavigate" 13 | //v-bind="element.config" 14 | //:is="element.component" 15 | properties[':form-config'] = '$parent && $parent.definition.config'; 16 | //:mode="mode" 17 | }, 18 | loadMultiColumnItems({ element, node, screen, definition, formIndex }) { 19 | element.items.forEach((col, index) => { 20 | const column = this.createComponent('div', { 21 | class: `col-sm-${element.config.options[index].content}`, 22 | }); 23 | this.loadItems(col, column, screen, definition, formIndex); 24 | node.appendChild(column); 25 | }); 26 | }, 27 | }, 28 | mounted() { 29 | this.extensions.push({ 30 | onloadproperties(params) { 31 | if (params.element.container && params.componentName === 'FormMultiColumn') { 32 | this.loadMultiColumnProperties(params); 33 | } 34 | }, 35 | onloaditems(params) { 36 | if (params.element.container && params.componentName === 'FormMultiColumn') { 37 | this.loadMultiColumnItems(params); 38 | } 39 | }, 40 | }); 41 | this.alias['FormMultiColumn'] = 'NewFormMultiColumn'; 42 | this.alias['MultiColumn'] = 'NewFormMultiColumn'; 43 | }, 44 | }; 45 | -------------------------------------------------------------------------------- /src/mixins/extensions/PageNavigate.js: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: { 3 | /* istanbul ignore next */ 4 | pageNavigate() {}, 5 | pageNavigationProperties({ properties }) { 6 | properties['@page-navigate'] = 'pageNavigate'; 7 | properties[':validate'] = '$v'; 8 | }, 9 | pageNavigationBuild(screen) { 10 | this.addData(screen, 'currentPage__', 'this._initialPage'); 11 | screen.methods.pageNavigate = function(page) { 12 | // Skip navigate button if page is not defined 13 | if (!this.$parent.definition.config[page]) { 14 | return; 15 | } 16 | this.$parent.$emit("updatePage"); 17 | this.currentPage__ = page; 18 | }; 19 | }, 20 | }, 21 | mounted() { 22 | this.extensions.push({ 23 | onloadproperties(params) { 24 | if (params.element.component === 'FormButton' && params.element.config.event === 'pageNavigate') { 25 | this.pageNavigationProperties(params); 26 | } 27 | }, 28 | onbuild({ screen }) { 29 | this.pageNavigationBuild(screen); 30 | }, 31 | }); 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /src/mixins/extensions/Submit.js: -------------------------------------------------------------------------------- 1 | export default { 2 | mounted() { 3 | this.extensions.push({ 4 | onloadproperties({ element, properties }) { 5 | if (element.component === 'FormButton' && element.config.event === 'submit') { 6 | properties[':validate'] = '$v'; 7 | } 8 | }, 9 | }); 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /src/mixins/extensions/VisibilityRule.js: -------------------------------------------------------------------------------- 1 | import VisibilityRule from '../VisibilityRule'; 2 | 3 | export default { 4 | mounted() { 5 | this.extensions.push({ 6 | onloaditems({ element, wrapper, definition }) { 7 | const visibility = element.config.deviceVisibility || { showForDesktop: true, showForMobile: true } 8 | const restrictDeviceVisibility = !visibility.showForDesktop || !visibility.showForMobile; 9 | 10 | 11 | element.visibleInDevice = 12 | (definition.isMobile && visibility.showForMobile) || 13 | (!definition.isMobile && visibility.showForDesktop); 14 | 15 | if (element.config.conditionalHide || restrictDeviceVisibility) { 16 | const deviceVisibility = JSON.stringify( { ...visibility, isMobile: definition.isMobile } ); 17 | wrapper.setAttribute( 18 | 'v-show', 19 | `visibilityRuleIsVisible(${JSON.stringify(element.config.conditionalHide)}, 20 | ${JSON.stringify(element.config.name)}, ${deviceVisibility})` 21 | ); 22 | } 23 | }, 24 | onbuild({ screen }) { 25 | screen.mixins.push(VisibilityRule); 26 | }, 27 | }); 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /src/mixins/extensions/Watchers.js: -------------------------------------------------------------------------------- 1 | import watchersMixin from '../../mixins/watchers'; 2 | 3 | export default { 4 | methods: { 5 | filterWatchers(watcher) { 6 | const inContext = !watcher.watching || this.variables.find(({name}) => name === watcher.watching); 7 | return inContext; 8 | }, 9 | addWatcherVariables(definition) { 10 | if (definition.watchers) { 11 | definition.watchers.filter(this.filterWatchers).forEach((watcher) => { 12 | const inContext = !watcher.watching || this.variables.find(({name}) => name === watcher.watching); 13 | if (inContext) { 14 | this.registerVariable(watcher.output_variable, {}); 15 | } 16 | }); 17 | } 18 | }, 19 | watchers(screen, definition) { 20 | if (definition.watchers) { 21 | screen.mixins.push(watchersMixin); 22 | definition.watchers.filter(this.filterWatchers).forEach((watcher) => { 23 | if (watcher?.byPass) { 24 | // If the watcher has bypass set to true, skip it 25 | return; 26 | } 27 | this.addMounted(screen, ` 28 | this.$nextTick(() => this.$watch('vdata.${watcher.watching}', (newValue) => { 29 | if (typeof newValue !== 'undefined') { 30 | this.queueWatcher(${JSON.stringify(watcher)}); 31 | } 32 | })); 33 | `); 34 | 35 | if (watcher.run_onload) { 36 | this.addMounted(screen, ` 37 | this.queueWatcher(${JSON.stringify(watcher)}); 38 | `); 39 | } 40 | }); 41 | } 42 | }, 43 | }, 44 | mounted() { 45 | this.extensions.push({ 46 | onbuild({ screen, definition }) { 47 | this.watchers(screen, definition); 48 | }, 49 | onparse({ definition }) { 50 | this.addWatcherVariables(definition); 51 | }, 52 | }); 53 | }, 54 | }; 55 | -------------------------------------------------------------------------------- /src/mixins/extensions/index.js: -------------------------------------------------------------------------------- 1 | const mixins = []; 2 | const modules = import.meta.glob("./*.js", { eager: true }); 3 | 4 | Object.entries(modules).forEach(([path, m]) => { 5 | mixins.push(m.default); 6 | }); 7 | 8 | export default mixins; 9 | -------------------------------------------------------------------------------- /src/mixins/getValidPath.js: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: { 3 | getValidPath(objectPath) { 4 | return this.objectPathHasError(objectPath) 5 | ? `["${objectPath}"]` 6 | : objectPath; 7 | }, 8 | objectPathHasError(objectPath) { 9 | try { 10 | this.$vueSet({}, objectPath); 11 | return false; 12 | } catch (error) { 13 | return true; 14 | } 15 | }, 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /src/mixins/index.js: -------------------------------------------------------------------------------- 1 | export { default as canOpenJsonFile } from "./canOpenJsonFile"; 2 | export { default as computedFields } from "./computedFields"; 3 | export { default as CurrentPageProperty } from "./CurrentPageProperty"; 4 | export { default as DataReference } from "./DataReference"; 5 | export { default as datatable } from "./datatable"; 6 | export { default as defaultValues } from "./defaultValues"; 7 | export { default as DeviceDetector } from "./DeviceDetector"; 8 | export { default as focusErrors } from "./focusErrors"; 9 | export { default as formWatchers } from "./formWatchers"; 10 | export { default as getValidPath } from "./getValidPath"; 11 | export { default as HasColorProperty } from "./HasColorProperty"; 12 | export { default as Json2Vue } from "./Json2Vue"; 13 | export { default as multiselectApi } from "./multiselectApi"; 14 | export { default as mustacheEvaluation } from "./mustacheEvaluation"; 15 | export { default as ScreenBase } from "./ScreenBase"; 16 | export { default as shouldElementBeVisible } from "./shouldElementBeVisible"; 17 | export { default as testing } from "./testing"; 18 | export { ValidationMsg, validators } from "./ValidationRules"; 19 | export { default as VisibilityRule } from "./VisibilityRule"; 20 | export { default as watchers } from "./watchers"; 21 | export { default as Clipboard } from "./Clipboard"; -------------------------------------------------------------------------------- /src/mixins/multiselectApi.js: -------------------------------------------------------------------------------- 1 | import { get } from 'lodash'; 2 | import debounce from 'lodash/debounce'; 3 | 4 | export default { 5 | props: { 6 | value: null, 7 | placeholder: String, 8 | trackBy: { 9 | type: String, 10 | default: 'id', 11 | }, 12 | label: { 13 | type: String, 14 | default: 'name', 15 | }, 16 | api: { 17 | type: String, 18 | default: 'process', 19 | }, 20 | multiple: { 21 | type: Boolean, 22 | default: false, 23 | }, 24 | storeId: { 25 | type: Boolean, 26 | default: true, 27 | }, 28 | }, 29 | data() { 30 | return { 31 | pmql: null, 32 | options: [], 33 | selectedOption: null, 34 | fields: null, 35 | }; 36 | }, 37 | watch: { 38 | value: { 39 | immediate: true, 40 | handler(value) { 41 | this.selectedOption = this.storeId 42 | ? this.options.find(option => get(option, this.trackBy) == value) 43 | : value; 44 | value && !this.selectedOption ? this.loadSelected(value) : null; 45 | }, 46 | }, 47 | }, 48 | methods: { 49 | change(value) { 50 | this.$emit('input', this.storeId ? get(value, this.trackBy) : value); 51 | }, 52 | loadOptions(filter) { 53 | const pmql = this.pmql; 54 | const fields = this.fields || undefined; 55 | window.ProcessMaker.apiClient 56 | .get(this.api, { params: { filter, pmql, fields } }) 57 | .then(response => { 58 | this.options = response.data.data || []; 59 | }); 60 | }, 61 | loadSelected(value) { 62 | window.ProcessMaker.apiClient 63 | .get(`${this.api}/${value}`) 64 | .then(response => { 65 | this.selectedOption = response.data; 66 | }); 67 | }, 68 | }, 69 | mounted() { 70 | this.loadOptions = debounce(this.loadOptions, 1000); 71 | }, 72 | }; 73 | -------------------------------------------------------------------------------- /src/mixins/mustacheEvaluation.js: -------------------------------------------------------------------------------- 1 | import _ from 'lodash'; 2 | import Mustache from 'mustache'; 3 | 4 | export default { 5 | methods: { 6 | mustache(expression, data) { 7 | const value = _.get(data, expression); 8 | try { 9 | return expression.indexOf('{{') > -1 ? Mustache.render(expression, data) : value; 10 | } catch (error) { 11 | return value; 12 | } 13 | }, 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /src/mixins/shouldElementBeVisible.js: -------------------------------------------------------------------------------- 1 | /* istanbul ignore file */ 2 | import { Parser } from 'expr-eval'; 3 | 4 | export default { 5 | methods: { 6 | shouldElementBeVisible(element) { 7 | const { conditionalHide } = element.config; 8 | 9 | if (!conditionalHide) { 10 | return true; 11 | } 12 | 13 | try { 14 | return !!Parser.evaluate(conditionalHide, this.transientData); 15 | } catch (error) { 16 | return false; 17 | } 18 | }, 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /src/mixins/testing.js: -------------------------------------------------------------------------------- 1 | import { get } from 'lodash'; 2 | 3 | // TESTING HELPERS 4 | let mounted; 5 | window.testing = { 6 | builder: null, 7 | onready: new Promise(resolve => mounted = resolve), 8 | addControlByType(type, target = null) { 9 | const control = this.builder.controls.find(control => control.component === type); 10 | this.builder.testingAddControl(control, target); 11 | }, 12 | addControlByLabel(label, target = null) { 13 | const control = this.builder.controls.find(control => control.label === label); 14 | this.builder.testingAddControl(control, target); 15 | }, 16 | removeControl(index) { 17 | this.builder.testingDeleteItem(index); 18 | }, 19 | showControlsTypes() { 20 | const types = this.builder.controls.map(control => control.component); 21 | // eslint-disable-next-line no-console 22 | console.log(types); 23 | }, 24 | showControlsLabels() { 25 | const labels = this.builder.controls.map(control => control.label); 26 | // eslint-disable-next-line no-console 27 | console.log(labels); 28 | }, 29 | }; 30 | 31 | export default { 32 | data() { 33 | window.testing.builder = this; 34 | return {}; 35 | }, 36 | methods: { 37 | testingAddControl(control, target) { 38 | const clone = this.cloneControl(control); 39 | if (!target) { 40 | this.config[this.currentPage].items.push(clone); 41 | } else { 42 | const items = get(this, target); 43 | items.push(clone); 44 | } 45 | this.updateState(); 46 | this.inspect(clone); 47 | }, 48 | testingDeleteItem(index) { 49 | this.config[this.currentPage].items.splice(index, 1); 50 | this.updateState(); 51 | }, 52 | }, 53 | mounted() { 54 | this.$nextTick(() => mounted()); 55 | }, 56 | }; 57 | -------------------------------------------------------------------------------- /src/store/modules/undoRedoModule.js: -------------------------------------------------------------------------------- 1 | const undoRedoModule = { 2 | namespaced: true, 3 | state() { 4 | return { 5 | stack: [], 6 | position: null 7 | }; 8 | }, 9 | getters: { 10 | canUndo(state) { 11 | return state.position > 0; 12 | }, 13 | canRedo(state) { 14 | return state.position < state.stack.length - 1; 15 | }, 16 | currentState(state, getters) { 17 | const currentState = state.stack[state.position]; 18 | 19 | if (getters.nextState && getters.nextState.deletedPage) { 20 | currentState.currentPage = getters.nextState.currentPage; 21 | } 22 | 23 | return currentState; 24 | }, 25 | nextState(state, getters) { 26 | if (getters.canRedo) { 27 | return state.stack[state.position + 1]; 28 | } 29 | 30 | return false; 31 | } 32 | }, 33 | mutations: { 34 | setPosition(state, position) { 35 | state.position = position; 36 | }, 37 | setState(state, newState) { 38 | state.stack.push(newState); 39 | } 40 | }, 41 | methods: { 42 | emitChanges() { 43 | window.ProcessMaker.EventBus.$emit("screen-change"); 44 | } 45 | }, 46 | actions: { 47 | pushState({ state, getters, commit }, newState) { 48 | if (newState.config === getters.currentState) { 49 | return; 50 | } 51 | 52 | commit("setState", newState); 53 | commit("setPosition", state.stack.length - 1); 54 | undoRedoModule.methods.emitChanges(); 55 | }, 56 | undo({ state, getters, commit }) { 57 | if (!getters.canUndo) { 58 | return; 59 | } 60 | 61 | commit("setPosition", state.position - 1); 62 | undoRedoModule.methods.emitChanges(); 63 | }, 64 | redo({ state, getters, commit }) { 65 | if (!getters.canRedo) { 66 | return; 67 | } 68 | 69 | commit("setPosition", state.position + 1); 70 | undoRedoModule.methods.emitChanges(); 71 | } 72 | } 73 | }; 74 | 75 | export default undoRedoModule; 76 | -------------------------------------------------------------------------------- /src/stories/ClipboardButton.stories.js: -------------------------------------------------------------------------------- 1 | import ClipboardButton from '../components/ClipboardButton.vue'; 2 | import { within, userEvent, expect } from "@storybook/test"; 3 | 4 | export default { 5 | title: 'Components/ClipboardButton', 6 | tags: ["autodocs"], 7 | component: ClipboardButton, 8 | argTypes: { 9 | isInClipboard: { control: 'boolean' }, 10 | }, 11 | }; 12 | 13 | const Template = (args) => ({ 14 | components: { ClipboardButton }, 15 | setup() { 16 | return { args }; 17 | }, 18 | template: '
Hello {{ name }}
", { parseSpecialCharSequences: false }); 14 | cy.get("[data-cy=mode-preview]").click(); 15 | cy.setPreviewDataInput('{"name":"World"}'); 16 | cy.get("[data-cy=preview-content]").should( 17 | "contain.html", 18 | "Hello World
" 19 | ); 20 | }); 21 | 22 | it("Rich text render HTML from a Variable", () => { 23 | cy.visit("/"); 24 | cy.openAcordeon("collapse-3"); 25 | cy.get("[data-cy=controls-FormHtmlViewer]").drag( 26 | "[data-cy=screen-drop-zone]", 27 | { position: "bottom" } 28 | ); 29 | cy.get("[data-cy=screen-element-container]").click(); 30 | cy.get("[data-cy=inspector-content]") 31 | .focus() 32 | .clear() 33 | .type("{{ name }}", { parseSpecialCharSequences: false }); 34 | cy.get("[data-cy=inspector-renderVarHtml]").click(); 35 | cy.get("[data-cy=mode-preview]").click(); 36 | cy.setPreviewDataInput('{"name":"Hello World
"}'); 37 | cy.get("[data-cy=preview-content]").should( 38 | "contain.html", 39 | "Hello World
" 40 | ); 41 | }); 42 | }); 43 | -------------------------------------------------------------------------------- /tests/e2e/specs/ScreenBuilder.spec.js: -------------------------------------------------------------------------------- 1 | describe("ScreenBuilder", () => { 2 | it("Visits the app root url and renders form builder", () => { 3 | cy.visit("/"); 4 | cy.contains("Place your controls here.").should("be.visible"); 5 | }); 6 | }); 7 | -------------------------------------------------------------------------------- /tests/e2e/specs/ScreenWarnings.spec.js: -------------------------------------------------------------------------------- 1 | describe("Screen Warnings", () => { 2 | beforeEach(() => { 3 | cy.visit("/"); 4 | }); 5 | 6 | it("Large screen warning", () => { 7 | cy.loadFromJson("large_screen_warning.json", 1); 8 | 9 | cy.get('[data-cy="open-console"] .badge-warning').should( 10 | "contain.text", 11 | "1" 12 | ); 13 | cy.get('[data-cy="open-console"]').click(); 14 | cy.get('[data-cy="validation-panel"]').should( 15 | "contain.text", 16 | "We recommend using fewer than 25 form elements in your screen for optimal performance." 17 | ); 18 | }); 19 | 20 | it("Use script warning", () => { 21 | cy.openAcordeon("collapse-2"); 22 | cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", { 23 | position: "bottom" 24 | }); 25 | cy.get('[data-cy="topbar-watchers"]').click(); 26 | cy.get('[data-cy="watchers-add-watcher"]').click(); 27 | cy.get('[data-cy="watchers-watcher-name"]').type("test"); 28 | cy.get('[data-cy="watchers-watcher-variable"]').selectOption( 29 | "form_input_1" 30 | ); 31 | cy.get('[data-cy="watchers-accordion-source"]').click(); 32 | cy.get("#watcherSource").should( 33 | "not.contain.text", 34 | "Using watchers with Scripts can slow the performance of your screen" 35 | ); 36 | cy.get('[data-cy="watchers-watcher-source"]').selectOption("Test Script"); 37 | cy.get("#watcherSource").should( 38 | "contain.text", 39 | "Using watchers with Scripts can slow the performance of your screen" 40 | ); 41 | cy.get('[data-cy="watchers-button-save"]').click(); 42 | cy.get('[data-cy="watchers-modal"] .close').click(); 43 | cy.get('[data-cy="open-console"] .badge-warning').should( 44 | "contain.text", 45 | "1" 46 | ); 47 | cy.get('[data-cy="open-console"]').click(); 48 | cy.get('[data-cy="validation-panel"]').should( 49 | "contain.text", 50 | "Using watchers with Scripts can slow the performance of your screen." 51 | ); 52 | }); 53 | }); 54 | -------------------------------------------------------------------------------- /tests/e2e/specs/SelectListDefaultValues.spec.js: -------------------------------------------------------------------------------- 1 | describe("Select List default Value", () => { 2 | beforeEach(() => { 3 | cy.visit("/"); 4 | }); 5 | 6 | it("Verify default value not existing in option list set value to null", () => { 7 | cy.loadFromJson("select_list_default_value.json", 0); 8 | 9 | // Configure a non existing default value in option list 10 | cy.get("[data-cy=screen-element-container]").click(); 11 | cy.get("[data-cy=accordion-Advanced]").click(); 12 | cy.get("[data-cy=inspector-defaultValue-basicValue]").clear().type("c"); 13 | 14 | cy.get("[data-cy=mode-preview]").click(); 15 | 16 | // Assert value was configured in null 17 | cy.assertPreviewData({ 18 | form_select_list_1: null 19 | }); 20 | 21 | // Select a valid option 22 | cy.get('[data-cy="screen-field-form_select_list_1"]').selectOption("a"); 23 | 24 | // Assert value is set correctly 25 | cy.assertPreviewData({ 26 | form_select_list_1: "a" 27 | }); 28 | 29 | cy.get("[data-cy=mode-editor]").click(); 30 | 31 | // Configure an existing default value in option list 32 | cy.get("[data-cy=screen-element-container]").click(); 33 | cy.get("[data-cy=accordion-Advanced]").click(); 34 | cy.get("[data-cy=inspector-defaultValue-basicValue]").clear().type("b"); 35 | 36 | cy.get("[data-cy=mode-preview]").click(); 37 | 38 | // Assert default valid value is set correctly 39 | cy.assertPreviewData({ 40 | form_select_list_1: "b" 41 | }); 42 | }); 43 | }); 44 | -------------------------------------------------------------------------------- /tests/e2e/specs/SingleSelectWithInvalidValue.spec.js: -------------------------------------------------------------------------------- 1 | describe("single select with invalid initial value", () => { 2 | beforeEach(() => { 3 | cy.visit("/"); 4 | }); 5 | 6 | it("Single select radio with array value without user interaction keep its value", () => { 7 | cy.loadFromJson("single_select_with_invalid_value.json", 0); 8 | 9 | // init screen data 10 | cy.setPreviewDataInput({ person: [] }); 11 | cy.get("[data-cy=mode-preview]").click(); 12 | 13 | // Check the data of the screen 14 | cy.assertPreviewData({ 15 | person: [] 16 | }); 17 | }); 18 | 19 | it("Single select radio with array value after user interaction change to the selected option", () => { 20 | cy.loadFromJson("single_select_with_invalid_value.json", 0); 21 | 22 | // init screen data 23 | cy.setPreviewDataInput({ person: [] }); 24 | cy.get("[data-cy=mode-preview]").click(); 25 | 26 | cy.get("[data-cy=preview-content] [name=person]").eq(0).click(); 27 | cy.get("[data-cy=preview-content] [name=person]").eq(1).click(); 28 | cy.get("[data-cy=preview-content] [name=person]").eq(0).click(); 29 | 30 | // Check the data of the screen 31 | cy.assertPreviewData({ 32 | person: { 33 | content: "one", 34 | value: "one" 35 | } 36 | }); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /tests/e2e/specs/TCP4-4444VerifyAddingMultipleContentToClipboard.spec.js: -------------------------------------------------------------------------------- 1 | describe("Verify Adding Multiple Content To The Clipboard", () => { 2 | beforeEach(() => { 3 | cy.visit("/"); 4 | cy.showValidationOnLoad(); 5 | cy.clearLocalStorage(); 6 | }); 7 | 8 | it("TCP4-4446: Content selected should remain flagged as selected for pasting", () => { 9 | // Step 1: Load the initial JSON data and check screen content 10 | cy.loadFromJson("TCP4-4446.json", 0); 11 | cy.get("[data-cy=screen-drop-zone]").should("not.contain.text", "Place your controls here."); 12 | 13 | cy.get(':nth-child(1) > [data-cy="screen-element-container"]').click({ force: true }); 14 | cy.get('[data-cy="addToClipboard"]').should("be.visible").click(); 15 | cy.get('[data-cy="addToClipboard"]').should("not.exist"); 16 | 17 | // Step 2: Load a new screen and repeat the process for adding to clipboard 18 | cy.loadFromJson("screen2TCP4-4446.json", 0); 19 | cy.wait(100); 20 | cy.get(':nth-child(1) > [data-cy="screen-element-container"]').click({ force: true }); 21 | cy.get('[data-cy="addToClipboard"]').should("be.visible").click(); 22 | cy.get('[data-cy="addToClipboard"]').should("not.exist"); 23 | 24 | // Step 3: Reload the first screen and verify that the element is flagged as selected 25 | cy.loadFromJson("TCP4-4446.json", 0); 26 | cy.wait(100); 27 | cy.get(':nth-child(1) > [data-cy="screen-element-container"]').click({ force: true }); 28 | cy.get('[data-cy="addToClipboard"]').should("not.exist"); 29 | 30 | // Step 4: Reload the second screen and verify clipboard status remains unchanged 31 | cy.loadFromJson("screen2TCP4-4446.json", 0); 32 | cy.wait(100); 33 | cy.get(':nth-child(1) > [data-cy="screen-element-container"]').click({ force: true }); 34 | cy.get('[data-cy="addToClipboard"]').should("not.exist"); 35 | }); 36 | }); 37 | -------------------------------------------------------------------------------- /tests/e2e/specs/TCP4-4452VerifyReloadPageClipboard.spec.js: -------------------------------------------------------------------------------- 1 | describe("TCP4-4452 Verify reload page, remove button still present in the copied elements", () => { 2 | beforeEach(() => { 3 | cy.visit("/"); 4 | cy.showValidationOnLoad(); 5 | cy.clearLocalStorage(); 6 | }); 7 | 8 | it("Verify that after reloading the page, all controls within each page are displayed with (-) button", () => { 9 | // Step 1: Load the initial JSON data and check screen content 10 | cy.loadFromJson("TCP4-4452.json", 0); 11 | cy.get(':nth-child(1) > :nth-child(1) > :nth-child(1) > .m-2 > .form-group').click({ force: true }); 12 | cy.get('[data-cy="addToClipboard"]').should("be.visible").click(); 13 | cy.get('[data-cy="addToClipboard"]').should("not.exist"); 14 | 15 | cy.get(':nth-child(1) > :nth-child(2) > :nth-child(1) > .m-2').click({ force: true }); 16 | cy.get('[data-cy="addToClipboard"]').should("be.visible").click(); 17 | cy.get('[data-cy="addToClipboard"]').should("not.exist"); 18 | 19 | 20 | cy.get('#form_record_list_1 > .m-2').click({ force: true }); 21 | cy.get('[data-cy="addToClipboard"]').should("be.visible").click({ force: true }); 22 | cy.get('[data-cy="addToClipboard"]').should("not.exist"); 23 | // reload page 24 | cy.loadFromJson("TCP4-4452.json", 0); 25 | cy.get(':nth-child(1) > :nth-child(1) > :nth-child(1) > .m-2 > .form-group').click({ force: true }); 26 | cy.get('[data-cy="addToClipboard"]').should("not.exist"); 27 | 28 | cy.get(':nth-child(1) > :nth-child(2) > :nth-child(1) > .m-2').click({ force: true }); 29 | cy.get('[data-cy="addToClipboard"]').should("not.exist"); 30 | 31 | cy.get('#form_record_list_1 > .m-2').click({ force: true }); 32 | cy.get('[data-cy="addToClipboard"]').should("not.exist"); 33 | }); 34 | }); 35 | -------------------------------------------------------------------------------- /tests/e2e/specs/TCP4-4458ClearClipboard.spec.js: -------------------------------------------------------------------------------- 1 | describe("TCP4-4458 Verify clear all components in clipboard", () => { 2 | beforeEach(() => { 3 | // Step 1: Navigate to the homepage, show validation, and clear local storage 4 | cy.visit("/"); 5 | cy.showValidationOnLoad(); 6 | cy.clearLocalStorage(); 7 | }); 8 | 9 | it("Verify that after clicking Clear All, all controls are deleted.", () => { 10 | // Step 2: Load the JSON data (TCP4-4454) 11 | cy.loadFromJson("TCP4-4454.json", 0); 12 | 13 | // Step 3: Function to add a screen element to the clipboard 14 | const addToClipboard = (index) => { 15 | // Select screen element based on index, click it, then click the add to clipboard button 16 | cy.get(`:nth-child(${index}) > [data-cy="screen-element-container"]`).click({ force: true }); 17 | cy.get('[data-cy="addToClipboard"]').should("be.visible").click(); 18 | cy.get('[data-cy="addToClipboard"]').should("not.exist"); 19 | }; 20 | 21 | // Step 4: Loop through elements (1-11) and add each to the clipboard 22 | for (let i = 1; i <= 11; i++) { 23 | addToClipboard(i); 24 | } 25 | 26 | // Step 5: Open the clipboard menu 27 | cy.get("[data-test=page-dropdown]").click(); 28 | cy.get("[data-test=clipboard]").should("exist").click({ force: true }); 29 | 30 | // Step 6: Verify that the Clipboard tab is active 31 | cy.get('a[role="tab"]') 32 | .contains('Clipboard') 33 | .should('have.class', 'active') 34 | .and('be.visible'); 35 | 36 | // Step 7: Click 'Clear All' button in the clipboard 37 | cy.get('[data-test="tab-content"] > .btn-link').click(); 38 | 39 | // Step 8: Confirm the action to clear the clipboard 40 | cy.contains('button', 'Confirm').click(); 41 | 42 | // Step 9: Verify that all clipboard components have been deleted 43 | cy.get('[data-cy="editor-content"]').children().should('have.length', 0); 44 | }); 45 | }); 46 | -------------------------------------------------------------------------------- /tests/e2e/specs/TCP4-4462VerifyAddComponentsToClipboard.spec.js: -------------------------------------------------------------------------------- 1 | describe("TCP4-4462 Verify clear all components in clipboard", () => { 2 | beforeEach(() => { 3 | // Step 1: Navigate to the homepage, show validation, and clear local storage 4 | cy.visit("/"); 5 | cy.showValidationOnLoad(); 6 | cy.clearLocalStorage(); 7 | }); 8 | 9 | it("Verify that after clicking Clear All, all controls are deleted.", () => { 10 | 11 | 12 | cy.get("[data-test=page-dropdown]").click(); 13 | cy.get("[data-test=clipboard]").should("exist").click({ force: true }); 14 | 15 | cy.get('a[role="tab"]') 16 | .contains('Clipboard') 17 | .should('have.class', 'active') 18 | .and('be.visible'); 19 | 20 | cy.get("[data-cy=controls-FormSelectList]").drag("[data-cy=editor-content]", { position: "top", force: true }); 21 | cy.get("[data-cy=controls-FormButton]").drag("[data-cy=screen-element-container]", { position: "top", force: true }); 22 | cy.get("[data-cy=controls-FormTextArea]").drag("[data-cy=screen-element-container]", { position: "top", force: true }); 23 | cy.get("[data-cy=controls-FormDatePicker]").drag("[data-cy=screen-element-container]", { position: "top", force: true }); 24 | cy.get("[data-cy=controls-FormCheckbox]").drag("[data-cy=screen-element-container]", { position: "top", force: true }); 25 | 26 | cy.get('[data-cy="screen-element-container"]') 27 | .children() 28 | .should('have.length', 5); 29 | cy.visit("/"); 30 | cy.openAcordeonByLabel("Content Fields"); 31 | 32 | cy.get("[data-cy=controls-FormHtmlViewer]").drag("[data-cy=screen-drop-zone]", { position: "bottom" }); 33 | cy.get("[data-cy=controls-FormImage]").drag("[data-cy=screen-element-container]", { position: "top" }); 34 | cy.get("[data-cy=controls-FormRecordList]").drag("[data-cy=screen-element-container]", { position: "top" }); 35 | cy.get("[data-cy=controls-FormLoop]").drag("[data-cy=screen-element-container]", { position: "top" }); 36 | cy.get("[data-cy=controls-FormNestedScreen]").drag("[data-cy=screen-element-container]", { position: "top" }); 37 | cy.get("[data-cy=controls-FormMultiColumn]").drag("[data-cy=screen-element-container]", { position: "top" }); 38 | cy.get('[data-cy="screen-element-container"]') 39 | .children() 40 | .should('have.length', 6); 41 | 42 | }); 43 | }); 44 | -------------------------------------------------------------------------------- /tests/e2e/specs/TestValidationWithNestedSideEffects.spec.js: -------------------------------------------------------------------------------- 1 | describe("test validation with nested side effects", () => { 2 | beforeEach(() => { 3 | cy.visit("/"); 4 | cy.showValidationOnLoad(); 5 | }); 6 | 7 | it("Verify test validation with nested side effects", () => { 8 | cy.loadFromJson("Test Validation with Nested side effects.json", 1); 9 | // click on preview 10 | cy.get("[data-cy=mode-preview]").click(); 11 | // click on New Submit button 12 | cy.get("[data-cy=preview-content] button[aria-label='Submit']").click(); 13 | // In editor: ensure standard required field displays error while readonly required field does not 14 | cy.get("[data-cy=preview-content] [name='form_input_2']") 15 | .parent() 16 | .find(".invalid-feedback") 17 | .should("be.visible"); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /tests/e2e/specs/UndoRedo.spec.js: -------------------------------------------------------------------------------- 1 | describe("Undo and Redo", () => { 2 | it("Can Undo", () => { 3 | cy.visit("/"); 4 | cy.openAcordeon("collapse-2"); 5 | cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", { 6 | position: "bottom" 7 | }); 8 | cy.get("[data-cy=toolbar-undo]").click(); 9 | cy.get("[data-cy=screen-drop-zone]").should( 10 | "contain.text", 11 | "Place your controls here." 12 | ); 13 | }); 14 | 15 | it("Can Redo", () => { 16 | cy.visit("/"); 17 | cy.openAcordeon("collapse-2"); 18 | cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", { 19 | position: "bottom" 20 | }); 21 | cy.get("[data-cy=toolbar-undo]").click(); 22 | cy.get("[data-cy=toolbar-redo]").click(); 23 | // Check that New Input control was restored 24 | cy.get("[data-cy=screen-element-container]").should( 25 | "contain.text", 26 | "New Input" 27 | ); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /tests/e2e/specs/ValidationRulesNameObject.js: -------------------------------------------------------------------------------- 1 | describe("Validation Rules", () => { 2 | beforeEach(() => { 3 | cy.visit("/"); 4 | cy.showValidationOnLoad(); 5 | }); 6 | 7 | it("Variable name object and rules", () => { 8 | cy.loadFromJson("validation_rules_name_object.json", 0); 9 | cy.get("[data-cy=mode-preview]").click(); 10 | 11 | // ACCEPTED INPUT 12 | cy.get( 13 | '[data-cy=preview-content] [data-cy="screen-field-form_input_2.res"]' 14 | ) 15 | .parent() 16 | .should("contain.text", "Field is required"); 17 | cy.get("[data-cy=preview-content] [name=form_input_1]").type("12"); 18 | cy.get( 19 | '[data-cy=preview-content] [data-cy="screen-field-form_input_2.res"]' 20 | ) 21 | .parent() 22 | .should("not.contain.text", "Field is required"); 23 | 24 | // ACCEPTED INPUT 25 | cy.get('[data-cy=preview-content] [data-cy="screen-field-form_input_21"]') 26 | .parent() 27 | .should("contain.text", "Field is required"); 28 | cy.get("[data-cy=preview-content] [name=form_input_11]").type("13"); 29 | cy.get('[data-cy=preview-content] [data-cy="screen-field-form_input_21"]') 30 | .parent() 31 | .should("not.contain.text", "Field is required"); 32 | 33 | // REJECTED INPUT 34 | cy.get( 35 | '[data-cy=preview-content] [data-cy="screen-field-form_input_4.res"]' 36 | ) 37 | .parent() 38 | .should("not.contain.text", "Must be same as form_input_3"); 39 | cy.get("[data-cy=preview-content] [name=form_input_3]").type("13"); 40 | cy.get( 41 | '[data-cy=preview-content] [data-cy="screen-field-form_input_4.res"]' 42 | ) 43 | .parent() 44 | .should("contain.text", "Must be same as form_input_3"); 45 | 46 | // REJECTED INPUT 47 | cy.get( 48 | '[data-cy=preview-content] [data-cy="screen-field-form_input_6.res"]' 49 | ) 50 | .parent() 51 | .should("not.contain.text", "Field is required"); 52 | cy.get("[data-cy=preview-content] [name=form_input_5]").type("14"); 53 | cy.get( 54 | '[data-cy=preview-content] [data-cy="screen-field-form_input_6.res"]' 55 | ) 56 | .parent() 57 | .should("contain.text", "Field is required"); 58 | }); 59 | }); 60 | -------------------------------------------------------------------------------- /tests/e2e/specs/ValidationShownOnSubmit.spec.js: -------------------------------------------------------------------------------- 1 | import moment from "moment"; 2 | 3 | describe("Validation Rules", () => { 4 | beforeEach(() => { 5 | cy.visit("/"); 6 | }); 7 | 8 | it("Invalid default values", () => { 9 | cy.loadFromJson("validation_rules.json", 0); 10 | cy.get("[data-cy=mode-preview]").click(); 11 | 12 | cy.shouldHaveValidationErrors("screen-field-form_checkbox_1"); 13 | cy.shouldHaveValidationErrors("screen-field-form_input_1"); 14 | cy.shouldHaveValidationErrors("screen-field-form_input_2"); 15 | cy.shouldNotHaveValidationErrors("screen-field-form_input_3"); 16 | cy.shouldHaveValidationErrors("screen-field-form_input_4"); 17 | cy.shouldNotHaveValidationErrors("screen-field-form_input_5"); 18 | cy.shouldNotHaveValidationErrors("screen-field-form_input_6"); 19 | 20 | cy.get("[data-cy=preview-content] .page button").click(); 21 | 22 | cy.shouldHaveValidationErrors("screen-field-form_input_1"); 23 | 24 | cy.get('[data-cy=preview-content] [data-cy="screen-field-form_input_1"]') 25 | .clear() 26 | .type("on"); 27 | 28 | cy.shouldHaveValidationErrors("screen-field-form_checkbox_1"); 29 | cy.shouldNotHaveValidationErrors("screen-field-form_input_1"); 30 | cy.shouldHaveValidationErrors("screen-field-form_input_2"); 31 | cy.shouldNotHaveValidationErrors("screen-field-form_input_3"); 32 | cy.shouldHaveValidationErrors("screen-field-form_input_4"); 33 | cy.shouldNotHaveValidationErrors("screen-field-form_input_5"); 34 | cy.shouldNotHaveValidationErrors("screen-field-form_input_6"); 35 | }); 36 | }); 37 | -------------------------------------------------------------------------------- /tests/e2e/specs/VariableNames.js: -------------------------------------------------------------------------------- 1 | describe("Default values", () => { 2 | it("Variable names with dots 2 levels", () => { 3 | cy.visit("/"); 4 | cy.openAcordeon("collapse-2"); 5 | cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", { 6 | position: "bottom" 7 | }); 8 | cy.get("[data-cy=screen-element-container]").click(); 9 | cy.get("[data-cy=inspector-name]").clear().type("user.address"); 10 | cy.get("[data-cy=mode-preview]").click(); 11 | cy.assertPreviewData({ 12 | user: { 13 | address: "" 14 | } 15 | }); 16 | }); 17 | it("Variable names with dots 3 levels", () => { 18 | cy.visit("/"); 19 | cy.openAcordeon("collapse-2"); 20 | cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", { 21 | position: "bottom" 22 | }); 23 | cy.get("[data-cy=screen-element-container]").click(); 24 | cy.get("[data-cy=inspector-name]").clear().type("user.address.city"); 25 | cy.get("[data-cy=mode-preview]").click(); 26 | cy.get('[data-cy=preview-content] [name="user.address.city"]').type( 27 | "La Paz" 28 | ); 29 | cy.assertPreviewData({ 30 | user: { 31 | address: { 32 | city: "La Paz" 33 | } 34 | } 35 | }); 36 | }); 37 | it("Variable names with dots and one attribute same as the name", () => { 38 | cy.visit("/"); 39 | cy.openAcordeon("collapse-2"); 40 | cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", { 41 | position: "bottom" 42 | }); 43 | cy.get("[data-cy=screen-element-container]").click(); 44 | cy.get("[data-cy=inspector-name]").clear().type("address.address.city"); 45 | cy.get("[data-cy=mode-preview]").click(); 46 | cy.get('[data-cy=preview-content] [name="address.address.city"]').type( 47 | "La Paz" 48 | ); 49 | cy.assertPreviewData({ 50 | address: { 51 | address: { 52 | city: "La Paz" 53 | } 54 | } 55 | }); 56 | }); 57 | }); 58 | -------------------------------------------------------------------------------- /tests/e2e/specs/VisibilityRule.spec.js: -------------------------------------------------------------------------------- 1 | describe("Default values", () => { 2 | it("Check visible", () => { 3 | cy.visit("/"); 4 | cy.setPreviewDataInput({ name: "world" }); 5 | cy.openAcordeon("collapse-2"); 6 | cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", { 7 | position: "bottom" 8 | }); 9 | cy.get("[data-cy=screen-element-container]").click(); 10 | cy.get("[data-cy=accordion-Advanced]").click(); 11 | cy.get("[data-cy=inspector-conditionalHide]").clear().type("name"); 12 | cy.get("[data-cy=mode-preview]").click(); 13 | cy.get("[data-cy=preview-content] [name=form_input_1]").should( 14 | "be.visible" 15 | ); 16 | }); 17 | it("Check hidden", () => { 18 | cy.visit("/"); 19 | cy.setPreviewDataInput({ name: "" }); 20 | cy.openAcordeon("collapse-2"); 21 | cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", { 22 | position: "bottom" 23 | }); 24 | cy.get("[data-cy=screen-element-container]").click(); 25 | cy.get("[data-cy=accordion-Advanced]").click(); 26 | cy.get("[data-cy=inspector-conditionalHide]").clear().type("name"); 27 | cy.get("[data-cy=mode-preview]").click(); 28 | cy.get("[data-cy=preview-content] [name=form_input_1]").should( 29 | "not.be.visible" 30 | ); 31 | }); 32 | it("Check dynamic visibility rule", () => { 33 | cy.visit("/"); 34 | cy.setPreviewDataInput({ name: "" }); 35 | cy.openAcordeon("collapse-2"); 36 | cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", { 37 | position: "bottom" 38 | }); 39 | // Add a second input field 40 | cy.get("[data-cy=controls-FormInput]").drag( 41 | "[data-cy=screen-element-container]", 42 | { position: "bottom" } 43 | ); 44 | cy.get("[data-cy=screen-element-container]").first().click(); 45 | cy.get("[data-cy=accordion-Advanced]").click(); 46 | cy.get("[data-cy=inspector-conditionalHide]").clear().type("form_input_2"); 47 | cy.get("[data-cy=mode-preview]").click(); 48 | cy.get("[data-cy=preview-content] [name=form_input_1]").should( 49 | "not.be.visible" 50 | ); 51 | cy.get("[data-cy=preview-content] [name=form_input_2]") 52 | .clear() 53 | .type("show next"); 54 | cy.get("[data-cy=preview-content] [name=form_input_1]").should( 55 | "be.visible" 56 | ); 57 | cy.get("[data-cy=preview-content] [name=form_input_1]") 58 | .clear() 59 | .type("visible"); 60 | }); 61 | }); 62 | -------------------------------------------------------------------------------- /tests/e2e/specs/WebEntryEndEventRedirect.spec.js: -------------------------------------------------------------------------------- 1 | import SingleScreen from "../fixtures/single_line_input.json"; 2 | 3 | function initializeTaskAndScreenIntercepts(method, url, response) { 4 | cy.intercept(method, url.replace(",screen,", ",").replace(",nested,", ","), response).as('getTask'); 5 | cy.intercept(method, url.replace(/\?.*$/, "/screen?include=screen,nested"), response.screen).as('getScreen'); 6 | } 7 | 8 | describe("End Event Redirect (Process completed)", () => { 9 | beforeEach(() => { 10 | // Reset the intercepts and the state before each test 11 | cy.visit("/?scenario=TaskWebEntry", {}); 12 | }); 13 | 14 | it("Element destination type is summaryScreen and process was opened from webEntry", () => { 15 | const taskUrl = "http://localhost:5173/api/1.1/tasks/1?include=data,user,draft,requestor,processRequest,component,screen,requestData,loopContext,bpmnTagName,interstitial,definition,nested,userRequestPermission,elementDestination"; 16 | 17 | initializeTaskAndScreenIntercepts("GET", taskUrl, { 18 | id: 1, 19 | advanceStatus: "open", 20 | component: "task-screen", 21 | allow_interstitial: false, 22 | elementDestination: { 23 | type: "taskList", 24 | value: "http://localhost:5173/tasks", 25 | }, 26 | user: { 27 | id: 1, 28 | }, 29 | screen: SingleScreen.screens[0], 30 | process_request: { 31 | id: 1, 32 | status: "ACTIVE", 33 | }, 34 | }); 35 | 36 | // Interact with the UI 37 | cy.get('.form-group > .btn').click(); 38 | 39 | // Emit socket event and verify the URL change 40 | cy.socketEventNext("ProcessMaker\\Events\\RedirectTo", { 41 | params: [ 42 | { 43 | endEventDestination: { 44 | type: "summaryScreen", 45 | value: null, 46 | }, 47 | }, 48 | ], 49 | method: "processCompletedRedirect", 50 | }) 51 | cy.wait(1000); 52 | // This code will execute after the socket event is finished 53 | cy.url().should("eq", "http://localhost:5173/?scenario=TaskWebEntry"); 54 | 55 | }); 56 | }); 57 | -------------------------------------------------------------------------------- /tests/e2e/specs/WrongConfigurationErrors.js: -------------------------------------------------------------------------------- 1 | describe.skip("Wrong Configuration Errors", () => { 2 | it("Screen with rendering problem in a component should show a warning", () => { 3 | cy.visit("/", { 4 | onBeforeLoad(win) { 5 | cy.stub(win.console, "warn").as("consoleWarn"); 6 | cy.stub(win.console, "error").as("consoleError"); 7 | } 8 | }); 9 | cy.openAcordeon("collapse-2"); 10 | cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", { 11 | position: "bottom" 12 | }); 13 | cy.get("[data-cy=screen-element-container]").click(); 14 | cy.get("[data-cy=inspector-name]").clear().type("s.1"); 15 | cy.get("[data-cy=mode-preview]").click(); 16 | cy.get("[data-cy=mode-editor]").click(); 17 | cy.get("@consoleWarn").should( 18 | "be.calledWith", 19 | "There was a problem rendering the screen" 20 | ); 21 | }); 22 | 23 | it("Screen with rendering problem in a component should not show a warning after the problematic component is deleted", () => { 24 | cy.visit("/", { 25 | onBeforeLoad(win) { 26 | cy.stub(win.console, "warn").as("consoleWarn"); 27 | cy.stub(win.console, "error").as("consoleError"); 28 | } 29 | }); 30 | cy.openAcordeon("collapse-2"); 31 | cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", { 32 | position: "bottom" 33 | }); 34 | cy.get("[data-cy=screen-element-container]").click(); 35 | cy.get("[data-cy=inspector-name]").clear().type("s.1"); 36 | cy.get("[data-cy=mode-preview]").click(); 37 | cy.get("[data-cy=mode-editor]").click(); 38 | cy.get("@consoleWarn").should( 39 | "be.calledWith", 40 | "There was a problem rendering the screen" 41 | ); 42 | cy.get("[data-cy=screen-element-container] .ml-auto > .btn-danger").click(); 43 | cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", { 44 | position: "bottom" 45 | }); 46 | cy.get("[data-cy=mode-preview]").click(); 47 | cy.get("[data-cy=mode-editor]").click(); 48 | cy.get("@consoleError").should("not.to.be.called"); 49 | cy.get("@consoleWarn").should("not.to.be.calledTwice"); 50 | }); 51 | }); 52 | -------------------------------------------------------------------------------- /tests/e2e/specs/pagesDropdown.spec.js: -------------------------------------------------------------------------------- 1 | describe("Page Dropdown", () => { 2 | beforeEach(() => { 3 | cy.visit("/"); 4 | }); 5 | it("Basic default value", () => { 6 | cy.openAllAcordeon(); 7 | cy.get("[data-test=page-dropdown]").click(); 8 | cy.get("[data-test=add-page]").click({ force: true }); 9 | // Define Page 2 10 | cy.get("[data-cy=add-page-name]").clear().type("Page_2"); 11 | cy.get("[data-cy=add-page-modal] button.btn").eq(1).click(); 12 | cy.wait(300); 13 | cy.get('[data-cy=controls-FormButton]:contains("Page")').drag( 14 | "[data-cy=screen-drop-zone]", 15 | { position: "bottom" } 16 | ); 17 | cy.get("[data-cy=screen-element-container]").click(); 18 | cy.get("[data-cy=inspector-label]").clear().type("Go to Page 1"); 19 | cy.get("[data-cy=accordion-Configuration]").click(); 20 | cy.setMultiselect("[data-cy=inspector-eventData]", "Default"); 21 | // Define Page 1 22 | cy.get("[data-test=page-dropdown]").click(); 23 | cy.get("[data-test=page-Default]").click({ force: true }); 24 | cy.get('[data-cy=controls-FormButton]:contains("Page")').drag( 25 | "[data-cy=screen-drop-zone]", 26 | { position: "bottom" } 27 | ); 28 | cy.get("[data-cy=screen-element-container]").click(); 29 | cy.get("[data-cy=inspector-label]").clear().type("Go to Page 2"); 30 | cy.get("[data-cy=accordion-Configuration]").click(); 31 | cy.setMultiselect("[data-cy=inspector-eventData]", "Page_2"); 32 | // Navigate Default 33 | cy.get("[data-test=page-dropdown]").click(); 34 | cy.get("[data-test=page-Default]").click({ force: true }); 35 | cy.get("[data-cy=editor-content]").should("contain.text", "Go to Page 2"); 36 | // Navigate Page 2 37 | cy.get("[data-test=page-dropdown]").click(); 38 | cy.get("[data-test=page-Page_2]").click({ force: true }); 39 | cy.get("[data-cy=editor-content]").should("contain.text", "Go to Page 1"); 40 | // Preview 41 | cy.get("[data-cy=mode-preview]").click(); 42 | cy.get("[data-cy=preview-content]").should("contain.text", "Go to Page 2"); 43 | cy.get("[data-cy=preview-content] button").click(); 44 | cy.get("[data-cy=preview-content]").should("contain.text", "Go to Page 1"); 45 | }); 46 | }); 47 | -------------------------------------------------------------------------------- /tests/e2e/support/constants.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Node types are controls of the screen 3 | */ 4 | export const nodeControls = { 5 | checkbox: "[data-cy=controls-FormCheckbox]", 6 | datePicker: "[data-cy=controls-FormDatePicker]", 7 | fileDownload: "[data-cy=controls-FileDownload]", 8 | fileUpload: "[data-cy=controls-FileUpload]", 9 | formImage: "[data-cy=controls-FormImage]", 10 | formInput: "[data-cy=controls-FormInput]", 11 | formLoop: "[data-cy=controls-FormLoop]", 12 | formMultiColumn: "[data-cy=controls-FormMultiColumn]", 13 | formNestedScreen: "[data-cy=controls-FormNestedScreen]", 14 | formRecordList: "[data-cy=controls-FormRecordList]", 15 | formHtmlViewer: "[data-cy=controls-FormHtmlViewer]", 16 | formSelectList: "[data-cy=controls-FormSelectList]", 17 | formSubmit: "[data-cy=controls-FormButton]", 18 | formTextArea: "[data-cy=controls-FormTextArea]", 19 | clipboard: "[data-cy=controls-Clipboard]" 20 | }; 21 | -------------------------------------------------------------------------------- /tests/e2e/support/e2e.js: -------------------------------------------------------------------------------- 1 | import "@cypress/code-coverage/support"; 2 | -------------------------------------------------------------------------------- /tests/e2e/support/index.js: -------------------------------------------------------------------------------- 1 | import "./commands"; 2 | import "./e2e"; 3 | -------------------------------------------------------------------------------- /tests/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "baseUrl": "../../node_modules", 5 | "types": [ 6 | "cypress" 7 | ] 8 | }, 9 | "include": [ 10 | "**/*.*" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /tests/unit/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: ['jest'] , 3 | env: { 4 | 'jest/globals': true, 5 | node: true, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /tests/unit/CustomCss.spec.js: -------------------------------------------------------------------------------- 1 | import { createLocalVue, mount } from '@vue/test-utils'; 2 | import Renderer from '../../src/components/vue-form-renderer'; 3 | import BootstrapVue from 'bootstrap-vue'; 4 | 5 | const localVue = createLocalVue(); 6 | localVue.use(BootstrapVue); 7 | 8 | describe('Test custom css', () => { 9 | 10 | // Now mount the component and you have the wrapper 11 | const wrapper = mount(Renderer, { 12 | localVue, 13 | mocks: { 14 | $t: text => text, 15 | }, 16 | sync: false, 17 | propsData: { 18 | config: [{ 19 | items: [ 20 | { 21 | 'config': { 22 | 'label': 'Field test 1', 23 | 'name': 'field1', 24 | 'placeholder': '', 25 | 'validation': '', 26 | 'helper': null, 27 | 'type': 'text', 28 | }, 29 | 'label': 'Line Input', 30 | }, 31 | { 32 | 'config': { 33 | 'label': 'Field test 2', 34 | 'name': 'field2', 35 | 'placeholder': '', 36 | 'validation': '', 37 | 'helper': null, 38 | 'type': 'text', 39 | }, 40 | 'label': 'Line Input', 41 | }], 42 | }], 43 | data: {}, 44 | page: 0, 45 | computed: [], 46 | customCss: 'div {background: green;} .form-control {color: gray;}', 47 | }, 48 | }); 49 | 50 | it('Test custom CSS inclusion', () => { 51 | // Test if the rendered form contains the custom CSS 52 | expect(wrapper.html()).toMatch(/