fernando/luos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
PMCORE-3224

Approved-by: Henry Jonathan Quispe Quispe
Approved-by: Julio Cesar Laura Avendaño
This commit is contained in:
Rodrigo Quelca
2021-08-20 14:26:02 +00:00
committed by Julio Cesar Laura Avendaño
parent ad9f7b7259 9f00e42dcc
commit d728f563b7
7 changed files with 150 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
resources/assets/js/components/menu/CustomSidebarMenuItem.vue
View File

@@ -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) {
this.$emit("set-mobile-item", { item: this.item, itemEl });
if (this.$parent.mobileItem !== this.item) {
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);
},

2
resources/assets/js/components/search/CasesFilter.vue
View File

@@ -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);
}
}

48
resources/assets/js/components/utils/CustomTooltip.vue
View File

@@ -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
:target="data.id"
triggers="hoverHandler"
:show.sync="show"
>
{{ labelTooltip }}
</b-tooltip>
<b-tooltip :target="`label-${data.id}`" :ref="`tooltip-${data.id}`">
{{ 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;
clearTimeout(this.hovering);
this.$refs[key].$emit("close");
},
/**
* Set the label to show in the tooltip
*/
setTooltip() {
let that = this;
api.menu
.getTooltip(that.menuMap[that.data.id])
.then((response) => {
that.labelTooltip = response.data.label;
that.show = true;
});
api.menu.getTooltip(that.data.id).then((response) => {
let key = `tooltip-${that.data.id}`;
that.labelTooltip = response.data.label;
that.$refs[key].$emit("open");
});
},
}
}
},
};
</script>

4
resources/assets/js/home/EventBus/eventBus.js Normal file
View File

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

104
resources/assets/js/home/Home.vue
View File

@@ -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) {
this.config = response.data;
} else {
if(response.data && response.data.status === 404) {
this.createUserSettings();
} else if (response.data) {
this.config = response.data;
}
})
.catch((e) => {
@@ -181,10 +187,7 @@ export default {
*/
createUserSettings() {
api.config
.post({
...this.configParams,
...{setting: '{}'}
})
.post(this.config)
.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
&& this.$refs["component"]
if (this.page === this.lastPage
&& this.$refs["component"]
&& this.$refs["component"].updateView) {
this.$refs["component"].updateView();
}

4
resources/assets/js/home/Inbox/Todo.vue → resources/assets/js/home/Inbox/Inbox.vue
View File

@@ -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,

13
workflow/engine/src/ProcessMaker/Services/Api/Home.php
View File

@@ -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'],
"badge" => [
"text" => "0",
"class" => "badge-custom"
]
"icon" => $value['iconList']
];
}
}