@processmaker/screen-builder 2.94.0 → 2.96.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.94.0",
+  "version": "2.96.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.58.0",
+    "@processmaker/vue-form-elements": "0.59.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.58.0",
+    "@processmaker/vue-form-elements": "0.59.0",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

package/src/DataProvider.js

@@ -199,7 +199,7 @@ export default {
       !window.ProcessMaker.screen.cacheEnabled &&
       !window.ProcessMaker.screen.cacheTimeout
     ) {
-      return this.postDataSource(dataSourceId, null, params);
+      return this.postDataSource(dataSourceId, null, params).then(r => [r, nonce]);
     }
     let url = `/requests/data_sources/${dataSourceId}/resources/${params.config.endpoint}/data`;
     url += this.authQueryString();

package/src/ValidationsFactory.js

@@ -240,6 +240,10 @@ class PageNavigateValidations extends Validations {
  */
 class FormElementValidations extends Validations {
   async addValidations(validations) {
+    // Disable validations if field is hidden
+    if (!this.isVisible()) {
+      return;
+    }
     if (this.element.config && this.element.config.readonly) {
       //readonly elements do not need validation
       return;

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

@@ -10,11 +10,7 @@
             {{ $t(title) }}
           </p>
           <template v-if="dataControl.dropdownShow === 'requests'">
-            <b-dropdown
-              variant="outline-secondary"
-              offset="-70"
-              no-caret
-            >
+            <b-dropdown variant="outline-secondary" offset="-70" no-caret>
               <template #button-content>
                 <i class="fas fa-caret-down" />
               </template>
@@ -26,7 +22,9 @@
                 </span>
               </b-dropdown-item>
               <b-dropdown-item
-                @click="handleDropdownSelection('requests_filter', 'as_participant')"
+                @click="
+                  handleDropdownSelection('requests_filter', 'as_participant')
+                "
               >
                 <span class="item-text">
                   {{ $t("As Participant") }}
@@ -42,11 +40,7 @@
       <div class="ml-auto d-flex align-items-center">
         <template v-if="dataControl.dropdownShow === 'requests'">
           <div class="mr-4">
-            <b-dropdown
-              variant="outline-secondary"
-              offset="-50"
-              size="sm"
-            >
+            <b-dropdown variant="outline-secondary" offset="-50" size="sm">
               <template #button-content>
                 <span class="text-capitalize">
                   {{ $t(titleDropdown) }}
@@ -66,11 +60,7 @@
         </template>
         <template v-if="dataControl.dropdownShow === 'tasks'">
           <div class="mr-4">
-            <b-dropdown
-              variant="outline-secondary"
-              offset="-50"
-              size="sm"
-            >
+            <b-dropdown variant="outline-secondary" offset="-50" size="sm">
               <template #button-content>
                 <span class="text-capitalize">
                   {{ $t(titleDropdown) }}
@@ -82,7 +72,7 @@
                 @click="handleDropdownSelection('tasks', option)"
               >
                 <span class="item-text">
-                {{ $t(option) }}
+                  {{ $t(option) }}
                 </span>
               </b-dropdown-item>
             </b-dropdown>
@@ -122,7 +112,6 @@
     </div>
     <div class="card-body list-table">
       <template v-if="listOption === 'My Tasks'">
-        <Recommendations :dashboard="true" />
         <FormTasks @tasksCount="getData"></FormTasks>
       </template>
       <template v-if="verifyListCase()">
@@ -140,12 +129,8 @@ import FormTasks from "./form-tasks.vue";
 import FormRequests from "./form-requests.vue";
 import FormNewRequest from "./form-new-request.vue";
 
-const Recommendations = (resolve) => {
-  resolve(window.SharedComponents?.Recommendations || { template: "<span></span>" });
-};
-
 export default {
-  components: { FormTasks, FormRequests, FormNewRequest, Recommendations },
+  components: { FormTasks, FormRequests, FormNewRequest },
   mixins: [],
   props: ["listOption"],
   data() {
@@ -170,11 +155,7 @@ export default {
         "Overdue",
         "View All"
       ],
-      requestFilterDropdown: [
-        "View All",
-        "Completed",
-        "In Progress",
-      ]
+      requestFilterDropdown: ["View All", "Completed", "In Progress"]
     };
   },
   watch: {
@@ -331,8 +312,8 @@ export default {
 }
 
 .item-text {
-  color: #42526E;
-  font-family: 'Open Sans', sans-serif;
+  color: #42526e;
+  font-family: "Open Sans", sans-serif;
   font-size: 14px;
   font-weight: 400;
   line-height: 21px;
@@ -343,13 +324,13 @@ export default {
 .dropdown-menu {
   padding: 0px;
   width: 180px;
-  box-shadow: 0px 4px 8px 0px #0000001A;
+  box-shadow: 0px 4px 8px 0px #0000001a;
   border-radius: 4px;
 }
 
 .dropdown-item {
   padding: 13px 12px;
-  font-family: 'Open Sans', sans-serif;
+  font-family: "Open Sans", sans-serif;
   font-size: 16px;
   font-weight: 400;
   line-height: 21.79px;
@@ -361,10 +342,10 @@ export default {
 .btn-outline-secondary:not(:disabled):not(.disabled):active,
 .btn-outline-secondary:not(:disabled):not(.disabled).active,
 .show > .btn-outline-secondary.dropdown-toggle {
-    background: none;
-    color: #228fed;
-    border: none;
-    box-shadow: none;
+  background: none;
+  color: #228fed;
+  border: none;
+  box-shadow: none;
 }
 
 .head-filter {

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

@@ -11,6 +11,9 @@
         <td
           v-for="(header, colIndex) in tableHeaders"
           :key="`${rowIndex}-${colIndex}`"
+          :class="{
+            'pm-table-filter-applied-tbody': header.sortAsc || header.sortDesc
+          }"
         >
           <template v-if="containsHTML(getNestedPropertyValue(row, header))">
             <div
@@ -24,6 +27,10 @@
               v-if="header.truncate"
               :target="`element-${rowIndex}-${colIndex}`"
               custom-class="pm-table-tooltip"
+              placement="topright"
+              trigger="hover"
+              boundary="viewport"
+              :delay="{ show: 0, hide: 0 }"
               @show="checkIfTooltipIsNeeded"
             >
               {{ sanitizeTooltip(getNestedPropertyValue(row, header)) }}
@@ -47,6 +54,10 @@
                   v-if="header.truncate"
                   :target="`element-${rowIndex}-${colIndex}`"
                   custom-class="pm-table-tooltip"
+                  placement="topright"
+                  trigger="hover"
+                  boundary="viewport"
+                  :delay="{ show: 0, hide: 0 }"
                   @show="checkIfTooltipIsNeeded"
                 >
                   {{ getNestedPropertyValue(row, header) }}
@@ -91,7 +102,7 @@ export default {
           direction: "desc"
         }
       ],
-      tableHeaders: [],
+      tableHeaders: []
     };
   },
   computed: {
@@ -210,8 +221,9 @@ export default {
       if (option === "case_title") {
         attr[option] = value.case_title_formatted || value.case_title || "";
       }
-      return `<a href="${this.openRequest(value)}" class="text-nowrap"
-        target="_blank">${attr[option]}</a>`;
+      return `
+        <a href="${this.openRequest(value)}" class="text-nowrap custom-wrap"
+          target="_blank">${attr[option]}</a>`;
     },
     openRequest(data) {
       return `/requests/${data.id}`;

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

@@ -1,5 +1,6 @@
 <template>
   <div v-if="showTable">
+    <Recommendations :dashboard="true" />
     <filter-table
       table-name="form-tasks"
       :headers="tableHeaders"
@@ -137,8 +138,15 @@ import datatableMixin from "../../mixins/datatable";
 import formEmpty from "./form-empty-table.vue";
 
 const uniqIdsMixin = createUniqIdsMixin();
+
+const Recommendations = (resolve) => {
+  resolve(
+    window.SharedComponents?.Recommendations || { template: "<span></span>" }
+  );
+};
+
 export default {
-  components: { formEmpty },
+  components: { formEmpty, Recommendations },
   mixins: [uniqIdsMixin, datatableMixin],
   data() {
     return {
@@ -162,10 +170,8 @@ export default {
         }
       ],
       advancedFilter: "",
-      tasksPreview:
-        (window.SharedComponents && window.SharedComponents.TasksHome) || {},
-      taskTooltip:
-        (window.SharedComponents && window.SharedComponents.TaskTooltip) || {},
+      tasksPreview: window.SharedComponents?.TasksHome || {},
+      taskTooltip: window.SharedComponents?.TaskTooltip || {},
       rowPosition: {},
       ellipsisShow: false,
       isTooltipVisible: false,
@@ -568,7 +574,11 @@ export default {
 
       const rightBorderX = rect.right;
 
-      const bottomBorderY = yPosition - topAdjust - elementHeight + 100;
+      let bottomBorderY = yPosition - topAdjust - elementHeight + 100;
+
+      if (document.getElementsByClassName("recommendation").length > 0) {
+        bottomBorderY += 60;
+      }
 
       this.rowPosition = {
         x: rightBorderX,

package/src/components/screen-renderer.vue

@@ -37,7 +37,7 @@
       :is="component"
       ref="component"
       :vdata="value"
-      :_parent="_parent"
+      :_parent="_parent || value._parent"
       :_initial-page="currentPage"
       @after-submit="afterSubmit"
       @submit="submit"

package/src/components/task.vue

@@ -7,15 +7,16 @@
   >
     <template v-if="screen">
       <b-overlay
-          :show="disabled"
+          :show="disabled || isSelfService"
           id="overlay-background"
-          variant="white"
+          :variant="isSelfService ? 'white' : 'transparent'"
+          :blur="null"
           cardStyles="pointer-events: none;pointer-events: none;inset: 1px"
           rounded="sm"
       >
       <template #overlay>
         <div class="text-center">
-          <p>Please claim this task to continue.</p>
+          <p v-if="isSelfService">Please claim this task to continue.</p>
         </div>
       </template>
       <div class="card card-body border-top-0 h-100" :class="screenTypeClass">
@@ -124,6 +125,7 @@ export default {
       loadingButton: false,
       loadingTask: false,
       loadingListeners: this.waitLoadingListeners,
+      isSelfService: false,
     };
   },
   watch: {
@@ -359,12 +361,12 @@ export default {
       }
       this.prepareTask();
     },
-    disableForSelfService() {
+    setSelfService() {
       this.$nextTick(() => {
         if (window.ProcessMaker.isSelfService) {
-          this.disabled = true;
+          this.isSelfService = true;
         } else {
-          this.disabled = false;
+          this.isSelfService = false;
         }
       });
     },
@@ -446,7 +448,7 @@ export default {
             return `/tasks/${firstTask.id}/edit`;
           }
 
-          return document.referrer || null;
+          return this.getSessionRedirectUrl();
         } catch (error) {
           console.error("Error in getDestinationUrl:", error);
           return null;
@@ -455,13 +457,35 @@ export default {
 
       const elementDestinationUrl = elementDestination.value;
       if (elementDestinationUrl) {
+        // Save the referring URL to sessionStorage for future verification
+        sessionStorage.setItem('sessionUrlActionBlocker', document.referrer);
         return elementDestinationUrl;
       }
 
       const sessionStorageUrl = sessionStorage.getItem("elementDestinationURL");
       return sessionStorageUrl || null;
     },
+    /**
+     * Retrieves the URL from the session storage or the document referrer.
+     *
+     * This method is used to determine the source of the redirection when the task is claimed.
+     * It retrieves the 'sessionUrlSelfService' value from sessionStorage, and if present, removes it.
+     * If the value is not found, it returns the document referrer.
+     *
+     * @returns {string|null} - The URL from the session storage or the document referrer.
+     */
+    getSessionRedirectUrl() {
+      const urlSelfService = sessionStorage.getItem('sessionUrlSelfService');
+
+      if (urlSelfService) {
+        // Remove 'sessionUrlSelfService' from sessionStorage after retrieving its value
+        sessionStorage.removeItem('sessionUrlSelfService');
+        // Emit the source of the redirection
+        return urlSelfService;
+      }
 
+      return document.referrer || null;
+    },
     loadNextAssignedTask(requestId = null) {
       if (!requestId) {
         requestId = this.requestId;
@@ -488,8 +512,8 @@ export default {
               this.emitIfTaskCompleted(requestId);
             }
             this.taskId = task.id;
-            this.loadTask();
             this.nodeId = task.element_id;
+            this.loadTask();
           } else if (this.parentRequest && ['COMPLETED', 'CLOSED'].includes(this.task.process_request.status)) {
             this.$emit('completed', this.getAllowedRequestId());
           } else if (!this.taskPreview) {
@@ -543,10 +567,14 @@ export default {
         this.task.interstitial_screen['_interstitial'] = true;
         this.screen = this.task.interstitial_screen;
       }
+      if (this.task.bpmn_tag_name === 'manualTask') {
+        this.checkTaskStatus();
+        this.reload();
+      }
     },
     onUpdate(data) {
       this.$emit('input', data);
-      this.disableForSelfService();
+      this.setSelfService();
     },
     activityAssigned() {
       // This may no longer be needed
@@ -557,9 +585,6 @@ export default {
         requestId = this.getAllowedRequestId();
         this.$emit('completed', requestId);
       }
-      if (requestId !== this.requestId) {
-        this.processCompletedRedirect(data, this.userId, this.requestId);
-      }
     },
     /**
      * Makes an API call with retry logic.
@@ -641,11 +666,11 @@ export default {
       try {
         // Verify if is not anotherProcess type
         if (data.endEventDestination.type !== "anotherProcess") {
-          this.$emit(
-            "completed",
-            this.requestId,
-            data?.endEventDestination.value
-          );
+          if (data?.endEventDestination.value) {
+            window.location.href = data?.endEventDestination.value;
+          } else {
+            window.location.href = `/requests/${this.requestId}`;
+          }
           return;
         }
         // Parse endEventDestination from the provided data
@@ -671,9 +696,9 @@ export default {
         // Handle the first task from the response
         const firstTask = response.data.data[0];
         if (firstTask && firstTask.user_id === userId) {
-          this.$emit("completed", requestId, `/tasks/${firstTask.id}/edit`);
+          this.redirectToTask(firstTask.id);
         } else {
-          this.$emit("completed", requestId);
+          this.redirectToRequest(requestId);
         }
       } catch (error) {
         console.error("Error processing completed redirect:", error);
@@ -686,47 +711,139 @@ export default {
       const allowed = permission && permission.allowed;
       return allowed ? this.parentRequest : this.requestId
     },
-    processUpdated: _.debounce(function(data) {
-      if (
-        data.event === "ACTIVITY_ACTIVATED"
-        && data.elementType === 'task'
-      ) {
-        if (!this.task.elementDestination?.type) {
-          this.taskId = data.taskId;
-        }
+    redirectToTask(tokenId) {
+      this.$emit('redirect', tokenId);
+    },
+    redirectToRequest(requestId) {
+      window.location.href = `/requests/${requestId}`;
+    },
+    /**
+     * Initializes socket listeners for process updates and redirects.
+     * This method sets up listeners to handle specific events and reloads
+     * the task if necessary.
+     */
+    initSocketListeners() {
+      this.addProcessUpdateListener();
+      this.addRedirectListener();
+      this.loadingListeners = false;
 
+      // Reload to check if there's a task waiting, in case an event was missed
+      if (!this.taskId) {
         this.reload();
       }
+    },
 
-      if (data.event === 'ACTIVITY_EXCEPTION') {
-        this.$emit('error', this.requestId);
-      }
-    }, 100),
-    initSocketListeners() {
-      this.loadingListeners = false;
+    /**
+     * Adds a socket listener for process updates.
+     * Listens for specific events related to the process and triggers appropriate actions.
+     */
+    addProcessUpdateListener() {
       this.addSocketListener(
-        `completed-${this.requestId}`,
+        `updated-${this.requestId}`,
         `ProcessMaker.Models.ProcessRequest.${this.requestId}`,
-        '.ProcessCompleted',
-        (data) => {
-          this.processCompleted(data);
-        }
+        '.ProcessUpdated',
+        (data) => this.handleProcessUpdate(data)
       );
+    },
+
+    /**
+     * Handles process update events.
+     * Emits an error if an activity exception event is detected.
+     *
+     * @param {Object} data - The event data received from the socket listener.
+     */
+    handleProcessUpdate(data) {
+      if (data.event === 'ACTIVITY_EXCEPTION') {
+        this.$emit('error', this.requestId);
+        window.location.href = `/requests/${this.requestId}`;
+      }
+    },
+
+    /**
+     * Adds a socket listener for redirect events.
+     * Listens for specific redirect actions and handles them according to the method provided.
+     */
+    addRedirectListener() {
       this.addSocketListener(
-        `updated-${this.requestId}`,
+        `redirect-${this.requestId}`,
         `ProcessMaker.Models.ProcessRequest.${this.requestId}`,
-        '.ProcessUpdated',
-        (data) => {
-          this.processUpdated(data);
-        }
+        '.RedirectTo',
+        (data) => this.handleRedirect(data)
       );
+    },
 
-      // We might have missed an event before initSocketListeners
-      // was called so reload to check if there's a task waiting
-      if (!this.taskId) {
+    /**
+     * Handles redirect events based on the method provided in the event data.
+     * Calls specific handlers for different redirect methods or falls back to a default redirect.
+     *
+     * @param {Object} data - The event data received from the socket listener.
+     */
+    handleRedirect(data) {
+      switch (data.method) {
+        case 'redirectToTask':
+          this.handleRedirectToTask(data);
+          break;
+        case 'processUpdated':
+          this.handleProcessUpdated(data);
+          break;
+        case 'processCompletedRedirect':
+          this.processCompletedRedirect(
+            data.params[0],
+            this.userId,
+            this.requestId
+          );
+          break;
+        default:
+          this.handleDefaultRedirect(data);
+      }
+    },
+
+    /**
+     * Handles the 'redirectToTask' event by loading the specified task.
+     * Updates the current task ID and reloads the task data.
+     *
+     * @param {Object} data - The event data containing the tokenId of the task.
+     */
+    handleRedirectToTask(data) {
+
+      if (data?.params[0]?.tokenId) {
+        this.loadingTask = true;
+        this.taskId = data.params[0].tokenId;
         this.reload();
       }
     },
+
+    /**
+     * Handles the 'processUpdated' event by checking the event type and updating the task if necessary.
+     * Reloads the task data if the event is relevant.
+     *
+     * @param {Object} data - The event data containing the process update information.
+     */
+    handleProcessUpdated(data) {
+      if (
+        ['ACTIVITY_ACTIVATED', 'ACTIVITY_COMPLETED'].includes(data.event)
+        && data.elementType === 'task'
+      ) {
+        if (!this.task.elementDestination?.type) {
+          this.taskId = data.taskId;
+        }
+        this.reload();
+      }
+      if (data.event === 'ACTIVITY_EXCEPTION') {
+        this.$emit('error', this.requestId);
+      }
+    },
+
+    /**
+     * Handles the default redirect action by logging a warning and redirecting the user to the request page.
+     *
+     * @param {Object} data - The event data that triggered the default redirect.
+     */
+    handleDefaultRedirect(data) {
+      console.warn('redirect', data);
+      window.location.href = `/requests/${this.requestId}`;
+    },
+
     existsEventMessage(id, data) {
       if (sessionStorage.getItem(id)) {
         return true;
@@ -797,6 +914,30 @@ export default {
         requestIdNode.setAttribute('content', this.requestId);
       }
     },
+    /**
+     * Checks for the presence of a URL action blocker in sessionStorage and handles it.
+     *
+     * This method retrieves the 'sessionUrlActionBlocker' value from sessionStorage,
+     * and if present, removes it and emits a 'closed' event with the task id and
+     * the source of the redirection. It returns false if the blocker was handled,
+     * and true otherwise.
+     *
+     * @returns {boolean} Returns false if the 'sessionUrlActionBlocker' was found and handled, true otherwise.
+     */
+    hasUrlActionBlocker() {
+      // Retrieve the 'sessionUrlActionBlocker' value from sessionStorage
+      const redirectedFrom = sessionStorage.getItem("sessionUrlActionBlocker");
+
+      if (redirectedFrom) {
+        // Remove 'sessionUrlActionBlocker' from sessionStorage after retrieving its value
+        sessionStorage.removeItem("sessionUrlActionBlocker");
+
+        // Emit a 'closed' event with the task id and the source of the redirection
+        this.$emit("closed", this.task?.id, redirectedFrom);
+        return true;
+      }
+      return false;
+    },
 
   },
   mounted() {

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

@@ -647,10 +647,17 @@ export default {
 
       const excludedLabels = [""];
 
+      let filter = this.filterQuery.toLowerCase();
       const filtered = this.controls.filter((control) => {
-        return control.label
-          .toLowerCase()
-          .includes(this.filterQuery.toLowerCase());
+        let result = control.label.toLowerCase().includes(filter);
+        if (!control.group) {
+          // If the group is not defined
+          control.group = 'Advanced';
+        }
+        if (control.group.toLowerCase().includes(filter)) {
+          result = true;
+        }
+        return result;
       });
 
       return filtered;

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

@@ -10,7 +10,7 @@
     <screen-renderer
       ref="renderer"
       :value="data"
-      :_parent="_parent"
+      :_parent="_parent || data._parent"
       :definition="definition"
       :current-page="currentPage"
       data-cy="screen-renderer"