@processmaker/screen-builder 2.93.0 → 2.95.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.93.0",
+  "version": "2.95.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">
@@ -102,6 +103,7 @@ export default {
     loading: { type: Number, default: null },
     alwaysAllowEditing: { type: Boolean, default: false },
     disableInterstitial: { type: Boolean, default: false },
+    waitLoadingListeners: { type: Boolean, default: false },
   },
   data() {
     return {
@@ -122,7 +124,8 @@ export default {
       redirecting: null,
       loadingButton: false,
       loadingTask: false,
-      loadingListeners: true,
+      loadingListeners: this.waitLoadingListeners,
+      isSelfService: false,
     };
   },
   watch: {
@@ -258,6 +261,10 @@ export default {
       }
     },
     loadTask() {
+      if (!this.taskId) {
+        return;
+      }
+
       const url = `/${this.taskId}?include=data,user,draft,requestor,processRequest,component,screen,requestData,loopContext,bpmnTagName,interstitial,definition,nested,userRequestPermission,elementDestination`;
       // For Vocabularies
       if (window.ProcessMaker && window.ProcessMaker.packages && window.ProcessMaker.packages.includes('package-vocabularies')) {
@@ -354,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;
         }
       });
     },
@@ -412,7 +419,7 @@ export default {
      * Emits a closed event.
      */
     async emitClosedEvent() {
-      this.$emit("closed", this.task.id, await this.getDestinationUrl());
+      this.$emit("closed", this.task?.id, await this.getDestinationUrl());
     },
     /**
      * Retrieves the destination URL for the closed event.
@@ -450,6 +457,8 @@ export default {
 
       const elementDestinationUrl = elementDestination.value;
       if (elementDestinationUrl) {
+        // Save the referring URL to sessionStorage for future verification
+        sessionStorage.setItem('sessionUrlActionBlocker', document.referrer);
         return elementDestinationUrl;
       }
 
@@ -483,8 +492,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) {
@@ -538,10 +547,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
@@ -683,10 +696,10 @@ export default {
     },
     processUpdated: _.debounce(function(data) {
       if (
-        data.event === "ACTIVITY_ACTIVATED"
+        ['ACTIVITY_ACTIVATED', 'ACTIVITY_COMPLETED'].includes(data.event)
         && data.elementType === 'task'
       ) {
-        if (!this.task.elementDestination?.type) {
+        if (!this.task?.elementDestination?.type) {
           this.taskId = data.taskId;
         }
 
@@ -792,6 +805,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() {
@@ -802,7 +839,9 @@ export default {
     this.nodeId = this.initialNodeId;
     this.requestData = this.value;
     this.loopContext = this.initialLoopContext;
-    this.loadTask();
+    if (!this.hasUrlActionBlocker()) {
+      this.loadTask();
+    }
   },
   destroyed() {
     this.unsubscribeSocketListeners();

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

@@ -647,10 +647,13 @@ 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.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"

package/src/main.js

@@ -38,6 +38,17 @@ Vue.component("Required", {
   template: '<div class="text-right"><small>* = Required</small></div>'
 });
 
+// Mock PmqlInput for test/standalone
+Vue.component("PmqlInput", {
+  props: {
+    value: {
+      type: String,
+      default: ""
+    }
+  },
+  template: '<div>PMQL: {{ value }}</div>'
+});
+
 const store = new Vuex.Store({
   modules: {
     globalErrorsModule,