From 8a755f874d1d0163f54781e95b4a28bdfd79cc4a Mon Sep 17 00:00:00 2001
From: Andrea Adamczyk <andrea.adamczyk@processmaker.com>
Date: Thu, 10 Dec 2020 11:19:30 -0400
Subject: [PATCH] PMCORE-2529

PMCORE-2541: Improve  update filters in advanced search UI

fix Cr notes

fix Cr notes 2

solve conflicts

fix Cr notes 3
---
 package-lock.json                             |  19 +-
 package.json                                  |   2 +-
 resources/assets/js/api/Api.js                |  27 ++
 resources/assets/js/api/Filters.js            |  25 +-
 .../js/components/menu/CustomSidebar.vue      |  38 +--
 .../js/components/search/GenericFilter.vue    | 244 +++++++++---------
 .../components/search/popovers/CaseNumber.vue |  22 +-
 .../components/search/popovers/CaseTitle.vue  |  19 +-
 .../js/components/search/popovers/DueDate.vue |  28 +-
 .../search/popovers/LastModifiedDate.vue      |  28 +-
 .../search/popovers/ProcessName.vue           |  86 +++---
 resources/assets/js/home/AdvancedSearch.vue   |  97 ++++++-
 resources/assets/js/home/Home.vue             |  99 +++++--
 13 files changed, 395 insertions(+), 339 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3ba4535e5..25d6a6d78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9024,11 +9024,6 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
-    "resize-observer-polyfill": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
-    },
     "resolve": {
       "version": "1.19.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz",
@@ -10724,15 +10719,6 @@
         "swiper": "^4.0.7"
       }
     },
-    "vue-bootstrap-typeahead": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/vue-bootstrap-typeahead/-/vue-bootstrap-typeahead-0.2.6.tgz",
-      "integrity": "sha512-BcUAnvfN+PS0StL6E3endd37P7HUt9otk+8m7tsa2gkt2I2KY8O2Dma49oR8ie8iletvJAlAqpN+klF6ktPULQ==",
-      "requires": {
-        "resize-observer-polyfill": "^1.5.0",
-        "vue": "^2.5.17"
-      }
-    },
     "vue-chartjs": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-3.5.1.tgz",
@@ -10845,6 +10831,11 @@
         }
       }
     },
+    "vue-multiselect": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-2.1.6.tgz",
+      "integrity": "sha512-s7jmZPlm9FeueJg1RwJtnE9KNPtME/7C8uRWSfp9/yEN4M8XcS/d+bddoyVwVnvFyRh9msFo0HWeW0vTL8Qv+w=="
+    },
     "vue-muuri": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/vue-muuri/-/vue-muuri-0.1.2.tgz",
diff --git a/package.json b/package.json
index 1be50e64c..1c9e5c42c 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,6 @@
     "uiv": "^0.28.0",
     "vue": "^2.6.12",
     "vue-awesome-swiper": "^3.1.3",
-    "vue-bootstrap-typeahead": "^0.2.6",
     "vue-chartjs": "^3.3.2",
     "vue-clipboards": "^1.2.4",
     "vue-color": "^2.7.0",
@@ -48,6 +47,7 @@
     "vue-fullscreen": "^2.1.3",
     "vue-i18n": "^8.22.2",
     "vue-js-toggle-button": "^1.3.1",
+    "vue-multiselect": "^2.1.6",
     "vue-muuri": "^0.1.2",
     "vue-router": "^3.4.9",
     "vue-search-select": "^2.7.0",
diff --git a/resources/assets/js/api/Api.js b/resources/assets/js/api/Api.js
index fc21c1b74..22e0dc1e1 100644
--- a/resources/assets/js/api/Api.js
+++ b/resources/assets/js/api/Api.js
@@ -63,8 +63,10 @@ const services = {
     UNASSIGNED_LIST: "/home/unassigned",
     MY_FILTERS: "/cases/advanced-search/filters",
     POST_MY_FILTERS: "/cases/advanced-search/filter",
+    PUT_MY_FILTERS: "/cases/advanced-search/filter/",
     DELETE_MY_FILTERS: "/cases/advanced-search/filter/",
     SEARCH: "/home/search",
+    PROCESSES: "/home/processes"
 };
 
 export default {
@@ -162,6 +164,7 @@ export default {
             }
         });
     },
+    
     delete(options) {
         let service = options.service || "",
             id = options.id || {},
@@ -181,5 +184,29 @@ export default {
                 "Authorization": `Bearer ` + credentials.accessToken
             }
         });
+    },
+    put(options) {
+        let service = options.service || "",
+            params = options.params || {},
+            data = options.data || {},
+            id = options.id || {},
+            keys = options.keys || {},
+            url,
+            credentials = window.config.SYS_CREDENTIALS,
+            workspace = window.config.SYS_WORKSPACE,
+            server = window.config.SYS_SERVER;
+        url = this.getUrl(_.extend(keys, credentials, { server }, { workspace }), service);
+
+        return axios({
+            method: "put",
+            url: url + id,
+            params,
+            data,
+            headers: {
+                "Accept": "application/json",
+                "Content-Type": "application/json",
+                "Authorization": `Bearer ` + credentials.accessToken
+            }
+        });
     }
 };
diff --git a/resources/assets/js/api/Filters.js b/resources/assets/js/api/Filters.js
index 192e21665..53456f4d0 100644
--- a/resources/assets/js/api/Filters.js
+++ b/resources/assets/js/api/Filters.js
@@ -20,9 +20,15 @@ export let filters = {
     delete(data) {
         return Api.delete({
             service: "DELETE_MY_FILTERS",
-
             id: data.id,
-
+            keys: {},
+        });
+    },
+    put(data) {
+        return Api.put({
+            service: "PUT_MY_FILTERS",
+            id: data.id,
+            data,
             keys: {},
         });
     },
@@ -43,14 +49,13 @@ export let filters = {
      * Service to get the process list
      */
     processList(query) {
-        return axios.post(
-            window.config.SYS_SERVER +
-                window.config.SYS_URI +
-                `cases/casesList_Ajax?actionAjax=processListExtJs&action=search`,
-            {
-                query,
-            }
-        );
+        return Api.get({
+            service: "PROCESSES",
+            params: {
+                text: query,
+            },
+            keys: {},
+        });
     },
     /**
      * Service to get the users list
diff --git a/resources/assets/js/components/menu/CustomSidebar.vue b/resources/assets/js/components/menu/CustomSidebar.vue
index e54df92ed..ebdd91fc0 100644
--- a/resources/assets/js/components/menu/CustomSidebar.vue
+++ b/resources/assets/js/components/menu/CustomSidebar.vue
@@ -23,9 +23,9 @@
 import api from "./../../api/index";
 export default {
     name: "CustomSidebar",
+    props: ["menu"],
     data() {
         return {
-            menu: [],
             collapsed: false,
             isOnMobile: false,
             hideToggle: true,
@@ -43,14 +43,6 @@ export default {
     mounted() {
         this.onResize();
         window.addEventListener("resize", this.onResize);
-        api.menu
-            .get()
-            .then((response) => {
-                this.menu = this.mappingMenu(response.data);
-            })
-            .catch((e) => {
-                console.error(e);
-            });
     },
     methods: {
         /**
@@ -82,34 +74,6 @@ export default {
                 this.isOnMobile = false;
                 this.collapsed = false;
             }
-        },
-        /**
-         * Do a mapping of vue view for menus
-         * @returns array
-         */
-        mappingMenu(data) {
-            var i,
-                j,
-                newData = data,
-                auxId,
-                viewVue = {
-                    'CASES_MY_CASES': 'MyCases',
-                    'CASES_SEARCH': 'advanced-search',
-                    'CASES_INBOX': 'todo',
-                    'CASES_DRAFT': 'draft',
-                    'CASES_PAUSED': 'paused',
-                    'CASES_SELFSERVICE': 'unassigned',
-                    'CONSOLIDATED_CASES': 'batch-routing',
-                    'CASES_TO_REASSIGN': 'task-reassignments',
-                    'CASES_FOLDERS': 'my-documents'
-                };
-            for (i = 0; i < data.length; i += 1) {
-                auxId = data[i].id || '';
-                if (auxId !== '' && viewVue[auxId]) {
-                    newData[i].id = viewVue[auxId];
-                }
-            }
-            return newData;
         }
     },
 };
diff --git a/resources/assets/js/components/search/GenericFilter.vue b/resources/assets/js/components/search/GenericFilter.vue
index 7ac3a4599..9feb77068 100644
--- a/resources/assets/js/components/search/GenericFilter.vue
+++ b/resources/assets/js/components/search/GenericFilter.vue
@@ -1,15 +1,7 @@
 <template>
     <div>
         <b-container fluid class="bv-example-row" id="my-container">
-            <b-alert
-                :show="dismissCountDown"
-                dismissible
-                :variant="variant"
-                @dismissed="dismissCountDown = 0"
-                @dismiss-count-down="countDownChanged"
-            >
-                {{ message }}
-            </b-alert>
+          
             <b-row>
                 <b-col md="10"><h5>{{$t('ID_OPEN_SEARCH')}}</h5></b-col>
             </b-row>
@@ -116,7 +108,12 @@
                                         :title="tag"
                                         :variant="tagVariant"
                                         class="mr-1"
-                                    >
+                                    >   
+                                        
+                                        <div :id="tag">
+                                            <i class="fas fa-tags"></i>
+                                            {{ searchTagsModels[tag].tagText }}
+                                        </div>
                                         <component
                                             v-bind:is="tag"
                                             v-bind:info="searchTagsModels[tag]"
@@ -176,103 +173,67 @@ import DueDate from "./popovers/DueDate.vue";
 import LastModifiedDate from "./popovers/LastModifiedDate.vue";
 import CaseTitle from "./popovers/CaseTitle.vue";
 import ProcessName from "./popovers/ProcessName.vue";
-import ParticipatedLevel from "./popovers/ParticipatedLevel.vue";
-import CasePriority from "./popovers/CasePriority.vue";
-import TaskName from "./popovers/TaskName.vue";
-import CaseStatus from "./popovers/CaseStatus.vue";
-import CurrentUser from "./popovers/CurrentUser.vue";
 import api from "./../../api/index";
 
 export default {
     name: "GenericFilter",
-    props: ["id", "name"],
+    props: ["id", "name", "filters"],
     components: {
         SearchPopover,
         CaseNumber,
         DueDate,
         LastModifiedDate,
         CaseTitle,
-        ProcessName,
-        ParticipatedLevel,
-        TaskName,
-        CaseStatus,
-        CasePriority,
-        CurrentUser
+        ProcessName
     },
     data() {
         return {
             addSearchTitle: this.$i18n.t('ID_ADD_SEARCH_FILTER_CRITERIA'),
-            dismissSecs: 5,
-            dismissCountDown: 0,
-            message: "",
-            variant: "info",
+            
             searchTags: [],
             searchTagsModels: {
                 CaseNumber: {
                     title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_CASE')}${this.$i18n.t('ID_IUD')}`,
                     optionLabel: this.$i18n.t('ID_IUD'),
-                    detail: this.$i18n.t('ID_PLEASE_SET_A_RANGE_TO_CASES_TO_SEARCH')
+                    detail: this.$i18n.t('ID_PLEASE_SET_A_RANGE_TO_CASES_TO_SEARCH'),
+                    tagText: "",
+                    filterBy: ["filterCases"],
+                    values: {}
                 },
                 DueDate: {
                     title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_DUE_DATE')}`,
                     optionLabel: this.$i18n.t('ID_DUE_DATE'),
-                    detail: this.$i18n.t('ID_PLEASE_SET_A_RANGE_OF_CASES_DUE_DATE_TO_SEARCH')
+                    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')
+                    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'),
-                    detail: ""
+                    detail: "",
+                    tagText: "",
+                    filterBy: ["caseTitle"],
+                    values: {}
                 },
+                
                 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')
-                },
-                CasePriority: {
-                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_PRIORITY')}`,
-                    optionLabel: this.$i18n.t('ID_PRIORITY'),
-                    detail: this.$i18n.t('ID_PLEASE_SELECT_THE_PRIORITY_FOR_THE_SEARCH'),
-                    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" }
-                    ]
-                },
-                TaskName: {
-                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_TASK')}`,
-                    optionLabel: this.$i18n.t('ID_TASK'),
-                    detail: "",
-                    placeholder: this.$i18n.t('ID_TASK_NAME')
-                },
-                CaseStatus: {
-                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_STATUS')}`,
-                    optionLabel: this.$i18n.t('ID_STATUS'),
-                    detail: this.$i18n.t('ID_PLEASE_SELECT_THE_STATUS_FOR_THE_SEARCH'),
-                    options: [
-                        { text: this.$i18n.t('ID_CASES_STATUS_DRAFT'), value: "DRAFT" },
-                        { text: this.$i18n.t('ID_CASES_STATUS_TO_DO'), value: "TO_DO" },
-                        { text: this.$i18n.t('ID_CASES_STATUS_COMPLETED'), value: "COMPLETED" },
-                        { text: this.$i18n.t('ID_CASES_STATUS_CANCELLED'), value: "CANCELLED" },
-                        { text: this.$i18n.t('ID_CASES_STATUS_PAUSED'), value: "PAUSED" },
-                    ]
-                },
-                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'),
-                    default: {
-                        name: "",
-                    },
-                },
+                    placeholder: this.$i18n.t('ID_PROCESS_NAME'),
+                    tagText: "",
+                    filterBy: ["process", "processOption"],
+                    processOption: {"PRO_TITLE": ""}
+                }
             },
             text: "",
             selected: [],
@@ -280,9 +241,17 @@ export default {
             caseNumber: "",
             saveModalTitle: this.$i18n.t('ID_SAVE_SEARCH'),
             localName: "",
-            nameState: null,
+            nameState: null,        
         };
     },
+    watch: {
+        filters: function (filters) {
+          this.searchTags = [];
+          this.searchTags = [];
+          this.setFilters(filters);
+        }
+    },
+    
     computed: {
         filterOptions: function() {
             let options = [];
@@ -296,75 +265,96 @@ export default {
         },
     },
     methods: {
-        /**
-         * Updates the alert dismiss value to update
-         * dismissCountDown and decrease
-         * @param {mumber}
-         */
-        countDownChanged(dismissCountDown) {
-            this.dismissCountDown = dismissCountDown;
-        },
-        /**
-         * Show the alert message
-         * @param {string} message - message to be displayen in the body
-         * @param {string} type - alert type
-         */
-        showAlert(message, type) {
-            this.message = message;
-            this.variant = type || "info";
-            this.dismissCountDown = this.dismissSecs;
-        },
+       
         onClose() {
         },
+        setFilters(filters) {
+            let that = this;
+            _.forIn(filters, function(value, key) {
+                let temp = that.createTagText(key, value);
+                that.searchTags.push(key);
+                that.selected.push(key);
+            });
+        },
         onOk() {
+            let initialFilters = {};
             this.$root.$emit('bv::hide::popover');
-            this.searchTags = [...this.searchTags, ...this.selected];
+            for (var i = 0; i < this.selected.length; i++) {
+                let item = this.selected[i];
+                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]] = "";
+                    }
+                }
+                
+            }
+            this.$emit("onUpdateFilters", initialFilters) 
+        },
+        createTagText(type, params) {
+            let label = "";
+            switch (type) {
+                case "CaseNumber":
+                    label = `${this.$i18n.t("ID_IUD")}: ${params.filterCases}`
+                    this.searchTagsModels[type].values["filterCases"] =  params.filterCases;
+                    break;
+                case "DueDate":
+                    label = `${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":
+                    label = `${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":
+                    label = `${this.$i18n.t("ID_CASE_TITLE")}: ${params.caseTitle}`;
+                    this.searchTagsModels[type].values["caseTitle"] =  params.caseTitle;
+                    break;
+                case "ProcessName":
+                    label = `${this.$i18n.t("ID_PROCESS")}: ${params.processOption.PRO_TITLE || ''}`;
+                    this.searchTagsModels[type].processOption =  params.processOption || null;
+                    break;
+                default:
+                    break;
+            }
+            this.searchTagsModels[type].tagText = label;
+           
         },
         cleanAllTags() {
             this.searchTags = [];
-            this.jsonFilter = {
-                search: "",
-            };
+            this.selected = [];
+            this.$emit("onUpdateFilters", {});
         },
         customRemove(removeTag, tag) {
+            let temp = { ...this.filters};
+            delete temp[tag];
             removeTag(tag);
-            this.jsonFilter = {
-                search: "",
-            };
+            this.$emit("onUpdateFilters", temp);
         },
         onSearch() {
-            this.$emit("onSearch", this.jsonFilter);
+            this.$emit("onSearch", this.filters);
         },
-        updateSearchTag(params) {
-            this.jsonFilter = { ...this.jsonFilter, ...params };
+        updateSearchTag(params) {          
+            this.$emit("onUpdateFilters", { ...this.filters, ...params });
         },
         onJumpCase() {
             this.$emit("onJumpCase",  this.caseNumber);
         },
         onClick() {
             if (this.id) {
-                this.updateData(this.name);
+                this.updateData(this.id);
             } else {
                 this.$refs['saveFilter'].show();
             }
             
         },
-
         /**
          * Delete Search handler
          */
         onDeleteSearch() {
-            api.filters
-                .delete({
-                    id: this.id,
-                })
-                .then((response) => {
-                    
-                    this.$emit("onRemoveFilter", this.id);
-                })
-                .catch((e) => {
-                    this.showAlert(e.message, "danger");
-                });
+             this.$emit("onRemoveFilter", this.id);
         },
         checkFormValidity() {
             const valid = this.$refs.form.checkValidity();
@@ -392,22 +382,26 @@ export default {
                 this.saveData(this.localName);
             });
         },
+        /**
+         * Save Data Handler
+         */ 
         saveData(name) {
-            api.filters
-            .post({
+            this.$emit("onSubmit", {
                 name: name,
-                filters: JSON.stringify({ uno: "first" }),
-            })
-            .then((response) => {
-                this.$emit("onSubmit", response.data);
-            })
-            .catch((e) => {
-                this.showAlert(e.message, "danger");
+                filters: this.filters
             });
         },
-        updateData() {
-            this.onDeleteSearch();
-            this.saveData(this.name);
+        /**
+         * Update Data Handler
+         * @param {string} id - filter id
+         */ 
+        updateData(id) {
+            this.$emit("onSubmit", {
+                type: "update",
+                id: id,
+                name: this.name,
+                filters: this.filters
+            });
         }
     },
 };
diff --git a/resources/assets/js/components/search/popovers/CaseNumber.vue b/resources/assets/js/components/search/popovers/CaseNumber.vue
index edc0789e0..ed94d9f29 100644
--- a/resources/assets/js/components/search/popovers/CaseNumber.vue
+++ b/resources/assets/js/components/search/popovers/CaseNumber.vue
@@ -7,12 +7,6 @@
             @savePopover="onOk"
             :title="info.title"
         >
-            <template v-slot:target-item>
-                <div @click="onClickTag(tag)" :id="tag">
-                    <i class="fas fa-tags"></i>
-                    {{ tagText }}
-                </div>
-            </template>
             <template v-slot:body>
                 <p>{{ info.detail }}</p>
                 <form ref="form" @submit.stop.prevent="handleSubmit">
@@ -23,7 +17,7 @@
                     >
                         <b-form-input
                             id="name-input"
-                            v-model="value"
+                            v-model="info.values.filterCases"
                             :placeholder="$t('ID_CASE_NUMBER_FILTER_EG')"
                             :state="valueState"
                             required
@@ -45,24 +39,18 @@ export default {
     props: ["tag", "info"],
     data() {
         return {
-            value: "",
             valueState: null,
             showPopover: false,
         };
     },
-    computed: {
-        tagText: function() {
-            return `${this.$i18n.t("ID_IUD")}: ${this.value} `;
-        },
-    },
     methods: {
         onClose() {
             this.showPopover = true;
         },
         checkFormValidity() {
             const regex = /^((\d+?)|(\d+?)(?:\-(\d+?))?)(?:\, ((\d+?)|(\d+?)(?:\-(\d+?))?))*$/;
-            regex.test(this.value);
-            this.valueState = regex.test(this.value);
+            regex.test(this.info.values.filterCases);
+            this.valueState = regex.test(this.info.values.filterCases);
             return this.valueState;
         },
         handleSubmit() {
@@ -74,7 +62,9 @@ export default {
             // Hide the modal manually
             this.$nextTick(() => {
                 this.$emit("updateSearchTag", {
-                    filterCases: self.value.replace(/ /g, ""),
+                    CaseNumber: {
+                        filterCases: self.info.values.filterCases.replace(/ /g, ""),
+                    }
                 });
                 self.$root.$emit("bv::hide::popover");
             });
diff --git a/resources/assets/js/components/search/popovers/CaseTitle.vue b/resources/assets/js/components/search/popovers/CaseTitle.vue
index 65e192530..1a1d0b065 100644
--- a/resources/assets/js/components/search/popovers/CaseTitle.vue
+++ b/resources/assets/js/components/search/popovers/CaseTitle.vue
@@ -2,16 +2,10 @@
     <div id="">
         <SearchPopover
             :target="tag"
-            @closePopover="onClose"
             @savePopover="onOk"
             :title="info.title"
         >
-            <template v-slot:target-item>
-                <div @click="onClickTag(tag)" :id="tag">
-                    <b-icon icon="tags-fill" font-scale="1"></b-icon>
-                    {{ tagText }}
-                </div>
-            </template>
+        
             <template v-slot:body>
                 <p>{{ info.detail }}</p>
                 <form ref="form" @submit.stop.prevent="handleSubmit">
@@ -22,7 +16,7 @@
                     >
                         <b-form-input
                             id="name-input"
-                            v-model="title"
+                            v-model="info.values.caseTitle"
                             :placeholder="$t('ID_CASE_TITLE_NAME')"
                             :state="valueState"
                             required
@@ -48,11 +42,6 @@ export default {
             valueState: null,
         };
     },
-    computed: {
-        tagText: function() {
-            return `${this.$i18n.t("ID_CASE_TITLE")}: ${this.title}`;
-        },
-    },
     methods: {
         /**
          * Check the form validations and requiered fields
@@ -73,7 +62,9 @@ export default {
             }
             this.$nextTick(() => {
                 this.$emit("updateSearchTag", {
-                    caseTitle: self.title,
+                    CaseTitle: {
+                        caseTitle: self.info.values.caseTitle,
+                    }
                 });
                 self.$root.$emit("bv::hide::popover");
             });
diff --git a/resources/assets/js/components/search/popovers/DueDate.vue b/resources/assets/js/components/search/popovers/DueDate.vue
index 025937906..1610f381b 100644
--- a/resources/assets/js/components/search/popovers/DueDate.vue
+++ b/resources/assets/js/components/search/popovers/DueDate.vue
@@ -5,12 +5,6 @@
             @savePopover="onOk"
             :title="info.title"
         >
-            <template v-slot:target-item>
-                <div @click="onClickTag(tag)" :id="tag">
-                    <b-icon icon="tags-fill" font-scale="1"></b-icon>
-                    {{ tagText }}
-                </div>
-            </template>
             <template v-slot:body>
                 <p>{{ info.detail }}</p>
                 <form ref="form" @submit.stop.prevent="handleSubmit">
@@ -19,7 +13,7 @@
                             <b-form-group >
                                 <b-form-datepicker
                                     id="from"
-                                    v-model="from"
+                                    v-model="info.values.dueDateFrom"
                                     :placeholder="$t('ID_FROM_DUE_DATE')"
                                 ></b-form-datepicker>
                             </b-form-group>
@@ -28,7 +22,7 @@
                             <b-form-group>
                                 <b-form-datepicker
                                     id="to"
-                                    v-model="to"
+                                    v-model="info.values.dueDateTo"
                                     :placeholder="$t('ID_TO_DUE_DATE')"
                                 ></b-form-datepicker>
                             </b-form-group>
@@ -48,26 +42,18 @@ export default {
         SearchPopover,
     },
     props: ["tag", "info"],
-    data() {
-        return {
-            from: "",
-            to: ""
-        };
-    },
-    computed: {
-        tagText: function() {
-            return `${this.$i18n.t('ID_FROM')}: ${this.from} ${this.$i18n.t('ID_TO')}:  ${this.to}`;
-        }
-    },
     methods: {
         /**
          * Submit form handler
          */
         handleSubmit() {
             this.$emit("updateSearchTag", {
-                dueDateFrom: this.from,
-                dueDateTo: this.to,
+                DueDate: {
+                    dueDateFrom: this.info.values.dueDateFrom,
+                    dueDateTo: this.info.values.dueDateTo
+                }
             });
+            this.$root.$emit("bv::hide::popover");
         },
         /**
          * On ok event handler
diff --git a/resources/assets/js/components/search/popovers/LastModifiedDate.vue b/resources/assets/js/components/search/popovers/LastModifiedDate.vue
index df9383fcd..d70d69350 100644
--- a/resources/assets/js/components/search/popovers/LastModifiedDate.vue
+++ b/resources/assets/js/components/search/popovers/LastModifiedDate.vue
@@ -1,12 +1,6 @@
 <template>
     <div id="">
         <SearchPopover :target="tag" @savePopover="onOk" :title="info.title">
-            <template v-slot:target-item>
-                <div @click="onClickTag(tag)" :id="tag">
-                    <b-icon icon="tags-fill" font-scale="1"></b-icon>
-                    {{ tagText }}
-                </div>
-            </template>
             <template v-slot:body>
                 <p>{{ info.detail }}</p>
                 <form ref="form" @submit.stop.prevent="handleSubmit">
@@ -15,7 +9,7 @@
                             <b-form-group>
                                 <b-form-datepicker
                                     id="from"
-                                    v-model="from"
+                                    v-model="info.values.delegationDateFrom"
                                     :placeholder="$t('ID_FROM_LAST_MODIFIED_DATE')"
                                 ></b-form-datepicker>
                             </b-form-group>
@@ -24,7 +18,7 @@
                             <b-form-group>
                                 <b-form-datepicker
                                     id="to"
-                                    v-model="to"
+                                    v-model="info.values.delegationDateTo"
                                     :placeholder="$t('ID_TO_LAST_MODIFIED_DATE')"
                                 ></b-form-datepicker>
                             </b-form-group>
@@ -44,26 +38,18 @@ export default {
         SearchPopover,
     },
     props: ["tag", "info"],
-    data() {
-        return {
-            from: "",
-            to: "",
-        };
-    },
-    computed: {
-        tagText: function() {
-            return `${this.$i18n.t('ID_FROM')}: ${this.from} ${this.$i18n.t('ID_TO')}:  ${this.to}`;
-        },
-    },
     methods: {
         /**
          * Submit form handler
          */
         handleSubmit() {
             this.$emit("updateSearchTag", {
-                delegationDateFrom: this.from,
-                delegationDateTo: this.to
+                LastModifiedDate: {
+                    delegationDateFrom: this.info.values.delegationDateFrom,
+                    delegationDateTo: this.info.values.delegationDateTo
+                }
             });
+            this.$root.$emit("bv::hide::popover");
         },
         /**
          * On ok event handler
diff --git a/resources/assets/js/components/search/popovers/ProcessName.vue b/resources/assets/js/components/search/popovers/ProcessName.vue
index fdc63f93d..de92c7f0b 100644
--- a/resources/assets/js/components/search/popovers/ProcessName.vue
+++ b/resources/assets/js/components/search/popovers/ProcessName.vue
@@ -1,32 +1,27 @@
 <template>
     <div id="">
         <SearchPopover :target="tag" @savePopover="onOk" :title="info.title">
-            <template v-slot:target-item>
-                <div @click="onClickTag(tag)" :id="tag">
-                    <b-icon icon="tags-fill" font-scale="1"></b-icon>
-                    {{ tagText }}
-                </div>
-            </template>
             <template v-slot:body>
                 <p>{{ info.detail }}</p>
                 <form ref="form" @submit.stop.prevent="handleSubmit">
                     <b-form-group
-                        :state="valueState"
                         label-for="name"
                         :invalid-feedback="$t('ID_PROCESS_IS_REQUIRED')"
                     >
-                        <vue-bootstrap-typeahead
-                            class="mb-4"
-                            id="name"
-                            v-model="query"
-                            :minMatchingChars="minMatchingChars"
-                            :data="process"
-                            :serializer="(item) => item.PRO_TITLE"
-                            @hit="selectedUser = $event"
-                            :placeholder="info.placeholder"
-                            required
-                            :state="valueState"
-                        />
+                        <multiselect 
+                            v-model="info.processOption" 
+                            :options="processes" 
+                            placeholder="Select one" 
+                            label="PRO_TITLE" 
+                            track-by="PRO_ID"
+                            :show-no-results="false"
+                            @search-change="asyncFind"
+                            :loading="isLoading"
+                            id="ajax"
+                            :limit="10"
+                            :clear-on-select="true" 
+                        >
+                        </multiselect>
                     </b-form-group>
                 </form>
             </template>
@@ -36,41 +31,39 @@
 
 <script>
 import SearchPopover from "./SearchPopover.vue";
-import VueBootstrapTypeahead from "vue-bootstrap-typeahead";
+import Multiselect from 'vue-multiselect'
 import api from "./../../../api/index";
 
 export default {
     components: {
         SearchPopover,
-        VueBootstrapTypeahead,
+        Multiselect,
     },
     props: ["tag", "info"],
     data() {
         return {
-            minMatchingChars: 1,
-            query: "",
-            process: [],
-            valueState: null,
+            processes: [],
+            isLoading: false
         };
     },
-    computed: {
-        tagText: function() {
-            return `${this.$i18n.t("ID_PROCESS")}: ${this.query}`;
-        },
-    },
-    watch: {
-        query(newQuery) {
-            api.filters
-                .processList(this.query)
+    methods: {
+        /**
+         * Find asynchronously in the server
+         * @param {string} query - string from the text field
+         */ 
+        asyncFind (query) {
+            this.isLoading = true
+               api.filters
+                .processList(query)
                 .then((response) => {
-                    this.process = response.data;
+                    this.processes = response.data;
+                    this.countries = response
+                    this.isLoading = false
                 })
                 .catch((e) => {
                     console.error(err);
                 });
         },
-    },
-    methods: {
         /**
          * Form validations review
          */
@@ -89,25 +82,16 @@ export default {
          *  Form submit handler
          */
         handleSubmit() {
-            // Exit when the form isn't valid
-            if (!this.checkFormValidity()) {
-                return;
-            }
-            this.$nextTick(() => {
-                let process = _.find(this.process, { PRO_TITLE: this.query });
                 this.$emit("updateSearchTag", {
-                    process: process.PRO_ID,
+                    ProcessName: {
+                        processOption: this.info.processOption,
+                        process: this.info.processOption.PRO_ID
+                    }
                 });
                 this.$root.$emit("bv::hide::popover");
-            });
-        },
-        /**
-         * Cick tag event handler
-         */
-        onClickTag() {
-            this.$root.$emit("bv::hide::popover");
         }
     }
 };
 </script>
+<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
 <style scoped></style>
diff --git a/resources/assets/js/home/AdvancedSearch.vue b/resources/assets/js/home/AdvancedSearch.vue
index bd6645f7a..8dbcd834f 100644
--- a/resources/assets/js/home/AdvancedSearch.vue
+++ b/resources/assets/js/home/AdvancedSearch.vue
@@ -1,13 +1,24 @@
 <template>
     <div id="v-mycases3" ref="v-mycases2" class="v-container-mycases">
+        <b-alert
+            :show="dismissCountDown"
+            dismissible
+            :variant="variant"
+            @dismissed="dismissCountDown = 0"
+            @dismiss-count-down="countDownChanged"
+        >
+            {{ message }}
+        </b-alert>
         <button-fleft :data="newCase"></button-fleft>
         <GenericFilter
             :id="id"
             :name="name"
+            :filters="filters"
             @onJumpCase="onJumpCase"
             @onSubmit="onSubmitFilter"
             @onRemoveFilter="onRemoveFilter"
             @onSearch="onSearch"
+            @onUpdateFilters="onUpdateFilters"
         />
 
         <modal-new-request ref="newRequest"></modal-new-request>
@@ -84,13 +95,17 @@ export default {
         ModalNewRequest,
         TaskCell
     },
-    props: ["id", "name"],
+    props: ["id", "name", "filters"],
     data() {
         return {
+            dismissSecs: 5,
+            dismissCountDown: 0,
+            message: "",
+            variant: "info",
             metrics: [],
             filter: "CASES_INBOX",
             allView: [],
-            jsonFilters: null,
+            filtersModel: {},
             filterHeader: "STARTED_BY_ME",
             headers: [],
             newCase: {
@@ -143,6 +158,11 @@ export default {
             pmDateFormat: "Y-m-d H:i:s",
         };
     },
+    watch: {
+        id: function() {
+            this.$refs.test.refresh();
+        },
+    },
     methods: {
         /**
          * Get cases data by header
@@ -151,8 +171,12 @@ export default {
             let that = this,
                 dt;
             return new Promise((resolutionFunc, rejectionFunc) => {
+                let filters = {};
+                _.forIn(this.filters, function(value, key) {
+                    filters = {...filters, ...value};
+                });
                 api.cases
-                    .search(that.jsonFilters)
+                    .search(filters)
                     .then((response) => {
                         dt = that.formatDataResponse(response.data.data);
                         resolutionFunc({
@@ -368,27 +392,84 @@ export default {
                     throw new Error(err);
                 });
         },
+        /**
+         * Updates the alert dismiss value to update
+         * dismissCountDown and decrease
+         * @param {mumber}
+         */
+        countDownChanged(dismissCountDown) {
+            this.dismissCountDown = dismissCountDown;
+        },
+        /**
+         * Show the alert message
+         * @param {string} message - message to be displayen in the body
+         * @param {string} type - alert type
+         */
+        showAlert(message, type) {
+            this.message = message;
+            this.variant = type || "info";
+            this.dismissCountDown = this.dismissSecs;
+        },
         /**
          * Handler submit filter
          * @param {object} data - data returned from the server
          */
-        onSubmitFilter(data) {
-            this.$emit("onSubmitFilter", data);
+        onSubmitFilter(params) {
+            if (params.type === "update") {
+                api.filters
+                    .put({
+                        id: params.id,
+                        name: params.name,
+                        filters: JSON.stringify(params.filters),
+                    })
+                    .then((response) => {
+                        this.$emit("onSubmitFilter", params);
+                    })
+                    .catch((e) => {
+                        this.showAlert(e.message, "danger");
+                    });
+            } else {
+                api.filters
+                    .post({
+                        name: params.name,
+                        filters: JSON.stringify(params.filters),
+                    })
+                    .then((response) => {
+                        this.$emit("onSubmitFilter", response.data);
+                    })
+                    .catch((e) => {
+                        this.showAlert(e.message, "danger");
+                    });
+            }
         },
         /**
          * Handler on remove filter
          * @param {number} id - data returned fron the server
          */
         onRemoveFilter(id) {
-            this.$emit("onRemoveFilter", id);
+            api.filters
+                .delete({
+                    id: this.id,
+                })
+                .then((response) => {
+                    this.$emit("onUpdateFilters", {});
+                    this.$emit("onRemoveFilter", id);
+                })
+                .catch((e) => {
+                    this.showAlert(e.message, "danger");
+                });
         },
         /**
          * Handler on search filter
          * @param {number} id - data returned fron the server
          */
         onSearch(params) {
-            this.jsonFilters = params;
-            this.$refs.test.refresh();
+            this.$nextTick(() => {
+                this.$refs.test.refresh();
+            });
+        },
+        onUpdateFilters(params) {
+            this.$emit("onUpdateFilters", params);
         },
     },
 };
diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue
index 4011a962f..4b90f5f35 100644
--- a/resources/assets/js/home/Home.vue
+++ b/resources/assets/js/home/Home.vue
@@ -20,13 +20,15 @@
             <component
                 v-bind:is="page"
                 ref="component"
+                :filters="filters"
                 :id="pageId"
                 :name="pageName"
                 @onSubmitFilter="onSubmitFilter"
                 @onRemoveFilter="onRemoveFilter"
                 @onUpdatePage="onUpdatePage"
                 @onUpdateDataCase="onUpdateDataCase"
-                @onLastPage="onLastPage" 
+                @onLastPage="onLastPage"
+                @onUpdateFilters="onUpdateFilters"
             ></component>
         </div>
     </div>
@@ -67,7 +69,7 @@ export default {
         return {
             lastPage: "MyCases",
             page: "MyCases",
-            menu: null,
+            menu: [],
             dataCase: {},
             hideToggle: true,
             collapsed: false,
@@ -76,6 +78,7 @@ export default {
             sidebarWidth: "310px",
             pageId: null,
             pageName: null,
+            filters: {},
         };
     },
     mounted() {
@@ -91,14 +94,49 @@ export default {
             api.menu
                 .get()
                 .then((response) => {
-                    this.menu = response;
+                    this.menu = this.mappingMenu(response.data);
                 })
                 .catch((e) => {
                     console.error(e);
                 });
         },
+        /**
+         * Do a mapping of vue view for menus
+         * @returns array
+         */
+        mappingMenu(data) {
+            var i,
+                j,
+                newData = data,
+                auxId,
+                viewVue = {
+                    CASES_MY_CASES: "MyCases",
+                    CASES_SEARCH: "advanced-search",
+                    CASES_INBOX: "todo",
+                    CASES_DRAFT: "draft",
+                    CASES_PAUSED: "paused",
+                    CASES_SELFSERVICE: "unassigned",
+                    CONSOLIDATED_CASES: "batch-routing",
+                    CASES_TO_REASSIGN: "task-reassignments",
+                    CASES_FOLDERS: "my-documents",
+                };
+            for (i = 0; i < data.length; i += 1) {
+                auxId = data[i].id || "";
+                if (auxId !== "" && viewVue[auxId]) {
+                    newData[i].id = viewVue[auxId];
+                }
+            }
+            return newData;
+        },
         OnClickSidebarItem(item) {
-            this.page = item.item.id || "MyCases";
+            if (item.item.page && item.item.page === "/advanced-search") {
+                this.page = "advanced-search";
+                this.filters = item.item.filters;
+                this.pageId = item.item.id;
+                this.pageName = item.item.title;
+            } else {
+                this.page = item.item.id || "MyCases";
+            }
         },
         /**
          * Update page component
@@ -141,24 +179,38 @@ export default {
         addMenuSearchChild(data) {
             let newMenu = this.menu;
             let advSearch = _.find(newMenu, function(o) {
-                return o.href === "/advanced-search";
+                return o.id === "advanced-search";
             });
-            if (!advSearch.hasOwnProperty("child")) {
-                advSearch["child"] = [];
+            if (advSearch) {
+                const index = advSearch.child.findIndex(function(o) {
+                    return o.id === data.id;
+                });
+                if (index !== -1) {
+                    advSearch.child[index].filters = data.filters;
+                } else {
+                    if (!advSearch.hasOwnProperty("child")) {
+                        advSearch["child"] = [];
+                    }
+                    advSearch.child.push({
+                        filters: data.filters,
+                        href: "/advanced-search/" + data.id,
+                        title: data.name,
+                        icon: "fas fa-circle",
+                        id: data.id,
+                        page: "/advanced-search",
+                    });
+                }
             }
-            advSearch.child.push({
-                href: "/advanced-search/" + data.id,
-                title: data.name,
-                icon: "fas fa-circle",
-                id: data.id,
-                page: "advanced-search",
-            });
         },
         onRemoveFilter(id) {
             this.removeMenuSearchChild(id);
+            this.resetSettings();
+        },
+        resetSettings() {
             this.page = "advanced-search";
             this.pageId = null;
             this.pageName = null;
+            this.filters = {};
         },
         onUpdatePage(page) {
             this.lastPage = this.page;
@@ -167,20 +219,25 @@ export default {
         onUpdateDataCase(data) {
             this.dataCase = data;
         },
-        onLastPage(){
+        onLastPage() {
             this.page = this.lastPage;
-            this.lastPage = "MyCases"
+            this.lastPage = "MyCases";
         },
         removeMenuSearchChild(id) {
             let newMenu = this.menu;
             let advSearch = _.find(newMenu, function(o) {
-                return o.href === "/advanced-search";
+                return o.id === "advanced-search";
             });
-            const index = advSearch.child.findIndex(function(o) {
-                return o.id === id;
-            });
-            if (index !== -1) advSearch.child.splice(index, 1);
+            if (advSearch) {
+                const index = advSearch.child.findIndex(function(o) {
+                    return o.id === id;
+                });
+                if (index !== -1) advSearch.child.splice(index, 1);
+            }
         },
+        onUpdateFilters(filters) {
+            this.filters = filters;
+        }
     },
 };
 </script>