PMCORE-2515: improve advanced search filters CRUD UI
rebase fix Cr notes
This commit is contained in:
Rodrigo Quelca
@@ -61,7 +61,10 @@ const services = {
|
||||
DRAFT_LIST: "/home/draft",
|
||||
PAUSED_LIST: "/home/paused",
|
||||
UNASSIGNED_LIST: "/home/unassigned",
|
||||
|
||||
MY_FILTERS: "/cases/advanced-search/filters",
|
||||
POST_MY_FILTERS: "/cases/advanced-search/filter",
|
||||
DELETE_MY_FILTERS: "/cases/advanced-search/filter/",
|
||||
SEARCH: "/home/search",
|
||||
};
|
||||
|
||||
export default {
|
||||
@@ -135,5 +138,48 @@ export default {
|
||||
"Authorization": `Bearer ` + credentials.accessToken
|
||||
}
|
||||
});
|
||||
},
|
||||
post(options) {
|
||||
let service = options.service || "",
|
||||
params = options.params || {},
|
||||
data = options.data || {},
|
||||
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: "post",
|
||||
url: url,
|
||||
params,
|
||||
data,
|
||||
headers: {
|
||||
"Accept": "application/json",
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": `Bearer ` + credentials.accessToken
|
||||
}
|
||||
});
|
||||
},
|
||||
delete(options) {
|
||||
let service = options.service || "",
|
||||
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: "delete",
|
||||
url: url + id,
|
||||
headers: {
|
||||
"Accept": "application/json",
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": `Bearer ` + credentials.accessToken
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@@ -118,14 +118,31 @@ export let cases = {
|
||||
window.config.SYS_URI +
|
||||
`cases/ajaxListener`, params);
|
||||
},
|
||||
//remove this section
|
||||
search(data) {
|
||||
return new Promise((resolutionFunc, rejectionFunc) => {
|
||||
|
||||
resolutionFunc(startedCasesFaker);
|
||||
|
||||
});
|
||||
/**
|
||||
* Service to jump a case by it's number
|
||||
* @param {object} dt
|
||||
*/
|
||||
jump(dt) {
|
||||
var params = new URLSearchParams();
|
||||
params.append('action', 'previusJump');
|
||||
params.append('appNumber', dt.APP_NUMBER);
|
||||
params.append('actionFromList', dt.ACTION_FROM_LIST);
|
||||
return axios.post(window.config.SYS_SERVER +
|
||||
window.config.SYS_URI +
|
||||
`cases/cases_Ajax.php`, params);
|
||||
},
|
||||
/**
|
||||
* Make a search request to the Api service
|
||||
* @param {object} dt - filter parameters
|
||||
*/
|
||||
search(dt) {
|
||||
return Api.get({
|
||||
service: "SEARCH",
|
||||
params: dt,
|
||||
keys: {}
|
||||
})
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
export let casesHeader = {
|
||||
|
||||
68
resources/assets/js/api/Filters.js
Normal file
68
resources/assets/js/api/Filters.js
Normal file
@@ -0,0 +1,68 @@
|
||||
import axios from "axios";
|
||||
import Api from "./Api.js";
|
||||
export let filters = {
|
||||
get(data) {
|
||||
return Api.get({
|
||||
service: "MY_FILTERS",
|
||||
params: {
|
||||
filter: data.params,
|
||||
},
|
||||
keys: {},
|
||||
});
|
||||
},
|
||||
post(data) {
|
||||
return Api.post({
|
||||
service: "POST_MY_FILTERS",
|
||||
data,
|
||||
keys: {},
|
||||
});
|
||||
},
|
||||
delete(data) {
|
||||
return Api.delete({
|
||||
service: "DELETE_MY_FILTERS",
|
||||
|
||||
id: data.id,
|
||||
|
||||
keys: {},
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Service to generate a jump case URL
|
||||
*/
|
||||
jumpCase() {
|
||||
var params = new URLSearchParams();
|
||||
params.append("action", "startCase");
|
||||
return axios.post(
|
||||
window.config.SYS_SERVER +
|
||||
window.config.SYS_URI +
|
||||
`cases/casesStartPage_Ajax.php`,
|
||||
params
|
||||
);
|
||||
},
|
||||
/**
|
||||
* 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,
|
||||
}
|
||||
);
|
||||
},
|
||||
/**
|
||||
* Service to get the users list
|
||||
*/
|
||||
userValues(query) {
|
||||
return axios.post(
|
||||
window.config.SYS_SERVER +
|
||||
window.config.SYS_URI +
|
||||
`cases/casesList_Ajax?actionAjax=userValues&action=search`,
|
||||
{
|
||||
query,
|
||||
}
|
||||
);
|
||||
},
|
||||
};
|
||||
@@ -4,6 +4,7 @@ import { cases, casesHeader } from "./Cases";
|
||||
|
||||
import { caseNotes } from "./CaseNotes";
|
||||
import { process } from "./Process";
|
||||
import { filters } from "./Filters";
|
||||
|
||||
|
||||
export default {
|
||||
@@ -11,5 +12,6 @@ export default {
|
||||
cases,
|
||||
casesHeader,
|
||||
process,
|
||||
caseNotes
|
||||
caseNotes,
|
||||
filters
|
||||
};
|
||||
@@ -20,13 +20,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import api from "./../../api/index";
|
||||
|
||||
export default {
|
||||
name: "CustomSidebar",
|
||||
props: ['menu'],
|
||||
data() {
|
||||
return {
|
||||
menu: [],
|
||||
collapsed: false,
|
||||
isOnMobile: false,
|
||||
hideToggle: true,
|
||||
@@ -44,14 +43,7 @@ export default {
|
||||
mounted() {
|
||||
this.onResize();
|
||||
window.addEventListener("resize", this.onResize);
|
||||
api.menu
|
||||
.get()
|
||||
.then((response) => {
|
||||
this.menu = response;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
});
|
||||
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
|
||||
@@ -1,13 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-container fluid class="bv-example-row" id="my-container">
|
||||
<b-row>
|
||||
<b-col md="10"><h5>Advanced Search</h5></b-col>
|
||||
<b-col md="2">
|
||||
<b-button variant="success" size="sm" class="float-right"
|
||||
><b-icon icon="plus"></b-icon>Request</b-button
|
||||
<b-alert
|
||||
:show="dismissCountDown"
|
||||
dismissible
|
||||
:variant="variant"
|
||||
@dismissed="dismissCountDown = 0"
|
||||
@dismiss-count-down="countDownChanged"
|
||||
>
|
||||
</b-col>
|
||||
{{ message }}
|
||||
</b-alert>
|
||||
<b-row>
|
||||
<b-col md="10"><h5>{{$t('ID_OPEN_SEARCH')}}</h5></b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col md="4">
|
||||
@@ -16,6 +20,7 @@
|
||||
target="popover-target-1"
|
||||
@closePopover="onClose"
|
||||
@savePopover="onOk"
|
||||
:title="addSearchTitle"
|
||||
>
|
||||
<template v-slot:target-item>
|
||||
<b-button
|
||||
@@ -25,13 +30,11 @@
|
||||
href="#"
|
||||
tabindex="0"
|
||||
>
|
||||
<b-icon icon="plus"></b-icon>Add Filter
|
||||
<b-icon icon="plus"></b-icon>{{$t('ID_ADD_FILTER')}}
|
||||
</b-button>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<b-form-group
|
||||
label="Add Serch filter criteria: "
|
||||
>
|
||||
<b-form-group>
|
||||
<b-form-checkbox-group
|
||||
v-model="selected"
|
||||
:options="filterOptions"
|
||||
@@ -45,7 +48,7 @@
|
||||
size="sm"
|
||||
@click="cleanAllTags"
|
||||
variant="danger"
|
||||
>Clean All</b-button
|
||||
>{{$t('ID_CLEAN_ALL')}}</b-button
|
||||
>
|
||||
</div>
|
||||
</b-col>
|
||||
@@ -53,23 +56,42 @@
|
||||
<b-col md="8">
|
||||
<div class="d-flex flex-row-reverse">
|
||||
<div class="p-2">
|
||||
<b-button v-b-modal.modal-prevent-closing variant="primary" size="sm">
|
||||
<b-icon icon="menu-button"></b-icon>Save Search
|
||||
<b-button
|
||||
@click="onClick"
|
||||
variant="primary"
|
||||
size="sm"
|
||||
>
|
||||
<b-icon icon="menu-button"></b-icon>{{$t('ID_SAVE_SEARCH')}}
|
||||
</b-button>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-button variant="danger" size="sm" @click="onDeleteSearch">
|
||||
<b-icon icon="trash"></b-icon>Delete Search
|
||||
<b-button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
@click="onDeleteSearch"
|
||||
:disabled="id == null"
|
||||
>
|
||||
<b-icon icon="trash"></b-icon>{{$t('ID_DELETE_SEARCH')}}
|
||||
</b-button>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-button variant="success" size="sm" @click="onJumpCase">
|
||||
<b-button
|
||||
variant="success"
|
||||
size="sm"
|
||||
@click="onJumpCase"
|
||||
>
|
||||
<b-icon icon="arrow-up-right-square"></b-icon>
|
||||
Jump
|
||||
{{$t('ID_JUMP')}}
|
||||
</b-button>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<input v-model="caseNumber" size="7" type="text" class="form-control" placeholder="Case Number"/>
|
||||
<input
|
||||
v-model="caseNumber"
|
||||
size="1"
|
||||
class="form-control"
|
||||
:placeholder="$t('ID_CASE_NUMBER_CAPITALIZED')"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</b-col>
|
||||
@@ -77,7 +99,6 @@
|
||||
<b-row>
|
||||
<b-col>
|
||||
<div class="d-flex flex-row">
|
||||
|
||||
<b-form-tags
|
||||
input-id="tags-pills"
|
||||
v-model="searchTags"
|
||||
@@ -96,7 +117,8 @@
|
||||
:variant="tagVariant"
|
||||
class="mr-1"
|
||||
>
|
||||
<component v-bind:is="tag"
|
||||
<component
|
||||
v-bind:is="tag"
|
||||
v-bind:info="searchTagsModels[tag]"
|
||||
v-bind:tag="tag"
|
||||
@updateSearchTag="updateSearchTag"
|
||||
@@ -121,7 +143,7 @@
|
||||
|
||||
<b-modal
|
||||
id="modal-prevent-closing"
|
||||
ref="modal"
|
||||
ref="saveFilter"
|
||||
:title="saveModalTitle"
|
||||
@show="resetModal"
|
||||
@hidden="resetModal"
|
||||
@@ -130,20 +152,19 @@
|
||||
<form ref="form" @submit.stop.prevent="handleSubmit">
|
||||
<b-form-group
|
||||
:state="nameState"
|
||||
label="Name"
|
||||
:label="$t('ID_NAME')"
|
||||
label-for="name-input"
|
||||
invalid-feedback="Name is required"
|
||||
:invalid-feedback="$t('ID_REQUIRED_FIELD')"
|
||||
>
|
||||
<b-form-input
|
||||
id="name-input"
|
||||
v-model="name"
|
||||
v-model="localName"
|
||||
:state="nameState"
|
||||
required
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
</form>
|
||||
</b-modal>
|
||||
|
||||
</b-container>
|
||||
</div>
|
||||
</template>
|
||||
@@ -152,109 +173,114 @@
|
||||
import SearchPopover from "./popovers/SearchPopover.vue";
|
||||
import CaseNumber from "./popovers/CaseNumber.vue";
|
||||
import DueDate from "./popovers/DueDate.vue";
|
||||
import LastModifiedDate from "./popovers/LastModifiedDate.vue";
|
||||
import CaseTitle from "./popovers/CaseTitle.vue";
|
||||
import ProcessName from "./popovers/ProcessName.vue";
|
||||
import ParticipatedLevel from "./popovers/ParticipatedLevel.vue";
|
||||
import CasePriority from "./popovers/CasePriority.vue";
|
||||
import SentBy from "./popovers/SentBy.vue";
|
||||
import TaskName from "./popovers/TaskName.vue";
|
||||
import CaseStatus from "./popovers/CaseStatus.vue";
|
||||
import CurrentUser from "./popovers/CurrentUser.vue";
|
||||
import api from "./../../api/index";
|
||||
|
||||
export default {
|
||||
name: "GenericFilter",
|
||||
props: ["id", "name"],
|
||||
components: {
|
||||
SearchPopover,
|
||||
CaseNumber,
|
||||
DueDate,
|
||||
LastModifiedDate,
|
||||
CaseTitle,
|
||||
ProcessName,
|
||||
ParticipatedLevel,
|
||||
SentBy,
|
||||
CaseStatus
|
||||
TaskName,
|
||||
CaseStatus,
|
||||
CasePriority,
|
||||
CurrentUser
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addSearchTitle: this.$i18n.t('ID_ADD_SEARCH_FILTER_CRITERIA'),
|
||||
dismissSecs: 5,
|
||||
dismissCountDown: 0,
|
||||
message: "",
|
||||
variant: "info",
|
||||
searchTags: [],
|
||||
searchTagsModels: {
|
||||
"CaseNumber": {
|
||||
text: "#",
|
||||
tagText: "From: 1, 3, 7 To: 15",
|
||||
default: {
|
||||
from: "",
|
||||
to: "",
|
||||
CaseNumber: {
|
||||
title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_CASE')}${this.$i18n.t('ID_IUD')}`,
|
||||
optionLabel: this.$i18n.t('ID_IUD'),
|
||||
detail: this.$i18n.t('ID_PLEASE_SET_A_RANGE_TO_CASES_TO_SEARCH')
|
||||
},
|
||||
DueDate: {
|
||||
title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_DUE_DATE')}`,
|
||||
optionLabel: this.$i18n.t('ID_DUE_DATE'),
|
||||
detail: this.$i18n.t('ID_PLEASE_SET_A_RANGE_OF_CASES_DUE_DATE_TO_SEARCH')
|
||||
},
|
||||
"DueDate": {
|
||||
text: "Due Date",
|
||||
tagText: "From: 01-01-2020 To: 01-01-2020",
|
||||
default: {
|
||||
from: "",
|
||||
to: "",
|
||||
LastModifiedDate: {
|
||||
title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_LAST_MODIFIED_DATE')}`,
|
||||
optionLabel: this.$i18n.t('ID_LAST_MODIFIED_DATE'),
|
||||
detail: this.$i18n.t('ID_PLEASE_SET_A_RANGE_OF_LAST_MODIFIED_CASES_DATE_TO_SEARCH')
|
||||
},
|
||||
|
||||
CaseTitle: {
|
||||
title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_CASE_TITLE')}`,
|
||||
optionLabel: this.$i18n.t('ID_CASE_TITLE'),
|
||||
detail: ""
|
||||
},
|
||||
"CaseTitle": {
|
||||
text: "Case",
|
||||
tagText: "Case: title",
|
||||
default: {
|
||||
name: ""
|
||||
}
|
||||
|
||||
ProcessName: {
|
||||
title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_PROCESS_NAME')}`,
|
||||
optionLabel: this.$i18n.t('ID_PROCESS_NAME'),
|
||||
detail: "",
|
||||
placeholder: this.$i18n.t('ID_PROCESS_NAME')
|
||||
},
|
||||
"ProcessName": {
|
||||
text: "Process",
|
||||
tagText: "Process: name",
|
||||
default: {
|
||||
name: ""
|
||||
}
|
||||
|
||||
},
|
||||
"ParticipatedLevel": {
|
||||
text: "Participated",
|
||||
tagText: "Process: name",
|
||||
default: {
|
||||
name: ""
|
||||
}
|
||||
|
||||
},
|
||||
"CasePriority": {
|
||||
text: "Priority",
|
||||
tagText: "Process: name",
|
||||
title: "Filter: Priority",
|
||||
label: "Please select the priority for the search",
|
||||
CasePriority: {
|
||||
title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_PRIORITY')}`,
|
||||
optionLabel: this.$i18n.t('ID_PRIORITY'),
|
||||
detail: this.$i18n.t('ID_PLEASE_SELECT_THE_PRIORITY_FOR_THE_SEARCH'),
|
||||
options: [
|
||||
{ text: 'Very Low', value: '1' },
|
||||
{ text: 'Low', value: '2' },
|
||||
{ text: 'Niormal', value: '3' },
|
||||
{ text: 'Very High', value: '4' },
|
||||
{ text: 'High', value: '5' }
|
||||
{ text: this.$i18n.t('ID_VERY_LOW'), value: "VL" },
|
||||
{ text: this.$i18n.t('ID_LOW'), value: "L" },
|
||||
{ text: this.$i18n.t('ID_NORMAL'), value: "N" },
|
||||
{ text: this.$i18n.t('ID_HIGH'), value: "H" },
|
||||
{ text: this.$i18n.t('ID_VERY_HIGH'), value: "VH" }
|
||||
]
|
||||
|
||||
},
|
||||
"SentBy": {
|
||||
text: "Sent By",
|
||||
title: "Filter: Sent By",
|
||||
placeHolder: "User name",
|
||||
TaskName: {
|
||||
title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_TASK')}`,
|
||||
optionLabel: this.$i18n.t('ID_TASK'),
|
||||
detail: "",
|
||||
placeholder: this.$i18n.t('ID_TASK_NAME')
|
||||
},
|
||||
"CaseStatus": {
|
||||
text: "Status",
|
||||
title: "Filter: Case Status",
|
||||
label: "Please select the status for the search",
|
||||
CaseStatus: {
|
||||
title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_STATUS')}`,
|
||||
optionLabel: this.$i18n.t('ID_STATUS'),
|
||||
detail: this.$i18n.t('ID_PLEASE_SELECT_THE_STATUS_FOR_THE_SEARCH'),
|
||||
options: [
|
||||
{ text: 'Draft', value: '1' },
|
||||
{ text: 'To Do', value: '2' },
|
||||
{ text: 'Completed', value: '4' },
|
||||
{ text: 'Canceled', value: '5' },
|
||||
{ text: 'Paused', value: '6' }
|
||||
{ text: this.$i18n.t('ID_CASES_STATUS_DRAFT'), value: "DRAFT" },
|
||||
{ text: this.$i18n.t('ID_CASES_STATUS_TO_DO'), value: "TO_DO" },
|
||||
{ text: this.$i18n.t('ID_CASES_STATUS_COMPLETED'), value: "COMPLETED" },
|
||||
{ text: this.$i18n.t('ID_CASES_STATUS_CANCELLED'), value: "CANCELLED" },
|
||||
{ text: this.$i18n.t('ID_CASES_STATUS_PAUSED'), value: "PAUSED" },
|
||||
]
|
||||
|
||||
},
|
||||
CurrentUser: {
|
||||
title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_CURRENT_USER')}`,
|
||||
optionLabel: this.$i18n.t('ID_CURRENT_USER'),
|
||||
detail: "",
|
||||
placeholder: this.$i18n.t('ID_USER_NAME'),
|
||||
default: {
|
||||
name: "",
|
||||
},
|
||||
},
|
||||
},
|
||||
text: "",
|
||||
selected: [],
|
||||
jsonFilter: {},
|
||||
caseNumber: "",
|
||||
saveModalTitle: "SaveSearch",
|
||||
name: '',
|
||||
nameState: null
|
||||
saveModalTitle: this.$i18n.t('ID_SAVE_SEARCH'),
|
||||
localName: "",
|
||||
nameState: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -262,20 +288,37 @@ export default {
|
||||
let options = [];
|
||||
_.forIn(this.searchTagsModels, function(value, key) {
|
||||
options.push({
|
||||
text: value.text,
|
||||
text: value.optionLabel,
|
||||
value: key,
|
||||
});
|
||||
});
|
||||
return options;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 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;
|
||||
},
|
||||
onClose() {
|
||||
this.popoverShow = false;
|
||||
},
|
||||
onOk() {
|
||||
this.$root.$emit('bv::hide::popover');
|
||||
this.searchTags = [...this.searchTags, ...this.selected];
|
||||
this.onClose();
|
||||
},
|
||||
cleanAllTags() {
|
||||
this.searchTags = [];
|
||||
@@ -293,16 +336,35 @@ export default {
|
||||
this.$emit("onSearch", this.jsonFilter);
|
||||
},
|
||||
updateSearchTag(params) {
|
||||
this.jsonFilter = {...this.jsonFilter, ...params}
|
||||
this.jsonFilter = { ...this.jsonFilter, ...params };
|
||||
},
|
||||
onJumpCase() {
|
||||
this.$emit("onJumpCase", {caseNumber: this.caseNumber});
|
||||
this.$emit("onJumpCase", this.caseNumber);
|
||||
},
|
||||
onClick() {
|
||||
if (this.id) {
|
||||
this.updateData(this.name);
|
||||
} else {
|
||||
this.$refs['saveFilter'].show();
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Delete Search handler
|
||||
*/
|
||||
onDeleteSearch() {
|
||||
api.filters
|
||||
.delete({
|
||||
id: this.id,
|
||||
})
|
||||
.then((response) => {
|
||||
|
||||
this.$emit("onRemoveFilter", this.id);
|
||||
})
|
||||
.catch((e) => {
|
||||
this.showAlert(e.message, "danger");
|
||||
});
|
||||
},
|
||||
checkFormValidity() {
|
||||
const valid = this.$refs.form.checkValidity();
|
||||
@@ -310,7 +372,7 @@ export default {
|
||||
return valid;
|
||||
},
|
||||
resetModal() {
|
||||
this.name = '';
|
||||
this.localName = "";
|
||||
this.nameState = null;
|
||||
},
|
||||
handleOk(bvModalEvt) {
|
||||
@@ -326,8 +388,26 @@ export default {
|
||||
}
|
||||
// Hide the modal manually
|
||||
this.$nextTick(() => {
|
||||
this.$bvModal.hide('modal-prevent-closing');
|
||||
this.$bvModal.hide("modal-prevent-closing");
|
||||
this.saveData(this.localName);
|
||||
});
|
||||
},
|
||||
saveData(name) {
|
||||
api.filters
|
||||
.post({
|
||||
name: name,
|
||||
filters: JSON.stringify({ uno: "first" }),
|
||||
})
|
||||
.then((response) => {
|
||||
this.$emit("onSubmit", response.data);
|
||||
})
|
||||
.catch((e) => {
|
||||
this.showAlert(e.message, "danger");
|
||||
});
|
||||
},
|
||||
updateData() {
|
||||
this.onDeleteSearch();
|
||||
this.saveData(this.name);
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -337,6 +417,19 @@ export default {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.bv-example-row-flex-cols .row {
|
||||
min-height: 10rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.bv-example-row .row + .row {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.bv-example-row-flex-cols .row {
|
||||
min-height: 10rem;
|
||||
}
|
||||
|
||||
@@ -2,8 +2,10 @@
|
||||
<div>
|
||||
<SearchPopover
|
||||
:target="tag"
|
||||
:showPopover="showPopover"
|
||||
@closePopover="onClose"
|
||||
@savePopover="onOk"
|
||||
:title="info.title"
|
||||
>
|
||||
<template v-slot:target-item>
|
||||
<div @click="onClickTag(tag)" :id="tag">
|
||||
@@ -12,26 +14,22 @@
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<input
|
||||
v-model="from"
|
||||
type="text"
|
||||
size="210"
|
||||
class="form-control"
|
||||
placeholder="From Case number #"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input
|
||||
v-model="to"
|
||||
type="text"
|
||||
size="210"
|
||||
class="form-control"
|
||||
placeholder="To Case number # (Optional)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p>{{ info.detail }}</p>
|
||||
<form ref="form" @submit.stop.prevent="handleSubmit">
|
||||
<b-form-group
|
||||
:state="valueState"
|
||||
label-for="name-input"
|
||||
:invalid-feedback="$t('ID_INVALID_CASE_NUMBER_RANGE')"
|
||||
>
|
||||
<b-form-input
|
||||
id="name-input"
|
||||
v-model="value"
|
||||
:placeholder="$t('ID_CASE_NUMBER_FILTER_EG')"
|
||||
:state="valueState"
|
||||
required
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
</form>
|
||||
</template>
|
||||
</SearchPopover>
|
||||
</div>
|
||||
@@ -47,26 +45,46 @@ export default {
|
||||
props: ["tag", "info"],
|
||||
data() {
|
||||
return {
|
||||
from: "",
|
||||
to: "",
|
||||
value: "",
|
||||
valueState: null,
|
||||
showPopover: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tagText: function() {
|
||||
return `From: ${this.from} To: ${this.to}`;
|
||||
return `${this.$i18n.t("ID_IUD")}: ${this.value} `;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onClose() {},
|
||||
onOk() {
|
||||
this.$emit("updateSearchTag", { from: this.from, to: this.to });
|
||||
onClose() {
|
||||
this.showPopover = true;
|
||||
},
|
||||
checkFormValidity() {
|
||||
const regex = /^((\d+?)|(\d+?)(?:\-(\d+?))?)(?:\, ((\d+?)|(\d+?)(?:\-(\d+?))?))*$/;
|
||||
regex.test(this.value);
|
||||
this.valueState = regex.test(this.value);
|
||||
return this.valueState;
|
||||
},
|
||||
handleSubmit() {
|
||||
let self = this;
|
||||
// Exit when the form isn't valid
|
||||
if (!this.checkFormValidity()) {
|
||||
return;
|
||||
}
|
||||
// Hide the modal manually
|
||||
this.$nextTick(() => {
|
||||
this.$emit("updateSearchTag", {
|
||||
filterCases: self.value.replace(/ /g, ""),
|
||||
});
|
||||
self.$root.$emit("bv::hide::popover");
|
||||
});
|
||||
},
|
||||
onOk() {
|
||||
this.handleSubmit();
|
||||
},
|
||||
onRemoveTag() {},
|
||||
onClickTag(tag) {
|
||||
this.$root.$emit("bv::hide::popover");
|
||||
},
|
||||
handler() {
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
<template>
|
||||
<div id="">
|
||||
<SearchPopover
|
||||
:target="tag"
|
||||
@closePopover="onClose"
|
||||
@savePopover="onOk"
|
||||
>
|
||||
<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>
|
||||
@@ -12,7 +8,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<h6>{{ info.title }}</h6>
|
||||
<p>{{ info.detail }}</p>
|
||||
<b-form-group :label="info.label">
|
||||
<b-form-checkbox
|
||||
v-for="option in info.options"
|
||||
@@ -45,20 +41,34 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
tagText: function() {
|
||||
return `Priority: `;
|
||||
return `${this.$i18n.t('ID_PRIORITY')}: ${this.selected.join(",")}`;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onClose() {
|
||||
},
|
||||
/**
|
||||
* Ok button handler
|
||||
*/
|
||||
onOk() {
|
||||
|
||||
this.handleSubmit();
|
||||
},
|
||||
onRemoveTag() {},
|
||||
/**
|
||||
* Submit button handler
|
||||
*/
|
||||
handleSubmit() {
|
||||
this.$nextTick(() => {
|
||||
this.$emit("updateSearchTag", {
|
||||
priorities: this.selected.join(","),
|
||||
});
|
||||
this.$root.$emit("bv::hide::popover");
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Tag Click handler
|
||||
*/
|
||||
onClickTag(tag) {
|
||||
this.$root.$emit("bv::hide::popover");
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<div id="">
|
||||
<SearchPopover
|
||||
:target="tag"
|
||||
@closePopover="onClose"
|
||||
@savePopover="onOk"
|
||||
:title="info.title"
|
||||
>
|
||||
<template v-slot:target-item>
|
||||
<div @click="onClickTag(tag)" :id="tag">
|
||||
@@ -12,7 +12,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<h6>{{ info.title }}</h6>
|
||||
<h6>{{ info.detail }}</h6>
|
||||
<b-form-group :label="info.label">
|
||||
<b-form-checkbox
|
||||
v-for="option in info.options"
|
||||
@@ -45,20 +45,34 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
tagText: function() {
|
||||
return `Case Status: `;
|
||||
return `${this.$i18n.t('ID_STATUS')}: ${this.selected.join(",")}`;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onClose() {
|
||||
},
|
||||
/**
|
||||
* Ok button handler
|
||||
*/
|
||||
onOk() {
|
||||
|
||||
this.handleSubmit();
|
||||
},
|
||||
onRemoveTag() {},
|
||||
/**
|
||||
* Submit button handler
|
||||
*/
|
||||
handleSubmit() {
|
||||
this.$nextTick(() => {
|
||||
this.$emit("updateSearchTag", {
|
||||
caseStatuses: this.selected.join(","),
|
||||
});
|
||||
this.$root.$emit("bv::hide::popover");
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Tag Click handler
|
||||
*/
|
||||
onClickTag(tag) {
|
||||
this.$root.$emit("bv::hide::popover");
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
:target="tag"
|
||||
@closePopover="onClose"
|
||||
@savePopover="onOk"
|
||||
:title="info.title"
|
||||
>
|
||||
<template v-slot:target-item>
|
||||
<div @click="onClickTag(tag)" :id="tag">
|
||||
@@ -12,14 +13,22 @@
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<h6>Filter: Case Title</h6>
|
||||
<input
|
||||
<p>{{ info.detail }}</p>
|
||||
<form ref="form" @submit.stop.prevent="handleSubmit">
|
||||
<b-form-group
|
||||
:state="valueState"
|
||||
label-for="name-input"
|
||||
:invalid-feedback="$t('ID_REQUIRED_FIELD')"
|
||||
>
|
||||
<b-form-input
|
||||
id="name-input"
|
||||
v-model="title"
|
||||
type="text"
|
||||
size="150"
|
||||
class="form-control"
|
||||
placeholder="Case Title Name"
|
||||
/>
|
||||
:placeholder="$t('ID_CASE_TITLE_NAME')"
|
||||
:state="valueState"
|
||||
required
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
</form>
|
||||
</template>
|
||||
</SearchPopover>
|
||||
</div>
|
||||
@@ -36,23 +45,48 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
title: "",
|
||||
valueState: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tagText: function() {
|
||||
return `Case: ${this.title}`;
|
||||
return `${this.$i18n.t("ID_CASE_TITLE")}: ${this.title}`;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onClose() {
|
||||
/**
|
||||
* Check the form validations and requiered fields
|
||||
*/
|
||||
checkFormValidity() {
|
||||
const valid = this.$refs.form.checkValidity();
|
||||
this.valueState = valid;
|
||||
return valid;
|
||||
},
|
||||
onOk() {
|
||||
/**
|
||||
* Submit form handler
|
||||
*/
|
||||
handleSubmit() {
|
||||
let self = this;
|
||||
// Exit when the form isn't valid
|
||||
if (!this.checkFormValidity()) {
|
||||
return;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.$emit("updateSearchTag", {
|
||||
columnSearch: "APP_TITLE",
|
||||
search: this.title,
|
||||
caseTitle: self.title,
|
||||
});
|
||||
self.$root.$emit("bv::hide::popover");
|
||||
});
|
||||
},
|
||||
onRemoveTag() {},
|
||||
/**
|
||||
* On ok event handler
|
||||
*/
|
||||
onOk() {
|
||||
this.handleSubmit();
|
||||
},
|
||||
/**
|
||||
* On ok event handler
|
||||
*/
|
||||
onClickTag(tag) {
|
||||
this.$root.$emit("bv::hide::popover");
|
||||
},
|
||||
|
||||
117
resources/assets/js/components/search/popovers/CurrentUser.vue
Normal file
117
resources/assets/js/components/search/popovers/CurrentUser.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<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="users"
|
||||
:serializer="(item) => item.USR_FULLNAME"
|
||||
|
||||
:placeholder="info.placeholder"
|
||||
required
|
||||
:state="valueState"
|
||||
/>
|
||||
</b-form-group>
|
||||
</form>
|
||||
</template>
|
||||
</SearchPopover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SearchPopover from "./SearchPopover.vue";
|
||||
import VueBootstrapTypeahead from "vue-bootstrap-typeahead";
|
||||
import api from "./../../../api/index";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SearchPopover,
|
||||
VueBootstrapTypeahead
|
||||
},
|
||||
props: ["tag", "info"],
|
||||
data() {
|
||||
return {
|
||||
minMatchingChars: 1,
|
||||
query: "",
|
||||
users: [],
|
||||
valueState: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tagText: function() {
|
||||
return `${this.$i18n.t('ID_USER')}: ${this.query}`;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
query(newQuery) {
|
||||
api.filters
|
||||
.userValues(this.query)
|
||||
.then((response) => {
|
||||
this.users = response.data;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Form validations review
|
||||
*/
|
||||
checkFormValidity() {
|
||||
const valid = this.query !== "";
|
||||
this.valueState = valid;
|
||||
return valid;
|
||||
},
|
||||
/**
|
||||
* On Ok event handler
|
||||
*/
|
||||
onOk() {
|
||||
this.handleSubmit();
|
||||
},
|
||||
/**
|
||||
* Form submit handler
|
||||
*/
|
||||
handleSubmit() {
|
||||
// Exit when the form isn't valid
|
||||
if (!this.checkFormValidity()) {
|
||||
return;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
let user = _.find(this.users, { USR_FULLNAME: this.query });
|
||||
this.$emit("updateSearchTag", {
|
||||
userId: user.USR_UID
|
||||
});
|
||||
this.$root.$emit("bv::hide::popover");
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Cick tag event handler
|
||||
*/
|
||||
onClickTag() {
|
||||
this.$root.$emit("bv::hide::popover");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@@ -2,36 +2,41 @@
|
||||
<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 @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">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<b-form-datepicker id="from" v-model="from" placeholder="From Due Date"></b-form-datepicker>
|
||||
<b-form-group >
|
||||
<b-form-datepicker
|
||||
id="from"
|
||||
v-model="from"
|
||||
:placeholder="$t('ID_FROM_DUE_DATE')"
|
||||
></b-form-datepicker>
|
||||
</b-form-group>
|
||||
</div>
|
||||
<div class="col">
|
||||
<b-form-datepicker id="to" v-model="to" placeholder="To Due Date"></b-form-datepicker>
|
||||
<b-form-group>
|
||||
<b-form-datepicker
|
||||
id="to"
|
||||
v-model="to"
|
||||
:placeholder="$t('ID_TO_DUE_DATE')"
|
||||
></b-form-datepicker>
|
||||
</b-form-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</template>
|
||||
</SearchPopover>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -42,7 +47,7 @@ import SearchPopover from "./SearchPopover.vue";
|
||||
components: {
|
||||
SearchPopover,
|
||||
},
|
||||
props: ['tag','info'],
|
||||
props: ["tag", "info"],
|
||||
data() {
|
||||
return {
|
||||
from: "",
|
||||
@@ -51,28 +56,32 @@ import SearchPopover from "./SearchPopover.vue";
|
||||
},
|
||||
computed: {
|
||||
tagText: function() {
|
||||
return `From: ${this.from} To: ${this.to}`;
|
||||
},
|
||||
return `${this.$i18n.t('ID_FROM')}: ${this.from} ${this.$i18n.t('ID_TO')}: ${this.to}`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClose() {
|
||||
// this.popoverShow = false;
|
||||
// this.$emit("closePopover");
|
||||
},
|
||||
onOk() {
|
||||
/**
|
||||
* Submit form handler
|
||||
*/
|
||||
handleSubmit() {
|
||||
this.$emit("updateSearchTag", {
|
||||
columnSearch: "APP_TITLE",
|
||||
search: null,
|
||||
dateFrom: this.from,
|
||||
dateTo: this.to
|
||||
dueDateFrom: this.from,
|
||||
dueDateTo: this.to,
|
||||
});
|
||||
},
|
||||
/**
|
||||
* On ok event handler
|
||||
*/
|
||||
onOk() {
|
||||
this.handleSubmit();
|
||||
},
|
||||
/**
|
||||
* On click tag event handler
|
||||
*/
|
||||
onClickTag(tag) {
|
||||
this.$root.$emit("bv::hide::popover");
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
<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">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<b-form-group>
|
||||
<b-form-datepicker
|
||||
id="from"
|
||||
v-model="from"
|
||||
:placeholder="$t('ID_FROM_LAST_MODIFIED_DATE')"
|
||||
></b-form-datepicker>
|
||||
</b-form-group>
|
||||
</div>
|
||||
<div class="col">
|
||||
<b-form-group>
|
||||
<b-form-datepicker
|
||||
id="to"
|
||||
v-model="to"
|
||||
:placeholder="$t('ID_TO_LAST_MODIFIED_DATE')"
|
||||
></b-form-datepicker>
|
||||
</b-form-group>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</SearchPopover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SearchPopover from "./SearchPopover.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
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
|
||||
});
|
||||
},
|
||||
/**
|
||||
* On ok event handler
|
||||
*/
|
||||
onOk() {
|
||||
this.handleSubmit();
|
||||
},
|
||||
/**
|
||||
* On click tag event handler
|
||||
*/
|
||||
onClickTag(tag) {
|
||||
this.$root.$emit("bv::hide::popover");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@@ -1,10 +1,6 @@
|
||||
<template>
|
||||
<div id="">
|
||||
<SearchPopover
|
||||
:target="tag"
|
||||
@closePopover="onClose"
|
||||
@savePopover="onOk"
|
||||
>
|
||||
<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>
|
||||
@@ -12,15 +8,27 @@
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<h6>Filter: Process</h6>
|
||||
<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="Search GitHub Users"
|
||||
:placeholder="info.placeholder"
|
||||
required
|
||||
:state="valueState"
|
||||
/>
|
||||
</b-form-group>
|
||||
</form>
|
||||
</template>
|
||||
</SearchPopover>
|
||||
</div>
|
||||
@@ -29,8 +37,8 @@
|
||||
<script>
|
||||
import SearchPopover from "./SearchPopover.vue";
|
||||
import VueBootstrapTypeahead from "vue-bootstrap-typeahead";
|
||||
import api from "./../../../api/index";
|
||||
|
||||
// OR
|
||||
export default {
|
||||
components: {
|
||||
SearchPopover,
|
||||
@@ -39,48 +47,67 @@ export default {
|
||||
props: ["tag", "info"],
|
||||
data() {
|
||||
return {
|
||||
minMatchingChars: 1,
|
||||
query: "",
|
||||
process: [],
|
||||
valueState: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
ProcessMaker() {
|
||||
return window.ProcessMaker;
|
||||
},
|
||||
tagText: function() {
|
||||
return `Process: ${this.query}`;
|
||||
return `${this.$i18n.t("ID_PROCESS")}: ${this.query}`;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
query(newQuery) {
|
||||
ProcessMaker.apiClient
|
||||
.post(
|
||||
`http://localhost:350/sysworkflow/en/neoclassic/cases/casesList_Ajax?actionAjax=processListExtJs&action=search`,
|
||||
{
|
||||
query: this.query,
|
||||
}
|
||||
)
|
||||
api.filters
|
||||
.processList(this.query)
|
||||
.then((response) => {
|
||||
this.process = response.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
.catch((e) => {
|
||||
console.error(err);
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onClose() {},
|
||||
/**
|
||||
* Form validations review
|
||||
*/
|
||||
checkFormValidity() {
|
||||
const valid = this.query !== "";
|
||||
this.valueState = valid;
|
||||
return valid;
|
||||
},
|
||||
/**
|
||||
* On Ok event handler
|
||||
*/
|
||||
onOk() {
|
||||
this.handleSubmit();
|
||||
},
|
||||
/**
|
||||
* 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", {
|
||||
columnSearch: "APP_TITLE",
|
||||
process_label: this.query,
|
||||
process: _.find(this.process, { PRO_TITLE: this.query }).PRO_ID,
|
||||
process: process.PRO_ID,
|
||||
});
|
||||
this.$root.$emit("bv::hide::popover");
|
||||
});
|
||||
},
|
||||
onClickTag(tag) {
|
||||
/**
|
||||
* Cick tag event handler
|
||||
*/
|
||||
onClickTag() {
|
||||
this.$root.$emit("bv::hide::popover");
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<slot name="target-item">here component</slot>
|
||||
<slot name="target-item"></slot>
|
||||
|
||||
<b-popover
|
||||
:show.sync="popoverShow"
|
||||
@@ -15,15 +15,13 @@
|
||||
>×</span
|
||||
>
|
||||
</b-button>
|
||||
|
||||
{{ title }}
|
||||
</template>
|
||||
<div>
|
||||
<slot name="body">
|
||||
popover body
|
||||
</slot>
|
||||
<slot name="body"></slot>
|
||||
<div class="float-right">
|
||||
<b-button @click="onClose" size="sm" variant="danger">Cancel</b-button>
|
||||
<b-button @click="onSave" size="sm" variant="primary">Save</b-button>
|
||||
<b-button @click="onClose" size="sm" variant="danger"> {{$t('ID_CANCEL')}}</b-button>
|
||||
<b-button @click="onSave" size="sm" variant="primary">{{$t('ID_SAVE')}}</b-button>
|
||||
</div>
|
||||
</div>
|
||||
</b-popover>
|
||||
@@ -31,25 +29,30 @@
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['target'],
|
||||
props: ['target', "title"],
|
||||
data() {
|
||||
return {
|
||||
popoverShow: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Close buton click handler
|
||||
*/
|
||||
onClose() {
|
||||
this.popoverShow = false;
|
||||
this.$emit('closePopover');
|
||||
},
|
||||
/**
|
||||
* Save button click handler
|
||||
*/
|
||||
onSave() {
|
||||
this.$emit('savePopover');
|
||||
this.onClose();
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.popover {
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<div id="">
|
||||
<SearchPopover
|
||||
:target="tag"
|
||||
@closePopover="onClose"
|
||||
@savePopover="onOk"
|
||||
>
|
||||
<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>
|
||||
<h6>{{ info.title }}</h6>
|
||||
<input v-model="title" type="text" size="150" class="form-control" :placeholder="info.placeHolder">
|
||||
</template>
|
||||
</SearchPopover>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
|
||||
<script>
|
||||
import SearchPopover from "./SearchPopover.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SearchPopover,
|
||||
},
|
||||
props: ['tag','info'],
|
||||
data() {
|
||||
return {
|
||||
title: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tagText: function () {
|
||||
return `Set By: `;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClose() {
|
||||
},
|
||||
onOk() {
|
||||
this.$emit("updateSearchTag", {
|
||||
columnSearch: "APP_TITLE",
|
||||
search: this.title,
|
||||
});
|
||||
},
|
||||
onRemoveTag() {
|
||||
|
||||
},
|
||||
onClickTag(tag) {
|
||||
this.$root.$emit("bv::hide::popover");
|
||||
}
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
117
resources/assets/js/components/search/popovers/TaskName.vue
Normal file
117
resources/assets/js/components/search/popovers/TaskName.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<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_REQUIRED_FIELD')"
|
||||
>
|
||||
<vue-bootstrap-typeahead
|
||||
class="mb-4"
|
||||
id="name"
|
||||
v-model="query"
|
||||
:minMatchingChars="minMatchingChars"
|
||||
:data="tasks"
|
||||
:serializer="(item) => item.PRO_TITLE"
|
||||
@hit="selectedUser = $event"
|
||||
:placeholder="info.placeholder"
|
||||
required
|
||||
:state="valueState"
|
||||
/>
|
||||
</b-form-group>
|
||||
</form>
|
||||
</template>
|
||||
</SearchPopover>
|
||||
</div>
|
||||
</template>
|
||||
|
|
||||
<script>
|
||||
import SearchPopover from "./SearchPopover.vue";
|
||||
import VueBootstrapTypeahead from "vue-bootstrap-typeahead";
|
||||
import api from "./../../../api/index";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SearchPopover,
|
||||
VueBootstrapTypeahead
|
||||
},
|
||||
props: ["tag", "info"],
|
||||
data() {
|
||||
return {
|
||||
minMatchingChars: 1,
|
||||
query: "",
|
||||
tasks: [],
|
||||
valueState: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tagText: function() {
|
||||
return `${this.$i18n.t("ID_TASK_NAME")}: ${this.query}`;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
query(newQuery) {
|
||||
api.filters
|
||||
.processList(this.query)
|
||||
.then((response) => {
|
||||
this.tasks = response.data;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(err);
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Form validations review
|
||||
*/
|
||||
checkFormValidity() {
|
||||
const valid = this.query !== "";
|
||||
this.valueState = valid;
|
||||
return valid;
|
||||
},
|
||||
/**
|
||||
* On Ok event handler
|
||||
*/
|
||||
onOk() {
|
||||
this.handleSubmit();
|
||||
},
|
||||
/**
|
||||
* Form submit handler
|
||||
*/
|
||||
handleSubmit() {
|
||||
// Exit when the form isn't valid
|
||||
if (!this.checkFormValidity()) {
|
||||
return;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
let task = _.find(this.tasks, { PRO_TITLE: this.query });
|
||||
this.$emit("updateSearchTag", {
|
||||
task: task.PRO_ID,
|
||||
});
|
||||
this.$root.$emit("bv::hide::popover");
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Cick tag event handler
|
||||
*/
|
||||
onClickTag() {
|
||||
this.$root.$emit("bv::hide::popover");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@@ -1,7 +1,15 @@
|
||||
<template>
|
||||
<div id="v-mycases3" ref="v-mycases2" class="v-container-mycases">
|
||||
<button-fleft :data="newCase"></button-fleft>
|
||||
<GenericFilter />
|
||||
<GenericFilter
|
||||
:id="id"
|
||||
:name="name"
|
||||
@onJumpCase="onJumpCase"
|
||||
@onSubmit="onSubmitFilter"
|
||||
@onRemoveFilter="onRemoveFilter"
|
||||
@onSearch="onSearch"
|
||||
/>
|
||||
|
||||
<modal-new-request ref="newRequest"></modal-new-request>
|
||||
|
||||
<v-server-table
|
||||
@@ -14,7 +22,7 @@
|
||||
<b-icon
|
||||
icon="exclamation-circle-fill"
|
||||
variant="primary"
|
||||
@click="caseDetail(props)"
|
||||
@click="openCaseDetail(props.row)"
|
||||
></b-icon>
|
||||
</div>
|
||||
<div slot="case_number" slot-scope="props">
|
||||
@@ -26,18 +34,29 @@
|
||||
<div slot="process_name" slot-scope="props">
|
||||
{{ props.row.PROCESS_NAME }}
|
||||
</div>
|
||||
<!-- <div slot="pending_taks" slot-scope="props">
|
||||
<GroupedCell :data="props.row.PENDING_TASKS" />
|
||||
</div> -->
|
||||
<div slot="status" slot-scope="props">{{ props.row.STATUS }}</div>
|
||||
<div slot="start_date" slot-scope="props">
|
||||
{{ props.row.START_DATE }}
|
||||
<div slot="task" slot-scope="props">
|
||||
<TaskCell :data="props.row.TASK" />
|
||||
</div>
|
||||
<div slot="finish_date" slot-scope="props">
|
||||
{{ props.row.FINISH_DATE }}
|
||||
<div slot="status" slot-scope="props">
|
||||
{{ props.row.STATUS }}
|
||||
</div>
|
||||
<div slot="duration" slot-scope="props">
|
||||
{{ props.row.DURATION }}
|
||||
<div slot="current_user" slot-scope="props">
|
||||
{{
|
||||
nameFormatCases(
|
||||
props.row.USR_FIRSTNAME,
|
||||
props.row.USR_LASTNAME,
|
||||
props.row.USR_USERNAME
|
||||
)
|
||||
}}
|
||||
</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 class="btn-default">
|
||||
@@ -53,7 +72,9 @@
|
||||
import ButtonFleft from "../components/home/ButtonFleft.vue";
|
||||
import ModalNewRequest from "./ModalNewRequest.vue";
|
||||
import GenericFilter from "../components/search/GenericFilter";
|
||||
import TaskCell from "../components/vuetable/TaskCell.vue";
|
||||
import api from "./../api/index";
|
||||
import { Event } from "vue-tables-2";
|
||||
|
||||
export default {
|
||||
name: "AdvancedSearch",
|
||||
@@ -61,13 +82,15 @@ export default {
|
||||
GenericFilter,
|
||||
ButtonFleft,
|
||||
ModalNewRequest,
|
||||
TaskCell
|
||||
},
|
||||
props: {},
|
||||
props: ["id", "name"],
|
||||
data() {
|
||||
return {
|
||||
metrics: [],
|
||||
filter: "CASES_INBOX",
|
||||
allView: [],
|
||||
jsonFilters: null,
|
||||
filterHeader: "STARTED_BY_ME",
|
||||
headers: [],
|
||||
newCase: {
|
||||
@@ -82,10 +105,11 @@ export default {
|
||||
"case_number",
|
||||
"case_title",
|
||||
"process_name",
|
||||
"status",
|
||||
"start_date",
|
||||
"finish_date",
|
||||
"duration",
|
||||
"task",
|
||||
"current_user",
|
||||
"due_date",
|
||||
"delegation_date",
|
||||
"priority",
|
||||
"actions",
|
||||
],
|
||||
tableData: [],
|
||||
@@ -96,11 +120,11 @@ export default {
|
||||
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
|
||||
case_title: this.$i18n.t("ID_CASE_TITLE"),
|
||||
process_name: this.$i18n.t("ID_PROCESS_NAME"),
|
||||
pending_taks: this.$i18n.t("PENDdING_TASKS"),
|
||||
status: this.$i18n.t("ID_CASESLIST_APP_STATUS"),
|
||||
start_date: this.$i18n.t("ID_START_DATE"),
|
||||
finish_date: this.$i18n.t("ID_FINISH_DATE"),
|
||||
duration: this.$i18n.t("ID_DURATION"),
|
||||
task: this.$i18n.t("ID_TASK"),
|
||||
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"),
|
||||
actions: "",
|
||||
},
|
||||
selectable: {
|
||||
@@ -114,48 +138,12 @@ export default {
|
||||
requestFunction(data) {
|
||||
return this.$parent.$parent.getCasesForVueTable();
|
||||
},
|
||||
customFilters: ["myfilter"],
|
||||
},
|
||||
translations: null,
|
||||
pmDateFormat: "Y-m-d H:i:s",
|
||||
apiParams: {
|
||||
action: "todo",
|
||||
list: "inbox",
|
||||
filter: "",
|
||||
search: "",
|
||||
sort: "APP_NUMBER",
|
||||
dir: "DESC",
|
||||
category: "",
|
||||
process: "",
|
||||
filterStatus: "",
|
||||
paged: true,
|
||||
start: 0,
|
||||
limit: 10,
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// this.$refs.vueTable24.refresh();
|
||||
this.$refs.test.refresh();
|
||||
this.getHeaders();
|
||||
},
|
||||
watch: {},
|
||||
computed: {
|
||||
ProcessMaker() {
|
||||
return window.ProcessMaker;
|
||||
},
|
||||
},
|
||||
updated() {},
|
||||
beforeCreate() {},
|
||||
methods: {
|
||||
/**
|
||||
* Get Cases Headers from BE
|
||||
*/
|
||||
getHeaders() {
|
||||
let that = this;
|
||||
api.casesHeader.get().then((response) => {
|
||||
that.headers = that.formatCasesHeaders(response.data);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Get cases data by header
|
||||
*/
|
||||
@@ -164,14 +152,13 @@ export default {
|
||||
dt;
|
||||
return new Promise((resolutionFunc, rejectionFunc) => {
|
||||
api.cases
|
||||
.search({
|
||||
type: that.filterHeader,
|
||||
})
|
||||
.search(that.jsonFilters)
|
||||
.then((response) => {
|
||||
dt = that.formatDataResponse(response.data);
|
||||
dt = that.formatDataResponse(response.data.data);
|
||||
console.log(dt);
|
||||
resolutionFunc({
|
||||
data: dt,
|
||||
count: response.total,
|
||||
count: response.data.total,
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
@@ -180,7 +167,7 @@ export default {
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Format Response API TODO to grid inbox and columns
|
||||
* Format Response API TODO to grid todo and columns
|
||||
*/
|
||||
formatDataResponse(response) {
|
||||
let data = [];
|
||||
@@ -189,11 +176,19 @@ export default {
|
||||
CASE_NUMBER: v.APP_NUMBER,
|
||||
CASE_TITLE: v.APP_TITLE,
|
||||
PROCESS_NAME: v.PRO_TITLE,
|
||||
STATUS: v.APP_STATUS,
|
||||
START_DATE: v.DEL_DELEGATE_DATE_LABEL,
|
||||
FINISH_DATE: v.DEL_DELEGATE_DATE_LABEL,
|
||||
PENDING_TASKS: v.PENDING_TASKS,
|
||||
DURATION: v.DURATION_LABEL,
|
||||
TASK: {
|
||||
TITLE: v.TAS_TITLE,
|
||||
CODE_COLOR: v.TAS_COLOR,
|
||||
COLOR: v.TAS_COLOR_LABEL,
|
||||
},
|
||||
USR_FIRSTNAME: v.USR_FIRSTNAME,
|
||||
USR_LASTNAME: v.USR_LASTNAME,
|
||||
USR_USERNAME: v.USR_USERNAME,
|
||||
DUE_DATE: v.DEL_TASK_DUE_DATE,
|
||||
DELEGATION_DATE: v.DEL_DELEGATE_DATE,
|
||||
PRIORITY: v.DEL_PRIORITY_LABEL,
|
||||
DEL_INDEX: v.DEL_INDEX,
|
||||
APP_UID: v.APP_UID,
|
||||
});
|
||||
});
|
||||
return data;
|
||||
@@ -223,7 +218,9 @@ export default {
|
||||
nameFormat = lastName + " " + name;
|
||||
} else if (this.nameFormat === "@lastName, @firstName") {
|
||||
nameFormat = lastName + ", " + name;
|
||||
} else if (this.nameFormat === "@lastName, @firstName (@userName)") {
|
||||
} else if (
|
||||
this.nameFormat === "@lastName, @firstName (@userName)"
|
||||
) {
|
||||
nameFormat = lastName + ", " + name + " (" + userName + ")";
|
||||
} else {
|
||||
nameFormat = name + " " + lastName;
|
||||
@@ -281,13 +278,19 @@ export default {
|
||||
} else if (this.pmDateFormat === "Y/m/d") {
|
||||
dateToConvert = dateFormat(stringToDate, "yyyy/mm/dd");
|
||||
} else if (this.pmDateFormat === "F j, Y, g:i a") {
|
||||
dateToConvert = dateFormat(stringToDate, "mmmm d, yyyy, h:MM tt");
|
||||
dateToConvert = dateFormat(
|
||||
stringToDate,
|
||||
"mmmm d, yyyy, h:MM tt"
|
||||
);
|
||||
} else if (this.pmDateFormat === "m.d.y") {
|
||||
dateToConvert = dateFormat(stringToDate, "mm.dd.yy");
|
||||
} else if (this.pmDateFormat === "j, n, Y") {
|
||||
dateToConvert = dateFormat(stringToDate, "d,m,yyyy");
|
||||
} else if (this.pmDateFormat === "D M j G:i:s T Y") {
|
||||
dateToConvert = dateFormat(stringToDate, "ddd mmm d HH:MM:ss Z yyyy");
|
||||
dateToConvert = dateFormat(
|
||||
stringToDate,
|
||||
"ddd mmm d HH:MM:ss Z yyyy"
|
||||
);
|
||||
} else if (this.pmDateFormat === "M d, Y") {
|
||||
dateToConvert = dateFormat(stringToDate, "mmm dd, yyyy");
|
||||
} else if (this.pmDateFormat === "m D, Y") {
|
||||
@@ -303,7 +306,10 @@ export default {
|
||||
} else if (this.pmDateFormat === "d.m.Y") {
|
||||
dateToConvert = dateFormat(stringToDate, "mm.dd.yyyy");
|
||||
} else {
|
||||
dateToConvert = dateFormat(stringToDate, 'dd "de" mmmm "de" yyyy');
|
||||
dateToConvert = dateFormat(
|
||||
stringToDate,
|
||||
'dd "de" mmmm "de" yyyy'
|
||||
);
|
||||
}
|
||||
return dateToConvert;
|
||||
},
|
||||
@@ -334,50 +340,56 @@ export default {
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Format Response from HEADERS
|
||||
* @param {*} response
|
||||
* Open case detail
|
||||
*
|
||||
* @param {object} item
|
||||
*/
|
||||
formatCasesHeaders(response) {
|
||||
let data = [],
|
||||
that = this,
|
||||
info = {
|
||||
STARTED_BY_ME: {
|
||||
icon: "fas fa-inbox",
|
||||
class: "btn-primary",
|
||||
},
|
||||
COMPLETED: {
|
||||
icon: "fas fa-check-square",
|
||||
class: "btn-success",
|
||||
},
|
||||
IN_PROGRESS: {
|
||||
icon: "fas fa-tasks",
|
||||
class: "btn-danger",
|
||||
},
|
||||
SUPERVISING: {
|
||||
icon: "fas fa-binoculars",
|
||||
class: "btn-warning",
|
||||
},
|
||||
openCaseDetail(item) {
|
||||
this.$parent.dataCase = {
|
||||
APP_UID: item.APP_UID,
|
||||
DEL_INDEX: item.DEL_INDEX,
|
||||
};
|
||||
_.forEach(response, (v) => {
|
||||
data.push({
|
||||
title: v.name,
|
||||
counter: v.count,
|
||||
item: v.item,
|
||||
icon: info[v.item].icon,
|
||||
onClick: (obj) => {
|
||||
that.filterHeader = obj.item;
|
||||
that.$refs["vueTable"].getData();
|
||||
this.$parent.page = "case-detail";
|
||||
},
|
||||
class: info[v.item].class,
|
||||
onJumpCase(caseNumber) {
|
||||
const params = {
|
||||
APP_NUMBER: caseNumber,
|
||||
ACTION: "jump",
|
||||
ACTION_FROM_LIST: "search",
|
||||
};
|
||||
let self = this;
|
||||
api.cases
|
||||
.jump(params)
|
||||
.then(function(data) {
|
||||
self.$parent.dataCase = params;
|
||||
self.$parent.page = "XCase";
|
||||
})
|
||||
.catch((err) => {
|
||||
throw new Error(err);
|
||||
});
|
||||
});
|
||||
return data;
|
||||
},
|
||||
/**
|
||||
* Open case detail
|
||||
* @param {*} item
|
||||
* Handler submit filter
|
||||
* @param {object} data - data returned from the server
|
||||
*/
|
||||
caseDetail(item) {},
|
||||
onSubmitFilter(data) {
|
||||
this.$emit("onSubmitFilter", data);
|
||||
},
|
||||
/**
|
||||
* Handler on remove filter
|
||||
* @param {number} id - data returned fron the server
|
||||
*/
|
||||
onRemoveFilter(id) {
|
||||
this.$emit("onRemoveFilter", id);
|
||||
},
|
||||
/**
|
||||
* Handler on search filter
|
||||
* @param {number} id - data returned fron the server
|
||||
*/
|
||||
onSearch(params) {
|
||||
this.jsonFilters = params;
|
||||
this.$refs.test.refresh();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
<template>
|
||||
<div id="home" :class="[{ collapsed: collapsed }, { onmobile: isOnMobile }]">
|
||||
<div
|
||||
id="home"
|
||||
:class="[{ collapsed: collapsed }, { onmobile: isOnMobile }]"
|
||||
>
|
||||
<div class="demo">
|
||||
<div class="container">
|
||||
<router-view />
|
||||
</div>
|
||||
|
||||
<CustomSidebar
|
||||
:menu="menu"
|
||||
@OnClickSidebarItem="OnClickSidebarItem"
|
||||
@onToggleCollapse="onToggleCollapse"
|
||||
/>
|
||||
@@ -15,7 +18,14 @@
|
||||
@click="collapsed = true"
|
||||
/>
|
||||
|
||||
<component v-bind:is="page" ref="component"></component>
|
||||
<component
|
||||
v-bind:is="page"
|
||||
ref="component"
|
||||
:id="pageId"
|
||||
:name="pageName"
|
||||
@onSubmitFilter="onSubmitFilter"
|
||||
@onRemoveFilter="onRemoveFilter"
|
||||
></component>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -33,6 +43,8 @@ import XCase from "./XCase";
|
||||
import TaskReassignments from "./TaskReassignments";
|
||||
import AdvancedSearch from "./AdvancedSearch";
|
||||
|
||||
import api from "./../api/index";
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
components: {
|
||||
@@ -52,22 +64,40 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
page: "MyCases",
|
||||
menu: [],
|
||||
menu: null,
|
||||
dataCase: {},
|
||||
hideToggle: true,
|
||||
collapsed: false,
|
||||
selectedTheme: "",
|
||||
isOnMobile: false,
|
||||
sidebarWidth: "310px",
|
||||
pageId: null,
|
||||
pageName: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.onResize();
|
||||
window.addEventListener("resize", this.onResize);
|
||||
this.getMenu();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Gets the menu from the server
|
||||
*/
|
||||
getMenu() {
|
||||
api.menu
|
||||
.get()
|
||||
.then((response) => {
|
||||
this.menu = response;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
});
|
||||
},
|
||||
OnClickSidebarItem(item) {
|
||||
this.page = item.item.id || "MyCases";
|
||||
this.page = item.item.page || "MyCases";
|
||||
this.pageId = item.item.id || null;
|
||||
this.pageName = item.item.title || null;
|
||||
},
|
||||
/**
|
||||
* Update page component
|
||||
@@ -96,6 +126,49 @@ export default {
|
||||
onToggleCollapse(collapsed) {
|
||||
this.collapsed = collapsed;
|
||||
},
|
||||
/**
|
||||
* Handle if filter was submited
|
||||
*/
|
||||
|
||||
onSubmitFilter(data) {
|
||||
this.addMenuSearchChild(data);
|
||||
},
|
||||
/**
|
||||
* Add a child submenu to search menu
|
||||
* @param {object} data - cnotains theinfo to generate a menu
|
||||
*/
|
||||
addMenuSearchChild(data) {
|
||||
let newMenu = this.menu;
|
||||
let advSearch = _.find(newMenu, function(o) {
|
||||
return o.href === "/advanced-search";
|
||||
});
|
||||
if (!advSearch.hasOwnProperty("child")) {
|
||||
advSearch["child"] = [];
|
||||
}
|
||||
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.page = "advanced-search";
|
||||
this.pageId = null;
|
||||
this.pageName = null;
|
||||
},
|
||||
removeMenuSearchChild(id) {
|
||||
let newMenu = this.menu;
|
||||
let advSearch = _.find(newMenu, function(o) {
|
||||
return o.href === "/advanced-search";
|
||||
});
|
||||
const index = advSearch.child.findIndex(function(o) {
|
||||
return o.id === id;
|
||||
});
|
||||
if (index !== -1) advSearch.child.splice(index, 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -21,10 +21,18 @@ export default {
|
||||
mounted() {
|
||||
this.height = window.innerHeight - this.diffHeight;
|
||||
this.dataCase = this.$parent.dataCase;
|
||||
if(this.dataCase.ACTION =="jump") {
|
||||
this.path =
|
||||
window.config.SYS_SERVER +
|
||||
window.config.SYS_URI +
|
||||
`cases/open?APP_NUMBER=${this.dataCase.APP_NUMBER}&action=${this.dataCase.ACTION}&actionFromList=${this.dataCase.ACTION_FROM_LIST}`;
|
||||
} else {
|
||||
this.path =
|
||||
window.config.SYS_SERVER +
|
||||
window.config.SYS_URI +
|
||||
`cases/open?APP_UID=${this.dataCase.APP_UID}&DEL_INDEX=${this.dataCase.DEL_INDEX}&action=${this.dataCase.ACTION}`;
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -33,6 +41,7 @@ export default {
|
||||
diffHeight: 10,
|
||||
dataCase: null,
|
||||
path: "",
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -3,7 +3,7 @@ import VueRouter from "vue-router";
|
||||
import VueSidebarMenu from "vue-sidebar-menu";
|
||||
import VueI18n from 'vue-i18n';
|
||||
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
|
||||
import { ServerTable } from 'vue-tables-2';
|
||||
import { ServerTable, Event} from 'vue-tables-2';
|
||||
import "@fortawesome/fontawesome-free/css/all.css";
|
||||
import "@fortawesome/fontawesome-free/js/all.js";
|
||||
import 'bootstrap/dist/css/bootstrap-grid.css';
|
||||
|
||||
@@ -11,9 +11,10 @@
|
||||
},
|
||||
{
|
||||
"href": "/advanced-search",
|
||||
"id": "advanced-search",
|
||||
"page": "advanced-search",
|
||||
"title": "Advanced Search",
|
||||
"icon": "fas fa-search"
|
||||
"icon": "fas fa-search",
|
||||
"child": []
|
||||
},
|
||||
{
|
||||
"header": true,
|
||||
@@ -28,7 +29,8 @@
|
||||
"text": "23",
|
||||
"class": "badge-custom"
|
||||
},
|
||||
"id": "todo"
|
||||
"id": "todo",
|
||||
"page": "todo"
|
||||
},
|
||||
{
|
||||
"href": "/draft",
|
||||
@@ -38,7 +40,8 @@
|
||||
"text": "1",
|
||||
"class": "badge-custom"
|
||||
},
|
||||
"id": "draft"
|
||||
"id": "draft",
|
||||
"page": "draft"
|
||||
},
|
||||
{
|
||||
"href": "/paused",
|
||||
@@ -48,7 +51,8 @@
|
||||
"text": "7",
|
||||
"class": "badge-custom"
|
||||
},
|
||||
"id": "paused"
|
||||
"id": "paused",
|
||||
"page": "paused"
|
||||
},
|
||||
{
|
||||
"href": "/unassigned",
|
||||
@@ -58,7 +62,8 @@
|
||||
"text": "99+",
|
||||
"class": "badge-custom"
|
||||
},
|
||||
"id": "unassigned"
|
||||
"id": "unassigned",
|
||||
"page": "unassigned"
|
||||
},
|
||||
{
|
||||
"header": true,
|
||||
@@ -69,6 +74,7 @@
|
||||
"href": "/batch-routing",
|
||||
"title": "Batch Routing",
|
||||
"id": "batch-routing",
|
||||
"page": "batch-routing",
|
||||
"icon": "fas fa-bars",
|
||||
"disabled": false
|
||||
},
|
||||
@@ -76,6 +82,7 @@
|
||||
"href": "/my-documents",
|
||||
"title": "My Documents",
|
||||
"id": "my-documents",
|
||||
"page": "my-documents",
|
||||
"icon": "fas fa-bars",
|
||||
"disabled": false
|
||||
},
|
||||
@@ -83,7 +90,9 @@
|
||||
"href": "/task-Reassignments",
|
||||
"title": "Task Reassignments",
|
||||
"icon": "fas fa-arrows-alt",
|
||||
"id": "task-reassignments"
|
||||
"id": "task-reassignments",
|
||||
"page": "task-reassignments"
|
||||
|
||||
},
|
||||
{
|
||||
"href": "/page",
|
||||
|
||||
Reference in New Issue
Block a user