Merge pull request #160 from AOT-Technologies/dev

Dev to master PR
AOT-Technologies · Feb 26, 2022 · c627258 · c627258
2 parents 6247906 + b4675b7
commit c627258
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 21 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -1,3 +1,14 @@
+<!--
+Thank you for submitting a PR to forms-flow-ai-extensions!
+
+To ease the process of reviewing your PR, do make sure to complete the following boxes.
+
+- [ ] Ensure you are following [Style Guidelines and Pull Request Guidelines](https://github.com/AOT-Technologies/forms-flow-ai-extensions/blob/guidelines/camunda-formio-tasklist-vue/docs/StyleGuide.md)
+- [ ] Add yourself to CONTRIBUTORS if you are a new contributor in package.json.
+- [ ] Add a [ChangeLog entry](https://github.com/AOT-Technologies/forms-flow-ai-extensions/blob/guidelines/camunda-formio-tasklist-vue/docs/CHANGELOG.md) describing what your PR does.
+-->
+
+
 # Issue Tracking
 
 JIRA: 
@@ -27,4 +38,4 @@ Add a screenshot of the local execution of a successful build.
 -->
 
 # Notes
-<!-- You can add any concerns highlighted during code review that cannot be addressed, any limitations in the changes, any subsequent actions to be taken, or anything noteworthy about the change that a reviewer would benefit from etc.-->
+<!-- You can add any concerns highlighted during code review that cannot be addressed, any limitations in the changes, any subsequent actions to be taken, or anything noteworthy about the change that a reviewer would benefit from etc.-->
diff --git a/camunda-formio-tasklist-vue/docs/CHANGELOG.md b/camunda-formio-tasklist-vue/docs/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Changes for camunda-formio-tasklist-vue
 
+## v1.0.19, 2022-02-25
+
+#### Modified
+
+- View submission history issues fixed 
+- Add loaders for fetching TaskList and TaskDetail page
+- Fix Claim Task assignee search filter bug
+- Updated with Formio Url (BaseUrl, ProjectUrl) 
+
 ## v1.0.18, 2022-01-21
 
 #### Modified

diff --git a/camunda-formio-tasklist-vue/docs/StyleGuide.md b/camunda-formio-tasklist-vue/docs/StyleGuide.md
@@ -1,8 +1,17 @@
-## Style Guide
+# Style Guide
 
-1. When writing css, always start with a prefix like `cft-` to avoid conflicts with other libraries
-when integrating.
+1. When writing css, always start with a prefix like `cft-` to avoid conflicts
+with CSS in other projects when integrating vue component.
 2. Import the components in relative order.
 3. When naming new Components follow Pascal-case.
 4. Follow the [VueJS Style Guide when developing components](https://vuejs.org/v2/style-guide/).
 5. On developing your code, follow the [Eslint rules specified](../.eslintrc.js)
+
+## Guidelines for raising PRs
+
+1. There are two protected branches: master and dev. dev is for continuous development
+and master branch as stable branch for the project which contains released version code.
+2. For any new changes raise PR to dev branch first.
+3. Always squash merge the Pull requests(PR) you raise with proper commit message.
+4. In case of PR from dev branch to master branch for an upcoming releases directly 
+merge PR instead of squash merging.
diff --git a/camunda-formio-tasklist-vue/docs/WebCustomEvents.md b/camunda-formio-tasklist-vue/docs/WebCustomEvents.md
@@ -1,4 +1,4 @@
-## forms-flow-web Vue Events 
+# forms-flow-web Vue Events 
 
  > This section elaborates  events used in forms-flow-web.
  >  The Form.io renderer uses the [EventEmitter3](https://github.com/primus/eventemitter3) library to manage all of the event handling that occurs within the renderer. Within the Form.io renderer, there are a number of events that are fired that allow you to respond to these events and then do something once they fire.

diff --git a/camunda-formio-tasklist-vue/src/components/TaskList.vue b/camunda-formio-tasklist-vue/src/components/TaskList.vue
@@ -23,6 +23,7 @@
         v-if="maximize"
       >
         <LeftSider
+          :taskLoading="taskLoading"
           v-if="token && bpmApiUrl"
           :token="token"
           :formsflowaiApiUrl="formsflowaiApiUrl"
@@ -34,8 +35,16 @@
           :payload="payload"
         />
       </b-col>
+
+       <b-col  v-if="singleTaskLoading" class="d-flex justify-content-center align-items-center" >
+         <div class="d-flex justify-content-center">
+          <div class="spinner-grow text-primary" role="status">
+             <span class="sr-only">Loading...</span>
+          </div>
+      </div>
+       </b-col>
       <b-col
-        v-if="getFormsFlowTaskId && task"
+        v-else-if="getFormsFlowTaskId && task"
         :lg="maximize ? 9 : 12"
         md="12"
         :class="
@@ -313,6 +322,12 @@
                   title="Diagram"
                   @click="getDiagramDetails"
                 >
+                  <div v-if="diagramLoading" class="d-flex justify-content-center">
+                     <div class="spinner-border" role="status">
+                        <span class="sr-only">Loading...</span>
+                     </div>
+                  </div>
+
                   <div class="diagram-full-screen" id="canvas"></div>
                 </b-tab>
               </b-tabs>
@@ -429,7 +444,6 @@ export default class Tasklist extends Mixins(TaskListMixin) {
   private getFormsFlowTaskId: any;
   @StoreServiceFlowModule.Getter("getFormsFlowactiveIndex")
   private getFormsFlowactiveIndex: any;
-
   @StoreServiceFlowModule.Mutation("setFormsFlowTaskCurrentPage")
   public setFormsFlowTaskCurrentPage: any;
   @StoreServiceFlowModule.Mutation("setFormsFlowTaskId")
@@ -442,6 +456,9 @@ export default class Tasklist extends Mixins(TaskListMixin) {
   private tasks: TaskPayload[] = [];
   private fulltasks: TaskPayload[] = [];
   private formId: string = "";
+  private taskLoading!: boolean;
+  private singleTaskLoading: boolean=false;
+  private diagramLoading: boolean= false;
   private submissionId: string = "";
   private formioUrl: string = "";
   private task: TaskPayload = {
@@ -502,6 +519,8 @@ export default class Tasklist extends Mixins(TaskListMixin) {
       reviewerList.data.forEach((user: UserPayload) => {
         this.reviewerUsersList.push(UserListObject(user));
       });
+      const userList = JSON.parse(JSON.stringify(this.reviewerUsersList));
+      this.userSelected= userList.find(((user: any)=>user.code?.includes(this.task.assignee)));
     }
   }
 
@@ -517,8 +536,8 @@ export default class Tasklist extends Mixins(TaskListMixin) {
     }
   }
 
-  async addGroup () {
-    await CamundaRest.createTaskGroupByID(
+  addGroup () {
+    CamundaRest.createTaskGroupByID(
       this.token,
       this.task.id!,
       this.bpmApiUrl,
@@ -527,11 +546,11 @@ export default class Tasklist extends Mixins(TaskListMixin) {
         groupId: this.setGroup,
         type: "candidate",
       }
-    ).then(async () => {
-      await this.getGroupDetails();
-      await this.reloadCurrentTask();
-      this.setGroup = null;
+    ).then( () => {
+      this.getGroupDetails();
+      this.reloadCurrentTask();
     });
+    this.setGroup = null;
   }
 
   async getGroupDetails () {
@@ -600,11 +619,11 @@ export default class Tasklist extends Mixins(TaskListMixin) {
   }
 
   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,
@@ -623,6 +642,7 @@ export default class Tasklist extends Mixins(TaskListMixin) {
       this.bpmApiUrl
     );
 
+
     if (formResult.data.formUrl?.value) {
       const formUrlPattern = formResult.data.formUrl?.value;
       const {
@@ -652,6 +672,7 @@ export default class Tasklist extends Mixins(TaskListMixin) {
   }
 
   async getTaskProcessDiagramDetails(processDefinitionId: string) {
+    this.diagramLoading = true;
     const getProcessResult = await CamundaRest.getProcessDiagramXML(
       this.token,
       processDefinitionId,
@@ -672,18 +693,23 @@ export default class Tasklist extends Mixins(TaskListMixin) {
     const viewer = new BpmnViewer({
       container: "#canvas",
     });
+    
+    this.diagramLoading = false;
     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() {
+
     await this.getTaskProcessDiagramDetails(this.task.processDefinitionId!);
+
   }
 
   oncustomEventCallback = async (customEvent: CustomEventPayload) => {
@@ -804,6 +830,7 @@ export default class Tasklist extends Mixins(TaskListMixin) {
     const responseData = paginatedTaskResults.data;
     const _embedded = responseData._embedded; // data._embedded.task is where the task list is.
     this.tasks = _embedded.task;
+    this.taskLoading=false;
     this.setFormsFlowTaskLength(responseData.count);
 
     if(taskIdToRemove){
@@ -954,10 +981,13 @@ export default class Tasklist extends Mixins(TaskListMixin) {
     this.setFormsFlowTaskCurrentPage(1);
     this.setFormsFlowTaskId("");
     this.setFormsFlowactiveIndex(NaN);
+    this.taskLoading= true;
     this.$root.$on("call-fetchTaskDetails", async (para: any) => {
       this.editAssignee = false;
+      this.singleTaskLoading=true;
       this.setFormsFlowTaskId(para.selectedTaskId);
       await this.fetchTaskDetails(this.getFormsFlowTaskId);
+      this.singleTaskLoading=false;
     });
 
     this.$root.$on("call-fetchPaginatedTaskList", async (para: any) => {
@@ -992,7 +1022,6 @@ export default class Tasklist extends Mixins(TaskListMixin) {
     this.filterList = sortByPriorityList(filterListResult.data);
     this.selectedfilterId = findFilterKeyOfAllTask(this.filterList, ALL_FILTER);
     await this.reloadLHSTaskList();
-
     if (SocketIOService.isConnected()) {
       SocketIOService.disconnect();
     }
@@ -1032,7 +1061,7 @@ export default class Tasklist extends Mixins(TaskListMixin) {
         }
         else {
           if (this.selectedfilterId) {
-          /* in case of update event update TaskList if the updated taskId is in
+            /* 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)) {
@@ -1079,8 +1108,9 @@ export default class Tasklist extends Mixins(TaskListMixin) {
       await this.fetchTaskDetails(this.taskId2);
       this.taskId2 = "";
     }
-  }
 
+  }
+  
   beforeDestroy () {
     SocketIOService.disconnect();
     this.$root.$off("call-fetchTaskDetails");

diff --git a/camunda-formio-tasklist-vue/src/components/layout/LeftSider.vue b/camunda-formio-tasklist-vue/src/components/layout/LeftSider.vue
@@ -2,7 +2,12 @@
   <div class="card">
     <div class="tasklist-container">
       <TaskListSearch @update-task-list="onSearchUpdateTasklistResult" />
-      <b-list-group class="cft-list-container" v-if="tasks && tasks.length">
+      <div v-if="taskLoading" class="d-flex justify-content-center text-primary">
+          <div class="spinner-border" role="status">
+         <span class="sr-only">Loading...</span>
+        </div>
+    </div>
+      <b-list-group class="cft-list-container" v-else-if="tasks && tasks.length">
         <b-list-group-item
           button
           v-for="(task, idx) in tasks"
@@ -125,6 +130,7 @@ export default class LeftSider extends Mixins(BaseMixin) {
   @Prop() private perPage!: number;
   @Prop() private selectedfilterId!: string;
   @Prop() private payload!: Payload;
+  @Prop() private taskLoading!: boolean;
 
   @serviceFlowModule.Getter("getFormsFlowTaskCurrentPage")
   private getFormsFlowTaskCurrentPage: any;

diff --git a/camunda-formio-tasklist-vue/src/models/UserPayload.ts b/camunda-formio-tasklist-vue/src/models/UserPayload.ts
@@ -23,7 +23,7 @@ export const UserListObject = (user: UserPayload) => {
   return {
     code: user.id,
     email: user.email!,
-    firstName: `${user.firstName} ${user.lastName}`,
-    lastName: `${user.firstName} ${user.lastName}`,
+    firstName: `${user.firstName}  ${user.lastName}`,
+    lastName: `${user.firstName} ${user.lastName===null?"":user.lastName}`,
   };
 };
diff --git a/camunda-formio-tasklist-vue/src/services/CamundaRest.ts b/camunda-formio-tasklist-vue/src/services/CamundaRest.ts
@@ -206,8 +206,15 @@ export const CamundaRest = {
     lastName: string | null,
     group: string
   ) {
+
+    const params = {
+      lastNameLike:`%${lastName}%`,memberOfGroup:group
+    };
+
     return await bpmAxios(bearerToken, CamundaUrl).get(
-      `/${engine}/user?lastNameLike=%${lastName}%&memberOfGroup=${group}`
+      `/${engine}/user`,{
+        params
+      }
     );
   },