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>
<div class="p-column-filter-constraints"> <div class="p-column-filter-constraints">
<div v-for="(fieldConstraint,i) of fieldConstraints" :key="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="isShowMatchModes" :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" :filterModel="fieldConstraint" :filterCallback="filterCallback" /> <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" />
<div> <div>
@ -413,6 +413,9 @@ export default {
return {label: this.$primevue.config.locale[key], value: key} return {label: this.$primevue.config.locale[key], value: key}
}); });
}, },
isShowMatchModes() {
return this.type !== 'boolean' && this.showMatchModes && this.matchModes;
},
operatorOptions() { operatorOptions() {
return [ return [
{label: this.$primevue.config.locale.matchAll, value: FilterOperator.AND}, {label: this.$primevue.config.locale.matchAll, value: FilterOperator.AND},
@ -423,7 +426,7 @@ export default {
return this.$primevue.config.locale.noFilter; return this.$primevue.config.locale.noFilter;
}, },
isShowOperator() { isShowOperator() {
return this.showOperator && this.type !== 'boolean'; return this.showOperator && this.filters[this.field].operator;
}, },
operator() { operator() {
return this.filters[this.field].operator; return this.filters[this.field].operator;
@ -441,7 +444,7 @@ export default {
return this.$primevue.config.locale.addRule; return this.$primevue.config.locale.addRule;
}, },
isShowAddConstraint() { 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() { clearButtonLabel() {
return this.$primevue.config.locale.clear; 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"/> <InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country"/>
</template> </template>
</Column> </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}"> <template #body="{data}">
<span class="p-column-title">Agent</span> <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" /> <img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
@ -100,7 +100,7 @@
</Dropdown> </Dropdown>
</template> </template>
</Column> </Column>
<Column field="activity" header="Activity" :showFilterMatchModes="false" :showFilterOperator="false" :showAddButton="false"> <Column field="activity" header="Activity" :showFilterMatchModes="false">
<template #body="{data}"> <template #body="{data}">
<span class="p-column-title">Status</span> <span class="p-column-title">Status</span>
<ProgressBar :value="data.activity" :showValue="false"></ProgressBar> <ProgressBar :value="data.activity" :showValue="false"></ProgressBar>
@ -113,7 +113,7 @@
</div> </div>
</template> </template>
</Column> </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}"> <template #body="{data}">
<span class="p-column-title">Verified</span> <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> <i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>