Add clear filters option
Cagatay Civici
parent
cc11c9d460
commit
31331f99a2
|
|
@ -16,7 +16,7 @@
|
|||
@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>
|
||||
<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>
|
||||
</template>
|
||||
<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>
|
||||
</div>
|
||||
<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"
|
||||
@update:modelValue="onMenuMatchModeChange($event, i)" class="p-column-filter-matchmode-dropdown"></CFDropdown>
|
||||
<component v-if="display === 'menu'" :is="filterElement" :field="field" />
|
||||
<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>
|
||||
<component v-if="display === 'menu'" :is="filterElement" :field="field" :index="i"/>
|
||||
<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 class="p-column-filter-add-rule" v-if="isShowAddConstraint">
|
||||
|
|
@ -147,6 +149,7 @@ export default {
|
|||
}
|
||||
|
||||
this.$emit('filtermeta-change', _filters);
|
||||
this.hide();
|
||||
},
|
||||
applyFilter() {
|
||||
let _filters = {...this.filters};
|
||||
|
|
@ -259,10 +262,6 @@ export default {
|
|||
else
|
||||
return item.parentElement.lastElementChild;
|
||||
},
|
||||
onRowClearItemClick() {
|
||||
this.clearFilter();
|
||||
this.hide();
|
||||
},
|
||||
hide() {
|
||||
this.overlayVisible = false;
|
||||
},
|
||||
|
|
@ -360,12 +359,12 @@ export default {
|
|||
},
|
||||
addConstraint() {
|
||||
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);
|
||||
},
|
||||
removeConstraint(filterMeta) {
|
||||
removeConstraint(index) {
|
||||
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);
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -170,7 +170,7 @@ export default {
|
|||
this.resizeListener = null;
|
||||
}
|
||||
},
|
||||
isTargetClicked() {
|
||||
isTargetClicked(event) {
|
||||
return this.target && (this.target === event.target || this.target.contains(event.target));
|
||||
},
|
||||
appendContainer() {
|
||||
|
|
|
|||
|
|
@ -14,8 +14,9 @@
|
|||
<DataTable :value="customers1" :paginator="true" class="p-datatable-customers p-datatable-gridlines" :rows="10"
|
||||
dataKey="id" :filters="filters1" filterDisplay="menu" :loading="loading1">
|
||||
<template #header>
|
||||
<div class="p-d-flex p-jc-end">
|
||||
<span class="p-input-icon-left ">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<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" />
|
||||
<InputText v-model="filters1['global'].value" placeholder="Keyword Search" />
|
||||
</span>
|
||||
|
|
@ -32,8 +33,8 @@
|
|||
<span class="p-column-title">Name</span>
|
||||
{{slotProps.data.name}}
|
||||
</template>
|
||||
<template #filter>
|
||||
<InputText type="text" v-model="filters1['name'].value" class="p-column-filter" placeholder="Search by name"/>
|
||||
<template #filter="slotProps">
|
||||
<InputText type="text" v-model="filters1['name'][slotProps.index].value" class="p-column-filter" placeholder="Search by name"/>
|
||||
</template>
|
||||
</Column>
|
||||
<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" />
|
||||
<span class="image-text">{{slotProps.data.country.name}}</span>
|
||||
</template>
|
||||
<template #filter>
|
||||
<InputText type="text" v-model="filters1['country.name'].value" class="p-column-filter" placeholder="Search by country"/>
|
||||
<template #filter="slotProps">
|
||||
<InputText type="text" v-model="filters1['country.name'][slotProps.index].value" class="p-column-filter" placeholder="Search by country"/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :showFilterOperator="false" :showAddButton="false">
|
||||
|
|
@ -227,17 +228,7 @@ export default {
|
|||
return {
|
||||
customers1: null,
|
||||
customers2: null,
|
||||
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, operator: FilterOperator.AND}]
|
||||
},
|
||||
filters1: null,
|
||||
filters2: {
|
||||
'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
|
||||
'name': {value: null, matchMode: FilterMatchMode.STARTS_WITH},
|
||||
|
|
@ -267,6 +258,7 @@ export default {
|
|||
},
|
||||
created() {
|
||||
this.customerService = new CustomerService();
|
||||
this.initFilters1();
|
||||
},
|
||||
mounted() {
|
||||
this.customerService.getCustomersLarge().then(data => {this.customers1 = data; this.loading1 = false;});
|
||||
|
|
@ -275,6 +267,22 @@ export default {
|
|||
methods: {
|
||||
formatCurrency(value) {
|
||||
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}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue