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

PMCORE-3519: process category in my cases

Browse Source
This commit is contained in:
Henry Jordan
2021-11-19 19:53:07 +00:00
committed by Paula Quispe
parent 731a4f2e41
commit e5b221c877
14 changed files with 676 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

897
resources/assets/js/components/search/CasesFilter.vue
View File

@@ -1,81 +1,89 @@
<template>
<div>
<SearchPopover
target="popover-target-1"
@savePopover="onOk"
:title="addSearchTitle"
>
<template v-slot:body>
<b-form-group>
<b-form-radio-group
v-model="selected"
:options="criteriaItems"
value-field="id"
text-field="optionLabel"
name="flavour-2a"
stacked
></b-form-radio-group>
<b-form-group>
</b-form-group>
<b-form-checkbox
id="checkbox-1"
v-model="byProcessName"
name="checkbox-1"
value="processName"
>
{{$t('ID_BY_PROCESS_NAME') }}
</b-form-checkbox>
</b-form-group>
</template>
</SearchPopover>
<div class="p-1 v-flex">
<h5 class="v-search-title">{{ title }}</h5>
<div class="pm-in-text-icon">
<i :class="icon"></i>
</div>
<b-input-group class="w-75 p-1">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span
class="input-group-text bg-primary-pm text-white"
id="popover-target-1"
@click="searchClickHandler"
>
<b-icon icon="search"></b-icon
></span>
</div>
<b-form-tags input-id="tags-pills" v-model="searchTags">
<template v-slot="{ tags, tagVariant, removeTag }">
<div class="d-inline-block" style="font-size: 1rem">
<b-form-tag
v-for="tag in tags"
@remove="customRemove(removeTag, tag)"
:key="tag"
:title="tag"
:variant="tagVariant"
class="mr-1 badge badge-light"
>
<div :id="tag">
<i class="fas fa-tags"></i>
{{ tagContent(tag) }}
</div>
<component
v-bind:is="tagComponent(tag)"
v-bind:info="tagInfo(tag)"
v-bind:tag="tag"
v-bind:filter="dataToFilter(tag)"
@updateSearchTag="updateSearchTag"
/>
</b-form-tag>
</div>
<div>
<SearchPopover
target="popover-target-1"
@savePopover="onOk"
:title="addSearchTitle"
>
<template v-slot:body>
<b-form-group>
<b-form-radio-group
v-model="selected"
:options="criteriaItems"
value-field="id"
text-field="optionLabel"
name="flavour-2a"
stacked
></b-form-radio-group>
<b-form-group> </b-form-group>
<b-form-checkbox
id="checkbox-1"
v-model="byProcessName"
name="checkbox-1"
value="processName"
>
{{ $t("ID_BY_PROCESS_NAME") }}
</b-form-checkbox>
<b-form-checkbox
id="checkbox-2"
v-model="byProcessCategory"
name="checkbox-2"
value="processCategory"
>
{{ $t("ID_BY_PROCESS_CATEGORY") }}
</b-form-checkbox>
</b-form-group>
</template>
</b-form-tags>
</SearchPopover>
<div class="p-1 v-flex">
<h5 class="v-search-title">{{ title }}</h5>
<div class="pm-in-text-icon">
<i :class="icon"></i>
</div>
<b-input-group class="w-75 p-1">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span
class="input-group-text bg-primary-pm text-white"
id="popover-target-1"
@click="searchClickHandler"
>
<b-icon icon="search"></b-icon
></span>
</div>
<b-form-tags input-id="tags-pills" v-model="searchTags">
<template v-slot="{ tags, tagVariant, removeTag }">
<div class="d-inline-block" style="font-size: 1rem">
<b-form-tag
v-for="tag in tags"
@remove="customRemove(removeTag, tag)"
:key="tag"
:title="tag"
:variant="tagVariant"
class="mr-1 badge badge-light"
>
<div :id="tag">
<i class="fas fa-tags"></i>
{{ tagContent(tag) }}
</div>
<component
:filters="filters"
v-bind:is="tagComponent(tag)"
v-bind:info="tagInfo(tag)"
v-bind:tag="tag"
v-bind:filter="dataToFilter(tag)"
@updateSearchTag="updateSearchTag"
/>
</b-form-tag>
</div>
</template>
</b-form-tags>
</div>
</b-input-group>
</div>
</b-input-group>
</div>
</div>
</template>
<script>
@@ -83,376 +91,469 @@ import SearchPopover from "./popovers/SearchPopover.vue";
import CaseNumber from "./popovers/CaseNumber.vue";
import CaseTitle from "./popovers/CaseTitle.vue";
import ProcessName from "./popovers/ProcessName.vue";
import ProcessCategory from "./popovers/ProcessCategory.vue";
import DateFilter from "./popovers/DateFilter.vue";
import TaskTitle from "./popovers/TaskTitle.vue";
import CurrentUser from "./popovers/CurrentUser.vue";
import api from "./../../api/index";
export default {
name: "Cases",
props: ["filters", "title", "icon" , "hiddenItems"],
components: {
SearchPopover,
CaseNumber,
CaseTitle,
ProcessName,
DateFilter,
TaskTitle,
CurrentUser
},
data() {
return {
searchLabel: this.$i18n.t("ID_SEARCH"),
addSearchTitle: this.$i18n.t("ID_ADD_SEARCH_FILTER_CRITERIA"),
searchTags: [],
dataLoaded: false,
filterItems: [
{
type: "CaseNumber",
id: "caseNumber",
title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
"ID_BY_CASE_NUMBER"
)}`,
optionLabel: this.$i18n.t("ID_BY_CASE_NUMBER"),
detail: this.$i18n.t("ID_PLEASE_SET_THE_CASE_NUMBER_TO_BE_SEARCHED"),
tagText: "",
tagPrefix: this.$i18n.t("ID_SEARCH_BY_CASE_NUMBER"),
items: [
{
id: "filterCases",
value: "",
name: "Cases",
props: ["filters", "title", "icon", "hiddenItems"],
components: {
SearchPopover,
CaseNumber,
CaseTitle,
ProcessName,
ProcessCategory,
DateFilter,
TaskTitle,
CurrentUser,
},
data() {
return {
searchLabel: this.$i18n.t("ID_SEARCH"),
addSearchTitle: this.$i18n.t("ID_ADD_SEARCH_FILTER_CRITERIA"),
searchTags: [],
dataLoaded: false,
filterItems: [
{
type: "CaseNumber",
id: "caseNumber",
title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
"ID_BY_CASE_NUMBER"
)}`,
optionLabel: this.$i18n.t("ID_BY_CASE_NUMBER"),
detail: this.$i18n.t(
"ID_PLEASE_SET_THE_CASE_NUMBER_TO_BE_SEARCHED"
),
tagText: "",
tagPrefix: this.$i18n.t("ID_SEARCH_BY_CASE_NUMBER"),
items: [
{
id: "filterCases",
value: "",
},
],
autoShow: true,
makeTagText: function(params, data) {
return `${params.tagPrefix}: ${data[0].value}`;
},
],
autoShow: true,
makeTagText: function (params, data) {
return `${params.tagPrefix}: ${data[0].value}`;
},
},
{
type: "CaseTitle",
id: "caseTitle",
title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
"ID_BY_CASE_THREAD_TITLE"
)}`,
optionLabel: this.$i18n.t("ID_BY_CASE_THREAD_TITLE"),
tagPrefix: this.$i18n.t("ID_SEARCH_BY_CASE_THREAD_TITLE"),
detail: "",
tagText: "",
items: [
{
id: "caseTitle",
value: "",
{
type: "CaseTitle",
id: "caseTitle",
title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
"ID_BY_CASE_THREAD_TITLE"
)}`,
optionLabel: this.$i18n.t("ID_BY_CASE_THREAD_TITLE"),
tagPrefix: this.$i18n.t("ID_SEARCH_BY_CASE_THREAD_TITLE"),
detail: "",
tagText: "",
items: [
{
id: "caseTitle",
value: "",
},
],
autoShow: true,
makeTagText: function(params, data) {
return `${this.tagPrefix} ${data[0].value}`;
},
],
autoShow: true,
makeTagText: function (params, data) {
return `${this.tagPrefix} ${data[0].value}`;
},
},
{
type: "DateFilter",
id: "delegationDate",
title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_BY_DELEGATION_DATE')}`,
optionLabel: this.$i18n.t('ID_BY_DELEGATION_DATE'),
detail: this.$i18n.t('ID_PLEASE_SELECT_THE_DELEGATION_DATE_TO_BE_SEARCHED'),
tagText: "",
tagPrefix: this.$i18n.t('ID_SEARCH_BY_DELEGATION_DATE'),
items:[
{
id: "delegateFrom",
value: "",
label: this.$i18n.t('ID_FROM_DELEGATION_DATE')
{
type: "DateFilter",
id: "delegationDate",
title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
"ID_BY_DELEGATION_DATE"
)}`,
optionLabel: this.$i18n.t("ID_BY_DELEGATION_DATE"),
detail: this.$i18n.t(
"ID_PLEASE_SELECT_THE_DELEGATION_DATE_TO_BE_SEARCHED"
),
tagText: "",
tagPrefix: this.$i18n.t("ID_SEARCH_BY_DELEGATION_DATE"),
items: [
{
id: "delegateFrom",
value: "",
label: this.$i18n.t("ID_FROM_DELEGATION_DATE"),
},
{
id: "delegateTo",
value: "",
label: this.$i18n.t("ID_TO_DELEGATION_DATE"),
},
],
makeTagText: function(params, data) {
return `${params.tagPrefix} ${data[0].value} - ${data[1].value}`;
},
{
id: "delegateTo",
value: "",
label: this.$i18n.t('ID_TO_DELEGATION_DATE')
}
],
makeTagText: function (params, data) {
return `${params.tagPrefix} ${data[0].value} - ${data[1].value}`;
}
},
{
type: "CurrentUser",
id: "bySendBy",
title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_BY_SEND_BY')}`,
optionLabel: this.$i18n.t('ID_BY_SEND_BY'),
detail: this.$i18n.t('ID_PLEASE_SELECT_USER_NAME_TO_BE_SEARCHED'),
placeholder: this.$i18n.t('ID_USER_NAME'),
tagText: "",
tagPrefix: this.$i18n.t('ID_SEARCH_BY_SEND_BY'),
autoShow: true,
items:[
{
id: "sendBy",
value: "",
options: [],
placeholder: this.$i18n.t('ID_USER_NAME')
}
],
makeTagText: function (params, data) {
return `${params.tagPrefix} : ${data[0].label || ''}`;
}
},
{
type: "TaskTitle",
id: "taskTitle",
title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
"ID_TASK_NAME"
)}`,
optionLabel: this.$i18n.t("ID_BY_TASK"),
detail: "",
tagText: "",
tagPrefix: this.$i18n.t("ID_SEARCH_BY_TASK_NAME"),
autoShow: true,
items: [
{
id: "task",
value: "",
options: [],
placeholder: this.$i18n.t("ID_TASK_NAME"),
},
],
makeTagText: function (params, data) {
return `${this.tagPrefix}: ${data[0].label || ""}`;
},
},
],
processName: {
{
type: "CurrentUser",
id: "bySendBy",
title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
"ID_BY_SEND_BY"
)}`,
optionLabel: this.$i18n.t("ID_BY_SEND_BY"),
detail: this.$i18n.t(
"ID_PLEASE_SELECT_USER_NAME_TO_BE_SEARCHED"
),
placeholder: this.$i18n.t("ID_USER_NAME"),
tagText: "",
tagPrefix: this.$i18n.t("ID_SEARCH_BY_SEND_BY"),
autoShow: true,
items: [
{
id: "sendBy",
value: "",
options: [],
placeholder: this.$i18n.t("ID_USER_NAME"),
},
],
makeTagText: function(params, data) {
return `${params.tagPrefix} : ${data[0].label || ""}`;
},
},
{
type: "TaskTitle",
id: "taskTitle",
title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
"ID_TASK_NAME"
)}`,
optionLabel: this.$i18n.t("ID_BY_TASK"),
detail: "",
tagText: "",
tagPrefix: this.$i18n.t("ID_SEARCH_BY_TASK_NAME"),
autoShow: true,
items: [
{
id: "task",
value: "",
options: [],
placeholder: this.$i18n.t("ID_TASK_NAME"),
},
],
makeTagText: function(params, data) {
return `${this.tagPrefix}: ${data[0].label || ""}`;
},
},
],
processName: {
type: "ProcessName",
id: "processName",
title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_BY_PROCESS_NAME')}`,
optionLabel: this.$i18n.t('ID_BY_PROCESS_NAME'),
title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
"ID_BY_PROCESS_NAME"
)}`,
optionLabel: this.$i18n.t("ID_BY_PROCESS_NAME"),
detail: "",
tagText: "",
tagPrefix: this.$i18n.t('ID_SEARCH_BY_PROCESS_NAME'),
tagPrefix: this.$i18n.t("ID_SEARCH_BY_PROCESS_NAME"),
autoShow: true,
items:[
items: [
{
id: "process",
value: "",
options: [],
placeholder: this.$i18n.t('ID_PROCESS_NAME')
}
placeholder: this.$i18n.t("ID_PROCESS_NAME"),
},
],
makeTagText: function (params, data) {
return `${this.tagPrefix} ${data[0].options && data[0].options.label || ''}`;
makeTagText: function(params, data) {
return `${this.tagPrefix} ${(data[0].options &&
data[0].options.label) ||
""}`;
},
},
processCategory: {
type: "ProcessCategory",
id: "processCategory",
title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
"ID_BY_PROCESS_CATEGORY"
)}`,
optionLabel: this.$i18n.t("ID_BY_PROCESS_CATEGORY"),
detail: "",
tagText: "",
tagPrefix: this.$i18n.t("ID_SEARCH_BY_PROCESS_CATEGORY"),
autoShow: true,
items: [
{
id: "category",
value: "",
options: [],
placeholder: "",
},
],
makeTagText: function(params, data) {
return `${params.tagPrefix}: ${data[0].label || ""}`;
},
},
selected: "",
itemModel: {},
byProcessName: "",
byProcessCategory: "",
};
},
computed: {
// a computed getter
criteriaItems: function() {
let found,
criteria = [];
if (this.hiddenItems && this.hiddenItems.length) {
this.filterItems.forEach((item) => {
found = this.hiddenItems.find((elem) => elem !== item.id);
if (found) {
criteria.push(item);
}
});
return criteria;
} else {
return this.filterItems;
}
},
},
mounted() {},
watch: {
filters: {
immediate: true,
handler(newVal, oldVal) {
this.searchTags = [];
this.selected = [];
//Prevent show popover at the first time
if (newVal.length) {
this.setFilters(newVal, oldVal);
this.searchClickHandler();
}
},
selected: "",
itemModel: {},
byProcessName: ""
};
},
computed: {
// a computed getter
criteriaItems: function () {
let found,
criteria = [];
if (this.hiddenItems && this.hiddenItems.length) {
this.filterItems.forEach(item => {
found = this.hiddenItems.find( elem => elem !== item.id);
if (found) {
criteria.push(item);
}
});
return criteria;
} else {
return this.filterItems;
}
}
},
mounted() {
},
watch: {
filters: {
immediate: true,
handler(newVal, oldVal) {
this.searchTags = [];
this.selected = [];
//Prevent show popover at the first time
if (newVal.length) {
this.setFilters(newVal, oldVal);
this.searchClickHandler();
},
},
methods: {
/**
* Add filter criteria save button handler
*/
onOk() {
let self = this,
element,
initialFilters = [],
item;
this.$root.$emit("bv::hide::popover");
element = _.find(this.filterItems, function(o) {
return o.id === self.selected;
});
if (element) {
initialFilters = this.prepareFilterItems(
element.items,
this.selected,
true
);
}
}
}
},
methods: {
/**
* Add filter criteria save button handler
*/
onOk() {
let self = this,
element,
initialFilters = [],
item;
this.$root.$emit("bv::hide::popover");
element = _.find(this.filterItems, function (o) {
return o.id === self.selected;
});
if (element) {
initialFilters = this.prepareFilterItems(element.items, this.selected, true);
}
//adding process name filter
if (self.byProcessName !== "") {
if (element !== undefined) {
this.processName.autoShow = false;
} else {
this.processName.autoShow = true;
//adding process name filter
if (self.byProcessName !== "") {
if (element !== undefined) {
this.processName.autoShow = false;
} else {
this.processName.autoShow = true;
}
initialFilters = [
...new Set([
...initialFilters,
...this.prepareFilterItems(
this.processName.items,
self.byProcessName,
true
),
]),
];
}
initialFilters =[...new Set([...initialFilters,...this.prepareFilterItems(this.processName.items, self.byProcessName, true)])];
}
this.$emit("onUpdateFilters", {params: initialFilters, refresh: false});
},
/**
* Prepare the filter items
* @param {array} items
* @param {id} string
* @param {boolean} restore
*/
prepareFilterItems(items, id, restore){
let initialFilters = [],
self = this,
filter,
item;
_.forEach(items, function(value, key) {
filter = _.find(self.filters, function(o) { return o.filterVar === value.id; });
if (filter && restore) {
initialFilters.push(filter);
} else {
item = {
filterVar: value.id,
fieldId: id,
value: '',
label: "",
options: [],
autoShow: true
};
initialFilters.push(item);
if (self.byProcessCategory !== "") {
if (element !== undefined) {
this.processCategory.autoShow = false;
} else {
this.processCategory.autoShow = true;
}
initialFilters = [
...new Set([
...initialFilters,
...this.prepareFilterItems(
this.processCategory.items,
self.byProcessCategory,
true
),
]),
];
}
});
return initialFilters;
},
/**
* Set Filters and make the tag labels
* @param {object} filters json to manage the query
*/
setFilters(filters, oldVal) {
let self = this;
_.forEach(filters, function (item, key) {
let component = _.find(self.filterItems, function (o) {
return o.id === item.fieldId;
});
if (component) {
self.searchTags.push(component.id);
self.selected = component.id;
self.itemModel[component.id] = component;
self.itemModel[component.id].autoShow = typeof item.autoShow !== "undefined" ? item.autoShow : true;
}
if(item.fieldId === "processName") {
self.searchTags.push(self.processName.id);
self.byProcessName = self.processName.id;
self.itemModel[self.processName.id] = self.processName;
self.itemModel[self.processName.id].autoShow = typeof item.autoShow !== "undefined" ? item.autoShow : self.processName.autoShow;
}
});
},
dataToFilter(id) {
let data = [];
_.forEach(this.filters, function (item) {
if (item.fieldId === id) {
data.push(item);
}
});
return data;
},
/**
*
*/
tagContent(id) {
if (
this.itemModel[id] &&
typeof this.itemModel[id].makeTagText === "function"
) {
return this.itemModel[id].makeTagText(
this.itemModel[id],
this.dataToFilter(id)
);
}
return "";
},
tagComponent(id) {
if (this.itemModel[id]) {
return this.itemModel[id].type;
}
return null;
},
this.$emit("onUpdateFilters", {
params: initialFilters,
refresh: false,
});
},
/**
* Prepare the filter items
* @param {array} items
* @param {id} string
* @param {boolean} restore
*/
prepareFilterItems(items, id, restore) {
let initialFilters = [],
self = this,
filter,
item;
_.forEach(items, function(value, key) {
filter = _.find(self.filters, function(o) {
return o.filterVar === value.id;
});
if (filter && restore) {
initialFilters.push(filter);
} else {
item = {
filterVar: value.id,
fieldId: id,
value: "",
label: "",
options: [],
autoShow: true,
};
initialFilters.push(item);
}
});
return initialFilters;
},
/**
* Set Filters and make the tag labels
* @param {object} filters json to manage the query
*/
setFilters(filters, oldVal) {
let self = this;
_.forEach(filters, function(item, key) {
let component = _.find(self.filterItems, function(o) {
return o.id === item.fieldId;
});
if (component) {
self.searchTags.push(component.id);
self.selected = component.id;
self.itemModel[component.id] = component;
self.itemModel[component.id].autoShow =
typeof item.autoShow !== "undefined"
? item.autoShow
: true;
}
if (item.fieldId === "processName") {
self.searchTags.push(self.processName.id);
self.byProcessName = self.processName.id;
self.itemModel[self.processName.id] = self.processName;
self.itemModel[self.processName.id].autoShow =
typeof item.autoShow !== "undefined"
? item.autoShow
: self.processName.autoShow;
}
if (item.fieldId === "processCategory") {
self.searchTags.push(self.processCategory.id);
self.byProcessCategory = self.processCategory.id;
self.itemModel[self.processCategory.id] =
self.processCategory;
self.itemModel[self.processCategory.id].autoShow =
typeof self.processCategory.autoShow !== "undefined"
? self.processCategory.autoShow
: true;
}
});
},
dataToFilter(id) {
let data = [];
_.forEach(this.filters, function(item) {
if (item.fieldId === id) {
data.push(item);
}
});
return data;
},
/**
*
*/
tagContent(id) {
if (
this.itemModel[id] &&
typeof this.itemModel[id].makeTagText === "function"
) {
return this.itemModel[id].makeTagText(
this.itemModel[id],
this.dataToFilter(id)
);
}
return "";
},
tagComponent(id) {
if (this.itemModel[id]) {
return this.itemModel[id].type;
}
return null;
},
tagInfo(id) {
if (this.itemModel[id]) {
return this.itemModel[id];
}
return null;
},
/**
* Remove from tag button
* @param {function} removeTag - default callback
* @param {string} tag filter identifier
*/
customRemove(removeTag, tag) {
let temp = [];
_.forEach(this.filters, function(item, key) {
if(item.fieldId !== tag) {
temp.push(item);
tagInfo(id) {
if (this.itemModel[id]) {
return this.itemModel[id];
}
});
if (tag === "processName") {
this.byProcessName = "";
}
this.$emit("onUpdateFilters", {params: temp, refresh: true});
return null;
},
/**
* Remove from tag button
* @param {function} removeTag - default callback
* @param {string} tag filter identifier
*/
customRemove(removeTag, tag) {
let temp = [];
_.forEach(this.filters, function(item, key) {
if (item.fieldId !== tag) {
temp.push(item);
}
});
if (tag === "processName") {
this.byProcessName = "";
}
if (tag === "processCategory") {
this.byProcessCategory = "";
}
this.$emit("onUpdateFilters", { params: temp, refresh: true });
},
/**
* Update the filter model this is fired from filter popaver save action
* @param {object} params - arrives the settings
* @param {string} tag filter identifier
*/
updateSearchTag(params) {
let temp = this.filters.concat(params);
temp = [...new Set([...this.filters, ...params])];
this.$emit("onUpdateFilters", { params: temp, refresh: true });
},
searchClickHandler() {
this.$root.$emit("bv::hide::popover");
},
},
/**
* Update the filter model this is fired from filter popaver save action
* @param {object} params - arrives the settings
* @param {string} tag filter identifier
*/
updateSearchTag(params) {
let temp = this.filters.concat(params);
temp = [...new Set([...this.filters, ...params])];
this.$emit("onUpdateFilters", { params: temp, refresh: true });
},
searchClickHandler() {
this.$root.$emit("bv::hide::popover");
},
},
};
</script>
<style scoped>
.bv-example-row .row + .row {
margin-top: 1rem;
margin-top: 1rem;
}
.bv-example-row-flex-cols .row {
min-height: 10rem;
min-height: 10rem;
}
.bg-primary-pm {
background-color: #0099dd;
background-color: #0099dd;
}
.v-flex {
display: flex;
display: flex;
}
.v-search-title {
padding-right: 10px;
line-height: 40px;
padding-right: 10px;
line-height: 40px;
}
.pm-in-text-icon {
font-size: 1.40rem;
padding-right: 10px;
line-height: 40px;
font-size: 1.4rem;
padding-right: 10px;
line-height: 40px;
}
</style>
</style>

55
resources/assets/js/components/search/MyCasesFilter.vue
View File

@@ -6,6 +6,7 @@
:title="addSearchTitle"
>
<template v-slot:body>
<b-form-group>
<b-form-radio-group
v-model="selected"
@@ -24,6 +25,15 @@
>
{{$t('ID_BY_PROCESS_NAME') }}
</b-form-checkbox>
<b-form-checkbox
id="checkbox-2"
v-model="byProcessCategory"
name="checkbox-2"
value="processCategory"
>
{{$t('ID_BY_PROCESS_CATEGORY') }}
</b-form-checkbox>
</template>
</SearchPopover>
@@ -61,6 +71,7 @@
</div>
<component
:filters="filters"
v-bind:is="tagComponent(tag)"
v-bind:info="tagInfo(tag)"
v-bind:tag="tag"
@@ -82,6 +93,7 @@ import SearchPopover from "./popovers/SearchPopover.vue";
import CaseNumber from "./popovers/CaseNumber.vue";
import CaseTitle from "./popovers/CaseTitle.vue";
import ProcessName from "./popovers/ProcessName.vue";
import ProcessCategory from "./popovers/ProcessCategory.vue";
import DateFilter from "./popovers/DateFilter.vue";
import TaskTitle from "./popovers/TaskTitle.vue";
import api from "./../../api/index";
@@ -94,6 +106,7 @@ export default {
CaseNumber,
CaseTitle,
ProcessName,
ProcessCategory,
DateFilter,
TaskTitle
},
@@ -235,9 +248,31 @@ export default {
return `${this.tagPrefix} ${data[0].options && data[0].options.label || ''}`;
}
},
processCategory:{
type: "ProcessCategory",
id: "processCategory",
title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_BY_PROCESS_CATEGORY')}`,
optionLabel: this.$i18n.t('ID_BY_PROCESS_CATEGORY'),
detail: "",
tagText: "",
tagPrefix: this.$i18n.t('ID_SEARCH_BY_PROCESS_CATEGORY'),
autoShow: true,
items:[
{
id: "category",
value: "",
options: [],
placeholder: ""
}
],
makeTagText: function (params, data) {
return `${params.tagPrefix}: ${data[0].label || ''}`;
}
},
selected: "",
itemModel: {},
byProcessName: ""
byProcessName: "",
byProcessCategory: "",
};
},
mounted() {
@@ -284,6 +319,15 @@ export default {
}
initialFilters =[...new Set([...initialFilters,...this.prepareFilterItems(this.processName.items, self.byProcessName, true)])];
}
//adding process name filter
if (self.byProcessCategory !== "") {
if (element !== undefined) {
this.processCategory.autoShow = false;
} else {
this.processCategory.autoShow = true;
}
initialFilters =[...new Set([...initialFilters,...this.prepareFilterItems(this.processCategory.items, self.byProcessCategory, true)])];
}
this.$emit("onUpdateFilters", {params: initialFilters, refresh: false});
},
/**
@@ -334,6 +378,12 @@ export default {
self.itemModel[self.processName.id] = self.processName;
self.itemModel[self.processName.id].autoShow = typeof self.processName.autoShow !== "undefined" ? self.processName.autoShow : true;
}
if(item.fieldId === "processCategory") {
self.searchTags.push(self.processCategory.id);
self.byProcessCategory = self.processCategory.id;
self.itemModel[self.processCategory.id] = self.processCategory;
self.itemModel[self.processCategory.id].autoShow = typeof self.processCategory.autoShow !== "undefined" ? self.processCategory.autoShow : true;
}
});
},
dataToFilter(id) {
@@ -382,6 +432,9 @@ export default {
if (tag === "processName") {
this.byProcessName = "";
}
if (tag === "processCategory") {
this.byProcessCategory = "";
}
this.$emit("onUpdateFilters", {params: temp, refresh: true});
},
/**

17
resources/assets/js/components/search/popovers/ProcessName.vue
View File

@@ -38,6 +38,7 @@
import SearchPopover from "./SearchPopover.vue";
import Multiselect from "vue-multiselect";
import api from "./../../../api/index";
import _ from "lodash";
export default {
components: {
@@ -57,11 +58,16 @@ export default {
* @param {string} query - string from the text field
*/
asyncFind(query) {
let self = this;
let self = this,
cat = this.verifyCategory(),
params = { text: query };
this.isLoading = true;
if (cat) {
params.category = cat;
}
self.processes = [];
api.filters
.processList(query)
.processListPaged(params)
.then((response) => {
self.processes = [];
_.forEach(response.data, function(elem, key) {
@@ -76,6 +82,13 @@ export default {
console.error(err);
});
},
verifyCategory() {
let cat = _.find(
this.$attrs.filters,
(o) => o.fieldId == "processCategory"
);
return cat ? cat.value : null;
},
/**
* Form validations review
*/