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

fix custom case list view mode

Browse Source
This commit is contained in:
Rodrigo Quelca
2021-10-05 21:29:50 +00:00
parent fc204a41ac
commit 71b8c4263c
4 changed files with 185 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
resources/assets/js/components/dataViews/vueCardView/VueCardView.vue
View File

@@ -15,12 +15,12 @@
:column="column"
:headings="options.headings"
></slot>
<slot
<!-- <slot
name="send_by"
:item="item"
column="send_by"
:headings="options.headings"
></slot>
></slot> -->
</b-col>
<b-col sm="3">
<slot
@@ -55,7 +55,7 @@ export default {
};
},
mounted() {
this.filterOptions();
// this.filterOptions();
},
methods: {
classBtn(cls) {
@@ -65,6 +65,7 @@ export default {
* Filter the column send_by
*/
filterOptions() {
debugger;
this.options.columns = this.options.columns.filter(function(item) {
return item !== "send_by";
});

26
resources/assets/js/components/dataViews/vueListView/VueListView.vue
View File

@@ -9,7 +9,7 @@
<b-row>
<b-col sm="5">
<slot
v-for="column in options.columns"
v-for="column in chunkColumns[0]"
:name="column"
:item="item"
:column="column"
@@ -18,11 +18,19 @@
></slot>
</b-col>
<b-col sm="5">
<slot
<!-- <slot
name="send_by"
:item="item"
column="send_by"
:headings="options.headings"
></slot> -->
<slot
v-for="column in chunkColumns[1]"
:name="column"
:item="item"
:column="column"
:headings="options.headings"
ref="containerList"
></slot>
</b-col>
<b-col sm="2">
@@ -54,13 +62,23 @@ export default {
props: ["options"],
data() {
return {
loadMore: this.$t("ID_LOAD_MORE")
loadMore: this.$t("ID_LOAD_MORE"),
chunkColumns: []
};
},
mounted() {
this.filterOptions();
this.chunkColumns = this.chunkArray(this.options.columns, 2);
debugger
},
methods: {
chunkArray(array, size) {
let result = [],
arrayCopy = [...array];
while (arrayCopy.length > 0) {
result.push(arrayCopy.splice(0, size));
}
return result;
},
classBtn(cls) {
return "btn btn-slim btn-force-radius v-btn-header " + cls;
},

219
resources/assets/js/home/CustomCaseList/CustomCaseList.vue
View File

@@ -110,197 +110,94 @@
</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="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">
<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>
</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 v-if="column === 'process_name'" class="v-card-text-highlight">
{{ 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 v-if="column === 'due_date'" class="v-card-text-highlight">
{{ 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 v-if="column === 'delegation_date'" class="v-card-text-highlight">
{{ 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">
<span v-if="column === 'task'" 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 v-if="column === 'priority'" class="v-card-text-highlight">
{{ 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">
<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>
</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="">
<div slot="actions" slot-scope="props">
<b-row>
<b-col sm="12">
<div
class="v-pm-card-info"
@click="openCaseDetail(props.item)"
>
<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
:ref="`ellipsis-${props.item.APP_UID}`"
v-if="dataEllipsis"
:data="dataEllipsis"
>
</ellipsis>
<div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
<ellipsis :ref="`ellipsis-${props.item.APP_UID}`" 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="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">
<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>
</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 v-if="column === 'process_name'" class="v-card-text-highlight">
{{ 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">
<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>
</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 v-if="column === 'priority'" class="v-card-text-highlight">
{{ props["item"]["PRIORITY"] }}
</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">
<span v-else-if="column === 'send_by'" class="v-card-text-light">
<CurrentUserCell :data="props.item.USER_DATA" />
</span>
</b-col>
<span v-else class="v-card-text-light">
{{ props["item"][column] }}
</span>
</div>
</template>
</VueListView>
<ModalUnpauseCase ref="modal-unpause-case"></ModalUnpauseCase>
<ModalClaimCase ref="modal-claim-case"></ModalClaimCase>
@@ -705,10 +602,18 @@ export default {
ProcessMaker() {
return window.ProcessMaker;
},
},
updated() {},
beforeCreate() {},
methods: {
getCustomHeading(column, props) {
if (props["headings"] && props["headings"][column]) {
return props["headings"][column];
} else {
return column;
}
},
/**
* Initialize filters
*/
@@ -842,6 +747,7 @@ export default {
that.filterItems = newItems;
dt = that.formatDataResponse(response.data.data);
that.cardColumns = columns;
debugger;
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);
@@ -1070,6 +976,7 @@ export default {
}
this.data.settings = newData.settings;
this.filters = {};
this.typeView = newData.settings.view.typeView;
}
if (this.typeView === "GRID" && this.$refs["vueTable"]) {
if (newData.settings && newData.settings.orderBy) {

33
resources/assets/js/home/CustomCaseList/defaultMixins.js
View File

@@ -92,11 +92,11 @@ export default {
getCases(data) {
let that = this,
dt,
typeList = that.data.pageParent == "inbox" ? "todo" : that.data.pageParent,
start = 0,
paged,
limit = data.limit,
start = data.page === 1 ? 0 : limit * (data.page - 1),
filters = {},
sort = "",
id = this.data.customListId;
filters = {
paged: paged,
@@ -116,6 +116,10 @@ export default {
}
});
}
sort = that.prepareSortString(data);
if (sort) {
filters["sort"] = sort;
}
return new Promise((resolutionFunc, rejectionFunc) => {
api.custom[that.data.pageParent]
({
@@ -123,7 +127,32 @@ export default {
filters,
})
.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,