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

update

Browse Source
This commit is contained in:
Henry Jordan
2021-08-30 14:17:43 +00:00
parent 058136c23d aa7729d3e7
commit 4f61dc1724
11 changed files with 1251 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
resources/assets/js/api/Cases.js
View File

@@ -18,25 +18,56 @@ export let cases = {
keys: {}
});
},
draft(data) {
inbox(data) {
let service = "INBOX_LIST",
keys = {};
if (data && data.id) {
service = "INBOX_CUSTOM_LIST";
keys["id"] = data.id;
}
return Api.get({
service: "DRAFT_LIST",
service,
params: data.filters,
keys
});
},
draft(data) {
let service = "DRAFT_LIST",
keys = {};
if (data && data.id) {
service = "DRAFT_CUSTOM_LIST";
keys["id"] = data.id;
}
return Api.get({
service,
params: data,
keys: {}
keys
});
},
paused(data) {
let service = "PAUSED_LIST",
keys = {};
if (data && data.id) {
service = "PAUSED_CUSTOM_LIST";
keys["id"] = data.id;
}
return Api.get({
service: "PAUSED_LIST",
service,
params: data,
keys: {}
keys
});
},
unassigned(data) {
let service = "UNASSIGNED_LIST",
keys = {};
if (data && data.id) {
service = "UNASSIGNED_CUSTOM_LIST";
keys["id"] = data.id;
}
return Api.get({
service: "UNASSIGNED_LIST",
service,
params: data,
keys: {}
keys
});
},
summary(data) {

6
resources/assets/js/api/Services.js
View File

@@ -76,5 +76,9 @@
GET_CONFIG: "/home/config/{id}/{name}",
PAUSE_CASE: "/cases/{app_uid}/pause",
REASSIGN_CASE: "/cases/{app_uid}/reassign-case",
REASSIGN_USERS: "/light/userstoreassign/{task_uid}"
REASSIGN_USERS: "/light/userstoreassign/{task_uid}",
INBOX_CUSTOM_LIST: "/home/inbox/{id}",
DRAFT_CUSTOM_LIST: "/home/draft/{id}",
PAUSED_CUSTOM_LIST: "/home/paused/{id}",
UNASSIGNED_CUSTOM_LIST: "/home/unassigned/{id}"
};

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

@@ -1,6 +1,6 @@
<template>
<span
:id="`label-${data.id}`"
:id="`label-${data.page}`"
@mouseover="hoverHandler"
v-b-tooltip.hover
@mouseleave="unhoverHandler"
@@ -8,9 +8,9 @@
>
{{ data.title }}
<b-tooltip
:target="`label-${data.id}`"
:target="`label-${data.page}`"
triggers="hoverHandler"
:ref="`tooltip-${data.id}`"
:ref="`tooltip-${data.page}`"
>
{{ labelTooltip }}
</b-tooltip>
@@ -50,7 +50,7 @@ export default {
* Reset the delay and hide the tooltip
*/
unhoverHandler() {
let key = `tooltip-${this.data.id}`;
let key = `tooltip-${this.data.page}`;
this.labelTooltip = "";
this.$refs[key].$emit("close");
clearTimeout(this.hovering);
@@ -60,8 +60,8 @@ export default {
*/
setTooltip() {
let that = this;
api.menu.getTooltip(that.data.id).then((response) => {
let key = `tooltip-${that.data.id}`;
api.menu.getTooltip(that.data.page).then((response) => {
let key = `tooltip-${that.data.page}`;
that.labelTooltip = response.data.label;
that.$refs[key].$emit("open");
that.isHighlight = false;

7
resources/assets/js/components/vuetable/SettingsPopover.vue
View File

@@ -40,7 +40,7 @@
<b-form-group>
<b-form-checkbox-group
v-model="localSelected"
:options="results"
:options="options"
value-field="key"
text-field="value"
name="flavour-2a"
@@ -80,6 +80,11 @@ export default {
this.results = this.options;
this.localSelected = this.selected || [];
},
watch: {
selected: function (newSelection, oldSelection) {
this.localSelected = newSelection;
}
},
methods: {
/**
* Close buton click handler

969
resources/assets/js/home/CustomCaseList/CustomCaseList.vue Normal file
View File

@@ -0,0 +1,969 @@
<template>
<div id="v-todo" ref="v-todo" class="v-container-todo">
<button-fleft :data="newCase"></button-fleft>
<modal-new-request ref="newRequest"></modal-new-request>
<ModalPauseCase ref="modal-pause-case"></ModalPauseCase>
<ModalReassignCase ref="modal-reassign-case"></ModalReassignCase>
<CasesFilter
:filters="filters"
:title="data.pageName"
:icon="data.pageIcon"
@onRemoveFilter="onRemoveFilter"
@onUpdateFilters="onUpdateFilters"
/>
<multiview-header
:data="dataMultiviewHeader"
:dataSubtitle="dataSubtitle"
/>
<settings-popover
:options="settingOptions"
target="pm-dr-column-settings2"
@onUpdateColumnSettings="onUpdateColumnSettings"
:key="random + 1"
:selected="columns"
/>
<v-server-table
v-if="typeView === 'GRID'"
:data="tableData"
:columns="columns"
:options="getTableOptions()"
ref="vueTable"
@row-click="onRowClick"
:key="random"
name="todo"
>
<div slot="detail" slot-scope="props">
<div class="btn-default" @click="openCaseDetail(props.row)">
<i class="fas fa-info-circle"></i>
</div>
</div>
<div slot="case_number" slot-scope="props">
{{ props.row.CASE_NUMBER }}
</div>
<div slot="case_title" slot-scope="props">
{{ props.row.CASE_TITLE }}
</div>
<div slot="process_name" slot-scope="props">
{{ props.row.PROCESS_NAME }}
</div>
<div slot="task" slot-scope="props">
<TaskCell :data="props.row.TASK" />
</div>
<div slot="send_by" slot-scope="props">
<CurrentUserCell :data="props.row.USER_DATA" />
</div>
<div slot="current_user" slot-scope="props">
{{ props.row.USERNAME_DISPLAY_FORMAT }}
</div>
<div slot="due_date" slot-scope="props">
{{ props.row.DUE_DATE }}
</div>
<div slot="delegation_date" slot-scope="props">
{{ props.row.DELEGATION_DATE }}
</div>
<div slot="priority" slot-scope="props">
{{ props.row.PRIORITY }}
</div>
<div slot="actions" slot-scope="props">
<div @click="updateDataEllipsis(props.row)">
<ellipsis
ref="ellipsis"
v-if="dataEllipsis"
:data="dataEllipsis"
>
</ellipsis>
</div>
</div>
</v-server-table>
<VueCardView
v-if="typeView === 'CARD'"
:options="getVueViewOptions()"
ref="vueCardView"
>
<b-col
sm="11"
slot="actions"
slot-scope="props"
class="vp-inbox-list-actions"
>
<b-row>
<b-col sm="12">
<div
class="v-pm-card-info"
@click="openCaseDetail(props.item)"
>
<i class="fas fa-info-circle"></i>
</div>
</b-col>
<b-col sm="12">
<div @click="updateDataEllipsis(props.item)">
<ellipsis v-if="dataEllipsis" :data="dataEllipsis">
</ellipsis>
</div>
</b-col>
</b-row>
</b-col>
<div slot="case_number" slot-scope="props" class="v-card-text">
<span class="v-card-text-highlight"
>{{ props["headings"][props.column] }} :
{{ props["item"]["CASE_NUMBER"] }}</span
>
</div>
<div slot="case_title" 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"]["CASE_TITLE"] }}
</span>
</div>
<div slot="process_name" 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_NAME"] }}
</span>
</div>
<div slot="due_date" 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"]["DUE_DATE"] }}
</span>
</div>
<div slot="delegation_date" 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"]["DELEGATION_DATE"] }}
</span>
</div>
<div slot="task" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark"
>{{ props["headings"][props.column] }} :</span
>
<span class="v-card-text-light">
<TaskCell :data="props.item.TASK" />
</span>
</div>
<div slot="priority" 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"]["PRIORITY"] }}
</span>
</div>
<div slot="send_by" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark"
>{{ props["headings"][props.column] }} :</span
>
<span class="v-card-text-light">
<CurrentUserCell :data="props.item.USER_DATA" />
</span>
</div>
</VueCardView>
<VueListView
v-if="typeView === 'LIST'"
:options="getVueViewOptions()"
ref="vueListView"
>
<b-col
sm="12"
slot="actions"
slot-scope="props"
class="vp-inbox-list-actions"
>
<div class="">
<b-row>
<b-col sm="12">
<div
class="v-pm-card-info"
@click="openCaseDetail(props.item)"
>
<i class="fas fa-info-circle"></i>
</div>
</b-col>
<b-col sm="12">
<div @click="updateDataEllipsis(props.row)">
<ellipsis
ref="ellipsis"
v-if="dataEllipsis"
:data="dataEllipsis"
>
</ellipsis>
</div>
</b-col>
</b-row>
</div>
</b-col>
<b-col
sm="5"
ref="text"
slot="case_number"
slot-scope="props"
class="v-card-text"
>
<span class="v-card-text-highlight"
>{{ props["headings"][props.column] }} :
{{ props["item"]["CASE_NUMBER"] }}</span
>
</b-col>
<b-col
sm="5"
slot="case_title"
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"]["CASE_TITLE"] }}
</span>
</b-col>
<b-col
sm="5"
slot="process_name"
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_NAME"] }}
</span>
</b-col>
<b-col sm="5" slot="task" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark"
>{{ props["headings"][props.column] }} :</span
>
<span class="v-card-text-light">
<TaskCell :data="props.item.TASK" />
</span>
</b-col>
<b-col
sm="5"
slot="due_date"
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"]["DUE_DATE"] }}
</span>
</b-col>
<b-col
sm="5"
slot="delegation_date"
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"]["DELEGATION_DATE"] }}
</span>
</b-col>
<b-col
sm="5"
slot="priority"
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"]["PRIORITY"] }}
</span>
</b-col>
<b-col sm="5" slot="send_by" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark"
>{{ props["headings"][props.column] }} :</span
>
<span class="v-card-text-light">
<CurrentUserCell :data="props.item.USER_DATA" />
</span>
</b-col>
</VueListView>
<ModalUnpauseCase ref="modal-unpause-case"></ModalUnpauseCase>
<ModalClaimCase ref="modal-claim-case"></ModalClaimCase>
</div>
</template>
<script>
import HeaderCounter from "../../components/home/HeaderCounter.vue";
import ButtonFleft from "../../components/home/ButtonFleft.vue";
import ModalNewRequest from "../ModalNewRequest.vue";
import ModalUnpauseCase from "../modal/ModalUnpauseCase.vue";
import ModalClaimCase from "../modal/ModalClaimCase.vue";
import TaskCell from "../../components/vuetable/TaskCell.vue";
import CasesFilter from "../../components/search/CasesFilter";
import api from "../../api/index";
import utils from "../../utils/utils";
import MultiviewHeader from "../../components/headers/MultiviewHeader.vue";
import VueCardView from "../../components/dataViews/vueCardView/VueCardView.vue";
import VueListView from "../../components/dataViews/vueListView/VueListView.vue";
import defaultMixins from "./defaultMixins";
import Ellipsis from "../../components/utils/ellipsis.vue";
import ModalPauseCase from "../modal/ModalPauseCase.vue";
import ModalReassignCase from "../modal/ModalReassignCase.vue";
import { Event } from "vue-tables-2";
import CurrentUserCell from "../../components/vuetable/CurrentUserCell.vue";
import _ from "lodash";
export default {
name: "CustomCaseList",
mixins: [defaultMixins],
components: {
HeaderCounter,
ButtonFleft,
ModalNewRequest,
ModalUnpauseCase,
ModalClaimCase,
TaskCell,
CasesFilter,
MultiviewHeader,
VueCardView,
VueListView,
Ellipsis,
ModalPauseCase,
ModalReassignCase,
CurrentUserCell,
},
props: ["defaultOption", "settings", "data"],
data() {
let that = this;
return {
columMap: {
case_number: "APP_NUMBER",
case_title: "DEL_TITLE",
process_name: "PRO_TITLE",
},
newCase: {
title: this.$i18n.t("ID_NEW_CASE"),
class: "btn-success",
onClick: () => {
this.$refs["newRequest"].show();
},
},
filters:
this.settings && this.settings.filters
? this.settings.filters
: {},
defaultColumns: [
"case_number",
"case_title",
"process_name",
"task",
"send_by",
"due_date",
"delegation_date",
"priority",
],
settingOptions: [],
cardColumns: [],
isFistTime: true,
columns: ["detail", "actions"],
headings: {
detail: this.$i18n.t("ID_DETAIL_CASE"),
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"),
due_date: this.$i18n.t("ID_DUE_DATE"),
delegation_date: this.$i18n.t("ID_DELEGATION_DATE"),
priority: this.$i18n.t("ID_PRIORITY"),
actions: "",
},
tableData: [],
icon: "fas fa-check-circle",
options: {
filterable: false,
headings: {},
texts: {
count: this.$i18n.t("ID_SHOWING_FROM_RECORDS_COUNT"),
first: this.$i18n.t("ID_FIRST"),
last: this.$i18n.t("ID_LAST"),
filter: this.$i18n.t("ID_FILTER") + ":",
limit: this.$i18n.t("ID_RECORDS") + ":",
page: this.$i18n.t("ID_PAGE") + ":",
noResults: this.$i18n.t("ID_NO_MATCHING_RECORDS"),
},
selectable: {
mode: "single",
only: function(row) {
return true;
},
selectAllMode: "page",
programmatic: false,
},
sortable: ["case_number"],
orderBy:
this.settings && this.settings.orderBy
? this.settings.orderBy
: {},
requestFunction(data) {
return this.$parent.$parent.getCasesForVueTable(data);
},
settings: {
actions: {
class: "fas fa-cog",
id: "pm-dr-column-settings2",
events: {
click() {
that.$root.$emit(
"bv::show::popover",
"pm-dr-column-settings2"
);
},
},
},
},
},
pmDateFormat: "Y-m-d H:i:s",
clickCount: 0,
singleClickTimer: null,
statusTitle: {
ON_TIME: this.$i18n.t("ID_IN_PROGRESS"),
OVERDUE: this.$i18n.t("ID_TASK_OVERDUE"),
DRAFT: this.$i18n.t("ID_IN_DRAFT"),
PAUSED: this.$i18n.t("ID_PAUSED"),
UNASSIGNED: this.$i18n.t("ID_UNASSIGNED"),
},
dataEllipsis: {
buttons: {},
},
showEllipsis: false,
dataSubtitle: null,
};
},
created() {
this.initFilters();
},
mounted() {
let that = this;
// force to open case
this.openDefaultCase();
// define sort event
Event.$on("vue-tables.todo.sorted", function(data) {
that.$emit("updateUserSettings", "orderBy", data);
});
},
watch: {
columns: function(val) {
//TODO update settings
},
filters: function(val) {
this.$emit("updateUserSettings", "filters", val);
},
},
computed: {
/**
* Build our ProcessMaker apiClient
*/
ProcessMaker() {
return window.ProcessMaker;
},
},
updated() {},
beforeCreate() {},
methods: {
/**
* Initialize filters
*/
initFilters() {
let params;
if (this.defaultOption) {
params = utils.getAllUrlParams(this.defaultOption);
if (params && params.openapplicationuid) {
this.$emit("onUpdateFilters", [
{
fieldId: "caseNumber",
filterVar: "caseNumber",
label: "",
options: [],
value: params.openapplicationuid,
autoShow: false,
},
]);
}
}
},
/**
* Open a case when the component was mounted
*/
openDefaultCase() {
let params;
if (this.defaultOption) {
params = utils.getAllUrlParams(this.defaultOption);
if (params && params.app_uid && params.del_index) {
this.openCase({
APP_UID: params.app_uid,
DEL_INDEX: params.del_index,
});
this.$emit("cleanDefaultOption");
}
//force to search in the parallel tasks
if (params && params.openapplicationuid) {
this.onUpdateFilters({
params: [
{
fieldId: "caseNumber",
filterVar: "caseNumber",
label: "",
options: [],
value: params.openapplicationuid,
autoShow: false,
},
],
refresh: false,
});
this.$emit("cleanDefaultOption");
}
}
},
/**
* On row click event handler
* @param {object} event
*/
onRowClick(event) {
let self = this;
self.clickCount += 1;
if (self.clickCount === 1) {
self.singleClickTimer = setTimeout(function() {
self.clickCount = 0;
}, 400);
} else if (self.clickCount === 2) {
clearTimeout(self.singleClickTimer);
self.clickCount = 0;
self.openCase(event.row);
}
},
/**
* Get cases todo data
*/
getCasesForVueTable(data) {
let that = this,
dt,
paged,
limit = data.limit,
start = data.page === 1 ? 0 : limit * (data.page - 1),
filters = {},
sort = "",
id = this.data.customListId;
filters = {
paged: paged,
limit: limit,
offset: start,
};
_.forIn(this.filters, function(item, key) {
if (filters && item.value) {
filters[item.filterVar] = item.value;
}
});
sort = that.prepareSortString(data);
if (sort) {
filters["sort"] = sort;
}
return new Promise((resolutionFunc, rejectionFunc) => {
api.cases[that.data.pageParent]
({
id,
filters,
})
.then((response) => {
let tmp, columns;
columns = response.data.columns.map((item) => {
return item.field;
});
that.settingOptions = that.formatColumnSettings(columns);
dt = that.formatDataResponse(response.data.data);
that.cardColumns = columns;
if (that.isFistTime) {
that.columns = that.getTableColumns(columns);
that.isFistTime = false;
}
resolutionFunc({
data: dt,
count: response.data.total,
});
})
.catch((e) => {
rejectionFunc(e);
});
});
},
/**
* Prepare sort string to be sended in the service
* @param {object} data
* @returns {string}
*/
prepareSortString(data) {
let sort = "";
if (data.orderBy && this.columMap[data.orderBy]) {
sort = `${this.columMap[data.orderBy]},${
data.ascending === 1 ? "ASC" : "DESC"
}`;
}
return sort;
},
/**
* Format Response API TODO to grid todo and columns
* @param {object} response
* @returns {object}
*/
formatDataResponse(response) {
let data = [];
_.forEach(response, (v) => {
data.push({
CASE_NUMBER: v.APP_NUMBER,
CASE_TITLE: v.DEL_TITLE,
PROCESS_NAME: v.PRO_TITLE,
TASK: [
{
TITLE: v.TAS_TITLE,
CODE_COLOR: v.TAS_COLOR,
COLOR: v.TAS_COLOR_LABEL,
DELAYED_TITLE:
v.TAS_STATUS === "OVERDUE"
? this.$i18n.t("ID_DELAYED") + ":"
: this.statusTitle[v.TAS_STATUS],
DELAYED_MSG:
v.TAS_STATUS === "OVERDUE" ? v.DELAY : "",
},
],
USER_DATA: this.formatUser(v.SEND_BY_INFO),
USERNAME_DISPLAY_FORMAT: utils.userNameDisplayFormat({
userName: v.USR_LASTNAME,
firstName: v.USR_LASTNAME,
lastName: v.USR_LASTNAME,
format: window.config.FORMATS.format || null,
}),
DUE_DATE: v.DEL_TASK_DUE_DATE_LABEL,
DELEGATION_DATE: v.DEL_DELEGATE_DATE_LABEL,
PRIORITY: v.DEL_PRIORITY_LABEL,
DEL_INDEX: v.DEL_INDEX,
APP_UID: v.APP_UID,
PRO_UID: v.PRO_UID,
TAS_UID: v.TAS_UID,
});
});
return data;
},
/**
* Set the format to show user's information
* @return {array} data
* @returns {object}
*/
formatUser(data) {
var dataFormat = [],
userDataFormat;
userDataFormat = utils.userNameDisplayFormat({
userName: data.user_tooltip.usr_firstname,
firstName: data.user_tooltip.usr_lastname,
lastName: data.user_tooltip.usr_username,
format: window.config.FORMATS.format || null,
});
dataFormat.push({
USERNAME_DISPLAY_FORMAT: userDataFormat,
EMAIL: data.user_tooltip.usr_email,
POSITION: data.user_tooltip.usr_position,
AVATAR:
userDataFormat !== ""
? window.config.SYS_SERVER_AJAX +
window.config.SYS_URI +
`users/users_ViewPhotoGrid?pUID=${data.user_tooltip.usr_id}`
: "",
UNASSIGNED: userDataFormat !== "" ? true : false,
});
return dataFormat;
},
/**
* Open selected cases in the inbox
*
* @param {object} item
*/
openCase(item) {
this.$emit("onUpdateDataCase", {
APP_UID: item.APP_UID,
DEL_INDEX: item.DEL_INDEX,
PRO_UID: item.PRO_UID,
TAS_UID: item.TAS_UID,
ACTION: "todo",
});
this.$emit("onUpdatePage", "XCase");
},
/**
* Open case detail
*
* @param {object} item
*/
openCaseDetail(item) {
let that = this;
api.cases.open(_.extend({ ACTION: "todo" }, item)).then(() => {
api.cases
.cases_open(_.extend({ ACTION: "todo" }, item))
.then(() => {
that.$emit("onUpdateDataCase", {
APP_UID: item.APP_UID,
DEL_INDEX: item.DEL_INDEX,
PRO_UID: item.PRO_UID,
TAS_UID: item.TAS_UID,
APP_NUMBER: item.CASE_NUMBER,
ACTION: "todo",
});
that.$emit("onUpdatePage", "case-detail");
});
});
},
onRemoveFilter(data) {},
onUpdateFilters(data) {
this.filters = data.params;
if (data.refresh) {
this.$nextTick(() => {
if (this.typeView === "GRID") {
this.$refs["vueTable"].getData();
}
if (this.typeView === "CARD") {
this.$refs["vueCardView"].getData();
}
if (this.typeView === "LIST") {
this.$refs["vueListView"].getData();
}
});
}
},
/**
* update view in component
*/
updateView(newData) {
this.isFistTime = true;
this.typeView = "GRID";
// force to update component id
if (newData && newData.customListId) {
this.data.customListId = newData.customListId;
}
if (this.typeView === "GRID") {
this.$refs["vueTable"].getData();
}
if (this.typeView === "CARD") {
this.$refs["vueCardView"].getData();
}
if (this.typeView === "LIST") {
this.$refs["vueListView"].getData();
}
},
/**
* Show modal to pause a case
* @param {objec} data
*/
showModalPause(data) {
this.$refs["modal-pause-case"].data = data;
this.$refs["modal-pause-case"].show();
},
/**
* Show modal to reassign a case
* @param {objec} data
*/
showModalReassign(data) {
this.$refs["modal-reassign-case"].data = data;
this.$refs["modal-reassign-case"].show();
},
/**
* Show options in the ellipsis
* @param {objec} data
*/
updateDataEllipsis(data) {
this.showEllipsis = !this.showEllipsis;
if (this.showEllipsis) {
this.dataEllipsis = this.ellipsisItemFactory(data, this.data.pageParent);
}
},
/**
* Claim case
*
* @param {object} item
*/
claimCase(item) {
let that = this;
api.cases.open(_.extend({ ACTION: "unassigned" }, item)).then(() => {
api.cases.cases_open(_.extend({ ACTION: "todo" }, item)).then(() => {
that.$refs["modal-claim-case"].data = item;
that.$refs["modal-claim-case"].show();
});
});
},
showModalUnpauseCase(item) {
this.$refs["modal-unpause-case"].data = item;
this.$refs["modal-unpause-case"].show();
},
/**
* Json factory for ellipsis control item
* @param {object} data
* @param {object} page
* @returns {object}
*/
ellipsisItemFactory (data, page) {
let that = this;
let dataEllipsisMap = {
inbox: {
buttons: {
open: {
name: "open",
icon: "far fa-edit",
fn: function() {
that.openCase(data);
},
},
note: {
name: "case note",
icon: "far fa-comments",
fn: function() {
that.openCaseDetail(data);
},
},
reassign: {
name: "reassign case",
icon: "fas fa-undo",
fn: function() {
that.showModalReassign(data);
},
},
pause: {
name: "pause case",
icon: "far fa-pause-circle",
fn: function() {
that.showModalPause(data);
},
},
},
},
draft: {
buttons: {
open: {
name: "open",
icon: "far fa-edit",
fn: function() {
that.openCase(data);
}
},
note: {
name: "case note",
icon: "far fa-comments",
fn: function() {
that.openCaseDetail(data);
}
},
}
},
paused: {
buttons: {
note: {
name: "case note",
icon: "far fa-comments",
fn: function() {
that.openCaseDetail(data);
}
},
play: {
name: "play case",
icon: "far fa-play-circle",
fn: function() {
that.showModalUnpauseCase(data);
}
},
reassign: {
name: "reassign case",
icon: "fas fa-undo",
fn: function() {
that.showModalReassign(data);
}
}
}
},
unassigned: {
buttons: {
note: {
name: "case note",
icon: "far fa-comments",
fn: function() {
that.openCaseDetail(data);
}
},
pause: {
name: "pause case",
icon: "far fa-pause-circle",
fn: function() {
that.showModalPause(data);
}
},
claim: {
name: "claim case",
icon: "fas fa-briefcase",
fn: function() {
that.claimCase(data);
}
}
}
}
};
return dataEllipsisMap[page];
}
},
};
</script>
<style>
.v-container-todo {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 50px;
padding-right: 50px;
}
.VueTables__limit {
display: none;
}
.v-card-text-dark {
color: #343944;
display: inline-block;
}
.v-card-text-highlight {
color: #313541;
display: inline-block;
}
.v-card-text-light {
color: #313541;
display: inline-block;
}
.ellipsis-container {
margin-top: 5em;
}
.v-pm-card-info {
float: right;
}
.vp-inbox-list-actions {
top: 25%;
position: absolute;
}
</style>

197
resources/assets/js/home/CustomCaseList/defaultMixins.js Normal file
View File

@@ -0,0 +1,197 @@
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[that.data.pageParent](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[that.data.pageParent]
(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 }
});
}
}
}

2
resources/assets/js/home/Draft/Draft.vue
View File

@@ -127,7 +127,7 @@
</div>
</b-col>
<b-col sm="12">
<div class="ellipsis-container" @click="updateDataEllipsis(props.row)">
<div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
<ellipsis ref="ellipsis" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</div>
</b-col>

1
resources/assets/js/home/Draft/defaultMixins.js
View File

@@ -50,7 +50,6 @@ export default {
priority: this.$i18n.t("ID_PRIORITY")
},
columns: [
"detail",
"case_number",
"case_title",
"process_name",

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

@@ -26,6 +26,7 @@
:defaultOption="defaultOption"
:settings="config.setting[page]"
:filters="filters"
:data="pageData"
@onSubmitFilter="onSubmitFilter"
@onRemoveFilter="onRemoveFilter"
@onUpdatePage="onUpdatePage"
@@ -54,6 +55,7 @@ import XCase from "./XCase";
import TaskReassignments from "./TaskReassignments";
import AdvancedSearch from "./AdvancedSearch/AdvancedSearch.vue";
import LegacyFrame from "./LegacyFrame";
import CustomCaseList from "./CustomCaseList/CustomCaseList.vue"
import api from "./../api/index";
import eventBus from './EventBus/eventBus'
@@ -73,7 +75,8 @@ export default {
Unassigned,
CaseDetail,
LegacyFrame,
TaskMetrics
TaskMetrics,
CustomCaseList
},
data() {
return {
@@ -107,7 +110,8 @@ export default {
CASES_TO_REASSIGN: "task-reassignments",
CASES_FOLDERS: "my-documents"
},
defaultOption: window.config.defaultOption || ''
defaultOption: window.config.defaultOption || '',
pageData: {}
};
},
mounted() {
@@ -252,11 +256,11 @@ export default {
newData = data,
auxId;
for (i = 0; i < data.length; i += 1) {
auxId = data[i].id || "";
auxId = data[i].page || "";
if (auxId !== "" && this.menuMap[auxId]) {
newData[i].id = this.menuMap[auxId];
newData[i].page = this.menuMap[auxId];
} else if (newData[i].href) {
newData[i].id = "LegacyFrame";
newData[i].page = "LegacyFrame";
}
// Tasks group need pie chart icon
if (data[i].header && data[i].id === "FOLDERS") {
@@ -276,8 +280,7 @@ export default {
}
}
}
if (data[i].id === "inbox" || data[i].id === "draft"
|| data[i].id === "paused" || data[i].id === "unassigned") {
if (data[i].customCasesList) {
data[i]["child"] = this.sortCustomCasesList(
data[i].customCasesList,
this.config.setting[this.page] &&
@@ -355,7 +358,7 @@ export default {
this.defaultOption = "";
},
OnClickSidebarItem(item) {
if (item.item.page && item.item.page === "/advanced-search") {
if (item.item.page && item.item.page === "advanced-search") {
this.page = "advanced-search";
this.filters = item.item.filters;
this.pageId = item.item.id;
@@ -365,11 +368,21 @@ export default {
this.filters = [];
this.pageId = null;
this.pageUri = item.item.href;
this.page = item.item.id || "MyCases";
this.page = item.item.page || "MyCases";
if (!item.item.customCasesList) {
this.page = "custom-case-list";
this.pageData = {
pageUri: item.item.pageUri,
pageParent: item.item.page,
pageName: item.item.title,
pageIcon: item.item.icon,
customListId: item.item.id
}
}
if (this.page === this.lastPage
&& this.$refs["component"]
&& this.$refs["component"].updateView) {
this.$refs["component"].updateView();
this.$refs["component"].updateView(this.pageData);
}
this.lastPage = this.page;
}

2
resources/assets/sass/menu.scss
View File

@@ -111,7 +111,7 @@
}
.vsm--link_level-2>.vsm--icon {
margin-top: 8px;
margin-top: 0px;
}
.v-sidebar-menu .vsm--arrow {

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

@@ -658,6 +658,7 @@ class Home extends Api
$option->href = $menuInstance->Options[$i];
$option->id = $menuInstance->Id[$i];
$option->title = $menuInstance->Labels[$i];
$option->page = $menuInstance->Id[$i];
$option->icon = $menuInstance->Icons[$i];
}
@@ -670,7 +671,7 @@ class Home extends Api
foreach ($filters as $filter) {
$childFilter = new stdClass();
$childFilter->id = $filter->id;
$childFilter->page = '/advanced-search';
$childFilter->page = 'advanced-search';
$childFilter->href = "{$childFilter->page}/{$filter->id}";
$childFilter->title = $filter->name;
$childFilter->icon = 'fas fa-circle';
@@ -700,7 +701,8 @@ class Home extends Api
"id" => $value['id'],
"title" => $value['name'],
"description" => $value['description'],
"icon" => $value['iconList']
"icon" => $value['iconList'],
"page" => $mapKeys[$menuInstance->Id[$i]]
];
}
}