@processmaker/screen-builder 2.91.0 → 2.93.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.91.0",
+  "version": "2.93.0",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",
@@ -56,7 +56,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.57.0",
+    "@processmaker/vue-form-elements": "0.58.0",
     "@processmaker/vue-multiselect": "2.3.0",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
@@ -115,7 +115,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.57.0",
+    "@processmaker/vue-form-elements": "0.58.0",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

package/src/DataProvider.js

@@ -193,7 +193,7 @@ export default {
    * @param {object} params
    * @returns {object}
    */
-  getDataSource(dataSourceId, params) {
+  getDataSource(dataSourceId, params, nonce = null) {
     // keep backwards compatibility
     if (
       !window.ProcessMaker.screen.cacheEnabled &&
@@ -210,7 +210,7 @@ export default {
         pmds_data: JSON.stringify(params.data)
       }
     }).then((response) => {
-      return response;
+      return [response, nonce];
     });
   },
 
@@ -266,7 +266,7 @@ export default {
   },
 
   getCollectionRecords(collectionId, options, nonce = null) {
-    options.useCache = window.ProcessMaker.screen.cacheEnabled;
+    options.useCache = window.ProcessMaker?.screen?.cacheEnabled;
 
     return this.get(
       `/collections/${collectionId}/records${this.authQueryString()}`,

package/src/components/computed-properties.vue

@@ -408,7 +408,7 @@ export default {
     deleteProperty(item) {
       globalObject.ProcessMaker.confirmModal(
         this.$t('Are you sure you want to delete the calc ?'),
-        this.$t('If you do, you wont be able to recover the calc configuration.'),
+        this.$t('If you do, you won’t be able to recover the Calc configuration.'),
         '',
         () => {
           this.remove(item);

package/src/components/inspector/options-list.vue

@@ -227,7 +227,7 @@
 
     <div v-if="dataSource === dataSourceValues.dataConnector">
       <pmql-input
-        :search-type="'collections'"
+        :search-type="'collections_w_mustaches'"
         class="mb-1"
         :input-label="'PMQL'"
         v-model="pmqlQuery"

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

@@ -315,8 +315,12 @@ export default {
 
 .list-table {
   height: 300px;
-  overflow: auto;
+  overflow: hidden;
   background-color: #f9f9f9;
+  padding: 0 13.5px 0 0;
+}
+.list-table:hover {
+  overflow: auto;
   padding: 0;
 }
 

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

@@ -1,15 +1,13 @@
 <template>
   <div v-if="showTable">
     <filter-table
+      table-name="form-cases"
       :headers="tableHeaders"
       :data="tableData"
       :unread="unreadColumnName"
       :loading="shouldShowLoader"
     >
-      <template
-        v-for="(row, rowIndex) in data.data"
-        v-slot:[`row-${rowIndex}`]
-      >
+      <template v-for="(row, rowIndex) in data.data" #[`row-${rowIndex}`]>
         <td
           v-for="(header, colIndex) in tableHeaders"
           :key="`${rowIndex}-${colIndex}`"
@@ -249,24 +247,17 @@ export default {
       this.fetch();
     },
     setupColumns() {
-      const columns = this.getColumns();
-      this.tableHeaders = this.getColumns();
+      const columnsCases = this.getColumnsCases();
+      this.tableHeaders = this.getColumnsCases();
 
-      columns.forEach((column) => {
+      columnsCases.forEach((column) => {
         const field = {
-          title: () => this.$t(column.label),
+          title: () => this.$t(column.label)
         };
 
         switch (column.field) {
-          case "id":
-            field.name = "__slot:ids";
-            field.title = "#";
-            break;
-          case "participants":
-            field.name = "__slot:participants";
-            break;
-          case "name":
-            field.name = "__slot:name";
+          case "case_number":
+            field.name = "__slot:case_number";
             break;
           case "case_title":
             field.name = "__slot:case_title";
@@ -293,13 +284,8 @@ export default {
 
         this.fields.push(field);
       });
-
-      this.fields.push({
-        name: "__slot:actions",
-        title: ""
-      });
     },
-    getColumns() {
+    getColumnsCases() {
       return [
         {
           label: "Case #",
@@ -316,8 +302,7 @@ export default {
           default: true,
           truncate: true,
           width: 314,
-          fixed_width: 314,
-          resizable: false
+          fixed_width: 314
         },
         {
           label: "Status",
@@ -325,8 +310,7 @@ export default {
           sortable: true,
           default: true,
           width: 113,
-          fixed_width: 314,
-          resizable: false,
+          fixed_width: 113,
           filter_subject: { type: "Status" }
         },
         {

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

@@ -1,6 +1,7 @@
 <template>
   <div v-if="showTable">
     <filter-table
+      table-name="form-tasks"
       :headers="tableHeaders"
       :data="tableData"
       :unread="unreadColumnName"
@@ -308,7 +309,7 @@ export default {
       let draftBadge = "";
       if (record.draft && record.status !== "CLOSED") {
         draftBadge = `
-          <span class ="badge badge-warning status-warnig">
+          <span class ="badge badge-warning status-warning">
             ${this.$t("Draft")}
           </span>
         `;
@@ -330,8 +331,7 @@ export default {
           default: true,
           width: 153,
           fixed_width: 153,
-          truncate: true,
-          resizable: false
+          truncate: true
         },
         {
           label: "Priority",
@@ -339,8 +339,7 @@ export default {
           sortable: false,
           default: true,
           width: 48,
-          fixed_width: 48,
-          resizable: false
+          fixed_width: 48
         },
         {
           label: "Case title",
@@ -350,8 +349,7 @@ export default {
           default: true,
           width: 314,
           truncate: true,
-          fixed_width: 314,
-          resizable: false
+          fixed_width: 314
         }
       ];
 
@@ -362,8 +360,7 @@ export default {
           sortable: true,
           default: true,
           width: 220,
-          fixed_width: 220,
-          resizable: false
+          fixed_width: 220
         });
       } else {
         columns.push({
@@ -372,8 +369,7 @@ export default {
           sortable: true,
           default: true,
           width: 220,
-          fixed_width: 220,
-          resizable: false
+          fixed_width: 220
         });
       }
       columns.push({
@@ -386,9 +382,9 @@ export default {
     },
     setupColumns() {
       this.tableHeaders = this.getColumns();
-      const columns = this.getColumns();
+      const columnsTasks = this.getColumns();
 
-      columns.forEach((column) => {
+      columnsTasks.forEach((column) => {
         const field = {
           title: () => this.$t(column.label)
         };

package/src/components/task.vue

@@ -420,7 +420,7 @@ export default {
      */
     // eslint-disable-next-line consistent-return
     async getDestinationUrl() {
-      const { elementDestination } = this.task || {};
+      const { elementDestination, allow_interstitial: allowInterstitial } = this.task || {};
 
       if (!elementDestination) {
         return null;
@@ -437,7 +437,7 @@ export default {
           const response = await this.retryApiCall(() => this.getTasks(params));
 
           const firstTask = response.data.data[0];
-          if (firstTask?.user_id === this.userId) {
+          if (allowInterstitial && firstTask?.user_id === this.userId) {
             return `/tasks/${firstTask.id}/edit`;
           }
 
@@ -487,6 +487,8 @@ export default {
             this.nodeId = task.element_id;
           } else if (this.parentRequest && ['COMPLETED', 'CLOSED'].includes(this.task.process_request.status)) {
             this.$emit('completed', this.getAllowedRequestId());
+          } else if (!this.taskPreview) {
+            this.emitClosedEvent();
           }
         });
     },
@@ -602,20 +604,14 @@ export default {
       const queryParams = {
         user_id: this.userId,
         process_request_id: params.processRequestId,
-        page: params.page,
-        per_page: params.perPage,
-        status: params.status
+        page: params.page || 1,
+        per_page: params.perPage || 1,
+        status: params.status,
       };
 
-      const queryString = Object.entries(queryParams)
-        .filter(([, value]) => value !== undefined && value !== null)
-        .map(
-          ([key, value]) =>
-            `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
-        )
-        .join("&");
+      const queryString = new URLSearchParams(queryParams).toString();
 
-      return window.ProcessMaker.apiClient.get(`tasks?${queryString}`);
+      return this.$dataProvider.getTasks(`?${queryString}`);
     },
     /**
      * Parses a JSON string and returns the result.
@@ -690,9 +686,13 @@ export default {
         data.event === "ACTIVITY_ACTIVATED"
         && data.elementType === 'task'
       ) {
-        this.taskId = data.tokenId;
+        if (!this.task.elementDestination?.type) {
+          this.taskId = data.taskId;
+        }
+
         this.reload();
       }
+
       if (data.event === 'ACTIVITY_EXCEPTION') {
         this.$emit('error', this.requestId);
       }

package/src/mixins/Json2Vue.js

@@ -236,9 +236,11 @@ export default {
       return name && typeof name === 'string' && name.match(/^[a-zA-Z_][0-9a-zA-Z_.]*$/);
     },
     isComputedVariable(name, definition) {
-      return definition.computed && definition.computed.some(computed => {
-        // Check if the first part of an element's name (up to the first `.`)
-        // matches the name of a computed property.
+      return definition?.computed?.some(computed => {
+        // add byPass computed property validation
+        if (computed?.byPass) return false;
+        // Check if the first part of an element'ßs name (up to the first `.`)
+        // matches the name of a computed propertåy.
         const regex = new RegExp(`^${computed.property}(\\.|$)`, 'i');
         return regex.test(name);
       });