fix conflicts

This commit is contained in:
Rodrigo Quelca
2021-12-08 13:16:38 +00:00
39 changed files with 1038 additions and 431 deletions

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 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>

View File

@@ -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>

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});
},
/**

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
*/

View File

@@ -52,6 +52,9 @@
<div slot="process_name" slot-scope="props">
{{ props.row.PROCESS_NAME }}
</div>
<div slot="process_category" slot-scope="props">
{{ props.row.PROCESS_CATEGORY }}
</div>
<div slot="task" slot-scope="props">
<TaskCell :data="props.row.TASK" />
</div>
@@ -143,6 +146,7 @@ export default {
columns: [
"case_number",
"process_name",
"process_category",
"status",
"thread_title",
"task",
@@ -158,6 +162,7 @@ export default {
headings: {
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
process_name: this.$i18n.t("ID_PROCESS_NAME"),
process_category: this.$i18n.t("ID_CATEGORY_PROCESS"),
status: this.$i18n.t("ID_STATUS"),
thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
task: this.$i18n.t("ID_TASK"),
@@ -296,6 +301,7 @@ export default {
CASE_NUMBER: v.APP_NUMBER,
THREAD_TITLE: v.THREAD_TITLES,
PROCESS_NAME: v.PRO_TITLE,
PROCESS_CATEGORY: v.CATEGORY,
TASK: this.formatTasks(v.THREAD_TASKS),
USER_DATA: this.formatUser(v.THREAD_USERS),
START_DATE: v.APP_CREATE_DATE_LABEL,

View File

@@ -58,7 +58,9 @@
<div slot="process_name" slot-scope="props">
{{ props.row.PROCESS_NAME }}
</div>
<div slot="process_category" slot-scope="props">
{{ props.row.PROCESS_CATEGORY }}
</div>
<div slot="task" slot-scope="props">
<TaskCell :data="props.row.TASK" />
</div>
@@ -131,6 +133,9 @@
<span v-if="column === 'process_name'" class="v-card-text-highlight">
{{ props["item"]["PROCESS_NAME"] }}
</span>
<span v-if="column === 'process_category'" class="v-card-text-highlight">
{{ props["item"]["PROCESS_CATEGORY"] }}
</span>
<span v-if="column === 'due_date'" class="v-card-text-highlight">
{{ props["item"]["DUE_DATE"] }}
</span>
@@ -185,6 +190,9 @@
<span v-if="column === 'process_name'" class="v-card-text-highlight">
{{ props["item"]["PROCESS_NAME"] }}
</span>
<span v-if="column === 'process_category'" class="v-card-text-highlight">
{{ props["item"]["PROCESS_CATEGORY"] }}
</span>
<span v-if="column === 'due_date'" class="v-card-text-highlight">
{{ props["item"]["DUE_DATE"] }}
</span>
@@ -317,6 +325,7 @@ export default {
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
process_name: this.$i18n.t("ID_PROCESS_NAME"),
process_category: this.$i18n.t("ID_CATEGORY_PROCESS"),
task: this.$i18n.t("ID_TASK"),
send_by: this.$i18n.t("ID_SEND_BY"),
due_date: this.$i18n.t("ID_DUE_DATE"),
@@ -393,7 +402,8 @@ export default {
thread_title: "caseTitle",
delegation_date: "delegationDate",
send_by: "bySendBy",
process_name: "processName"
process_name: "processName",
process_category: "processCategory"
},
customItems:{
VARCHAR: {
@@ -576,7 +586,30 @@ export default {
makeTagText: function (params, data) {
return `${this.tagPrefix} ${data[0].options && data[0].options.label || ''}`;
}
}
},
processCategory: {
group: "checkbox",
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: false,
items:[
{
id: "process",
value: "",
options: [],
placeholder: this.$i18n.t('ID_CATEGORY_PROCESS')
}
],
makeTagText: function (params, data) {
return `${this.tagPrefix} ${data[0].options && data[0].options.label || ''}`;
}
},
showUserTooltip: true
}
};
},
@@ -844,6 +877,7 @@ export default {
CASE_NUMBER: v.APP_NUMBER,
THREAD_TITLE: v.DEL_TITLE,
PROCESS_NAME: v.PRO_TITLE,
PROCESS_CATEGORY: v.CATEGORY,
TASK: [
{
TITLE: v.TAS_TITLE,

View File

@@ -54,6 +54,9 @@
<div slot="process_name" slot-scope="props">
{{ props.row.PROCESS_NAME }}
</div>
<div slot="process_category" slot-scope="props">
{{ props.row.PROCESS_CATEGORY }}
</div>
<div slot="task" slot-scope="props">
<TaskCell :data="props.row.TASK" />
</div>
@@ -104,6 +107,14 @@
>{{ props["item"]["PROCESS_NAME"] }}
</span>
</div>
<div slot="process_category" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark"
>{{ props["headings"][props.column] }} :</span
>
<span class="v-card-text-light"
>{{ props["item"]["PROCESS_CATEGORY"] }}
</span>
</div>
<div slot="due_date" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark"
>{{ props["headings"][props.column] }} :</span
@@ -178,6 +189,14 @@
>{{ props["item"]["PROCESS_NAME"] }}
</span>
</div>
<div slot="process_category" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark"
>{{ props["headings"][props.column] }} :</span
>
<span class="v-card-text-light"
>{{ props["item"]["PROCESS_CATEGORY"] }}
</span>
</div>
<div slot="due_date" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark"
>{{ props["headings"][props.column] }} :</span
@@ -296,6 +315,7 @@ export default {
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
process_name: this.$i18n.t("ID_PROCESS_NAME"),
process_category: this.$i18n.t("ID_CATEGORY_PROCESS"),
task: this.$i18n.t("ID_TASK"),
priority: this.$i18n.t("ID_PRIORITY"),
actions: ""
@@ -523,6 +543,7 @@ export default {
CASE_NUMBER: v.APP_NUMBER,
THREAD_TITLE: v.DEL_TITLE,
PROCESS_NAME: v.PRO_TITLE,
PROCESS_CATEGORY: v.CATEGORY,
TASK: [{
TITLE: v.TAS_TITLE,
CODE_COLOR: v.TAS_COLOR,

View File

@@ -54,6 +54,7 @@ export default {
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
process_name: this.$i18n.t("ID_PROCESS_NAME"),
process_category: this.$i18n.t("ID_CATEGORY_PROCESS"),
task: this.$i18n.t("ID_TASK"),
current_user: this.$i18n.t("ID_CURRENT_USER"),
due_date: this.$i18n.t("ID_DUE_DATE"),

View File

@@ -49,7 +49,9 @@
<div slot="process_name" slot-scope="props">
{{ props.row.PROCESS_NAME }}
</div>
<div slot="process_category" slot-scope="props">
{{ props.row.PROCESS_CATEGORY }}
</div>
<div slot="task" slot-scope="props">
<TaskCell :data="props.row.TASK" />
</div>
@@ -112,6 +114,14 @@
>{{ props["item"]["PROCESS_NAME"] }}
</span>
</div>
<div slot="process_category" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark"
>{{ props["headings"][props.column] }} :</span
>
<span class="v-card-text-light"
>{{ props["item"]["PROCESS_CATEGORY"] }}
</span>
</div>
<div slot="due_date" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark"
>{{ props["headings"][props.column] }} :</span
@@ -193,6 +203,14 @@
>{{ props["item"]["PROCESS_NAME"] }}
</span>
</div>
<div slot="process_category" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark"
>{{ props["headings"][props.column] }} :</span
>
<span class="v-card-text-light"
>{{ props["item"]["PROCESS_CATEGORY"] }}
</span>
</div>
<div slot="due_date" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark"
>{{ props["headings"][props.column] }} :</span
@@ -328,6 +346,7 @@ export default {
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
process_name: this.$i18n.t("ID_PROCESS_NAME"),
process_category: this.$i18n.t("ID_CATEGORY_PROCESS"),
task: this.$i18n.t("ID_TASK"),
send_by: this.$i18n.t("ID_SEND_BY"),
due_date: this.$i18n.t("ID_DUE_DATE"),
@@ -558,6 +577,7 @@ export default {
CASE_NUMBER: v.APP_NUMBER,
THREAD_TITLE: v.DEL_TITLE,
PROCESS_NAME: v.PRO_TITLE,
PROCESS_CATEGORY: v.CATEGORY,
TASK: [
{
TITLE: v.TAS_TITLE,

View File

@@ -54,6 +54,7 @@ export default {
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
process_name: this.$i18n.t("ID_PROCESS_NAME"),
process_category: this.$i18n.t("ID_CATEGORY_PROCESS"),
task: this.$i18n.t("ID_TASK"),
send_by: this.$i18n.t("ID_SEND_BY"),
current_user: this.$i18n.t("ID_CURRENT_USER"),
@@ -65,6 +66,7 @@ export default {
"case_number",
"thread_title",
"process_name",
"process_category",
"due_date",
"delegation_date",
"priority",

View File

@@ -50,6 +50,9 @@
<div slot="process_name" slot-scope="props">
{{ props.row.PROCESS_NAME }}
</div>
<div slot="process_category" slot-scope="props">
{{ props.row.PROCESS_CATEGORY }}
</div>
<div slot="pending_taks" slot-scope="props">
<GroupedCell :data="props.row.PENDING_TASKS" />
</div>
@@ -161,6 +164,7 @@ export default {
headings: {
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
process_name: this.$i18n.t("ID_PROCESS_NAME"),
process_category: this.$i18n.t("ID_CATEGORY_PROCESS"),
thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
pending_taks: this.$i18n.t("ID_PENDING_TASKS"),
status: this.$i18n.t("ID_CASESLIST_APP_STATUS"),
@@ -454,6 +458,8 @@ export default {
CASE_NUMBER: v.APP_NUMBER,
THREAD_TITLE: v.THREAD_TITLES,
PROCESS_NAME: v.PRO_TITLE,
PROCESS_NAME: v.PRO_TITLE,
PROCESS_CATEGORY: v.CATEGORY,
STATUS: v.APP_STATUS,
START_DATE: v.APP_CREATE_DATE_LABEL || "",
FINISH_DATE: v.APP_FINISH_DATE_LABEL || "",

View File

@@ -1,8 +1,12 @@
import _ from "lodash";
import api from "../../api/index";
export default {
data() {
return {
random: 1
random: 1,
defaultColumnsDisabled: [
"process_category"
]
};
},
methods: {

View File

@@ -48,6 +48,9 @@
<div slot="process_name" slot-scope="props">
{{ props.row.PROCESS_NAME }}
</div>
<div slot="process_category" slot-scope="props">
{{ props.row.PROCESS_CATEGORY }}
</div>
<div slot="task" slot-scope="props">
<TaskCell :data="props.row.TASK" />
</div>
@@ -110,6 +113,14 @@
>{{ props["item"]["PROCESS_NAME"] }}
</span>
</div>
<div slot="process_category" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark"
>{{ props["headings"][props.column] }} :</span
>
<span class="v-card-text-light"
>{{ props["item"]["PROCESS_CATEGORY"] }}
</span>
</div>
<div slot="due_date" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark"
>{{ props["headings"][props.column] }} :</span
@@ -191,6 +202,14 @@
>{{ props["item"]["PROCESS_NAME"] }}
</span>
</div>
<div slot="process_category" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark"
>{{ props["headings"][props.column] }} :</span
>
<span class="v-card-text-light"
>{{ props["item"]["PROCESS_CATEGORY"] }}
</span>
</div>
<div slot="due_date" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark"
>{{ props["headings"][props.column] }} :</span
@@ -327,6 +346,7 @@ export default {
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
process_name: this.$i18n.t("ID_PROCESS_NAME"),
process_category: this.$i18n.t("ID_CATEGORY_PROCESS"),
task: this.$i18n.t("ID_TASK"),
send_by: this.$i18n.t("ID_SEND_BY"),
due_date: this.$i18n.t("ID_DUE_DATE"),
@@ -556,6 +576,7 @@ export default {
CASE_NUMBER: v.APP_NUMBER,
THREAD_TITLE: v.DEL_TITLE,
PROCESS_NAME: v.PRO_TITLE,
PROCESS_CATEGORY: v.CATEGORY,
TASK: [{
TITLE: v.TAS_TITLE,
CODE_COLOR: v.TAS_COLOR,

View File

@@ -53,6 +53,7 @@ export default {
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
process_name: this.$i18n.t("ID_PROCESS_NAME"),
process_category: this.$i18n.t("ID_CATEGORY_PROCESS"),
task: this.$i18n.t("ID_TASK"),
send_by: this.$i18n.t("ID_SEND_BY"),
current_user: this.$i18n.t("ID_CURRENT_USER"),
@@ -64,6 +65,7 @@ export default {
"case_number",
"thread_title",
"process_name",
"process_category",
"due_date",
"delegation_date",
"priority",

View File

@@ -46,6 +46,9 @@
<div slot="process_name" slot-scope="props">
{{ props.row.PROCESS_NAME }}
</div>
<div slot="process_category" slot-scope="props">
{{ props.row.PROCESS_CATEGORY }}
</div>
<div slot="task" slot-scope="props">
<TaskCell :data="props.row.TASK" />
</div>
@@ -105,6 +108,14 @@
>{{ props["item"]["PROCESS_NAME"] }}
</span>
</div>
<div slot="process_category" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark"
>{{ props["headings"][props.column] }} :</span
>
<span class="v-card-text-light"
>{{ props["item"]["PROCESS_CATEGORY"] }}
</span>
</div>
<div slot="due_date" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark"
>{{ props["headings"][props.column] }} :</span
@@ -186,6 +197,14 @@
>{{ props["item"]["PROCESS_NAME"] }}
</span>
</div>
<div slot="process_category" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark"
>{{ props["headings"][props.column] }} :</span
>
<span class="v-card-text-light"
>{{ props["item"]["PROCESS_CATEGORY"] }}
</span>
</div>
<div slot="due_date" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark"
>{{ props["headings"][props.column] }} :</span
@@ -319,6 +338,7 @@ export default {
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
process_name: this.$i18n.t("ID_PROCESS_NAME"),
process_category: this.$i18n.t("ID_CATEGORY_PROCESS"),
task: this.$i18n.t("ID_TASK"),
send_by: this.$i18n.t("ID_SEND_BY"),
due_date: this.$i18n.t("ID_DUE_DATE"),
@@ -519,6 +539,7 @@ export default {
CASE_NUMBER: v.APP_NUMBER,
THREAD_TITLE: v.DEL_TITLE,
PROCESS_NAME: v.PRO_TITLE,
PROCESS_CATEGORY: v.CATEGORY,
TASK: [{
TITLE: v.TAS_TITLE,
CODE_COLOR: v.TAS_COLOR,

View File

@@ -53,6 +53,7 @@ export default {
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
process_name: this.$i18n.t("ID_PROCESS_NAME"),
process_category: this.$i18n.t("ID_CATEGORY_PROCESS"),
task: this.$i18n.t("ID_TASK"),
send_by: this.$i18n.t("ID_SEND_BY"),
current_user: this.$i18n.t("ID_CURRENT_USER"),
@@ -64,6 +65,7 @@ export default {
"case_number",
"thread_title",
"process_name",
"process_category",
"due_date",
"delegation_date",
"priority",