From c2fa6c4a82e18e1461e371812fd112cf6c486c87 Mon Sep 17 00:00:00 2001
From: shuhaib s <95394061+shuhaib-aot@users.noreply.github.com>
Date: Tue, 5 Apr 2022 10:10:37 +0530
Subject: [PATCH] =?UTF-8?q?Dev=20to=20Master=20=F0=9F=91=8D=20=20(#223)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fixed container height
* Task variable order
* changed authorization API
---
 camunda-formio-tasklist-vue/docs/CHANGELOG.md |  9 ++++
 camunda-formio-tasklist-vue/package.json      |  5 +-
 .../src/components/TaskList.vue               | 40 ++++++++++------
 .../src/components/form/FormListModal.vue     |  6 ++-
 .../src/components/layout/Header.vue          |  3 +-
 .../src/components/layout/LeftSider.vue       | 26 +++++------
 .../search/TaskListAddSearchIgnoreCase.vue    |  4 +-
 .../src/components/search/TaskListSearch.vue  |  2 +-
 .../components/taskVariable/TaskVariable.vue  | 46 +++++++++++++++++--
 .../src/services/SearchOptions.ts             | 26 +++++++++--
 10 files changed, 120 insertions(+), 47 deletions(-)

diff --git a/camunda-formio-tasklist-vue/docs/CHANGELOG.md b/camunda-formio-tasklist-vue/docs/CHANGELOG.md
index 03d2ead9..692da4b7 100644
--- 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
index f89fe85d..753c11db 100644
--- 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 <krishnan.s@aot-technologies.com> (https://github.com/krishnan-aot)",
     "Kurian Benoy <kurian.benoy@aot-technologies.com> (https://github.com/kurianbenoy-aot)",
     "Shabeeb <faiz.shabeeb@aot-technologies.com> (https://github.com/shabeeb-aot)",
-    "Shuhaib S <shuhaib.s@aot-technologies.com> (https://github.com/shuhaib-aot)"
+    "Shuhaib S <shuhaib.s@aot-technologies.com> (https://github.com/shuhaib-aot)",
+    "Fahad k <fahad.k@aot-technologies.com> (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
index 6fc17b04..79ba1d6a 100644
--- 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
index d3d8861b..fb65046d 100644
--- 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
index e0097600..f34de69c 100644
--- 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
index a993f580..cf737c59 100644
--- 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
index a5052845..41a2e0cb 100644
--- 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
index 452fde3d..6a254e15 100644
--- 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);
   }
 
diff --git a/camunda-formio-tasklist-vue/src/components/taskVariable/TaskVariable.vue b/camunda-formio-tasklist-vue/src/components/taskVariable/TaskVariable.vue
index 46b7a2c8..8350221e 100644
--- a/camunda-formio-tasklist-vue/src/components/taskVariable/TaskVariable.vue
+++ b/camunda-formio-tasklist-vue/src/components/taskVariable/TaskVariable.vue
@@ -1,14 +1,14 @@
 <template>
-       <div class="d-flex flex-wrap justify-content-between">
+       <div v-if="valueLabelArray.length" class="d-flex flex-wrap justify-content-between">
         <div 
-        v-for="(item, index) in variables"
+        v-for="(item, index) in valueLabelArray"
         :key="index"
         class="col-sm-12 col-lg-6 p-0 px-1"
        >
-        <div class="my-2" v-if="(showMore||index < 2) && item.value!==undefined&&filterTaskVariable[item.name]">
+        <div class="my-2">
         <div class="text-truncate ">
         <span style="font-weight:bold; font-size:0.9rem">
-           {{filterTaskVariable[item.name]}}
+           {{item.label}}
         </span>
         </div>
         <div class="text-truncate ">
@@ -36,6 +36,7 @@ import {
   Component,
   Prop,
   Vue,
+  Watch,
 } from "vue-property-decorator";
 import {
   getFormattedDateAndTime
@@ -45,11 +46,46 @@ export default class TaskVariable extends Vue {
     @Prop() private variables!: any[];
     @Prop() private filterTaskVariable: any;
     private showMore: boolean = false;
-
+    private variableCount =0;
+    private  valueLabelArray: Array<any>= [] ;
     toggleShowMore(){
       this.showMore= !this.showMore;
     }
 
+    mounted(){
+      this.returningData();
+    }
+
+    @Watch('showMore')
+    updateData(){
+      this.returningData();
+      if(this.showMore){
+        this.variableCount=0;
+      }
+    }
+
+    returningData(){
+      if(this.filterTaskVariable){
+        const newArray: any =[];
+        this.filterTaskVariable.forEach((taskItem)=>{
+          const data = this.variables.find(variableItem=> variableItem.name===taskItem.name);
+          if(data&&data.value!==(undefined || null)){
+            if( this.variableCount<2){
+              this.variableCount++;
+              newArray.push({
+                label:taskItem.label,value:data.value
+              });
+            }else if(this.showMore){
+              newArray.push({
+                label:taskItem.label,value:data.value
+              });
+
+            } 
+          } 
+        });
+        this.valueLabelArray= newArray;
+      }
+    }
 
     checkVlaueIsDateOrNOt=(value: any)=>{
       const isValueNumber = isNaN(value);
diff --git a/camunda-formio-tasklist-vue/src/services/SearchOptions.ts b/camunda-formio-tasklist-vue/src/services/SearchOptions.ts
index 458e5641..f8afc133 100644
--- a/camunda-formio-tasklist-vue/src/services/SearchOptions.ts
+++ b/camunda-formio-tasklist-vue/src/services/SearchOptions.ts
@@ -24,8 +24,8 @@ export const taskSearchFilters: SearchOptionPayload[] = [
   {
     label: "Task Variables",
     key: "taskVariables",
-    compares: ["=", ">", ">=", "!=", "<", "<="],
-    values: ["eq", "gt", "gte", "neq", "lt", "lte"],
+    compares: ["=", ">", ">=", "!=", "<", "<=","like"],
+    values: ["eq", "gt", "gte", "neq", "lt", "lte","like"],
     type: FilterSearchTypes.VARIABLES,
     variable: "",
     value: "",
@@ -34,8 +34,8 @@ export const taskSearchFilters: SearchOptionPayload[] = [
   {
     label: "Process Variables",
     key: "processVariables",
-    compares: ["=", ">", ">=", "!=", "<", "<="],
-    values: ["eq", "gt", "gte", "neq", "lt", "lte"],
+    compares: ["=", ">", ">=", "!=", "<", "<=","like"],
+    values: ["eq", "gt", "gte", "neq", "lt", "lte","like"],
     type: FilterSearchTypes.VARIABLES,
     variable: "",
     value: "",
@@ -160,6 +160,21 @@ export const FILTER_OPERATOR_TYPES = {
   AFTER: "after",
 };
 
+const convertingValueNumber =(value: any)=>{
+  let newValue: any ;
+  if(value==='false'){
+    newValue=false;
+  }else if(value==='true'){
+    newValue= true;
+  }else if(isNaN(value)){
+    newValue=value;
+  }else{
+    newValue= Number(value);
+  }
+  return newValue;
+};
+
+
 const getProcessedParamObject = (searchOption: SearchOptionPayload) =>
 {
   const option: any = {
@@ -219,7 +234,7 @@ export const getFormattedQueryListParams = (
         paramList[searchOption.key].push({
           name: searchOption.variable,
           operator: getVariableOperator(searchOption.operator),
-          value: searchOption.value,
+          value: convertingValueNumber(searchOption.value),
         });
       }
     }
@@ -256,3 +271,4 @@ export const getFormattedQueryListParams = (
   return isParamsHasValue ? resultList : {
   };
 };
+