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

Simplified UI of filter menu using logic from props

pull/973/head
Cagatay Civici 2021-02-08 13:16:31 +03:00
parent 99ba9944f1
commit 7b82230b72
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,7 +25,7 @@
</div>
<div class="p-column-filter-constraints">
<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="isShowMatchModes" :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" :filterModel="fieldConstraint" :filterCallback="filterCallback" />
<div>
@ -413,6 +413,9 @@ export default {
return {label: this.$primevue.config.locale[key], value: key}
});
},
isShowMatchModes() {
return this.type !== 'boolean' && this.showMatchModes && this.matchModes;
},
operatorOptions() {
return [
{label: this.$primevue.config.locale.matchAll, value: FilterOperator.AND},
@ -423,7 +426,7 @@ export default {
return this.$primevue.config.locale.noFilter;
},
isShowOperator() {
return this.showOperator && this.type !== 'boolean';
return this.showOperator && this.filters[this.field].operator;
},
operator() {
return this.filters[this.field].operator;
@ -441,7 +444,7 @@ export default {
return this.$primevue.config.locale.addRule;
},
isShowAddConstraint() {
return this.showAddButton && this.type !== 'boolean' && (this.fieldConstraints && this.fieldConstraints.length < this.maxConstraints);
return this.showAddButton && this.filters[this.field].operator && (this.fieldConstraints && this.fieldConstraints.length < this.maxConstraints);
},
clearButtonLabel() {
return this.$primevue.config.locale.clear;

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

@ -48,7 +48,7 @@
<InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country"/>
</template>
</Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :showFilterOperator="false" :showAddButton="false" filterMenuStyle="width:14rem">
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" filterMenuStyle="width:14rem">
<template #body="{data}">
<span class="p-column-title">Agent</span>
<img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
@ -100,7 +100,7 @@
</Dropdown>
</template>
</Column>
<Column field="activity" header="Activity" :showFilterMatchModes="false" :showFilterOperator="false" :showAddButton="false">
<Column field="activity" header="Activity" :showFilterMatchModes="false">
<template #body="{data}">
<span class="p-column-title">Status</span>
<ProgressBar :value="data.activity" :showValue="false"></ProgressBar>
@ -113,7 +113,7 @@
</div>
</template>
</Column>
<Column field="verified" header="Verified" dataType="boolean" headerStyle="width: 8rem" bodyClass="p-text-center" :showFilterMatchModes="false" :showFilterOperator="false" :showAddButton="false">
<Column field="verified" header="Verified" dataType="boolean" headerStyle="width: 8rem" bodyClass="p-text-center">
<template #body="{data}">
<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>