Merge branch 'master' into dev

Author: shuhaib-aot

camunda-formio-tasklist-vue/src/components/TaskList.vue

@@ -39,13 +39,15 @@
             :filterList="filterList"
           />
         </div>
+
        <!-- need to bring here right side -->
         <div
           class="ctf-task-details-container ms-md-2 rounded"
           :class="{ 'col-12 mx-0': !maximize ,'col-md-9 col-12':maximize}"
         >
 
        <!-- single taks loading -->
+
           <div
             v-if="singleTaskLoading"
             class="d-flex justify-content-center align-items-center"
@@ -55,7 +57,18 @@
               role="status"
             >
               <span class="sr-only">Loading...</span>
+
             </div>
+          </template>
+          <div
+            v-else
+            class="d-flex align-items-center justify-content-center task-details-empty"
+            :style="{
+              height: taskScrollableHeight
+            }"
+          >
+            <i class="fa fa-exclamation-circle"></i>
+            <h4 class="mt-0 mx-2">Please select a task from the list</h4>
           </div>
        <!-- single task loading end -->
 
@@ -191,6 +204,7 @@ const StoreServiceFlowModule = namespace("serviceFlowModule");
     BpmnViewer,
     RightSider,
  
+
   },
 })
 export default class Tasklist extends Mixins(TaskListMixin) {
@@ -237,6 +251,7 @@ export default class Tasklist extends Mixins(TaskListMixin) {
 
   public perPage: number = 10;
   private filterList: FilterPayload[] = [];
+
   private userEmail: string = "external";
   private selectedfilterId: string = "";
   private xmlData!: string;
@@ -280,7 +295,7 @@ export default class Tasklist extends Mixins(TaskListMixin) {
     this.userName = getUserName();
   }
 
- 
+
 
   async onFormSubmitCallback(actionType = "") {
     if (this.task.id !== null) {
@@ -289,8 +304,7 @@ export default class Tasklist extends Mixins(TaskListMixin) {
     }
   }
 
- 
- 
+
   async onBPMTaskFormSubmit(taskId: string, actionType: string) {
     let formRequestFormat: FormRequestPayload = {
       variables: {
@@ -468,13 +482,16 @@ export default class Tasklist extends Mixins(TaskListMixin) {
 
 
 
+
   async getBPMTaskandReload(){
     await this.getBPMTaskDetail(this.getFormsFlowTaskId);
     await this.reloadLHSTaskList();
+
   }
   
 
 
+
   async fetchFullTaskList(filterId: string, requestData: Payload) {
     const taskList = await CamundaRest.filterTaskList(
       this.token,
@@ -519,7 +536,6 @@ export default class Tasklist extends Mixins(TaskListMixin) {
   }
 
 
-
   async fetchTaskDetails(taskId: string) {
     await Promise.all([
       this.getBPMTaskDetail(taskId),
@@ -579,6 +595,7 @@ export default class Tasklist extends Mixins(TaskListMixin) {
     this.setFormsFlowactiveIndex(NaN);
     this.taskLoading = true;
     this.$root.$on("call-fetchTaskDetails", async (para: any) => {
+
       this.singleTaskLoading = true;
       this.setFormsFlowTaskId(para.selectedTaskId);
       await this.fetchTaskDetails(this.getFormsFlowTaskId);
@@ -711,7 +728,7 @@ export default class Tasklist extends Mixins(TaskListMixin) {
 
   }
 
- 
+
 
   beforeDestroy() {
     SocketIOService.disconnect();
@@ -734,10 +751,12 @@ export default class Tasklist extends Mixins(TaskListMixin) {
 }
 </script>
 
+
  
 
 <style>
 .highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
     fill: rgb(56,89,138) !important;
   }
+
 </style>

camunda-formio-tasklist-vue/src/components/layout/LeftSider.vue

@@ -93,6 +93,7 @@
            :variables="task._embedded.variable"
            :filterTaskVariable="selectedFilterTaskVariable"/>
 
+
         </div>
       </template>
       <div
@@ -174,6 +175,7 @@ export default class LeftSider extends Mixins(BaseMixin) {
   @serviceFlowModule.Mutation("setFormsFlowactiveIndex")
   public setFormsFlowactiveIndex: any;
   private selectedFilterTaskVariable: Array<any> = [];
+
   private getProcessDefinitions: Array<any> = [];
   private processDefinitionId = "";
   private currentPage = 1;

camunda-formio-tasklist-vue/src/components/search/TaskSearchItem.vue

@@ -90,8 +90,10 @@
         v-if="showVariableValueState[index] === 's'"
         @click="updateVariableInput(index)"
       >
+
        <span v-if="selectedSearchQueries[index].variable== ''">0</span>
        <span v-else data-bs-toggle="tooltip" data-bs-placement="top" :title="selectedSearchQueries[index].variable "> {{ selectedSearchQueries[index].variable }}</span>
+
       </div>
 
     </div>
@@ -143,11 +145,13 @@
           <input 
           class="form-control"
           :type="showCalender?'datetime-local':'text'"
+
           v-model="selectedSearchQueries[index].value"
           v-on:keyup.enter="
                 setSearchQueryValue(selectedSearchQueries, index);
                 showSearchValueItem(index);"
         >
+
         </div>
         <div>
           <button
@@ -167,18 +171,21 @@
          ><i class="fa fa-times" aria-hidden="true" ></i>
         </button>
         </div>
+
       </template>
       <div
         v-if="showSearchState[index] === 's' && query.type !== 'date'"
         @click="updateSearchInput(index)"
       >
+
         <div v-if="selectedSearchQueries[index].value===''">
         0
       </div>
       <div v-else >
         {{ selectedSearchQueries[index].value }}
       </div>
       </div>
+
     </div>
 
   </div>
@@ -255,6 +262,22 @@ export default class TaskSearchItem extends Vue {
     
   }
 
+  @Watch("selectedfilterId")
+  settingTaskVariable (){
+    if(this.filterList.length&&this.selectedfilterId){
+      this.filterList.forEach(filterListItem=>{
+        if(filterListItem.id===this.selectedfilterId){
+          this.filteredVariable = filterListItem?.properties?.variables ||[];
+          this.taskVariableArray= filterListItem?.properties?.variables ||[];
+        }
+      });
+    }
+  }
+  mounted(){
+    this.settingTaskVariable();
+    
+  }
+
   deleteSearchQueryElement(query: SearchOptionPayload, index: number) {
     this.$root.$emit("call-deleteSearchQueryElement", {
       query: query,
@@ -377,3 +400,4 @@ export default class TaskSearchItem extends Vue {
     color: transparent;
 }
 </style>
+

camunda-formio-tasklist-vue/src/components/taskVariable/TaskVariable.vue

@@ -12,8 +12,10 @@
         </span>
         </div>
         <div class="text-truncate ">
+
           <span data-toggle="tooltip"  class="ctf-description" data-placement="top" :title="item.value.toString()">
          {{ item.value.toString()}}  
+
           </span>
         </div>
         </div>
@@ -38,7 +40,7 @@ import {
   Vue,
   Watch,
 } from "vue-property-decorator";
- 
+
 @Component
 export default class TaskVariable extends Vue {
     @Prop() private variables!: any[];
@@ -85,6 +87,7 @@ export default class TaskVariable extends Vue {
       }
     }
 
+
  
 }
 </script>

camunda-formio-tasklist-vue/src/services/SearchOptions.ts

@@ -160,6 +160,7 @@ export const FILTER_OPERATOR_TYPES = {
   AFTER: "after",
 };
 
+
 const convertingValueNumber =(searchOption: any)=>{
   // if it is not like operator
   if(searchOption.operator===FILTER_OPERATOR_TYPES.LIKE){
@@ -177,9 +178,8 @@ const convertingValueNumber =(searchOption: any)=>{
       newValue= Number(value);
     }
     return newValue;
-  }
- 
-};
+  };
+
 
 
 const getProcessedParamObject = (searchOption: SearchOptionPayload) =>
@@ -242,6 +242,7 @@ export const getFormattedQueryListParams = (
           name: searchOption.variable,
           operator: getVariableOperator(searchOption.operator),
           value: convertingValueNumber(searchOption),
+
         });
       }
     }