fix conflicts
This commit is contained in:
Rodrigo Quelca
@@ -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 filter-field">
|
||||
<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 filter-field">
|
||||
<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,363 +91,456 @@ 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 lang="scss">
|
||||
.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;
|
||||
}
|
||||
|
||||
.filter-field {
|
||||
@@ -447,12 +548,12 @@ export default {
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
></b-form-radio-group>
|
||||
<b-form-group> </b-form-group>
|
||||
<b-form-checkbox-group
|
||||
id="checkbox-1"
|
||||
id="checkbox-custom-filter"
|
||||
v-model="selectedCheckbox"
|
||||
:options="getFilterColletion('checkbox')"
|
||||
value-field="id"
|
||||
@@ -61,6 +61,7 @@
|
||||
{{ tagContent(tag) }}
|
||||
</div>
|
||||
<component
|
||||
:filters="filters"
|
||||
v-bind:is="tagComponent(tag)"
|
||||
v-bind:info="tagInfo(tag)"
|
||||
v-bind:tag="tag"
|
||||
@@ -82,6 +83,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 CurrentUser from "./popovers/CurrentUser.vue";
|
||||
@@ -97,6 +99,7 @@ export default {
|
||||
CaseNumber,
|
||||
CaseTitle,
|
||||
ProcessName,
|
||||
ProcessCategory,
|
||||
DateFilter,
|
||||
TaskTitle,
|
||||
CurrentUser,
|
||||
@@ -113,11 +116,13 @@ export default {
|
||||
selectedCheckbox: [],
|
||||
itemModel: {},
|
||||
byProcessName: "",
|
||||
byProcessCategory: "",
|
||||
criteriaItemsRadio: [],
|
||||
criteriaItemsCheckbox: [],
|
||||
showProcessName: true,
|
||||
};
|
||||
},
|
||||
mounted(){},
|
||||
watch: {
|
||||
filters: {
|
||||
immediate: true,
|
||||
@@ -365,3 +370,9 @@ export default {
|
||||
line-height: 3vw;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
#checkbox-custom-filter > .custom-control-inline{
|
||||
display: block !important;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -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});
|
||||
},
|
||||
/**
|
||||
|
||||
@@ -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
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user