From 31331f99a2ae5beea860d773689ae3ad5f0101cc Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 6 Feb 2021 16:20:12 +0300
Subject: [PATCH] Add clear filters option

---
 src/components/datatable/ColumnFilter.vue    | 21 +++++-----
 src/components/overlaypanel/OverlayPanel.vue |  2 +-
 src/views/datatable/DataTableFilterDemo.vue  | 42 ++++++++++++--------
 3 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/src/components/datatable/ColumnFilter.vue b/src/components/datatable/ColumnFilter.vue
index e17fcb999..8a6781105 100644
--- a/src/components/datatable/ColumnFilter.vue
+++ b/src/components/datatable/ColumnFilter.vue
@@ -16,7 +16,7 @@
                             @click="onRowMatchModeChange(matchMode.value)" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
                             :class="{'p-highlight': isRowMatchModeSelected(matchMode.value)}" :tabindex="i === 0 ? '0' : null">{{matchMode.label}}</li>
                         <li class="p-column-filter-separator"></li>
-                        <li class="p-column-filter-row-item" @click="onRowClearItemClick()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()">{{noFilterLabel}}</li>
+                        <li class="p-column-filter-row-item" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()">{{noFilterLabel}}</li>
                     </ul>
                 </template>
                 <template v-else>
@@ -24,11 +24,13 @@
                         <CFDropdown :options="operatorOptions" :modelValue="operator" @update:modelValue="onOperatorChange($event)" class="p-column-filter-operator-dropdown" optionLabel="label" optionValue="value"></CFDropdown>
                     </div>
                     <div class="p-column-filter-constraints">
-                        <div v-for="(fieldConstraint,i) of fieldConstraints" :key="fieldConstraint.matchMode + 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"
                                 @update:modelValue="onMenuMatchModeChange($event, i)" class="p-column-filter-matchmode-dropdown"></CFDropdown>
-                            <component v-if="display === 'menu'" :is="filterElement" :field="field" />
-                            <CFButton v-if="showRemoveIcon" type="button" icon="pi pi-trash" class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm" @click="removeConstraint(fieldConstraint)" :label="removeRuleButtonLabel"></CFButton>
+                            <component v-if="display === 'menu'" :is="filterElement" :field="field" :index="i"/>
+                            <div v-if="i !== 0">
+                                <CFButton v-if="showRemoveIcon" type="button" icon="pi pi-trash" class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm" @click="removeConstraint(i)" :label="removeRuleButtonLabel"></CFButton>
+                            </div>
                         </div>
                     </div>
                     <div class="p-column-filter-add-rule" v-if="isShowAddConstraint">
@@ -147,6 +149,7 @@ export default {
             }
             
             this.$emit('filtermeta-change', _filters);
+            this.hide();
         },
         applyFilter() {
             let _filters = {...this.filters};
@@ -259,10 +262,6 @@ export default {
             else
                 return item.parentElement.lastElementChild;
         },
-        onRowClearItemClick() {
-            this.clearFilter();
-            this.hide();
-        },
         hide() {
             this.overlayVisible = false;
         },
@@ -360,12 +359,12 @@ export default {
         },
         addConstraint() {
             let _filters = {...this.filters};
-            _filters[this.field].push({value: null, matchMode: this.defaultMatchMode()});
+            _filters[this.field].push({value: null, matchMode: this.defaultMatchMode});
             this.$emit('filtermeta-change', _filters);
         },
-        removeConstraint(filterMeta) {
+        removeConstraint(index) {
             let _filters = {...this.filters};
-            _filters[this.field] = _filters[this.field].filter(meta => meta !== filterMeta);
+            _filters[this.field].splice(index, 1);
             this.$emit('filtermeta-change', _filters);
         }
     },
diff --git a/src/components/overlaypanel/OverlayPanel.vue b/src/components/overlaypanel/OverlayPanel.vue
index 1c6b8ce26..1cf15a3e2 100755
--- a/src/components/overlaypanel/OverlayPanel.vue
+++ b/src/components/overlaypanel/OverlayPanel.vue
@@ -170,7 +170,7 @@ export default {
                 this.resizeListener = null;
             }
         },
-        isTargetClicked() {
+        isTargetClicked(event) {
             return this.target && (this.target === event.target || this.target.contains(event.target));
         },
         appendContainer() {
diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue
index bec1e8ae3..b02c4282f 100755
--- a/src/views/datatable/DataTableFilterDemo.vue
+++ b/src/views/datatable/DataTableFilterDemo.vue
@@ -14,8 +14,9 @@
                 <DataTable :value="customers1" :paginator="true" class="p-datatable-customers p-datatable-gridlines" :rows="10"
                     dataKey="id" :filters="filters1" filterDisplay="menu" :loading="loading1">
                     <template #header>
-                        <div class="p-d-flex p-jc-end">
-                            <span class="p-input-icon-left ">
+                        <div class="p-d-flex p-jc-between">
+                            <Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()"/>
+                            <span class="p-input-icon-left">
                                 <i class="pi pi-search" />
                                 <InputText v-model="filters1['global'].value" placeholder="Keyword Search" />
                             </span>
@@ -32,8 +33,8 @@
                             <span class="p-column-title">Name</span>
                             {{slotProps.data.name}}
                         </template>
-                        <template #filter>
-                            <InputText type="text" v-model="filters1['name'].value" class="p-column-filter" placeholder="Search by name"/>
+                        <template #filter="slotProps">
+                            <InputText type="text" v-model="filters1['name'][slotProps.index].value" class="p-column-filter" placeholder="Search by name"/>
                         </template>
                     </Column>
                     <Column header="Country" filterField="country.name">
@@ -42,8 +43,8 @@
                             <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
                             <span class="image-text">{{slotProps.data.country.name}}</span>
                         </template>
-                        <template #filter>
-                            <InputText type="text" v-model="filters1['country.name'].value" class="p-column-filter" placeholder="Search by country"/>
+                        <template #filter="slotProps">
+                            <InputText type="text" v-model="filters1['country.name'][slotProps.index].value" class="p-column-filter" placeholder="Search by country"/>
                         </template>
                     </Column>
                     <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :showFilterOperator="false" :showAddButton="false">
@@ -227,17 +228,7 @@ export default {
         return {
             customers1: null,
             customers2: null,
-            filters1: {
-                'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
-                'name': [{value: null, matchMode: FilterMatchMode.STARTS_WITH, operator: FilterOperator.AND}],
-                'country.name': [{value: null, matchMode: FilterMatchMode.STARTS_WITH, operator: FilterOperator.AND}],
-                'representative': [{value: null, matchMode: FilterMatchMode.IN}],
-                'date': [{value: null, matchMode: FilterMatchMode.IS, operator: FilterOperator.AND}],
-                'balance': [{value: null, matchMode: FilterMatchMode.EQUALS, operator: FilterOperator.AND}],
-                'status': [{value: null, matchMode: FilterMatchMode.EQUALS, operator: FilterOperator.AND}],
-                'activity': [{value: [0,100], matchMode: FilterMatchMode.BETWEEN}],
-                'verified': [{value: null, matchMode: FilterMatchMode.EQUALS, operator: FilterOperator.AND}]
-            },
+            filters1: null,
             filters2: {
                 'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
                 'name': {value: null, matchMode: FilterMatchMode.STARTS_WITH},
@@ -267,6 +258,7 @@ export default {
     },
     created() {
         this.customerService = new CustomerService();
+        this.initFilters1();
     },
     mounted() {
         this.customerService.getCustomersLarge().then(data => {this.customers1 = data; this.loading1 = false;});
@@ -275,6 +267,22 @@ export default {
     methods: {
         formatCurrency(value) {
             return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
+        },
+        clearFilter1() {
+            this.initFilters1();
+        },
+        initFilters1() {
+            this.filters1 = {
+                'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
+                'name': [{value: null, matchMode: FilterMatchMode.STARTS_WITH, operator: FilterOperator.AND}],
+                'country.name': [{value: null, matchMode: FilterMatchMode.STARTS_WITH, operator: FilterOperator.AND}],
+                'representative': [{value: null, matchMode: FilterMatchMode.IN}],
+                'date': [{value: null, matchMode: FilterMatchMode.IS, operator: FilterOperator.AND}],
+                'balance': [{value: null, matchMode: FilterMatchMode.EQUALS, operator: FilterOperator.AND}],
+                'status': [{value: null, matchMode: FilterMatchMode.EQUALS, operator: FilterOperator.AND}],
+                'activity': [{value: [0,100], matchMode: FilterMatchMode.BETWEEN}],
+                'verified': [{value: null, matchMode: FilterMatchMode.EQUALS}]
+            }
         }
     }
 }