Bugfix/FOUR-5159: Summary screen is not displayed in sub process

src/components/task.vue

@@ -284,19 +284,19 @@ export default {
       }
       this.prepareTask();
     },
-    closeTask() {
+    closeTask(parentRequestId = null) {
       if (this.hasErrors) {
         this.$emit('error', this.requestId);
         return;
       }
 
       if (this.task.process_request.status === 'COMPLETED') {
-        this.processCompleted();
+        this.loadNextAssignedTask(parentRequestId);
 
       } else if (this.task.allow_interstitial) {
         this.task.interstitial_screen['_interstitial'] = true;
         this.screen = this.task.interstitial_screen;
-        this.loadNextAssignedTask();
+        this.loadNextAssignedTask(parentRequestId);
 
       } else {
         this.$emit('closed', this.task.id);
@@ -318,11 +318,18 @@ export default {
               }
               this.unsubscribeSocketListeners();
               this.redirecting = task.process_request_id;
-              this.$emit('redirect', task);
+              this.$emit('redirect', task.id, true);
               return;
+            } else {
+              // Only emit completed after getting the subprocess tasks and there are no tasks and process is completed
+              if (requestId == this.task.process_request_id && this.parentRequest && this.task.process_request.status === 'COMPLETED') {
+                this.$emit('completed', this.parentRequest);
+              }
             }
             this.taskId = task.id;
             this.nodeId = task.element_id;
+          } else {
+            this.$emit('completed', (this.parentRequest ? this.parentRequest : requestId));
           }
         });
     },
@@ -366,9 +373,8 @@ export default {
       // This may no longer be needed
     },
     processCompleted() {
-      if (this.parentRequest && this.task.allow_interstitial) {
-        // There could be another task in the parent, so don't emit completed
-        return;
+      if (this.parentRequest) {
+        this.$emit('completed', this.parentRequest);
       }
       this.$emit('completed', this.requestId);
     },
@@ -417,8 +423,13 @@ export default {
         `ProcessMaker.Models.ProcessRequest.${this.parentRequest}`,
         '.ProcessUpdated',
         (data) => {
-          if (['ACTIVITY_COMPLETED', 'ACTIVITY_ACTIVATED'].includes(data.event)) {
-            this.loadNextAssignedTask(this.parentRequest);
+          if (['ACTIVITY_ACTIVATED'].includes(data.event)) {
+            this.closeTask(this.parentRequest);
+          }
+          if (['ACTIVITY_COMPLETED'].includes(data.event)) {
+            if (this.task.process_request.status === 'COMPLETED') {
+              this.processCompleted();
+            }
           }
           if (data.event === 'ACTIVITY_EXCEPTION') {
             this.$emit('error', this.requestId);

src/main.js

@@ -152,7 +152,7 @@ window.ProcessMaker = {
                 {value: 2, content: 'John'},
                 {value: 3, content: 'Mary'},
                 {value: 4, content: 'Patricia'},
-              ], 
+              ],
             }});
             break;
           default:
@@ -201,6 +201,16 @@ window.Echo = {
       }, 1000);
     });
   },
+  eventMocks(event, response) {
+    this.listeners.forEach((listener) => {
+      setTimeout(() => {
+        listener.callback({
+          type: event,
+          response,
+        });
+      }, 1000);
+    });
+  },
   private() {
     return {
       notification(callback) {

tests/components/TaskRedirect.vue

@@ -0,0 +1,160 @@
+<template>
+  <b-row>
+    <b-col cols="8">
+      <b-tabs>
+        <b-tab active title="Form">
+          <task
+            :initial-task-id="task.id"
+            v-model="data"
+            @submit="submit"
+            :initialRequestId="1"
+            :userId="1"
+            @completed="completed"
+            @closed="closed"
+            @redirect="redirectToTask"
+          />
+        </b-tab>
+        <b-tab title="Data">
+          <monaco-editor
+            class="data-editor"
+            language="json"
+            :value="JSON.stringify(data, null, 4)"
+            :options="{automaticLayout: true, minimap: {enabled: false}}"
+          />
+          <div class="text-right">
+            <b-button variant="secondary">{{ __('Save') }}</b-button>
+          </div>
+        </b-tab>
+      </b-tabs>
+    </b-col>
+    <b-col cols="4">
+      <b-card
+        no-body
+        header="Open"
+        header-bg-variant="success"
+        header-text-variant="white"
+      >
+        <b-list-group flush>
+          <b-list-group-item>
+            <i class="far fa-calendar-alt"/>
+            <small>
+              {{ __('Due') }}
+              {{ moment(task.due_at).fromNow() }}
+            </small>
+            <div>{{ formatDate(task.due_at) }}</div>
+          </b-list-group-item>
+          <b-list-group-item>
+            <h5>{{ __('Assigned To') }}</h5>
+            <b-avatar/>
+            {{ task.user.fullname }}
+          </b-list-group-item>
+          <b-list-group-item>
+            <i class="far fa-calendar-alt"/>
+            <small>
+              {{ __('Assigned') }}
+              {{ moment(task.created_at).fromNow() }}
+            </small>
+            <div>{{ formatDate(task.created_at) }}</div>
+          </b-list-group-item>
+          <b-list-group-item>
+            <h5>{{ __('Request') }}</h5>
+            <div>
+              <a :href="`/requests/${task.process_request.id}`">
+                #{{ task.process_request.id }} {{ task.process.name }}
+              </a>
+            </div>
+          </b-list-group-item>
+          <b-list-group-item>
+            <h5>{{ __('Requested by') }}</h5>
+            <b-avatar/>
+            {{ task.process_request.user.fullname }}
+          </b-list-group-item>
+        </b-list-group>
+      </b-card>
+    </b-col>
+  </b-row>
+</template>
+
+<script>
+import moment from 'moment';
+import MonacoEditor from 'vue-monaco';
+import Screens from '../e2e/fixtures/single_line_input.json';
+
+export default {
+  components: {MonacoEditor},
+  data() {
+    return {
+      data: {},
+      task: {
+        id: 1,
+        advanceStatus: 'open',
+        component: 'task-screen',
+        created_at: moment().toISOString(),
+        completed_at: moment().toISOString(),
+        due_at: moment().add(1, 'day').toISOString(),
+        user: {
+          avatar: '',
+          fullname: 'Assigned User',
+        },
+        screen: Screens.screens[0],
+        process_request: {
+          id: 1,
+          status: 'ACTIVE',
+          user: {
+            avatar: '',
+            fullname: 'Requester User',
+          },
+        },
+        process: {
+          id: 1,
+          name: 'Process Name',
+        },
+        request_data: {},
+      },
+    };
+  },
+  methods: {
+    completed(processRequestId) {
+      window.location.href = '/requests/' + processRequestId;
+    },
+    closed() {
+      window.location.href = 'tasks';
+    },
+    redirectToTask(task) {
+      window.location.href = 'tasks/' + task + '/edit';
+    },
+    moment(...args) {
+      return moment(...args);
+    },
+    __(text) {
+      return text;
+    },
+    formatDate(date) {
+      return moment(date).format('YYYY-MM-DD HH:mm');
+    },
+    submit(task) {
+      if (this.disabled) {
+        return;
+      }
+      this.disabled = true;
+      const taskId = task.id;
+      const formData = task.request_data;
+      window.ProcessMaker.apiClient
+        .put('/tasks/' + taskId, {status:'COMPLETED', data: formData})
+        .then(() => {
+          alert('Task Completed Successfully');
+        })
+        .finally(() => {
+          this.disabled = false;
+        });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.data-editor {
+  border: 1px solid gray;
+  min-height: 400px;
+}
+</style>