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

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

@ -1715,7 +1715,9 @@ export default {
cloneFilters() { cloneFilters() {
let cloned = {}; let cloned = {};
if (this.filters) { 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; return cloned;

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

@ -81,7 +81,7 @@
{{formatDate(data.date)}} {{formatDate(data.date)}}
</template> </template>
<template #filter="{filterModel}"> <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> </template>
</Column> </Column>
<Column header="Balance" filterField="balance" dataType="numeric"> <Column header="Balance" filterField="balance" dataType="numeric">
@ -160,7 +160,7 @@
{{data.name}} {{data.name}}
</template> </template>
<template #filter="{filterModel,filterCallback}"> <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> </template>
</Column> </Column>
<Column header="Country" filterField="country.name"> <Column header="Country" filterField="country.name">
@ -197,6 +197,9 @@
</template> </template>
<template #filter="{filterModel,filterCallback}"> <template #filter="{filterModel,filterCallback}">
<Dropdown v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true"> <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"> <template #option="slotProps">
<span :class="'customer-badge status-' + slotProps.option">{{slotProps.option}}</span> <span :class="'customer-badge status-' + slotProps.option">{{slotProps.option}}</span>
</template> </template>