PMCORE-2529
PMCORE-2541: Improve update filters in advanced search UI fix Cr notes fix Cr notes 2 solve conflicts fix Cr notes 3
This commit is contained in:
Andrea Adamczyk
committed by
Rodrigo Quelca
Rodrigo Quelca
parent
6209114a9b
commit
8a755f874d
19
package-lock.json
generated
19
package-lock.json
generated
@@ -9024,11 +9024,6 @@
|
||||
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
|
||||
"dev": true
|
||||
},
|
||||
"resize-observer-polyfill": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
|
||||
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.19.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz",
|
||||
@@ -10724,15 +10719,6 @@
|
||||
"swiper": "^4.0.7"
|
||||
}
|
||||
},
|
||||
"vue-bootstrap-typeahead": {
|
||||
"version": "0.2.6",
|
||||
"resolved": "https://registry.npmjs.org/vue-bootstrap-typeahead/-/vue-bootstrap-typeahead-0.2.6.tgz",
|
||||
"integrity": "sha512-BcUAnvfN+PS0StL6E3endd37P7HUt9otk+8m7tsa2gkt2I2KY8O2Dma49oR8ie8iletvJAlAqpN+klF6ktPULQ==",
|
||||
"requires": {
|
||||
"resize-observer-polyfill": "^1.5.0",
|
||||
"vue": "^2.5.17"
|
||||
}
|
||||
},
|
||||
"vue-chartjs": {
|
||||
"version": "3.5.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-3.5.1.tgz",
|
||||
@@ -10845,6 +10831,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-multiselect": {
|
||||
"version": "2.1.6",
|
||||
"resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-2.1.6.tgz",
|
||||
"integrity": "sha512-s7jmZPlm9FeueJg1RwJtnE9KNPtME/7C8uRWSfp9/yEN4M8XcS/d+bddoyVwVnvFyRh9msFo0HWeW0vTL8Qv+w=="
|
||||
},
|
||||
"vue-muuri": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-muuri/-/vue-muuri-0.1.2.tgz",
|
||||
|
||||
@@ -40,7 +40,6 @@
|
||||
"uiv": "^0.28.0",
|
||||
"vue": "^2.6.12",
|
||||
"vue-awesome-swiper": "^3.1.3",
|
||||
"vue-bootstrap-typeahead": "^0.2.6",
|
||||
"vue-chartjs": "^3.3.2",
|
||||
"vue-clipboards": "^1.2.4",
|
||||
"vue-color": "^2.7.0",
|
||||
@@ -48,6 +47,7 @@
|
||||
"vue-fullscreen": "^2.1.3",
|
||||
"vue-i18n": "^8.22.2",
|
||||
"vue-js-toggle-button": "^1.3.1",
|
||||
"vue-multiselect": "^2.1.6",
|
||||
"vue-muuri": "^0.1.2",
|
||||
"vue-router": "^3.4.9",
|
||||
"vue-search-select": "^2.7.0",
|
||||
|
||||
@@ -63,8 +63,10 @@ const services = {
|
||||
UNASSIGNED_LIST: "/home/unassigned",
|
||||
MY_FILTERS: "/cases/advanced-search/filters",
|
||||
POST_MY_FILTERS: "/cases/advanced-search/filter",
|
||||
PUT_MY_FILTERS: "/cases/advanced-search/filter/",
|
||||
DELETE_MY_FILTERS: "/cases/advanced-search/filter/",
|
||||
SEARCH: "/home/search",
|
||||
PROCESSES: "/home/processes"
|
||||
};
|
||||
|
||||
export default {
|
||||
@@ -162,6 +164,7 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
delete(options) {
|
||||
let service = options.service || "",
|
||||
id = options.id || {},
|
||||
@@ -181,5 +184,29 @@ export default {
|
||||
"Authorization": `Bearer ` + credentials.accessToken
|
||||
}
|
||||
});
|
||||
},
|
||||
put(options) {
|
||||
let service = options.service || "",
|
||||
params = options.params || {},
|
||||
data = options.data || {},
|
||||
id = options.id || {},
|
||||
keys = options.keys || {},
|
||||
url,
|
||||
credentials = window.config.SYS_CREDENTIALS,
|
||||
workspace = window.config.SYS_WORKSPACE,
|
||||
server = window.config.SYS_SERVER;
|
||||
url = this.getUrl(_.extend(keys, credentials, { server }, { workspace }), service);
|
||||
|
||||
return axios({
|
||||
method: "put",
|
||||
url: url + id,
|
||||
params,
|
||||
data,
|
||||
headers: {
|
||||
"Accept": "application/json",
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": `Bearer ` + credentials.accessToken
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@@ -20,9 +20,15 @@ export let filters = {
|
||||
delete(data) {
|
||||
return Api.delete({
|
||||
service: "DELETE_MY_FILTERS",
|
||||
|
||||
id: data.id,
|
||||
|
||||
keys: {},
|
||||
});
|
||||
},
|
||||
put(data) {
|
||||
return Api.put({
|
||||
service: "PUT_MY_FILTERS",
|
||||
id: data.id,
|
||||
data,
|
||||
keys: {},
|
||||
});
|
||||
},
|
||||
@@ -43,14 +49,13 @@ export let filters = {
|
||||
* Service to get the process list
|
||||
*/
|
||||
processList(query) {
|
||||
return axios.post(
|
||||
window.config.SYS_SERVER +
|
||||
window.config.SYS_URI +
|
||||
`cases/casesList_Ajax?actionAjax=processListExtJs&action=search`,
|
||||
{
|
||||
query,
|
||||
}
|
||||
);
|
||||
return Api.get({
|
||||
service: "PROCESSES",
|
||||
params: {
|
||||
text: query,
|
||||
},
|
||||
keys: {},
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Service to get the users list
|
||||
|
||||
@@ -23,9 +23,9 @@
|
||||
import api from "./../../api/index";
|
||||
export default {
|
||||
name: "CustomSidebar",
|
||||
props: ["menu"],
|
||||
data() {
|
||||
return {
|
||||
menu: [],
|
||||
collapsed: false,
|
||||
isOnMobile: false,
|
||||
hideToggle: true,
|
||||
@@ -43,14 +43,6 @@ export default {
|
||||
mounted() {
|
||||
this.onResize();
|
||||
window.addEventListener("resize", this.onResize);
|
||||
api.menu
|
||||
.get()
|
||||
.then((response) => {
|
||||
this.menu = this.mappingMenu(response.data);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
@@ -82,34 +74,6 @@ export default {
|
||||
this.isOnMobile = false;
|
||||
this.collapsed = false;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Do a mapping of vue view for menus
|
||||
* @returns array
|
||||
*/
|
||||
mappingMenu(data) {
|
||||
var i,
|
||||
j,
|
||||
newData = data,
|
||||
auxId,
|
||||
viewVue = {
|
||||
'CASES_MY_CASES': 'MyCases',
|
||||
'CASES_SEARCH': 'advanced-search',
|
||||
'CASES_INBOX': 'todo',
|
||||
'CASES_DRAFT': 'draft',
|
||||
'CASES_PAUSED': 'paused',
|
||||
'CASES_SELFSERVICE': 'unassigned',
|
||||
'CONSOLIDATED_CASES': 'batch-routing',
|
||||
'CASES_TO_REASSIGN': 'task-reassignments',
|
||||
'CASES_FOLDERS': 'my-documents'
|
||||
};
|
||||
for (i = 0; i < data.length; i += 1) {
|
||||
auxId = data[i].id || '';
|
||||
if (auxId !== '' && viewVue[auxId]) {
|
||||
newData[i].id = viewVue[auxId];
|
||||
}
|
||||
}
|
||||
return newData;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -7,12 +7,6 @@
|
||||
@savePopover="onOk"
|
||||
:title="info.title"
|
||||
>
|
||||
<template v-slot:target-item>
|
||||
<div @click="onClickTag(tag)" :id="tag">
|
||||
<i class="fas fa-tags"></i>
|
||||
{{ tagText }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<p>{{ info.detail }}</p>
|
||||
<form ref="form" @submit.stop.prevent="handleSubmit">
|
||||
@@ -23,7 +17,7 @@
|
||||
>
|
||||
<b-form-input
|
||||
id="name-input"
|
||||
v-model="value"
|
||||
v-model="info.values.filterCases"
|
||||
:placeholder="$t('ID_CASE_NUMBER_FILTER_EG')"
|
||||
:state="valueState"
|
||||
required
|
||||
@@ -45,24 +39,18 @@ export default {
|
||||
props: ["tag", "info"],
|
||||
data() {
|
||||
return {
|
||||
value: "",
|
||||
valueState: null,
|
||||
showPopover: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tagText: function() {
|
||||
return `${this.$i18n.t("ID_IUD")}: ${this.value} `;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onClose() {
|
||||
this.showPopover = true;
|
||||
},
|
||||
checkFormValidity() {
|
||||
const regex = /^((\d+?)|(\d+?)(?:\-(\d+?))?)(?:\, ((\d+?)|(\d+?)(?:\-(\d+?))?))*$/;
|
||||
regex.test(this.value);
|
||||
this.valueState = regex.test(this.value);
|
||||
regex.test(this.info.values.filterCases);
|
||||
this.valueState = regex.test(this.info.values.filterCases);
|
||||
return this.valueState;
|
||||
},
|
||||
handleSubmit() {
|
||||
@@ -74,7 +62,9 @@ export default {
|
||||
// Hide the modal manually
|
||||
this.$nextTick(() => {
|
||||
this.$emit("updateSearchTag", {
|
||||
filterCases: self.value.replace(/ /g, ""),
|
||||
CaseNumber: {
|
||||
filterCases: self.info.values.filterCases.replace(/ /g, ""),
|
||||
}
|
||||
});
|
||||
self.$root.$emit("bv::hide::popover");
|
||||
});
|
||||
|
||||
@@ -2,16 +2,10 @@
|
||||
<div id="">
|
||||
<SearchPopover
|
||||
:target="tag"
|
||||
@closePopover="onClose"
|
||||
@savePopover="onOk"
|
||||
:title="info.title"
|
||||
>
|
||||
<template v-slot:target-item>
|
||||
<div @click="onClickTag(tag)" :id="tag">
|
||||
<b-icon icon="tags-fill" font-scale="1"></b-icon>
|
||||
{{ tagText }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:body>
|
||||
<p>{{ info.detail }}</p>
|
||||
<form ref="form" @submit.stop.prevent="handleSubmit">
|
||||
@@ -22,7 +16,7 @@
|
||||
>
|
||||
<b-form-input
|
||||
id="name-input"
|
||||
v-model="title"
|
||||
v-model="info.values.caseTitle"
|
||||
:placeholder="$t('ID_CASE_TITLE_NAME')"
|
||||
:state="valueState"
|
||||
required
|
||||
@@ -48,11 +42,6 @@ export default {
|
||||
valueState: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tagText: function() {
|
||||
return `${this.$i18n.t("ID_CASE_TITLE")}: ${this.title}`;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Check the form validations and requiered fields
|
||||
@@ -73,7 +62,9 @@ export default {
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.$emit("updateSearchTag", {
|
||||
caseTitle: self.title,
|
||||
CaseTitle: {
|
||||
caseTitle: self.info.values.caseTitle,
|
||||
}
|
||||
});
|
||||
self.$root.$emit("bv::hide::popover");
|
||||
});
|
||||
|
||||
@@ -5,12 +5,6 @@
|
||||
@savePopover="onOk"
|
||||
:title="info.title"
|
||||
>
|
||||
<template v-slot:target-item>
|
||||
<div @click="onClickTag(tag)" :id="tag">
|
||||
<b-icon icon="tags-fill" font-scale="1"></b-icon>
|
||||
{{ tagText }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<p>{{ info.detail }}</p>
|
||||
<form ref="form" @submit.stop.prevent="handleSubmit">
|
||||
@@ -19,7 +13,7 @@
|
||||
<b-form-group >
|
||||
<b-form-datepicker
|
||||
id="from"
|
||||
v-model="from"
|
||||
v-model="info.values.dueDateFrom"
|
||||
:placeholder="$t('ID_FROM_DUE_DATE')"
|
||||
></b-form-datepicker>
|
||||
</b-form-group>
|
||||
@@ -28,7 +22,7 @@
|
||||
<b-form-group>
|
||||
<b-form-datepicker
|
||||
id="to"
|
||||
v-model="to"
|
||||
v-model="info.values.dueDateTo"
|
||||
:placeholder="$t('ID_TO_DUE_DATE')"
|
||||
></b-form-datepicker>
|
||||
</b-form-group>
|
||||
@@ -48,26 +42,18 @@ export default {
|
||||
SearchPopover,
|
||||
},
|
||||
props: ["tag", "info"],
|
||||
data() {
|
||||
return {
|
||||
from: "",
|
||||
to: ""
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tagText: function() {
|
||||
return `${this.$i18n.t('ID_FROM')}: ${this.from} ${this.$i18n.t('ID_TO')}: ${this.to}`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Submit form handler
|
||||
*/
|
||||
handleSubmit() {
|
||||
this.$emit("updateSearchTag", {
|
||||
dueDateFrom: this.from,
|
||||
dueDateTo: this.to,
|
||||
DueDate: {
|
||||
dueDateFrom: this.info.values.dueDateFrom,
|
||||
dueDateTo: this.info.values.dueDateTo
|
||||
}
|
||||
});
|
||||
this.$root.$emit("bv::hide::popover");
|
||||
},
|
||||
/**
|
||||
* On ok event handler
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
<template>
|
||||
<div id="">
|
||||
<SearchPopover :target="tag" @savePopover="onOk" :title="info.title">
|
||||
<template v-slot:target-item>
|
||||
<div @click="onClickTag(tag)" :id="tag">
|
||||
<b-icon icon="tags-fill" font-scale="1"></b-icon>
|
||||
{{ tagText }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<p>{{ info.detail }}</p>
|
||||
<form ref="form" @submit.stop.prevent="handleSubmit">
|
||||
@@ -15,7 +9,7 @@
|
||||
<b-form-group>
|
||||
<b-form-datepicker
|
||||
id="from"
|
||||
v-model="from"
|
||||
v-model="info.values.delegationDateFrom"
|
||||
:placeholder="$t('ID_FROM_LAST_MODIFIED_DATE')"
|
||||
></b-form-datepicker>
|
||||
</b-form-group>
|
||||
@@ -24,7 +18,7 @@
|
||||
<b-form-group>
|
||||
<b-form-datepicker
|
||||
id="to"
|
||||
v-model="to"
|
||||
v-model="info.values.delegationDateTo"
|
||||
:placeholder="$t('ID_TO_LAST_MODIFIED_DATE')"
|
||||
></b-form-datepicker>
|
||||
</b-form-group>
|
||||
@@ -44,26 +38,18 @@ export default {
|
||||
SearchPopover,
|
||||
},
|
||||
props: ["tag", "info"],
|
||||
data() {
|
||||
return {
|
||||
from: "",
|
||||
to: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tagText: function() {
|
||||
return `${this.$i18n.t('ID_FROM')}: ${this.from} ${this.$i18n.t('ID_TO')}: ${this.to}`;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Submit form handler
|
||||
*/
|
||||
handleSubmit() {
|
||||
this.$emit("updateSearchTag", {
|
||||
delegationDateFrom: this.from,
|
||||
delegationDateTo: this.to
|
||||
LastModifiedDate: {
|
||||
delegationDateFrom: this.info.values.delegationDateFrom,
|
||||
delegationDateTo: this.info.values.delegationDateTo
|
||||
}
|
||||
});
|
||||
this.$root.$emit("bv::hide::popover");
|
||||
},
|
||||
/**
|
||||
* On ok event handler
|
||||
|
||||
@@ -1,32 +1,27 @@
|
||||
<template>
|
||||
<div id="">
|
||||
<SearchPopover :target="tag" @savePopover="onOk" :title="info.title">
|
||||
<template v-slot:target-item>
|
||||
<div @click="onClickTag(tag)" :id="tag">
|
||||
<b-icon icon="tags-fill" font-scale="1"></b-icon>
|
||||
{{ tagText }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<p>{{ info.detail }}</p>
|
||||
<form ref="form" @submit.stop.prevent="handleSubmit">
|
||||
<b-form-group
|
||||
:state="valueState"
|
||||
label-for="name"
|
||||
:invalid-feedback="$t('ID_PROCESS_IS_REQUIRED')"
|
||||
>
|
||||
<vue-bootstrap-typeahead
|
||||
class="mb-4"
|
||||
id="name"
|
||||
v-model="query"
|
||||
:minMatchingChars="minMatchingChars"
|
||||
:data="process"
|
||||
:serializer="(item) => item.PRO_TITLE"
|
||||
@hit="selectedUser = $event"
|
||||
:placeholder="info.placeholder"
|
||||
required
|
||||
:state="valueState"
|
||||
/>
|
||||
<multiselect
|
||||
v-model="info.processOption"
|
||||
:options="processes"
|
||||
placeholder="Select one"
|
||||
label="PRO_TITLE"
|
||||
track-by="PRO_ID"
|
||||
:show-no-results="false"
|
||||
@search-change="asyncFind"
|
||||
:loading="isLoading"
|
||||
id="ajax"
|
||||
:limit="10"
|
||||
:clear-on-select="true"
|
||||
>
|
||||
</multiselect>
|
||||
</b-form-group>
|
||||
</form>
|
||||
</template>
|
||||
@@ -36,41 +31,39 @@
|
||||
|
||||
<script>
|
||||
import SearchPopover from "./SearchPopover.vue";
|
||||
import VueBootstrapTypeahead from "vue-bootstrap-typeahead";
|
||||
import Multiselect from 'vue-multiselect'
|
||||
import api from "./../../../api/index";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SearchPopover,
|
||||
VueBootstrapTypeahead,
|
||||
Multiselect,
|
||||
},
|
||||
props: ["tag", "info"],
|
||||
data() {
|
||||
return {
|
||||
minMatchingChars: 1,
|
||||
query: "",
|
||||
process: [],
|
||||
valueState: null,
|
||||
processes: [],
|
||||
isLoading: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tagText: function() {
|
||||
return `${this.$i18n.t("ID_PROCESS")}: ${this.query}`;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
query(newQuery) {
|
||||
api.filters
|
||||
.processList(this.query)
|
||||
methods: {
|
||||
/**
|
||||
* Find asynchronously in the server
|
||||
* @param {string} query - string from the text field
|
||||
*/
|
||||
asyncFind (query) {
|
||||
this.isLoading = true
|
||||
api.filters
|
||||
.processList(query)
|
||||
.then((response) => {
|
||||
this.process = response.data;
|
||||
this.processes = response.data;
|
||||
this.countries = response
|
||||
this.isLoading = false
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(err);
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Form validations review
|
||||
*/
|
||||
@@ -89,25 +82,16 @@ export default {
|
||||
* Form submit handler
|
||||
*/
|
||||
handleSubmit() {
|
||||
// Exit when the form isn't valid
|
||||
if (!this.checkFormValidity()) {
|
||||
return;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
let process = _.find(this.process, { PRO_TITLE: this.query });
|
||||
this.$emit("updateSearchTag", {
|
||||
process: process.PRO_ID,
|
||||
ProcessName: {
|
||||
processOption: this.info.processOption,
|
||||
process: this.info.processOption.PRO_ID
|
||||
}
|
||||
});
|
||||
this.$root.$emit("bv::hide::popover");
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Cick tag event handler
|
||||
*/
|
||||
onClickTag() {
|
||||
this.$root.$emit("bv::hide::popover");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
|
||||
<style scoped></style>
|
||||
|
||||
@@ -1,13 +1,24 @@
|
||||
<template>
|
||||
<div id="v-mycases3" ref="v-mycases2" class="v-container-mycases">
|
||||
<b-alert
|
||||
:show="dismissCountDown"
|
||||
dismissible
|
||||
:variant="variant"
|
||||
@dismissed="dismissCountDown = 0"
|
||||
@dismiss-count-down="countDownChanged"
|
||||
>
|
||||
{{ message }}
|
||||
</b-alert>
|
||||
<button-fleft :data="newCase"></button-fleft>
|
||||
<GenericFilter
|
||||
:id="id"
|
||||
:name="name"
|
||||
:filters="filters"
|
||||
@onJumpCase="onJumpCase"
|
||||
@onSubmit="onSubmitFilter"
|
||||
@onRemoveFilter="onRemoveFilter"
|
||||
@onSearch="onSearch"
|
||||
@onUpdateFilters="onUpdateFilters"
|
||||
/>
|
||||
|
||||
<modal-new-request ref="newRequest"></modal-new-request>
|
||||
@@ -84,13 +95,17 @@ export default {
|
||||
ModalNewRequest,
|
||||
TaskCell
|
||||
},
|
||||
props: ["id", "name"],
|
||||
props: ["id", "name", "filters"],
|
||||
data() {
|
||||
return {
|
||||
dismissSecs: 5,
|
||||
dismissCountDown: 0,
|
||||
message: "",
|
||||
variant: "info",
|
||||
metrics: [],
|
||||
filter: "CASES_INBOX",
|
||||
allView: [],
|
||||
jsonFilters: null,
|
||||
filtersModel: {},
|
||||
filterHeader: "STARTED_BY_ME",
|
||||
headers: [],
|
||||
newCase: {
|
||||
@@ -143,6 +158,11 @@ export default {
|
||||
pmDateFormat: "Y-m-d H:i:s",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: function() {
|
||||
this.$refs.test.refresh();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Get cases data by header
|
||||
@@ -151,8 +171,12 @@ export default {
|
||||
let that = this,
|
||||
dt;
|
||||
return new Promise((resolutionFunc, rejectionFunc) => {
|
||||
let filters = {};
|
||||
_.forIn(this.filters, function(value, key) {
|
||||
filters = {...filters, ...value};
|
||||
});
|
||||
api.cases
|
||||
.search(that.jsonFilters)
|
||||
.search(filters)
|
||||
.then((response) => {
|
||||
dt = that.formatDataResponse(response.data.data);
|
||||
resolutionFunc({
|
||||
@@ -368,27 +392,84 @@ export default {
|
||||
throw new Error(err);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Updates the alert dismiss value to update
|
||||
* dismissCountDown and decrease
|
||||
* @param {mumber}
|
||||
*/
|
||||
countDownChanged(dismissCountDown) {
|
||||
this.dismissCountDown = dismissCountDown;
|
||||
},
|
||||
/**
|
||||
* Show the alert message
|
||||
* @param {string} message - message to be displayen in the body
|
||||
* @param {string} type - alert type
|
||||
*/
|
||||
showAlert(message, type) {
|
||||
this.message = message;
|
||||
this.variant = type || "info";
|
||||
this.dismissCountDown = this.dismissSecs;
|
||||
},
|
||||
/**
|
||||
* Handler submit filter
|
||||
* @param {object} data - data returned from the server
|
||||
*/
|
||||
onSubmitFilter(data) {
|
||||
this.$emit("onSubmitFilter", data);
|
||||
onSubmitFilter(params) {
|
||||
if (params.type === "update") {
|
||||
api.filters
|
||||
.put({
|
||||
id: params.id,
|
||||
name: params.name,
|
||||
filters: JSON.stringify(params.filters),
|
||||
})
|
||||
.then((response) => {
|
||||
this.$emit("onSubmitFilter", params);
|
||||
})
|
||||
.catch((e) => {
|
||||
this.showAlert(e.message, "danger");
|
||||
});
|
||||
} else {
|
||||
api.filters
|
||||
.post({
|
||||
name: params.name,
|
||||
filters: JSON.stringify(params.filters),
|
||||
})
|
||||
.then((response) => {
|
||||
this.$emit("onSubmitFilter", response.data);
|
||||
})
|
||||
.catch((e) => {
|
||||
this.showAlert(e.message, "danger");
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Handler on remove filter
|
||||
* @param {number} id - data returned fron the server
|
||||
*/
|
||||
onRemoveFilter(id) {
|
||||
this.$emit("onRemoveFilter", id);
|
||||
api.filters
|
||||
.delete({
|
||||
id: this.id,
|
||||
})
|
||||
.then((response) => {
|
||||
this.$emit("onUpdateFilters", {});
|
||||
this.$emit("onRemoveFilter", id);
|
||||
})
|
||||
.catch((e) => {
|
||||
this.showAlert(e.message, "danger");
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Handler on search filter
|
||||
* @param {number} id - data returned fron the server
|
||||
*/
|
||||
onSearch(params) {
|
||||
this.jsonFilters = params;
|
||||
this.$refs.test.refresh();
|
||||
this.$nextTick(() => {
|
||||
this.$refs.test.refresh();
|
||||
});
|
||||
},
|
||||
onUpdateFilters(params) {
|
||||
this.$emit("onUpdateFilters", params);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -20,13 +20,15 @@
|
||||
<component
|
||||
v-bind:is="page"
|
||||
ref="component"
|
||||
:filters="filters"
|
||||
:id="pageId"
|
||||
:name="pageName"
|
||||
@onSubmitFilter="onSubmitFilter"
|
||||
@onRemoveFilter="onRemoveFilter"
|
||||
@onUpdatePage="onUpdatePage"
|
||||
@onUpdateDataCase="onUpdateDataCase"
|
||||
@onLastPage="onLastPage"
|
||||
@onLastPage="onLastPage"
|
||||
@onUpdateFilters="onUpdateFilters"
|
||||
></component>
|
||||
</div>
|
||||
</div>
|
||||
@@ -67,7 +69,7 @@ export default {
|
||||
return {
|
||||
lastPage: "MyCases",
|
||||
page: "MyCases",
|
||||
menu: null,
|
||||
menu: [],
|
||||
dataCase: {},
|
||||
hideToggle: true,
|
||||
collapsed: false,
|
||||
@@ -76,6 +78,7 @@ export default {
|
||||
sidebarWidth: "310px",
|
||||
pageId: null,
|
||||
pageName: null,
|
||||
filters: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@@ -91,14 +94,49 @@ export default {
|
||||
api.menu
|
||||
.get()
|
||||
.then((response) => {
|
||||
this.menu = response;
|
||||
this.menu = this.mappingMenu(response.data);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Do a mapping of vue view for menus
|
||||
* @returns array
|
||||
*/
|
||||
mappingMenu(data) {
|
||||
var i,
|
||||
j,
|
||||
newData = data,
|
||||
auxId,
|
||||
viewVue = {
|
||||
CASES_MY_CASES: "MyCases",
|
||||
CASES_SEARCH: "advanced-search",
|
||||
CASES_INBOX: "todo",
|
||||
CASES_DRAFT: "draft",
|
||||
CASES_PAUSED: "paused",
|
||||
CASES_SELFSERVICE: "unassigned",
|
||||
CONSOLIDATED_CASES: "batch-routing",
|
||||
CASES_TO_REASSIGN: "task-reassignments",
|
||||
CASES_FOLDERS: "my-documents",
|
||||
};
|
||||
for (i = 0; i < data.length; i += 1) {
|
||||
auxId = data[i].id || "";
|
||||
if (auxId !== "" && viewVue[auxId]) {
|
||||
newData[i].id = viewVue[auxId];
|
||||
}
|
||||
}
|
||||
return newData;
|
||||
},
|
||||
OnClickSidebarItem(item) {
|
||||
this.page = item.item.id || "MyCases";
|
||||
if (item.item.page && item.item.page === "/advanced-search") {
|
||||
this.page = "advanced-search";
|
||||
this.filters = item.item.filters;
|
||||
this.pageId = item.item.id;
|
||||
this.pageName = item.item.title;
|
||||
} else {
|
||||
this.page = item.item.id || "MyCases";
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Update page component
|
||||
@@ -141,24 +179,38 @@ export default {
|
||||
addMenuSearchChild(data) {
|
||||
let newMenu = this.menu;
|
||||
let advSearch = _.find(newMenu, function(o) {
|
||||
return o.href === "/advanced-search";
|
||||
return o.id === "advanced-search";
|
||||
});
|
||||
if (!advSearch.hasOwnProperty("child")) {
|
||||
advSearch["child"] = [];
|
||||
if (advSearch) {
|
||||
const index = advSearch.child.findIndex(function(o) {
|
||||
return o.id === data.id;
|
||||
});
|
||||
if (index !== -1) {
|
||||
advSearch.child[index].filters = data.filters;
|
||||
} else {
|
||||
if (!advSearch.hasOwnProperty("child")) {
|
||||
advSearch["child"] = [];
|
||||
}
|
||||
advSearch.child.push({
|
||||
filters: data.filters,
|
||||
href: "/advanced-search/" + data.id,
|
||||
title: data.name,
|
||||
icon: "fas fa-circle",
|
||||
id: data.id,
|
||||
page: "/advanced-search",
|
||||
});
|
||||
}
|
||||
}
|
||||
advSearch.child.push({
|
||||
href: "/advanced-search/" + data.id,
|
||||
title: data.name,
|
||||
icon: "fas fa-circle",
|
||||
id: data.id,
|
||||
page: "advanced-search",
|
||||
});
|
||||
},
|
||||
onRemoveFilter(id) {
|
||||
this.removeMenuSearchChild(id);
|
||||
this.resetSettings();
|
||||
},
|
||||
resetSettings() {
|
||||
this.page = "advanced-search";
|
||||
this.pageId = null;
|
||||
this.pageName = null;
|
||||
this.filters = {};
|
||||
},
|
||||
onUpdatePage(page) {
|
||||
this.lastPage = this.page;
|
||||
@@ -167,20 +219,25 @@ export default {
|
||||
onUpdateDataCase(data) {
|
||||
this.dataCase = data;
|
||||
},
|
||||
onLastPage(){
|
||||
onLastPage() {
|
||||
this.page = this.lastPage;
|
||||
this.lastPage = "MyCases"
|
||||
this.lastPage = "MyCases";
|
||||
},
|
||||
removeMenuSearchChild(id) {
|
||||
let newMenu = this.menu;
|
||||
let advSearch = _.find(newMenu, function(o) {
|
||||
return o.href === "/advanced-search";
|
||||
return o.id === "advanced-search";
|
||||
});
|
||||
const index = advSearch.child.findIndex(function(o) {
|
||||
return o.id === id;
|
||||
});
|
||||
if (index !== -1) advSearch.child.splice(index, 1);
|
||||
if (advSearch) {
|
||||
const index = advSearch.child.findIndex(function(o) {
|
||||
return o.id === id;
|
||||
});
|
||||
if (index !== -1) advSearch.child.splice(index, 1);
|
||||
}
|
||||
},
|
||||
onUpdateFilters(filters) {
|
||||
this.filters = filters;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user