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

Add clear filters option

pull/973/head
Cagatay Civici 2021-02-06 16:20:12 +03:00
parent cc11c9d460
commit 31331f99a2
3 changed files with 36 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,7 +16,7 @@
@click="onRowMatchModeChange(matchMode.value)" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter.prevent="onRowMatchModeChange(matchMode.value)" @click="onRowMatchModeChange(matchMode.value)" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
:class="{'p-highlight': isRowMatchModeSelected(matchMode.value)}" :tabindex="i === 0 ? '0' : null">{{matchMode.label}}</li> :class="{'p-highlight': isRowMatchModeSelected(matchMode.value)}" :tabindex="i === 0 ? '0' : null">{{matchMode.label}}</li>
<li class="p-column-filter-separator"></li> <li class="p-column-filter-separator"></li>
<li class="p-column-filter-row-item" @click="onRowClearItemClick()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()">{{noFilterLabel}}</li> <li class="p-column-filter-row-item" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()">{{noFilterLabel}}</li>
</ul> </ul>
</template> </template>
<template v-else> <template v-else>
@ -24,11 +24,13 @@
<CFDropdown :options="operatorOptions" :modelValue="operator" @update:modelValue="onOperatorChange($event)" class="p-column-filter-operator-dropdown" optionLabel="label" optionValue="value"></CFDropdown> <CFDropdown :options="operatorOptions" :modelValue="operator" @update:modelValue="onOperatorChange($event)" class="p-column-filter-operator-dropdown" optionLabel="label" optionValue="value"></CFDropdown>
</div> </div>
<div class="p-column-filter-constraints"> <div class="p-column-filter-constraints">
<div v-for="(fieldConstraint,i) of fieldConstraints" :key="fieldConstraint.matchMode + i" class="p-column-filter-constraint"> <div v-for="(fieldConstraint,i) of fieldConstraints" :key="i" class="p-column-filter-constraint">
<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" /> <component v-if="display === 'menu'" :is="filterElement" :field="field" :index="i"/>
<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(fieldConstraint)" :label="removeRuleButtonLabel"></CFButton> <div v-if="i !== 0">
<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> </div>
<div class="p-column-filter-add-rule" v-if="isShowAddConstraint"> <div class="p-column-filter-add-rule" v-if="isShowAddConstraint">
@ -147,6 +149,7 @@ export default {
} }
this.$emit('filtermeta-change', _filters); this.$emit('filtermeta-change', _filters);
this.hide();
}, },
applyFilter() { applyFilter() {
let _filters = {...this.filters}; let _filters = {...this.filters};
@ -259,10 +262,6 @@ export default {
else else
return item.parentElement.lastElementChild; return item.parentElement.lastElementChild;
}, },
onRowClearItemClick() {
this.clearFilter();
this.hide();
},
hide() { hide() {
this.overlayVisible = false; this.overlayVisible = false;
}, },
@ -360,12 +359,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].push({value: null, matchMode: this.defaultMatchMode});
this.$emit('filtermeta-change', _filters); this.$emit('filtermeta-change', _filters);
}, },
removeConstraint(filterMeta) { removeConstraint(index) {
let _filters = {...this.filters}; let _filters = {...this.filters};
_filters[this.field] = _filters[this.field].filter(meta => meta !== filterMeta); _filters[this.field].splice(index, 1);
this.$emit('filtermeta-change', _filters); this.$emit('filtermeta-change', _filters);
} }
}, },

2
src/components/overlaypanel/OverlayPanel.vue
View File

@ -170,7 +170,7 @@ export default {
this.resizeListener = null; this.resizeListener = null;
} }
}, },
isTargetClicked() { isTargetClicked(event) {
return this.target && (this.target === event.target || this.target.contains(event.target)); return this.target && (this.target === event.target || this.target.contains(event.target));
}, },
appendContainer() { appendContainer() {

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

@ -14,8 +14,9 @@
<DataTable :value="customers1" :paginator="true" class="p-datatable-customers p-datatable-gridlines" :rows="10" <DataTable :value="customers1" :paginator="true" class="p-datatable-customers p-datatable-gridlines" :rows="10"
dataKey="id" :filters="filters1" filterDisplay="menu" :loading="loading1"> dataKey="id" :filters="filters1" filterDisplay="menu" :loading="loading1">
<template #header> <template #header>
<div class="p-d-flex p-jc-end"> <div class="p-d-flex p-jc-between">
<span class="p-input-icon-left "> <Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()"/>
<span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters1['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters1['global'].value" placeholder="Keyword Search" />
</span> </span>
@ -32,8 +33,8 @@
<span class="p-column-title">Name</span> <span class="p-column-title">Name</span>
{{slotProps.data.name}} {{slotProps.data.name}}
</template> </template>
<template #filter> <template #filter="slotProps">
<InputText type="text" v-model="filters1['name'].value" class="p-column-filter" placeholder="Search by name"/> <InputText type="text" v-model="filters1['name'][slotProps.index].value" class="p-column-filter" placeholder="Search by name"/>
</template> </template>
</Column> </Column>
<Column header="Country" filterField="country.name"> <Column header="Country" filterField="country.name">
@ -42,8 +43,8 @@
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /> <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{slotProps.data.country.name}}</span> <span class="image-text">{{slotProps.data.country.name}}</span>
</template> </template>
<template #filter> <template #filter="slotProps">
<InputText type="text" v-model="filters1['country.name'].value" class="p-column-filter" placeholder="Search by country"/> <InputText type="text" v-model="filters1['country.name'][slotProps.index].value" class="p-column-filter" placeholder="Search by country"/>
</template> </template>
</Column> </Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :showFilterOperator="false" :showAddButton="false"> <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :showFilterOperator="false" :showAddButton="false">
@ -227,17 +228,7 @@ export default {
return { return {
customers1: null, customers1: null,
customers2: null, customers2: null,
filters1: { filters1: null,
'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}],
'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}],
'activity': [{value: [0,100], matchMode: FilterMatchMode.BETWEEN}],
'verified': [{value: null, matchMode: FilterMatchMode.EQUALS, operator: FilterOperator.AND}]
},
filters2: { filters2: {
'global': {value: null, matchMode: FilterMatchMode.CONTAINS}, 'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
'name': {value: null, matchMode: FilterMatchMode.STARTS_WITH}, 'name': {value: null, matchMode: FilterMatchMode.STARTS_WITH},
@ -267,6 +258,7 @@ export default {
}, },
created() { created() {
this.customerService = new CustomerService(); this.customerService = new CustomerService();
this.initFilters1();
}, },
mounted() { mounted() {
this.customerService.getCustomersLarge().then(data => {this.customers1 = data; this.loading1 = false;}); this.customerService.getCustomersLarge().then(data => {this.customers1 = data; this.loading1 = false;});
@ -275,6 +267,22 @@ export default {
methods: { methods: {
formatCurrency(value) { formatCurrency(value) {
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'}); return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
},
clearFilter1() {
this.initFilters1();
},
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}],
'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}],
'activity': [{value: [0,100], matchMode: FilterMatchMode.BETWEEN}],
'verified': [{value: null, matchMode: FilterMatchMode.EQUALS}]
}
} }
} }
} }