From 7b82230b72e822ee1afc144ea8d08f9f4b11277a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 8 Feb 2021 13:16:31 +0300
Subject: [PATCH] Simplified UI of filter menu using logic from props

---
 src/components/datatable/ColumnFilter.vue   | 9 ++++++---
 src/views/datatable/DataTableFilterDemo.vue | 6 +++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/datatable/ColumnFilter.vue b/src/components/datatable/ColumnFilter.vue
index 558d704ed..a0a13975a 100644
--- a/src/components/datatable/ColumnFilter.vue
+++ b/src/components/datatable/ColumnFilter.vue
@@ -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;
diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue
index 2cd8d3860..7d9d2703c 100755
--- a/src/views/datatable/DataTableFilterDemo.vue
+++ b/src/views/datatable/DataTableFilterDemo.vue
@@ -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>