diff --git a/resources/assets/js/api/Menu.js b/resources/assets/js/api/Menu.js index 1ffcd2b0a..aa1a1be45 100644 --- a/resources/assets/js/api/Menu.js +++ b/resources/assets/js/api/Menu.js @@ -42,5 +42,21 @@ export let menu = { "Accept-Language": window.config.SYS_LANG } }); + }, + /** + * Get the highlight + * @returns + */ + getHighlight() { + return axios.get( + window.config.SYS_SERVER_API + + '/api/1.0/' + + window.config.SYS_WORKSPACE + + '/home/tasks/highlight', { + headers: { + 'Authorization': 'Bearer ' + window.config.SYS_CREDENTIALS.accessToken, + "Accept-Language": window.config.SYS_LANG + } + }); } }; diff --git a/resources/assets/js/components/menu/CustomSidebarMenuItem.vue b/resources/assets/js/components/menu/CustomSidebarMenuItem.vue index 4a937b359..340ee1b45 100644 --- a/resources/assets/js/components/menu/CustomSidebarMenuItem.vue +++ b/resources/assets/js/components/menu/CustomSidebarMenuItem.vue @@ -37,8 +37,12 @@ isMobileItem " > + - + { + var i; + for (i = 0; i < data.length; i += 1) { + if (that.item.id && that.item.id === data[i].id) { + that.$refs.tooltip.setHighlight() + } + } + }); + }, /** * Match the route to ensure the correct location * @param {string} href diff --git a/resources/assets/js/components/utils/CustomTooltip.vue b/resources/assets/js/components/utils/CustomTooltip.vue index 15fd13efd..f89a47794 100644 --- a/resources/assets/js/components/utils/CustomTooltip.vue +++ b/resources/assets/js/components/utils/CustomTooltip.vue @@ -2,7 +2,9 @@ {{ data.title }} @@ -17,21 +19,20 @@ import api from "./../../api/index"; export default { name: "CustomTooltip", props: { - data: Object, + data: Object }, data() { return { labelTooltip: "", + hovering: "", + show: false, menuMap: { CASES_INBOX: "inbox", CASES_DRAFT: "draft", CASES_PAUSED: "paused", - CASES_SELFSERVICE: "unassigned", - todo: "inbox", - draft: "draft", - paused: "paused", - unassigned: "unassigned", + CASES_SELFSERVICE: "unassigned" }, + isHighlight: false }; }, methods: { @@ -39,7 +40,7 @@ export default { * Delay the hover event */ hoverHandler() { - this.setTooltip(); + this.hovering = setTimeout(() => { this.setTooltip() }, 3000); }, /** * Reset the delay and hide the tooltip @@ -48,6 +49,7 @@ export default { let key = `tooltip-${this.data.page}`; this.labelTooltip = ""; this.$refs[key].$emit("close"); + clearTimeout(this.hovering); }, /** * Set the label to show in the tooltip @@ -58,8 +60,20 @@ export default { let key = `tooltip-${that.data.page}`; that.labelTooltip = response.data.label; that.$refs[key].$emit("open"); + that.isHighlight = false; }); }, + /** + * Set bold the label + */ + setHighlight() { + this.isHighlight = true; + } }, }; + diff --git a/resources/assets/js/home/CustomCaseList/CustomCaseList.vue b/resources/assets/js/home/CustomCaseList/CustomCaseList.vue new file mode 100644 index 000000000..d4f7016c8 --- /dev/null +++ b/resources/assets/js/home/CustomCaseList/CustomCaseList.vue @@ -0,0 +1,969 @@ + + + + diff --git a/resources/assets/js/home/CustomCaseList/defaultMixins.js b/resources/assets/js/home/CustomCaseList/defaultMixins.js new file mode 100644 index 000000000..09e50d06f --- /dev/null +++ b/resources/assets/js/home/CustomCaseList/defaultMixins.js @@ -0,0 +1,198 @@ +import _ from "lodash"; +import api from "../../api/index"; +export default { + data() { + let that = this; + return { + typeView: "GRID", + random: 1, + dataCasesList: [], + defaultColumns: [ + "case_number", + "case_title", + "process_name", + "task", + "send_by", + "due_date", + "delegation_date", + "priority", + ], + dataMultiviewHeader: { + actions: [ + { + id: "view-grid", + title: "Grid", + onClick(action) { + that.typeView = "GRID"; + }, + icon: "fas fa-table", + }, + { + id: "view-list", + title: "List", + onClick(action) { + that.typeView = "LIST"; + }, + icon: "fas fa-list", + }, + { + id: "view-card", + title: "Card", + onClick(action) { + that.typeView = "CARD"; + }, + icon: "fas fa-th", + }, + ], + }, + optionsVueView: { + limit: 10, + dblClick: (event, item, options) => { + this.openCase(item); + }, + headings: { + case_number: this.$i18n.t("ID_MYCASE_NUMBER"), + case_title: this.$i18n.t("ID_CASE_TITLE"), + process_name: this.$i18n.t("ID_PROCESS_NAME"), + task: this.$i18n.t("ID_TASK"), + send_by: this.$i18n.t("ID_SEND_BY"), + current_user: this.$i18n.t("ID_CURRENT_USER"), + due_date: this.$i18n.t("ID_DUE_DATE"), + delegation_date: this.$i18n.t("ID_DELEGATION_DATE"), + priority: this.$i18n.t("ID_PRIORITY") + }, + columns: [], + requestFunction(data) { + return that.getCases(data); + }, + requestFunctionViewMore(data) { + return that.getCasesViewMore(data); + } + } + } + }, + created: function () { + + }, + methods: { + /** + * Get cases for Vue Card View + */ + getCases(data) { + let that = this, + dt, + start = 0, + limit = data.limit, + filters = {}; + filters = { + paged: "0," + limit, + }; + + _.forIn(this.filters, function (item, key) { + filters[item.filterVar] = item.value; + }); + return new Promise((resolutionFunc, rejectionFunc) => { + api.cases + .todo(filters) + .then((response) => { + dt = that.formatDataResponse(response.data.data); + resolutionFunc({ + data: dt, + count: response.data.total, + }); + }) + .catch((e) => { + rejectionFunc(e); + }); + }); + }, + /** + * Get cases for Vue Card View + */ + getCasesViewMore(data) { + let that = this, + dt, + paged, + limit = data.limit, + start = data.page === 1 ? 0 : limit * (data.page - 1), + filters = {}; + paged = start + "," + limit; + + filters = { + paged: paged, + }; + _.forIn(this.filters, function (item, key) { + if (filters && item.value) { + filters[item.filterVar] = item.value; + } + }); + return new Promise((resolutionFunc, rejectionFunc) => { + api.cases + .todo(filters) + .then((response) => { + dt = that.formatDataResponse(response.data.data); + resolutionFunc({ + data: dt, + count: response.data.total, + }); + }) + .catch((e) => { + rejectionFunc(e); + }); + }); + }, + /** + * Event handler when update the settings columns + * @param {*} columns + */ + onUpdateColumnSettings(columns) { + this.columns = this.getTableColumns(columns); + this.random = _.random(0, 10000000000); + }, + /** + * Get columns for origin , settings or custom cases list + */ + getColumnsFromSource() { + let dt = _.clone(this.dataCasesList), + res = _.clone(this.defaultColumns); + if (!this.data.customListId) { + res = _.map(_.filter(dt, o => o.set), s => s.field); + } + return res; + }, + /** + * Return the columns for table - concat with field "detail" "actions" + */ + getTableColumns(columns) { + return _.concat(["detail"], columns, ["actions"]); + }, + /** + * Return options for Table + * @returns Object + */ + getTableOptions() { + let dt = _.clone(this.options); + dt.headings = _.pick(this.headings, this.columns); + return dt; + }, + /** + * Return options for Table + * @returns Object + */ + getVueViewOptions() { + let dt = _.clone(this.optionsVueView); + dt.columns = this.cardColumns; + return dt; + }, + /** + * Format column settings for popover + * @param {*} headings + * @returns + */ + formatColumnSettings(columns) { + return _.map(_.pick(this.headings, columns), (value, key) => { + return { value, key } + }); + } + } +} \ No newline at end of file diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue index 24d792b50..8c3614b50 100644 --- a/resources/assets/js/home/Home.vue +++ b/resources/assets/js/home/Home.vue @@ -118,7 +118,7 @@ export default { this.getUserSettings(); this.listenerIframe(); window.setInterval( - this.setCounter, + this.getHighlight, parseInt(window.config.FORMATS.casesListRefreshTime) * 1000 ); // adding eventBus listener @@ -159,7 +159,7 @@ export default { .then((response) => { this.setDefaultCasesMenu(response.data); this.menu = this.mappingMenu(this.setDefaultIcon(response.data)); - this.setCounter(); + this.getHighlight(); }) .catch((e) => { console.error(e); @@ -281,6 +281,7 @@ export default { ); data[i]["sortable"] = data[i].customCasesList.length > 1; data[i]["sortIcon"] = "gear-fill"; + data[i]['highlight'] = false; data[i] = { component: CustomSidebarMenuItem, props: { @@ -492,6 +493,29 @@ export default { onUpdateFilters(filters) { this.filters = filters; }, + getHighlight() { + let that = this; + if (that.menu.length > 0) { + api.menu + .getHighlight() + .then((response) => { + var i, + dataHighlight = []; + for (i = 0; i < response.data.length; i += 1) { + if (response.data[i].highlight) { + dataHighlight.push({ + id: that.menuMap[response.data[i].item], + highlight: response.data[i].highlight + }); + } + } + eventBus.$emit('highlight', dataHighlight); + }) + .catch((e) => { + console.error(e); + }); + } + } } };