Merged in bugfix/PMCORE-3342 (pull request #8204)

PMCORE-3342

Approved-by: Henry Jonathan Quispe Quispe
This commit is contained in:
Rodrigo Quelca
2021-10-08 14:55:37 +00:00
committed by Julio Cesar Laura Avendaño
6 changed files with 189 additions and 270 deletions

View File

@@ -15,12 +15,6 @@
:column="column" :column="column"
:headings="options.headings" :headings="options.headings"
></slot> ></slot>
<slot
name="send_by"
:item="item"
column="send_by"
:headings="options.headings"
></slot>
</b-col> </b-col>
<b-col sm="3"> <b-col sm="3">
<slot <slot
@@ -55,7 +49,6 @@ export default {
}; };
}, },
mounted() { mounted() {
this.filterOptions();
}, },
methods: { methods: {
classBtn(cls) { classBtn(cls) {

View File

@@ -1,35 +1,29 @@
<template> <template>
<div class="pm-vue-list-view" :height="height"> <div class="pm-vue-list-view" :height="height">
<div class="pm-vue-list-view-container"> <div class="pm-vue-list-view-container">
<div <div class="pm-vue-list-view-body" :style="{ height: height + 'px' }">
class="pm-vue-list-view-body" <vue-list
:style="{height: height + 'px'}" v-for="item in data"
> :key="item.id"
<vue-list v-for="item in data" :key="item.id" :item="item" :options="options"> :item="item"
:options="options"
>
<b-row> <b-row>
<b-col sm="5"> <b-col sm="10">
<slot <b-row>
v-for="column in options.columns" <b-col sm="5" v-for="column in options.columns" :key="column">
:name="column" <slot
:item="item" :name="column"
:column="column" :item="item"
:headings="options.headings" :column="column"
ref="containerList" :headings="options.headings"
></slot> >
</b-col> </slot>
<b-col sm="5"> </b-col>
<slot </b-row>
name="send_by"
:item="item"
column="send_by"
:headings="options.headings"
></slot>
</b-col> </b-col>
<b-col sm="2"> <b-col sm="2">
<slot <slot name="actions" :item="item"></slot>
name="actions"
:item="item"
></slot>
</b-col> </b-col>
</b-row> </b-row>
</vue-list> </vue-list>
@@ -54,23 +48,14 @@ export default {
props: ["options"], props: ["options"],
data() { data() {
return { return {
loadMore: this.$t("ID_LOAD_MORE") loadMore: this.$t("ID_LOAD_MORE"),
chunkColumns: [],
}; };
}, },
mounted() { mounted() {},
this.filterOptions();
},
methods: { methods: {
classBtn(cls) { classBtn(cls) {
return "btn btn-slim btn-force-radius v-btn-header " + cls; return "btn btn-slim btn-force-radius v-btn-header " + cls;
},
/**
* Filter the column send_by
*/
filterOptions() {
this.options.columns = this.options.columns.filter(function(item) {
return item !== "send_by";
});
} }
}, },
}; };

View File

@@ -1,6 +1,6 @@
<template> <template>
<div v-if="data.length" class="grouped-cell"> <div v-if="data.length" class="grouped-cell">
<div v-for="(item, index) in data" v-bind:key="item.TITLE" class="d-flex mb-3"> <div v-for="(item, index) in data" v-bind:key="item.TITLE" class="d-flex">
<div class="avatar" :id="id + index"> <div class="avatar" :id="id + index">
<b-avatar <b-avatar
variant="info" variant="info"

View File

@@ -3,7 +3,7 @@
<div <div
v-for="(item, index) in data" v-for="(item, index) in data"
v-bind:key = index v-bind:key = index
class="d-flex mb-3"> class="d-flex">
<div <div
v-bind:style="{ color: activeColor(item.CODE_COLOR) }" v-bind:style="{ color: activeColor(item.CODE_COLOR) }"
:id="statusId + index" :id="statusId + index"

View File

@@ -110,197 +110,94 @@
</b-col> </b-col>
</b-row> </b-row>
</b-col> </b-col>
<div slot="case_number" slot-scope="props" class="v-card-text"> <template v-for="column in cardColumns" :slot="column" slot-scope="props" class="v-card-text">
<span class="v-card-text-highlight" <div :key="column">
>{{ props["headings"][props.column] }} : <span class="v-card-text-dark">
{{ props["item"]["CASE_NUMBER"] }}</span {{ getCustomHeading(column, props) }} :
> </span>
</div> <span v-if="column === 'case_number'" class="v-card-text-highlight">
<div slot="thread_title" slot-scope="props" class="v-card-text"> {{ props["item"]["CASE_NUMBER"] }}
<span class="v-card-text-dark" </span>
>{{ props["headings"][props.column] }} :</span <span v-if="column === 'thread_title'" class="v-card-text-highlight">
> {{ props["item"]["THREAD_TITLE"] }}
<span class="v-card-text-light"> </span>
{{ props["item"]["THREAD_TITLE"] }} <span v-if="column === 'process_name'" class="v-card-text-highlight">
</span> {{ props["item"]["PROCESS_NAME"] }}
</div> </span>
<div slot="process_name" slot-scope="props" class="v-card-text"> <span v-if="column === 'due_date'" class="v-card-text-highlight">
<span class="v-card-text-dark" {{ props["item"]["DUE_DATE"] }}
>{{ props["headings"][props.column] }} :</span </span>
> <span v-if="column === 'delegation_date'" class="v-card-text-highlight">
<span class="v-card-text-light" {{ props["item"]["DELEGATION_DATE"] }}
>{{ props["item"]["PROCESS_NAME"] }} </span>
</span> <span v-if="column === 'task'" span class="v-card-text-light">
</div> <TaskCell :data="props.item.TASK" />
<div slot="due_date" slot-scope="props" class="v-card-text"> </span>
<span class="v-card-text-dark" <span v-if="column === 'priority'" class="v-card-text-highlight">
>{{ props["headings"][props.column] }} :</span {{ props["item"]["PRIORITY"] }}
> </span>
<span class="v-card-text-light" <span v-else-if="column === 'send_by'" class="v-card-text-light">
>{{ props["item"]["DUE_DATE"] }} <CurrentUserCell :data="props.item.USER_DATA" />
</span> </span>
</div> <span v-else class="v-card-text-light">
<div slot="delegation_date" slot-scope="props" class="v-card-text"> {{ props["item"][column] }}
<span class="v-card-text-dark" </span>
>{{ props["headings"][props.column] }} :</span </div>
> </template>
<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> </VueCardView>
<VueListView <VueListView
v-if="typeView === 'LIST'" v-if="typeView === 'LIST'"
:options="getVueViewOptions()" :options="getVueViewOptions()"
ref="vueListView" ref="vueListView"
> >
<b-col <div slot="actions" slot-scope="props">
sm="12" <b-row>
slot="actions" <b-col sm="12">
slot-scope="props" <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
class="vp-inbox-list-actions" <i class="fas fa-info-circle"></i>
>
<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-${props.row.APP_UID}`"
v-if="dataEllipsis"
:data="dataEllipsis"
>
</ellipsis>
</div>
</b-col>
</b-row>
</div> </div>
</b-col> </b-col>
<b-col <b-col sm="12">
sm="5" <div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
ref="text" <ellipsis :ref="`ellipsis-${props.item.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
slot="case_number" </div>
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="thread_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"]["THREAD_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> </b-col>
</b-row>
</div>
<template v-for="column in cardColumns" :slot="column" slot-scope="props" class="v-card-text">
<div :key="column">
<span class="v-card-text-dark">
{{ getCustomHeading(column, props) }} :
</span>
<span v-if="column === 'case_number'" class="v-card-text-highlight">
{{ props["item"]["CASE_NUMBER"] }}
</span>
<span v-if="column === 'thread_title'" class="v-card-text-highlight">
{{ props["item"]["THREAD_TITLE"] }}
</span>
<span v-if="column === 'process_name'" class="v-card-text-highlight">
{{ props["item"]["PROCESS_NAME"] }}
</span>
<span v-if="column === 'due_date'" class="v-card-text-highlight">
{{ props["item"]["DUE_DATE"] }}
</span>
<span v-if="column === 'delegation_date'" class="v-card-text-highlight">
{{ props["item"]["DELEGATION_DATE"] }}
</span>
<span v-if="column === 'task'" span class="v-card-text-light">
<TaskCell :data="props.item.TASK" />
</span>
<span v-if="column === 'priority'" class="v-card-text-highlight">
{{ props["item"]["PRIORITY"] }}
</span>
<span v-else-if="column === 'send_by'" class="v-card-text-light">
<CurrentUserCell :data="props.item.USER_DATA" />
</span>
<span v-else class="v-card-text-light">
{{ props["item"][column] }}
</span>
</div>
</template>
</VueListView> </VueListView>
<ModalUnpauseCase ref="modal-unpause-case"></ModalUnpauseCase> <ModalUnpauseCase ref="modal-unpause-case"></ModalUnpauseCase>
<ModalClaimCase ref="modal-claim-case"></ModalClaimCase> <ModalClaimCase ref="modal-claim-case"></ModalClaimCase>
@@ -705,10 +602,24 @@ export default {
ProcessMaker() { ProcessMaker() {
return window.ProcessMaker; return window.ProcessMaker;
}, },
}, },
updated() {}, updated() {},
beforeCreate() {}, beforeCreate() {},
methods: { methods: {
/**
* Get custom headigns for dynamic lists
* @param {String} column
* @param {Object} props
* @returns {*}
*/
getCustomHeading(column, props) {
if (props["headings"] && props["headings"][column]) {
return props["headings"][column];
} else {
return column;
}
},
/** /**
* Initialize filters * Initialize filters
*/ */
@@ -1070,6 +981,7 @@ export default {
} }
this.data.settings = newData.settings; this.data.settings = newData.settings;
this.filters = {}; this.filters = {};
this.typeView = newData.settings.view.typeView;
} }
if (this.typeView === "GRID" && this.$refs["vueTable"]) { if (this.typeView === "GRID" && this.$refs["vueTable"]) {
if (newData.settings && newData.settings.orderBy) { if (newData.settings && newData.settings.orderBy) {

View File

@@ -91,48 +91,77 @@ export default {
*/ */
getCases(data) { getCases(data) {
let that = this, let that = this,
dt, dt,
typeList = that.data.pageParent == "inbox" ? "todo" : that.data.pageParent, paged,
start = 0, limit = data.limit,
paged, start = data.page === 1 ? 0 : limit * (data.page - 1),
limit = data.limit, filters = {},
filters = {}, sort = "",
id = this.data.customListId; id = this.data.customListId;
filters = { filters = {
paged: paged, paged: paged,
limit: limit, limit: limit,
offset: start, offset: start,
}; };
if (_.isEmpty(that.filters) && this.data.settings) { if (_.isEmpty(that.filters) && this.data.settings) {
_.forIn(this.data.settings.filters, function (item, key) { _.forIn(this.data.settings.filters, function(item, key) {
if (filters && item.value) { if (filters && item.value) {
filters[item.filterVar] = item.value; filters[item.filterVar] = item.value;
} }
}); });
} else { } else {
_.forIn(this.filters, function (item, key) { _.forIn(this.filters, function(item, key) {
if (filters && item.value) { if (filters && item.value) {
filters[item.filterVar] = item.value; filters[item.filterVar] = item.value;
} }
}); });
} }
return new Promise((resolutionFunc, rejectionFunc) => { sort = that.prepareSortString(data);
api.custom[that.data.pageParent] if (sort) {
({ filters["sort"] = sort;
id, }
filters, return new Promise((resolutionFunc, rejectionFunc) => {
}) api.custom[that.data.pageParent]
.then((response) => { ({
dt = that.formatDataResponse(response.data.data); id,
resolutionFunc({ filters,
data: dt, })
count: response.data.total, .then((response) => {
let tmp,
columns = [],
product,
newItems = [];
that.filterItems = [];
response.data.columns.forEach((item) => {
if (item.enableFilter) {
if (that.availableItems[that.itemMap[item.field]]) {
newItems.push(that.availableItems[that.itemMap[item.field]]);
} else {
product = this.filterItemFactory(item)
if (product) {
newItems.push(product);
}
}
}
columns.push(item.field);
});
that.filterItems = newItems;
dt = that.formatDataResponse(response.data.data);
that.cardColumns = columns;
if (that.isFistTime) {
that.filters = that.data.settings && that.data.settings.filters ? that.data.settings.filters : {};
that.columns = that.data.settings && that.data.settings.columns ? that.data.settings.columns : that.getTableColumns(columns);
that.settingOptions = that.formatColumnSettings(columns);
}
resolutionFunc({
data: dt,
count: response.data.total,
});
})
.catch((e) => {
rejectionFunc(e);
});
}); });
})
.catch((e) => {
rejectionFunc(e);
});
});
}, },
/** /**
* Get cases for Vue Card View * Get cases for Vue Card View