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

Finalized advanced filtering

pull/973/head
Cagatay Civici 2021-02-09 13:14:12 +03:00
parent 61a0ebf3e8
commit 328cb93a11
3 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -149,8 +149,8 @@ export default {
if (this.filters && this.filters[this.field]) {
let fieldFilters = this.filters[this.field];
if (fieldFilters.operator) {
this.defaultMatchMode = this.filters[this.field].constraints[0].matchMode;
this.defaultOperator = this.filters[this.field].operator;
this.defaultMatchMode = fieldFilters.constraints[0].matchMode;
this.defaultOperator = fieldFilters.operator;
}
else {
this.defaultMatchMode = this.filters[this.field].matchMode;
@ -162,7 +162,8 @@ export default {
let _filters = {...this.filters};
if (_filters[this.field].operator) {
_filters[this.field].constraints.splice(1);
_filters[this.field].constraints[0] = {value: null, matchMode: this.defaultMatchMode, operator: this.defaultOperator};
_filters[this.field].operator = this.defaultOperator;
_filters[this.field].constraints[0] = {value: null, matchMode: this.defaultMatchMode};
}
else {
_filters[this.field].value = null;

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

@ -1715,7 +1715,9 @@ export default {
cloneFilters() {
let cloned = {};
if (this.filters) {
cloned = JSON.parse(JSON.stringify(this.filters));
Object.entries(this.filters).forEach(([prop,value]) => {
cloned[prop] = value.operator ? {operator: value.operator, constraints: value.constraints.map(constraint => {return {...constraint}})} : {...value};
});
}
return cloned;

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

@ -81,7 +81,7 @@
{{formatDate(data.date)}}
</template>
<template #filter="{filterModel}">
<Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" />
<Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
</template>
</Column>
<Column header="Balance" filterField="balance" dataType="numeric">
@ -160,7 +160,7 @@
{{data.name}}
</template>
<template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by name" v-tooltip.top.focus="'Hit enter key to filter'"/>
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`" v-tooltip.top.focus="'Hit enter key to filter'"/>
</template>
</Column>
<Column header="Country" filterField="country.name">
@ -197,6 +197,9 @@
</template>
<template #filter="{filterModel,filterCallback}">
<Dropdown v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
<template #value="slotProps">
<span :class="'customer-badge status-' + slotProps.value">{{slotProps.value}}</span>
</template>
<template #option="slotProps">
<span :class="'customer-badge status-' + slotProps.option">{{slotProps.option}}</span>
</template>