Merged in feature/PMCORE-3082 (pull request #7979)

PMCORE-3082

Approved-by: Henry Jonathan Quispe Quispe

resources/assets/js/components/search/CasesFilter.vue

@@ -15,6 +15,15 @@
                 name="flavour-2a"
                 stacked
             ></b-form-radio-group>
+            <b-form-checkbox
+                id="checkbox-1"
+                v-model="byProcessName"
+                name="checkbox-1"
+                value="processName"
+
+            >
+                {{$t('ID_BY_PROCESS_NAME') }}
+            </b-form-checkbox>
         </b-form-group>
       </template>
     </SearchPopover>
@@ -68,7 +77,7 @@
 
 <script>
 import SearchPopover from "./popovers/SearchPopover.vue";
-import CaseIntegerNumber from "./popovers/CaseIntegerNumber.vue";
+import CaseNumber from "./popovers/CaseNumber.vue";
 import CaseTitle from "./popovers/CaseTitle.vue";
 import ProcessName from "./popovers/ProcessName.vue";
 import DateFilter from "./popovers/DateFilter.vue";
@@ -80,7 +89,7 @@ export default {
   props: ["filters", "title"],
   components: {
     SearchPopover,
-    CaseIntegerNumber,
+    CaseNumber,
     CaseTitle,
     ProcessName,
     DateFilter,
@@ -94,7 +103,7 @@ export default {
 
         filterItems: [
             {
-          type: "CaseIntegerNumber",
+            type: "CaseNumber",
             id: "caseNumber",
             title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
                 "ID_BY_CASE_NUMBER"
@@ -105,7 +114,7 @@ export default {
             tagPrefix: this.$i18n.t("ID_SEARCH_BY_CASE_NUMBER"),
             items: [
                 {
-              id: "caseNumber",
+                id: "filterCases",
                 value: "",
                 },
             ],
@@ -135,31 +144,6 @@ export default {
                 return `${this.tagPrefix} ${data[0].value}`;
             },
             },
-        {
-          type: "ProcessName",
-          id: "processName",
-          title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
-            "ID_BY_PROCESS_NAME"
-          )}`,
-          optionLabel: this.$i18n.t("ID_BY_PROCESS_NAME"),
-          detail: "",
-          tagText: "",
-          tagPrefix: this.$i18n.t("ID_SEARCH_BY_PROCESS_NAME"),
-          autoShow: true,
-          items: [
-            {
-              id: "process",
-              value: "",
-              options: [],
-              placeholder: this.$i18n.t("ID_PROCESS_NAME"),
-            },
-          ],
-          makeTagText: function (params, data) {
-            return `${this.tagPrefix} ${
-              (data[0].options && data[0].options.label) || ""
-            }`;
-          },
-        },
             {
             type: "TaskTitle",
             id: "taskTitle",
@@ -184,8 +168,31 @@ export default {
             },
             },
         ],
+        processName: {
+                type: "ProcessName",
+                id: "processName",
+                title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_BY_PROCESS_NAME')}`,
+                optionLabel: this.$i18n.t('ID_BY_PROCESS_NAME'),
+                detail: "",
+                tagText: "",
+                tagPrefix:  this.$i18n.t('ID_SEARCH_BY_PROCESS_NAME'),
+                autoShow: false,
+                items:[
+                    {
+                        id: "process",
+                        value: "",
+                        options: [],
+                        placeholder: this.$i18n.t('ID_PROCESS_NAME')
+                    }
+                ],
+                makeTagText: function (params, data) {
+
+                    return  `${this.tagPrefix} ${data[0].options && data[0].options.label || ''}`;
+                }
+            },
         selected: "",
         itemModel: {},
+        byProcessName: ""
     };
   },
   mounted() {
@@ -199,11 +206,14 @@ export default {
     }
   },
   watch: {
-    filters: function (filters) {
+    filters: { 
+        immediate: true, 
+        handler(newVal, oldVal) { 
             this.searchTags = [];
-      this.selected = "";
+            this.selected = [];
-      this.setFilters(filters);
+            this.setFilters(newVal);
-    },
+        }
+    }
   },
   methods: {
     /**
@@ -219,18 +229,39 @@ export default {
             return o.id === self.selected;
         });
         if  (element) {
-        _.forEach(element.items, function (value, key) {
+            initialFilters = this.prepareFilterItems(element.items, this.selected, true);
+        }
+        //adding process name filter
+        initialFilters =[...new Set([...initialFilters,...this.prepareFilterItems(this.processName.items, self.byProcessName, true)])];
+        this.$emit("onUpdateFilters", {params: initialFilters, refresh: false}); 
+    },
+    /**
+     * Prepare the filter items
+     * @param {array} items
+     * @param {id} string
+     * @param {boolean} restore
+     */
+    prepareFilterItems(items, id, restore){
+        let initialFilters = [],
+            self = this,
+            filter,
+            item;
+        _.forEach(items, function(value, key) {
+            filter = _.find(self.filters, function(o) { return o.filterVar === value.id; });
+            if (filter && restore) {
+                initialFilters.push(filter);
+            } else {
                 item = {
                     filterVar: value.id,
-            fieldId: self.selected,
+                    fieldId: id,
-            value: "",
+                    value:  '',
                     label: "",
-            options: [],
+                    options: []
                 };
                 initialFilters.push(item);
-        });
             }
-      this.$emit("onUpdateFilters", { params: initialFilters, refresh: false });
+        });
+        return initialFilters;
     },
     /**
      * Set Filters and make the tag labels
@@ -248,6 +279,12 @@ export default {
           self.itemModel[component.id] = component;
           self.itemModel[component.id].autoShow = typeof item.autoShow !== "undefined" ? item.autoShow : true
         }
+        if(item.fieldId === "processName") {
+            self.searchTags.push(self.processName.id);
+            self.byProcessName = self.processName.id;
+            self.itemModel[self.processName.id] = self.processName;
+            self.itemModel[self.processName.id].autoShow = typeof self.processName.autoShow !== "undefined" ? self.processName.autoShow  : true;
+        }
       });
     },
     dataToFilter(id) {
@@ -293,8 +330,16 @@ export default {
      * @param {string} tag filter identifier
      */
     customRemove(removeTag, tag) {
-      this.selected = "";
+        let temp = [];
-      this.$emit("onUpdateFilters", { params: [], refresh: true });
+        _.forEach(this.filters, function(item, key) {
+            if(item.fieldId !== tag) { 
+                temp.push(item);   
+            }
+        });
+        if (tag === "processName") {
+            this.byProcessName = "";
+        }
+        this.$emit("onUpdateFilters", {params: temp, refresh: true});
     },
     /**
      * Update the filter model this is fired from filter popaver save action

resources/assets/js/components/search/MyCasesFilter.vue

@@ -16,6 +16,14 @@
                         stacked
                     ></b-form-radio-group>
                 </b-form-group>
+                <b-form-checkbox
+                    id="checkbox-1"
+                    v-model="byProcessName"
+                    name="checkbox-1"
+                    value="processName"
+                >
+                    {{$t('ID_BY_PROCESS_NAME') }}
+                </b-form-checkbox>
             </template>
         </SearchPopover>
 
@@ -69,7 +77,7 @@
 
 <script>
 import SearchPopover from "./popovers/SearchPopover.vue";
-import CaseIntegerNumber from "./popovers/CaseIntegerNumber.vue";
+import CaseNumber from "./popovers/CaseNumber.vue";
 import CaseTitle from "./popovers/CaseTitle.vue";
 import ProcessName from "./popovers/ProcessName.vue";
 import DateFilter from "./popovers/DateFilter.vue";
@@ -81,7 +89,7 @@ export default {
     props: ["filters","title"],
     components:{
         SearchPopover,
-        CaseIntegerNumber,
+        CaseNumber,
         CaseTitle,
         ProcessName,
         DateFilter,
@@ -92,10 +100,9 @@ export default {
             searchLabel: this.$i18n.t('ID_SEARCH'),
             addSearchTitle: this.$i18n.t('ID_ADD_SEARCH_FILTER_CRITERIA'),
             searchTags: [],
-        
             filterItems: [
                 {   
-                    type: "CaseIntegerNumber",
+                    type: "CaseNumber",
                     id: "caseNumber",
                     title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_BY_CASE_NUMBER')}`,
                     optionLabel: this.$i18n.t('ID_BY_CASE_NUMBER'),
@@ -104,7 +111,7 @@ export default {
                     tagPrefix:  this.$i18n.t('ID_SEARCH_BY_CASE_NUMBER'),
                     items:[
                         {
-                            id: "caseNumber",
+                            id: "filterCases",
                             value: ""
                         }
                     ],
@@ -132,28 +139,6 @@ export default {
                         return  `${this.tagPrefix} ${data[0].value}`;
                     }
                 }, 
-                {
-                    type: "ProcessName",
-                    id: "processName",
-                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_BY_PROCESS_NAME')}`,
-                    optionLabel: this.$i18n.t('ID_BY_PROCESS_NAME'),
-                    detail: "",
-                    tagText: "",
-                    tagPrefix:  this.$i18n.t('ID_SEARCH_BY_PROCESS_NAME'),
-                    autoShow: true,
-                    items:[
-                        {
-                            id: "process",
-                            value: "",
-                            options: [],
-                            placeholder: this.$i18n.t('ID_PROCESS_NAME')
-                        }
-                    ],
-                    makeTagText: function (params, data) {
-
-                        return  `${this.tagPrefix} ${data[0].options && data[0].options.label || ''}`;
-                    }
-                },
                 {
                     type: "TaskTitle",
                     id: "taskTitle",
@@ -226,8 +211,31 @@ export default {
                     }
                 },
             ],
+            processName: {
+                type: "ProcessName",
+                id: "processName",
+                title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_BY_PROCESS_NAME')}`,
+                optionLabel: this.$i18n.t('ID_BY_PROCESS_NAME'),
+                detail: "",
+                tagText: "",
+                tagPrefix:  this.$i18n.t('ID_SEARCH_BY_PROCESS_NAME'),
+                autoShow: false,
+                items:[
+                    {
+                        id: "process",
+                        value: "",
+                        options: [],
+                        placeholder: this.$i18n.t('ID_PROCESS_NAME')
+                    }
+                ],
+                makeTagText: function (params, data) {
+
+                    return  `${this.tagPrefix} ${data[0].options && data[0].options.label || ''}`;
+                }
+            },
             selected: "",
-            itemModel: {}
+            itemModel: {},
+            byProcessName: ""
         };
     },
     mounted() {
@@ -241,14 +249,17 @@ export default {
         }
   },
     watch: {
-        filters: function (filters) {
+        filters: { 
+            immediate: true, 
+            handler(newVal, oldVal) { 
                 this.searchTags = [];
-            this.selected = "";
+                this.selected = [];
-            this.setFilters(filters);
+                this.setFilters(newVal);
-            
+            }
         }
     },
     methods: {
+        
         /**
          * Add filter criteria save button handler
          */
@@ -257,22 +268,42 @@ export default {
                 element,
                 initialFilters = [],
                 item;
-                // element = _.find(this.filterItems, function(o) { return o.id === self.selected; });
             this.$root.$emit('bv::hide::popover');
             element = _.find(this.filterItems, function(o) { return o.id === self.selected; });
             if  (element) {
-                    _.forEach(element.items, function(value, key) {
+                initialFilters = this.prepareFilterItems(element.items, this.selected, true);
+            }
+            //adding process name filter
+            initialFilters =[...new Set([...initialFilters,...this.prepareFilterItems(this.processName.items, self.byProcessName, true)])];
+            this.$emit("onUpdateFilters", {params: initialFilters, refresh: false}); 
+        },
+        /**
+         * Prepare the filter items
+         * @param {array} items
+         * @param {id} string
+         * @param {boolean} restore
+         */
+        prepareFilterItems(items, id, restore){
+            let initialFilters = [],
+                self = this,
+                filter,
+                item;
+            _.forEach(items, function(value, key) {
+                filter = _.find(self.filters, function(o) { return o.filterVar === value.id; });
+                if (filter && restore) {
+                    initialFilters.push(filter);
+                } else {
                     item = {
                         filterVar: value.id,
-                            fieldId: self.selected,
+                        fieldId: id,
                         value:  '',
                         label: "",
                         options: []
                     };
                     initialFilters.push(item);
-                    });
                 }
-            this.$emit("onUpdateFilters", {params: initialFilters, refresh: false}); 
+            });
+            return initialFilters;
         },
         /**
          * Set Filters and make the tag labels
@@ -288,6 +319,12 @@ export default {
                     self.itemModel[component.id] = component;
                     self.itemModel[component.id].autoShow = typeof item.autoShow !== "undefined" ? item.autoShow : true;
                 }
+                if(item.fieldId === "processName") {
+                    self.searchTags.push(self.processName.id);
+                    self.byProcessName = self.processName.id;
+                    self.itemModel[self.processName.id] = self.processName;
+                    self.itemModel[self.processName.id].autoShow = typeof self.processName.autoShow !== "undefined" ? self.processName.autoShow  : true;
+                }
             });
         },
         dataToFilter(id) {
@@ -327,8 +364,16 @@ export default {
          * @param {string} tag filter identifier
          */
         customRemove(removeTag, tag) {
-            this.selected = "";
+            let temp = [];
-            this.$emit("onUpdateFilters",  {params: [], refresh: true});
+            _.forEach(this.filters, function(item, key) {
+                if(item.fieldId !== tag) { 
+                    temp.push(item);   
+                }
+            });
+            if (tag === "processName") {
+                this.byProcessName = "";
+            }
+            this.$emit("onUpdateFilters", {params: temp, refresh: true});
         },
         /**
          * Update the filter model this is fired from filter popaver save action