Dev to Master 👍 (#223)

* fixed container height * Task variable order * changed authorization API
AOT-Technologies · Apr 5, 2022 · c2fa6c4 · c2fa6c4
1 parent ff22b5f
commit c2fa6c4
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 47 deletions.
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.1.2, 2022-04-05
+
+#### Modified
+
+- Fixed Boolean value accept in filter
+- Fixed Console errors
+- Updated UI responsiveness
+- Updated order of task variables in task list
+
 ## v1.1.1, 2022-03-28
 
 #### Modified

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.1.1",
+  "version": "1.1.2",
   "description": "Vue components to integrate formsflow.ai",
   "private": false,
   "main": "./dist/camunda-formio-tasklist-vue.common.js",
@@ -16,7 +16,8 @@
     "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)",
-    "Shuhaib S <[email protected]> (https://github.com/shuhaib-aot)"
+    "Shuhaib S <[email protected]> (https://github.com/shuhaib-aot)",
+    "Fahad k <[email protected]> (https://github.com/fahad-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
@@ -18,9 +18,9 @@
         :defaultTaskSortOrder="taskSortOrder"
         :disableOption="disableComponents"
       />
-      <div class="d-flex">
+      <div class="d-flex flex-md-row flex-column">
         <div
-          class="col-3"
+          class="col-md-3 col-12"
           v-if="maximize"
         >
           <LeftSider
@@ -40,8 +40,8 @@
           />
         </div>
         <div
-          class="col-9 ctf-task-details-container"
-          :class="{ 'col-12 mx-0': !maximize }"
+          class="ctf-task-details-container ms-md-2 rounded"
+          :class="{ 'col-12 mx-0': !maximize ,'col-md-9 col-12':maximize}"
         >
           <div
             v-if="singleTaskLoading"
@@ -97,7 +97,8 @@
                     data-bs-toggle="tooltip"
                     title="Click to change assignee"
                   >
-                    <i
+                   <span v-if="loadingEditAssignee" class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
+                    <i v-if="!loadingEditAssignee"
                       class="fa fa-pencil"
                       :class="{
                       'fa-times-circle-o':editAssignee,
@@ -165,8 +166,10 @@
                           @click="onUnClaim"
                           data-bs-toggle="tooltip"
                           title="Reset assignee"
-                        >
-                          <i class="fa fa-times-circle-o" />
+                        > 
+                         <span v-if="loadingClaimAndUnclaim" class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
+
+                          <i v-if="!loadingClaimAndUnclaim" class="fa fa-times-circle-o" />
                         </button>
                       </template>
                     </template>
@@ -177,7 +180,8 @@
                       data-bs-toggle="tooltip"
                       title="Claim task"
                     >
-                      <i class="fa fa-plus" />
+                     <span v-if="loadingClaimAndUnclaim" class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
+                     <i v-if="!loadingClaimAndUnclaim" class="fa fa-plus" />
                       <span class="mx-1">Claim</span>
                     </button>
                   </div>
@@ -647,6 +651,8 @@ export default class Tasklist extends Mixins(TaskListMixin) {
 
   };
   private editAssignee: boolean = false;
+  private loadingEditAssignee: boolean=  false;
+  private loadingClaimAndUnclaim: boolean = false;
   private groupList: GroupListPayload[] = [];
   private groupListNames?: string[] = [];
   private groupListItems: string[] = [];
@@ -699,7 +705,7 @@ export default class Tasklist extends Mixins(TaskListMixin) {
   }
 
   async toggleassignee() {
-    this.editAssignee = !this.editAssignee;
+    this.loadingEditAssignee=true;
     const reviewerList = await CamundaRest.getUsersByMemberGroups(
       this.token,
       this.bpmApiUrl,
@@ -712,6 +718,8 @@ export default class Tasklist extends Mixins(TaskListMixin) {
       });
       const userList = JSON.parse(JSON.stringify(this.reviewerUsersList));
       this.userSelected = userList.find(((user: any) => user.code?.includes(this.task.assignee)));
+      this.loadingEditAssignee=false;
+      this.editAssignee = !this.editAssignee;
     }
   }
 
@@ -946,12 +954,13 @@ export default class Tasklist extends Mixins(TaskListMixin) {
     await this.fetchPaginatedTaskList(
       this.selectedfilterId,
       this.payload,
-      (this.getFormsFlowTaskCurrentPage - 1) * this.perPage,
+      (this.getFormsFlowTaskCurrentPage - 1||0) * this.perPage,
       this.perPage,
     );
   }
 
   async onClaim() {
+    this.loadingClaimAndUnclaim= true;
     await CamundaRest.claim(
       this.token,
       this.task.id!,
@@ -960,19 +969,24 @@ export default class Tasklist extends Mixins(TaskListMixin) {
       },
       this.bpmApiUrl
     );
+   
     if (!SocketIOService.isConnected()) {
       await this.getBPMTaskDetail(this.getFormsFlowTaskId);
       await this.reloadLHSTaskList();
     }
+    this.loadingClaimAndUnclaim= false;
+
   }
 
   async onUnClaim() {
+    this.loadingClaimAndUnclaim= true;
     await CamundaRest.unclaim(this.token, this.task.id!, this.bpmApiUrl);
 
     if (!SocketIOService.isConnected()) {
       await this.getBPMTaskDetail(this.getFormsFlowTaskId);
       await this.reloadLHSTaskList();
     }
+    this.loadingClaimAndUnclaim= false;
   }
 
   async onSetassignee() {
@@ -1008,6 +1022,7 @@ export default class Tasklist extends Mixins(TaskListMixin) {
     max: number,
     taskIdToRemove?: string
   ) {
+    this.taskLoading=true;
     this.selectedfilterId = filterId;
     const paginatedTaskResults = await CamundaRest.filterTaskListPagination(
       this.token,
@@ -1022,6 +1037,7 @@ export default class Tasklist extends Mixins(TaskListMixin) {
     this.tasks = _embedded.task;
     this.taskLoading = false;
     this.setFormsFlowTaskLength(responseData.count);
+    this.taskLoading=false;
 
     if (taskIdToRemove) {
       //if the list has the task with taskIdToRemove remove that task and decrement
@@ -1249,7 +1265,6 @@ export default class Tasklist extends Mixins(TaskListMixin) {
     if (SocketIOService.isConnected()) {
       SocketIOService.disconnect();
     }
-    console.log(this.webSocketEncryptkey);
     SocketIOService.connect(
       this.webSocketEncryptkey,
       (refreshedTaskId: string, eventName: string, error: string) => {
@@ -1357,9 +1372,8 @@ export default class Tasklist extends Mixins(TaskListMixin) {
   margin-left: 4px;
 }
 .ctf-task-details-container {
+  // margin-left: 0.5rem;
   background: #fff;
-  margin-left: 4px;
-  border-radius: 0.5rem;
   .task-title {
     padding: 1rem 1.5rem;
     border-top-left-radius: 0.5rem;

diff --git a/camunda-formio-tasklist-vue/src/components/form/FormListModal.vue b/camunda-formio-tasklist-vue/src/components/form/FormListModal.vue
@@ -175,7 +175,9 @@ export default class FormListModal extends Mixins(BaseMixin) {
     this.$bvModal.show("modal-multi-1");
   }
 
-  onSubmit(submission: FormioSubmissionPayload) {
+ 
+  async onSubmit(submission: FormioSubmissionPayload) {
+
     this.formId = submission.form;
     this.submissionId = submission._id;
 
@@ -190,7 +192,7 @@ export default class FormListModal extends Mixins(BaseMixin) {
         + this.formId
         + "/submission/"
         + this.submissionId;
-      formApplicationSubmit(
+      await formApplicationSubmit(
         formsflowAIApiUrl,
         {
           formId: this.formId,

diff --git a/camunda-formio-tasklist-vue/src/components/layout/Header.vue b/camunda-formio-tasklist-vue/src/components/layout/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ctf-header-container">
+  <div class="ctf-header-container rounded">
     <div class="dropdown mx-1">
       <button
          v-if="!disableOption.filterList"
@@ -125,7 +125,6 @@ export default class Header extends Mixins(BaseMixin) {
   background-color: white;
   font-family: inherit;
   margin-right: -4px;
-  border-radius: 0.5rem;
   padding: 0.25rem 1rem;
 }
 </style>
diff --git a/camunda-formio-tasklist-vue/src/components/layout/LeftSider.vue b/camunda-formio-tasklist-vue/src/components/layout/LeftSider.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="cft-task-list-container">
+  <div class="cft-task-list-container rounded border">
     <TaskListSearch
       ref="taskListSearchRef"
       @update-task-list="onSearchUpdateTasklistResult"
@@ -119,7 +119,7 @@ import {
   Component, Mixins, Prop , Watch
 } from "vue-property-decorator";
 import {
-  DisableComponentPropPayload,FilterPayload,Payload
+  DisableComponentPropPayload,Payload
 } from "../../models";
 import BaseMixin from "../../mixins/BaseMixin.vue";
 import Pagination from "./Pagination.vue";
@@ -149,7 +149,11 @@ export default class LeftSider extends Mixins(BaseMixin) {
     default: 0
   }) private containerHeight!: number;
   @Prop() private disableOption!: DisableComponentPropPayload;
-  @Prop() private filterList: FilterPayload[] = []
+
+  @Prop({
+    default:()=>[]
+  }) private filterList ;
+
   @serviceFlowModule.Getter("getFormsFlowTaskCurrentPage")
   private getFormsFlowTaskCurrentPage: any;
   @serviceFlowModule.Getter("getFormsFlowTaskId")
@@ -165,9 +169,7 @@ export default class LeftSider extends Mixins(BaseMixin) {
   public setFormsFlowTaskId: any;
   @serviceFlowModule.Mutation("setFormsFlowactiveIndex")
   public setFormsFlowactiveIndex: any;
-   private selectedFilterTaskVariable: object= {
-
-   };
+  private selectedFilterTaskVariable: any;
   private getProcessDefinitions: Array<any> = [];
   private processDefinitionId = "";
   private currentPage = 1;
@@ -247,12 +249,7 @@ export default class LeftSider extends Mixins(BaseMixin) {
     if(this.filterList.length&&this.selectedfilterId){
       this.filterList.forEach(filterListItem=>{
         if(filterListItem.id===this.selectedfilterId){
-          const newFilterVaribale= {
-          };
-          filterListItem.properties?.variables?.forEach(item => {
-            newFilterVaribale[item.name]=item.label;
-          });
-          this.selectedFilterTaskVariable= newFilterVaribale;
+          this.selectedFilterTaskVariable= filterListItem.properties?.variables || [];
         }
       });
     }
@@ -261,9 +258,9 @@ export default class LeftSider extends Mixins(BaseMixin) {
   /*** to calculate the height and handling scroll views accordingly */
   calculateViewHeights() {
     const searchHeight = (this.$refs.taskListSearchRef as any)?.$el?.offsetHeight || 0;
-    const paginationHeight = (this.$refs.taskListPaginationRef as any)?.$el?.offsetHeight || 0;
+    // const paginationHeight = (this.$refs.taskListPaginationRef as any)?.$el?.offsetHeight || 0;
     if (this.containerHeight > 250) {
-      this.listHeight = `${this.containerHeight - (searchHeight + paginationHeight)}px`;
+      this.listHeight = `${this.containerHeight - (searchHeight + 45)}px`;
     }
   }
 
@@ -307,7 +304,6 @@ export default class LeftSider extends Mixins(BaseMixin) {
 <style lang="scss" scoped>
 .cft-task-list-container {
   background: #fff;
-  border-radius: 0.5rem;
   .cft-list-group {
     height: 100px;
     overflow-y: auto;

diff --git a/camunda-formio-tasklist-vue/src/components/search/TaskListAddSearchIgnoreCase.vue b/camunda-formio-tasklist-vue/src/components/search/TaskListAddSearchIgnoreCase.vue
@@ -37,7 +37,7 @@
           <input
             class="form-check-input"
             type="checkbox"
-            v-model="getVariableNameIgnoreCase"
+            :value="getVariableNameIgnoreCase"
             @change="updateNameCase"
             id="filterNameCheckbox"
           >
@@ -52,7 +52,7 @@
           <input
             class="form-check-input"
             type="checkbox"
-            v-model="getVariableValueIgnoreCase"
+            :value="getVariableValueIgnoreCase"
             @change="updateValueCase"
             id="filterValueCheckbox"
           >

diff --git a/camunda-formio-tasklist-vue/src/components/search/TaskListSearch.vue b/camunda-formio-tasklist-vue/src/components/search/TaskListSearch.vue
@@ -95,7 +95,7 @@ export default class TaskListSearch extends Mixins(BaseMixin) {
   }
 
   updateSearchInput(index: number) {
-    this.selectedSearchQueries[index].value = "";
+ 
     Vue.set(this.showSearchState, index, SEARCH_BOX_STATE.INSERT);
   }
-Original file line number
+Diff line change
@@ Expand Up @@
       }
       updateSearchInput(index: number) {
-        this.selectedSearchQueries[index].value = "";
         Vue.set(this.showSearchState, index, SEARCH_BOX_STATE.INSERT);
       }
@@ Expand Down @@