add my cases filters

restore xml forms

fix auto show

resources/assets/js/api/Cases.js

@@ -7,10 +7,7 @@ export let cases = {
     myCases(data) {
         return Api.get({
             service: "MY_CASES",
-            params: {
+            params: data,
-                filter: data.filter,
-                paged: data.paged
-            },
             keys: {}
         });
     },

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

@@ -1,16 +1,11 @@
 <template>
     <div>
         <b-container fluid class="bv-example-row" id="my-container">
-          
-            <b-row>
-                <b-col md="10"><h5>{{$t('ID_OPEN_SEARCH')}}</h5></b-col>
-            </b-row>
             <b-row>
                 <b-col md="4">
                     <div class="d-flex flex-row">
                         <SearchPopover
                             target="popover-target-1"
-                            @closePopover="onClose"
                             @savePopover="onOk"
                             :title="addSearchTitle"
                         >
@@ -29,7 +24,9 @@
                                 <b-form-group>
                                     <b-form-checkbox-group
                                         v-model="selected"
-                                        :options="filterOptions"
+                                        :options="filterItems"
+                                        value-field="id"
+                                        text-field="optionLabel"
                                         name="flavour-2a"
                                         stacked
                                     ></b-form-checkbox-group>
@@ -105,19 +102,20 @@
                                         v-for="tag in tags"
                                         @remove="customRemove(removeTag, tag)"
                                         :key="tag"
-                                        :title="searchTagsModels[tag].tagText"
+                                        :title="tag"
                                         :variant="tagVariant"
                                         class="mr-1"
                                     >   
                                         
                                         <div :id="tag">
                                             <i class="fas fa-tags"></i>
-                                            {{ searchTagsModels[tag].tagText }}
+                                             {{ tagContent(tag) }}
                                         </div>
                                         <component
-                                            v-bind:is="tag"
+                                            v-bind:is="tagComponent(tag)"
-                                            v-bind:info="searchTagsModels[tag]"
+                                            v-bind:info="tagInfo(tag)"
                                             v-bind:tag="tag"
+                                            v-bind:filter="dataToFilter(tag)"
                                             @updateSearchTag="updateSearchTag"
                                         />
                                     </b-form-tag>
@@ -169,8 +167,8 @@
 <script>
 import SearchPopover from "./popovers/SearchPopover.vue";
 import CaseNumber from "./popovers/CaseNumber.vue";
-import DueDate from "./popovers/DueDate.vue";
+
-import LastModifiedDate from "./popovers/LastModifiedDate.vue";
+import DateFilter from "./popovers/DateFilter.vue";
 import CaseTitle from "./popovers/CaseTitle.vue";
 import ProcessName from "./popovers/ProcessName.vue";
 import CasePriority from "./popovers/CasePriority.vue";
@@ -179,109 +177,153 @@ import CurrentUser from "./popovers/CurrentUser.vue";
 import api from "./../../api/index";
 
 export default {
-    name: "GenericFilter",
+    name: "AdvancedFilter",
     props: ["id", "name", "filters"],
     components: {
         SearchPopover,
         CaseNumber,
-        DueDate,
-        LastModifiedDate,
         CaseTitle,
         ProcessName,
         CasePriority,
         CaseStatus,
-        CurrentUser
+        CurrentUser,
+        DateFilter,
     },
     data() {
         return {
             addSearchTitle: this.$i18n.t('ID_ADD_SEARCH_FILTER_CRITERIA'),
-            
             searchTags: [],
-            searchTagsModels: {
+            filterItems: [
-                CaseNumber: {
+                {   
-                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_CASE')}${this.$i18n.t('ID_IUD')}`,
+                    type: "CaseNumber",
+                    id: "caseNumber",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_IUD')}`,
                     optionLabel: this.$i18n.t('ID_IUD'),
                     detail: this.$i18n.t('ID_PLEASE_SET_A_RANGE_TO_CASES_TO_SEARCH'),
                     tagText: "",
-                    filterBy: ["filterCases"],
+                    tagPrefix:  this.$i18n.t('ID_IUD'),
-                    values: {}
+                    items:[
+                        {
+                            id: "filterCases",
+                            value: ""
+                        }
+                    ],
+                    makeTagText: function (params, data) {
+                          return  `${params.tagPrefix}: ${data[0].value}`;
+                    }
                 },
-                DueDate: {
+                {
-                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_DUE_DATE')}`,
+                    type: "CaseTitle",
-                    optionLabel: this.$i18n.t('ID_DUE_DATE'),
+                    id: "caseTitle",
-                    detail: this.$i18n.t('ID_PLEASE_SET_A_RANGE_OF_CASES_DUE_DATE_TO_SEARCH'),
-                    tagText: "",
-                    filterBy: ["dueDateFrom", "dueDateTo"],
-                    values: {}
-                },
-                LastModifiedDate: {
-                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_LAST_MODIFIED_DATE')}`,
-                    optionLabel: this.$i18n.t('ID_LAST_MODIFIED_DATE'),
-                    detail: this.$i18n.t('ID_PLEASE_SET_A_RANGE_OF_LAST_MODIFIED_CASES_DATE_TO_SEARCH'),
-                    tagText: "",
-                    filterBy: ["delegationDateFrom", "delegationDateTo"],
-                    values: {}
-                },
-                CaseTitle: {
                     title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_CASE_TITLE')}`,
                     optionLabel: this.$i18n.t('ID_CASE_TITLE'),
+                    tagPrefix:  this.$i18n.t('ID_CASE_TITLE'),
                     detail: "",
                     tagText: "",
-                    filterBy: ["caseTitle"],
+                    items:[
-                    values: {}
+                        {
+                            id: "caseTitle",
+                            value: ""
+                        }
+                    ],
+                    makeTagText: function (params, data) {
+                        return  `${this.tagPrefix}: ${data[0].value}`;
+                    }
                 },
-                ProcessName: {
+                {
+                    type: "ProcessName",
+                    id: "processName",
                     title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_PROCESS_NAME')}`,
                     optionLabel: this.$i18n.t('ID_PROCESS_NAME'),
                     detail: "",
-                    placeholder: this.$i18n.t('ID_PROCESS_NAME'),
                     tagText: "",
-                    filterBy: ["process", "processOption"],
+                    tagPrefix:  this.$i18n.t('ID_PROCESS_NAME'),
-                    processOption: {"PRO_TITLE": ""}
+                    items:[
-                },
+                        {
-                CasePriority: {
+                            id: "process",
-                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_PRIORITY')}`,
+                            value: "",
-                    optionLabel: this.$i18n.t('ID_PRIORITY'),
+                            options: [],
-                    detail: this.$i18n.t('ID_PLEASE_SELECT_THE_PRIORITY_FOR_THE_SEARCH'),
+                            placeholder: this.$i18n.t('ID_PROCESS_NAME')
-                    options: [
+                        }
-                        { text: this.$i18n.t('ID_VERY_LOW'), value: "VL" },
-                        { text: this.$i18n.t('ID_LOW'), value: "L" },
-                        { text: this.$i18n.t('ID_NORMAL'), value: "N" },
-                        { text: this.$i18n.t('ID_HIGH'), value: "H" },
-                        { text: this.$i18n.t('ID_VERY_HIGH'), value: "VH" }
                     ],
-                    tagText: "",
+                    makeTagText: function (params, data) {
-                    filterBy: ["priorities"],
+                        return  `${params.tagPrefix} ${data[0].options && data[0].options.label || ''}`;
-                    casePriorities: []
+                    }
                 },
-                CaseStatus: {
+                {
-                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_STATUS')}`,
+                    type: "DateFilter",
-                    optionLabel: this.$i18n.t('ID_STATUS'),
+                    id: "startDate",
-                    detail: this.$i18n.t('ID_PLEASE_SELECT_THE_STATUS_FOR_THE_SEARCH'),
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_START_DATE')}`,
-                    options: [
+                    optionLabel: this.$i18n.t('ID_BY_START_DATE'),
-                        { text: this.$i18n.t('ID_CASES_STATUS_DRAFT'), value: "DRAFT" },
+                    detail: this.$i18n.t('ID_PLEASE_SET_A_RANGE_OF_CASES_START_DATE_TO_SEARCH'),
-                        { text: this.$i18n.t('ID_CASES_STATUS_TO_DO'), value: "TO_DO" },
+                    tagText: "",
-                        { text: this.$i18n.t('ID_CASES_STATUS_COMPLETED'), value: "COMPLETED" },
+                    tagPrefix:  this.$i18n.t('ID_SEARCH_BY_START_DATE'),
-                        { text: this.$i18n.t('ID_CASES_STATUS_CANCELLED'), value: "CANCELLED" },
+                    items:[
-                        { text: this.$i18n.t('ID_CASES_STATUS_PAUSED'), value: "PAUSED" },
+                        {
+                            id: "startCaseFrom",
+                            value: "",
+                            label: this.$i18n.t('ID_FROM_START_DATE')
+                        },
+                        {
+                            id: "startCaseTo",
+                            value: "",
+                            label: this.$i18n.t('ID_TO_START_DATE')
+                        }
                     ],
-                    tagText: "",
+                    makeTagText: function (params, data) {
-                    filterBy: ["caseStatuses"],
+                        return  `${params.tagPrefix} ${data[0].value} - ${data[1].value}`;
-                    caseStatuses: []
+                    }
                 },
-                CurrentUser: {
+                {
+                    type: "DateFilter",
+                    id: "finishDate",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_FINISH_DATE')}`,
+                    optionLabel: this.$i18n.t('ID_FINISH_DATE'),
+                    detail: this.$i18n.t('Please set a range of cases Finish Date to search:'),
+                    tagText: "",
+                    tagPrefix:  this.$i18n.t('ID_SEARCH_BY_FINISH_DATE'),
+                    items:[
+                        {
+                            id: "finishCaseFrom",
+                            value: "",
+                            label: this.$i18n.t('ID_FROM_FINISH_DATE'),
+                        },
+                        {
+                            id: "finishCaseTo",
+                            value: "",
+                            label: this.$i18n.t('ID_TO_FINISH_DATE'),
+                        }
+                    ],
+                    makeTagText: function (params, data) {
+                        return  `${params.tagPrefix} ${data[0].value} - ${data[1].value}`;
+                    }
+                },
+                {
+                    type: "CurrentUser",
+                    id: "currentUser",
                     title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_CURRENT_USER')}`,
                     optionLabel: this.$i18n.t('ID_CURRENT_USER'),
                     detail: "",
                     placeholder: this.$i18n.t('ID_USER_NAME'),
                     tagText: "",
-                    filterBy: ["userId", "selectedOption"],
+                    tagPrefix:  this.$i18n.t('ID_USER'),
-                    selectedOption: {"USR_FULLNAME": ""}
+                    items:[
+                        {
+                            id: "userId",
+                            value: "",
+                            options: [],
+                            placeholder: this.$i18n.t('ID_USER_NAME')
+                        }
+                    ],
+                    makeTagText: function (params, data) {
+                        return  `${params.tagPrefix} : ${data[0].label || ''}`;
                     }
                 },
-            text: "",
+            ],
+            selected: "",
+            itemModel: {},
+            filterModel: {},
             selected: [],
-            jsonFilter: {},
             caseNumber: "",
             saveModalTitle: this.$i18n.t('ID_SAVE_SEARCH'),
             localName: "",
@@ -289,109 +331,119 @@ export default {
         };
     },
     watch: {
-        filters: function (filters) {
+        filters: { 
+            immediate: true, 
+            handler(newVal, oldVal) { 
                 this.searchTags = [];
-          this.searchTags = [];
+                this.selected = [];
-          this.setFilters(filters);
+                this.setFilters(newVal);
+            },
         }
     },
     
-    computed: {
+
-        filterOptions: function() {
-            let options = [];
-            _.forIn(this.searchTagsModels, function(value, key) {
-                options.push({
-                    text: value.optionLabel,
-                    value: key,
-                });
-            });
-            return options;
-        },
-    },
     methods: {
-       
+        /**
-        onClose() {
+         * Set Filters and make the tag labels
-        },
+         * @param {object} filters json to manage the query 
+         */
         setFilters(filters) {
-            let that = this;
+            let self = this;
-            _.forIn(filters, function(value, key) {
+            _.forEach(filters, function(item, key) {
-                let temp = that.createTagText(key, value);
+                let component = _.find(self.filterItems, function(o) { return o.id === item.fieldId; });
-                that.searchTags.push(key);
+                if (component) {
-                that.selected.push(key);
+                    self.searchTags.push(component.id);
+                    self.selected.push(component.id);
+                    self.itemModel[component.id] = component;
+                }
             });
         },
-        onOk() {
+        dataToFilter(id) {
-            let initialFilters = {};
+            let data = [];
-            this.$root.$emit('bv::hide::popover');
+            _.forEach(this.filters, function(item) { 
-            for (var i = 0; i < this.selected.length; i++) {
+                if (item.fieldId === id) {
-                let item = this.selected[i];
+                    data.push(item);
-                initialFilters[item] = {};
-                if(this.searchTagsModels[item].filterBy) {
-                    for (var j = 0; j < this.searchTagsModels[item].filterBy.length; j++) { 
-                        initialFilters[item][this.searchTagsModels[item].filterBy [j]] = "";
                 }
+            });
+            return data;
+        },
+        /**
+         * 
+         */
+        tagContent(id) {
+            if (this.itemModel[id]  && typeof this.itemModel[id] .makeTagText === "function") {
+                return this.itemModel[id].makeTagText(this.itemModel[id],  this.dataToFilter(id));
+            }
+            return "";
+        },
+        tagComponent(id) {
+            if (this.itemModel[id]) {
+                return this.itemModel[id].type;
+            }
+            return null;
+        },
+    
+        tagInfo(id) {
+             if (this.itemModel[id]) {
+                 debugger;
+                return this.itemModel[id];
+            }
+            return null;
+        },
+
+         /**
+         * Add filter criteria save button handler
+         */
+        onOk() {
+            let self = this,
+                element,
+                tmp,
+                item,
+                initialFilters = [];
+            this.$root.$emit('bv::hide::popover');   
+            for (var i = 0; i < this.selected.length; i+=1) {
+                item = this.selected[i];
+                element = _.find(this.filterItems, function(o) { return o.id === item; });
+                if  (element) {
+                    _.forEach(element.items, function(value, key) {
+                        tmp = {
+                            filterVar: value.id,
+                            fieldId: item,
+                            value: '',
+                            label: "",
+                            options: []
+                        };
+                        initialFilters.push(tmp);
+                    });
                 }
                 
             }
-            this.$emit("onUpdateFilters", initialFilters) 
+            this.$emit("onUpdateFilters", initialFilters);
-        },
+            
-        createTagText(type, params) {
+            
-            let label = "";
-            switch (type) {
-                case "CaseNumber":
-                    this.searchTagsModels[type].tagText = `${this.$i18n.t("ID_IUD")}: ${params.filterCases}`
-                    this.searchTagsModels[type].values["filterCases"] =  params.filterCases;
-                    break;
-                case "DueDate":
-                    this.searchTagsModels[type].tagText = `${this.$i18n.t('ID_FROM')}: ${params.dueDateFrom} ${this.$i18n.t('ID_TO')}:  ${params.dueDateTo}`;
-                    this.searchTagsModels[type].values["dueDateFrom"] =  params.dueDateFrom;
-                    this.searchTagsModels[type].values["dueDateTo"] =  params.dueDateTo;
-                    break;
-                case "LastModifiedDate":
-                    this.searchTagsModels[type].tagText = `${this.$i18n.t('ID_FROM')}: ${params.delegationDateFrom} ${this.$i18n.t('ID_TO')}:  ${params.delegationDateTo}`;
-                    this.searchTagsModels[type].values["delegationDateFrom"] =  params.delegationDateFrom;
-                    this.searchTagsModels[type].values["delegationDateTo"] =  params.delegationDateTo;
-                    break;
-                case "CaseTitle":
-                    this.searchTagsModels[type].tagText = `${this.$i18n.t("ID_CASE_TITLE")}: ${params.caseTitle}`;
-                    this.searchTagsModels[type].values["caseTitle"] =  params.caseTitle;
-                    break;
-                case "ProcessName":
-                    this.searchTagsModels[type].tagText = `${this.$i18n.t("ID_PROCESS")}: ${params.processOption.PRO_TITLE || ''}`;
-                    this.searchTagsModels[type].processOption =  params.processOption || null;
-                    break;
-                case "CasePriority":
-                    this.searchTagsModels[type].tagText = `${this.$i18n.t('ID_PRIORITY')}: ${_.map(params.selectedOptions, 'text').join(",") || ''}`;
-                    this.searchTagsModels[type].casePriorities = _.map(params.selectedOptions, 'value');
-                    break;
-                 case "CaseStatus":
-                    this.searchTagsModels[type].tagText = `${this.$i18n.t('ID_STATUS')}: ${_.map(params.selectedOptions, 'text').join(",") || ''}`;
-                    this.searchTagsModels[type].caseStatuses = _.map(params.selectedOptions, 'value');
-                    break;
-                case "CurrentUser":
-                    this.searchTagsModels[type].tagText = `${this.$i18n.t("ID_USER")}: ${params.selectedOption.USR_FULLNAME || ''}`;
-                    this.searchTagsModels[type].selectedOption =  params.selectedOption || null;
-                    break;
-                default:
-                    break;
-            }
         },
+
         cleanAllTags() {
             this.searchTags = [];
             this.selected = [];
             this.$emit("onUpdateFilters", {});
         },
         customRemove(removeTag, tag) {
-            let temp = { ...this.filters};
+            let temp = [];
-            delete temp[tag];
+             _.forEach(this.filters, function(item, key) {
-            removeTag(tag);
+                 if(item.fieldId !== tag) {
+                     temp.push(item);
+                 }
+             });
             this.$emit("onUpdateFilters", temp);
         },
         onSearch() {
             this.$emit("onSearch", this.filters);
         },
         updateSearchTag(params) {          
-            this.$emit("onUpdateFilters", { ...this.filters, ...params });
+            let temp = this.filters.concat(params);
+            temp = [...new Set([...this.filters,...params])]
+            this.$emit("onUpdateFilters", temp);
         },
         onJumpCase() {
             this.$emit("onJumpCase",  this.caseNumber);

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

@@ -0,0 +1,329 @@
+<template>
+    <div>
+        <SearchPopover
+            target="popover-target-1"
+            @savePopover="onOk"
+            :title="addSearchTitle"
+        >
+            <template v-slot:body>
+                <b-form-group>
+                    <b-form-radio-group
+                        v-model="selected"
+                        :options="filterItems"
+                        value-field="id"
+                        text-field="optionLabel"
+                        name="flavour-2a"
+                        stacked
+                    ></b-form-radio-group>
+                </b-form-group>
+            </template>
+        </SearchPopover>
+
+        <div class="w-75 p-1">
+
+            <b-input-group class="w-100 p-1">
+                <b-button pill variant="primary" id="popover-target-1" @click="searchClickHandler">
+                    <b-icon icon="search"></b-icon>
+                </b-button>
+                <b-form-tags
+                    input-id="tags-pills"
+                    v-model="searchTags"
+                    size="sm"
+                >
+                    <template v-slot="{ tags, tagVariant, removeTag }">
+                        <div
+                            class="d-inline-block"
+                            style="font-size: 1rem;"
+                        >
+                            <b-form-tag
+                                v-for="tag in tags"
+                                @remove="customRemove(removeTag, tag)"
+                                :key="tag"
+                                :title="tag"
+                                :variant="tagVariant"
+                                class="mr-1"
+                            >      
+                                <div :id="tag">
+                                    <i class="fas fa-tags"></i>
+                                    {{ tagContent(tag) }}
+                                </div>
+
+                                <component
+                                    v-bind:is="tagComponent(tag)"
+                                    v-bind:info="tagInfo(tag)"
+                                    v-bind:tag="tag"
+                                    v-bind:filter="dataToFilter(tag)"
+                                    @updateSearchTag="updateSearchTag"
+                                />
+                                
+                            </b-form-tag>
+                        </div>
+                    </template>
+                </b-form-tags>              
+            </b-input-group>
+        </div>
+    </div>
+</template>
+
+<script>
+import SearchPopover from "./popovers/SearchPopover.vue";
+import CaseIntegerNumber from "./popovers/CaseIntegerNumber.vue";
+import CaseTitle from "./popovers/CaseTitle.vue";
+import ProcessName from "./popovers/ProcessName.vue";
+import DateFilter from "./popovers/DateFilter.vue";
+import api from "./../../api/index";
+
+export default { 
+    name: "MyCasesFilter",
+    props: ["filters"],
+    components:{
+        SearchPopover,
+        CaseIntegerNumber,
+        CaseTitle,
+        ProcessName,
+        DateFilter
+    },
+    data() {
+        return {
+            searchLabel: this.$i18n.t('ID_SEARCH'),
+            addSearchTitle: this.$i18n.t('ID_ADD_SEARCH_FILTER_CRITERIA'),
+            searchTags: [],
+        
+            filterItems: [
+                {   
+                    type: "CaseIntegerNumber",
+                    id: "caseNumber",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_BY_CASE_NUMBER')}`,
+                    optionLabel: this.$i18n.t('ID_BY_CASE_NUMBER'),
+                    detail: this.$i18n.t('ID_PLEASE_SET_THE_CASE_NUMBER_TO_BE_SEARCHED'),
+                    tagText: "",
+                    tagPrefix:  this.$i18n.t('ID_SEARCH_BY_CASE_NUMBER'),
+                    items:[
+                        {
+                            id: "caseNumber",
+                            value: ""
+                        }
+                    ],
+                    autoShow: true,
+                    makeTagText: function (params, data) {
+                          return  `${params.tagPrefix}: ${data[0].value}`;
+                    }
+                },
+                {
+                    type: "CaseTitle",
+                    id: "caseTitle",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_BY_CASE_TITLE')}`,
+                    optionLabel: this.$i18n.t('ID_BY_CASE_TITLE'),
+                    tagPrefix:  this.$i18n.t('ID_SEARCH_BY_CASE_TITLE'),
+                    detail: "",
+                    tagText: "",
+                    items:[
+                        {
+                            id: "caseTitle",
+                            value: ""
+                        }
+                    ],
+                    autoShow: true,
+                    makeTagText: function (params, data) {
+                        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: "DateFilter",
+                    id: "startDate",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_START_DATE')}`,
+                    optionLabel: this.$i18n.t('ID_BY_START_DATE'),
+                    detail: this.$i18n.t('ID_PLEASE_SET_A_RANGE_OF_CASES_START_DATE_TO_SEARCH'),
+                    tagText: "",
+                    autoShow: true,
+                    tagPrefix:  this.$i18n.t('ID_SEARCH_BY_START_DATE'),
+                    items:[
+                        {
+                            id: "startCaseFrom",
+                            value: "",
+                            label: this.$i18n.t('ID_FROM_START_DATE')
+                        },
+                        {
+                            id: "startCaseTo",
+                            value: "",
+                            label: this.$i18n.t('ID_TO_START_DATE')
+                        }
+                    ],
+                    makeTagText: function (params, data) {
+                        return  `${params.tagPrefix} ${data[0].value} - ${data[1].value}`;
+                    }
+                },
+                {
+                    type: "DateFilter",
+                    id: "finishDate",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_FINISH_DATE')}`,
+                    optionLabel: this.$i18n.t('ID_BY_FINISH_DATE'),
+                    detail: this.$i18n.t('ID_PLEASE_SET_A_RANGE_OF_CASES_FINISH_DATE_TO_SEARCH'),
+                    tagText: "",
+                    autoShow: true,
+                    tagPrefix:  this.$i18n.t('ID_SEARCH_BY_FINISH_DATE'),
+                    items:[
+                        {
+                            id: "finishCaseFrom",
+                            value: "",
+                            label: this.$i18n.t('ID_FROM_FINISH_DATE'),
+                        },
+                        {
+                            id: "finishCaseTo",
+                            value: "",
+                            label: this.$i18n.t('ID_TO_FINISH_DATE'),
+                        }
+                    ],
+                    makeTagText: function (params, data) {
+                        return  `${params.tagPrefix} ${data[0].value} - ${data[1].value}`;
+                    }
+                },
+            ],
+            selected: "",
+            itemModel: {}
+        };
+    },
+    watch: {
+        filters: function (filters) {
+            this.searchTags = [];
+            this.selected = "";
+            this.setFilters(filters);
+            
+        }
+    },
+    methods: {
+        /**
+         * Add filter criteria save button handler
+         */
+        onOk() {
+            let self = this,
+                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) {
+                        item = {
+                            filterVar: value.id,
+                            fieldId: self.selected,
+                            value:  '',
+                            label: "",
+                            options: []
+                        };
+                        initialFilters.push(item);
+                    });
+                }
+            this.$emit("onUpdateFilters", {params: initialFilters, refresh: false}); 
+        },
+        /**
+         * Set Filters and make the tag labels
+         * @param {object} filters json to manage the query 
+         */
+        setFilters(filters) {
+            let self = this;
+            _.forEach(filters, function(item, key) {
+                let component = _.find(self.filterItems, function(o) { return o.id === item.fieldId; });
+                if (component) {
+                    self.searchTags.push(component.id);
+                    self.selected = component.id;
+                    self.itemModel[component.id] = component;
+                }
+            });
+        },
+        dataToFilter(id) {
+            let data = [];
+            _.forEach(this.filters, function(item) { 
+                if (item.fieldId === id) {
+                    data.push(item);
+                }
+            });
+            return data;
+        },
+        /**
+         * 
+         */
+        tagContent(id) {
+            if (this.itemModel[id]  && typeof this.itemModel[id].makeTagText === "function") {
+                return this.itemModel[id].makeTagText(this.itemModel[id],  this.dataToFilter(id));
+            }
+            return "";
+        },
+        tagComponent(id) {
+            if (this.itemModel[id]) {
+                return this.itemModel[id].type;
+            }
+            return null;
+        },
+    
+        tagInfo(id) {
+             if (this.itemModel[id]) {
+                 debugger;
+                return this.itemModel[id];
+            }
+            return null;
+        },
+        /**
+         * Remove from tag button
+         * @param {function} removeTag - default callback
+         * @param {string} tag filter identifier
+         */
+        customRemove(removeTag, tag) {
+            this.selected = "";
+            this.$emit("onUpdateFilters",  {params: [], refresh: true});
+        },
+        /**
+         * Update the filter model this is fired from filter popaver save action
+         * @param {object} params - arrives the settings
+         * @param {string} tag filter identifier
+         */
+        updateSearchTag(params) {          
+            let temp = this.filters.concat(params);
+            temp = [...new Set([...this.filters,...params])]
+            this.$emit("onUpdateFilters",  {params: temp, refresh: true});
+        },    
+        searchClickHandler() {
+            this.$root.$emit('bv::hide::popover');
+        }
+    }
+};
+</script>
+<style scoped>
+.bv-example-row .row + .row {
+    margin-top: 1rem;
+}
+
+.bv-example-row-flex-cols .row {
+    min-height: 10rem;
+}
+</style>
+
+    },
+};
+</script>
+<style scoped>
+
+</style>

resources/assets/js/components/search/popovers/CaseIntegerNumber.vue

@@ -0,0 +1,83 @@
+<template>
+    <div>
+        <SearchPopover
+            :target="tag"
+            :showPopover="showPopover"
+            @closePopover="onClose"
+            @savePopover="onOk"
+            :title="info.title"
+            :autoShow="info.autoShow || false"
+        >
+            <template v-slot:body>
+                <p>{{ info.detail }}</p>
+                <form ref="form" @submit.stop.prevent="handleSubmit">
+                    <b-form-group
+                        :state="valueState"
+                        label-for="name-input"
+                        :invalid-feedback="$t('ID_INVALID_CASE_NUMBER_RANGE')"
+                    >
+                        <b-form-input
+                            id="name-input"
+                            v-model="filter[0].value"
+                            :placeholder="$t('ID_CASE_NUMBER_FILTER_EG')"
+                            :state="valueState"
+                            required
+                            type="number"
+                        ></b-form-input>
+                    </b-form-group>
+                </form>
+            </template>
+        </SearchPopover>
+    </div>
+</template>
+
+<script>
+import SearchPopover from "./SearchPopover.vue";
+
+export default {
+    components: {
+        SearchPopover,
+    },
+    props: ["tag", "info", "filter"],
+    data() {
+        return {
+            valueState: null,
+            showPopover: false,
+        };
+    },
+    methods: {
+        onClose() {
+            this.showPopover = true;
+        },
+        checkFormValidity() {
+            const valid = this.$refs.form.checkValidity();
+            this.valueState = valid;
+            return this.valueState;
+        },
+        handleSubmit() {
+            let self = this;
+            // Exit when the form isn't valid
+            if (!this.checkFormValidity()) {
+                return;
+            }
+            // Hide the modal manually
+            this.$nextTick(() => {
+              
+                this.$emit("updateSearchTag", this.filter);
+                self.$root.$emit("bv::hide::popover");
+            });
+        },
+        onOk() {
+            this.handleSubmit();
+        },
+        onClickTag(tag) {
+            this.$root.$emit("bv::hide::popover");
+        }
+    },
+};
+</script>
+<style scoped>
+.popovercustom {
+    max-width: 650px !important;
+}
+</style>

resources/assets/js/components/search/popovers/CaseNumber.vue

@@ -6,6 +6,7 @@
             @closePopover="onClose"
             @savePopover="onOk"
             :title="info.title"
+            :autoShow="info.autoShow || false"
         >
             <template v-slot:body>
                 <p>{{ info.detail }}</p>
@@ -17,8 +18,8 @@
                     >
                         <b-form-input
                             id="name-input"
-                            v-model="info.values.filterCases"
+                            v-model="filter[0].value"
-                            :placeholder="$t('ID_CASE_NUMBER_FILTER_EG')"
+                            :placeholder="$t('ID_CASE_NUMBER_FILTER_RANGE_EG')"
                             :state="valueState"
                             required
                         ></b-form-input>
@@ -36,11 +37,11 @@ export default {
     components: {
         SearchPopover,
     },
-    props: ["tag", "info"],
+    props: ["tag", "info", "filter"],
     data() {
         return {
             valueState: null,
-            showPopover: false,
+            showPopover: false
         };
     },
     methods: {
@@ -49,8 +50,8 @@ export default {
         },
         checkFormValidity() {
             const regex = /^((\d+?)|(\d+?)(?:\-(\d+?))?)(?:\,((\d+?)|(\d+?)(?:\-(\d+?))?))*$/;
-            regex.test(this.info.values.filterCases);
+            regex.test(this.filter[0].value);
-            this.valueState = regex.test(this.info.values.filterCases);
+            this.valueState = regex.test(this.filter[0].value);
             return this.valueState;
         },
         handleSubmit() {
@@ -61,12 +62,8 @@ export default {
             }
             // Hide the modal manually
             this.$nextTick(() => {
-                this.$emit("updateSearchTag", {
+                this.$emit("updateSearchTag", this.filter);
-                    CaseNumber: {
+                this.$root.$emit("bv::hide::popover");
-                        filterCases: self.info.values.filterCases.replace(/ /g, ""),
-                    }
-                });
-                self.$root.$emit("bv::hide::popover");
             });
         },
         onOk() {
@@ -74,7 +71,7 @@ export default {
         },
         onClickTag(tag) {
             this.$root.$emit("bv::hide::popover");
-        }
+        },
     },
 };
 </script>

resources/assets/js/components/search/popovers/CaseTitle.vue

@@ -4,6 +4,7 @@
             :target="tag"
             @savePopover="onOk"
             :title="info.title"
+            :autoShow="info.autoShow || false"
         >
         
             <template v-slot:body>
@@ -16,7 +17,7 @@
                     >
                         <b-form-input
                             id="name-input"
-                            v-model="info.values.caseTitle"
+                            v-model="filter[0].value"
                             :placeholder="$t('ID_CASE_TITLE_NAME')"
                             :state="valueState"
                             required
@@ -35,7 +36,7 @@ export default {
     components: {
         SearchPopover,
     },
-    props: ["tag", "info"],
+    props: ["tag", "info", "filter"],
     data() {
         return {
             title: "",
@@ -61,11 +62,7 @@ export default {
                 return;
             }
             this.$nextTick(() => {
-                this.$emit("updateSearchTag", {
+                this.$emit("updateSearchTag", this.filter);
-                    CaseTitle: {
-                        caseTitle: self.info.values.caseTitle,
-                    }
-                });
                 self.$root.$emit("bv::hide::popover");
             });
         },

resources/assets/js/components/search/popovers/CurrentUser.vue

@@ -9,7 +9,7 @@
                         :invalid-feedback="$t('ID_PROCESS_IS_REQUIRED')"
                     >
                         <multiselect
-                            v-model="info.selectedOption"
+                            v-model="filter[0].options"
                             :options="users"
                             placeholder="Sselect one"
                             label="USR_FULLNAME"
@@ -39,7 +39,7 @@ export default {
         SearchPopover,
         Multiselect
     },
-    props: ["tag", "info"],
+    props: ["tag", "info", "filter"],
     data() {
         return {
             users: [],
@@ -82,12 +82,9 @@ export default {
          *  Form submit handler
          */
         handleSubmit() {
-            this.$emit("updateSearchTag", {
+            this.filter[0].value = this.filter[0].options.USR_ID;
-                CurrentUser: {
+            this.filter[0].label = this.filter[0].options.USR_FULLNAME;
-                    selectedOption: this.info.selectedOption,
+            this.$emit("updateSearchTag", this.filter);
-                    userId: this.info.selectedOption.USR_ID
-                }
-            });
             this.$root.$emit("bv::hide::popover");
         }
     }

resources/assets/js/components/search/popovers/DateFilter.vue

@@ -0,0 +1,69 @@
+<template>
+    <div id="">
+        <SearchPopover
+            :target="tag"
+            @savePopover="onOk"
+            :title="info.title"
+            :autoShow="info.autoShow || false"
+        >
+            <template v-slot:body>
+                <p>{{ info.detail }}</p>
+                <form ref="form" @submit.stop.prevent="handleSubmit">
+                    <div class="row">
+                        <div class="col">
+                            <b-form-group>
+                                <b-form-datepicker
+                                    id="from"
+                                    v-model="filter[0].value"
+                                    :placeholder="info.items[0].label"
+                                ></b-form-datepicker>
+                            </b-form-group>
+                        </div>
+                        <div class="col">
+                            <b-form-group>
+                                <b-form-datepicker
+                                    id="to"
+                                    v-model="filter[1].value"
+                                    :placeholder="info.items[1].label"
+                                ></b-form-datepicker>
+                            </b-form-group>
+                        </div>
+                    </div>
+                </form>
+            </template>
+        </SearchPopover>
+    </div>
+</template>
+
+<script>
+import SearchPopover from "./SearchPopover.vue";
+
+export default {
+    components: {
+        SearchPopover,
+    },
+    props: ["tag", "info", "filter"],
+    methods: {
+        /**
+         * Submit form handler
+         */
+        handleSubmit() {
+            this.$emit("updateSearchTag", this.filter);
+            this.$root.$emit("bv::hide::popover");
+        },
+        /**
+         * On ok event handler
+         */
+        onOk() {
+            this.handleSubmit();
+        },
+        /**
+         * On click tag event handler
+         */
+        onClickTag(tag) {
+            this.$root.$emit("bv::hide::popover");
+        },
+    },
+};
+</script>
+<style scoped></style>

resources/assets/js/components/search/popovers/ProcessName.vue

@@ -1,6 +1,11 @@
 <template>
     <div>
-        <SearchPopover :target="tag" @savePopover="onOk" :title="info.title">
+        <SearchPopover
+            :target="tag"
+            @savePopover="onOk"
+            :title="info.title"
+            :autoShow="info.autoShow || false"
+        >
             <template v-slot:body>
                 <p>{{ info.detail }}</p>
                 <form ref="form" @submit.stop.prevent="handleSubmit">
@@ -9,11 +14,11 @@
                         :invalid-feedback="$t('ID_PROCESS_IS_REQUIRED')"
                     >
                         <multiselect
-                            v-model="info.processOption"
+                            v-model="filter[0].options"
                             :options="processes"
-                            placeholder="Select one"
+                            :placeholder="info.items[0].placeholder"
-                            label="PRO_TITLE"
+                            label="label"
-                            track-by="PRO_ID"
+                            track-by="value"
                             :show-no-results="false"
                             @search-change="asyncFind"
                             :loading="isLoading"
@@ -37,13 +42,13 @@ import api from "./../../../api/index";
 export default {
     components: {
         SearchPopover,
-        Multiselect
+        Multiselect,
     },
-    props: ["tag", "info"],
+    props: ["tag", "info", "filter"],
     data() {
         return {
             processes: [],
-            isLoading: false
+            isLoading: false,
         };
     },
     methods: {
@@ -52,12 +57,18 @@ export default {
          * @param {string} query - string from the text field
          */
         asyncFind(query) {
+            let self = this;
             this.isLoading = true;
+            self.processes = [];
             api.filters
                 .processList(query)
                 .then((response) => {
-                    this.processes = response.data;
+                    _.forEach(response.data, function(elem, key) {
-                    this.countries = response;
+                        self.processes.push({
+                            label: elem.PRO_TITLE,
+                            value: elem.PRO_ID,
+                        });
+                    });
                     this.isLoading = false;
                 })
                 .catch((e) => {
@@ -82,15 +93,11 @@ export default {
          *  Form submit handler
          */
         handleSubmit() {
-            this.$emit("updateSearchTag", {
+            this.filter[0].value = this.filter[0].options.value;
-                ProcessName: {
+            this.$emit("updateSearchTag", this.filter);
-                    processOption: this.info.processOption,
-                    process: this.info.processOption.PRO_ID,
-                }
-            });
             this.$root.$emit("bv::hide::popover");
-        }
+        },
-    }
+    },
 };
 </script>
 <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

resources/assets/js/components/search/popovers/SearchPopover.vue

@@ -3,8 +3,9 @@
         <slot name="target-item"></slot>
 
         <b-popover
-            :show.sync="popoverShow"
+            :show="autoShow"
             :target="target"
+            ref="popover"
             triggers="click"
             placement="bottom"
             class="popovercustom" 
@@ -29,18 +30,14 @@
 </template>
 <script>
 export default {
-    props: ['target', "title"],
+    props: ['target', "title", "autoShow"],
-    data() {
+
-        return {
-           popoverShow: false
-        };
-    },
     methods: {
         /**
          * Close buton click handler 
          */
         onClose() {
-            this.popoverShow = false;
+            this.$refs.popover.$emit('close');
             this.$emit('closePopover');
         },
         /**

resources/assets/js/home/AdvancedSearch.vue

@@ -10,7 +10,9 @@
             {{ message }}
         </b-alert>
         <button-fleft :data="newCase"></button-fleft>
-        <GenericFilter
+        <h5>{{$t('ID_ADVANCEDSEARCH')}}</h5>
+        
+        <AdvancedFilter
             :id="id"
             :name="name"
             :filters="filters"
@@ -82,7 +84,7 @@
 <script>
 import ButtonFleft from "../components/home/ButtonFleft.vue";
 import ModalNewRequest from "./ModalNewRequest.vue";
-import GenericFilter from "../components/search/GenericFilter";
+import AdvancedFilter from "../components/search/AdvancedFilter";
 import TaskCell from "../components/vuetable/TaskCell.vue";
 import api from "./../api/index";
 import { Event } from "vue-tables-2";
@@ -90,7 +92,7 @@ import { Event } from "vue-tables-2";
 export default {
     name: "AdvancedSearch",
     components: {
-        GenericFilter,
+        AdvancedFilter,
         ButtonFleft,
         ModalNewRequest,
         TaskCell
@@ -172,18 +174,16 @@ export default {
                 dt,
                 paged,
                 limit = data.limit,
+                filters = {},
                 start = data.page === 1 ? 0 : limit * (data.page - 1);
             paged = start + ',' + limit;
+            filters["paged"] = paged;
             return new Promise((resolutionFunc, rejectionFunc) => {
-                let filters = {};
+                _.forIn(this.filters, function(item, key) {
-                _.forIn(this.filters, function(value, key) {
+                    filters[item.filterVar] = item.value;
-                    filters = {...filters, ...value};
                 });
                 api.cases
-                    .search({
+                    .search(filters)
-                        filters,
-                        paged:paged
-                    })
                     .then((response) => {
                         dt = that.formatDataResponse(response.data.data);
                         resolutionFunc({

resources/assets/js/home/Home.vue

@@ -78,7 +78,7 @@ export default {
             sidebarWidth: "310px",
             pageId: null,
             pageName: null,
-            filters: {},
+            filters:  null,
         };
     },
     mounted() {
@@ -151,6 +151,7 @@ export default {
                 this.pageId = item.item.id;
                 this.pageName = item.item.title;
             } else {
+                this.filters = [];
                 this.page = item.item.id || "MyCases";
             }
         },
@@ -226,7 +227,7 @@ export default {
             this.page = "advanced-search";
             this.pageId = null;
             this.pageName = null;
-            this.filters = {};
+            this.filters = [];
         },
         onUpdatePage(page) {
             this.lastPage = this.page;

resources/assets/js/home/MyCases.vue

@@ -1,6 +1,11 @@
 <template>
     <div id="v-mycases" ref="v-mycases" class="v-container-mycases">
         <button-fleft :data="newCase"></button-fleft>
+        <MyCasesFilter
+            :filters="filters"
+            @onRemoveFilter="onRemoveFilter"
+            @onUpdateFilters="onUpdateFilters"
+        />
         <header-counter :data="headers"> </header-counter>
         <modal-new-request ref="newRequest"></modal-new-request>
 
@@ -29,7 +34,9 @@
             <div slot="finish_date" slot-scope="props">
                 {{ props.row.FINISH_DATE }}
             </div>
-      <div slot="duration" slot-scope="props">{{ props.row.DURATION }}</div>
+            <div slot="duration" slot-scope="props">
+                {{ props.row.DURATION }}
+            </div>
             <div slot="actions" slot-scope="props">
                 <div class="btn-default" @click="openComments(props.row)">
                     <i class="fas fa-comments"></i>
@@ -46,6 +53,7 @@
 import HeaderCounter from "../components/home/HeaderCounter.vue";
 import ButtonFleft from "../components/home/ButtonFleft.vue";
 import ModalNewRequest from "./ModalNewRequest.vue";
+import MyCasesFilter from "../components/search/MyCasesFilter";
 import ModalComments from "./modal/ModalComments.vue";
 import GroupedCell from "../components/utils/GroupedCell.vue";
 import api from "./../api/index";
@@ -53,13 +61,14 @@ import api from "./../api/index";
 export default {
     name: "MyCases",
     components: {
+        MyCasesFilter,
         HeaderCounter,
         ButtonFleft,
         ModalNewRequest,
         GroupedCell,
         ModalComments,
     },
-  props: {},
+    props: ["filters"],
     data() {
         return {
             metrics: [],
@@ -87,6 +96,7 @@ export default {
             ],
             tableData: [],
             options: {
+                filterable: false,
                 headings: {
                     case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
                     case_title: this.$i18n.t("ID_CASE_TITLE"),
@@ -112,21 +122,6 @@ export default {
             },
             translations: null,
             pmDateFormat: "Y-m-d H:i:s",
-      //// NEW PARAMETERS FOR HENRY
-      apiParams: {
-        action: "todo",
-        list: "inbox",
-        filter: "",
-        search: "",
-        sort: "APP_NUMBER",
-        dir: "DESC",
-        category: "",
-        process: "",
-        filterStatus: "",
-        paged: true,
-        start: 0,
-        limit: 10,
-      },
         };
     },
     mounted() {
@@ -161,14 +156,20 @@ export default {
                 dt,
                 paged,
                 limit = data.limit,
-        start = data.page === 1 ? 0 : limit * (data.page - 1);
+                start = data.page === 1 ? 0 : limit * (data.page - 1),
-      paged = start + ',' + limit;
+                filters = {};
+                paged = start + "," + limit;
+                
+            filters = {
+                filter: that.filterHeader,
+                paged: paged,
+            };
+            _.forIn(this.filters, function(item, key) {
+                filters[item.filterVar] = item.value;
+            });
             return new Promise((resolutionFunc, rejectionFunc) => {
                 api.cases
-          .myCases({
+                    .myCases(filters)
-            filter: that.filterHeader,
-            paged: paged
-          })
                     .then((response) => {
                         dt = that.formatDataResponse(response.data.data);
                         resolutionFunc({
@@ -229,7 +230,9 @@ export default {
                 nameFormat = lastName + " " + name;
             } else if (this.nameFormat === "@lastName, @firstName") {
                 nameFormat = lastName + ", " + name;
-      } else if (this.nameFormat === "@lastName, @firstName (@userName)") {
+            } else if (
+                this.nameFormat === "@lastName, @firstName (@userName)"
+            ) {
                 nameFormat = lastName + ", " + name + " (" + userName + ")";
             } else {
                 nameFormat = name + " " + lastName;
@@ -287,13 +290,19 @@ export default {
             } else if (this.pmDateFormat === "Y/m/d") {
                 dateToConvert = dateFormat(stringToDate, "yyyy/mm/dd");
             } else if (this.pmDateFormat === "F j, Y, g:i a") {
-        dateToConvert = dateFormat(stringToDate, "mmmm d, yyyy, h:MM tt");
+                dateToConvert = dateFormat(
+                    stringToDate,
+                    "mmmm d, yyyy, h:MM tt"
+                );
             } else if (this.pmDateFormat === "m.d.y") {
                 dateToConvert = dateFormat(stringToDate, "mm.dd.yy");
             } else if (this.pmDateFormat === "j, n, Y") {
                 dateToConvert = dateFormat(stringToDate, "d,m,yyyy");
             } else if (this.pmDateFormat === "D M j G:i:s T Y") {
-        dateToConvert = dateFormat(stringToDate, "ddd mmm d HH:MM:ss Z yyyy");
+                dateToConvert = dateFormat(
+                    stringToDate,
+                    "ddd mmm d HH:MM:ss Z yyyy"
+                );
             } else if (this.pmDateFormat === "M d, Y") {
                 dateToConvert = dateFormat(stringToDate, "mmm dd, yyyy");
             } else if (this.pmDateFormat === "m D, Y") {
@@ -309,7 +318,10 @@ export default {
             } else if (this.pmDateFormat === "d.m.Y") {
                 dateToConvert = dateFormat(stringToDate, "mm.dd.yyyy");
             } else {
-        dateToConvert = dateFormat(stringToDate, 'dd "de" mmmm "de" yyyy');
+                dateToConvert = dateFormat(
+                    stringToDate,
+                    'dd "de" mmmm "de" yyyy'
+                );
             }
             return dateToConvert;
         },
@@ -364,11 +376,12 @@ export default {
                         class: "btn-warning",
                     },
                 };
+            console.log(response);
             _.forEach(response, (v) => {
                 data.push({
-          title: this.$i18n.t(v.id),
+                    title: v.title,
                     counter: v.counter,
-          item: v.item,
+                    item: v.id,
                     icon: info[v.id].icon,
                     onClick: (obj) => {
                         that.filterHeader = obj.item;
@@ -386,6 +399,18 @@ export default {
                 that.$refs["modal-comments"].show();
             });
         },
+        onRemoveFilter(data) {
+            console.log(data);
+        },
+
+        onUpdateFilters(data) {
+            this.$emit("onUpdateFilters", data.params);
+            if (data.refresh) {
+                this.$nextTick(() => {
+                    this.$refs["vueTable"].getData();
+                });
+            }
+        },
     },
 };
 </script>

workflow/engine/content/translations/english/processmaker.en.po

@@ -1999,6 +1999,12 @@ msgstr "Add field"
 msgid "Add file"
 msgstr "Add file"
 
+# TRANSLATION
+# LABEL/ID_ADD_FILTER
+#: LABEL/ID_ADD_FILTER
+msgid "Add Filter"
+msgstr "Add Filter"
+
 # TRANSLATION
 # LABEL/ID_ADD_HORIZONTAL_LINE
 #: LABEL/ID_ADD_HORIZONTAL_LINE
@@ -2035,6 +2041,12 @@ msgstr "Add Permission To Role"
 msgid "Add Row"
 msgstr "Add Row"
 
+# TRANSLATION
+# LABEL/ID_ADD_SEARCH_FILTER_CRITERIA
+#: LABEL/ID_ADD_SEARCH_FILTER_CRITERIA
+msgid "Add Search Filter Criteria"
+msgstr "Add Search Filter Criteria"
+
 # TRANSLATION
 # LABEL/ID_ADD_SUB_PROCESS
 #: LABEL/ID_ADD_SUB_PROCESS
@@ -2975,6 +2987,48 @@ msgstr "Button"
 msgid "Buy now"
 msgstr "Buy now"
 
+# TRANSLATION
+# LABEL/ID_BY_CASE_NUMBER
+#: LABEL/ID_BY_CASE_NUMBER
+msgid "By Case #"
+msgstr "By Case #"
+
+# TRANSLATION
+# LABEL/ID_BY_CASE_TITLE
+#: LABEL/ID_BY_CASE_TITLE
+msgid "By Case Title"
+msgstr "By Case Title"
+
+# TRANSLATION
+# LABEL/ID_BY_PROCESS_NAME
+#: LABEL/ID_BY_PROCESS_NAME
+msgid "By Process Name"
+msgstr "By Process Name"
+
+# TRANSLATION
+# LABEL/ID_BY_TASK
+#: LABEL/ID_BY_TASK
+msgid "By Task"
+msgstr "By Task"
+
+# TRANSLATION
+# LABEL/ID_BY_STATUS
+#: LABEL/ID_BY_STATUS
+msgid "By Status"
+msgstr "By Status"
+
+# TRANSLATION
+# LABEL/ID_BY_START_DATE
+#: LABEL/ID_BY_START_DATE
+msgid "By Start Date"
+msgstr "By Start Date"
+
+# TRANSLATION
+# LABEL/ID_BY_FINISH_DATE
+#: LABEL/ID_BY_FINISH_DATE
+msgid "By Finish Date"
+msgstr "By Finish Date"
+
 # TRANSLATION
 # LABEL/ID_CACHE_BTN_BUILD
 #: LABEL/ID_CACHE_BTN_BUILD
@@ -3953,6 +4007,18 @@ msgstr "Case number"
 msgid "Case Number"
 msgstr "Case Number"
 
+# TRANSLATION
+# LABEL/ID_CASE_NUMBER_FILTER_EG
+#: LABEL/ID_CASE_NUMBER_FILTER_EG
+msgid "e.g. 8"
+msgstr "e.g. 8"
+
+# TRANSLATION
+# LABEL/ID_CASE_NUMBER_FILTER_RANGE_EG
+#: LABEL/ID_CASE_NUMBER_FILTER_RANGE_EG
+msgid "e.g. 1-5, 8, 11-13"
+msgstr "e.g. 1-5, 8, 11-13"
+
 # TRANSLATION
 # LABEL/ID_CASE_OUTPUT_DOCUMENT_DOES_NOT_EXIST
 #: LABEL/ID_CASE_OUTPUT_DOCUMENT_DOES_NOT_EXIST
@@ -4061,6 +4127,12 @@ msgstr "The case has not stopped due to its trigger."
 msgid "Case Title"
 msgstr "Case Title"
 
+# TRANSLATION
+# LABEL/ID_CASE_TITLE_NAME
+#: LABEL/ID_CASE_TITLE_NAME
+msgid "Case Title Name"
+msgstr "Case Title Name"
+
 # TRANSLATION
 # LABEL/ID_CASE_TRACKERS
 #: LABEL/ID_CASE_TRACKERS
@@ -6053,6 +6125,12 @@ msgstr "Delete Role"
 msgid "Delete Routes"
 msgstr "Delete Routes"
 
+# TRANSLATION
+# LABEL/ID_DELETE_SEARCH
+#: LABEL/ID_DELETE_SEARCH
+msgid "Delete Search"
+msgstr "Delete Search"
+
 # TRANSLATION
 # LABEL/ID_DELETE_SELECTED_ITEMS
 #: LABEL/ID_DELETE_SELECTED_ITEMS
@@ -8723,12 +8801,24 @@ msgstr "From"
 msgid "Sender Email"
 msgstr "Sender Email"
 
+# TRANSLATION
+# LABEL/ID_FROM_FINISH_DATE
+#: LABEL/ID_FROM_FINISH_DATE
+msgid "From Finish Date"
+msgstr "From Finish Date"
+
 # TRANSLATION
 # LABEL/ID_FROM_NAME
 #: LABEL/ID_FROM_NAME
 msgid "Sender Name"
 msgstr "Sender Name"
 
+# TRANSLATION
+# LABEL/ID_FROM_START_DATE
+#: LABEL/ID_FROM_START_DATE
+msgid "From Start Date"
+msgstr "From Start Date"
+
 # TRANSLATION
 # LABEL/ID_FTP_MONITOR_SETTINGS
 #: LABEL/ID_FTP_MONITOR_SETTINGS
@@ -9377,6 +9467,12 @@ msgstr "Hide Dirs"
 msgid "Hide Process Information"
 msgstr "Hide Process Information"
 
+# TRANSLATION
+# LABEL/ID_HIGH
+#: LABEL/ID_HIGH
+msgid "High"
+msgstr "High"
+
 # TRANSLATION
 # LABEL/ID_HISTORY
 #: LABEL/ID_HISTORY
@@ -10217,6 +10313,12 @@ msgstr "You have set a invalid Application Number"
 msgid "Invalid Case Delegation index for this user"
 msgstr "Invalid Case Delegation index for this user"
 
+# TRANSLATION
+# LABEL/ID_INVALID_CASE_NUMBER_RANGE
+#: LABEL/ID_INVALID_CASE_NUMBER_RANGE
+msgid "Invalid case number range, use e.g. 1-5, 8, 11-13"
+msgstr "Invalid case number range, use e.g. 1-5, 8, 11-13"
+
 # TRANSLATION
 # LABEL/ID_INVALID_DATA
 #: LABEL/ID_INVALID_DATA
@@ -10637,6 +10739,12 @@ msgstr "Last Employee"
 msgid "Last Login"
 msgstr "Last Login"
 
+# TRANSLATION
+# LABEL/ID_LAST_MODIFIED_DATE
+#: LABEL/ID_LAST_MODIFIED_DATE
+msgid "Last-Modified Date"
+msgstr "Last-Modified Date"
+
 # TRANSLATION
 # LABEL/ID_LAST_MODIFY
 #: LABEL/ID_LAST_MODIFY
@@ -10931,6 +11039,12 @@ msgstr "Case Scheduler Log"
 msgid "Log Information"
 msgstr "Log Information"
 
+# TRANSLATION
+# LABEL/ID_LOW
+#: LABEL/ID_LOW
+msgid "Low"
+msgstr "Low"
+
 # TRANSLATION
 # LABEL/ID_MAFE_TRANSLATION_DIRECTORY
 #: LABEL/ID_MAFE_TRANSLATION_DIRECTORY
@@ -21011,12 +21125,42 @@ msgstr "Please select the plugin"
 msgid "Please select a .po file"
 msgstr "Please select a .po file"
 
+# TRANSLATION
+# LABEL/ID_PLEASE_SELECT_THE_STATUS_FOR_THE_SEARCH
+#: LABEL/ID_PLEASE_SELECT_THE_STATUS_FOR_THE_SEARCH
+msgid "Please select the status for the search:"
+msgstr "Please select the status for the search:"
+
 # TRANSLATION
 # LABEL/ID_PLEASE_SELECT_UPGRADE_FILE
 #: LABEL/ID_PLEASE_SELECT_UPGRADE_FILE
 msgid "Please select the upgrade file"
 msgstr "Please select the upgrade file"
 
+# TRANSLATION
+# LABEL/ID_PLEASE_SET_A_RANGE_OF_CASES_START_DATE_TO_SEARCH
+#: LABEL/ID_PLEASE_SET_A_RANGE_OF_CASES_START_DATE_TO_SEARCH
+msgid "Please set a range of cases Start Date to search:"
+msgstr "Please set a range of cases Start Date to search:"
+
+# TRANSLATION
+# LABEL/ID_PLEASE_SET_A_RANGE_OF_CASES_FINISH_DATE_TO_SEARCH
+#: LABEL/ID_PLEASE_SET_A_RANGE_OF_CASES_FINISH_DATE_TO_SEARCH
+msgid "Please set a range of cases Finish Date to search:"
+msgstr "Please set a range of cases Finish Date to search:"
+
+# TRANSLATION
+# LABEL/ID_PLEASE_SET_A_RANGE_TO_CASES_TO_SEARCH
+#: LABEL/ID_PLEASE_SET_A_RANGE_TO_CASES_TO_SEARCH
+msgid "Please set a range of cases to search:"
+msgstr "Please set a range of cases to search:"
+
+# TRANSLATION
+# LABEL/ID_PLEASE_SET_THE_CASE_NUMBER_TO_BE_SEARCHED
+#: LABEL/ID_PLEASE_SET_THE_CASE_NUMBER_TO_BE_SEARCHED
+msgid "Please set the case number to be searched:"
+msgstr "Please set the case number to be searched:"
+
 # TRANSLATION
 # LABEL/ID_PLEASE_SET_VALUE_DAYS_EXECUTION_TIME_FIELD
 #: LABEL/ID_PLEASE_SET_VALUE_DAYS_EXECUTION_TIME_FIELD
@@ -23495,6 +23639,12 @@ msgstr "Save Line Position"
 msgid "Save New Step"
 msgstr "Save New Step"
  
+# TRANSLATION
+# LABEL/ID_SAVE_SEARCH
+#: LABEL/ID_SAVE_SEARCH
+msgid "Save Search"
+msgstr "Save Search"
+
 # TRANSLATION
 # LABEL/ID_SAVE_SETTINGS
 #: LABEL/ID_SAVE_SETTINGS
@@ -23645,6 +23795,36 @@ msgstr "An unexpected error occurred while searching for your results. Please co
 msgid "Search also in the APP_UID field"
 msgstr "Search also in the APP_UID field"
 
+# TRANSLATION
+# LABEL/ID_SEARCH_BY_CASE_NUMBER
+#: LABEL/ID_SEARCH_BY_CASE_NUMBER
+msgid "Search by Case #:"
+msgstr "Search by Case #:"
+
+# TRANSLATION
+# LABEL/ID_SEARCH_BY_CASE_TITLE
+#: LABEL/ID_SEARCH_BY_CASE_TITLE
+msgid "Search by Case Title:"
+msgstr "Search by Case Title:"
+
+# TRANSLATION
+# LABEL/ID_SEARCH_BY_FINISH_DATE
+#: LABEL/ID_SEARCH_BY_FINISH_DATE
+msgid "Search by Finish Date:"
+msgstr "Search by Finish Date:"
+
+# TRANSLATION
+# LABEL/ID_SEARCH_BY_PROCESS_NAME
+#: LABEL/ID_SEARCH_BY_PROCESS_NAME
+msgid "Search by Process Name:"
+msgstr "Search by Process Name:"
+
+# TRANSLATION
+# LABEL/ID_SEARCH_BY_START_DATE
+#: LABEL/ID_SEARCH_BY_START_DATE
+msgid "Search by Start Date:"
+msgstr "Search by Start Date:"
+
 # TRANSLATION
 # LABEL/ID_SEARCH_FOR_USER
 #: LABEL/ID_SEARCH_FOR_USER
@@ -25229,6 +25409,12 @@ msgstr "Task invalid or the user is not assigned to the task"
 msgid "[LABEL/ID_TASK_IN_PROGRESS] Task in Progress"
 msgstr "Task in Progress"
 
+# TRANSLATION
+# LABEL/ID_TASK_NAME
+#: LABEL/ID_TASK_NAME
+msgid "Task Name"
+msgstr "Task Name"
+
 # TRANSLATION
 # LABEL/ID_TASK_NOT_EXIST
 #: LABEL/ID_TASK_NOT_EXIST
@@ -25541,6 +25727,12 @@ msgstr "Thu"
 msgid "Timer event"
 msgstr "Timer event"
 
+# TRANSLATION
+# LABEL/ID_CLEAN_ALL
+#: LABEL/ID_CLEAN_ALL
+msgid "Clean All"
+msgstr "Clean All"
+
 # TRANSLATION
 # LABEL/ID_CLEAN_WEBENTRIES
 #: LABEL/ID_CLEAN_WEBENTRIES
@@ -25865,6 +26057,13 @@ msgstr "Total Cases Reassigned"
 msgid "To do"
 msgstr "To do"
 
+
+# TRANSLATION
+# LABEL/ID_TO_FINISH_DATE
+#: LABEL/ID_TO_FINISH_DATE
+msgid "To Finish Date (Optional)"
+msgstr "To Finish Date (Optional)"
+
 # TRANSLATION
 # LABEL/ID_TO_FLOAT
 #: LABEL/ID_TO_FLOAT
@@ -25889,6 +26088,12 @@ msgstr "Reassign"
 msgid "Review"
 msgstr "Review"
 
+# TRANSLATION
+# LABEL/ID_TO_START_DATE
+#: LABEL/ID_TO_START_DATE
+msgid "To Start Date (Optional)"
+msgstr "To Start Date (Optional)"
+
 # TRANSLATION
 # LABEL/ID_TO_STRING
 #: LABEL/ID_TO_STRING
@@ -27377,6 +27582,18 @@ msgstr "Version History"
 msgid "Vertical Line"
 msgstr "Vertical Line"
 
+# TRANSLATION
+# LABEL/ID_VERY_HIGH
+#: LABEL/ID_VERY_HIGH
+msgid "Very High"
+msgstr "Very High"
+
+# TRANSLATION
+# LABEL/ID_VERY_LOW
+#: LABEL/ID_VERY_LOW
+msgid "Very Low"
+msgstr "Very Low"
+
 # TRANSLATION
 # LABEL/ID_VIEW
 #: LABEL/ID_VIEW

workflow/engine/data/mysql/insert.sql

@@ -57138,12 +57138,14 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_ADD_DATA_PMTABLE','en','Add Data to PM table','2014-10-10') ,
 ( 'LABEL','ID_ADD_FIELD','en','Add field','2014-01-15') ,
 ( 'LABEL','ID_ADD_FILE','en','Add file','2020-06-11') ,
+( 'LABEL','ID_ADD_FILTER','en','Add Filter','2020-12-16') ,
 ( 'LABEL','ID_ADD_HORIZONTAL_LINE','en','Add horizontal line','2015-02-20') ,
 ( 'LABEL','ID_ADD_LICENSE','en','Please add a new license','2014-01-15') ,
 ( 'LABEL','ID_ADD_MESSAGE','en','Add message','2014-01-15') ,
 ( 'LABEL','ID_ADD_NOTE','en','Add Note','2014-01-15') ,
 ( 'LABEL','ID_ADD_PERMISSION_TO_ROLE','en','Add Permission To Role','2014-10-10') ,
 ( 'LABEL','ID_ADD_ROW','en','Add Row','2014-01-15') ,
+( 'LABEL','ID_ADD_SEARCH_FILTER_CRITERIA','en','Add Search Filter Criteria','2020-12-16') ,
 ( 'LABEL','ID_ADD_SUB_PROCESS','en','Add Sub-Process','2015-02-24') ,
 ( 'LABEL','ID_ADD_TASK','en','Add Task','2015-02-20') ,
 ( 'LABEL','ID_ADD_TEXT','en','Add Text','2015-02-20') ,
@@ -57307,6 +57309,13 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_BUILD_CACHE','en','Build Cache','2014-10-10') ,
 ( 'LABEL','ID_BUTTON','en','Button','2014-01-15') ,
 ( 'LABEL','ID_BUY_NOW','en','Buy now','2014-09-18') ,
+( 'LABEL','ID_BY_CASE_NUMBER','en','By Case #','2020-12-16') ,
+( 'LABEL','ID_BY_CASE_TITLE','en','By Case Title','2020-12-16') ,
+( 'LABEL','ID_BY_PROCESS_NAME','en','Process Name','2020-12-16') ,
+( 'LABEL','ID_BY_TASK','en','By Task','2020-12-16') ,
+( 'LABEL','ID_BY_STATUS','en','By Status','2020-12-16') ,
+( 'LABEL','ID_BY_START_DATE','en','By Start Date','2020-12-16') ,
+( 'LABEL','ID_BY_FINISH_DATE','en','By Finish Date','2020-12-16') ,
 ( 'LABEL','ID_CACHE_BTN_BUILD','en','Build Cache','2014-01-15') ,
 ( 'LABEL','ID_CACHE_BTN_SETUP_PASSWRD','en','Setup Password','2014-01-15') ,
 ( 'LABEL','ID_CACHE_BTN_SETUP_SESSION','en','Delete older session files','2014-01-15') ,
@@ -57474,6 +57483,8 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_CASE_NO_CURRENT_TASKS_BECAUSE_CASE_ITS_COMPLETED','en','There are no current tasks because case {0}: {1} has COMPLETED status','2015-03-24') ,
 ( 'LABEL','ID_CASE_NUMBER','en','Case number','2015-09-15') ,
 ( 'LABEL','ID_CASE_NUMBER_CAPITALIZED','en','Case Number','2017-02-22') ,
+( 'LABEL','ID_CASE_NUMBER_FILTER_EG','en','e.g. 1-5, 8, 11-13','2020-12-16') ,
+( 'LABEL','ID_CASE_NUMBER_FILTER_RANGE_EG','en','e.g. 8','2020-12-16') ,
 ( 'LABEL','ID_CASE_OUTPUT_DOCUMENT_DOES_NOT_EXIST','en','This output document with {0}: {1} does not exist.','2016-07-28') ,
 ( 'LABEL','ID_CASE_PAUSED_SUCCESSFULLY','en','The Case {APP_NUMBER} was paused successfully and it will be unpaused on date {UNPAUSE_DATE}','2014-01-15') ,
 ( 'LABEL','ID_CASE_PAUSE_LABEL_NOTE','en','The case was paused due to:','2014-10-21') ,
@@ -57492,6 +57503,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_CASE_START','en','Start Case','2014-01-15') ,
 ( 'LABEL','ID_CASE_STOPPED_TRIGGER','en','The case has not stopped due to its trigger.','2015-01-29') ,
 ( 'LABEL','ID_CASE_TITLE','en','Case Title','2014-01-15') ,
+( 'LABEL','ID_CASE_TITLE_NAME','en','Case Title Name','2020-12-16') ,
 ( 'LABEL','ID_CASE_TRACKERS','en','Case trackers','2014-01-15') ,
 ( 'LABEL','ID_CASE_TRACKER_OBJECT_DOES_NOT_EXIST','en','The case tracker object with {0}: {1} does not exist.','2014-05-20') ,
 ( 'LABEL','ID_CASE_UNARHIVE','en','Case Unarhive','2015-09-15') ,
@@ -57533,6 +57545,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_CLASS_ALREADY_EXISTS','en','Class already exists','2014-01-15') ,
 ( 'LABEL','ID_CLASS_TABLE_DOESNT_EXIST','en','This Class Table doesn''t exist!','2014-01-15') ,
 ( 'LABEL','ID_CLEAR','en','Clear','2014-01-15') ,
+( 'LABEL','ID_CLEAN_ALL','en','Clean All','2020-12-16') ,
 ( 'LABEL','ID_CLEAN_WEBENTRIES','en','Clean web-entries','2020-11-10') ,
 ( 'LABEL','ID_CLEAN_WEBENTRIES_DESC','en','Clean web-entries','2020-11-10') ,
 ( 'LABEL','ID_CLEAR_CACHE','en','Clear Cache','2014-01-15') ,
@@ -57837,6 +57850,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_DELETE_REPORT_TABLE','en','Do you want to delete the selected report tables?','2014-01-15') ,
 ( 'LABEL','ID_DELETE_ROLE','en','Delete Role','2014-10-10') ,
 ( 'LABEL','ID_DELETE_ROUTES','en','Delete Routes','2015-02-20') ,
+( 'LABEL','ID_DELETE_SEARCH','en','Delete Search','2020-12-16') ,
 ( 'LABEL','ID_DELETE_SELECTED_ITEMS','en','Do you want to deleted selected({0}) items?','2014-01-15') ,
 ( 'LABEL','ID_DELETE_SELECTED_LOGO','en','Do you want to delete the selected logo?','2014-01-15') ,
 ( 'LABEL','ID_DELETE_SKIN','en','Delete Skin','2014-10-10') ,
@@ -58300,7 +58314,9 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_FRI','en','Fri','2014-01-15') ,
 ( 'LABEL','ID_FROM','en','From','2014-01-15') ,
 ( 'LABEL','ID_FROM_EMAIL','en','Sender Email','2017-02-21') ,
+( 'LABEL','ID_FROM_FINISH_DATE','en','From Finish Date','2020-12-16') ,
 ( 'LABEL','ID_FROM_NAME','en','Sender Name','2017-02-21') ;
+( 'LABEL','ID_FROM_START_DATE','en','From Start Date','2020-12-16') ,
 INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE )  VALUES 
 
 ( 'LABEL','ID_FTP_MONITOR_SETTINGS','en','FTP Monitor Settings','2014-01-15') ,
@@ -58413,6 +58429,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_HIDE','en','Hide','2014-01-15') ,
 ( 'LABEL','ID_HIDE_DIRS','en','Hide Dirs','2014-05-26') ,
 ( 'LABEL','ID_HIDE_PROCESS_INF','en','Hide Process Information','2014-01-15') ,
+( 'LABEL','ID_HIGH','en','High','2020-12-16') ,
 ( 'LABEL','ID_HISTORY','en','My Case History','2014-01-15') ,
 ( 'LABEL','ID_HISTORY_MESSAGES','en','My Message History','2017-02-21') ,
 ( 'LABEL','ID_HISTORY_MESSAGE_CASE','en','Messages History','2014-01-15') ,
@@ -58559,6 +58576,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_INVALID_APPLICATION_ID_MSG','en','An invalid application ID was stored for the session. <br/> This could have happened if you opened another case in a new tab or window. <br/> Please {0} the case.','2014-10-21') ,
 ( 'LABEL','ID_INVALID_APPLICATION_NUMBER','en','You have set a invalid Application Number','2014-01-15') ,
 ( 'LABEL','ID_INVALID_CASE_DELEGATION_INDEX','en','Invalid Case Delegation index for this user','2014-01-15') ,
+( 'LABEL','ID_INVALID_CASE_NUMBER_RANGE','en','Invalid case number range, use e.g. 1-5, 8, 11-13','2020-12-16') ,
 ( 'LABEL','ID_INVALID_DATA','en','Invalid data','2014-01-15') ,
 ( 'LABEL','ID_INVALID_END_HOURS','en','The following end hours rows are invalid:','2014-01-15') ,
 ( 'LABEL','ID_INVALID_EXTENSION','en','Invalid file extension!','2014-01-15') ,
@@ -58630,6 +58648,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_LASTNAME','en','Last Name','2014-01-15') ,
 ( 'LABEL','ID_LAST_EMPLOYEE','en','Last Employee','2014-01-15') ,
 ( 'LABEL','ID_LAST_LOGIN','en','Last Login','2014-01-15') ,
+( 'LABEL','ID_LAST_MODIFIED_DATE','en','Last-Modified Date','2020-12-16') ,
 ( 'LABEL','ID_LAST_MODIFY','en','Last Modified','2017-02-21') ,
 ( 'LABEL','ID_LAST_NAME','en','Last Name','2014-01-15') ,
 ( 'LABEL','ID_LAST_RUN_TIME','en','Last Run Time','2014-01-15') ;
@@ -58681,6 +58700,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_LOG_AGAIN','en','Please login again to apply the changes.','2014-01-15') ,
 ( 'LABEL','ID_LOG_CASE_SCHEDULER','en','Case Scheduler Log','2014-01-15') ,
 ( 'LABEL','ID_LOG_INFO','en','Log Information','2014-01-15') ,
+( 'LABEL','ID_LOW','en','Low','2020-12-16') ,
 ( 'LABEL','ID_MAFE_TRANSLATION_DIRECTORY','en','MAFE Translation Directory','2014-01-15') ,
 ( 'LABEL','ID_MAFE_0015b7e51c1ca4293041c429985ca323','en','The specified subform could not be found in the process.', NOW()) ,
 ( 'LABEL','ID_MAFE_0025301679e9722c3abd5914cfbc7dd7','en','Database connection edited successfully', NOW()) ,
@@ -60402,7 +60422,12 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_PLEASE_SELECT_PHOTO','en','Please select a photo','2014-01-15') ,
 ( 'LABEL','ID_PLEASE_SELECT_PLUGIN','en','Please select the plugin','2014-01-15') ,
 ( 'LABEL','ID_PLEASE_SELECT_PO_FILE','en','Please select a .po file','2014-01-15') ,
-( 'LABEL','ID_PLEASE_SELECT_UPGRADE_FILE','en','Please select the upgrade file','2014-01-15') ,
+( 'LABEL','ID_PLEASE_SELECT_THE_STATUS_FOR_THE_SEARCH','en','Please select the status for the search:','2020-12-16') ,
+( 'LABEL','ID_PLEASE_SELECT_UPGRADE_FILE','en','Please select the upgrade file','2014-01-15') ,º
+( 'LABEL','ID_PLEASE_SET_A_RANGE_OF_CASES_START_DATE_TO_SEARCH','en','Please set a range of cases Start Date to search:','2020-12-16') ,
+( 'LABEL','ID_PLEASE_SET_A_RANGE_OF_CASES_FINISH_DATE_TO_SEARCH','en','Please set a range of cases Finish Date to search:','2020-12-16') ,
+( 'LABEL','ID_PLEASE_SET_A_RANGE_TO_CASES_TO_SEARCH','en','Please set a range of cases to search:','2020-12-16') ,
+( 'LABEL','ID_PLEASE_SET_THE_CASE_NUMBER_TO_BE_SEARCHED','en','Please set the case number to be searched:','2020-12-16') ,
 ( 'LABEL','ID_PLEASE_SET_VALUE_DAYS_EXECUTION_TIME_FIELD','en','Please, set a value for the days in the Execution Time field.','2014-10-23') ,
 ( 'LABEL','ID_PLEASE_TRY_LATER','en','Please try later.','2016-04-08') ,
 ( 'LABEL','ID_PLEASE_WAIT','en','Please wait...','2014-01-15') ,
@@ -60829,6 +60854,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_SAVE_DYNAFORM_INFORMATION_BEFORE_PRINTING','en','Do you want to save the dynaform information before printing it?','2014-01-15') ,
 ( 'LABEL','ID_SAVE_GUIDE_POSITION','en','Save Line Position','2015-02-20') ,
 ( 'LABEL','ID_SAVE_NEW_STEP','en','Save New Step','2015-02-20') ,
+( 'LABEL','ID_SAVE_SEARCH','en','Save Search','2020-12-16') ,
 ( 'LABEL','ID_SAVE_SETTINGS','en','Save Settings','2014-01-15') ,
 ( 'LABEL','ID_SAVE_TASK_POSITION','en','Save Task Position','2015-02-20') ,
 ( 'LABEL','ID_SAVE_TASK_PROPERTIES','en','Save Task Properties','2015-02-20') ,
@@ -60854,6 +60880,11 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_SEARCHING_UNEXPECTED_ERROR','en','An unexpected error occurred while searching for your results. Error Code {0} and Please contact your administrator.','2019-05-03') ,
 ( 'LABEL','ID_SEARCHING_UNEXPECTED_ERROR_DEFAULT','en','An unexpected error occurred while searching for your results. Please contact your administrator.','2019-05-15') ,
 ( 'LABEL','ID_SEARCH_ALSO_APP_UID','en','Search also in the APP_UID field','2014-10-30') ,
+( 'LABEL','ID_SEARCH_BY_CASE_NUMBER','en','Search by Case #:','2020-12-16') ,
+( 'LABEL','ID_SEARCH_BY_CASE_TITLE','en','Search by Case Title:','2020-12-16') ,
+( 'LABEL','ID_SEARCH_BY_FINISH_DATE','en','Search by Finish Date:','2020-12-16') ,
+( 'LABEL','ID_SEARCH_BY_PROCESS_NAME','en','Search by Process Name:','2020-12-16') ,
+( 'LABEL','ID_SEARCH_BY_START_DATE','en','Search by Start Date:','2020-12-16') ,
 ( 'LABEL','ID_SEARCH_FOR_USER','en','Search for user','2015-09-15') ,
 ( 'LABEL','ID_SEARCH_PATTERN','en','Search Pattern','2014-01-15') ,
 ( 'LABEL','ID_SEARCH_RESULT','en','Search results','2014-01-15') ,
@@ -61128,6 +61159,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE )  VALUES 
 
 ( 'LABEL','ID_TASK_IN_PROGRESS','en','Task in Progress','2014-01-15') ,
+( 'LABEL','ID_TASK_NAME','en','Task Name','2020-12-16') ,
 ( 'LABEL','ID_TASK_NOT_EXIST','en','The task with {0}: ''{1}'' does not exist.','2014-05-29') ,
 ( 'LABEL','ID_TASK_NOT_FOUND','en','Task not found for id: {0}','2014-05-21') ,
 ( 'LABEL','ID_TASK_NOT_RELATED','en','[Not related to a task]','2014-01-15') ,
@@ -61269,10 +61301,12 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_TOTAL_CASES','en','Total Cases','2014-01-15') ,
 ( 'LABEL','ID_TOTAL_CASES_REASSIGNED','en','Total Cases Reassigned','2014-01-15') ,
 ( 'LABEL','ID_TO_DO','en','To do','2014-01-15') ,
+( 'LABEL','ID_TO_FINISH_DATE','en','To Finish Date (Optional)','2020-12-16') ,
 ( 'LABEL','ID_TO_FLOAT','en','Replace the value converted to float','2014-01-15') ,
 ( 'LABEL','ID_TO_INTEGER','en','Replace the value converted to integer','2014-01-15') ,
 ( 'LABEL','ID_TO_REASSIGN','en','Reassign','2014-01-15') ,
 ( 'LABEL','ID_TO_REVISE','en','Review','2014-01-15') ,
+( 'LABEL','ID_TO_START_DATE','en','To Start Date (Optional)','2020-12-16') ,
 ( 'LABEL','ID_TO_STRING','en','Replace the value in quotes','2014-01-15') ,
 ( 'LABEL','ID_TO_URL','en','Replace the value with URL encoding','2014-01-15') ,
 ( 'LABEL','ID_TRANSFER_HISTORY','en','Transfer History','2014-01-15') ,
@@ -61529,6 +61563,8 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_VERSIONING','en','Versioning','2014-01-15') ,
 ( 'LABEL','ID_VERSION_HISTORY','en','Version History','2014-01-15') ,
 ( 'LABEL','ID_VERTICAL_LINE','en','Vertical Line','2014-01-15') ,
+( 'LABEL','ID_VERY_HIGH','en','Very High','2020-12-16') ,
+( 'LABEL','ID_VERY_LOW','en','Very Low','2020-12-16') ,
 ( 'LABEL','ID_VIEW','en','View','2014-01-15') ,
 ( 'LABEL','ID_VIEW_EDIT_PROFILE','en','View/Edit Profile','2014-01-15') ,
 ( 'LABEL','ID_VIEW_INFO','en','View Information','2014-01-15') ,