Merge pull request #133 from AOT-Technologies/dev

Dev to master PR
AOT-Technologies · Jan 12, 2022 · 9ce2adb · 9ce2adb
2 parents b085113 + 9192f37
commit 9ce2adb
Show file tree

Hide file tree

Showing 10 changed files with 426 additions and 510 deletions.
diff --git a/camunda-formio-tasklist-vue/docs/CHANGELOG.md b/camunda-formio-tasklist-vue/docs/CHANGELOG.md
@@ -1,5 +1,21 @@
 # Changes for camunda-formio-tasklist-vue
 
+## v1.0.16
+
+#### Modified
+
+- Task list count being refreshed correctly when a submission is complete.
+- Dynamiclly Highlighting Process Diagram.
+
+## v1.0.15, 2021-12-13
+
+#### Modified
+
+- Switching task list APIs to load with application/hal+json 
+- Fix issue of process Diagram First click showing blank diagram
+- Add support of custom events for client
+- Fix TaskList search bugs
+
 ## v1.0.14, 2021-10-25 
 
 #### Added

diff --git a/camunda-formio-tasklist-vue/package-lock.json b/camunda-formio-tasklist-vue/package-lock.json
diff --git a/camunda-formio-tasklist-vue/package.json b/camunda-formio-tasklist-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "camunda-formio-tasklist-vue",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "Vue components to integrate formsflow.ai",
   "private": false,
   "main": "./dist/camunda-formio-tasklist-vue.common.js",
@@ -15,7 +15,8 @@
     "Arun G Mani <[email protected]> (https://github.com/arungmani-aot)",
     "Krishnan Subramanian <[email protected]> (https://github.com/krishnan-aot)",
     "Kurian Benoy <[email protected]> (https://github.com/kurianbenoy-aot)",
-    "Shabeeb <[email protected]> (https://github.com/shabeeb-aot)"
+    "Shabeeb <[email protected]> (https://github.com/shabeeb-aot)",
+    "Shuhaib S <[email protected]> (https://github.com/shuhaib-aot)"
   ],
   "scripts": {
     "serve": "vue-cli-service serve",

diff --git a/camunda-formio-tasklist-vue/src/components/TaskList.vue b/camunda-formio-tasklist-vue/src/components/TaskList.vue
@@ -592,16 +592,15 @@ export default class Tasklist extends Mixins(TaskListMixin) {
       taskId,
       formRequestFormat,
       this.bpmApiUrl
-    ).then(async () => {
-      await this.reloadCurrentTask();
-    });
+    );
   }
 
   async getBPMTaskDetail (taskId: string) {
     const [taskResult, applicationIdResult] = await Promise.all([
       CamundaRest.getTaskById(this.token, taskId, this.bpmApiUrl),
       CamundaRest.getVariablesByTaskId(this.token, taskId, this.bpmApiUrl),
     ]);
+    
     const processResult = await CamundaRest.getProcessDefinitionById(
       this.token,
       taskResult.data.processDefinitionId,
@@ -653,8 +652,15 @@ export default class Tasklist extends Mixins(TaskListMixin) {
       this.token,
       processDefinitionId,
       this.bpmApiUrl
+    );  
+    const processInstanceId = this.task.processInstanceId || '';
+    const getActivity = await CamundaRest.getProcessActivity(
+      this.token,
+      processInstanceId,
+      this.bpmApiUrl
     );
     this.xmlData = getProcessResult.data.bpmn20Xml;
+    const activityList = getActivity.data.childActivityInstances;
     const div = document.getElementById("canvas");
     if (div) {
       div.innerHTML = "";
@@ -664,6 +670,12 @@ export default class Tasklist extends Mixins(TaskListMixin) {
     });
     await viewer.importXML(this.xmlData);
     viewer.get("canvas").zoom("fit-viewport");
+    for(let i: number=0; i<activityList.length; i++){
+      viewer.get("canvas").addMarker({
+        'id':activityList[i].activityId
+      },'highlight');
+    }
+     
   }
 
   async getDiagramDetails() {
@@ -715,7 +727,7 @@ export default class Tasklist extends Mixins(TaskListMixin) {
       this.selectedfilterId,
       this.payload,
       (this.getFormsFlowTaskCurrentPage - 1) * this.perPage,
-      this.perPage
+      this.perPage,
     );
   }
 
@@ -773,7 +785,8 @@ export default class Tasklist extends Mixins(TaskListMixin) {
     filterId: string,
     requestData: object,
     first: number,
-    max: number
+    max: number,
+    taskIdToRemove?: string
   ) {
     this.selectedfilterId = filterId;
     const paginatedTaskResults = await CamundaRest.filterTaskListPagination(
@@ -788,6 +801,14 @@ export default class Tasklist extends Mixins(TaskListMixin) {
     const _embedded = responseData._embedded; // data._embedded.task is where the task list is.
     this.tasks = _embedded.task;
     this.setFormsFlowTaskLength(responseData.count);
+
+    if(taskIdToRemove){
+      //if the list has the task with taskIdToRemove remove that task and decrement
+      if(this.tasks.find((task: TaskPayload)=>task.id===taskIdToRemove)){
+        this.tasks=_embedded.task.filter((task: TaskPayload)=>task.id!==taskIdToRemove);
+        this.setFormsFlowTaskLength(responseData.count--); // Count has to be decreased since one task id is removed.
+      }
+    }
   }
 
   async onUserSearch (search: string, loading: any) {
@@ -897,7 +918,7 @@ export default class Tasklist extends Mixins(TaskListMixin) {
       this.getTaskFormIODetails(taskId),
     ]);
     /*await is not used for this promise, as if a user doesn't want to wait for
-     the history and proces diagram to load */
+     the history and process diagram to load */
     Promise.all([
       this.getTaskHistoryDetails(),
       this.getTaskProcessDiagramDetails(this.task.processDefinitionId!),
@@ -988,11 +1009,24 @@ export default class Tasklist extends Mixins(TaskListMixin) {
           );
         }
 
-        // missing condition on Complete eventName
+        if (eventName === "complete") {
+          this.fetchPaginatedTaskList(
+            this.selectedfilterId,
+            this.payload,
+            (this.getFormsFlowTaskCurrentPage - 1) * this.perPage,
+            this.perPage,
+            refreshedTaskId
+          );
+
+          if (this.getFormsFlowTaskId && refreshedTaskId === this.getFormsFlowTaskId)
+          {
+            this.setFormsFlowTaskId("");
+          }
+        }
         else {
           if (this.selectedfilterId) {
-          /* in case of update event update TaskLis if the updated taskId is in
-          the current paginated tasklist for the user only refresh */
+          /* in case of update event update TaskList if the updated taskId is in
+          the current paginated taskList for the user only refresh */
             if(eventName === "update") {
               if(getTaskFromList(this.tasks, refreshedTaskId)) {
                 this.reloadLHSTaskList();

diff --git a/camunda-formio-tasklist-vue/src/components/form/FormList.vue b/camunda-formio-tasklist-vue/src/components/form/FormList.vue
@@ -1,6 +1,6 @@
 <template>
   <b-container fluid class="task-outer-container">
-    <div class="overflow-auto">
+    <div>
       <b-table-simple
         hover
         small

diff --git a/camunda-formio-tasklist-vue/src/components/layout/LeftSider.vue b/camunda-formio-tasklist-vue/src/components/layout/LeftSider.vue
@@ -1,36 +1,44 @@
 <template>
-<div class="card">
-  <div class="tasklist-container">
-    <TaskListSearch
-      @update-task-list="onSearchUpdateTasklistResult"
-    />
-    <b-list-group class="cft-list-container" v-if="tasks && tasks.length">
-      <b-list-group-item
-        button
-        v-for="(task, idx) in tasks"
-        v-bind:key="task.id"
-        @click="toggle(idx); showTaskDetails(task.id)"
-        :class="{ 'cft-selected': task.id == getFormsFlowTaskId }"
-        class="cft-select-task"
-      >
-          <span class="cft-task-title font-weight-bold">{{ task.name }}</span>
+  <div class="card">
+    <div class="tasklist-container">
+      <TaskListSearch @update-task-list="onSearchUpdateTasklistResult" />
+      <b-list-group class="cft-list-container" v-if="tasks && tasks.length">
+        <b-list-group-item
+          button
+          v-for="(task, idx) in tasks"
+          v-bind:key="task.id"
+          @click="
+            toggle(idx);
+            showTaskDetails(task.id);
+          "
+          :class="{ 'cft-selected': task.id == getFormsFlowTaskId }"
+          class="cft-select-task"
+        >
+          <span
+            class="cft-task-title font-weight-bold"
+            v-b-tooltip.hover.right="'Task Name'"
+          >
+            {{ task.name }}
+          </span>
           <b-row>
             <b-col cols="7">
-              <div
-                class="cft-process-title"
-              >
-                {{
-                  getProcessDataFromList(
-                    getProcessDefinitions,
-                    task.processDefinitionId,
-                    "name"
-                  )
-                }}
+              <div class="cft-process-title">
+                <span v-b-tooltip.hover.right="'Process Name'">
+                  {{
+                    getProcessDataFromList(
+                      getProcessDefinitions,
+                      task.processDefinitionId,
+                      "name"
+                    )
+                  }}
+                </span>
               </div>
             </b-col>
             <b-col cols="5">
               <div class="cft-task-assignee">
-                {{ task.assignee }}
+                <span v-b-tooltip.hover.left="'Task Assignee'">
+                  {{ task.assignee }}</span
+                >
               </div>
             </b-col>
           </b-row>
@@ -40,13 +48,15 @@
                 <span
                   class="cft-due-date"
                   :data-title="getExactDate(task.due)"
+                  v-b-tooltip.hover.right="getExactDate(task.due)"
                   v-if="task.due"
                 >
                   Due {{ timedifference(task.due) }},
                 </span>
                 <span
                   class="cft-due-date"
                   :data-title="getExactDate(task.followUp)"
+                  v-b-tooltip.hover.right="getExactDate(task.followUp)"
                   v-if="task.followUp"
                 >
                   Follow-up {{ timedifference(task.followUp) }} ,
@@ -55,32 +65,35 @@
                   class="cft-due-date"
                   :data-title="getExactDate(task.created)"
                   v-if="task.created"
+                  v-b-tooltip.hover.right="getExactDate(task.created)"
                 >
                   Created {{ timedifference(task.created) }}
                 </span>
               </b-col>
-              <b-col cols="3" class="cft-priority" data-title="priority">
-                {{ task.priority }}
+              <b-col cols="3" class="cft-priority">
+                <span v-b-tooltip.hover.bottomleft="'priority'">
+                  {{ task.priority }}</span
+                >
               </b-col>
             </div>
           </b-row>
-      </b-list-group-item>
-
-      <b-pagination
-        v-model="currentPage"
-        :total-rows="getFormsFlowTaskLength"
-        :per-page="perPage"
-        class="cft-paginate"
-      />
-    </b-list-group>
-    <b-list-group cols="3" v-else>
-      <b-row class="cft-not-selected mt-2 ml-1 row">
-        <i class="fa fa-circle-exclamation" scale="1"></i>
-        <p>No tasks found in the list.</p>
-      </b-row>
-    </b-list-group>
+        </b-list-group-item>
+
+        <b-pagination
+          v-model="currentPage"
+          :total-rows="getFormsFlowTaskLength"
+          :per-page="perPage"
+          class="cft-paginate"
+        />
+      </b-list-group>
+      <b-list-group cols="3" v-else>
+        <b-row class="cft-not-selected mt-2 ml-1 row">
+          <i class="fa fa-circle-exclamation" scale="1"></i>
+          <p>No tasks found in the list.</p>
+        </b-row>
+      </b-list-group>
+    </div>
   </div>
-</div>
 </template>
 
 <script lang="ts">
@@ -154,6 +167,7 @@ export default class LeftSider extends Mixins(BaseMixin) {
     return getFormattedDateAndTime(date);
   }
 
+ 
   toggle (index: number) {
     this.setFormsFlowactiveIndex(index);
   }
@@ -230,5 +244,6 @@ export default class LeftSider extends Mixins(BaseMixin) {
     this.$root.$off("call-pagination");
     this.$root.$off("update-pagination-currentpage");
   }
+
 }
 </script>
diff --git a/camunda-formio-tasklist-vue/src/services/CamundaRest.ts b/camunda-formio-tasklist-vue/src/services/CamundaRest.ts
@@ -266,17 +266,28 @@ export const CamundaRest = {
     );
   },
 
-  async listForms (bearerToken: any, CamundaUrl: any) {
+  async listForms (bearerToken: string, CamundaUrl: string) {
     return await bpmAxios(bearerToken, CamundaUrl).get(`/${formExt}/form`);
   },
 
   async getProcessDiagramXML (
-    bearerToken: any,
+    bearerToken: string,
     processDefinitionId: string,
-    CamundaUrl: any
+    CamundaUrl: string
   ) {
     return await bpmAxios(bearerToken, CamundaUrl).get(
       `/${engine}/process-definition/${processDefinitionId}/xml`
     );
   },
+
+  async getProcessActivity (
+    bearerToken: string,
+    processInstanceId: string,
+    CamundaUrl: string
+  ) {
+    return await bpmAxios(bearerToken, CamundaUrl).get(
+      `/${engine}/process-instance/${processInstanceId}/activity-instances`
+    );
+  },
+
 };
diff --git a/camunda-formio-tasklist-vue/src/services/FormatTime.ts b/camunda-formio-tasklist-vue/src/services/FormatTime.ts
@@ -12,6 +12,9 @@ export const getFormattedDateAndTime = (date: Date) => {
     year: "numeric",
     month: "long",
     day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true,
   });
 };
 

diff --git a/camunda-formio-tasklist-vue/src/styles/camundaFormIOFormList.scss b/camunda-formio-tasklist-vue/src/styles/camundaFormIOFormList.scss
@@ -40,7 +40,7 @@
 }
 
 //TODO Remove this when Semantic UI css is removed. Semantic UI css override formio css tooltip
-
+ 
 [data-tooltip]:before {
   visibility: unset !important;
   position: initial !important;
@@ -58,9 +58,9 @@
 }
 
 .tooltip-inner {
-  background-color: white !important;
-  color: black !important;
-  box-shadow: 1px 1px 1px 1px;
+  background-color: white;
+  color: black;
+  box-shadow: 1px 1px 1px 1px #272727;
 }
 
 .cft-actionable-container .tab-content {