Merged in feature/PMCORE-3224 (pull request #8051)

PMCORE-3224

Approved-by: Henry Jonathan Quispe Quispe
Approved-by: Julio Cesar Laura Avendaño

resources/assets/js/components/menu/CustomSidebarMenuItem.vue

@@ -6,7 +6,11 @@
             :class="item.class"
             v-bind="item.attributes"
         >
-            {{ item.title }} <b-icon icon="pie-chart-fill"></b-icon>
+            {{ item.title }}
+            <b-icon
+                :icon="item.icon || ''"
+                @click="item.onClick(item) || function() {}"
+            ></b-icon>
         </div>
         <div
             v-else-if="!isItemHidden"
@@ -50,7 +54,6 @@
                             isMobileItem
                     "
                 >
-                    <sidebar-menu-badge v-if="item.badge" :badge="item.badge" />
                     <div
                         v-if="itemHasChild"
                         class="vsm--arrow"
@@ -141,7 +144,7 @@
 
                 <template #modal-footer="{ cancel }">
                     <b-button size="sm" variant="danger" @click="cancel()">
-                        Cancel
+                        {{ $t("ID_CLOSE") }}
                     </b-button>
                 </template>
             </b-modal>
@@ -154,6 +157,7 @@ import draggable from "vuedraggable";
 import CustomSidebarMenuLink from "./CustomSidebarMenuLink";
 import CustomSidebarMenuIcon from "./CustomSidebarMenuIcon";
 import CustomTooltip from "./../utils/CustomTooltip.vue";
+import eventBus from "./../../home/EventBus/eventBus";
 
 export default {
     name: "CustomSidebarMenuItem",
@@ -203,7 +207,7 @@ export default {
         draggable,
         CustomSidebarMenuLink,
         CustomSidebarMenuIcon,
-        CustomTooltip
+        CustomTooltip,
     },
     data() {
         return {
@@ -213,7 +217,7 @@ export default {
             itemHover: false,
             exactActive: false,
             active: false,
-            titleHover: '',
+            titleHover: "",
         };
     },
     computed: {
@@ -257,7 +261,18 @@ export default {
             return !!(this.item.child && this.item.child.length > 0);
         },
         isItemHidden() {
-            return false;
+            if (this.isCollapsed) {
+                if (
+                    this.item.hidden &&
+                    this.item.hiddenOnCollapse === undefined
+                ) {
+                    return true;
+                } else {
+                    return this.item.hiddenOnCollapse === true;
+                }
+            } else {
+                return this.item.hidden === true;
+            }
         },
     },
     watch: {
@@ -362,7 +377,7 @@ export default {
             );
         },
         /**
-         * Ensurre if the link exact is active 
+         * Ensurre if the link exact is active
          * @param {object} item
          * @return {boolean}
          */
@@ -374,7 +389,6 @@ export default {
          */
         initState() {
             this.initActiveState();
-            this.initShowState();
         },
         /**
          * Initalize the active state of the menu item
@@ -384,7 +398,7 @@ export default {
             this.exactActive = this.isLinkExactActive(this.item);
         },
         /**
-         * Initialize and show active state menu item 
+         * Initialize and show active state menu item
          */
         initShowState() {
             if (!this.itemHasChild || this.showChild) return;
@@ -404,9 +418,11 @@ export default {
         checkMove: function(e) {
             let aux = this.item.child.splice(e.newIndex, 1);
             this.item.child.splice(e.newIndex, 0, aux[0]);
+            this.emitItemUpdate(this.item, this.item);
+            eventBus.$emit("sort-menu", this.item.child);
         },
         /**
-         * Click event Handler 
+         * Click event Handler
          * @param {object} event
          */
         clickEvent(event) {
@@ -476,13 +492,16 @@ export default {
             if (this.hover) return;
             if (!this.isCollapsed || !this.isFirstLevel || this.isMobileItem)
                 return;
-            this.$emit("unset-mobile-item", true);
+            this.$parent.$emit("unset-mobile-item", true);
             setTimeout(() => {
-                if (this.mobileItem !== this.item) {
+                if (this.$parent.mobileItem !== this.item) {
-                    this.$emit("set-mobile-item", { item: this.item, itemEl });
+                    this.$parent.$emit("set-mobile-item", {
+                        item: this.item,
+                        itemEl,
+                    });
                 }
                 if (event.type === "click" && !this.itemHasChild) {
-                    this.$emit("unset-mobile-item", false);
+                    this.$parent.$emit("unset-mobile-item", false);
                 }
             }, 0);
         },

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

@@ -286,7 +286,7 @@ export default {
             self.selected.push(component.id);
             self.itemModel[component.id] = component;
             self.itemModel[component.id].autoShow = typeof item.autoShow !== "undefined" ? item.autoShow : true;
-            if (!oldVal.length) {
+            if (oldVal && !oldVal.length) {
                 self.updateSearchTag(item);
             }
         }

resources/assets/js/components/utils/CustomTooltip.vue

@@ -1,21 +1,14 @@
 <template>
     <span
-        :id="data.id"
+        :id="`label-${data.id}`"
         @mouseover="hoverHandler"
-        v-b-tooltip.hover
         :title="labelTooltip"
-        @mouseleave="unhoverHandler"
     >
         {{ data.title }}
-    <b-tooltip
+        <b-tooltip :target="`label-${data.id}`" :ref="`tooltip-${data.id}`">
-        :target="data.id"
+            {{ labelTooltip }}
-        triggers="hoverHandler"
+        </b-tooltip>
-        :show.sync="show"
-    >
-        {{ labelTooltip }}
-    </b-tooltip>
     </span>
-    
 </template>
 
 <script>
@@ -29,43 +22,44 @@ export default {
     data() {
         return {
             labelTooltip: "",
-            hovering: "",
-            show: false,
             menuMap: {
                 CASES_INBOX: "inbox",
                 CASES_DRAFT: "draft",
                 CASES_PAUSED: "paused",
-                CASES_SELFSERVICE: "unassigned"
+                CASES_SELFSERVICE: "unassigned",
-            }
+                todo: "inbox",
-        }
+                draft: "draft",
+                paused: "paused",
+                unassigned: "unassigned",
+            },
+        };
     },
     methods: {
         /**
          * Delay the hover event
          */
         hoverHandler() {
-            this.hovering = setTimeout(() => { this.setTooltip() }, 3000);
+            this.setTooltip();
         },
         /**
          * Reset the delay and hide the tooltip
          */
         unhoverHandler() {
+            let key = `tooltip-${this.data.id}`;
             this.labelTooltip = "";
-            this.show = false;
+            this.$refs[key].$emit("close");
-            clearTimeout(this.hovering);
         },
         /**
          * Set the label to show in the tooltip
          */
         setTooltip() {
             let that = this;
-            api.menu
+            api.menu.getTooltip(that.data.id).then((response) => {
-                .getTooltip(that.menuMap[that.data.id])
+                let key = `tooltip-${that.data.id}`;
-                .then((response) => {
+                that.labelTooltip = response.data.label;
-                    that.labelTooltip = response.data.label;
+                that.$refs[key].$emit("open");
-                    that.show = true;
+            });
-                });
         },
-    }
+    },
-}
+};
 </script>

resources/assets/js/home/EventBus/eventBus.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+const eventBus = new Vue()
+
+export default eventBus

resources/assets/js/home/Home.vue

@@ -26,7 +26,7 @@
                 :defaultOption="defaultOption"
                 :settings="config.setting[page]"
                 :filters="filters"
-                @onSubmitFilter="onSubmitFilter"    
+                @onSubmitFilter="onSubmitFilter"
                 @onRemoveFilter="onRemoveFilter"
                 @onUpdatePage="onUpdatePage"
                 @onUpdateDataCase="onUpdateDataCase"
@@ -34,15 +34,16 @@
                 @onUpdateFilters="onUpdateFilters"
                 @cleanDefaultOption="cleanDefaultOption"
                 @updateUserSettings="updateUserSettings"
-            ></component>   
+            ></component>
         </div>
     </div>
 </template>
 <script>
 import CustomSidebar from "./../components/menu/CustomSidebar";
+import CustomSidebarMenuItem from "./../components/menu/CustomSidebarMenuItem";
 import MyCases from "./MyCases/MyCases.vue";
 import MyDocuments from "./MyDocuments";
-import Todo from "./Inbox/Todo.vue";
+import Inbox from "./Inbox/Inbox.vue";
 import Paused from "./Paused/Paused.vue";
 import Draft from "./Draft/Draft.vue";
 import Unassigned from "./Unassigned/Unassigned.vue";
@@ -54,7 +55,7 @@ import AdvancedSearch from "./AdvancedSearch/AdvancedSearch.vue";
 import LegacyFrame from "./LegacyFrame";
 
 import api from "./../api/index";
-
+import eventBus from './EventBus/eventBus'
 export default {
     name: "Home",
     components: {
@@ -65,7 +66,7 @@ export default {
         BatchRouting,
         TaskReassignments,
         XCase,
-        Todo,
+        Inbox,
         Draft,
         Paused,
         Unassigned,
@@ -89,14 +90,14 @@ export default {
             filters: null,
             config: {
                 id: window.config.userId || "1",
-                name: "home",
+                name: "userConfig",
                 setting: {}
             },
             menuMap: {
                 CASES_MY_CASES: "MyCases",
                 CASES_SENT: "MyCases",
                 CASES_SEARCH: "advanced-search",
-                CASES_INBOX: "todo",
+                CASES_INBOX: "inbox",
                 CASES_DRAFT: "draft",
                 CASES_PAUSED: "paused",
                 CASES_SELFSERVICE: "unassigned",
@@ -108,6 +109,7 @@ export default {
         };
     },
     mounted() {
+        let that = this;
         this.onResize();
         this.getMenu();
         this.getUserSettings();
@@ -116,6 +118,10 @@ export default {
             this.setCounter,
             parseInt(window.config.FORMATS.casesListRefreshTime) * 1000
         );
+        // adding eventBus listener
+         eventBus.$on('sort-menu', (data) => {
+            that.updateUserSettings('customCasesList', data);
+        });
     },
     methods: {
         /**
@@ -132,7 +138,7 @@ export default {
 
             eventer(messageEvent, function(e) {
                 if ( e.data === "redirect=todo" || e.message === "redirect=todo"){
-                    that.page = "todo";
+                    that.page = "inbox";
                 }
                 if ( e.data === "update=debugger" || e.message === "update=debugger"){
                     if(that.$refs["component"].updateView){
@@ -166,10 +172,10 @@ export default {
                     name: this.config.name
                 })
                 .then((response) => {
-                    if (response.data) {
+                    if(response.data && response.data.status === 404) {
-                        this.config = response.data;
-                    } else {
                         this.createUserSettings();
+                    } else if (response.data) {
+                        this.config = response.data;
                     }
                 })
                 .catch((e) => {
@@ -181,10 +187,7 @@ export default {
          */
         createUserSettings() {
             api.config
-                .post({
+                .post(this.config)
-                    ...this.configParams,
-                    ...{setting: '{}'}
-                })
                 .then((response) => {
                     if (response.data) {
                         this.config = response.data;
@@ -246,9 +249,76 @@ export default {
                 } else if (newData[i].href) {
                     newData[i].id  = "LegacyFrame";
                 }
+                // Tasks group need pie chart icon
+                if (data[i].header && data[i].id === "FOLDERS") {
+                    data[i] = {
+                        component: CustomSidebarMenuItem,
+                        props: {
+                            isCollapsed: this.collapsed? true: false,
+                            item: {
+                                header: data[i].header,
+                                title: data[i].title,
+                                hiddenOnCollapse: data[i].hiddenOnCollapse,
+                                icon: 'pie-chart-fill',
+                                onClick: function (item) {
+                                    // TODO click evet handler
+                                }
+                            }
+                        }
+                    }
+                }
+                if (data[i].id === "inbox" || data[i].id === "draft"
+                || data[i].id === "paused" || data[i].id === "unassigned")  {
+                    data[i]["child"] = this.sortCustomCasesList(data[i].customCasesList, this.config.setting[this.page] && this.config.setting[this.page].customCasesList ? this.config.setting[this.page].customCasesList: [])
+                    data[i]["sortable"] = data[i].customCasesList.length > 1;
+                    data[i]["sortIcon"] = "gear-fill";
+                    data[i] = {
+                        component: CustomSidebarMenuItem,
+                        props: {
+                            isCollapsed: this.collapsed? true: false,
+                            item: data[i]
+                        }
+                    };
+                }
             }
             return newData;
         },
+        /**
+         * Sort the custom case list menu items
+         * @param {array} list
+         * @param {array} ref
+         * @returns {array}
+         */
+        sortCustomCasesList(list, ref) {
+            let item,
+                newList = [],
+                temp = [];
+            if (ref && ref.length) {
+                ref.forEach(function (menu) {
+                    item = list.find(x => x.id === menu.id);
+                    if (item) {
+                        newList.push(item);
+                    }
+                })
+            } else {
+                return list;
+            }
+            temp = list.filter(this.comparerById(newList));
+            return  [...newList, ...temp];
+
+        },
+        /**
+         * Util to compare an array by id
+         * @param {array} otherArray
+         * @returns {object}
+         */
+        comparerById(otherArray){
+            return function(current){
+                return otherArray.filter(function(other){
+                    return other.id == current.id
+                }).length == 0;
+            }
+        },
         /**
          * Set a default icon if the item doesn't have one
          */
@@ -280,8 +350,8 @@ export default {
                 this.pageId = null;
                 this.pageUri = item.item.href;
                 this.page = item.item.id || "MyCases";
-                if (this.page === this.lastPage 
+                if (this.page === this.lastPage
-                    && this.$refs["component"] 
+                    && this.$refs["component"]
                     && this.$refs["component"].updateView) {
                     this.$refs["component"].updateView();
                 }

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

@@ -6,7 +6,7 @@
     <ModalReassignCase ref="modal-reassign-case"></ModalReassignCase>
     <CasesFilter
       :filters="filters"
-      :title="$t('ID_CASES_STATUS_TO_DO')"
+      :title="$t('ID_INBOX')"
       :icon="icon"
       @onRemoveFilter="onRemoveFilter"
       @onUpdateFilters="onUpdateFilters"
@@ -231,7 +231,7 @@ import { Event } from 'vue-tables-2';
 import CurrentUserCell from "../../components/vuetable/CurrentUserCell.vue";
 
 export default {
-  name: "Todo",
+  name: "Inbox",
   mixins: [defaultMixins],
   components: {
     HeaderCounter,

workflow/engine/src/ProcessMaker/Services/Api/Home.php

@@ -574,6 +574,7 @@ class Home extends Api
                 $option->header = true;
                 $option->title = $menuInstance->Labels[$i];
                 $option->hiddenOnCollapse = true;
+                $option->id = $menuInstance->Id[$i];
             } else {
                 $option->href = $menuInstance->Options[$i];
                 $option->id = $menuInstance->Id[$i];
@@ -581,12 +582,6 @@ class Home extends Api
                 $option->icon = $menuInstance->Icons[$i];
             }
 
-            // Add additional attributes for some options
-            if (in_array($menuInstance->Id[$i], $optionsWithCounter)) {
-                $option->badge = new stdClass();
-                $option->badge->text = '0';
-                $option->badge->class = 'badge-custom';
-            }
             if ($menuInstance->Id[$i] === 'CASES_SEARCH') {
                 // Get advanced search filters for the current user
                 $filters = Filter::getByUser($this->getUserId());
@@ -626,11 +621,7 @@ class Home extends Api
                         "id" => $value['id'],
                         "title" => $value['name'],
                         "description" => $value['description'],
-                        "icon" => $value['iconList'],
+                        "icon" => $value['iconList']
-                        "badge" => [
-                            "text" => "0",
-                            "class" => "badge-custom"
-                        ]
                     ];
                 }
             }