PMCORE-3300: Custom cases list: Enable Search Filter does not work

fix code style

change service method

fix CR notes

migrate GET to POST

fix card view

resources/assets/js/api/Custom.js

@@ -0,0 +1,58 @@
+import axios from "axios";
+import ApiInstance from "./Api.js";
+import Services from "./Services";
+let Api = new ApiInstance( Services );
+
+export let custom = {
+    inbox(data) {
+        let service = "INBOX_CUSTOM_LIST",
+            keys = {},
+            params;
+        keys["id"] =  data.id,
+        params = data.filters;
+        return Api.post({
+            service,
+            data: params,
+            keys
+        });
+    },
+    draft(data) {
+        let service = "INBOX_CUSTOM_LIST",
+            keys = {},
+            params;
+        service = "DRAFT_CUSTOM_LIST";
+        keys["id"] =  data.id;
+        params = data.filters;
+        return Api.post({
+            service,
+            data: params,
+            keys
+        });
+    },
+    paused(data) {
+        let service = "INBOX_CUSTOM_LIST",
+            keys = {},
+            params;
+        service = "PAUSED_CUSTOM_LIST";
+        keys["id"] =  data.id;
+        params = data.filters;
+        return Api.post({
+            service,
+            data: params,
+            keys
+        });
+    },
+    unassigned(data) {
+        let service = "INBOX_CUSTOM_LIST",
+            keys = {},
+            params;
+        service = "UNASSIGNED_CUSTOM_LIST";
+        keys["id"] =  data.id;
+        params = data.filters;
+        return Api.post({
+            service,
+            data: params,
+            keys
+        });
+    }
+};

resources/assets/js/api/index.js

@@ -5,7 +5,7 @@ import { config } from "./Config";
 import { caseNotes } from "./CaseNotes";
 import { process } from "./Process";
 import { filters } from "./Filters";
-
+import { custom } from "./Custom";
 
 export default {
     menu,
@@ -14,5 +14,6 @@ export default {
     process,
     caseNotes,
     filters,
-    config
+    config,
+    custom
 };

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

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

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

@@ -0,0 +1,84 @@
+<template>
+    <div id="">
+        <SearchPopover
+            :target="tag"
+            @savePopover="onOk"
+            :title="info.title"
+            :autoShow="info.autoShow || false"
+        >
+        
+            <template v-slot:body>
+                <p>{{ info.detail }}</p>
+                <form ref="form" @submit.stop.prevent="handleSubmit">
+                    <b-form-group
+                        :state="valueState"
+                        label-for="name-input"
+                        :invalid-feedback="$t('ID_REQUIRED_FIELD')"
+                    >
+                        <b-form-input
+                            id="name-input"
+                            v-model="filter[0].value"
+                            :placeholder="info.placeholder"
+                            :state="valueState"
+                            required
+                        ></b-form-input>
+                    </b-form-group>
+                </form>
+            </template>
+        </SearchPopover>
+    </div>
+</template>
+|
+<script>
+import SearchPopover from "./SearchPopover.vue";
+
+export default {
+    components: {
+        SearchPopover,
+    },
+    props: ["tag", "info", "filter"],
+    data() {
+        return {
+            title: "",
+            valueState: null,
+        };
+    },
+    methods: {
+        /**
+         * Check the form validations and requiered fields
+         */
+        checkFormValidity() {
+            const valid = this.$refs.form.checkValidity();
+            this.valueState = valid;
+            return valid;
+        },
+        /**
+         * Submit form handler
+         */
+        handleSubmit() {
+            let self = this;
+            // Exit when the form isn't valid
+            if (!this.checkFormValidity()) {
+                return;
+            }
+            this.$nextTick(() => {
+                this.$emit("updateSearchTag", this.filter);
+                self.$root.$emit("bv::hide::popover");
+            });
+        },
+        /**
+         * On ok event handler
+         */
+        onOk() {
+            this.handleSubmit();
+        },
+        /**
+         * On ok event handler
+         */
+        onClickTag(tag) {
+            this.$root.$emit("bv::hide::popover");
+        },
+    },
+};
+</script>
+<style scoped></style>

resources/assets/js/home/CustomCaseList/defaultMixins.js

@@ -83,17 +83,34 @@ export default {
         dt,
         typeList = that.data.pageParent == "inbox"? "todo": that.data.pageParent,
         start = 0,
+        paged,
         limit = data.limit,
-        filters = {};
+        filters = {},
+        id = this.data.customListId;
       filters = {
-        paged: "0," + limit,
+          paged: paged,
+          limit: limit,
+          offset: start,
       };
-
-      _.forIn(this.filters, function (item, key) {
-        filters[item.filterVar] = item.value;
-      });
+      if (_.isEmpty(that.filters) && this.data.settings) {
+          _.forIn(this.data.settings.filters, function(item, key) {
+              if (filters && item.value) {
+                  filters[item.filterVar] = item.value;
+              }
+          });
+      } else {
+          _.forIn(this.filters, function(item, key) {
+              if (filters && item.value) {
+                  filters[item.filterVar] = item.value;
+              }
+          });
+      }
       return new Promise((resolutionFunc, rejectionFunc) => {
-        api.cases[typeList](filters)
+          api.custom[that.data.pageParent]
+            ({
+                id,
+                filters,
+            })
           .then((response) => {
             dt = that.formatDataResponse(response.data.data);
             resolutionFunc({