Merge pull request #1635 from ProcessMaker/feature/FOUR-15739

FOUR-15739 Use v1.1 endpoint improvements
ProcessMaker · Jul 10, 2024 · 9f4ffec · 9f4ffec
2 parents 1f34387 + de17d9f
commit 9f4ffec
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 104 deletions.
diff --git a/src/DataProvider.js b/src/DataProvider.js
@@ -71,18 +71,38 @@ export default {
 
   // Methods below are used in the components
 
-  getTasks(params) {
+  async getTasks(params) {
     const endpoint = get(
       window,
       "PM4ConfigOverrides.getTasksEndpoint",
-      "/tasks"
+      "/api/1.1/tasks"
     );
-    return this.get(endpoint + params).then((response) => {
-      if (response.data.screen && response.data.screen.nested) {
-        this.addNestedScreenCache(response.data.screen.nested);
-      }
-      return response;
-    });
+    const promises = [];
+    const hasIncludeScreen = params.match(/include=.*,screen,/);
+    const hasIncludeNested = params.match(/include=.*,nested,/);
+
+    // remove params ?...
+    promises.push(
+      this.get(endpoint + params.replace(/,screen,|,nested,/g, ","))
+    );
+    // Get the screen from a separated cached endpoint
+    if (hasIncludeScreen) {
+      const screenEndpoint = `${(endpoint + params).replace(
+        /\?.+$/,
+        ""
+      )}/screen?include=screen${hasIncludeNested ? ",nested" : ""}`;
+      promises.push(this.get(screenEndpoint));
+    }
+    // Await for both promises to resolve
+    const [taskData, taskScreen] = await Promise.all(promises);
+    const response = taskData;
+    if (taskScreen) {
+      response.data.screen = taskScreen.data;
+    }
+    if (response.data.screen && response.data.screen.nested) {
+      this.addNestedScreenCache(response.data.screen.nested);
+    }
+    return response;
   },
   addNestedScreenCache(nested) {
     nested.forEach((screen) => {

diff --git a/src/components/task.vue b/src/components/task.vue
@@ -23,6 +23,7 @@
           <vue-form-renderer
             ref="renderer"
             v-model="requestData"
+            :class="{ loading: loadingTask || loadingListeners }"
             :config="screen.config"
             :computed="screen.computed"
             :custom-css="screen.custom_css"
@@ -120,6 +121,8 @@ export default {
       refreshScreen: 0,
       redirecting: null,
       loadingButton: false,
+      loadingTask: false,
+      loadingListeners: true,
     };
   },
   watch: {
@@ -129,12 +132,6 @@ export default {
       },
     },
 
-    initialTaskId: {
-      handler() {
-        this.taskId = this.initialTaskId;
-      },
-    },
-
     initialRequestId: {
       handler() {
         this.requestId = this.initialRequestId;
@@ -161,16 +158,6 @@ export default {
       },
     },
 
-    taskId: {
-      handler() {
-        if (this.taskId) {
-          if (!this.task || this.task.id !== this.taskId) {
-            this.loadTask();
-          }
-        }
-      },
-    },
-
     requestId: {
       handler() {
         if (this.requestId) {
@@ -182,30 +169,6 @@ export default {
       },
     },
 
-    task: {
-      handler() {
-        if (!this.screen) {
-          // if no current screen show the interstitial screen if exists
-          this.screen = this.task && this.task.interstitial_screen;
-        }
-        this.taskId = this.task.id;
-        this.nodeId = this.task.element_id;
-        this.listenForParentChanges();
-        if (this.task.process_request.status === 'COMPLETED') {
-          if (!this.taskPreview) {
-            this.$emit('completed', this.task.process_request.id);
-          }
-        }
-        if (this.taskPreview && this.task.status === "CLOSED") {
-          this.task.interstitial_screen['_interstitial'] = false;
-          if (!this.alwaysAllowEditing) {
-            this.task.screen.config = this.disableForm(this.task.screen.config);
-          }
-          this.screen = this.task.screen;
-        }
-      }
-    },
-
     value: {
       handler() {
         this.requestData = this.value;
@@ -306,6 +269,7 @@ export default {
           .getTasks(url)
           .then((response) => {
             this.task = response.data;
+            this.linkTask();
             this.checkTaskStatus();
             if (
               window.PM4ConfigOverrides
@@ -319,9 +283,28 @@ export default {
           })
           .catch(() => {
             this.hasErrors = true;
+          })
+          .finally(() => {
+            this.loadingTask = false;
           });
       });
     },
+    linkTask() {
+      this.nodeId = this.task.element_id;
+      this.listenForParentChanges();
+      if (this.task.process_request.status === 'COMPLETED') {
+        if (!this.taskPreview) {
+          this.$emit('completed', this.task.process_request.id);
+        }
+      }
+      if (this.taskPreview && this.task.status === "CLOSED") {
+        this.task.interstitial_screen['_interstitial'] = false;
+        if (!this.alwaysAllowEditing) {
+          this.task.screen.config = this.disableForm(this.task.screen.config);
+        }
+        this.screen = this.task.screen;
+      }
+    },
     prepareTask() {
       // If the immediate task status is completed and we are waiting with a loading button,
       // do not reset the screen because that would stop displaying the loading spinner
@@ -478,6 +461,9 @@ export default {
       if (!requestId) {
         requestId = this.requestId;
       }
+      if (!this.userId) {
+        return;
+      }
       const timestamp = !window.Cypress ? `&t=${Date.now()}` : "";
       const url = `?user_id=${this.userId}&status=ACTIVE&process_request_id=${requestId}&include_sub_tasks=1${timestamp}`;
       return this.$dataProvider
@@ -497,6 +483,7 @@ export default {
               this.emitIfTaskCompleted(requestId);
             }
             this.taskId = task.id;
+            this.loadTask();
             this.nodeId = task.element_id;
           } else if (this.parentRequest && ['COMPLETED', 'CLOSED'].includes(this.task.process_request.status)) {
             this.$emit('completed', this.getAllowedRequestId());
@@ -699,14 +686,19 @@ export default {
       return allowed ? this.parentRequest : this.requestId
     },
     processUpdated: _.debounce(function(data) {
-      if (data.event === 'ACTIVITY_ACTIVATED') {
+      if (
+        data.event === "ACTIVITY_ACTIVATED"
+        && data.elementType === 'task'
+      ) {
+        this.taskId = data.tokenId;
         this.reload();
       }
       if (data.event === 'ACTIVITY_EXCEPTION') {
         this.$emit('error', this.requestId);
       }
-    }, 300),
+    }, 100),
     initSocketListeners() {
+      this.loadingListeners = false;
       this.addSocketListener(
         `completed-${this.requestId}`,
         `ProcessMaker.Models.ProcessRequest.${this.requestId}`,
@@ -747,14 +739,12 @@ export default {
         '.ProcessUpdated',
         (data) => {
           if (
-            ['ACTIVITY_ACTIVATED'].includes(data.event) &&
-            !this.existsEventMessage(`${data.event}-${this.userId}-${this.taskId}`)
+            ['ACTIVITY_ACTIVATED'].includes(data.event)
           ) {
             this.closeTask(this.parentRequest);
           }
           if (
-            ["ACTIVITY_COMPLETED"].includes(data.event) &&
-            !this.existsEventMessage(`${data.event}-${this.userId}-${this.taskId}`)
+            ["ACTIVITY_COMPLETED"].includes(data.event)
           ) {
             if (this.task.process_request.status === 'COMPLETED') {
               this.processCompleted();
@@ -812,9 +802,16 @@ export default {
     this.nodeId = this.initialNodeId;
     this.requestData = this.value;
     this.loopContext = this.initialLoopContext;
+    this.loadTask();
   },
   destroyed() {
     this.unsubscribeSocketListeners();
   },
 };
 </script>
+
+<style scoped>
+.loading {
+  pointer-events: none;
+}
+</style>
diff --git a/src/main.js b/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");

diff --git a/tests/e2e/specs/MultiInstanceLoopContext.spec.js b/tests/e2e/specs/MultiInstanceLoopContext.spec.js
@@ -5,7 +5,7 @@ describe("FOUR-3375 FileUpload inside MultiInstance Task", () => {
   beforeEach(() => {
     cy.intercept(
       "GET",
-      "http://localhost:5173/api/1.0/tasks/1?include=data,user,draft,requestor,processRequest,component,screen,requestData,loopContext,bpmnTagName,interstitial,definition,nested,userRequestPermission,elementDestination",
+      "http://localhost:5173/api/1.1/tasks/1?include=data,user,draft,requestor,processRequest,component,requestData,loopContext,bpmnTagName,interstitial,definition,userRequestPermission,elementDestination",
       {
         id: 1,
         advanceStatus: "open",
@@ -34,6 +34,11 @@ describe("FOUR-3375 FileUpload inside MultiInstance Task", () => {
         user_request_permission: [{ process_request_id: 1, allowed: true }]
       }
     );
+    cy.intercept(
+      "GET",
+      "http://localhost:5173/api/1.1/tasks/1/screen?include=screen,nested",
+      Screens.screens[0]
+    );
 
     cy.visit("/?scenario=TaskMultiInstance", {
       onBeforeLoad(win) {