@processmaker/screen-builder 3.8.3 → 3.8.5

package/package.json

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

package/src/components/inspector/button/handler-event-property.js

@@ -0,0 +1,9 @@
+export const handlerEventProperty = {
+  type: 'CodeEditor',
+  field: 'handler',
+  config: {
+    label: 'Click Handler',
+    helper: 'The handler is a JavaScript function that will be executed when the button is clicked.',
+    dataFeature: 'i1177',
+  },
+};

package/src/components/inspector/code-editor.vue

@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <label :for="`${dataFeature}-code-input`">{{ $t(label) }} </label>
+    <div class="float-right buttons">
+      <b-button
+        :title="$t('Expand')"
+        variant="light"
+        size="sm"
+        :data-test="`${dataFeature}-expand-button`"
+        @click="expand"
+      ><i class="fas fa-expand"></i></b-button>
+    </div>
+    <MonacoEditor
+      :id="`${dataFeature}-code-input`"
+      v-model="configValue"
+      :options="smallMonacoOptions"
+      class="editor"
+      language="javascript"
+      :data-test="`${dataFeature}-code-input`"
+      @change="updateValue"
+    />
+    <small v-if="helper" class="form-text text-muted mt-2">{{ $t(helper) }}</small>
+    <b-modal
+      ref="codeEditorModal"
+      :title="$t(label)"
+      size="xl"
+      dialog-class="modal-dialog-fullscreen"
+    >
+      <MonacoEditor
+        v-model="configValue"
+        :options="largeMonacoOptions"
+        class="editor large-editor"
+        language="javascript"
+        :data-test="`${dataFeature}-code-input`"
+        @change="updateValue"
+      />
+      <template #modal-footer="{ ok }">
+        <b-button @click="ok" class="btn btn-secondary text-uppercase">
+          {{ $t('Close') }}
+        </b-button>
+      </template>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import MonacoEditor from 'vue-monaco';
+
+export default {
+  name: 'CodeEditor',
+  props: {
+    value: {
+      type: String,
+      required: false,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    helper: {
+      type: String,
+      required: false,
+    },
+    dataFeature: {
+      type: String,
+      required: true,
+    },
+  },
+  components: {
+    MonacoEditor,
+  },
+  data() {
+    return {
+      configValue: this.value || '',
+      smallMonacoOptions: {
+        lineNumbers: 'off',
+        lineDecorationsWidth: 0,
+        lineNumbersMinChars: 0,
+        minimap: { enabled: false },
+        fixedOverflowWidgets: true,
+        automaticLayout: true,
+        renderLineHighlight: 'none',
+        overviewRulerLanes: 0,
+      },
+      largeMonacoOptions: {
+        lineNumbers: 'on',
+        lineDecorationsWidth: 0,
+        minimap: { enabled: false },
+        automaticLayout: true,
+        overviewRulerLanes: 0,
+      },
+    };
+  },
+  methods: {
+    updateValue() {
+      this.$emit('input', this.configValue);
+    },
+    expand() {
+      this.$refs.codeEditorModal.show();
+    },
+  },
+  watch: {
+    value(newVal) {
+      this.configValue = newVal;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.buttons button {
+    min-width: 2.2em;
+    margin-left: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+.editor {
+    width: 100%;
+    height: 10em;
+    border: 1px solid var(--gray);
+    overflow: hidden;
+}
+
+.large-editor {
+    height: 25em;
+}
+</style>

package/src/components/inspector/index.js

@@ -30,3 +30,4 @@ export { default as LoadingSubmitButton } from "./loading-submit-button.vue";
 export { default as LabelSubmitButton } from "./label-submit-button.vue";
 export { default as AnalyticsSelector } from "./analytics-selector.vue";
 export { default as EncryptedConfig } from "./encrypted-config.vue";
+export { default as CodeEditor } from "./code-editor.vue";

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

@@ -22,7 +22,7 @@ import { getValidPath } from '@/mixins';
 
 export default {
   mixins: [getValidPath],
-  props: ['variant', 'label', 'event', 'eventData', 'name', 'fieldValue', 'value', 'tooltip', 'transientData', 'loading', 'loadingLabel'],
+  props: ['variant', 'label', 'event', 'eventData', 'name', 'fieldValue', 'value', 'tooltip', 'transientData', 'loading', 'loadingLabel', 'handler'],
   data() {
     return {
       showSpinner: false
@@ -80,6 +80,8 @@ export default {
         const trueValue = this.fieldValue || '1';
         const value = (this.value == trueValue) ? null : trueValue;
         this.$emit('input', value);
+        // Run handler after setting the value
+        await this.runHandler();
       }
       if (this.event !== 'pageNavigate' && this.name) {
         this.setValue(this.$parent, this.name, this.fieldValue);
@@ -89,6 +91,8 @@ export default {
           this.showSpinner = true;
         }
         this.$emit('input', this.fieldValue);
+        // Run handler after setting the value
+        await this.runHandler();
         this.$nextTick(() => {
           this.$emit('submit', this.eventData, this.loading, this.buttonInfo);
         });
@@ -99,6 +103,21 @@ export default {
         this.$emit('page-navigate', this.eventData);
       }
     },
+    async runHandler() {
+      if (this.handler) {
+        try {
+          const data = this.getScreenDataReference(null, (screen, name, value) => {
+            // Enable the data reference to be updated by the handler
+            screen.$set(screen.vdata, name, value);
+          });
+          await new Function(['toRaw'], this.handler).apply(data, [(item) => {
+            return item[Symbol.for('__v_raw')];
+          }]);
+        } catch (error) {
+          console.error('❌ There is an error in the button handler', error);
+        }
+      }
+    }
   },
 };
 </script>

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

@@ -469,9 +469,9 @@ export default {
         this.currentPage = this.currentPage == 0 ? 1 : this.currentPage;
       }
     },
-    // Watch for changes in the option input field
-    "validationData.option": {
-      handler(newValue) {
+    // Watch for changes in validationData to handle any Mustache variable changes
+    validationData: {
+      handler(newValue, oldValue) {
         if (this.source?.sourceOptions === "Collection" && this.source?.collectionFields?.pmql) {
           this.onCollectionChange(
             this.source?.collectionFields?.collectionId, 
@@ -479,6 +479,7 @@ export default {
           );
         }
       },
+      deep: true,
       immediate: false
     }
   },
@@ -614,12 +615,9 @@ export default {
         // Get data from validationData
         const data = this.validationData || {};
         
-        // Clean up the PMQL by removing unnecessary quotes around Mustache variables
-        let processedPmql = pmql.replace(/"{{([^}]+)}}"/g, "{{$1}}");
-        
-        // Process Mustache variables
-        processedPmql = Mustache.render(processedPmql, data);
-        
+        // First, process all Mustache variables (both quoted and unquoted)
+        let processedPmql = Mustache.render(pmql, data);
+
         // Check if the processed PMQL has empty values
         if (this.hasEmptyValues(processedPmql)) {
           this.collectionData = [];
@@ -627,7 +625,11 @@ export default {
         }
         
         // Add quotes around string values in PMQL if they don't have them
-        processedPmql = processedPmql.replace(/= ([^"'\s]+)/g, '= "$1"');
+        // This regex now properly handles values with spaces by looking for the end of the comparison
+        processedPmql = processedPmql.replace(
+          /= ([^"'\s][^"']*[^"'\s]|[^"'\s]+)(?=\s|$)/g,
+          '= "$1"'
+        );
         
         return processedPmql;
       } catch (error) {

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

@@ -562,6 +562,7 @@ import TabsBar from "./TabsBar.vue";
 import Sortable from './sortable/Sortable.vue';
 import ClipboardButton from './ClipboardButton.vue';
 import ScreenTemplates from './ScreenTemplates.vue';
+import CodeEditor from "./inspector/code-editor.vue";
 
 // To include another language in the Validator with variable processmaker
 const globalObject = typeof window === "undefined" ? global : window;
@@ -633,6 +634,7 @@ export default {
     Sortable,
     ClipboardButton,
     ScreenTemplates,
+    CodeEditor,
   },
   mixins: [HasColorProperty, testing, Clipboard],
   props: {

package/src/form-builder-controls.js

@@ -13,6 +13,7 @@ import FormListTable from './components/renderer/form-list-table';
 import FormAnalyticsChart from "./components/renderer/form-analytics-chart";
 import FormCollectionRecordControl from './components/renderer/form-collection-record-control.vue';
 import FormCollectionViewControl from './components/renderer/form-collection-view-control.vue';
+import { handlerEventProperty } from './components/inspector/button/handler-event-property';
 import {DataTypeProperty, DataFormatProperty, DataTypeDateTimeProperty} from './VariableDataTypeProperties';
 import {
   FormInput,
@@ -720,6 +721,7 @@ export default [
         name: null,
         fieldValue: null,
         tooltip: {},
+        handler: '',
       },
       inspector: [
         {
@@ -742,6 +744,7 @@ export default [
           },         
         },
         buttonTypeEvent,
+        handlerEventProperty,
         LoadingSubmitButtonProperty,
         LabelSubmitButtonProperty,
         tooltipProperty,

package/src/mixins/DataReference.js

@@ -28,6 +28,7 @@ function findScreenOwner(control, lastScreenContentIfNull = false) {
  * @return {object} proxy
  */
 function wrapScreenData(screen, customProperties = null, setter = null) {
+  const RAW = Symbol.for('__v_raw');
   const handler = {
     get: (target, name) => {
       if (customProperties && customProperties[name]) {
@@ -44,6 +45,9 @@ function wrapScreenData(screen, customProperties = null, setter = null) {
         }
         return undefined;
       }
+      if (name === RAW) {
+        return screen.vdata;
+      }
       // Check if vdata exists
       if (screen.vdata !== undefined && screen.vdata !== null) {
         return screen.vdata[name];

package/src/mixins/extensions/LoadFieldComponents.js

@@ -101,6 +101,10 @@ export default {
       properties[":disabled"] = isCalcProp || element.config.disabled;
       // Events
       properties['@submit'] = 'submitForm';
+      // Add handler event if Button
+      if(componentName === 'FormButton') {
+        properties[':handler'] = this.byRef(element.config.handler);
+      }
     },
   },
   mounted() {

package/src/stories/CodeEditor.stories.js

@@ -0,0 +1,112 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { userEvent, expect, within } from "@storybook/test";
+import "../bootstrap";
+import CodeEditor from "../components/inspector/code-editor.vue";
+
+export default {
+  title: "Components/CodeEditor",
+  component: CodeEditor,
+  tags: ["autodocs"],
+  argTypes: {
+    value: {
+      control: { type: 'text' },
+      description: 'The code value to display in the editor'
+    },
+    helper: {
+      control: { type: 'text' },
+      description: 'Helper text displayed below the editor'
+    },
+    dataFeature: {
+      control: { type: 'text' },
+      description: 'Data test attribute prefix for testing'
+    }
+  },
+  render: (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { CodeEditor },
+    template: '<code-editor v-bind="$props" v-model="inputValue" @input="handleInput" />',
+    data() {
+      return { inputValue: args.value };
+    },
+    methods: {
+      handleInput(value) {
+        this.inputValue = value;
+      }
+    },
+    watch: {
+      // Updates the value when the property changes in storybook controls
+      value(value) {
+        this.inputValue = value;
+      }
+    }
+  })
+};
+
+/**
+ * Stories of the component
+ */
+// Preview the component with basic JavaScript code
+export const Preview = {
+  args: {
+    label: "Click Handler",
+    helper: "Enter your JavaScript code here",
+    dataFeature: "code-editor",
+    value: "console.log('Hello, World!');\n\nfunction greet(name) {\n  return `Hello, ${name}!`;\n}"
+  }
+};
+
+// Story with empty value
+export const EmptyEditor = {
+  args: {
+    label: "Empty Editor",
+    helper: "Start typing your code...",
+    dataFeature: "code-editor-empty",
+    value: ""
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByRole('textbox'), 'console.log("Hello, World!");');
+    // Check if the code is displayed
+    expect(canvas.getByRole('textbox')).toHaveValue('console.log("Hello, World!");');
+  }
+};
+
+// Story with long code
+export const LongCode = {
+  args: {
+    label: "Long Code Example",
+    helper: "This editor contains a longer piece of code",
+    dataFeature: "code-editor-long",
+    value: `// This is a longer code example
+function processUserData(users) {
+  return users
+    .filter(user => user.active)
+    .map(user => ({
+      id: user.id,
+      name: user.name,
+      email: user.email,
+      role: user.role,
+      lastLogin: user.lastLogin,
+      permissions: user.permissions || []
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name))
+    .reduce((acc, user) => {
+      if (!acc[user.role]) {
+        acc[user.role] = [];
+      }
+      acc[user.role].push(user);
+      return acc;
+    }, {});
+}
+
+// Example usage
+const users = [
+  { id: 1, name: 'Alice', email: 'alice@example.com', role: 'admin', active: true, lastLogin: new Date() },
+  { id: 2, name: 'Bob', email: 'bob@example.com', role: 'user', active: true, lastLogin: new Date() },
+  { id: 3, name: 'Charlie', email: 'charlie@example.com', role: 'admin', active: false, lastLogin: new Date() }
+];
+
+const processedUsers = processUserData(users);
+console.log(processedUsers);`
+  }
+};