Merged in feature/PMCORE-3913 (pull request #8527)

PMCORE-3913 Approved-by: Rodrigo Quelca Approved-by: Julio Cesar Laura Avendaño
2022-08-26 13:12:51 +00:00
parent 0046a7c4b0 9f365ac388
commit b58420638c
24 changed files with 1392 additions and 349 deletions
--- a/resources/assets/js/components/dataViews/vueCardView/VueCard.vue
+++ b/resources/assets/js/components/dataViews/vueCardView/VueCard.vue
@@ -1,6 +1,11 @@
 <template>
  <div class="pm-vue-card">
-    <div class="card pm-vue-card-inside" style="width: 20rem" @dblclick="dblClick">
+    <div
+      :class="item.INIT_DATE ? 'pm-case-unread' : 'pm-case-read'"
+      class="card pm-vue-card-inside"
+      style="width: 20rem"
+      @dblclick="dblClick"
+    >
      <div class="card-view-body">
        <slot> </slot>
      </div>
@@ -49,4 +54,24 @@ export default {
  min-height: 1px;
  padding: 1.25rem;
 }
+.pm-case-read {
+  border-left: 15px solid transparent;
+  border-radius: 0.25rem;
+  border-width: 1px 1px 1px 15px;
+  background-image:
+    linear-gradient(white, white),
+    linear-gradient(to bottom, #70C6F3, #0099DC);
+  background-origin: border-box;
+  background-clip: content-box, border-box;
+}
+.pm-case-unread {
+  border-left: 15px solid transparent;
+  border-radius: 0.25rem;
+  border-width: 1px 1px 1px 15px;
+  background-image: 
+    linear-gradient(white, white),
+    linear-gradient(to bottom, rgba(204,204,204,1),rgba(135,135,135,1));
+  background-origin: border-box;
+  background-clip: content-box, border-box;
+}
 </style>
--- a/resources/assets/js/components/dataViews/vueListView/VueList.vue
+++ b/resources/assets/js/components/dataViews/vueListView/VueList.vue
@@ -1,6 +1,10 @@
 <template>
  <div class="pm-vue-list">
-    <div class="card pm-vue-list-inside" @dblclick.prevent="dblClick">
+    <div
+      :class="item.INIT_DATE ? 'pm-case-unread' : 'pm-case-read'"
+      class="card pm-vue-list-inside"
+      @dblclick.prevent="dblClick"
+    >
      <div class="list-body">
        <slot> </slot>
      </div>
@@ -48,4 +52,24 @@ export default {
  min-height: 1px;
  padding: 1.25rem;
 }
+.pm-case-read {
+  border-left: 15px solid transparent;
+  border-radius: 0.25rem;
+  border-width: 1px 1px 1px 15px;
+  background-image:
+    linear-gradient(white, white),
+    linear-gradient(to bottom, #70C6F3, #0099DC);
+  background-origin: border-box;
+  background-clip: content-box, border-box;
+}
+.pm-case-unread {
+  border-left: 15px solid transparent;
+  border-radius: 0.25rem;
+  border-width: 1px 1px 1px 15px;
+  background-image:
+    linear-gradient(white, white),
+    linear-gradient(to bottom, rgba(204,204,204,1),rgba(135,135,135,1));
+  background-origin: border-box;
+  background-clip: content-box, border-box;
+}
 </style>
--- a/resources/assets/js/components/search/CasesFilter.vue
+++ b/resources/assets/js/components/search/CasesFilter.vue
@@ -32,6 +32,14 @@
                    >
                        {{ $t("ID_BY_PROCESS_NAME") }}
                    </b-form-checkbox>
+                    <b-form-checkbox
+                        id="checkbox-3"
+                        v-model="byReviewStatus"
+                        name="checkbox-3"
+                        value="reviewStatus"
+                    >
+                        {{ $t("ID_BY_REVIEW_STATUS") }}
+                    </b-form-checkbox>
                </b-form-group>
            </template>
        </SearchPopover>
@@ -97,6 +105,7 @@ import CaseNumber from "./popovers/CaseNumber.vue";
 import CaseTitle from "./popovers/CaseTitle.vue";
 import ProcessName from "./popovers/ProcessName.vue";
 import ProcessCategory from "./popovers/ProcessCategory.vue";
+import ReviewStatus from "./popovers/ReviewStatus.vue";
 import DateFilter from "./popovers/DateFilter.vue";
 import TaskTitle from "./popovers/TaskTitle.vue";
 import CurrentUser from "./popovers/CurrentUser.vue";
@@ -111,6 +120,7 @@ export default {
        CaseTitle,
        ProcessName,
        ProcessCategory,
+        ReviewStatus,
        DateFilter,
        TaskTitle,
        CurrentUser,
@@ -292,10 +302,50 @@ export default {
                    return `${params.tagPrefix}:  ${data[0].label || ""}`;
                },
            },
+            reviewStatus: {
+                type: "ReviewStatus",
+                id: "reviewStatus",
+                title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
+                    "ID_BY_REVIEW_STATUS"
+                )}`,
+                optionLabel: this.$i18n.t("ID_BY_REVIEW_STATUS"),
+                detail: "",
+                tagText: "",
+                tagPrefix: this.$i18n.t("ID_SEARCH_BY_REVIEW_STATUS"),
+                autoShow: false,
+                items: [
+                    {
+                        id: "reviewStatus",
+                        value: "",
+                        options: [
+                            this.$i18n.t("ID_READ_FILTER_OPTION"),
+                            this.$i18n.t("ID_UNREAD_FILTER_OPTION")
+                        ],
+                    }
+                ],
+                makeTagText: function(params, data) {
+                    let label = "";
+                    switch (data[0].value) {
+                        case "READ":
+                            label = this.items[0].options[0];
+                            break;
+
+                        case "UNREAD":
+                            label = this.items[0].options[1];
+                            break;
+
+                        default:
+                            label = "";
+                            break;
+                    }
+                    return `${this.tagPrefix} ${label}`;
+                },
+            },
            selected: "",
            itemModel: {},
            byProcessName: "",
            byProcessCategory: "",
+            byReviewStatus: "",
        };
    },
    computed: {
@@ -386,6 +436,23 @@ export default {
                    ]),
                ];
            }
+            if (self.byReviewStatus !== "") {
+                if (element !== undefined) {
+                    this.reviewStatus.autoShow = false;
+                } else {
+                    this.reviewStatus.autoShow = true;
+                }
+                initialFilters = [
+                    ...new Set([
+                        ...initialFilters,
+                        ...this.prepareFilterItems(
+                            this.reviewStatus.items,
+                            self.byReviewStatus,
+                            true
+                        ),
+                    ]),
+                ];
+            }
            this.$emit("onUpdateFilters", {
                params: initialFilters,
                refresh: false,
@@ -460,6 +527,16 @@ export default {
                            ? self.processCategory.autoShow
                            : true;
                }
+                if (item.fieldId === "reviewStatus") {
+                    self.searchTags.push(self.reviewStatus.id);
+                    self.byReviewStatus = self.reviewStatus.id;
+                    self.itemModel[self.reviewStatus.id] =
+                        self.reviewStatus;
+                    self.itemModel[self.reviewStatus.id].autoShow =
+                        typeof self.reviewStatus.autoShow !== "undefined"
+                            ? self.reviewStatus.autoShow
+                            : true;
+                }
            });
        },
        dataToFilter(id) {
@@ -517,6 +594,9 @@ export default {
            if (tag === "processCategory") {
                this.byProcessCategory = "";
            }
+            if (tag === "reviewStatus") {
+                this.byReviewStatus = "";
+            }
            this.$emit("onUpdateFilters", { params: temp, refresh: true });
        },
        /**
--- a/resources/assets/js/components/search/CustomFilter.vue
+++ b/resources/assets/js/components/search/CustomFilter.vue
@@ -25,6 +25,14 @@
                        name="checkbox-1"
                    >
                    </b-form-checkbox-group>
+                    <b-form-checkbox
+                        id="checkbox-review-status"
+                        v-model="byReviewStatus"
+                        name="checkbox-review"
+                        value="reviewStatus"
+                    >
+                        {{ $t("ID_BY_REVIEW_STATUS") }}
+                    </b-form-checkbox>
                </b-form-group>
            </template>
        </SearchPopover>
@@ -89,6 +97,7 @@ import CaseNumber from "./popovers/CaseNumber.vue";
 import CaseTitle from "./popovers/CaseTitle.vue";
 import ProcessName from "./popovers/ProcessName.vue";
 import ProcessCategory from "./popovers/ProcessCategory.vue";
+import ReviewStatus from "./popovers/ReviewStatus.vue";
 import DateFilter from "./popovers/DateFilter.vue";
 import TaskTitle from "./popovers/TaskTitle.vue";
 import CurrentUser from "./popovers/CurrentUser.vue";
@@ -105,6 +114,7 @@ export default {
        CaseTitle,
        ProcessName,
        ProcessCategory,
+        ReviewStatus,
        DateFilter,
        TaskTitle,
        CurrentUser,
@@ -122,9 +132,47 @@ export default {
            itemModel: {},
            byProcessName: "",
            byProcessCategory: "",
+            byReviewStatus: "",
            criteriaItemsRadio: [],
            criteriaItemsCheckbox: [],
            showProcessName: true,
+            reviewStatus: {
+                type: "ReviewStatus",
+                id: "reviewStatus",
+                title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t("ID_BY_REVIEW_STATUS")}`,
+                optionLabel: this.$i18n.t("ID_BY_REVIEW_STATUS"),
+                detail: "",
+                tagText: "",
+                tagPrefix: this.$i18n.t("ID_SEARCH_BY_REVIEW_STATUS"),
+                autoShow: false,
+                items: [
+                    {
+                        id: "reviewStatus",
+                        value: "",
+                        options: [
+                            this.$i18n.t("ID_READ_FILTER_OPTION"),
+                            this.$i18n.t("ID_UNREAD_FILTER_OPTION")
+                        ],
+                    }
+                ],
+                makeTagText: function(params, data) {
+                    let label = "";
+                    switch (data[0].value) {
+                        case "READ":
+                            label = this.items[0].options[0];
+                            break;
+
+                        case "UNREAD":
+                            label = this.items[0].options[1];
+                            break;
+
+                        default:
+                            label = "";
+                            break;
+                    }
+                    return `${this.tagPrefix} ${label}`;
+                },
+            },
        };
    },
    mounted(){},
@@ -198,6 +246,23 @@ export default {
                    initialFilters =[...new Set([...initialFilters,...this.prepareFilterItems(element, item, true)])];
                }
            });
+            if (self.byReviewStatus !== "") {
+                if (element !== undefined) {
+                    this.reviewStatus.autoShow = false;
+                } else {
+                    this.reviewStatus.autoShow = true;
+                }
+                initialFilters = [
+                    ...new Set([
+                        ...initialFilters,
+                        ...this.prepareFilterItems(
+                            this.reviewStatus.items,
+                            self.byReviewStatus,
+                            true
+                        ),
+                    ]),
+                ];
+            }
            this.$emit("onUpdateFilters", {
                params: initialFilters,
                refresh: false,
@@ -214,7 +279,7 @@ export default {
                self = this,
                filter,
                item;
-            _.forEach(element.items, function(value, key) {
+            _.forEach(element.items || element, function(value, key) {
                filter = _.find(self.filters, function(o) {
                    return o.filterVar === value.id;
                });
@@ -256,6 +321,16 @@ export default {
                            ? item.autoShow
                            : true;
                }
+                if (item.fieldId === "reviewStatus") {
+                    self.searchTags.push(self.reviewStatus.id);
+                    self.byReviewStatus = self.reviewStatus.id;
+                    self.itemModel[self.reviewStatus.id] =
+                        self.reviewStatus;
+                    self.itemModel[self.reviewStatus.id].autoShow =
+                        typeof self.reviewStatus.autoShow !== "undefined"
+                            ? self.reviewStatus.autoShow
+                            : true;
+                }
            });
        },
        /**
@@ -327,6 +402,9 @@ export default {
                this.byProcessName = "";
                this.selectedCheckbox = [];
            }
+            if (tag === "reviewStatus") {
+                this.byReviewStatus = "";
+            }
            this.$emit("onUpdateFilters", { params: temp, refresh: true });
        },
        /**
--- a/resources/assets/js/components/search/popovers/ReviewStatus.vue
+++ b/resources/assets/js/components/search/popovers/ReviewStatus.vue
@@ -0,0 +1,67 @@
+<template>
+    <div>
+        <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
+                        label-for="name"
+                        :invalid-feedback="$t('ID_PROCESS_IS_REQUIRED')"
+                    >   
+                        <b-form-radio-group
+                            v-model="selected"
+                            :options="readUnread"
+                            name="review-status-options"
+                            stacked
+                        ></b-form-radio-group>
+                    </b-form-group>
+                </form>
+            </template>
+        </SearchPopover>
+    </div>
+</template>
+
+<script>
+import SearchPopover from "./SearchPopover.vue";
+import Multiselect from "vue-multiselect";
+
+export default {
+    components: {
+        SearchPopover,
+        Multiselect,
+    },
+    props: ["tag", "info", "filter"],
+    data() {
+        return {
+            selected: "",
+            readUnread: [
+                { text: this.$i18n.t("ID_READ_FILTER_OPTION"), value: 'READ' },
+                { text: this.$i18n.t("ID_UNREAD_FILTER_OPTION"), value: 'UNREAD' }
+            ]
+        };
+    },
+    methods: {
+        /**
+         * On Ok event handler
+         */
+        onOk() {
+            this.handleSubmit();
+        },
+        /**
+         *  Form submit handler
+         */
+        handleSubmit() {
+            this.filter[0].value = this.selected;
+            this.$emit("updateSearchTag", this.filter);
+            this.$root.$emit("bv::hide::popover");
+        },
+    },
+};
+</script>
+<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
+<style scoped></style>