@processmaker/screen-builder 2.89.0 → 2.91.0

package/src/components/watchers-list.vue

@@ -1,67 +1,47 @@
 <template>
-  <div>
-    <b-row class="mb-3">
-      <b-col>
-        <basic-search v-model="filter" @submit="search">
-          <template slot="buttons">
-            <b-btn class="text-nowrap" variant="secondary" @click.stop="displayFormProperty" data-cy="watchers-add-watcher">
-              <i class="fas fa-plus" />
-              {{ $t('Watcher') }}
-            </b-btn>
-          </template>
-        </basic-search>
-      </b-col>
-    </b-row>
-
-    <div class="card card-body table-card watchers-list">
-      <b-table
-        :items="filtered"
-        :fields="fields"
-        :empty-text="$t('No Data Available')"
-        data-cy="watchers-table"
-        sort-icon-left
+  <Sortable
+    :fields="fields"
+    :items="value"
+    disable-key="byPass"
+    :inline-edit="false"
+    :data-test-actions="{
+      tableBox: { 'data-cy': 'watchers-table' },
+      btnNew: { 'data-cy': 'watchers-add-watcher' },
+      btnEdit: { 'data-cy': 'watchers-table-edit' },
+      btnDelete: { 'data-cy': 'watchers-table-remove' },
+    }"
+    @item-edit="editProperty"
+    @item-delete="deleteProperty"
+    @add-page="displayFormProperty"
+    @ordered="$emit('ordered', $event)"
+    :searchProperties= "searchProperties"
+  >
+    <template #options="{ item }">
+      <button
+        v-b-tooltip="{ customClass: 'bypass-btn-tooltip' }"
+        :title="item.byPass ? $t('Unbypass Watcher') : $t('Bypass Watcher')"
+        class="btn"
+        data-test="watchers-bypass"
+        @click.prevent="$emit('toggle-bypass', item.uid)"
       >
-        <template #cell(actions)="{item}">
-          <div class="actions">
-            <div class="popout">
-              <b-btn
-                variant="link"
-                @click="editProperty(item)"
-                v-b-tooltip.hover
-                :title="$t('Edit')"
-                data-cy="watchers-table-edit"
-              >
-                <i class="fas fa-edit fa-lg fa-fw"/>
-              </b-btn>
-              <b-btn
-                variant="link"
-                @click="deleteProperty(item)"
-                v-b-tooltip.hover
-                :title="$t('Delete')"
-                data-cy="watchers-table-remove"
-              >
-                <i class="fas fa-trash-alt fa-lg fa-fw"/>
-              </b-btn>
-            </div>
-          </div>
-        </template>
-      </b-table>
-    </div>
-    <template slot="modal-footer">
-      <span />
+        <img :src="getByPassIcon(item)" alt="Bypass" width="24" />
+      </button>
+      <div class="sortable-item-vr"></div>
     </template>
-  </div>
+  </Sortable>
 </template>
 
 <script>
 import BasicSearch from './basic-search';
 import { FormInput, FormTextArea } from '@processmaker/vue-form-elements';
+import Sortable from './sortable/Sortable.vue';
 
 export default {
   components: {
     BasicSearch,
     FormInput,
     FormTextArea,
+    Sortable,
   },
   props: {
     value: {
@@ -90,7 +70,6 @@ export default {
         {
           label: this.$t('Name'),
           key: 'name',
-          tdClass: 'break-word',
         },
         {
           label: this.$t('Watching Variable'),
@@ -99,39 +78,16 @@ export default {
         {
           label: this.$t('Output Variable'),
           key: 'output_variable',
-          tdClass: 'break-word',
         },
         {
           label: this.$t('Source'),
           key: 'script.title',
         },
-        {
-          key: 'actions',
-          label: '',
-        },
       ],
+      searchProperties: ['name', 'output_variable', 'watching', 'script.title'],
     };
   },
-  computed: {
-    filtered() {
-      const list = this.getValuesWithOutputVarsNames(this.value);
-
-      if (!this.filter) {
-        return list;
-      }
-      const filtered = [];
-      list.forEach(item => {
-        if (Object.keys(item).find(key => typeof item[key] === 'string' ? item[key].indexOf(this.filter)>=0 : false)) {
-          filtered.push(item);
-        }
-      });
-      return filtered;
-    },
-  },
   methods: {
-    search() {
-
-    },
     displayFormProperty() {
       this.$emit('display-form');
     },
@@ -141,36 +97,26 @@ export default {
     deleteProperty(item) {
       this.$emit('delete-form', item);
     },
-    getValuesWithOutputVarsNames(values) {
-      let list = values.map(watcher => {
-        let newItem = Object.assign({}, watcher);
-        // If watcher is a data source, extract the output vars
-        if (newItem.script && newItem.script.id && newItem.script.id.substr(0, 11) === 'data_source') {
-          let scriptConfig = JSON.parse(newItem.script_configuration);
-          let vars = (scriptConfig && scriptConfig.dataMapping)
-            ? scriptConfig.dataMapping.map(mapping => mapping.key).join(', ')
-            : '';
-
-          // var names string won't have more than 50 characters to avoid distorting the UI
-          const maxLen = 50;
-          newItem.output_variable = vars.length > maxLen
-            ? vars.substr(0, maxLen) + '...'
-            : vars;
-        }
-        return newItem;
-      });
-      return list;
+    getByPassIcon(item) {
+      return new URL(
+        `../assets/icons/${item.byPass ? 'Unbypass' : 'Bypass'}.svg`,
+        import.meta.url,
+      ).href;
     },
   },
 };
 </script>
 
-<style>
-.watchers-list .break-word {
-  word-break: break-word;
-}
+<style lang="scss" scoped>
+.bypass-btn-tooltip::v-deep {
+  & .tooltip-inner {
+    background-color: #EBEEF2 !important;
+    color: #444444 !important;
+  }
 
-.watchers-list .table {
-  margin-bottom: 0;
+  & .arrow:before {
+    border-top-color: #EBEEF2 !important;
+    border-bottom-color: #EBEEF2 !important;
+  }
 }
 </style>

package/src/components/watchers-popup.vue

@@ -1,17 +1,41 @@
 <template>
   <b-modal
     ref="modal"
-    size="lg"
+    :size="modalSize"
     id="watchers-popup"
-    :title="$t('Watchers')"
     @hidden="displayList"
     hide-footer
     header-close-content="&times;"
     no-close-on-backdrop
     data-cy="watchers-modal"
   >
+    <template #modal-title>
+      {{ $t('Watchers') }}
+      <small class="d-block my-2 modal-subtitle">
+        {{ $t('Manage your active watchers for this screen') }}
+      </small>
+    </template>
     <template v-if="enableList">
-      <watchers-list v-model="current" @display-form="displayForm" @edit-form="edit" @delete-form="confirmRemoval"/>
+      <watchers-list
+        v-model="current"
+        @display-form="displayForm"
+        @edit-form="edit"
+        @delete-form="confirmRemoval"
+        @toggle-bypass="toggleBypass"
+        @ordered="$emit('input', $event)"
+      />  
+
+      <div class="d-flex justify-content-end mt-3 mr-1">
+        <div class="d-flex align-items-end">
+          <button
+            class="btn btn-secondary ml-3 text-uppercase"
+            data-cy="calcs-button-close"
+            @click="$refs.modal.hide()"
+          >
+            {{ $t("Done") }}
+          </button>
+        </div>
+      </div>
     </template>
     <template v-else>
       <required />
@@ -37,34 +61,75 @@ export default {
     WatchersList,
     WatchersForm,
   },
-  props: ['value'],
+  props: {
+    value: {
+      type: Array,
+      required: true,
+    },
+  },
   data() {
     return {
       enableList: true,
       current: [],
       add: {
-        uid:'',
-        name:'',
-        variable:'',
-        script_id:'',
-        script_key:'',
-        input_data:'',
-        script_configuration:'',
-        synchronous:false,
+        uid: '',
+        name: '',
+        variable: '',
+        script_id: '',
+        script_key: '',
+        input_data: '',
+        script_configuration: '',
+        synchronous: false,
+        byPass: false,
       },
     };
   },
+  computed: {
+    modalSize() {
+      return "xl";
+    },
+  },
   watch: {
     value: {
       handler(value) {
-        this.current = value;
+        this.current = this.getValuesWithOutputVarsNames(value);
       },
     },
-  },
-  computed: {
-
   },
   methods: {
+    getValuesWithOutputVarsNames(values) {
+      const list = values.map((watcher) => {
+        const newItem = { ...watcher };
+
+        if (!Object.hasOwn(newItem, 'byPass')) {
+          newItem.byPass = false;
+        }
+
+        // If watcher is a data source, extract the output vars
+        if (newItem?.script?.id?.substr(0, 11) === 'data_source') {
+          const scriptConfig = JSON.parse(newItem.script_configuration);
+          const vars = scriptConfig?.dataMapping
+            ? scriptConfig.dataMapping.map((mapping) => mapping.key).join(', ')
+            : '';
+
+          // var names string won't have more than 50 characters to avoid distorting the UI
+          const maxLen = 50;
+          newItem.output_variable =
+            vars.length > maxLen ? `${vars.substr(0, maxLen)}...` : vars;
+        }
+
+        return newItem;
+      });
+
+      return list;
+    },
+    toggleBypass(itemUid) {
+      this.current = this.current.map((item) =>
+        item.uid === itemUid ? { ...item, byPass: !item.byPass } : item,
+      );
+
+      this.$emit('input', this.current);
+    },
     show() {
       this.$refs.modal.show();
     },
@@ -118,3 +183,11 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.modal-subtitle {
+  color: #556271;
+  font-size: 1rem;
+  font-weight: 400;
+}
+</style>

package/src/customLogs.js

@@ -0,0 +1,26 @@
+export default class CustomLog {
+  static logWithStyle(icon, type, name, status, message, color) {
+    const baseColor = color === '255, 0, 0' ? 'red' : 'green';
+    const style = `background-color: rgba(${color}, 0.1); color: ${baseColor}; padding: 2px 4px; border-radius: 3px;`;
+    const transparentStyle = 'background-color: transparent';
+
+    const logPrefix = `%c${icon} %c${type} "${name}" has`;
+    const logStatus = `%c${status}`;
+
+    if (status === 'RUN') {
+      console.log(`${logPrefix} ${logStatus}`, style, transparentStyle, style);
+    } else if (status === 'FAILED') {
+      console.groupCollapsed(`${logPrefix} ${logStatus}`, style, transparentStyle, style);
+      console.log(`%c${message}`, style);
+      console.groupEnd();
+    }
+  }
+
+  static success(type, name) {
+    this.logWithStyle('\u2705', type, name, 'RUN', '', '0, 128, 0');
+  }
+
+  static error(type, name, message) {
+    this.logWithStyle('\u274C', type, name, 'FAILED', message, '255, 0, 0');
+  }
+}

package/src/form-builder-controls.js

@@ -23,6 +23,7 @@ import {
   BWrapperComponent,
 } from '@processmaker/vue-form-elements';
 import { dataSourceValues } from '@/components/inspector/data-source-types';
+import LinkButton from "./components/renderer/link-button.vue";
 
 import {
   bgcolorProperty,
@@ -990,5 +991,46 @@ export default [
         }
       ]
     }
+  },
+  {
+    editorComponent: LinkButton,
+    editorBinding: 'LinkButton',
+    rendererComponent: LinkButton,
+    rendererBinding: "LinkButton",
+    
+    control: {
+      popoverContent: "Add a URL where this link should redirect",
+      group: 'Content Fields',
+      order: 6.0,
+      label: "Link URL",
+      component: "LinkButton",
+      "editor-component": "LinkButton",
+      "editor-control": "LinkButton",
+      config: {
+        label: "New Link",
+        icon: "fas fa-link",
+        variant: "primary",
+        event: "link",
+      },
+      inspector: [
+        {
+          type: 'FormInput',
+          field: 'label',
+          config: {
+            label: 'Label',
+            helper: 'The label describes the button\'s text',
+          },
+        },
+        {
+          type: 'FormInput',
+          field: 'linkUrl',
+          config: {
+            label: 'Link URL',
+            helper: 'Type here the URL link. Mustache syntax is supported.',
+          },         
+        },
+        buttonVariantStyleProperty
+      ]
+    }
   }
 ];

package/src/main.js

@@ -270,8 +270,8 @@ window.Echo = {
   }
 };
 
+// Setup axios
 window.axios = axios.create({
-  baseURL: "/api/1.0/",
   adapter: cacheAdapterEnhancer(axios.getAdapter(axios.defaults.adapter), {
     enabledByDefault: window.ProcessMaker.screen.cacheEnabled,
     cacheFlag: "useCache",
@@ -282,6 +282,31 @@ window.axios = axios.create({
   })
 });
 
+// Setup api versions
+const apiVersionConfig = [
+  { version: "1.0", baseURL: "/api/1.0/" },
+  { version: "1.1", baseURL: "/api/1.1/" },
+];
+
+window.axios.defaults.baseURL = apiVersionConfig[0].baseURL;
+window.axios.interceptors.request.use((config) => {
+  if (typeof config.url !== "string" || !config.url) {
+    throw new Error("Invalid URL in the request configuration");
+  }
+
+  apiVersionConfig.forEach(({ version, baseURL }) => {
+    const versionPrefix = `/api/${version}/`;
+    if (config.url.startsWith(versionPrefix)) {
+      // eslint-disable-next-line no-param-reassign
+      config.baseURL = baseURL;
+      // eslint-disable-next-line no-param-reassign
+      config.url = config.url.replace(versionPrefix, "");
+    }
+  });
+
+  return config;
+});
+
 const searchParams = new URLSearchParams(window.location.search);
 
 const scenario = searchParams?.get("scenario");

package/src/mixins/ScreenBase.js

@@ -328,6 +328,7 @@ export default {
       debouncedValuesQueue.forEach((args) => {
         this.setValue(...args);
       });
+      debouncedValuesQueue.length = 0;
     }, 210);
     this.setValueDebounced = (...args) => {
       debouncedValuesQueue.push(args);

package/src/mixins/computedFields.js

@@ -1,4 +1,5 @@
 import { Parser } from "expr-eval";
+import CustomLog from '../customLogs';
 
 export default {
   methods: {
@@ -9,7 +10,6 @@ export default {
         // Monitor if variable belongs to data (defined variables) or
         // vdata (external variables)in this way the event is not
         // executed again when the variable is update
-
         const data = this.getDataReference(null, () => {
           throw new Error(
             "You are not allowed to set properties from inside an expression"
@@ -19,18 +19,36 @@ export default {
         if (type === "expression") {
           value = Parser.evaluate(expression, data);
         } else {
+          // Create a new function with the expression and bind the data context
           // eslint-disable-next-line no-new-func
-          value = new Function(expression).bind(data)();
+          value = new Function(expression).bind(data);
+          return { result: value(), error: null };
         }
 
         if (value instanceof Date) {
           value = value.toISOString();
         }
-
-        return value;
-      } catch (e) {
-        console.warn("There was a problem evaluating the expression", e);
+        return { result: value, error: null };
+      } catch (error) {
+        // Catch any errors and return them
+        return { result: null, error };
       }
-    }
+    },
+    /**
+     * Logs an error message with a custom format.
+     * @param {string} name - The name of the calculation.
+     * @param {string} message - The error message.
+     */
+    customErrorLog(name, message) {
+      CustomLog.error('Calc', name, message);
+    },
+
+    /**
+     * Logs a success message with a custom format.
+     * @param {string} name - The name of the calculation.
+     */
+    customSuccessLog(name) {
+      CustomLog.success('Calc', name);
+    },
   }
 };

package/src/mixins/extensions/ComputedFields.js

@@ -9,18 +9,39 @@ export default {
      *   this.setValueAsync("calcProperty", value, this.vdata);
      * }
      */
-    computedFields(screen, definition) {
+    computedFields(screen, definition, logsEnabled = true) {
       // For each computed field defined
       definition.computed.forEach((computed) => {
+        if (computed.byPass) {
+          // If the computed field has bypass set to true, skip it
+          return;
+        }
         const formula = JSON.stringify(computed.formula);
         const type = JSON.stringify(computed.type);
         const name = JSON.stringify(computed.property);
         const safeDotName = this.safeDotName(computed.property);
         const code = `
-        let value = this.evaluateExpression(${formula}, ${type});
-        value = this.addNonDefinedComputedAttributes(value);
-        this.setValue(${name}, value, this.vdata);
-        return value;`;
+        const evaluatedExpression = this.evaluateExpression(${formula}, ${type});
+          // Handle errors if any
+          if (evaluatedExpression.error) {
+            if (${logsEnabled}) {
+              this.customErrorLog(${name}, evaluatedExpression.error);
+            }
+          } else {
+            // Add non-defined computed attributes
+            const value = this.addNonDefinedComputedAttributes(evaluatedExpression.result);
+            // Set the value
+            this.setValue(${name}, value, this.vdata);
+
+            // Log the successful calculation if logging is enabled
+            if (${logsEnabled}) {
+              this.customSuccessLog(${name});
+            }
+
+            // Return the result
+            return value;
+          }
+        `;
         this.addComputed(screen, safeDotName, code, "");
         // required to enable reactivity of computed field
         this.addWatch(screen, safeDotName, "");

package/src/mixins/extensions/Watchers.js

@@ -20,6 +20,10 @@ export default {
       if (definition.watchers) {
         screen.mixins.push(watchersMixin);
         definition.watchers.filter(this.filterWatchers).forEach((watcher) => {
+          if (watcher?.byPass) {
+            // If the watcher has bypass set to true, skip it
+            return;
+          }
           this.addMounted(screen, `
             this.$nextTick(() => this.$watch('vdata.${watcher.watching}', (newValue) => {
               if (typeof newValue !== 'undefined') {

package/src/mixins/watchers.js

@@ -1,5 +1,6 @@
 import Mustache from 'mustache';
 import _ from 'lodash';
+import CustomLog from '../customLogs';
 
 const broadcastEvent = '.Illuminate\\\\Notifications\\\\Events\\\\BroadcastNotificationCreated';
 
@@ -44,7 +45,7 @@ export default {
           // Data Source
           const requestId = _.get(this.vdata, '_request.id', null);
           const params = { config: JSON.parse(config), data: this.vdata };
-          
+
           this.$dataProvider.postDataSource(scriptId, requestId, params).then(response => {
             this.$emit('asyncWatcherCompleted');
             complete(response.data);
@@ -67,6 +68,7 @@ export default {
           });
         }
       }).then((response) => {
+        CustomLog.success('Watcher', watcher.name);
         // If watcher has an output variable and is a script
         if (watcher.output_variable && (watcher.script_key || '').length === 0) {
           this.setValue(watcher.output_variable, response, this.vdata);
@@ -94,6 +96,7 @@ export default {
         }
         return response;
       }).catch(error => {
+        CustomLog.error('Watcher', watcher.name, error.message);
         const message = _.get(error, 'response.data.message', error.message);
         if (watcher.synchronous) {
           this.$parent.$refs.watchersSynchronous.error(message);
@@ -135,4 +138,4 @@ export default {
   destroyed() {
     this.cleanEchoListeners();
   },
-};
+};