@processmaker/screen-builder 3.8.4 → 3.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "3.8.4",
+  "version": "3.8.6",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",
@@ -57,7 +57,7 @@
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.65.2",
+    "@processmaker/vue-form-elements": "0.65.3",
     "@processmaker/vue-multiselect": "2.3.0",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
@@ -80,7 +80,7 @@
     "cypress-wait-until": "^3.0.1",
     "eslint": "^8.21.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "^8.10.2",
     "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^22.4.1",
@@ -116,7 +116,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.65.2",
+    "@processmaker/vue-form-elements": "0.65.3",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

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/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);`
+  }
+};