vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactored FilterMenu implementation

pull/973/head
Cagatay Civici 2021-02-07 02:47:55 +03:00
parent b53a5a81b7
commit 9c966d085c
4 changed files with 39 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/datatable/ColumnFilter.vue
View File

@ -28,7 +28,7 @@
<CFDropdown v-if="showMatchModes && matchModes" :options="matchModes" :modelValue="fieldConstraint.matchMode" optionLabel="label" optionValue="value" <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> @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" /> <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> <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>
</div> </div>
@ -129,9 +129,9 @@ export default {
mounted() { mounted() {
if (this.filters && this.filters[this.field]) { if (this.filters && this.filters[this.field]) {
let fieldFilters = this.filters[this.field]; let fieldFilters = this.filters[this.field];
if (Array.isArray(fieldFilters)) { if (fieldFilters.operator) {
this.defaultMatchMode = this.filters[this.field][0].matchMode; this.defaultMatchMode = this.filters[this.field].constraints[0].matchMode;
this.defaultOperator = this.filters[this.field][0].operator; this.defaultOperator = this.filters[this.field].operator;
} }
else { else {
this.defaultMatchMode = this.filters[this.field].matchMode; this.defaultMatchMode = this.filters[this.field].matchMode;
@ -141,9 +141,9 @@ export default {
methods: { methods: {
clearFilter() { clearFilter() {
let _filters = {...this.filters}; let _filters = {...this.filters};
if (Array.isArray(_filters[this.field])) { if (_filters[this.field].operator) {
_filters[this.field].splice(1); _filters[this.field].constraints.splice(1);
_filters[this.field][0] = {value: null, matchMode: this.defaultMatchMode, operator: this.defaultOperator}; _filters[this.field].constraints[0] = {value: null, matchMode: this.defaultMatchMode, operator: this.defaultOperator};
} }
else { else {
_filters[this.field].value = null; _filters[this.field].value = null;
@ -161,8 +161,8 @@ export default {
hasFilter() { hasFilter() {
let fieldFilter = this.filters[this.field]; let fieldFilter = this.filters[this.field];
if (fieldFilter) { if (fieldFilter) {
if (Array.isArray(fieldFilter)) if (fieldFilter.operator)
return !this.isFilterBlank(fieldFilter[0].value); return !this.isFilterBlank(fieldFilter.constraints[0].value);
else else
return !this.isFilterBlank(fieldFilter.value); return !this.isFilterBlank(fieldFilter.value);
} }
@ -251,17 +251,17 @@ export default {
}, },
onOperatorChange(value) { onOperatorChange(value) {
let _filters = {...this.filters}; let _filters = {...this.filters};
_filters[this.field].forEach(filterMeta => { _filters[this.field].operator = value;
filterMeta.operator = value; this.$emit('filter-change', _filters);
});
if (!this.showApplyButton) { if (!this.showApplyButton) {
this.$emit('filter-change', _filters); this.$emit('filter-apply');
} }
}, },
onMenuMatchModeChange(value, index) { onMenuMatchModeChange(value, index) {
let _filters = {...this.filters}; let _filters = {...this.filters};
_filters[this.field][index].matchMode = value; _filters[this.field].constraints[index].matchMode = value;
if (!this.showApplyButton) { if (!this.showApplyButton) {
this.$emit('filter-change', _filters); this.$emit('filter-change', _filters);
@ -269,12 +269,12 @@ export default {
}, },
addConstraint() { addConstraint() {
let _filters = {...this.filters}; 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); this.$emit('filter-change', _filters);
}, },
removeConstraint(index) { removeConstraint(index) {
let _filters = {...this.filters}; let _filters = {...this.filters};
_filters[this.field].splice(index, 1); _filters[this.field].constraints.splice(index, 1);
this.$emit('filter-change', _filters); this.$emit('filter-change', _filters);
}, },
filterCallback() { filterCallback() {
@ -408,10 +408,10 @@ export default {
return this.showOperator && this.type !== 'boolean'; return this.showOperator && this.type !== 'boolean';
}, },
operator() { operator() {
return this.filters[this.field][0].operator; return this.filters[this.field].operator;
}, },
fieldConstraints() { 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() { showRemoveIcon() {
return this.fieldConstraints.length > 1; return this.fieldConstraints.length > 1;

14
src/components/datatable/DataTable.vue
View File

@ -622,11 +622,11 @@ export default {
let filterField = prop; let filterField = prop;
let filterMeta = this.filters[filterField]; let filterMeta = this.filters[filterField];
if (Array.isArray(filterMeta)) { if (filterMeta.operator) {
for (let meta of filterMeta) { for (let filterConstraint of filterMeta.constraints) {
localMatch = this.executeLocalFilter(filterField, data[i], meta); 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; break;
} }
} }
@ -1712,11 +1712,7 @@ export default {
cloneFilters() { cloneFilters() {
let cloned = {}; let cloned = {};
if (this.filters) { if (this.filters) {
for (let prop in this.filters) { cloned = JSON.parse(JSON.stringify(this.filters));
if (Object.prototype.hasOwnProperty.call(this.filters, prop)) {
cloned[prop] = {...this.filters[prop]};
}
}
} }
return cloned; return cloned;

8
src/components/datatable/TableHeader.vue
View File

@ -15,7 +15,7 @@
<span v-if="columnProp(col, 'sortable')" :class="getSortableColumnIcon(col)"></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> <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'" /> <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" :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')" :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')" :showOperator="columnProp(col, 'showFilterOperator')" :showClearButton="columnProp(col, 'showClearButton')" :showApplyButton="columnProp(col, 'showApplyButton')"
@ -24,11 +24,11 @@
</th> </th>
</template> </template>
</tr> </tr>
<tr v-if="filters && filterDisplay === 'row'"> <tr v-if="filterDisplay === 'row'">
<template v-for="(col,i) of columns"> <template v-for="(col,i) of columns">
<th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field'))" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i" <th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field'))" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i"
:class="getFilterColumnHeaderClass(col)" :style="columnProp(col, 'filterHeaderStyle')"> :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" :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')" :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')" :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" <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)" @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)"> :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 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="columnProp(col, 'sortable')" :class="getSortableColumnIcon(col)"></span>
<span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span> <span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>

24
src/views/datatable/DataTableFilterDemo.vue
View File

@ -53,9 +53,9 @@
<img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" /> <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> <span class="image-text">{{data.representative.name}}</span>
</template> </template>
<template #filter="{filterModel,filterCallback}"> <template #filter="{filterModel}">
<div class="p-mb-3 p-text-bold">Agent Picker</div> <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"> <template #option="slotProps">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" /> <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> <span class="p-column-title">Status</span>
<ProgressBar :value="data.activity" :showValue="false"></ProgressBar> <ProgressBar :value="data.activity" :showValue="false"></ProgressBar>
</template> </template>
<template #filter={filterModel,filterCallback}> <template #filter={filterModel}>
<Slider v-model="filterModel.value" range @slideend="filterCallback()" class="p-m-3"></Slider> <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"> <div class="p-d-flex p-ai-center p-jc-between p-px-2">
<span>{{filters1['activity'].value[0]}}</span> <span>{{filters1['activity'].value[0]}}</span>
<span>{{filters1['activity'].value[1]}}</span> <span>{{filters1['activity'].value[1]}}</span>
@ -114,8 +114,8 @@
<span class="p-column-title">Verified</span> <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> <i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
</template> </template>
<template #filter={filterModel,filterCallback}> <template #filter={filterModel}>
<TriStateCheckbox v-model="filterModel.value" @change="filterCallback()" /> <TriStateCheckbox v-model="filterModel.value" />
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -130,7 +130,7 @@
<div class="p-d-flex p-jc-end"> <div class="p-d-flex p-jc-end">
<span class="p-input-icon-left "> <span class="p-input-icon-left ">
<i class="pi pi-search" /> <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> </span>
</div> </div>
</template> </template>
@ -274,12 +274,12 @@ export default {
initFilters1() { initFilters1() {
this.filters1 = { this.filters1 = {
'global': {value: null, matchMode: FilterMatchMode.CONTAINS}, 'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
'name': [{value: null, matchMode: FilterMatchMode.STARTS_WITH, operator: FilterOperator.AND}], 'name': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
'country.name': [{value: null, matchMode: FilterMatchMode.STARTS_WITH, operator: FilterOperator.AND}], 'country.name': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
'representative': {value: null, matchMode: FilterMatchMode.IN}, 'representative': {value: null, matchMode: FilterMatchMode.IN},
'date': [{value: null, matchMode: FilterMatchMode.IS, operator: FilterOperator.AND}], 'date': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.IS}]},
'balance': [{value: null, matchMode: FilterMatchMode.EQUALS, operator: FilterOperator.AND}], 'balance': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]},
'status': [{value: null, matchMode: FilterMatchMode.EQUALS, operator: FilterOperator.AND}], 'status': {operator: FilterOperator.OR, constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]},
'activity': {value: [0,100], matchMode: FilterMatchMode.BETWEEN}, 'activity': {value: [0,100], matchMode: FilterMatchMode.BETWEEN},
'verified': {value: null, matchMode: FilterMatchMode.EQUALS} 'verified': {value: null, matchMode: FilterMatchMode.EQUALS}
} }