Refactored FilterMenu implementation
Cagatay Civici
parent
b53a5a81b7
commit
9c966d085c
|
|
@ -28,7 +28,7 @@
|
|||
<CFDropdown v-if="showMatchModes && matchModes" :options="matchModes" :modelValue="fieldConstraint.matchMode" optionLabel="label" optionValue="value"
|
||||
@update:modelValue="onMenuMatchModeChange($event, i)" class="p-column-filter-matchmode-dropdown"></CFDropdown>
|
||||
<component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" />
|
||||
<div v-if="i !== 0">
|
||||
<div>
|
||||
<CFButton v-if="showRemoveIcon" type="button" icon="pi pi-trash" class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm" @click="removeConstraint(i)" :label="removeRuleButtonLabel"></CFButton>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -129,9 +129,9 @@ export default {
|
|||
mounted() {
|
||||
if (this.filters && this.filters[this.field]) {
|
||||
let fieldFilters = this.filters[this.field];
|
||||
if (Array.isArray(fieldFilters)) {
|
||||
this.defaultMatchMode = this.filters[this.field][0].matchMode;
|
||||
this.defaultOperator = this.filters[this.field][0].operator;
|
||||
if (fieldFilters.operator) {
|
||||
this.defaultMatchMode = this.filters[this.field].constraints[0].matchMode;
|
||||
this.defaultOperator = this.filters[this.field].operator;
|
||||
}
|
||||
else {
|
||||
this.defaultMatchMode = this.filters[this.field].matchMode;
|
||||
|
|
@ -141,9 +141,9 @@ export default {
|
|||
methods: {
|
||||
clearFilter() {
|
||||
let _filters = {...this.filters};
|
||||
if (Array.isArray(_filters[this.field])) {
|
||||
_filters[this.field].splice(1);
|
||||
_filters[this.field][0] = {value: null, matchMode: this.defaultMatchMode, operator: this.defaultOperator};
|
||||
if (_filters[this.field].operator) {
|
||||
_filters[this.field].constraints.splice(1);
|
||||
_filters[this.field].constraints[0] = {value: null, matchMode: this.defaultMatchMode, operator: this.defaultOperator};
|
||||
}
|
||||
else {
|
||||
_filters[this.field].value = null;
|
||||
|
|
@ -161,8 +161,8 @@ export default {
|
|||
hasFilter() {
|
||||
let fieldFilter = this.filters[this.field];
|
||||
if (fieldFilter) {
|
||||
if (Array.isArray(fieldFilter))
|
||||
return !this.isFilterBlank(fieldFilter[0].value);
|
||||
if (fieldFilter.operator)
|
||||
return !this.isFilterBlank(fieldFilter.constraints[0].value);
|
||||
else
|
||||
return !this.isFilterBlank(fieldFilter.value);
|
||||
}
|
||||
|
|
@ -251,17 +251,17 @@ export default {
|
|||
},
|
||||
onOperatorChange(value) {
|
||||
let _filters = {...this.filters};
|
||||
_filters[this.field].forEach(filterMeta => {
|
||||
filterMeta.operator = value;
|
||||
});
|
||||
_filters[this.field].operator = value;
|
||||
this.$emit('filter-change', _filters);
|
||||
|
||||
if (!this.showApplyButton) {
|
||||
this.$emit('filter-change', _filters);
|
||||
this.$emit('filter-apply');
|
||||
}
|
||||
|
||||
},
|
||||
onMenuMatchModeChange(value, index) {
|
||||
let _filters = {...this.filters};
|
||||
_filters[this.field][index].matchMode = value;
|
||||
_filters[this.field].constraints[index].matchMode = value;
|
||||
|
||||
if (!this.showApplyButton) {
|
||||
this.$emit('filter-change', _filters);
|
||||
|
|
@ -269,12 +269,12 @@ export default {
|
|||
},
|
||||
addConstraint() {
|
||||
let _filters = {...this.filters};
|
||||
_filters[this.field].push({value: null, matchMode: this.defaultMatchMode});
|
||||
_filters[this.field].constraints.push({value: null, matchMode: this.defaultMatchMode});
|
||||
this.$emit('filter-change', _filters);
|
||||
},
|
||||
removeConstraint(index) {
|
||||
let _filters = {...this.filters};
|
||||
_filters[this.field].splice(index, 1);
|
||||
_filters[this.field].constraints.splice(index, 1);
|
||||
this.$emit('filter-change', _filters);
|
||||
},
|
||||
filterCallback() {
|
||||
|
|
@ -408,10 +408,10 @@ export default {
|
|||
return this.showOperator && this.type !== 'boolean';
|
||||
},
|
||||
operator() {
|
||||
return this.filters[this.field][0].operator;
|
||||
return this.filters[this.field].operator;
|
||||
},
|
||||
fieldConstraints() {
|
||||
return Array.isArray(this.filters[this.field]) ? this.filters[this.field] : [this.filters[this.field]];
|
||||
return this.filters[this.field].constraints || [this.filters[this.field]];
|
||||
},
|
||||
showRemoveIcon() {
|
||||
return this.fieldConstraints.length > 1;
|
||||
|
|
|
|||
|
|
@ -622,11 +622,11 @@ export default {
|
|||
let filterField = prop;
|
||||
let filterMeta = this.filters[filterField];
|
||||
|
||||
if (Array.isArray(filterMeta)) {
|
||||
for (let meta of filterMeta) {
|
||||
localMatch = this.executeLocalFilter(filterField, data[i], meta);
|
||||
if (filterMeta.operator) {
|
||||
for (let filterConstraint of filterMeta.constraints) {
|
||||
localMatch = this.executeLocalFilter(filterField, data[i], filterConstraint);
|
||||
|
||||
if ((meta.operator === FilterOperator.OR && localMatch) || (meta.operator === FilterOperator.AND && !localMatch)) {
|
||||
if ((filterMeta.operator === FilterOperator.OR && localMatch) || (filterMeta.operator === FilterOperator.AND && !localMatch)) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
@ -1712,11 +1712,7 @@ export default {
|
|||
cloneFilters() {
|
||||
let cloned = {};
|
||||
if (this.filters) {
|
||||
for (let prop in this.filters) {
|
||||
if (Object.prototype.hasOwnProperty.call(this.filters, prop)) {
|
||||
cloned[prop] = {...this.filters[prop]};
|
||||
}
|
||||
}
|
||||
cloned = JSON.parse(JSON.stringify(this.filters));
|
||||
}
|
||||
|
||||
return cloned;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<span v-if="columnProp(col, 'sortable')" :class="getSortableColumnIcon(col)"></span>
|
||||
<span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
|
||||
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="columnProp(col, 'selectionMode') ==='multiple' && filterDisplay !== 'row'" />
|
||||
<DTColumnFilter v-if="filterDisplay === 'menu' && filters && filters[columnProp(col, 'filterField')||columnProp(col, 'field')]" :field="columnProp(col, 'filterField')||columnProp(col, 'field')" :type="columnProp(col, 'dataType')" display="menu"
|
||||
<DTColumnFilter v-if="filterDisplay === 'menu' && col.children && col.children.filter" :field="columnProp(col, 'filterField')||columnProp(col, 'field')" :type="columnProp(col, 'dataType')" display="menu"
|
||||
:showMenu="columnProp(col, 'showFilterMenu')" :filterElement="col.children && col.children.filter" :filterHeader="col.children && col.children.filterHeader" :filterFooter="col.children && col.children.filterFooter"
|
||||
:filters="filters" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')"
|
||||
:showOperator="columnProp(col, 'showFilterOperator')" :showClearButton="columnProp(col, 'showClearButton')" :showApplyButton="columnProp(col, 'showApplyButton')"
|
||||
|
|
@ -24,11 +24,11 @@
|
|||
</th>
|
||||
</template>
|
||||
</tr>
|
||||
<tr v-if="filters && filterDisplay === 'row'">
|
||||
<tr v-if="filterDisplay === 'row'">
|
||||
<template v-for="(col,i) of columns">
|
||||
<th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field'))" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i"
|
||||
:class="getFilterColumnHeaderClass(col)" :style="columnProp(col, 'filterHeaderStyle')">
|
||||
<DTColumnFilter v-if="filters && filters[columnProp(col, 'filterField')||columnProp(col, 'field')]" :field="columnProp(col, 'filterField')||columnProp(col, 'field')" :type="columnProp(col, 'dataType')" display="row"
|
||||
<DTColumnFilter v-if="col.children && col.children.filter" :field="columnProp(col, 'filterField')||columnProp(col, 'field')" :type="columnProp(col, 'dataType')" display="row"
|
||||
:showMenu="columnProp(col, 'showFilterMenu')" :filterElement="col.children && col.children.filter" :filterHeader="col.children && col.children.filterHeader" :filterFooter="col.children && col.children.filterFooter"
|
||||
:filters="filters" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')"
|
||||
:showOperator="columnProp(col, 'showFilterOperator')" :showClearButton="columnProp(col, 'showClearButton')" :showApplyButton="columnProp(col, 'showApplyButton')"
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
<th v-for="(col,i) of row.children.default()" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i" :style="columnProp(col, 'headerStyle')" :class="getColumnHeaderClass(col)" :tabindex="columnProp(col, 'sortable') ? '0' : null"
|
||||
@click="onColumnHeaderClick($event, col)" @keydown="onColumnKeyDown($event, col)" @dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
|
||||
:colspan="columnProp(col, 'colspan')" :rowspan="columnProp(col, 'rowspan')" :aria-sort="getAriaSort(col)">
|
||||
<component :is="col.children.header" :column="col" v-if="col.children && col.children.header"/>
|
||||
<component :is="col.children.header" :column="col" v-if="col.children && col.children.header"/>
|
||||
<span class="p-column-title" v-if="columnProp(col, 'header')">{{columnProp(col, 'header')}}</span>
|
||||
<span v-if="columnProp(col, 'sortable')" :class="getSortableColumnIcon(col)"></span>
|
||||
<span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
|
||||
|
|
|
|||
|
|
@ -53,9 +53,9 @@
|
|||
<img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
|
||||
<span class="image-text">{{data.representative.name}}</span>
|
||||
</template>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<template #filter="{filterModel}">
|
||||
<div class="p-mb-3 p-text-bold">Agent Picker</div>
|
||||
<MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
|
||||
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-representative-option">
|
||||
<img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
|
||||
|
|
@ -101,8 +101,8 @@
|
|||
<span class="p-column-title">Status</span>
|
||||
<ProgressBar :value="data.activity" :showValue="false"></ProgressBar>
|
||||
</template>
|
||||
<template #filter={filterModel,filterCallback}>
|
||||
<Slider v-model="filterModel.value" range @slideend="filterCallback()" class="p-m-3"></Slider>
|
||||
<template #filter={filterModel}>
|
||||
<Slider v-model="filterModel.value" range class="p-m-3"></Slider>
|
||||
<div class="p-d-flex p-ai-center p-jc-between p-px-2">
|
||||
<span>{{filters1['activity'].value[0]}}</span>
|
||||
<span>{{filters1['activity'].value[1]}}</span>
|
||||
|
|
@ -114,8 +114,8 @@
|
|||
<span class="p-column-title">Verified</span>
|
||||
<i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
|
||||
</template>
|
||||
<template #filter={filterModel,filterCallback}>
|
||||
<TriStateCheckbox v-model="filterModel.value" @change="filterCallback()" />
|
||||
<template #filter={filterModel}>
|
||||
<TriStateCheckbox v-model="filterModel.value" />
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
<div class="p-d-flex p-jc-end">
|
||||
<span class="p-input-icon-left ">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters2['global'].value" placeholder="Keyword Search" />
|
||||
<InputText v-model="filters2['global'].value" placeholder="Keyword Search" v-if="false" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -274,12 +274,12 @@ export default {
|
|||
initFilters1() {
|
||||
this.filters1 = {
|
||||
'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
|
||||
'name': [{value: null, matchMode: FilterMatchMode.STARTS_WITH, operator: FilterOperator.AND}],
|
||||
'country.name': [{value: null, matchMode: FilterMatchMode.STARTS_WITH, operator: FilterOperator.AND}],
|
||||
'name': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
|
||||
'country.name': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
|
||||
'representative': {value: null, matchMode: FilterMatchMode.IN},
|
||||
'date': [{value: null, matchMode: FilterMatchMode.IS, operator: FilterOperator.AND}],
|
||||
'balance': [{value: null, matchMode: FilterMatchMode.EQUALS, operator: FilterOperator.AND}],
|
||||
'status': [{value: null, matchMode: FilterMatchMode.EQUALS, operator: FilterOperator.AND}],
|
||||
'date': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.IS}]},
|
||||
'balance': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]},
|
||||
'status': {operator: FilterOperator.OR, constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]},
|
||||
'activity': {value: [0,100], matchMode: FilterMatchMode.BETWEEN},
|
||||
'verified': {value: null, matchMode: FilterMatchMode.EQUALS}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue