PMCORE-2600

resources/assets/js/api/Cases.js

@@ -12,36 +12,28 @@ export let cases = {
     todo(data) {
         return Api.get({
             service: "TODO_LIST",
-            params: {
+            params: data,
-                paged: data.paged
-            },
             keys: {}
         });
     },
     draft(data) {
         return Api.get({
             service: "DRAFT_LIST",
-            params: {
+            params: data,
-                paged: data.paged
-            },
             keys: {}
         });
     },
     paused(data) {
         return Api.get({
             service: "PAUSED_LIST",
-            params: {
+            params: data,
-                paged: data.paged
-            },
             keys: {}
         });
     },
     unassigned(data) {
         return Api.get({
             service: "UNASSIGNED_LIST",
-            params: {
+            params: data,
-                paged: data.paged
-            },
             keys: {}
         });
     },
@@ -95,7 +87,7 @@ export let cases = {
             window.config.SYS_URI +
             `appProxy/getNotesList`, params);
     },
-    pendingtask(data){
+    pendingtask(data) {
         return axios.get(window.config.SYS_SERVER +
             '/api/1.0/' +
             window.config.SYS_WORKSPACE +

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

@@ -0,0 +1,314 @@
+<template>
+  <div>
+    <SearchPopover
+      target="popover-target-1"
+      @savePopover="onOk"
+      :title="addSearchTitle"
+    >
+      <template v-slot:body>
+        <b-form-group>
+          <b-form-radio-group
+            v-model="selected"
+            :options="filterItems"
+            value-field="id"
+            text-field="optionLabel"
+            name="flavour-2a"
+            stacked
+          ></b-form-radio-group>
+        </b-form-group>
+      </template>
+    </SearchPopover>
+
+    <div class="w-75 p-1">
+      <b-input-group class="w-100 p-1">
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span
+              class="input-group-text bg-primary-pm text-white"
+              id="popover-target-1"
+              @click="searchClickHandler"
+            >
+              <b-icon icon="search"></b-icon
+            ></span>
+          </div>
+          <b-form-tags input-id="tags-pills" v-model="searchTags">
+            <template v-slot="{ tags, tagVariant, removeTag }">
+              <div class="d-inline-block" style="font-size: 1rem">
+                <b-form-tag
+                  v-for="tag in tags"
+                  @remove="customRemove(removeTag, tag)"
+                  :key="tag"
+                  :title="tag"
+                  :variant="tagVariant"
+                  class="mr-1 badge badge-light"
+                >
+                  <div :id="tag">
+                    <i class="fas fa-tags"></i>
+                    {{ tagContent(tag) }}
+                  </div>
+
+                  <component
+                    v-bind:is="tagComponent(tag)"
+                    v-bind:info="tagInfo(tag)"
+                    v-bind:tag="tag"
+                    v-bind:filter="dataToFilter(tag)"
+                    @updateSearchTag="updateSearchTag"
+                  />
+                </b-form-tag>
+              </div>
+            </template>
+          </b-form-tags>
+        </div>
+      </b-input-group>
+    </div>
+  </div>
+</template>
+
+<script>
+import SearchPopover from "./popovers/SearchPopover.vue";
+import CaseIntegerNumber from "./popovers/CaseIntegerNumber.vue";
+import CaseTitle from "./popovers/CaseTitle.vue";
+import ProcessName from "./popovers/ProcessName.vue";
+import DateFilter from "./popovers/DateFilter.vue";
+import TaskTitle from "./popovers/TaskTitle.vue";
+import api from "./../../api/index";
+
+export default {
+  name: "Cases",
+  props: ["filters"],
+  components: {
+    SearchPopover,
+    CaseIntegerNumber,
+    CaseTitle,
+    ProcessName,
+    DateFilter,
+    TaskTitle,
+  },
+  data() {
+    return {
+      searchLabel: this.$i18n.t("ID_SEARCH"),
+      addSearchTitle: this.$i18n.t("ID_ADD_SEARCH_FILTER_CRITERIA"),
+      searchTags: [],
+
+      filterItems: [
+        {
+          type: "CaseIntegerNumber",
+          id: "caseNumber",
+          title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
+            "ID_BY_CASE_NUMBER"
+          )}`,
+          optionLabel: this.$i18n.t("ID_BY_CASE_NUMBER"),
+          detail: this.$i18n.t("ID_PLEASE_SET_THE_CASE_NUMBER_TO_BE_SEARCHED"),
+          tagText: "",
+          tagPrefix: this.$i18n.t("ID_SEARCH_BY_CASE_NUMBER"),
+          items: [
+            {
+              id: "caseNumber",
+              value: "",
+            },
+          ],
+          autoShow: true,
+          makeTagText: function (params, data) {
+            return `${params.tagPrefix}: ${data[0].value}`;
+          },
+        },
+        {
+          type: "CaseTitle",
+          id: "caseTitle",
+          title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
+            "ID_BY_CASE_TITLE"
+          )}`,
+          optionLabel: this.$i18n.t("ID_BY_CASE_TITLE"),
+          tagPrefix: this.$i18n.t("ID_SEARCH_BY_CASE_TITLE"),
+          detail: "",
+          tagText: "",
+          items: [
+            {
+              id: "caseTitle",
+              value: "",
+            },
+          ],
+          autoShow: true,
+          makeTagText: function (params, data) {
+            return `${this.tagPrefix} ${data[0].value}`;
+          },
+        },
+        {
+          type: "ProcessName",
+          id: "processName",
+          title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
+            "ID_BY_PROCESS_NAME"
+          )}`,
+          optionLabel: this.$i18n.t("ID_BY_PROCESS_NAME"),
+          detail: "",
+          tagText: "",
+          tagPrefix: this.$i18n.t("ID_SEARCH_BY_PROCESS_NAME"),
+          autoShow: true,
+          items: [
+            {
+              id: "process",
+              value: "",
+              options: [],
+              placeholder: this.$i18n.t("ID_PROCESS_NAME"),
+            },
+          ],
+          makeTagText: function (params, data) {
+            return `${this.tagPrefix} ${
+              (data[0].options && data[0].options.label) || ""
+            }`;
+          },
+        },
+        {
+          type: "TaskTitle",
+          id: "taskTitle",
+          title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
+            "ID_TASK_NAME"
+          )}`,
+          optionLabel: this.$i18n.t("ID_TASK"),
+          detail: "",
+          tagText: "",
+          tagPrefix: this.$i18n.t("ID_SEARCH_BY_TASK_NAME"),
+          autoShow: true,
+          items: [
+            {
+              id: "task",
+              value: "",
+              options: [],
+              placeholder: this.$i18n.t("ID_TASK_NAME"),
+            },
+          ],
+          makeTagText: function (params, data) {
+            return `${this.tagPrefix}: ${data[0].label || ""}`;
+          },
+        },
+      ],
+      selected: "",
+      itemModel: {},
+    };
+  },
+  watch: {
+    filters: function (filters) {
+      this.searchTags = [];
+      this.selected = "";
+      this.setFilters(filters);
+    },
+  },
+  methods: {
+    /**
+     * Add filter criteria save button handler
+     */
+    onOk() {
+      let self = this,
+        element,
+        initialFilters = [],
+        item;
+      this.$root.$emit("bv::hide::popover");
+      element = _.find(this.filterItems, function (o) {
+        return o.id === self.selected;
+      });
+      if (element) {
+        _.forEach(element.items, function (value, key) {
+          item = {
+            filterVar: value.id,
+            fieldId: self.selected,
+            value: "",
+            label: "",
+            options: [],
+          };
+          initialFilters.push(item);
+        });
+      }
+      this.$emit("onUpdateFilters", { params: initialFilters, refresh: false });
+    },
+    /**
+     * Set Filters and make the tag labels
+     * @param {object} filters json to manage the query
+     */
+    setFilters(filters) {
+      let self = this;
+      _.forEach(filters, function (item, key) {
+        let component = _.find(self.filterItems, function (o) {
+          return o.id === item.fieldId;
+        });
+        if (component) {
+          self.searchTags.push(component.id);
+          self.selected = component.id;
+          self.itemModel[component.id] = component;
+        }
+      });
+    },
+    dataToFilter(id) {
+      let data = [];
+      _.forEach(this.filters, function (item) {
+        if (item.fieldId === id) {
+          data.push(item);
+        }
+      });
+      return data;
+    },
+    /**
+     *
+     */
+    tagContent(id) {
+      if (
+        this.itemModel[id] &&
+        typeof this.itemModel[id].makeTagText === "function"
+      ) {
+        return this.itemModel[id].makeTagText(
+          this.itemModel[id],
+          this.dataToFilter(id)
+        );
+      }
+      return "";
+    },
+    tagComponent(id) {
+      if (this.itemModel[id]) {
+        return this.itemModel[id].type;
+      }
+      return null;
+    },
+
+    tagInfo(id) {
+      if (this.itemModel[id]) {
+        return this.itemModel[id];
+      }
+      return null;
+    },
+    /**
+     * Remove from tag button
+     * @param {function} removeTag - default callback
+     * @param {string} tag filter identifier
+     */
+    customRemove(removeTag, tag) {
+      this.selected = "";
+      this.$emit("onUpdateFilters", { params: [], refresh: true });
+    },
+    /**
+     * Update the filter model this is fired from filter popaver save action
+     * @param {object} params - arrives the settings
+     * @param {string} tag filter identifier
+     */
+    updateSearchTag(params) {
+      let temp = this.filters.concat(params);
+      temp = [...new Set([...this.filters, ...params])];
+      this.$emit("onUpdateFilters", { params: temp, refresh: true });
+    },
+    searchClickHandler() {
+      this.$root.$emit("bv::hide::popover");
+    },
+  },
+};
+</script>
+<style scoped>
+.bv-example-row .row + .row {
+  margin-top: 1rem;
+}
+
+.bv-example-row-flex-cols .row {
+  min-height: 10rem;
+}
+
+.bg-primary-pm {
+  background-color: #0099dd;
+}
+</style>

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

@@ -20,9 +20,11 @@
             </template>
             <div>
                 <slot name="body"></slot>
+                <div class="v-popover-footer">
                     <div class="float-right">
                         <b-button @click="onClose" size="sm" variant="danger"> {{$t('ID_CANCEL')}}</b-button>
-                    <b-button @click="onSave" size="sm" variant="primary">{{$t('ID_SAVE')}}</b-button>
+                        <b-button @click="onSave" size="sm" variant="success">{{$t('ID_SAVE')}}</b-button>
+                    </div>
                 </div>
             </div>
         </b-popover>
@@ -56,4 +58,8 @@ export default {
     max-width: 650px !important; 
     min-width: 400px !important;
 }
+
+.v-popover-footer{
+    display: flow-root;
+}
 </style>

resources/assets/js/home/Draft.vue

@@ -2,7 +2,11 @@
   <div id="v-draft" ref="v-draft" class="v-container-draft">
     <button-fleft :data="newCase"></button-fleft>
     <modal-new-request ref="newRequest"></modal-new-request>
-
+    <CasesFilter
+      :filters="filters"
+      @onRemoveFilter="onRemoveFilter"
+      @onUpdateFilters="onUpdateFilters"
+    />
     <v-server-table
       :data="tableData"
       :columns="columns"
@@ -40,6 +44,7 @@
 import HeaderCounter from "../components/home/HeaderCounter.vue";
 import ButtonFleft from "../components/home/ButtonFleft.vue";
 import ModalNewRequest from "./ModalNewRequest.vue";
+import CasesFilter from "../components/search/CasesFilter";
 import TaskCell from "../components/vuetable/TaskCell.vue";
 import api from "./../api/index";
 
@@ -50,6 +55,7 @@ export default {
     ButtonFleft,
     ModalNewRequest,
     TaskCell,
+    CasesFilter,
   },
   props: {},
   data() {
@@ -71,7 +77,9 @@ export default {
         "actions",
       ],
       tableData: [],
+      filters: {},
       options: {
+        filterable: false,
         headings: {
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           case_title: this.$i18n.t("ID_CASE_TITLE"),
@@ -117,13 +125,20 @@ export default {
         dt,
         paged,
         limit = data.limit,
-        start = data.page === 1 ? 0 : limit * (data.page - 1);
+        start = data.page === 1 ? 0 : limit * (data.page - 1),
-      paged = start + ',' + limit;
+        filters = {};
+      paged = start + "," + limit;
+
+      filters = {
+        paged: paged,
+      };
+
+      _.forIn(this.filters, function (item, key) {
+        filters[item.filterVar] = item.value;
+      });
       return new Promise((resolutionFunc, rejectionFunc) => {
         api.cases
-          .draft({
+          .draft(filters)
-            paged: paged
-          })
           .then((response) => {
             dt = that.formatDataResponse(response.data.data);
             resolutionFunc({
@@ -225,11 +240,20 @@ export default {
           DEL_INDEX: item.DEL_INDEX,
           PRO_UID: item.PRO_UID,
           TAS_UID: item.TAS_UID,
-          APP_NUMBER: item.CASE_NUMBER
+          APP_NUMBER: item.CASE_NUMBER,
         });
         that.$emit("onUpdatePage", "case-detail");
       });
     },
+    onRemoveFilter(data) {},
+    onUpdateFilters(data) {
+      this.filters = data.params;
+      if (data.refresh) {
+        this.$nextTick(() => {
+          this.$refs["vueTable"].getData();
+        });
+      }
+    },
   },
 };
 </script>

resources/assets/js/home/Paused.vue

@@ -2,7 +2,11 @@
   <div id="v-paused" ref="v-paused" class="v-container-paused">
     <button-fleft :data="newCase"></button-fleft>
     <modal-new-request ref="newRequest"></modal-new-request>
-
+    <CasesFilter
+      :filters="filters"
+      @onRemoveFilter="onRemoveFilter"
+      @onUpdateFilters="onUpdateFilters"
+    />
     <v-server-table
       :data="tableData"
       :columns="columns"
@@ -61,6 +65,7 @@
 import HeaderCounter from "../components/home/HeaderCounter.vue";
 import ButtonFleft from "../components/home/ButtonFleft.vue";
 import ModalNewRequest from "./ModalNewRequest.vue";
+import CasesFilter from "../components/search/CasesFilter";
 import TaskCell from "../components/vuetable/TaskCell.vue";
 import ModalUnpauseCase from "./modal/ModalUnpauseCase.vue";
 import api from "./../api/index";
@@ -73,6 +78,7 @@ export default {
     ModalNewRequest,
     TaskCell,
     ModalUnpauseCase,
+    CasesFilter,
   },
   props: {},
   data() {
@@ -97,7 +103,9 @@ export default {
         "actions",
       ],
       tableData: [],
+      filters: {},
       options: {
+        filterable: false,
         headings: {
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           case_title: this.$i18n.t("ID_CASE_TITLE"),
@@ -146,13 +154,20 @@ export default {
         dt,
         paged,
         limit = data.limit,
-        start = data.page === 1 ? 0 : limit * (data.page - 1);
+        start = data.page === 1 ? 0 : limit * (data.page - 1),
-      paged = start + ',' + limit;
+        filters = {};
+      paged = start + "," + limit;
+
+      filters = {
+        paged: paged,
+      };
+
+      _.forIn(this.filters, function (item, key) {
+        filters[item.filterVar] = item.value;
+      });
       return new Promise((resolutionFunc, rejectionFunc) => {
         api.cases
-          .paused({
+          .paused(filters)
-            paged: paged
-          })
           .then((response) => {
             dt = that.formatDataResponse(response.data.data);
             resolutionFunc({
@@ -239,7 +254,7 @@ export default {
           DEL_INDEX: item.DEL_INDEX,
           PRO_UID: item.PRO_UID,
           TAS_UID: item.TAS_UID,
-          APP_NUMBER: item.CASE_NUMBER
+          APP_NUMBER: item.CASE_NUMBER,
         });
         that.$emit("onUpdatePage", "case-detail");
       });
@@ -248,6 +263,15 @@ export default {
       this.$refs["modal-unpause-case"].data = item;
       this.$refs["modal-unpause-case"].show();
     },
+    onRemoveFilter(data) {},
+    onUpdateFilters(data) {
+      this.filters = data.params;
+      if (data.refresh) {
+        this.$nextTick(() => {
+          this.$refs["vueTable"].getData();
+        });
+      }
+    },
   },
 };
 </script>

resources/assets/js/home/Todo.vue

@@ -2,7 +2,11 @@
   <div id="v-todo" ref="v-todo" class="v-container-todo">
     <button-fleft :data="newCase"></button-fleft>
     <modal-new-request ref="newRequest"></modal-new-request>
-
+    <CasesFilter
+      :filters="filters"
+      @onRemoveFilter="onRemoveFilter"
+      @onUpdateFilters="onUpdateFilters"
+    />
     <v-server-table
       :data="tableData"
       :columns="columns"
@@ -58,6 +62,7 @@ import HeaderCounter from "../components/home/HeaderCounter.vue";
 import ButtonFleft from "../components/home/ButtonFleft.vue";
 import ModalNewRequest from "./ModalNewRequest.vue";
 import TaskCell from "../components/vuetable/TaskCell.vue";
+import CasesFilter from "../components/search/CasesFilter";
 import api from "./../api/index";
 
 export default {
@@ -67,8 +72,8 @@ export default {
     ButtonFleft,
     ModalNewRequest,
     TaskCell,
+    CasesFilter,
   },
-  props: {},
   data() {
     return {
       newCase: {
@@ -91,7 +96,9 @@ export default {
         "actions",
       ],
       tableData: [],
+      filters: {},
       options: {
+        filterable: false,
         headings: {
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           case_title: this.$i18n.t("ID_CASE_TITLE"),
@@ -139,13 +146,20 @@ export default {
         dt,
         paged,
         limit = data.limit,
-        start = data.page === 1 ? 0 : limit * (data.page - 1);
+        start = data.page === 1 ? 0 : limit * (data.page - 1),
-      paged = start + ',' + limit;
+        filters = {};
+      paged = start + "," + limit;
+
+      filters = {
+        paged: paged,
+      };
+
+      _.forIn(this.filters, function (item, key) {
+        filters[item.filterVar] = item.value;
+      });
       return new Promise((resolutionFunc, rejectionFunc) => {
         api.cases
-          .todo({
+          .todo(filters)
-            paged: paged
-          })
           .then((response) => {
             dt = that.formatDataResponse(response.data.data);
             resolutionFunc({
@@ -247,11 +261,20 @@ export default {
           DEL_INDEX: item.DEL_INDEX,
           PRO_UID: item.PRO_UID,
           TAS_UID: item.TAS_UID,
-          APP_NUMBER: item.CASE_NUMBER
+          APP_NUMBER: item.CASE_NUMBER,
         });
         that.$emit("onUpdatePage", "case-detail");
       });
     },
+    onRemoveFilter(data) {},
+    onUpdateFilters(data) {
+      this.filters = data.params;
+      if (data.refresh) {
+        this.$nextTick(() => {
+          this.$refs["vueTable"].getData();
+        });
+      }
+    },
   },
 };
 </script>
@@ -262,4 +285,7 @@ export default {
   padding-left: 50px;
   padding-right: 50px;
 }
+.VueTables__limit {
+  display: none;
+}
 </style>

resources/assets/js/home/Unassigned.vue

@@ -2,7 +2,11 @@
   <div id="v-unassigned" ref="v-unassigned" class="v-container-unassigned">
     <button-fleft :data="newCase"></button-fleft>
     <modal-new-request ref="newRequest"></modal-new-request>
-
+    <CasesFilter
+      :filters="filters"
+      @onRemoveFilter="onRemoveFilter"
+      @onUpdateFilters="onUpdateFilters"
+    />
     <v-server-table
       :data="tableData"
       :columns="columns"
@@ -59,6 +63,7 @@ import HeaderCounter from "../components/home/HeaderCounter.vue";
 import ButtonFleft from "../components/home/ButtonFleft.vue";
 import ModalNewRequest from "./ModalNewRequest.vue";
 import TaskCell from "../components/vuetable/TaskCell.vue";
+import CasesFilter from "../components/search/CasesFilter";
 import ModalClaimCase from "./modal/ModalClaimCase.vue";
 import api from "./../api/index";
 
@@ -70,6 +75,7 @@ export default {
     ModalNewRequest,
     TaskCell,
     ModalClaimCase,
+    CasesFilter,
   },
   props: {},
   data() {
@@ -94,7 +100,9 @@ export default {
         "actions",
       ],
       tableData: [],
+      filters: {},
       options: {
+        filterable: false,
         headings: {
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           case_title: this.$i18n.t("ID_CASE_TITLE"),
@@ -143,13 +151,20 @@ export default {
         dt,
         paged,
         limit = data.limit,
-        start = data.page === 1 ? 0 : limit * (data.page - 1);
+        start = data.page === 1 ? 0 : limit * (data.page - 1),
-      paged = start + ',' + limit;
+        filters = {};
+      paged = start + "," + limit;
+
+      filters = {
+        paged: paged,
+      };
+
+      _.forIn(this.filters, function (item, key) {
+        filters[item.filterVar] = item.value;
+      });
       return new Promise((resolutionFunc, rejectionFunc) => {
         api.cases
-          .unassigned({
+          .unassigned(filters)
-            paged: paged
-          })
           .then((response) => {
             dt = that.formatDataResponse(response.data.data);
             resolutionFunc({
@@ -252,11 +267,20 @@ export default {
           DEL_INDEX: item.DEL_INDEX,
           PRO_UID: item.PRO_UID,
           TAS_UID: item.TAS_UID,
-          APP_NUMBER: item.CASE_NUMBER
+          APP_NUMBER: item.CASE_NUMBER,
         });
         that.$emit("onUpdatePage", "case-detail");
       });
     },
+    onRemoveFilter(data) {},
+    onUpdateFilters(data) {
+      this.filters = data.params;
+      if (data.refresh) {
+        this.$nextTick(() => {
+          this.$refs["vueTable"].getData();
+        });
+      }
+    },
   },
 };
 </script>