PMCORE-2515: improve advanced search filters CRUD UI

rebase

fix Cr notes

resources/assets/js/api/Api.js

@@ -61,7 +61,10 @@ const services = {
     DRAFT_LIST: "/home/draft",
     PAUSED_LIST: "/home/paused",
     UNASSIGNED_LIST: "/home/unassigned",
-
+    MY_FILTERS: "/cases/advanced-search/filters",
+    POST_MY_FILTERS: "/cases/advanced-search/filter",
+    DELETE_MY_FILTERS: "/cases/advanced-search/filter/",
+    SEARCH: "/home/search",
 };
 
 export default {
@@ -135,5 +138,48 @@ export default {
                 "Authorization": `Bearer ` + credentials.accessToken
             }
         });
+    },
+    post(options) {
+        let service = options.service || "",
+            params = options.params || {},
+            data = options.data || {},
+            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: "post",
+            url: url,
+            params,
+            data,
+            headers: {
+                "Accept": "application/json",
+                "Content-Type": "application/json",
+                "Authorization": `Bearer ` + credentials.accessToken
+            }
+        });
+    },
+    delete(options) {
+        let service = options.service || "",
+            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: "delete",
+            url: url + id,
+            headers: {
+                "Accept": "application/json",
+                "Content-Type": "application/json",
+                "Authorization": `Bearer ` + credentials.accessToken
+            }
+        });
     }
 };

resources/assets/js/api/Cases.js

@@ -118,14 +118,31 @@ export let cases = {
             window.config.SYS_URI +
             `cases/ajaxListener`, params);
     },
-    //remove this section
+    /**
-    search(data) {
+     * Service to jump a case by it's number
-        return new Promise((resolutionFunc, rejectionFunc) => {
+     * @param {object} dt 
-
+     */
-            resolutionFunc(startedCasesFaker);
+    jump(dt) {
-
+        var params = new URLSearchParams();
-        });
+        params.append('action', 'previusJump');
+        params.append('appNumber', dt.APP_NUMBER);
+        params.append('actionFromList', dt.ACTION_FROM_LIST);
+        return axios.post(window.config.SYS_SERVER +
+            window.config.SYS_URI +
+            `cases/cases_Ajax.php`, params);
+    },
+    /**
+     * Make a search request to the Api service 
+     * @param {object} dt - filter parameters
+     */
+    search(dt) {
+        return Api.get({
+            service: "SEARCH",
+            params: dt,
+            keys: {}
+        })
     }
+            
 };
 
 export let casesHeader = {

resources/assets/js/api/Filters.js

@@ -0,0 +1,68 @@
+import axios from "axios";
+import Api from "./Api.js";
+export let filters = {
+    get(data) {
+        return Api.get({
+            service: "MY_FILTERS",
+            params: {
+                filter: data.params,
+            },
+            keys: {},
+        });
+    },
+    post(data) {
+        return Api.post({
+            service: "POST_MY_FILTERS",
+            data,
+            keys: {},
+        });
+    },
+    delete(data) {
+        return Api.delete({
+            service: "DELETE_MY_FILTERS",
+
+            id: data.id,
+
+            keys: {},
+        });
+    },
+    /**
+     * Service to generate a jump case URL
+     */
+    jumpCase() {
+        var params = new URLSearchParams();
+        params.append("action", "startCase");
+        return axios.post(
+            window.config.SYS_SERVER +
+                window.config.SYS_URI +
+                `cases/casesStartPage_Ajax.php`,
+            params
+        );
+    },
+    /**
+     * 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,
+            }
+        );
+    },
+    /**
+     * Service to get the users list
+     */
+    userValues(query) {
+        return axios.post(
+            window.config.SYS_SERVER +
+                window.config.SYS_URI +
+                `cases/casesList_Ajax?actionAjax=userValues&action=search`,
+            {
+                query,
+            }
+        );
+    },
+};

resources/assets/js/api/index.js

@@ -4,6 +4,7 @@ import { cases, casesHeader } from "./Cases";
 
 import { caseNotes } from "./CaseNotes";
 import { process } from "./Process";
+import { filters } from "./Filters";
 
 
 export default {
@@ -11,5 +12,6 @@ export default {
     cases,
     casesHeader,
     process,
-    caseNotes
+    caseNotes,
+    filters
 };

resources/assets/js/components/menu/CustomSidebar.vue

@@ -20,13 +20,12 @@
 </template>
 
 <script>
-import api from "./../../api/index";
 
 export default {
     name: "CustomSidebar",
+    props: ['menu'],
     data() {
         return {
-            menu: [],
             collapsed: false,
             isOnMobile: false,
             hideToggle: true,
@@ -44,14 +43,7 @@ export default {
     mounted() {
         this.onResize();
         window.addEventListener("resize", this.onResize);
-        api.menu
+       
-            .get()
-            .then((response) => {
-                this.menu = response;
-            })
-            .catch((e) => {
-                console.error(e);
-            });
     },
     methods: {
         /**

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

@@ -1,13 +1,17 @@
 <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>Advanced Search</h5></b-col>
+                <b-col md="10"><h5>{{$t('ID_OPEN_SEARCH')}}</h5></b-col>
-                <b-col md="2">
-                    <b-button variant="success" size="sm" class="float-right"
-                        ><b-icon icon="plus"></b-icon>Request</b-button
-                    >
-                </b-col>
             </b-row>
             <b-row>
                 <b-col md="4">
@@ -16,6 +20,7 @@
                             target="popover-target-1"
                             @closePopover="onClose"
                             @savePopover="onOk"
+                            :title="addSearchTitle"
                         >
                             <template v-slot:target-item>
                                 <b-button
@@ -25,13 +30,11 @@
                                     href="#"
                                     tabindex="0"
                                 >
-                                    <b-icon icon="plus"></b-icon>Add Filter
+                                    <b-icon icon="plus"></b-icon>{{$t('ID_ADD_FILTER')}}
                                 </b-button>
                             </template>
                             <template v-slot:body>
-                                <b-form-group
+                                <b-form-group>
-                                    label="Add Serch filter criteria: "
-                                >
                                     <b-form-checkbox-group
                                         v-model="selected"
                                         :options="filterOptions"
@@ -45,7 +48,7 @@
                             size="sm"
                             @click="cleanAllTags"
                             variant="danger"
-                            >Clean All</b-button
+                            >{{$t('ID_CLEAN_ALL')}}</b-button
                         >
                     </div>
                 </b-col>
@@ -53,23 +56,42 @@
                 <b-col md="8">
                     <div class="d-flex flex-row-reverse">
                         <div class="p-2">
-                            <b-button v-b-modal.modal-prevent-closing variant="primary" size="sm">
+                            <b-button
-                                <b-icon icon="menu-button"></b-icon>Save Search
+                                @click="onClick"
+                                variant="primary"
+                                size="sm"
+                            >
+                                <b-icon icon="menu-button"></b-icon>{{$t('ID_SAVE_SEARCH')}}
                             </b-button>
                         </div>
                         <div class="p-2">
-                            <b-button variant="danger" size="sm" @click="onDeleteSearch">
+                            <b-button
-                                <b-icon icon="trash"></b-icon>Delete Search
+                                variant="danger"
+                                size="sm"
+                                @click="onDeleteSearch"
+                                :disabled="id == null"
+                            >
+                                <b-icon icon="trash"></b-icon>{{$t('ID_DELETE_SEARCH')}}
                             </b-button>
                         </div>
                         <div class="p-2">
-                            <b-button variant="success" size="sm" @click="onJumpCase">
+                            <b-button
+                                variant="success"
+                                size="sm"
+                                @click="onJumpCase"
+                            >
                                 <b-icon icon="arrow-up-right-square"></b-icon>
-                                Jump
+                                {{$t('ID_JUMP')}}
                             </b-button>
                         </div>
                         <div class="p-2">
-                            <input v-model="caseNumber" size="7" type="text" class="form-control"  placeholder="Case Number"/>
+                            <input
+                                v-model="caseNumber"
+                                size="1"
+                                class="form-control"
+                                :placeholder="$t('ID_CASE_NUMBER_CAPITALIZED')"
+                                type="number"
+                            />
                         </div>
                     </div>
                 </b-col>
@@ -77,7 +99,6 @@
             <b-row>
                 <b-col>
                     <div class="d-flex flex-row">
-                       
                         <b-form-tags
                             input-id="tags-pills"
                             v-model="searchTags"
@@ -96,11 +117,12 @@
                                         :variant="tagVariant"
                                         class="mr-1"
                                     >
-                                         <component v-bind:is="tag"
+                                        <component
-                                          v-bind:info="searchTagsModels[tag]"
+                                            v-bind:is="tag"
-                                          v-bind:tag="tag"
+                                            v-bind:info="searchTagsModels[tag]"
-                                          @updateSearchTag="updateSearchTag"
+                                            v-bind:tag="tag"
-                                          />
+                                            @updateSearchTag="updateSearchTag"
+                                        />
                                     </b-form-tag>
                                 </div>
                             </template>
@@ -121,29 +143,28 @@
 
             <b-modal
                 id="modal-prevent-closing"
-                ref="modal"
+                ref="saveFilter"
                 :title="saveModalTitle"
                 @show="resetModal"
                 @hidden="resetModal"
                 @ok="handleOk"
-                >
+            >
                 <form ref="form" @submit.stop.prevent="handleSubmit">
                     <b-form-group
-                    :state="nameState"
-                    label="Name"
-                    label-for="name-input"
-                    invalid-feedback="Name is required"
-                    >
-                    <b-form-input
-                        id="name-input"
-                        v-model="name"
                         :state="nameState"
-                        required
+                        :label="$t('ID_NAME')"
-                    ></b-form-input>
+                        label-for="name-input"
+                        :invalid-feedback="$t('ID_REQUIRED_FIELD')"
+                    >
+                        <b-form-input
+                            id="name-input"
+                            v-model="localName"
+                            :state="nameState"
+                            required
+                        ></b-form-input>
                     </b-form-group>
                 </form>
             </b-modal>
-
         </b-container>
     </div>
 </template>
@@ -152,109 +173,114 @@
 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 CaseTitle from "./popovers/CaseTitle.vue";
 import ProcessName from "./popovers/ProcessName.vue";
 import ParticipatedLevel from "./popovers/ParticipatedLevel.vue";
 import CasePriority from "./popovers/CasePriority.vue";
-import SentBy from "./popovers/SentBy.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"],
     components: {
         SearchPopover,
         CaseNumber,
         DueDate,
+        LastModifiedDate,
         CaseTitle,
         ProcessName,
         ParticipatedLevel,
-        SentBy,
+        TaskName,
-        CaseStatus
+        CaseStatus,
+        CasePriority,
+        CurrentUser
     },
     data() {
         return {
+            addSearchTitle: this.$i18n.t('ID_ADD_SEARCH_FILTER_CRITERIA'),
+            dismissSecs: 5,
+            dismissCountDown: 0,
+            message: "",
+            variant: "info",
             searchTags: [],
             searchTagsModels: {
-                "CaseNumber": {
+                CaseNumber: {
-                    text: "#",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_CASE')}${this.$i18n.t('ID_IUD')}`,
-                    tagText: "From: 1, 3, 7 To: 15",
+                    optionLabel: this.$i18n.t('ID_IUD'),
-                    default: {
+                    detail: this.$i18n.t('ID_PLEASE_SET_A_RANGE_TO_CASES_TO_SEARCH')
-                        from: "",
-                        to: "",
-                    },
                 },
-                "DueDate": {
+                DueDate: {
-                    text: "Due Date",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_DUE_DATE')}`,
-                    tagText: "From: 01-01-2020 To: 01-01-2020",
+                    optionLabel: this.$i18n.t('ID_DUE_DATE'),
-                     default: {
+                    detail: this.$i18n.t('ID_PLEASE_SET_A_RANGE_OF_CASES_DUE_DATE_TO_SEARCH')
-                        from: "",
-                        to: "",
-                    },
-
                 },
-                "CaseTitle": {
+                LastModifiedDate: {
-                    text: "Case",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_LAST_MODIFIED_DATE')}`,
-                    tagText: "Case: title",
+                    optionLabel: this.$i18n.t('ID_LAST_MODIFIED_DATE'),
-                    default: {
+                    detail: this.$i18n.t('ID_PLEASE_SET_A_RANGE_OF_LAST_MODIFIED_CASES_DATE_TO_SEARCH')
-                        name: ""
-                    }
-
                 },
-                "ProcessName": {
+                CaseTitle: {
-                    text: "Process",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_CASE_TITLE')}`,
-                    tagText: "Process: name",
+                    optionLabel: this.$i18n.t('ID_CASE_TITLE'),
-                    default: {
+                    detail: ""
-                        name: ""
-                    }
-
                 },
-                "ParticipatedLevel": {
+                ProcessName: {
-                    text: "Participated",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_PROCESS_NAME')}`,
-                    tagText: "Process: name",
+                    optionLabel: this.$i18n.t('ID_PROCESS_NAME'),
-                    default: {
+                    detail: "",
-                        name: ""
+                    placeholder: this.$i18n.t('ID_PROCESS_NAME')
-                    }
-
                 },
-                "CasePriority": {
+                CasePriority: {
-                    text: "Priority",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_PRIORITY')}`,
-                    tagText: "Process: name",
+                    optionLabel: this.$i18n.t('ID_PRIORITY'),
-                    title: "Filter: Priority",
+                    detail: this.$i18n.t('ID_PLEASE_SELECT_THE_PRIORITY_FOR_THE_SEARCH'),
-                    label: "Please select the priority for the search",
                     options: [
-                        { text: 'Very Low', value: '1' },
+                        { text: this.$i18n.t('ID_VERY_LOW'), value: "VL" },
-                        { text: 'Low', value: '2' },
+                        { text: this.$i18n.t('ID_LOW'), value: "L" },
-                        { text: 'Niormal', value: '3' },
+                        { text: this.$i18n.t('ID_NORMAL'), value: "N" },
-                        { text: 'Very High', value: '4' },
+                        { text: this.$i18n.t('ID_HIGH'), value: "H" },
-                        { text: 'High', value: '5' }
+                        { text: this.$i18n.t('ID_VERY_HIGH'), value: "VH" }
                     ]
-
                 },
-                "SentBy": {
+                TaskName: {
-                    text: "Sent By",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_TASK')}`,
-                    title: "Filter: Sent By",
+                    optionLabel: this.$i18n.t('ID_TASK'),
-                    placeHolder: "User name",
+                    detail: "",
+                    placeholder: this.$i18n.t('ID_TASK_NAME')
                 },
-                "CaseStatus": {
+                CaseStatus: {
-                    text: "Status",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_STATUS')}`,
-                    title: "Filter: Case Status",
+                    optionLabel: this.$i18n.t('ID_STATUS'),
-                    label: "Please select the status for the search",
+                    detail: this.$i18n.t('ID_PLEASE_SELECT_THE_STATUS_FOR_THE_SEARCH'),
                     options: [
-                        { text: 'Draft', value: '1' },
+                        { text: this.$i18n.t('ID_CASES_STATUS_DRAFT'), value: "DRAFT" },
-                        { text: 'To Do', value: '2' },
+                        { text: this.$i18n.t('ID_CASES_STATUS_TO_DO'), value: "TO_DO" },
-                        { text: 'Completed', value: '4' },
+                        { text: this.$i18n.t('ID_CASES_STATUS_COMPLETED'), value: "COMPLETED" },
-                        { text: 'Canceled', value: '5' },
+                        { text: this.$i18n.t('ID_CASES_STATUS_CANCELLED'), value: "CANCELLED" },
-                        { text: 'Paused', value: '6' }
+                        { 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: "",
+                    },
                 },
             },
             text: "",
             selected: [],
             jsonFilter: {},
             caseNumber: "",
-            saveModalTitle: "SaveSearch",
+            saveModalTitle: this.$i18n.t('ID_SAVE_SEARCH'),
-            name: '',
+            localName: "",
-            nameState: null
+            nameState: null,
         };
     },
     computed: {
@@ -262,20 +288,37 @@ export default {
             let options = [];
             _.forIn(this.searchTagsModels, function(value, key) {
                 options.push({
-                    text: value.text,
+                    text: value.optionLabel,
                     value: key,
                 });
             });
             return options;
-        }
+        },
     },
     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() {
-            this.popoverShow = false;
         },
         onOk() {
+            this.$root.$emit('bv::hide::popover');
             this.searchTags = [...this.searchTags, ...this.selected];
-            this.onClose();
         },
         cleanAllTags() {
             this.searchTags = [];
@@ -283,7 +326,7 @@ export default {
                 search: "",
             };
         },
-        customRemove (removeTag, tag) {
+        customRemove(removeTag, tag) {
             removeTag(tag);
             this.jsonFilter = {
                 search: "",
@@ -293,16 +336,35 @@ export default {
             this.$emit("onSearch", this.jsonFilter);
         },
         updateSearchTag(params) {
-            this.jsonFilter = {...this.jsonFilter, ...params}
+            this.jsonFilter = { ...this.jsonFilter, ...params };
         },
         onJumpCase() {
-            this.$emit("onJumpCase", {caseNumber: this.caseNumber});
+            this.$emit("onJumpCase",  this.caseNumber);
+        },
+        onClick() {
+            if (this.id) {
+                this.updateData(this.name);
+            } else {
+                this.$refs['saveFilter'].show();
+            }
+            
         },
 
         /**
          * Delete Search handler
          */
-        onDeleteSearch () {
+        onDeleteSearch() {
+            api.filters
+                .delete({
+                    id: this.id,
+                })
+                .then((response) => {
+                    
+                    this.$emit("onRemoveFilter", this.id);
+                })
+                .catch((e) => {
+                    this.showAlert(e.message, "danger");
+                });
         },
         checkFormValidity() {
             const valid = this.$refs.form.checkValidity();
@@ -310,7 +372,7 @@ export default {
             return valid;
         },
         resetModal() {
-            this.name = '';
+            this.localName = "";
             this.nameState = null;
         },
         handleOk(bvModalEvt) {
@@ -322,12 +384,30 @@ export default {
         handleSubmit() {
             // Exit when the form isn't valid
             if (!this.checkFormValidity()) {
-            return;
+                return;
             }
             // Hide the modal manually
             this.$nextTick(() => {
-                this.$bvModal.hide('modal-prevent-closing');
+                this.$bvModal.hide("modal-prevent-closing");
+                this.saveData(this.localName);
             });
+        },
+        saveData(name) {
+            api.filters
+            .post({
+                name: name,
+                filters: JSON.stringify({ uno: "first" }),
+            })
+            .then((response) => {
+                this.$emit("onSubmit", response.data);
+            })
+            .catch((e) => {
+                this.showAlert(e.message, "danger");
+            });
+        },
+        updateData() {
+            this.onDeleteSearch();
+            this.saveData(this.name);
         }
     },
 };
@@ -337,6 +417,19 @@ export default {
     margin-top: 1rem;
 }
 
+.bv-example-row-flex-cols .row {
+    min-height: 10rem;
+}
+</style>
+
+    },
+};
+</script>
+<style scoped>
+.bv-example-row .row + .row {
+    margin-top: 1rem;
+}
+
 .bv-example-row-flex-cols .row {
     min-height: 10rem;
 }

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

@@ -2,8 +2,10 @@
     <div>
         <SearchPopover
             :target="tag"
+            :showPopover="showPopover"
             @closePopover="onClose"
             @savePopover="onOk"
+            :title="info.title"
         >
             <template v-slot:target-item>
                 <div @click="onClickTag(tag)" :id="tag">
@@ -12,26 +14,22 @@
                 </div>
             </template>
             <template v-slot:body>
-                <div class="row">
+                <p>{{ info.detail }}</p>
-                    <div class="col">
+                <form ref="form" @submit.stop.prevent="handleSubmit">
-                        <input
+                    <b-form-group
-                            v-model="from"
+                        :state="valueState"
-                            type="text"
+                        label-for="name-input"
-                            size="210"
+                        :invalid-feedback="$t('ID_INVALID_CASE_NUMBER_RANGE')"
-                            class="form-control"
+                    >
-                            placeholder="From Case number #"
+                        <b-form-input
-                        />
+                            id="name-input"
-                    </div>
+                            v-model="value"
-                    <div class="col">
+                            :placeholder="$t('ID_CASE_NUMBER_FILTER_EG')"
-                        <input
+                            :state="valueState"
-                            v-model="to"
+                            required
-                            type="text"
+                        ></b-form-input>
-                            size="210"
+                    </b-form-group>
-                            class="form-control"
+                </form>
-                            placeholder="To Case number # (Optional)"
-                        />
-                    </div>
-                </div>
             </template>
         </SearchPopover>
     </div>
@@ -47,26 +45,46 @@ export default {
     props: ["tag", "info"],
     data() {
         return {
-            from: "",
+            value: "",
-            to: "",
+            valueState: null,
+            showPopover: false,
         };
     },
     computed: {
         tagText: function() {
-            return `From: ${this.from} To: ${this.to}`;
+            return `${this.$i18n.t("ID_IUD")}: ${this.value} `;
         },
     },
     methods: {
-        onClose() {},
+        onClose() {
-        onOk() {
+            this.showPopover = true;
-            this.$emit("updateSearchTag", { from: this.from, to: this.to });
+        },
+        checkFormValidity() {
+            const regex = /^((\d+?)|(\d+?)(?:\-(\d+?))?)(?:\, ((\d+?)|(\d+?)(?:\-(\d+?))?))*$/;
+            regex.test(this.value);
+            this.valueState = regex.test(this.value);
+            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", {
+                    filterCases: self.value.replace(/ /g, ""),
+                });
+                self.$root.$emit("bv::hide::popover");
+            });
+        },
+        onOk() {
+            this.handleSubmit();
         },
-        onRemoveTag() {},
         onClickTag(tag) {
             this.$root.$emit("bv::hide::popover");
-        },
+        }
-        handler() {
-        },
     },
 };
 </script>

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

@@ -1,10 +1,6 @@
 <template>
     <div id="">
-        <SearchPopover
+        <SearchPopover :target="tag" @savePopover="onOk" :title="info.title">
-            :target="tag"
-            @closePopover="onClose"
-            @savePopover="onOk"
-        >
             <template v-slot:target-item>
                 <div @click="onClickTag(tag)" :id="tag">
                     <b-icon icon="tags-fill" font-scale="1"></b-icon>
@@ -12,7 +8,7 @@
                 </div>
             </template>
             <template v-slot:body>
-                <h6>{{ info.title }}</h6>
+                <p>{{ info.detail }}</p>
                 <b-form-group :label="info.label">
                     <b-form-checkbox
                         v-for="option in info.options"
@@ -45,20 +41,34 @@ export default {
     },
     computed: {
         tagText: function() {
-            return `Priority: `;
+            return `${this.$i18n.t('ID_PRIORITY')}: ${this.selected.join(",")}`;
         },
     },
     methods: {
-        onClose() {
+        /**
-        },
+         * Ok button handler
+         */
         onOk() {
-          
+            this.handleSubmit();
         },
-        onRemoveTag() {},
+        /**
+         * Submit button handler
+         */
+        handleSubmit() {
+            this.$nextTick(() => {
+                this.$emit("updateSearchTag", {
+                    priorities: this.selected.join(","),
+                });
+                this.$root.$emit("bv::hide::popover");
+            });
+        },
+        /**
+         * Tag Click handler
+         */
         onClickTag(tag) {
             this.$root.$emit("bv::hide::popover");
-        },
+        }
-    },
+    }
 };
 </script>
 <style scoped></style>

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

@@ -2,8 +2,8 @@
     <div id="">
         <SearchPopover
             :target="tag"
-            @closePopover="onClose"
             @savePopover="onOk"
+            :title="info.title"
         >
             <template v-slot:target-item>
                 <div @click="onClickTag(tag)" :id="tag">
@@ -12,7 +12,7 @@
                 </div>
             </template>
             <template v-slot:body>
-                <h6>{{ info.title }}</h6>
+                <h6>{{ info.detail }}</h6>
                 <b-form-group :label="info.label">
                     <b-form-checkbox
                         v-for="option in info.options"
@@ -45,20 +45,34 @@ export default {
     },
     computed: {
         tagText: function() {
-            return `Case Status: `;
+            return `${this.$i18n.t('ID_STATUS')}: ${this.selected.join(",")}`;
         },
     },
     methods: {
-        onClose() {
+         /**
-        },
+         * Ok button handler
+         */
         onOk() {
-
+            this.handleSubmit();
         },
-        onRemoveTag() {},
+        /**
+         * Submit button handler
+         */
+        handleSubmit() {
+            this.$nextTick(() => {
+                this.$emit("updateSearchTag", {
+                    caseStatuses: this.selected.join(","),
+                });
+                this.$root.$emit("bv::hide::popover");
+            });
+        },
+        /**
+         * Tag Click handler
+         */
         onClickTag(tag) {
             this.$root.$emit("bv::hide::popover");
-        },
+        }
-    },
+    }
 };
 </script>
 <style scoped></style>

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

@@ -4,6 +4,7 @@
             :target="tag"
             @closePopover="onClose"
             @savePopover="onOk"
+            :title="info.title"
         >
             <template v-slot:target-item>
                 <div @click="onClickTag(tag)" :id="tag">
@@ -12,14 +13,22 @@
                 </div>
             </template>
             <template v-slot:body>
-                <h6>Filter: Case Title</h6>
+                <p>{{ info.detail }}</p>
-                <input
+                <form ref="form" @submit.stop.prevent="handleSubmit">
-                    v-model="title"
+                    <b-form-group
-                    type="text"
+                        :state="valueState"
-                    size="150"
+                        label-for="name-input"
-                    class="form-control"
+                        :invalid-feedback="$t('ID_REQUIRED_FIELD')"
-                    placeholder="Case Title Name"
+                    >
-                />
+                        <b-form-input
+                            id="name-input"
+                            v-model="title"
+                            :placeholder="$t('ID_CASE_TITLE_NAME')"
+                            :state="valueState"
+                            required
+                        ></b-form-input>
+                    </b-form-group>
+                </form>
             </template>
         </SearchPopover>
     </div>
@@ -36,25 +45,50 @@ export default {
     data() {
         return {
             title: "",
+            valueState: null,
         };
     },
     computed: {
         tagText: function() {
-            return `Case: ${this.title}`;
+            return `${this.$i18n.t("ID_CASE_TITLE")}: ${this.title}`;
         },
     },
     methods: {
-        onClose() {
+        /**
+         * Check the form validations and requiered fields
+         */
+        checkFormValidity() {
+            const valid = this.$refs.form.checkValidity();
+            this.valueState = valid;
+            return valid;
         },
-        onOk() {
+        /**
-            this.$emit("updateSearchTag", {
+         * Submit form handler
-                columnSearch: "APP_TITLE",
+         */
-                search: this.title,
+        handleSubmit() {
+            let self = this;
+            // Exit when the form isn't valid
+            if (!this.checkFormValidity()) {
+                return;
+            }
+            this.$nextTick(() => {
+                this.$emit("updateSearchTag", {
+                    caseTitle: self.title,
+                });
+                self.$root.$emit("bv::hide::popover");
             });
         },
-        onRemoveTag() {},
+        /**
+         * On ok event handler
+         */
+        onOk() {
+            this.handleSubmit();
+        },
+        /**
+         * On ok event handler
+         */
         onClickTag(tag) {
-             this.$root.$emit("bv::hide::popover");
+            this.$root.$emit("bv::hide::popover");
         },
     },
 };

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

@@ -0,0 +1,117 @@
+<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="users"
+                            :serializer="(item) => item.USR_FULLNAME"
+                   
+                            :placeholder="info.placeholder"
+                            required
+                            :state="valueState"
+                        />
+                    </b-form-group>
+                </form>
+            </template>
+        </SearchPopover>
+    </div>
+</template>
+
+<script>
+import SearchPopover from "./SearchPopover.vue";
+import VueBootstrapTypeahead from "vue-bootstrap-typeahead";
+import api from "./../../../api/index";
+
+export default {
+    components: {
+        SearchPopover,
+        VueBootstrapTypeahead
+    },
+    props: ["tag", "info"],
+    data() {
+        return {
+            minMatchingChars: 1,
+            query: "",
+            users: [],
+            valueState: null
+        };
+    },
+    computed: {
+        tagText: function() {
+            return `${this.$i18n.t('ID_USER')}: ${this.query}`;
+        }
+    },
+    watch: {
+        query(newQuery) {
+            api.filters
+                .userValues(this.query)
+                .then((response) => {
+                    this.users = response.data;
+                })
+                .catch((e) => {
+                    console.error(err);
+                });
+        }
+    },
+    methods: {
+        /**
+         * Form validations review
+         */
+        checkFormValidity() {
+            const valid = this.query !== "";
+            this.valueState = valid;
+            return valid;
+        },
+        /**
+         * On Ok event handler
+         */
+        onOk() {
+            this.handleSubmit();
+        },
+        /**
+         *  Form submit handler
+         */
+        handleSubmit() {
+            // Exit when the form isn't valid
+            if (!this.checkFormValidity()) {
+                return;
+            }
+            this.$nextTick(() => {
+                let user = _.find(this.users, { USR_FULLNAME: this.query });
+                this.$emit("updateSearchTag", {
+                    userId: user.USR_UID
+                });
+                this.$root.$emit("bv::hide::popover");
+            });
+        },
+        /**
+         * Cick tag event handler
+         */
+        onClickTag() {
+            this.$root.$emit("bv::hide::popover");
+        }
+    }
+};
+</script>
+<style scoped></style>

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

@@ -1,78 +1,87 @@
 <template>
     <div id="">
-       <SearchPopover
+        <SearchPopover
             :target="tag"
-            @closePopover="onClose"
             @savePopover="onOk"
+            :title="info.title"
         >
             <template v-slot:target-item>
-                <div
+                <div @click="onClickTag(tag)" :id="tag">
-                    @click="onClickTag(tag)"
+                    <b-icon icon="tags-fill" font-scale="1"></b-icon>
-                    :id="tag"
+                    {{ tagText }}
-                >
-                    <b-icon
-                        icon="tags-fill"
-                        font-scale="1"
-                    ></b-icon>
-                    {{
-                        tagText
-                    }}
                 </div>
             </template>
             <template v-slot:body>
-                <div class="row">
+                <p>{{ info.detail }}</p>
-                    <div class="col">
+                <form ref="form" @submit.stop.prevent="handleSubmit">
-                          <b-form-datepicker id="from" v-model="from"  placeholder="From Due Date"></b-form-datepicker>
+                    <div class="row">
+                        <div class="col">
+                            <b-form-group >
+                                <b-form-datepicker
+                                    id="from"
+                                    v-model="from"
+                                    :placeholder="$t('ID_FROM_DUE_DATE')"
+                                ></b-form-datepicker>
+                            </b-form-group>
+                        </div>
+                        <div class="col">
+                            <b-form-group>
+                                <b-form-datepicker
+                                    id="to"
+                                    v-model="to"
+                                    :placeholder="$t('ID_TO_DUE_DATE')"
+                                ></b-form-datepicker>
+                            </b-form-group>
+                        </div>
                     </div>
-                    <div class="col">
+                </form>
-                         <b-form-datepicker id="to" v-model="to"   placeholder="To Due Date"></b-form-datepicker>
-                    </div>  
-                </div>
-                   
             </template>
         </SearchPopover>
-       
     </div>
 </template>
 
 <script>
 import SearchPopover from "./SearchPopover.vue";
 
-    export default {
+export default {
-        components: {
+    components: {
-            SearchPopover,
+        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,
+            });
         },
-        props: ['tag','info'],
+        /**
-        data() {
+         * On ok event handler
-            return {
+         */
-                from: "",
+        onOk() {
-                to: ""
+            this.handleSubmit();
-            };
         },
-        computed: {
+        /**
-            tagText: function() {
+         * On click tag event handler
-                return `From: ${this.from} To:  ${this.to}`;
+         */
-            },
+        onClickTag(tag) {
-        },
+            this.$root.$emit("bv::hide::popover");
-        methods: {
+        }
-            onClose() {
+    }
-            // this.popoverShow = false;
+};
-                // this.$emit("closePopover");
-            },
-            onOk() {
-                this.$emit("updateSearchTag", {
-                    columnSearch: "APP_TITLE",
-                    search: null,
-                    dateFrom: this.from,
-                    dateTo: this.to
-                });
-            },
-            onClickTag(tag) {
-                this.$root.$emit("bv::hide::popover");
-            }
-          
-        },
-    };
 </script>
-<style scoped>
+<style scoped></style>
-</style>

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

@@ -0,0 +1,83 @@
+<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">
+                    <div class="row">
+                        <div class="col">
+                            <b-form-group>
+                                <b-form-datepicker
+                                    id="from"
+                                    v-model="from"
+                                    :placeholder="$t('ID_FROM_LAST_MODIFIED_DATE')"
+                                ></b-form-datepicker>
+                            </b-form-group>
+                        </div>
+                        <div class="col">
+                            <b-form-group>
+                                <b-form-datepicker
+                                    id="to"
+                                    v-model="to"
+                                    :placeholder="$t('ID_TO_LAST_MODIFIED_DATE')"
+                                ></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"],
+    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
+            });
+        },
+        /**
+         * 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,10 +1,6 @@
 <template>
     <div id="">
-        <SearchPopover
+        <SearchPopover :target="tag" @savePopover="onOk" :title="info.title">
-            :target="tag"
-            @closePopover="onClose"
-            @savePopover="onOk"
-        >
             <template v-slot:target-item>
                 <div @click="onClickTag(tag)" :id="tag">
                     <b-icon icon="tags-fill" font-scale="1"></b-icon>
@@ -12,15 +8,27 @@
                 </div>
             </template>
             <template v-slot:body>
-                <h6>Filter: Process</h6>
+                <p>{{ info.detail }}</p>
-                <vue-bootstrap-typeahead
+                <form ref="form" @submit.stop.prevent="handleSubmit">
-                    class="mb-4"
+                    <b-form-group
-                    v-model="query"
+                        :state="valueState"
-                    :data="process"
+                        label-for="name"
-                    :serializer="(item) => item.PRO_TITLE"
+                        :invalid-feedback="$t('ID_PROCESS_IS_REQUIRED')"
-                    @hit="selectedUser = $event"
+                    >
-                    placeholder="Search GitHub Users"
+                        <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"
+                        />
+                    </b-form-group>
+                </form>
             </template>
         </SearchPopover>
     </div>
@@ -29,8 +37,8 @@
 <script>
 import SearchPopover from "./SearchPopover.vue";
 import VueBootstrapTypeahead from "vue-bootstrap-typeahead";
+import api from "./../../../api/index";
 
-// OR
 export default {
     components: {
         SearchPopover,
@@ -39,48 +47,67 @@ export default {
     props: ["tag", "info"],
     data() {
         return {
+            minMatchingChars: 1,
             query: "",
             process: [],
+            valueState: null,
         };
     },
     computed: {
-        ProcessMaker() {
-            return window.ProcessMaker;
-        },
         tagText: function() {
-            return `Process: ${this.query}`;
+            return `${this.$i18n.t("ID_PROCESS")}: ${this.query}`;
         },
     },
     watch: {
         query(newQuery) {
-            ProcessMaker.apiClient
+            api.filters
-                .post(
+                .processList(this.query)
-                    `http://localhost:350/sysworkflow/en/neoclassic/cases/casesList_Ajax?actionAjax=processListExtJs&action=search`,
-                    {
-                        query: this.query,
-                    }
-                )
                 .then((response) => {
                     this.process = response.data;
                 })
-                .catch((err) => {
+                .catch((e) => {
                     console.error(err);
                 });
         },
     },
     methods: {
-        onClose() {},
+        /**
+         * Form validations review
+         */
+        checkFormValidity() {
+            const valid = this.query !== "";
+            this.valueState = valid;
+            return valid;
+        },
+        /**
+         * On Ok event handler
+         */
         onOk() {
-            this.$emit("updateSearchTag", {
+            this.handleSubmit();
-                columnSearch: "APP_TITLE",
+        },
-                process_label: this.query,
+        /**
-                process: _.find(this.process, { PRO_TITLE: this.query }).PRO_ID,
+         *  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,
+                });
+                this.$root.$emit("bv::hide::popover");
             });
         },
-        onClickTag(tag) {
+        /**
+         * Cick tag event handler
+         */
+        onClickTag() {
             this.$root.$emit("bv::hide::popover");
-        },
+        }
-    },
+    }
 };
 </script>
 <style scoped></style>

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

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <slot name="target-item">here component</slot>
+        <slot name="target-item"></slot>
 
         <b-popover
             :show.sync="popoverShow"
@@ -15,15 +15,13 @@
                         >&times;</span
                     >
                 </b-button>
-                &nbsp;
+                {{ title }}
             </template>
             <div>
-                <slot name="body">
+                <slot name="body"></slot>
-                    popover body
-                </slot>
                 <div class="float-right">
-                    <b-button @click="onClose" size="sm" variant="danger">Cancel</b-button>
+                    <b-button @click="onClose" size="sm" variant="danger"> {{$t('ID_CANCEL')}}</b-button>
-                    <b-button @click="onSave" size="sm" variant="primary">Save</b-button>
+                    <b-button @click="onSave" size="sm" variant="primary">{{$t('ID_SAVE')}}</b-button>
                 </div>
             </div>
         </b-popover>
@@ -31,25 +29,30 @@
 </template>
 <script>
 export default {
-    props: ['target'],
+    props: ['target', "title"],
     data() {
         return {
            popoverShow: false
         };
     },
     methods: {
+        /**
+         * Close buton click handler 
+         */
         onClose() {
             this.popoverShow = false;
             this.$emit('closePopover');
         },
+        /**
+         * Save button click handler 
+         */
         onSave() {
             this.$emit('savePopover');
-            this.onClose();
+        }
-        },
+    }
-    },
 };
 </script>
-</script>
+
 <style scoped>
 
 .popover {

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

@@ -1,70 +0,0 @@
-<template>
-    <div id="">
-       <SearchPopover
-            :target="tag"
-            @closePopover="onClose"
-            @savePopover="onOk"
-        >
-            <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>
-                <h6>{{ info.title }}</h6>
-                <input v-model="title" type="text" size="150" class="form-control" :placeholder="info.placeHolder">
-            </template>
-        </SearchPopover>
-       
-    </div>
-</template>
-|
-<script>
-import SearchPopover from "./SearchPopover.vue";
-
-    export default {
-        components: {
-            SearchPopover,
-        },
-        props: ['tag','info'],
-        data() {
-            return {
-                title: ''
-            };
-        },
-        computed: {
-            tagText:  function ()  {
-                return `Set By: `;
-            } 
-        },
-        methods: {
-             onClose() {
-            },
-            onOk() {
-                this.$emit("updateSearchTag", {
-                    columnSearch: "APP_TITLE",
-                    search: this.title,
-                });
-            },
-            onRemoveTag() {
-
-            },
-            onClickTag(tag) {
-                this.$root.$emit("bv::hide::popover");
-            }
-          
-        },
-    };
-</script>
-<style scoped>
-
-</style>

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

@@ -0,0 +1,117 @@
+<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_REQUIRED_FIELD')"
+                    >
+                        <vue-bootstrap-typeahead
+                            class="mb-4"
+                            id="name"
+                            v-model="query"
+                            :minMatchingChars="minMatchingChars"
+                            :data="tasks"
+                            :serializer="(item) => item.PRO_TITLE"
+                            @hit="selectedUser = $event"
+                            :placeholder="info.placeholder"
+                            required
+                            :state="valueState"
+                        />
+                    </b-form-group>
+                </form>
+            </template>
+        </SearchPopover>
+    </div>
+</template>
+|
+<script>
+import SearchPopover from "./SearchPopover.vue";
+import VueBootstrapTypeahead from "vue-bootstrap-typeahead";
+import api from "./../../../api/index";
+
+export default {
+    components: {
+        SearchPopover,
+        VueBootstrapTypeahead
+    },
+    props: ["tag", "info"],
+    data() {
+        return {
+            minMatchingChars: 1,
+            query: "",
+            tasks: [],
+            valueState: null
+        };
+    },
+    computed: {
+        tagText: function() {
+            return `${this.$i18n.t("ID_TASK_NAME")}: ${this.query}`;
+        },
+    },
+    watch: {
+        query(newQuery) {
+            api.filters
+                .processList(this.query)
+                .then((response) => {
+                    this.tasks = response.data;
+                })
+                .catch((e) => {
+                    console.error(err);
+                });
+        },
+    },
+    methods: {
+         /**
+         * Form validations review
+         */
+        checkFormValidity() {
+            const valid = this.query !== "";
+            this.valueState = valid;
+            return valid;
+        },
+        /**
+         * On Ok event handler
+         */
+        onOk() {
+            this.handleSubmit();
+        },
+        /**
+         *  Form submit handler
+         */
+        handleSubmit() {
+            // Exit when the form isn't valid
+            if (!this.checkFormValidity()) {
+                return;
+            }
+            this.$nextTick(() => {
+                let task = _.find(this.tasks, { PRO_TITLE: this.query });
+                this.$emit("updateSearchTag", {
+                    task: task.PRO_ID,
+                });
+                this.$root.$emit("bv::hide::popover");
+            });
+        },
+        /**
+         * Cick tag event handler
+         */
+        onClickTag() {
+            this.$root.$emit("bv::hide::popover");
+        }
+    }
+};
+</script>
+<style scoped></style>

resources/assets/js/home/AdvancedSearch.vue

@@ -1,391 +1,403 @@
 <template>
-  <div id="v-mycases3" ref="v-mycases2" class="v-container-mycases">
+    <div id="v-mycases3" ref="v-mycases2" class="v-container-mycases">
-    <button-fleft :data="newCase"></button-fleft>
+        <button-fleft :data="newCase"></button-fleft>
-    <GenericFilter />
+        <GenericFilter
-    <modal-new-request ref="newRequest"></modal-new-request>
+            :id="id"
+            :name="name"
+            @onJumpCase="onJumpCase"
+            @onSubmit="onSubmitFilter"
+            @onRemoveFilter="onRemoveFilter"
+            @onSearch="onSearch"
+        />
 
-    <v-server-table
+        <modal-new-request ref="newRequest"></modal-new-request>
-      :data="tableData"
+
-      :columns="columns"
+        <v-server-table
-      :options="options"
+            :data="tableData"
-      ref="test"
+            :columns="columns"
-    >
+            :options="options"
-      <div slot="info" slot-scope="props">
+            ref="test"
-        <b-icon
+        >
-          icon="exclamation-circle-fill"
+            <div slot="info" slot-scope="props">
-          variant="primary"
+                <b-icon
-          @click="caseDetail(props)"
+                    icon="exclamation-circle-fill"
-        ></b-icon>
+                    variant="primary"
-      </div>
+                    @click="openCaseDetail(props.row)"
-      <div slot="case_number" slot-scope="props">
+                ></b-icon>
-        {{ props.row.CASE_NUMBER }}
+            </div>
-      </div>
+            <div slot="case_number" slot-scope="props">
-      <div slot="case_title" slot-scope="props">
+                {{ props.row.CASE_NUMBER }}
-        {{ props.row.CASE_TITLE }}
+            </div>
-      </div>
+            <div slot="case_title" slot-scope="props">
-      <div slot="process_name" slot-scope="props">
+                {{ props.row.CASE_TITLE }}
-        {{ props.row.PROCESS_NAME }}
+            </div>
-      </div>
+            <div slot="process_name" slot-scope="props">
-      <!-- <div slot="pending_taks" slot-scope="props">
+                {{ props.row.PROCESS_NAME }}
-                <GroupedCell :data="props.row.PENDING_TASKS" />
+            </div>
-            </div> -->
+            <div slot="task" slot-scope="props">
-      <div slot="status" slot-scope="props">{{ props.row.STATUS }}</div>
+                <TaskCell :data="props.row.TASK" />
-      <div slot="start_date" slot-scope="props">
+            </div>
-        {{ props.row.START_DATE }}
+            <div slot="status" slot-scope="props">
-      </div>
+                {{ props.row.STATUS }}
-      <div slot="finish_date" slot-scope="props">
+            </div>
-        {{ props.row.FINISH_DATE }}
+            <div slot="current_user" slot-scope="props">
-      </div>
+                {{
-      <div slot="duration" slot-scope="props">
+                    nameFormatCases(
-        {{ props.row.DURATION }}
+                        props.row.USR_FIRSTNAME,
-      </div>
+                        props.row.USR_LASTNAME,
-      <div slot="actions" slot-scope="props">
+                        props.row.USR_USERNAME
-        <div class="btn-default">
+                    )
-          <i class="fas fa-comments"></i>
+                }}
-          <span class="badge badge-light">9</span>
+            </div>
-          <span class="sr-only">unread messages</span>
+            <div slot="due_date" slot-scope="props">
-        </div>
+                {{ props.row.DUE_DATE }}
-      </div>
+            </div>
-    </v-server-table>
+            <div slot="delegation_date" slot-scope="props">
-  </div>
+                {{ props.row.DELEGATION_DATE }}
+            </div>
+            <div slot="priority" slot-scope="props">
+                {{ props.row.PRIORITY }}
+            </div>
+            <div slot="actions" slot-scope="props">
+                <div class="btn-default">
+                    <i class="fas fa-comments"></i>
+                    <span class="badge badge-light">9</span>
+                    <span class="sr-only">unread messages</span>
+                </div>
+            </div>
+        </v-server-table>
+    </div>
 </template>
 <script>
 import ButtonFleft from "../components/home/ButtonFleft.vue";
 import ModalNewRequest from "./ModalNewRequest.vue";
 import GenericFilter from "../components/search/GenericFilter";
+import TaskCell from "../components/vuetable/TaskCell.vue";
 import api from "./../api/index";
+import { Event } from "vue-tables-2";
 
 export default {
-  name: "AdvancedSearch",
+    name: "AdvancedSearch",
-  components: {
+    components: {
-    GenericFilter,
+        GenericFilter,
-    ButtonFleft,
+        ButtonFleft,
-    ModalNewRequest,
+        ModalNewRequest,
-  },
+        TaskCell
-  props: {},
-  data() {
-    return {
-      metrics: [],
-      filter: "CASES_INBOX",
-      allView: [],
-      filterHeader: "STARTED_BY_ME",
-      headers: [],
-      newCase: {
-        title: "New Case",
-        class: "btn-success",
-        onClick: () => {
-          this.$refs["newRequest"].show();
-        },
-      },
-      columns: [
-        "info",
-        "case_number",
-        "case_title",
-        "process_name",
-        "status",
-        "start_date",
-        "finish_date",
-        "duration",
-        "actions",
-      ],
-      tableData: [],
-      options: {
-        filterable: false,
-        headings: {
-          info: "",
-          case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
-          case_title: this.$i18n.t("ID_CASE_TITLE"),
-          process_name: this.$i18n.t("ID_PROCESS_NAME"),
-          pending_taks: this.$i18n.t("PENDdING_TASKS"),
-          status: this.$i18n.t("ID_CASESLIST_APP_STATUS"),
-          start_date: this.$i18n.t("ID_START_DATE"),
-          finish_date: this.$i18n.t("ID_FINISH_DATE"),
-          duration: this.$i18n.t("ID_DURATION"),
-          actions: "",
-        },
-        selectable: {
-          mode: "single",
-          only: function (row) {
-            return true;
-          },
-          selectAllMode: "page",
-          programmatic: false,
-        },
-        requestFunction(data) {
-          return this.$parent.$parent.getCasesForVueTable();
-        },
-      },
-      translations: null,
-      pmDateFormat: "Y-m-d H:i:s",
-      apiParams: {
-        action: "todo",
-        list: "inbox",
-        filter: "",
-        search: "",
-        sort: "APP_NUMBER",
-        dir: "DESC",
-        category: "",
-        process: "",
-        filterStatus: "",
-        paged: true,
-        start: 0,
-        limit: 10,
-      },
-    };
-  },
-  mounted() {
-    //  this.$refs.vueTable24.refresh();
-    this.$refs.test.refresh();
-    this.getHeaders();
-  },
-  watch: {},
-  computed: {
-    ProcessMaker() {
-      return window.ProcessMaker;
     },
-  },
+    props: ["id", "name"],
-  updated() {},
+    data() {
-  beforeCreate() {},
+        return {
-  methods: {
+            metrics: [],
-    /**
+            filter: "CASES_INBOX",
-     * Get Cases Headers from BE
+            allView: [],
-     */
+            jsonFilters: null,
-    getHeaders() {
+            filterHeader: "STARTED_BY_ME",
-      let that = this;
+            headers: [],
-      api.casesHeader.get().then((response) => {
+            newCase: {
-        that.headers = that.formatCasesHeaders(response.data);
+                title: "New Case",
-      });
+                class: "btn-success",
-    },
+                onClick: () => {
-    /**
+                    this.$refs["newRequest"].show();
-     * Get cases data by header
+                },
-     */
+            },
-    getCasesForVueTable() {
+            columns: [
-      let that = this,
+                "info",
-        dt;
+                "case_number",
-      return new Promise((resolutionFunc, rejectionFunc) => {
+                "case_title",
-        api.cases
+                "process_name",
-          .search({
+                "task",
-            type: that.filterHeader,
+                "current_user",
-          })
+                "due_date",
-          .then((response) => {
+                "delegation_date",
-            dt = that.formatDataResponse(response.data);
+                "priority",
-            resolutionFunc({
+                "actions",
-              data: dt,
+            ],
-              count: response.total,
+            tableData: [],
-            });
+            options: {
-          })
+                filterable: false,
-          .catch((e) => {
+                headings: {
-            rejectionFunc(e);
+                    info: "",
-          });
+                    case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
-      });
+                    case_title: this.$i18n.t("ID_CASE_TITLE"),
-    },
+                    process_name: this.$i18n.t("ID_PROCESS_NAME"),
-    /**
+                    task: this.$i18n.t("ID_TASK"),
-     * Format Response API TODO to grid inbox and columns
+                    current_user: this.$i18n.t("ID_CURRENT_USER"),
-     */
+                    due_date: this.$i18n.t("ID_DUE_DATE"),
-    formatDataResponse(response) {
+                    delegation_date: this.$i18n.t("ID_DELEGATION_DATE"),
-      let data = [];
+                    priority: this.$i18n.t("ID_PRIORITY"),
-      _.forEach(response, (v) => {
+                    actions: "",
-        data.push({
+                },
-          CASE_NUMBER: v.APP_NUMBER,
+                selectable: {
-          CASE_TITLE: v.APP_TITLE,
+                    mode: "single",
-          PROCESS_NAME: v.PRO_TITLE,
+                    only: function(row) {
-          STATUS: v.APP_STATUS,
+                        return true;
-          START_DATE: v.DEL_DELEGATE_DATE_LABEL,
+                    },
-          FINISH_DATE: v.DEL_DELEGATE_DATE_LABEL,
+                    selectAllMode: "page",
-          PENDING_TASKS: v.PENDING_TASKS,
+                    programmatic: false,
-          DURATION: v.DURATION_LABEL,
+                },
-        });
+                requestFunction(data) {
-      });
+                    return this.$parent.$parent.getCasesForVueTable();
-      return data;
+                },
-    },
+                customFilters: ["myfilter"],
-    /**
+            },
-     * Get for user format name configured in Processmaker Environment Settings
+            pmDateFormat: "Y-m-d H:i:s",
-     *
-     * @param {string} name
-     * @param {string} lastName
-     * @param {string} userName
-     * @return {string} nameFormat
-     */
-    nameFormatCases(name, lastName, userName) {
-      let nameFormat = "";
-      if (/^\s*$/.test(name) && /^\s*$/.test(lastName)) {
-        return nameFormat;
-      }
-      if (this.nameFormat === "@firstName @lastName") {
-        nameFormat = name + " " + lastName;
-      } else if (this.nameFormat === "@firstName @lastName (@userName)") {
-        nameFormat = name + " " + lastName + " (" + userName + ")";
-      } else if (this.nameFormat === "@userName") {
-        nameFormat = userName;
-      } else if (this.nameFormat === "@userName (@firstName @lastName)") {
-        nameFormat = userName + " (" + name + " " + lastName + ")";
-      } else if (this.nameFormat === "@lastName @firstName") {
-        nameFormat = lastName + " " + name;
-      } else if (this.nameFormat === "@lastName, @firstName") {
-        nameFormat = lastName + ", " + name;
-      } else if (this.nameFormat === "@lastName, @firstName (@userName)") {
-        nameFormat = lastName + ", " + name + " (" + userName + ")";
-      } else {
-        nameFormat = name + " " + lastName;
-      }
-      return nameFormat;
-    },
-    /**
-     * Convert string to date format
-     *
-     * @param {string} value
-     * @return {date} myDate
-     */
-    convertDate(value) {
-      myDate = new Date(1900, 0, 1, 0, 0, 0);
-      try {
-        if (!isNaN(Date.parse(value))) {
-          var myArray = value.split(" ");
-          var myArrayDate = myArray[0].split("-");
-          if (myArray.length > 1) {
-            var myArrayHour = myArray[1].split(":");
-          } else {
-            var myArrayHour = new Array("0", "0", "0");
-          }
-          var myDate = new Date(
-            myArrayDate[0],
-            myArrayDate[1] - 1,
-            myArrayDate[2],
-            myArrayHour[0],
-            myArrayHour[1],
-            myArrayHour[2]
-          );
-        }
-      } catch (err) {
-        throw new Error(err);
-      }
-      return myDate;
-    },
-    /**
-     * Get a format for specific date
-     *
-     * @param {string} d
-     * @return {string} dateToConvert
-     */
-    dateFormatCases(d) {
-      let dateToConvert = d;
-      const stringToDate = this.convertDate(dateToConvert);
-      if (this.pmDateFormat === "Y-m-d H:i:s") {
-        dateToConvert = dateFormat(stringToDate, "yyyy-mm-dd HH:MM:ss");
-      } else if (this.pmDateFormat === "d/m/Y") {
-        dateToConvert = dateFormat(stringToDate, "dd/mm/yyyy");
-      } else if (this.pmDateFormat === "m/d/Y") {
-        dateToConvert = dateFormat(stringToDate, "mm/dd/yyyy");
-      } else if (this.pmDateFormat === "Y/d/m") {
-        dateToConvert = dateFormat(stringToDate, "yyyy/dd/mm");
-      } 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");
-      } 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");
-      } else if (this.pmDateFormat === "M d, Y") {
-        dateToConvert = dateFormat(stringToDate, "mmm dd, yyyy");
-      } else if (this.pmDateFormat === "m D, Y") {
-        dateToConvert = dateFormat(stringToDate, "mm ddd, yyyy");
-      } else if (this.pmDateFormat === "D d M, Y") {
-        dateToConvert = dateFormat(stringToDate, "ddd dd mmm, yyyy");
-      } else if (this.pmDateFormat === "D M, Y") {
-        dateToConvert = dateFormat(stringToDate, "ddd mmm, yyyy");
-      } else if (this.pmDateFormat === "d M, Y") {
-        dateToConvert = dateFormat(stringToDate, "dd mmm, yyyy");
-      } else if (this.pmDateFormat === "d m, Y") {
-        dateToConvert = dateFormat(stringToDate, "dd mm, yyyy");
-      } else if (this.pmDateFormat === "d.m.Y") {
-        dateToConvert = dateFormat(stringToDate, "mm.dd.yyyy");
-      } else {
-        dateToConvert = dateFormat(stringToDate, 'dd "de" mmmm "de" yyyy');
-      }
-      return dateToConvert;
-    },
-    /**
-     * Open selected cases in the inbox
-     *
-     * @param {object} item
-     */
-    openCase(item) {
-      const action = "todo";
-      if (this.isIE) {
-        window.open(
-          "../../../cases/open?APP_UID=" +
-            item.row.APP_UID +
-            "&DEL_INDEX=" +
-            item.row.DEL_INDEX +
-            "&action=" +
-            action
-        );
-      } else {
-        window.location.href =
-          "../../../cases/open?APP_UID=" +
-          item.row.APP_UID +
-          "&DEL_INDEX=" +
-          item.row.DEL_INDEX +
-          "&action=" +
-          action;
-      }
-    },
-    /**
-     * Format Response from HEADERS
-     * @param {*} response
-     */
-    formatCasesHeaders(response) {
-      let data = [],
-        that = this,
-        info = {
-          STARTED_BY_ME: {
-            icon: "fas fa-inbox",
-            class: "btn-primary",
-          },
-          COMPLETED: {
-            icon: "fas fa-check-square",
-            class: "btn-success",
-          },
-          IN_PROGRESS: {
-            icon: "fas fa-tasks",
-            class: "btn-danger",
-          },
-          SUPERVISING: {
-            icon: "fas fa-binoculars",
-            class: "btn-warning",
-          },
         };
-      _.forEach(response, (v) => {
-        data.push({
-          title: v.name,
-          counter: v.count,
-          item: v.item,
-          icon: info[v.item].icon,
-          onClick: (obj) => {
-            that.filterHeader = obj.item;
-            that.$refs["vueTable"].getData();
-          },
-          class: info[v.item].class,
-        });
-      });
-      return data;
     },
-    /**
+    methods: {
-     * Open case detail
+        /**
-     * @param {*} item
+         * Get cases data by header
-     */
+         */
-    caseDetail(item) {},
+        getCasesForVueTable() {
-  },
+            let that = this,
+                dt;
+            return new Promise((resolutionFunc, rejectionFunc) => {
+                api.cases
+                    .search(that.jsonFilters)
+                    .then((response) => {
+                        dt = that.formatDataResponse(response.data.data);
+                        console.log(dt);
+                        resolutionFunc({
+                            data: dt,
+                            count: response.data.total,
+                        });
+                    })
+                    .catch((e) => {
+                        rejectionFunc(e);
+                    });
+            });
+        },
+        /**
+         * Format Response API TODO to grid todo and columns
+         */
+        formatDataResponse(response) {
+            let data = [];
+            _.forEach(response, (v) => {
+                data.push({
+                    CASE_NUMBER: v.APP_NUMBER,
+                    CASE_TITLE: v.APP_TITLE,
+                    PROCESS_NAME: v.PRO_TITLE,
+                    TASK: {
+                        TITLE: v.TAS_TITLE,
+                        CODE_COLOR: v.TAS_COLOR,
+                        COLOR: v.TAS_COLOR_LABEL,
+                    },
+                    USR_FIRSTNAME: v.USR_FIRSTNAME,
+                    USR_LASTNAME: v.USR_LASTNAME,
+                    USR_USERNAME: v.USR_USERNAME,
+                    DUE_DATE: v.DEL_TASK_DUE_DATE,
+                    DELEGATION_DATE: v.DEL_DELEGATE_DATE,
+                    PRIORITY: v.DEL_PRIORITY_LABEL,
+                    DEL_INDEX: v.DEL_INDEX,
+                    APP_UID: v.APP_UID,
+                });
+            });
+            return data;
+        },
+        /**
+         * Get for user format name configured in Processmaker Environment Settings
+         *
+         * @param {string} name
+         * @param {string} lastName
+         * @param {string} userName
+         * @return {string} nameFormat
+         */
+        nameFormatCases(name, lastName, userName) {
+            let nameFormat = "";
+            if (/^\s*$/.test(name) && /^\s*$/.test(lastName)) {
+                return nameFormat;
+            }
+            if (this.nameFormat === "@firstName @lastName") {
+                nameFormat = name + " " + lastName;
+            } else if (this.nameFormat === "@firstName @lastName (@userName)") {
+                nameFormat = name + " " + lastName + " (" + userName + ")";
+            } else if (this.nameFormat === "@userName") {
+                nameFormat = userName;
+            } else if (this.nameFormat === "@userName (@firstName @lastName)") {
+                nameFormat = userName + " (" + name + " " + lastName + ")";
+            } else if (this.nameFormat === "@lastName @firstName") {
+                nameFormat = lastName + " " + name;
+            } else if (this.nameFormat === "@lastName, @firstName") {
+                nameFormat = lastName + ", " + name;
+            } else if (
+                this.nameFormat === "@lastName, @firstName (@userName)"
+            ) {
+                nameFormat = lastName + ", " + name + " (" + userName + ")";
+            } else {
+                nameFormat = name + " " + lastName;
+            }
+            return nameFormat;
+        },
+        /**
+         * Convert string to date format
+         *
+         * @param {string} value
+         * @return {date} myDate
+         */
+        convertDate(value) {
+            myDate = new Date(1900, 0, 1, 0, 0, 0);
+            try {
+                if (!isNaN(Date.parse(value))) {
+                    var myArray = value.split(" ");
+                    var myArrayDate = myArray[0].split("-");
+                    if (myArray.length > 1) {
+                        var myArrayHour = myArray[1].split(":");
+                    } else {
+                        var myArrayHour = new Array("0", "0", "0");
+                    }
+                    var myDate = new Date(
+                        myArrayDate[0],
+                        myArrayDate[1] - 1,
+                        myArrayDate[2],
+                        myArrayHour[0],
+                        myArrayHour[1],
+                        myArrayHour[2]
+                    );
+                }
+            } catch (err) {
+                throw new Error(err);
+            }
+            return myDate;
+        },
+        /**
+         * Get a format for specific date
+         *
+         * @param {string} d
+         * @return {string} dateToConvert
+         */
+        dateFormatCases(d) {
+            let dateToConvert = d;
+            const stringToDate = this.convertDate(dateToConvert);
+            if (this.pmDateFormat === "Y-m-d H:i:s") {
+                dateToConvert = dateFormat(stringToDate, "yyyy-mm-dd HH:MM:ss");
+            } else if (this.pmDateFormat === "d/m/Y") {
+                dateToConvert = dateFormat(stringToDate, "dd/mm/yyyy");
+            } else if (this.pmDateFormat === "m/d/Y") {
+                dateToConvert = dateFormat(stringToDate, "mm/dd/yyyy");
+            } else if (this.pmDateFormat === "Y/d/m") {
+                dateToConvert = dateFormat(stringToDate, "yyyy/dd/mm");
+            } 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"
+                );
+            } 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"
+                );
+            } else if (this.pmDateFormat === "M d, Y") {
+                dateToConvert = dateFormat(stringToDate, "mmm dd, yyyy");
+            } else if (this.pmDateFormat === "m D, Y") {
+                dateToConvert = dateFormat(stringToDate, "mm ddd, yyyy");
+            } else if (this.pmDateFormat === "D d M, Y") {
+                dateToConvert = dateFormat(stringToDate, "ddd dd mmm, yyyy");
+            } else if (this.pmDateFormat === "D M, Y") {
+                dateToConvert = dateFormat(stringToDate, "ddd mmm, yyyy");
+            } else if (this.pmDateFormat === "d M, Y") {
+                dateToConvert = dateFormat(stringToDate, "dd mmm, yyyy");
+            } else if (this.pmDateFormat === "d m, Y") {
+                dateToConvert = dateFormat(stringToDate, "dd mm, yyyy");
+            } else if (this.pmDateFormat === "d.m.Y") {
+                dateToConvert = dateFormat(stringToDate, "mm.dd.yyyy");
+            } else {
+                dateToConvert = dateFormat(
+                    stringToDate,
+                    'dd "de" mmmm "de" yyyy'
+                );
+            }
+            return dateToConvert;
+        },
+        /**
+         * Open selected cases in the inbox
+         *
+         * @param {object} item
+         */
+        openCase(item) {
+            const action = "todo";
+            if (this.isIE) {
+                window.open(
+                    "../../../cases/open?APP_UID=" +
+                        item.row.APP_UID +
+                        "&DEL_INDEX=" +
+                        item.row.DEL_INDEX +
+                        "&action=" +
+                        action
+                );
+            } else {
+                window.location.href =
+                    "../../../cases/open?APP_UID=" +
+                    item.row.APP_UID +
+                    "&DEL_INDEX=" +
+                    item.row.DEL_INDEX +
+                    "&action=" +
+                    action;
+            }
+        },
+        /**
+         * Open case detail
+         *
+         * @param {object} item
+         */
+        openCaseDetail(item) {
+            this.$parent.dataCase = {
+                APP_UID: item.APP_UID,
+                DEL_INDEX: item.DEL_INDEX,
+            };
+            this.$parent.page = "case-detail";
+        },
+        onJumpCase(caseNumber) {
+            const params = {
+                APP_NUMBER: caseNumber,
+                ACTION: "jump",
+                ACTION_FROM_LIST: "search",
+            };
+            let self = this;
+            api.cases
+                .jump(params)
+                .then(function(data) {
+                    self.$parent.dataCase = params;
+                    self.$parent.page = "XCase";
+                })
+                .catch((err) => {
+                    throw new Error(err);
+                });
+        },
+        /**
+         * Handler submit filter
+         * @param {object} data - data returned from the server
+         */
+        onSubmitFilter(data) {
+            this.$emit("onSubmitFilter", data);
+        },
+        /**
+         * Handler on remove filter
+         * @param {number} id - data returned fron the server
+         */
+        onRemoveFilter(id) {
+            this.$emit("onRemoveFilter", id);
+        },
+        /**
+         * Handler on search filter
+         * @param {number} id - data returned fron the server
+         */
+        onSearch(params) {
+            this.jsonFilters = params;
+            this.$refs.test.refresh();
+        },
+    },
 };
 </script>
 <style>
 .v-container-mycases {
-  padding-top: 20px;
+    padding-top: 20px;
-  padding-bottom: 20px;
+    padding-bottom: 20px;
-  padding-left: 50px;
+    padding-left: 50px;
-  padding-right: 50px;
+    padding-right: 50px;
 }
 </style>

resources/assets/js/home/Home.vue

@@ -1,23 +1,33 @@
 <template>
-  <div id="home" :class="[{ collapsed: collapsed }, { onmobile: isOnMobile }]">
+    <div
-    <div class="demo">
+        id="home"
-      <div class="container">
+        :class="[{ collapsed: collapsed }, { onmobile: isOnMobile }]"
-        <router-view />
+    >
-      </div>
+        <div class="demo">
+            <div class="container">
+                <router-view />
+            </div>
+            <CustomSidebar
+                :menu="menu"
+                @OnClickSidebarItem="OnClickSidebarItem"
+                @onToggleCollapse="onToggleCollapse"
+            />
+            <div
+                v-if="isOnMobile && !collapsed"
+                class="sidebar-overlay"
+                @click="collapsed = true"
+            />
 
-      <CustomSidebar
+            <component
-        @OnClickSidebarItem="OnClickSidebarItem"
+                v-bind:is="page"
-        @onToggleCollapse="onToggleCollapse"
+                ref="component"
-      />
+                :id="pageId"
-      <div
+                :name="pageName"
-        v-if="isOnMobile && !collapsed"
+                @onSubmitFilter="onSubmitFilter"
-        class="sidebar-overlay"
+                @onRemoveFilter="onRemoveFilter"
-        @click="collapsed = true"
+            ></component>
-      />
+        </div>
-
-      <component v-bind:is="page" ref="component"></component>
     </div>
-  </div>
 </template>
 <script>
 import CustomSidebar from "./../components/menu/CustomSidebar";
@@ -33,86 +43,149 @@ import XCase from "./XCase";
 import TaskReassignments from "./TaskReassignments";
 import AdvancedSearch from "./AdvancedSearch";
 
+import api from "./../api/index";
+
 export default {
-  name: "Home",
+    name: "Home",
-  components: {
+    components: {
-    CustomSidebar,
+        CustomSidebar,
-    MyCases,
+        MyCases,
-    AdvancedSearch,
+        AdvancedSearch,
-    MyDocuments,
+        MyDocuments,
-    BatchRouting,
+        BatchRouting,
-    TaskReassignments,
+        TaskReassignments,
-    XCase,
+        XCase,
-    Todo,
+        Todo,
-    Draft,
+        Draft,
-    Paused,
+        Paused,
-    Unassigned,
+        Unassigned,
-    CaseDetail,
+        CaseDetail,
-  },
-  data() {
-    return {
-      page: "MyCases",
-      menu: [],
-      dataCase: {},
-      hideToggle: true,
-      collapsed: false,
-      selectedTheme: "",
-      isOnMobile: false,
-      sidebarWidth: "310px",
-    };
-  },
-  mounted() {
-    this.onResize();
-    window.addEventListener("resize", this.onResize);
-  },
-  methods: {
-    OnClickSidebarItem(item) {
-      this.page = item.item.id || "MyCases";
     },
-    /**
+    data() {
-     * Update page component
+        return {
-     */
+            page: "MyCases",
-    updatePage(data, page, callback) {
+            menu: null,
-      this.dataCase = data;
+            dataCase: {},
-      this.page = page;
+            hideToggle: true,
-      if (this.$refs["component"] && this.$refs["component"].update) {
+            collapsed: false,
-        this.$refs["component"].update(data, callback);
+            selectedTheme: "",
-      }
+            isOnMobile: false,
+            sidebarWidth: "310px",
+            pageId: null,
+            pageName: null,
+        };
     },
-    onResize() {
+    mounted() {
-      if (window.innerWidth <= 767) {
+        this.onResize();
-        this.isOnMobile = true;
+        window.addEventListener("resize", this.onResize);
-        this.collapsed = true;
+        this.getMenu();
-      } else {
-        this.isOnMobile = false;
-        this.collapsed = false;
-      }
     },
-    /**
+    methods: {
-     * Toggle sidebar handler
+        /**
-     * @param {Boolean} collapsed - if sidebar is collapsed true|false
+         * Gets the menu from the server
-     *
+         */
-     */
+        getMenu() {
-    onToggleCollapse(collapsed) {
+            api.menu
-      this.collapsed = collapsed;
+                .get()
+                .then((response) => {
+                    this.menu = response;
+                })
+                .catch((e) => {
+                    console.error(e);
+                });
+        },
+        OnClickSidebarItem(item) {
+            this.page = item.item.page || "MyCases";
+            this.pageId = item.item.id || null;
+            this.pageName = item.item.title || null;
+        },
+        /**
+         * Update page component
+         */
+        updatePage(data, page, callback) {
+            this.dataCase = data;
+            this.page = page;
+            if (this.$refs["component"] && this.$refs["component"].update) {
+                this.$refs["component"].update(data, callback);
+            }
+        },
+        onResize() {
+            if (window.innerWidth <= 767) {
+                this.isOnMobile = true;
+                this.collapsed = true;
+            } else {
+                this.isOnMobile = false;
+                this.collapsed = false;
+            }
+        },
+        /**
+         * Toggle sidebar handler
+         * @param {Boolean} collapsed - if sidebar is collapsed true|false
+         *
+         */
+        onToggleCollapse(collapsed) {
+            this.collapsed = collapsed;
+        },
+        /**
+         * Handle if filter was submited
+         */
+
+        onSubmitFilter(data) {
+            this.addMenuSearchChild(data);
+        },
+        /**
+         * Add a child submenu to search menu
+         * @param {object} data - cnotains theinfo to generate a menu
+         */
+        addMenuSearchChild(data) {
+            let newMenu = this.menu;
+            let advSearch = _.find(newMenu, function(o) {
+                return o.href === "/advanced-search";
+            });
+            if (!advSearch.hasOwnProperty("child")) {
+                advSearch["child"] = [];
+            }
+            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.page = "advanced-search";
+            this.pageId = null;
+            this.pageName = null;
+        },
+        removeMenuSearchChild(id) {
+            let newMenu = this.menu;
+            let advSearch = _.find(newMenu, function(o) {
+                return o.href === "/advanced-search";
+            });
+            const index = advSearch.child.findIndex(function(o) {
+                return o.id === id;
+            });
+            if (index !== -1) advSearch.child.splice(index, 1);
+        },
     },
-  },
 };
 </script>
 
 <style lang="scss">
 #home {
-  padding-left: 310px;
+    padding-left: 310px;
-  transition: 0.3s;
+    transition: 0.3s;
 }
 #home.collapsed {
-  padding-left: 50px;
+    padding-left: 50px;
 }
 #home.onmobile {
-  padding-left: 50px;
+    padding-left: 50px;
 }
 
 .container {
-  max-width: 1500px;
+    max-width: 1500px;
 }
 </style>

resources/assets/js/home/XCase.vue

@@ -21,10 +21,18 @@ export default {
   mounted() {
     this.height = window.innerHeight - this.diffHeight;
     this.dataCase = this.$parent.dataCase;
-    this.path =
+    if(this.dataCase.ACTION =="jump") {
-      window.config.SYS_SERVER +
+      this.path =
-      window.config.SYS_URI +
+        window.config.SYS_SERVER +
-      `cases/open?APP_UID=${this.dataCase.APP_UID}&DEL_INDEX=${this.dataCase.DEL_INDEX}&action=${this.dataCase.ACTION}`;
+        window.config.SYS_URI +
+        `cases/open?APP_NUMBER=${this.dataCase.APP_NUMBER}&action=${this.dataCase.ACTION}&actionFromList=${this.dataCase.ACTION_FROM_LIST}`;
+    } else {
+      this.path =
+        window.config.SYS_SERVER +
+        window.config.SYS_URI +
+        `cases/open?APP_UID=${this.dataCase.APP_UID}&DEL_INDEX=${this.dataCase.DEL_INDEX}&action=${this.dataCase.ACTION}`;
+    }
+
   },
   data() {
     return {
@@ -33,6 +41,7 @@ export default {
       diffHeight: 10,
       dataCase: null,
       path: "",
+      
     };
   },
   methods: {

resources/assets/js/home/main.js

@@ -3,7 +3,7 @@ import VueRouter from "vue-router";
 import VueSidebarMenu from "vue-sidebar-menu";
 import VueI18n from 'vue-i18n';
 import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
-import { ServerTable } from 'vue-tables-2';
+import { ServerTable, Event} from 'vue-tables-2';
 import "@fortawesome/fontawesome-free/css/all.css";
 import "@fortawesome/fontawesome-free/js/all.js";
 import 'bootstrap/dist/css/bootstrap-grid.css';

resources/assets/js/mocks/menu.json

@@ -11,9 +11,10 @@
   },
   {
     "href": "/advanced-search",
-    "id": "advanced-search",
+    "page": "advanced-search",
     "title": "Advanced Search",
-    "icon": "fas fa-search"
+    "icon": "fas fa-search",
+    "child": []
   },
   {
     "header": true,
@@ -28,7 +29,8 @@
       "text": "23",
       "class": "badge-custom"
     },
-    "id": "todo"
+    "id": "todo",
+    "page": "todo"
   },
   {
     "href": "/draft",
@@ -38,7 +40,8 @@
       "text": "1",
       "class": "badge-custom"
     },
-    "id": "draft"
+    "id": "draft",
+    "page": "draft"
   },
   {
     "href": "/paused",
@@ -48,7 +51,8 @@
       "text": "7",
       "class": "badge-custom"
     },
-    "id": "paused"
+    "id": "paused",
+    "page": "paused"
   },
   {
     "href": "/unassigned",
@@ -58,7 +62,8 @@
       "text": "99+",
       "class": "badge-custom"
     },
-    "id": "unassigned"
+    "id": "unassigned",
+    "page": "unassigned"
   },
   {
     "header": true,
@@ -69,6 +74,7 @@
     "href": "/batch-routing",
     "title": "Batch Routing",
     "id": "batch-routing",
+    "page": "batch-routing",
     "icon": "fas fa-bars",
     "disabled": false
   },
@@ -76,6 +82,7 @@
     "href": "/my-documents",
     "title": "My Documents",
     "id": "my-documents",
+    "page": "my-documents",
     "icon": "fas fa-bars",
     "disabled": false
   },
@@ -83,7 +90,9 @@
     "href": "/task-Reassignments",
     "title": "Task Reassignments",
     "icon": "fas fa-arrows-alt",
-    "id": "task-reassignments"
+    "id": "task-reassignments",
+    "page": "task-reassignments"
+    
   },
   {
     "href": "/page",