PMCORE-3519: process category in my cases

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

@@ -15,15 +15,22 @@
                         name="flavour-2a"
                         stacked
                     ></b-form-radio-group>
-        <b-form-group>
+                    <b-form-group> </b-form-group>
-        </b-form-group>
                     <b-form-checkbox
                         id="checkbox-1"
                         v-model="byProcessName"
                         name="checkbox-1"
                         value="processName"
                     >
-                {{$t('ID_BY_PROCESS_NAME') }}
+                        {{ $t("ID_BY_PROCESS_NAME") }}
+                    </b-form-checkbox>
+                    <b-form-checkbox
+                        id="checkbox-2"
+                        v-model="byProcessCategory"
+                        name="checkbox-2"
+                        value="processCategory"
+                    >
+                        {{ $t("ID_BY_PROCESS_CATEGORY") }}
                     </b-form-checkbox>
                 </b-form-group>
             </template>
@@ -62,6 +69,7 @@
                                     </div>
 
                                     <component
+                                        :filters="filters"
                                         v-bind:is="tagComponent(tag)"
                                         v-bind:info="tagInfo(tag)"
                                         v-bind:tag="tag"
@@ -83,6 +91,7 @@ import SearchPopover from "./popovers/SearchPopover.vue";
 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 DateFilter from "./popovers/DateFilter.vue";
 import TaskTitle from "./popovers/TaskTitle.vue";
 import CurrentUser from "./popovers/CurrentUser.vue";
@@ -90,15 +99,16 @@ import api from "./../../api/index";
 
 export default {
     name: "Cases",
-  props: ["filters", "title", "icon" , "hiddenItems"],
+    props: ["filters", "title", "icon", "hiddenItems"],
     components: {
         SearchPopover,
         CaseNumber,
         CaseTitle,
         ProcessName,
+        ProcessCategory,
         DateFilter,
         TaskTitle,
-    CurrentUser
+        CurrentUser,
     },
     data() {
         return {
@@ -114,7 +124,9 @@ export default {
                         "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"),
+                    detail: this.$i18n.t(
+                        "ID_PLEASE_SET_THE_CASE_NUMBER_TO_BE_SEARCHED"
+                    ),
                     tagText: "",
                     tagPrefix: this.$i18n.t("ID_SEARCH_BY_CASE_NUMBER"),
                     items: [
@@ -124,7 +136,7 @@ export default {
                         },
                     ],
                     autoShow: true,
-                makeTagText: function (params, data) {
+                    makeTagText: function(params, data) {
                         return `${params.tagPrefix}: ${data[0].value}`;
                     },
                 },
@@ -145,55 +157,63 @@ export default {
                         },
                     ],
                     autoShow: true,
-                makeTagText: function (params, data) {
+                    makeTagText: function(params, data) {
                         return `${this.tagPrefix} ${data[0].value}`;
                     },
                 },
                 {
                     type: "DateFilter",
                     id: "delegationDate",
-                title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_BY_DELEGATION_DATE')}`,
+                    title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
-                optionLabel: this.$i18n.t('ID_BY_DELEGATION_DATE'),
+                        "ID_BY_DELEGATION_DATE"
-                detail: this.$i18n.t('ID_PLEASE_SELECT_THE_DELEGATION_DATE_TO_BE_SEARCHED'),
+                    )}`,
+                    optionLabel: this.$i18n.t("ID_BY_DELEGATION_DATE"),
+                    detail: this.$i18n.t(
+                        "ID_PLEASE_SELECT_THE_DELEGATION_DATE_TO_BE_SEARCHED"
+                    ),
                     tagText: "",
-                tagPrefix:  this.$i18n.t('ID_SEARCH_BY_DELEGATION_DATE'),
+                    tagPrefix: this.$i18n.t("ID_SEARCH_BY_DELEGATION_DATE"),
-                items:[
+                    items: [
                         {
                             id: "delegateFrom",
                             value: "",
-                        label: this.$i18n.t('ID_FROM_DELEGATION_DATE')
+                            label: this.$i18n.t("ID_FROM_DELEGATION_DATE"),
                         },
                         {
                             id: "delegateTo",
                             value: "",
-                        label: this.$i18n.t('ID_TO_DELEGATION_DATE')
+                            label: this.$i18n.t("ID_TO_DELEGATION_DATE"),
-                    }
+                        },
                     ],
-                makeTagText: function (params, data) {
+                    makeTagText: function(params, data) {
                         return `${params.tagPrefix} ${data[0].value} - ${data[1].value}`;
-                }
+                    },
                 },
                 {
                     type: "CurrentUser",
                     id: "bySendBy",
-                title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_BY_SEND_BY')}`,
+                    title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
-                optionLabel: this.$i18n.t('ID_BY_SEND_BY'),
+                        "ID_BY_SEND_BY"
-                detail: this.$i18n.t('ID_PLEASE_SELECT_USER_NAME_TO_BE_SEARCHED'),
+                    )}`,
-                placeholder: this.$i18n.t('ID_USER_NAME'),
+                    optionLabel: this.$i18n.t("ID_BY_SEND_BY"),
+                    detail: this.$i18n.t(
+                        "ID_PLEASE_SELECT_USER_NAME_TO_BE_SEARCHED"
+                    ),
+                    placeholder: this.$i18n.t("ID_USER_NAME"),
                     tagText: "",
-                tagPrefix:  this.$i18n.t('ID_SEARCH_BY_SEND_BY'),
+                    tagPrefix: this.$i18n.t("ID_SEARCH_BY_SEND_BY"),
                     autoShow: true,
-                items:[
+                    items: [
                         {
                             id: "sendBy",
                             value: "",
                             options: [],
-                        placeholder: this.$i18n.t('ID_USER_NAME')
+                            placeholder: this.$i18n.t("ID_USER_NAME"),
-                    }
+                        },
                     ],
-                makeTagText: function (params, data) {
+                    makeTagText: function(params, data) {
-                    return  `${params.tagPrefix} : ${data[0].label || ''}`;
+                        return `${params.tagPrefix} : ${data[0].label || ""}`;
-                }
+                    },
                 },
                 {
                     type: "TaskTitle",
@@ -214,7 +234,7 @@ export default {
                             placeholder: this.$i18n.t("ID_TASK_NAME"),
                         },
                     ],
-                makeTagText: function (params, data) {
+                    makeTagText: function(params, data) {
                         return `${this.tagPrefix}: ${data[0].label || ""}`;
                     },
                 },
@@ -222,37 +242,65 @@ export default {
             processName: {
                 type: "ProcessName",
                 id: "processName",
-                title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_BY_PROCESS_NAME')}`,
+                title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
-                optionLabel: this.$i18n.t('ID_BY_PROCESS_NAME'),
+                    "ID_BY_PROCESS_NAME"
+                )}`,
+                optionLabel: this.$i18n.t("ID_BY_PROCESS_NAME"),
                 detail: "",
                 tagText: "",
-                tagPrefix:  this.$i18n.t('ID_SEARCH_BY_PROCESS_NAME'),
+                tagPrefix: this.$i18n.t("ID_SEARCH_BY_PROCESS_NAME"),
                 autoShow: true,
-                items:[
+                items: [
                     {
                         id: "process",
                         value: "",
                         options: [],
-                        placeholder: this.$i18n.t('ID_PROCESS_NAME')
+                        placeholder: this.$i18n.t("ID_PROCESS_NAME"),
-                    }
+                    },
                 ],
-                makeTagText: function (params, data) {
+                makeTagText: function(params, data) {
-                    return  `${this.tagPrefix} ${data[0].options && data[0].options.label || ''}`;
+                    return `${this.tagPrefix} ${(data[0].options &&
-                }
+                        data[0].options.label) ||
+                        ""}`;
+                },
+            },
+            processCategory: {
+                type: "ProcessCategory",
+                id: "processCategory",
+                title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
+                    "ID_BY_PROCESS_CATEGORY"
+                )}`,
+                optionLabel: this.$i18n.t("ID_BY_PROCESS_CATEGORY"),
+                detail: "",
+                tagText: "",
+                tagPrefix: this.$i18n.t("ID_SEARCH_BY_PROCESS_CATEGORY"),
+                autoShow: true,
+                items: [
+                    {
+                        id: "category",
+                        value: "",
+                        options: [],
+                        placeholder: "",
+                    },
+                ],
+                makeTagText: function(params, data) {
+                    return `${params.tagPrefix}:  ${data[0].label || ""}`;
+                },
             },
             selected: "",
             itemModel: {},
-        byProcessName: ""
+            byProcessName: "",
+            byProcessCategory: "",
         };
     },
     computed: {
         // a computed getter
-    criteriaItems: function () {
+        criteriaItems: function() {
             let found,
                 criteria = [];
             if (this.hiddenItems && this.hiddenItems.length) {
-          this.filterItems.forEach(item =>  {
+                this.filterItems.forEach((item) => {
-              found = this.hiddenItems.find( elem  => elem !== item.id);
+                    found = this.hiddenItems.find((elem) => elem !== item.id);
                     if (found) {
                         criteria.push(item);
                     }
@@ -261,10 +309,9 @@ export default {
             } else {
                 return this.filterItems;
             }
-    }
         },
-  mounted() {
     },
+    mounted() {},
     watch: {
         filters: {
             immediate: true,
@@ -276,8 +323,8 @@ export default {
                     this.setFilters(newVal, oldVal);
                     this.searchClickHandler();
                 }
-        }
+            },
-    }
+        },
     },
     methods: {
         /**
@@ -289,11 +336,15 @@ export default {
                 initialFilters = [],
                 item;
             this.$root.$emit("bv::hide::popover");
-        element = _.find(this.filterItems, function (o) {
+            element = _.find(this.filterItems, function(o) {
                 return o.id === self.selected;
             });
             if (element) {
-            initialFilters = this.prepareFilterItems(element.items, this.selected, true);
+                initialFilters = this.prepareFilterItems(
+                    element.items,
+                    this.selected,
+                    true
+                );
             }
             //adding process name filter
             if (self.byProcessName !== "") {
@@ -302,9 +353,38 @@ export default {
                 } else {
                     this.processName.autoShow = true;
                 }
-            initialFilters =[...new Set([...initialFilters,...this.prepareFilterItems(this.processName.items, self.byProcessName, true)])];
+                initialFilters = [
+                    ...new Set([
+                        ...initialFilters,
+                        ...this.prepareFilterItems(
+                            this.processName.items,
+                            self.byProcessName,
+                            true
+                        ),
+                    ]),
+                ];
             }
-        this.$emit("onUpdateFilters", {params: initialFilters, refresh: false}); 
+            if (self.byProcessCategory !== "") {
+                if (element !== undefined) {
+                    this.processCategory.autoShow = false;
+                } else {
+                    this.processCategory.autoShow = true;
+                }
+                initialFilters = [
+                    ...new Set([
+                        ...initialFilters,
+                        ...this.prepareFilterItems(
+                            this.processCategory.items,
+                            self.byProcessCategory,
+                            true
+                        ),
+                    ]),
+                ];
+            }
+            this.$emit("onUpdateFilters", {
+                params: initialFilters,
+                refresh: false,
+            });
         },
         /**
          * Prepare the filter items
@@ -312,23 +392,25 @@ export default {
          * @param {id} string
          * @param {boolean} restore
          */
-    prepareFilterItems(items, id, restore){
+        prepareFilterItems(items, id, restore) {
             let initialFilters = [],
                 self = this,
                 filter,
                 item;
             _.forEach(items, function(value, key) {
-            filter = _.find(self.filters, function(o) { return o.filterVar === value.id; });
+                filter = _.find(self.filters, function(o) {
+                    return o.filterVar === value.id;
+                });
                 if (filter && restore) {
                     initialFilters.push(filter);
                 } else {
                     item = {
                         filterVar: value.id,
                         fieldId: id,
-                    value:  '',
+                        value: "",
                         label: "",
                         options: [],
-                    autoShow: true
+                        autoShow: true,
                     };
                     initialFilters.push(item);
                 }
@@ -341,27 +423,43 @@ export default {
          */
         setFilters(filters, oldVal) {
             let self = this;
-      _.forEach(filters, function (item, key) {
+            _.forEach(filters, function(item, key) {
-        let component = _.find(self.filterItems, function (o) {
+                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;
-            self.itemModel[component.id].autoShow = typeof item.autoShow !== "undefined" ? item.autoShow : true;
+                    self.itemModel[component.id].autoShow =
+                        typeof item.autoShow !== "undefined"
+                            ? item.autoShow
+                            : true;
                 }
-        if(item.fieldId === "processName") {
+                if (item.fieldId === "processName") {
                     self.searchTags.push(self.processName.id);
                     self.byProcessName = self.processName.id;
                     self.itemModel[self.processName.id] = self.processName;
-            self.itemModel[self.processName.id].autoShow = typeof item.autoShow !== "undefined" ? item.autoShow : self.processName.autoShow;
+                    self.itemModel[self.processName.id].autoShow =
+                        typeof item.autoShow !== "undefined"
+                            ? item.autoShow
+                            : self.processName.autoShow;
+                }
+                if (item.fieldId === "processCategory") {
+                    self.searchTags.push(self.processCategory.id);
+                    self.byProcessCategory = self.processCategory.id;
+                    self.itemModel[self.processCategory.id] =
+                        self.processCategory;
+                    self.itemModel[self.processCategory.id].autoShow =
+                        typeof self.processCategory.autoShow !== "undefined"
+                            ? self.processCategory.autoShow
+                            : true;
                 }
             });
         },
         dataToFilter(id) {
             let data = [];
-      _.forEach(this.filters, function (item) {
+            _.forEach(this.filters, function(item) {
                 if (item.fieldId === id) {
                     data.push(item);
                 }
@@ -404,14 +502,17 @@ export default {
         customRemove(removeTag, tag) {
             let temp = [];
             _.forEach(this.filters, function(item, key) {
-            if(item.fieldId !== tag) { 
+                if (item.fieldId !== tag) {
                     temp.push(item);
                 }
             });
             if (tag === "processName") {
                 this.byProcessName = "";
             }
-        this.$emit("onUpdateFilters", {params: temp, refresh: true});
+            if (tag === "processCategory") {
+                this.byProcessCategory = "";
+            }
+            this.$emit("onUpdateFilters", { params: temp, refresh: true });
         },
         /**
          * Update the filter model this is fired from filter popaver save action
@@ -451,7 +552,7 @@ export default {
     line-height: 40px;
 }
 .pm-in-text-icon {
-  font-size: 1.40rem;
+    font-size: 1.4rem;
     padding-right: 10px;
     line-height: 40px;
 }

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

@@ -6,6 +6,7 @@
             :title="addSearchTitle"
         >
             <template v-slot:body>
+
                 <b-form-group>
                     <b-form-radio-group
                         v-model="selected"
@@ -24,6 +25,15 @@
                 >
                     {{$t('ID_BY_PROCESS_NAME') }}
                 </b-form-checkbox>
+                <b-form-checkbox
+                    id="checkbox-2"
+                    v-model="byProcessCategory"
+                    name="checkbox-2"
+                    value="processCategory"
+                >
+                    {{$t('ID_BY_PROCESS_CATEGORY') }}
+                </b-form-checkbox>
+  
             </template>
         </SearchPopover>
 
@@ -61,6 +71,7 @@
                   </div>
 
                   <component
+                    :filters="filters"
                     v-bind:is="tagComponent(tag)"
                     v-bind:info="tagInfo(tag)"
                     v-bind:tag="tag"
@@ -82,6 +93,7 @@ import SearchPopover from "./popovers/SearchPopover.vue";
 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 DateFilter from "./popovers/DateFilter.vue";
 import TaskTitle from "./popovers/TaskTitle.vue";
 import api from "./../../api/index";
@@ -94,6 +106,7 @@ export default {
         CaseNumber,
         CaseTitle,
         ProcessName,
+        ProcessCategory,
         DateFilter,
         TaskTitle
     },
@@ -235,9 +248,31 @@ export default {
                     return  `${this.tagPrefix} ${data[0].options && data[0].options.label || ''}`;
                 }
             },
+            processCategory:{
+                type: "ProcessCategory",
+                id: "processCategory",
+                title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_BY_PROCESS_CATEGORY')}`,
+                optionLabel: this.$i18n.t('ID_BY_PROCESS_CATEGORY'),
+                detail: "",
+                tagText: "",
+                tagPrefix:  this.$i18n.t('ID_SEARCH_BY_PROCESS_CATEGORY'),
+                autoShow: true,
+                items:[
+                    {
+                        id: "category",
+                        value: "",
+                        options: [],
+                        placeholder: ""
+                    }
+                ],
+                makeTagText: function (params, data) {
+                    return  `${params.tagPrefix}:  ${data[0].label || ''}`;
+                }
+            },
             selected: "",
             itemModel: {},
-            byProcessName: ""
+            byProcessName: "",
+            byProcessCategory: "",
         };
     },
     mounted() {
@@ -284,6 +319,15 @@ export default {
                 }
                 initialFilters =[...new Set([...initialFilters,...this.prepareFilterItems(this.processName.items, self.byProcessName, true)])];
             }
+            //adding process name filter
+            if (self.byProcessCategory !== "") {
+                if (element !== undefined) {
+                    this.processCategory.autoShow = false;
+                } else {
+                    this.processCategory.autoShow = true;
+                }
+                initialFilters =[...new Set([...initialFilters,...this.prepareFilterItems(this.processCategory.items, self.byProcessCategory, true)])];
+            }
             this.$emit("onUpdateFilters", {params: initialFilters, refresh: false}); 
         },
         /**
@@ -334,6 +378,12 @@ export default {
                     self.itemModel[self.processName.id] = self.processName;
                     self.itemModel[self.processName.id].autoShow = typeof self.processName.autoShow !== "undefined" ? self.processName.autoShow  : true;
                 }
+                if(item.fieldId === "processCategory") {
+                    self.searchTags.push(self.processCategory.id);
+                    self.byProcessCategory = self.processCategory.id;
+                    self.itemModel[self.processCategory.id] = self.processCategory;
+                    self.itemModel[self.processCategory.id].autoShow = typeof self.processCategory.autoShow !== "undefined" ? self.processCategory.autoShow  : true;
+                }
             });
         },
         dataToFilter(id) {
@@ -382,6 +432,9 @@ export default {
             if (tag === "processName") {
                 this.byProcessName = "";
             }
+            if (tag === "processCategory") {
+                this.byProcessCategory = "";
+            }
             this.$emit("onUpdateFilters", {params: temp, refresh: true});
         },
         /**

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

@@ -38,6 +38,7 @@
 import SearchPopover from "./SearchPopover.vue";
 import Multiselect from "vue-multiselect";
 import api from "./../../../api/index";
+import _ from "lodash";
 
 export default {
     components: {
@@ -57,11 +58,16 @@ export default {
          * @param {string} query - string from the text field
          */
         asyncFind(query) {
-            let self = this;
+            let self = this,
+                cat = this.verifyCategory(),
+                params = { text: query };
             this.isLoading = true;
+            if (cat) {
+                params.category = cat;
+            }
             self.processes = [];
             api.filters
-                .processList(query)
+                .processListPaged(params)
                 .then((response) => {
                     self.processes = [];
                     _.forEach(response.data, function(elem, key) {
@@ -76,6 +82,13 @@ export default {
                     console.error(err);
                 });
         },
+        verifyCategory() {
+            let cat = _.find(
+                this.$attrs.filters,
+                (o) => o.fieldId == "processCategory"
+            );
+            return cat ? cat.value : null;
+        },
         /**
          * Form validations review
          */

resources/assets/js/home/AdvancedSearch/AdvancedSearch.vue

@@ -52,6 +52,9 @@
             <div slot="process_name" slot-scope="props">
                 {{ props.row.PROCESS_NAME }}
             </div>
+            <div slot="process_category" slot-scope="props">
+                {{ props.row.PROCESS_CATEGORY }}
+            </div>
             <div slot="task" slot-scope="props">
                 <TaskCell :data="props.row.TASK" />
             </div>
@@ -143,6 +146,7 @@ export default {
             columns: [
                 "case_number",
                 "process_name",
+                "process_category",
                 "status",
                 "thread_title",
                 "task",
@@ -158,6 +162,7 @@ export default {
                 headings: {
                     case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
                     process_name: this.$i18n.t("ID_PROCESS_NAME"),
+                    process_category: this.$i18n.t("ID_PROCESS_CATEGORY"),
                     status: this.$i18n.t("ID_STATUS"),
                     thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
                     task: this.$i18n.t("ID_TASK"),
@@ -296,6 +301,7 @@ export default {
                     CASE_NUMBER: v.APP_NUMBER,
                     THREAD_TITLE: v.THREAD_TITLES,
                     PROCESS_NAME: v.PRO_TITLE,
+                    PROCESS_CATEGORY: v.CATEGORY,
                     TASK: this.formatTasks(v.THREAD_TASKS),
                     USER_DATA: this.formatUser(v.THREAD_USERS),
                     START_DATE: v.APP_CREATE_DATE_LABEL,

resources/assets/js/home/Draft/Draft.vue

@@ -54,6 +54,9 @@
       <div slot="process_name" slot-scope="props">
         {{ props.row.PROCESS_NAME }}
       </div>
+      <div slot="process_category" slot-scope="props">
+        {{ props.row.PROCESS_CATEGORY }}
+      </div>
       <div slot="task" slot-scope="props">
         <TaskCell :data="props.row.TASK" />
       </div>
@@ -104,6 +107,14 @@
           >{{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
+      <div slot="process_category" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["PROCESS_CATEGORY"] }}
+        </span>
+      </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
         <span class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
@@ -178,6 +189,14 @@
           >{{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
+      <div slot="process_category" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["PROCESS_CATEGORY"] }}
+        </span>
+      </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
         <span class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
@@ -296,6 +315,7 @@ export default {
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
           process_name: this.$i18n.t("ID_PROCESS_NAME"),
+          process_category: this.$i18n.t("ID_PROCESS_CATEGORY"),
           task: this.$i18n.t("ID_TASK"),
           priority: this.$i18n.t("ID_PRIORITY"),
           actions: ""
@@ -523,6 +543,7 @@ export default {
           CASE_NUMBER: v.APP_NUMBER,
           THREAD_TITLE: v.DEL_TITLE,
           PROCESS_NAME: v.PRO_TITLE,
+          PROCESS_CATEGORY: v.CATEGORY,
           TASK: [{
             TITLE: v.TAS_TITLE,
             CODE_COLOR: v.TAS_COLOR,

resources/assets/js/home/Draft/defaultMixins.js

@@ -54,6 +54,7 @@ export default {
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
           process_name: this.$i18n.t("ID_PROCESS_NAME"),
+          process_category: this.$i18n.t("ID_PROCESS_CATEGORY"),
           task: this.$i18n.t("ID_TASK"),
           current_user: this.$i18n.t("ID_CURRENT_USER"),
           due_date: this.$i18n.t("ID_DUE_DATE"),

resources/assets/js/home/Inbox/Inbox.vue

@@ -49,7 +49,9 @@
       <div slot="process_name" slot-scope="props">
         {{ props.row.PROCESS_NAME }}
       </div>
-
+      <div slot="process_category" slot-scope="props">
+        {{ props.row.PROCESS_CATEGORY }}
+      </div>
       <div slot="task" slot-scope="props">
         <TaskCell :data="props.row.TASK" />
       </div>
@@ -117,6 +119,14 @@
           >{{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
+      <div slot="process_category" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["PROCESS_CATEGORY"] }}
+        </span>
+      </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
         <span class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
@@ -203,6 +213,14 @@
           >{{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
+      <div slot="process_category" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["PROCESS_CATEGORY"] }}
+        </span>
+      </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
         <span class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
@@ -343,6 +361,7 @@ export default {
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
           process_name: this.$i18n.t("ID_PROCESS_NAME"),
+          process_category: this.$i18n.t("ID_PROCESS_CATEGORY"),
           task: this.$i18n.t("ID_TASK"),
           send_by: this.$i18n.t("ID_SEND_BY"),
           due_date: this.$i18n.t("ID_DUE_DATE"),
@@ -574,6 +593,7 @@ export default {
           CASE_NUMBER: v.APP_NUMBER,
           THREAD_TITLE: v.DEL_TITLE,
           PROCESS_NAME: v.PRO_TITLE,
+          PROCESS_CATEGORY: v.CATEGORY,
           TASK: [
             {
               TITLE: v.TAS_TITLE,

resources/assets/js/home/Inbox/defaultMixins.js

@@ -54,6 +54,7 @@ export default {
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
           process_name: this.$i18n.t("ID_PROCESS_NAME"),
+          process_category: this.$i18n.t("ID_PROCESS_CATEGORY"),
           task: this.$i18n.t("ID_TASK"),
           send_by: this.$i18n.t("ID_SEND_BY"),
           current_user: this.$i18n.t("ID_CURRENT_USER"),
@@ -65,6 +66,7 @@ export default {
           "case_number",
           "thread_title",
           "process_name",
+          "process_category",
           "due_date",
           "delegation_date",
           "priority",

resources/assets/js/home/MyCases/MyCases.vue

@@ -50,6 +50,9 @@
             <div slot="process_name" slot-scope="props">
                 {{ props.row.PROCESS_NAME }}
             </div>
+            <div slot="process_category" slot-scope="props">
+                {{ props.row.PROCESS_CATEGORY }}
+            </div>
             <div slot="pending_taks" slot-scope="props">
                 <GroupedCell :data="props.row.PENDING_TASKS" />
             </div>
@@ -161,6 +164,7 @@ export default {
                 headings: {
                     case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
                     process_name: this.$i18n.t("ID_PROCESS_NAME"),
+                    process_category: this.$i18n.t("ID_PROCESS_CATEGORY"),
                     thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
                     pending_taks: this.$i18n.t("ID_PENDING_TASKS"),
                     status: this.$i18n.t("ID_CASESLIST_APP_STATUS"),
@@ -454,6 +458,8 @@ export default {
                     CASE_NUMBER: v.APP_NUMBER,
                     THREAD_TITLE: v.THREAD_TITLES,
                     PROCESS_NAME: v.PRO_TITLE,
+                    PROCESS_NAME: v.PRO_TITLE,
+                    PROCESS_CATEGORY: v.CATEGORY,
                     STATUS: v.APP_STATUS,
                     START_DATE: v.APP_CREATE_DATE_LABEL || "",
                     FINISH_DATE: v.APP_FINISH_DATE_LABEL || "",

resources/assets/js/home/MyCases/defaultMixins.js

@@ -1,8 +1,12 @@
+import _ from "lodash";
 import api from "../../api/index";
 export default {
     data() {
         return {
-            random: 1
+            random: 1,
+            defaultColumnsDisabled: [
+                "process_category"
+            ]
         };
     },
     methods: {

resources/assets/js/home/Paused/Paused.vue

@@ -48,6 +48,9 @@
       <div slot="process_name" slot-scope="props">
         {{ props.row.PROCESS_NAME }}
       </div>
+      <div slot="process_category" slot-scope="props">
+        {{ props.row.PROCESS_CATEGORY }}
+      </div>
       <div slot="task" slot-scope="props">
         <TaskCell :data="props.row.TASK" />
       </div>
@@ -115,6 +118,14 @@
           >{{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
+      <div slot="process_category" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["PROCESS_CATEGORY"] }}
+        </span>
+      </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
         <span class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
@@ -201,6 +212,14 @@
           >{{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
+      <div slot="process_category" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["PROCESS_CATEGORY"] }}
+        </span>
+      </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
         <span class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
@@ -342,6 +361,7 @@ export default {
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
           process_name: this.$i18n.t("ID_PROCESS_NAME"),
+          process_category: this.$i18n.t("ID_PROCESS_CATEGORY"),
           task: this.$i18n.t("ID_TASK"),
           send_by: this.$i18n.t("ID_SEND_BY"),
           due_date: this.$i18n.t("ID_DUE_DATE"),
@@ -572,6 +592,7 @@ export default {
           CASE_NUMBER: v.APP_NUMBER,
           THREAD_TITLE: v.DEL_TITLE,
           PROCESS_NAME: v.PRO_TITLE,
+          PROCESS_CATEGORY: v.CATEGORY,          
           TASK: [{
             TITLE: v.TAS_TITLE,
             CODE_COLOR: v.TAS_COLOR,

resources/assets/js/home/Paused/defaultMixins.js

@@ -53,6 +53,7 @@ export default {
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
           process_name: this.$i18n.t("ID_PROCESS_NAME"),
+          process_category: this.$i18n.t("ID_PROCESS_CATEGORY"),
           task: this.$i18n.t("ID_TASK"),
           send_by: this.$i18n.t("ID_SEND_BY"),
           current_user: this.$i18n.t("ID_CURRENT_USER"),
@@ -64,6 +65,7 @@ export default {
           "case_number",
           "thread_title",
           "process_name",
+          "process_category",
           "due_date",
           "delegation_date",
           "priority",

resources/assets/js/home/Unassigned/Unassigned.vue

@@ -46,6 +46,9 @@
       <div slot="process_name" slot-scope="props">
         {{ props.row.PROCESS_NAME }}
       </div>
+      <div slot="process_category" slot-scope="props">
+        {{ props.row.PROCESS_CATEGORY }}
+      </div>
       <div slot="task" slot-scope="props">
         <TaskCell :data="props.row.TASK" />
       </div>
@@ -110,6 +113,14 @@
           >{{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
+      <div slot="process_category" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["PROCESS_CATEGORY"] }}
+        </span>
+      </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
         <span class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
@@ -196,6 +207,14 @@
           >{{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
+      <div slot="process_category" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["PROCESS_CATEGORY"] }}
+        </span>
+      </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
         <span class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
@@ -334,6 +353,7 @@ export default {
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
           process_name: this.$i18n.t("ID_PROCESS_NAME"),
+          process_category: this.$i18n.t("ID_PROCESS_CATEGORY"),
           task: this.$i18n.t("ID_TASK"),
           send_by: this.$i18n.t("ID_SEND_BY"),
           due_date: this.$i18n.t("ID_DUE_DATE"),
@@ -535,6 +555,7 @@ export default {
           CASE_NUMBER: v.APP_NUMBER,
           THREAD_TITLE: v.DEL_TITLE,
           PROCESS_NAME: v.PRO_TITLE,
+          PROCESS_CATEGORY: v.CATEGORY,
           TASK: [{
             TITLE: v.TAS_TITLE,
             CODE_COLOR: v.TAS_COLOR,

resources/assets/js/home/Unassigned/defaultMixins.js

@@ -53,6 +53,7 @@ export default {
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
           process_name: this.$i18n.t("ID_PROCESS_NAME"),
+          process_category: this.$i18n.t("ID_PROCESS_CATEGORY"),
           task: this.$i18n.t("ID_TASK"),
           send_by: this.$i18n.t("ID_SEND_BY"),
           current_user: this.$i18n.t("ID_CURRENT_USER"),
@@ -64,6 +65,7 @@ export default {
           "case_number",
           "thread_title",
           "process_name",
+          "process_category",
           "due_date",
           "delegation_date",
           "priority",