update inbox scree
This commit is contained in:
Rodrigo Quelca
@@ -54,7 +54,8 @@ export default {
|
|||||||
*/
|
*/
|
||||||
setTooltip() {
|
setTooltip() {
|
||||||
let that = this;
|
let that = this;
|
||||||
api.menu.getTooltip(that.menuMap[that.data.id]).then((response) => {
|
debugger;
|
||||||
|
api.menu.getTooltip(that.data.id).then((response) => {
|
||||||
let key = `tooltip-${that.data.id}`;
|
let key = `tooltip-${that.data.id}`;
|
||||||
that.labelTooltip = response.data.label;
|
that.labelTooltip = response.data.label;
|
||||||
that.$refs[key].$emit("open");
|
that.$refs[key].$emit("open");
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ import CustomSidebar from "./../components/menu/CustomSidebar";
|
|||||||
import CustomSidebarMenuItem from "./../components/menu/CustomSidebarMenuItem";
|
import CustomSidebarMenuItem from "./../components/menu/CustomSidebarMenuItem";
|
||||||
import MyCases from "./MyCases/MyCases.vue";
|
import MyCases from "./MyCases/MyCases.vue";
|
||||||
import MyDocuments from "./MyDocuments";
|
import MyDocuments from "./MyDocuments";
|
||||||
import Todo from "./Inbox/Todo.vue";
|
import Inbox from "./Inbox/Inbox.vue";
|
||||||
import Paused from "./Paused/Paused.vue";
|
import Paused from "./Paused/Paused.vue";
|
||||||
import Draft from "./Draft/Draft.vue";
|
import Draft from "./Draft/Draft.vue";
|
||||||
import Unassigned from "./Unassigned/Unassigned.vue";
|
import Unassigned from "./Unassigned/Unassigned.vue";
|
||||||
@@ -66,7 +66,7 @@ export default {
|
|||||||
BatchRouting,
|
BatchRouting,
|
||||||
TaskReassignments,
|
TaskReassignments,
|
||||||
XCase,
|
XCase,
|
||||||
Todo,
|
Inbox,
|
||||||
Draft,
|
Draft,
|
||||||
Paused,
|
Paused,
|
||||||
Unassigned,
|
Unassigned,
|
||||||
@@ -97,7 +97,7 @@ export default {
|
|||||||
CASES_MY_CASES: "MyCases",
|
CASES_MY_CASES: "MyCases",
|
||||||
CASES_SENT: "MyCases",
|
CASES_SENT: "MyCases",
|
||||||
CASES_SEARCH: "advanced-search",
|
CASES_SEARCH: "advanced-search",
|
||||||
CASES_INBOX: "todo",
|
CASES_INBOX: "inbox",
|
||||||
CASES_DRAFT: "draft",
|
CASES_DRAFT: "draft",
|
||||||
CASES_PAUSED: "paused",
|
CASES_PAUSED: "paused",
|
||||||
CASES_SELFSERVICE: "unassigned",
|
CASES_SELFSERVICE: "unassigned",
|
||||||
@@ -138,7 +138,7 @@ export default {
|
|||||||
|
|
||||||
eventer(messageEvent, function(e) {
|
eventer(messageEvent, function(e) {
|
||||||
if ( e.data === "redirect=todo" || e.message === "redirect=todo"){
|
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 ( e.data === "update=debugger" || e.message === "update=debugger"){
|
||||||
if(that.$refs["component"].updateView){
|
if(that.$refs["component"].updateView){
|
||||||
@@ -267,7 +267,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (data[i].id === "todo" || data[i].id === "draft"
|
if (data[i].id === "inbox" || data[i].id === "draft"
|
||||||
|| data[i].id === "paused" || data[i].id === "unassigned") {
|
|| 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]["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]["sortable"] = data[i].customCasesList.length > 1;
|
||||||
|
|||||||
@@ -1,731 +0,0 @@
|
|||||||
<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="$t('ID_CASES_STATUS_TO_DO')"
|
|
||||||
:icon="icon"
|
|
||||||
@onRemoveFilter="onRemoveFilter"
|
|
||||||
@onUpdateFilters="onUpdateFilters"
|
|
||||||
/>
|
|
||||||
<multiview-header
|
|
||||||
:data="dataMultiviewHeader"
|
|
||||||
:dataSubtitle="dataSubtitle"
|
|
||||||
/>
|
|
||||||
<settings-popover :options="formatColumnSettings(options.headings)" target="pm-dr-column-settings" @onUpdateColumnSettings="onUpdateColumnSettings" :key="random+1" :selected="formatColumnSelected(columns)"/>
|
|
||||||
<v-server-table
|
|
||||||
v-if="typeView === 'GRID'"
|
|
||||||
:data="tableData"
|
|
||||||
:columns="columns"
|
|
||||||
:options="options"
|
|
||||||
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="optionsVueView"
|
|
||||||
ref="vueCardView"
|
|
||||||
>
|
|
||||||
<div slot="actions" slot-scope="props">
|
|
||||||
<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 class="ellipsis-container" @click="updateDataEllipsis(props.item)">
|
|
||||||
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</div>
|
|
||||||
<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="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="optionsVueView"
|
|
||||||
ref="vueListView"
|
|
||||||
>
|
|
||||||
<div slot="actions" slot-scope="props">
|
|
||||||
<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 class="ellipsis-container" @click="updateDataEllipsis(props.item)">
|
|
||||||
<ellipsis ref="ellipsis" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</div>
|
|
||||||
<div 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
|
|
||||||
>
|
|
||||||
</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="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>
|
|
||||||
</VueListView>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import HeaderCounter from "../../components/home/HeaderCounter.vue";
|
|
||||||
import ButtonFleft from "../../components/home/ButtonFleft.vue";
|
|
||||||
import ModalNewRequest from "../ModalNewRequest.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";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "Todo",
|
|
||||||
mixins: [defaultMixins],
|
|
||||||
components: {
|
|
||||||
HeaderCounter,
|
|
||||||
ButtonFleft,
|
|
||||||
ModalNewRequest,
|
|
||||||
TaskCell,
|
|
||||||
CasesFilter,
|
|
||||||
MultiviewHeader,
|
|
||||||
VueCardView,
|
|
||||||
VueListView,
|
|
||||||
Ellipsis,
|
|
||||||
ModalPauseCase,
|
|
||||||
ModalReassignCase,
|
|
||||||
CurrentUserCell,
|
|
||||||
},
|
|
||||||
props: ["defaultOption", "settings"],
|
|
||||||
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
|
|
||||||
: {},
|
|
||||||
columns:
|
|
||||||
this.settings && this.settings.columns
|
|
||||||
? this.settings.columns
|
|
||||||
: [
|
|
||||||
"detail",
|
|
||||||
"case_number",
|
|
||||||
"case_title",
|
|
||||||
"process_name",
|
|
||||||
"task",
|
|
||||||
"send_by",
|
|
||||||
"due_date",
|
|
||||||
"delegation_date",
|
|
||||||
"priority",
|
|
||||||
"actions"
|
|
||||||
],
|
|
||||||
tableData: [],
|
|
||||||
icon:"fas fa-check-circle",
|
|
||||||
options: {
|
|
||||||
filterable: false,
|
|
||||||
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: "",
|
|
||||||
},
|
|
||||||
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-settings",
|
|
||||||
events:{
|
|
||||||
click(){
|
|
||||||
that.$root.$emit('bv::show::popover', 'pm-dr-column-settings')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
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) {
|
|
||||||
this.$emit("updateUserSettings", "columns", val);
|
|
||||||
},
|
|
||||||
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 = "";
|
|
||||||
paged = start + "," + limit;
|
|
||||||
|
|
||||||
filters = {
|
|
||||||
paged: paged,
|
|
||||||
}
|
|
||||||
_.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
|
|
||||||
.todo(filters)
|
|
||||||
.then((response) => {
|
|
||||||
dt = that.formatDataResponse(response.data.data);
|
|
||||||
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
|
|
||||||
*/
|
|
||||||
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} dataFormat
|
|
||||||
*/
|
|
||||||
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() {
|
|
||||||
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) {
|
|
||||||
let that = this;
|
|
||||||
this.showEllipsis = !this.showEllipsis;
|
|
||||||
if (this.showEllipsis) {
|
|
||||||
this.dataEllipsis = {
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</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;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user