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-row>
+            <b-alert
-                <b-col md="10"><h5>Advanced Search</h5></b-col>
+                :show="dismissCountDown"
-                <b-col md="2">
+                dismissible
-                    <b-button variant="success" size="sm" class="float-right"
+                :variant="variant"
-                        ><b-icon icon="plus"></b-icon>Request</b-button
+                @dismissed="dismissCountDown = 0"
+                @dismiss-count-down="countDownChanged"
             >
-                </b-col>
+                {{ message }}
+            </b-alert>
+            <b-row>
+                <b-col md="10"><h5>{{$t('ID_OPEN_SEARCH')}}</h5></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,7 +117,8 @@
                                         :variant="tagVariant"
                                         class="mr-1"
                                     >
-                                         <component v-bind:is="tag"
+                                        <component
+                                            v-bind:is="tag"
                                             v-bind:info="searchTagsModels[tag]"
                                             v-bind:tag="tag"
                                             @updateSearchTag="updateSearchTag"
@@ -121,7 +143,7 @@
 
             <b-modal
                 id="modal-prevent-closing"
-                ref="modal"
+                ref="saveFilter"
                 :title="saveModalTitle"
                 @show="resetModal"
                 @hidden="resetModal"
@@ -130,20 +152,19 @@
                 <form ref="form" @submit.stop.prevent="handleSubmit">
                     <b-form-group
                         :state="nameState"
-                    label="Name"
+                        :label="$t('ID_NAME')"
                         label-for="name-input"
-                    invalid-feedback="Name is required"
+                        :invalid-feedback="$t('ID_REQUIRED_FIELD')"
                     >
                         <b-form-input
                             id="name-input"
-                        v-model="name"
+                            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: {
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_DUE_DATE')}`,
+                    optionLabel: this.$i18n.t('ID_DUE_DATE'),
+                    detail: this.$i18n.t('ID_PLEASE_SET_A_RANGE_OF_CASES_DUE_DATE_TO_SEARCH')
                 },
-                "DueDate": {
+                LastModifiedDate: {
-                    text: "Due Date",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_LAST_MODIFIED_DATE')}`,
-                    tagText: "From: 01-01-2020 To: 01-01-2020",
+                    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')
-                        from: "",
-                        to: "",
                 },
-
+                CaseTitle: {
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_CASE_TITLE')}`,
+                    optionLabel: this.$i18n.t('ID_CASE_TITLE'),
+                    detail: ""
                 },
-                "CaseTitle": {
+                ProcessName: {
-                    text: "Case",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_PROCESS_NAME')}`,
-                    tagText: "Case: title",
+                    optionLabel: this.$i18n.t('ID_PROCESS_NAME'),
-                    default: {
+                    detail: "",
-                        name: ""
+                    placeholder: this.$i18n.t('ID_PROCESS_NAME')
-                    }
-
                 },
-                "ProcessName": {
+                CasePriority: {
-                    text: "Process",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_PRIORITY')}`,
-                    tagText: "Process: name",
+                    optionLabel: this.$i18n.t('ID_PRIORITY'),
-                    default: {
+                    detail: this.$i18n.t('ID_PLEASE_SELECT_THE_PRIORITY_FOR_THE_SEARCH'),
-                        name: ""
-                    }
-
-                },
-                "ParticipatedLevel": {
-                    text: "Participated",
-                    tagText: "Process: name",
-                    default: {
-                        name: ""
-                    }
-
-                },
-                "CasePriority": {
-                    text: "Priority",
-                    tagText: "Process: name",
-                    title: "Filter: Priority",
-                    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 = [];
@@ -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() {
+            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) {
@@ -326,8 +388,26 @@ export default {
             }
             // 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">
+                    <b-form-group
+                        :state="valueState"
+                        label-for="name-input"
+                        :invalid-feedback="$t('ID_REQUIRED_FIELD')"
+                    >
+                        <b-form-input
+                            id="name-input"
                             v-model="title"
-                    type="text"
+                            :placeholder="$t('ID_CASE_TITLE_NAME')"
-                    size="150"
+                            :state="valueState"
-                    class="form-control"
+                            required
-                    placeholder="Case Title Name"
+                        ></b-form-input>
-                />
+                    </b-form-group>
+                </form>
             </template>
         </SearchPopover>
     </div>
@@ -36,23 +45,48 @@ 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() {
+        /**
+         * Submit form handler
+         */
+        handleSubmit() {
+            let self = this;
+            // Exit when the form isn't valid
+            if (!this.checkFormValidity()) {
+                return;
+            }
+            this.$nextTick(() => {
                 this.$emit("updateSearchTag", {
-                columnSearch: "APP_TITLE",
+                    caseTitle: self.title,
-                search: this.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");
         },

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

@@ -2,36 +2,41 @@
     <div id="">
         <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>
+                <p>{{ info.detail }}</p>
+                <form ref="form" @submit.stop.prevent="handleSubmit">
                     <div class="row">
                         <div class="col">
-                          <b-form-datepicker id="from" v-model="from"  placeholder="From Due Date"></b-form-datepicker>
+                            <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-datepicker id="to" v-model="to"   placeholder="To Due Date"></b-form-datepicker>
+                            <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>
-                   
+                </form>
             </template>
         </SearchPopover>
-       
     </div>
 </template>
 
@@ -42,7 +47,7 @@ import SearchPopover from "./SearchPopover.vue";
     components: {
         SearchPopover,
     },
-        props: ['tag','info'],
+    props: ["tag", "info"],
     data() {
         return {
             from: "",
@@ -51,28 +56,32 @@ import SearchPopover from "./SearchPopover.vue";
     },
     computed: {
         tagText: function() {
-                return `From: ${this.from} To:  ${this.to}`;
+            return `${this.$i18n.t('ID_FROM')}: ${this.from} ${this.$i18n.t('ID_TO')}:  ${this.to}`;
-            },
+        }
     },
     methods: {
-            onClose() {
+        /**
-            // this.popoverShow = false;
+         * Submit form handler
-                // this.$emit("closePopover");
+         */
-            },
+        handleSubmit() {
-            onOk() {
             this.$emit("updateSearchTag", {
-                    columnSearch: "APP_TITLE",
+                dueDateFrom: this.from,
-                    search: null,
+                dueDateTo: this.to,
-                    dateFrom: this.from,
-                    dateTo: 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 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>
+                <form ref="form" @submit.stop.prevent="handleSubmit">
+                    <b-form-group
+                        :state="valueState"
+                        label-for="name"
+                        :invalid-feedback="$t('ID_PROCESS_IS_REQUIRED')"
+                    >
                         <vue-bootstrap-typeahead
                             class="mb-4"
+                            id="name"
                             v-model="query"
+                            :minMatchingChars="minMatchingChars"
                             :data="process"
                             :serializer="(item) => item.PRO_TITLE"
                             @hit="selectedUser = $event"
-                    placeholder="Search GitHub Users"
+                            :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.handleSubmit();
+        },
+        /**
+         *  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", {
-                columnSearch: "APP_TITLE",
+                    process: process.PRO_ID,
-                process_label: this.query,
+                });
-                process: _.find(this.process, { PRO_TITLE: this.query }).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,7 +1,15 @@
 <template>
     <div id="v-mycases3" ref="v-mycases2" class="v-container-mycases">
         <button-fleft :data="newCase"></button-fleft>
-    <GenericFilter />
+        <GenericFilter
+            :id="id"
+            :name="name"
+            @onJumpCase="onJumpCase"
+            @onSubmit="onSubmitFilter"
+            @onRemoveFilter="onRemoveFilter"
+            @onSearch="onSearch"
+        />
+
         <modal-new-request ref="newRequest"></modal-new-request>
 
         <v-server-table
@@ -14,7 +22,7 @@
                 <b-icon
                     icon="exclamation-circle-fill"
                     variant="primary"
-          @click="caseDetail(props)"
+                    @click="openCaseDetail(props.row)"
                 ></b-icon>
             </div>
             <div slot="case_number" slot-scope="props">
@@ -26,18 +34,29 @@
             <div slot="process_name" slot-scope="props">
                 {{ props.row.PROCESS_NAME }}
             </div>
-      <!-- <div slot="pending_taks" slot-scope="props">
+            <div slot="task" slot-scope="props">
-                <GroupedCell :data="props.row.PENDING_TASKS" />
+                <TaskCell :data="props.row.TASK" />
-            </div> -->
-      <div slot="status" slot-scope="props">{{ props.row.STATUS }}</div>
-      <div slot="start_date" slot-scope="props">
-        {{ props.row.START_DATE }}
             </div>
-      <div slot="finish_date" slot-scope="props">
+            <div slot="status" slot-scope="props">
-        {{ props.row.FINISH_DATE }}
+                {{ props.row.STATUS }}
             </div>
-      <div slot="duration" slot-scope="props">
+            <div slot="current_user" slot-scope="props">
-        {{ props.row.DURATION }}
+                {{
+                    nameFormatCases(
+                        props.row.USR_FIRSTNAME,
+                        props.row.USR_LASTNAME,
+                        props.row.USR_USERNAME
+                    )
+                }}
+            </div>
+            <div slot="due_date" slot-scope="props">
+                {{ props.row.DUE_DATE }}
+            </div>
+            <div slot="delegation_date" slot-scope="props">
+                {{ 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">
@@ -53,7 +72,9 @@
 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",
@@ -61,13 +82,15 @@ export default {
         GenericFilter,
         ButtonFleft,
         ModalNewRequest,
+        TaskCell
     },
-  props: {},
+    props: ["id", "name"],
     data() {
         return {
             metrics: [],
             filter: "CASES_INBOX",
             allView: [],
+            jsonFilters: null,
             filterHeader: "STARTED_BY_ME",
             headers: [],
             newCase: {
@@ -82,10 +105,11 @@ export default {
                 "case_number",
                 "case_title",
                 "process_name",
-        "status",
+                "task",
-        "start_date",
+                "current_user",
-        "finish_date",
+                "due_date",
-        "duration",
+                "delegation_date",
+                "priority",
                 "actions",
             ],
             tableData: [],
@@ -96,11 +120,11 @@ export default {
                     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"),
+                    task: this.$i18n.t("ID_TASK"),
-          status: this.$i18n.t("ID_CASESLIST_APP_STATUS"),
+                    current_user: this.$i18n.t("ID_CURRENT_USER"),
-          start_date: this.$i18n.t("ID_START_DATE"),
+                    due_date: this.$i18n.t("ID_DUE_DATE"),
-          finish_date: this.$i18n.t("ID_FINISH_DATE"),
+                    delegation_date: this.$i18n.t("ID_DELEGATION_DATE"),
-          duration: this.$i18n.t("ID_DURATION"),
+                    priority: this.$i18n.t("ID_PRIORITY"),
                     actions: "",
                 },
                 selectable: {
@@ -114,48 +138,12 @@ export default {
                 requestFunction(data) {
                     return this.$parent.$parent.getCasesForVueTable();
                 },
+                customFilters: ["myfilter"],
             },
-      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;
-    },
-  },
-  updated() {},
-  beforeCreate() {},
     methods: {
-    /**
-     * Get Cases Headers from BE
-     */
-    getHeaders() {
-      let that = this;
-      api.casesHeader.get().then((response) => {
-        that.headers = that.formatCasesHeaders(response.data);
-      });
-    },
         /**
          * Get cases data by header
          */
@@ -164,14 +152,13 @@ export default {
                 dt;
             return new Promise((resolutionFunc, rejectionFunc) => {
                 api.cases
-          .search({
+                    .search(that.jsonFilters)
-            type: that.filterHeader,
-          })
                     .then((response) => {
-            dt = that.formatDataResponse(response.data);
+                        dt = that.formatDataResponse(response.data.data);
+                        console.log(dt);
                         resolutionFunc({
                             data: dt,
-              count: response.total,
+                            count: response.data.total,
                         });
                     })
                     .catch((e) => {
@@ -180,7 +167,7 @@ export default {
             });
         },
         /**
-     * Format Response API TODO to grid inbox and columns
+         * Format Response API TODO to grid todo and columns
          */
         formatDataResponse(response) {
             let data = [];
@@ -189,11 +176,19 @@ export default {
                     CASE_NUMBER: v.APP_NUMBER,
                     CASE_TITLE: v.APP_TITLE,
                     PROCESS_NAME: v.PRO_TITLE,
-          STATUS: v.APP_STATUS,
+                    TASK: {
-          START_DATE: v.DEL_DELEGATE_DATE_LABEL,
+                        TITLE: v.TAS_TITLE,
-          FINISH_DATE: v.DEL_DELEGATE_DATE_LABEL,
+                        CODE_COLOR: v.TAS_COLOR,
-          PENDING_TASKS: v.PENDING_TASKS,
+                        COLOR: v.TAS_COLOR_LABEL,
-          DURATION: v.DURATION_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;
@@ -223,7 +218,9 @@ export default {
                 nameFormat = lastName + " " + name;
             } else if (this.nameFormat === "@lastName, @firstName") {
                 nameFormat = lastName + ", " + name;
-      } else if (this.nameFormat === "@lastName, @firstName (@userName)") {
+            } else if (
+                this.nameFormat === "@lastName, @firstName (@userName)"
+            ) {
                 nameFormat = lastName + ", " + name + " (" + userName + ")";
             } else {
                 nameFormat = name + " " + lastName;
@@ -281,13 +278,19 @@ export default {
             } else if (this.pmDateFormat === "Y/m/d") {
                 dateToConvert = dateFormat(stringToDate, "yyyy/mm/dd");
             } else if (this.pmDateFormat === "F j, Y, g:i a") {
-        dateToConvert = dateFormat(stringToDate, "mmmm d, yyyy, h:MM tt");
+                dateToConvert = dateFormat(
+                    stringToDate,
+                    "mmmm d, yyyy, h:MM tt"
+                );
             } else if (this.pmDateFormat === "m.d.y") {
                 dateToConvert = dateFormat(stringToDate, "mm.dd.yy");
             } else if (this.pmDateFormat === "j, n, Y") {
                 dateToConvert = dateFormat(stringToDate, "d,m,yyyy");
             } else if (this.pmDateFormat === "D M j G:i:s T Y") {
-        dateToConvert = dateFormat(stringToDate, "ddd mmm d HH:MM:ss Z yyyy");
+                dateToConvert = dateFormat(
+                    stringToDate,
+                    "ddd mmm d HH:MM:ss Z yyyy"
+                );
             } else if (this.pmDateFormat === "M d, Y") {
                 dateToConvert = dateFormat(stringToDate, "mmm dd, yyyy");
             } else if (this.pmDateFormat === "m D, Y") {
@@ -303,7 +306,10 @@ export default {
             } else if (this.pmDateFormat === "d.m.Y") {
                 dateToConvert = dateFormat(stringToDate, "mm.dd.yyyy");
             } else {
-        dateToConvert = dateFormat(stringToDate, 'dd "de" mmmm "de" yyyy');
+                dateToConvert = dateFormat(
+                    stringToDate,
+                    'dd "de" mmmm "de" yyyy'
+                );
             }
             return dateToConvert;
         },
@@ -334,50 +340,56 @@ export default {
             }
         },
         /**
-     * Format Response from HEADERS
+         * Open case detail
-     * @param {*} response
+         *
+         * @param {object} item
          */
-    formatCasesHeaders(response) {
+        openCaseDetail(item) {
-      let data = [],
+            this.$parent.dataCase = {
-        that = this,
+                APP_UID: item.APP_UID,
-        info = {
+                DEL_INDEX: item.DEL_INDEX,
-          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) => {
+            this.$parent.page = "case-detail";
-        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,
+        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);
                 });
-      });
-      return data;
         },
         /**
-     * Open case detail
+         * Handler submit filter
-     * @param {*} item
+         * @param {object} data - data returned from the server
          */
-    caseDetail(item) {},
+        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>

resources/assets/js/home/Home.vue

@@ -1,11 +1,14 @@
 <template>
-  <div id="home" :class="[{ collapsed: collapsed }, { onmobile: isOnMobile }]">
+    <div
+        id="home"
+        :class="[{ collapsed: collapsed }, { onmobile: isOnMobile }]"
+    >
         <div class="demo">
             <div class="container">
                 <router-view />
             </div>
-
             <CustomSidebar
+                :menu="menu"
                 @OnClickSidebarItem="OnClickSidebarItem"
                 @onToggleCollapse="onToggleCollapse"
             />
@@ -15,7 +18,14 @@
                 @click="collapsed = true"
             />
 
-      <component v-bind:is="page" ref="component"></component>
+            <component
+                v-bind:is="page"
+                ref="component"
+                :id="pageId"
+                :name="pageName"
+                @onSubmitFilter="onSubmitFilter"
+                @onRemoveFilter="onRemoveFilter"
+            ></component>
         </div>
     </div>
 </template>
@@ -33,6 +43,8 @@ import XCase from "./XCase";
 import TaskReassignments from "./TaskReassignments";
 import AdvancedSearch from "./AdvancedSearch";
 
+import api from "./../api/index";
+
 export default {
     name: "Home",
     components: {
@@ -52,22 +64,40 @@ export default {
     data() {
         return {
             page: "MyCases",
-      menu: [],
+            menu: null,
             dataCase: {},
             hideToggle: true,
             collapsed: false,
             selectedTheme: "",
             isOnMobile: false,
             sidebarWidth: "310px",
+            pageId: null,
+            pageName: null,
         };
     },
     mounted() {
         this.onResize();
         window.addEventListener("resize", this.onResize);
+        this.getMenu();
     },
     methods: {
+        /**
+         * Gets the menu from the server
+         */
+        getMenu() {
+            api.menu
+                .get()
+                .then((response) => {
+                    this.menu = response;
+                })
+                .catch((e) => {
+                    console.error(e);
+                });
+        },
         OnClickSidebarItem(item) {
-      this.page = item.item.id || "MyCases";
+            this.page = item.item.page || "MyCases";
+            this.pageId = item.item.id || null;
+            this.pageName = item.item.title || null;
         },
         /**
          * Update page component
@@ -96,6 +126,49 @@ export default {
         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>

resources/assets/js/home/XCase.vue

@@ -21,10 +21,18 @@ export default {
   mounted() {
     this.height = window.innerHeight - this.diffHeight;
     this.dataCase = this.$parent.dataCase;
+    if(this.dataCase.ACTION =="jump") {
+      this.path =
+        window.config.SYS_SERVER +
+        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",