From ffa7caa29506a87d32978dc21a08d0bfaecc118a Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 4 Mar 2020 09:41:10 +0300
Subject: [PATCH] Fixed #217, Fixed #219 , Fixed #220

---
 src/components/utils/FilterUtils.js   | 92 ++++++++++++++++++++++++---
 src/components/utils/ObjectUtils.js   | 29 +++++++++
 src/views/datatable/DataTableDemo.vue | 14 +---
 src/views/datatable/DataTableDoc.vue  |  4 +-
 4 files changed, 118 insertions(+), 21 deletions(-)

diff --git a/src/components/utils/FilterUtils.js b/src/components/utils/FilterUtils.js
index 332ccb641..9df4cc2c4 100644
--- a/src/components/utils/FilterUtils.js
+++ b/src/components/utils/FilterUtils.js
@@ -1,3 +1,5 @@
+import ObjectUtils from './ObjectUtils';
+
 export default class FilterUtils {
 
     static startsWith(value, filter) {
@@ -9,8 +11,10 @@ export default class FilterUtils {
             return false;
         }
 
-        let filterValue = filter.toLowerCase();
-        return value.toString().toLowerCase().slice(0, filterValue.length) === filterValue;
+        let filterValue = ObjectUtils.removeAccents(filter.toString()).toLowerCase();
+        let stringValue = ObjectUtils.removeAccents(value.toString()).toLowerCase();
+
+        return stringValue.slice(0, filterValue.length) === filterValue;
     }
 
     static contains(value, filter) {
@@ -22,7 +26,10 @@ export default class FilterUtils {
             return false;
         }
 
-        return value.toString().toLowerCase().indexOf(filter.toLowerCase()) !== -1;
+        let filterValue = ObjectUtils.removeAccents(filter.toString()).toLowerCase();
+        let stringValue = ObjectUtils.removeAccents(value.toString()).toLowerCase();
+
+        return stringValue.indexOf(filterValue) !== -1;
     }
 
     static endsWith(value, filter) {
@@ -34,8 +41,10 @@ export default class FilterUtils {
             return false;
         }
 
-        let filterValue = filter.toString().toLowerCase();
-        return value.toString().toLowerCase().indexOf(filterValue, value.toString().length - filterValue.length) !== -1;
+        let filterValue = ObjectUtils.removeAccents(filter.toString()).toLowerCase();
+        let stringValue = ObjectUtils.removeAccents(value.toString()).toLowerCase();
+
+        return stringValue.indexOf(filterValue, stringValue.length - filterValue.length) !== -1;
     }
 
     static equals(value, filter) {
@@ -47,7 +56,10 @@ export default class FilterUtils {
             return false;
         }
 
-        return value.toString().toLowerCase() === filter.toString().toLowerCase();
+        if (value.getTime && filter.getTime)
+            return value.getTime() === filter.getTime();
+        else
+            return ObjectUtils.removeAccents(value.toString()).toLowerCase() == ObjectUtils.removeAccents(filter.toString()).toLowerCase();
     }
 
     static notEquals(value, filter) {
@@ -59,7 +71,10 @@ export default class FilterUtils {
             return true;
         }
 
-        return value.toString().toLowerCase() !== filter.toString().toLowerCase();
+        if (value.getTime && filter.getTime)
+            return value.getTime() !== filter.getTime();
+        else
+            return ObjectUtils.removeAccents(value.toString()).toLowerCase() != ObjectUtils.removeAccents(filter.toString()).toLowerCase();
     }
 
     static in(value, filter) {
@@ -72,11 +87,72 @@ export default class FilterUtils {
         }
 
         for (let i = 0; i < filter.length; i++) {
-            if (filter[i] === value)
+            if (filter[i] === value || (value.getTime && filter[i].getTime && value.getTime() === filter[i].getTime())) {
                 return true;
+            }
         }
 
         return false;
     }
 
+    static lt(value, filter) {
+        if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
+            return true;
+        }
+
+        if (value === undefined || value === null) {
+            return false;
+        }
+
+        if (value.getTime && filter.getTime)
+            return value.getTime() < filter.getTime();
+        else
+            return value < parseFloat(filter);
+    }
+
+    static lte(value, filter) {
+        if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
+            return true;
+        }
+
+        if (value === undefined || value === null) {
+            return false;
+        }
+
+        if (value.getTime && filter.getTime)
+            return value.getTime() <= filter.getTime();
+        else
+            return value <= parseFloat(filter);
+    }
+
+    static gt(value, filter) {
+        if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
+            return true;
+        }
+
+        if (value === undefined || value === null) {
+            return false;
+        }
+
+        if (value.getTime && filter.getTime)
+            return value.getTime() > filter.getTime();
+        else
+            return value > parseFloat(filter);
+    }
+
+    static gte(value, filter) {
+        if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
+            return true;
+        }
+
+        if (value === undefined || value === null) {
+            return false;
+        }
+
+        if (value.getTime && filter.getTime)
+            return value.getTime() >= filter.getTime();
+        else
+            return value >= parseFloat(filter);
+    }
+
 }
\ No newline at end of file
diff --git a/src/components/utils/ObjectUtils.js b/src/components/utils/ObjectUtils.js
index 9ef9b6286..d410184a1 100644
--- a/src/components/utils/ObjectUtils.js
+++ b/src/components/utils/ObjectUtils.js
@@ -151,4 +151,33 @@ export default class ObjectUtils {
             arr.push(item);
         }
     }
+
+    static removeAccents(str) {
+        if (str && str.search(/[\xC0-\xFF]/g) > -1) {
+            str = str
+                    .replace(/[\xC0-\xC5]/g, "A")
+                    .replace(/[\xC6]/g, "AE")
+                    .replace(/[\xC7]/g, "C")
+                    .replace(/[\xC8-\xCB]/g, "E")
+                    .replace(/[\xCC-\xCF]/g, "I")
+                    .replace(/[\xD0]/g, "D")
+                    .replace(/[\xD1]/g, "N")
+                    .replace(/[\xD2-\xD6\xD8]/g, "O")
+                    .replace(/[\xD9-\xDC]/g, "U")
+                    .replace(/[\xDD]/g, "Y")
+                    .replace(/[\xDE]/g, "P")
+                    .replace(/[\xE0-\xE5]/g, "a")
+                    .replace(/[\xE6]/g, "ae")
+                    .replace(/[\xE7]/g, "c")
+                    .replace(/[\xE8-\xEB]/g, "e")
+                    .replace(/[\xEC-\xEF]/g, "i")
+                    .replace(/[\xF1]/g, "n")
+                    .replace(/[\xF2-\xF6\xF8]/g, "o")
+                    .replace(/[\xF9-\xFC]/g, "u")
+                    .replace(/[\xFE]/g, "p")
+                    .replace(/[\xFD\xFF]/g, "y");
+        }
+
+        return str;
+    }
 }
\ No newline at end of file
diff --git a/src/views/datatable/DataTableDemo.vue b/src/views/datatable/DataTableDemo.vue
index cb5a40dc1..6ebaa49fc 100644
--- a/src/views/datatable/DataTableDemo.vue
+++ b/src/views/datatable/DataTableDemo.vue
@@ -13,8 +13,8 @@
             <div class="p-card">
                 <div class="p-card-body" style="padding:0">
                     <DataTable :value="customers" :paginator="true" class="p-datatable-responsive p-datatable-customers" :rows="10"
-                        dataKey="id" :rowHover="true" :selection.sync="selectedCustomers"
-                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]">
+                        dataKey="id" :rowHover="true" :selection.sync="selectedCustomers" :filters="filters"
+                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport " :rowsPerPageOptions="[10,25,50]">
                         <template #header>
                             List of Customers
                             <div class="p-datatable-globalfilter-container">
@@ -72,7 +72,7 @@
                                 </Dropdown>
                             </template>
                         </Column>
-                        <Column field="activity" header="Activity" :sortable="true">
+                        <Column field="activity" header="Activity" :sortable="true" filterMatchMode="gte">
                             <template #body="slotProps">
                                 <span class="p-column-title">Activity</span>
                                 <ProgressBar :value="slotProps.data.activity" :showValue="false" />
@@ -134,14 +134,6 @@ export default {
     mounted() {
         this.customerService.getCustomers().then(data => this.customers = data);
     },
-    methods: {
-        toggle(event, menu) {
-            menu.toggle(event);
-        },
-        save() {
-            this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
-        }
-    },
     components: {
         'DataTableDoc': DataTableDoc,
         'DataTableSubMenu': DataTableSubMenu
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index 6cbe20af6..8e72a246c 100644
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -206,7 +206,7 @@ export default {
                                 <td>filterMatchMode</td>
                                 <td>string</td>
                                 <td>startsWith</td>
-                                <td>Defines filterMatchMode; "startsWith", "contains", "endsWidth", "equals", "notEquals", "in" and "custom".</td>
+                                <td>Defines filterMatchMode; "startsWith", "contains", "endsWidth", "equals", "notEquals", "in", "lt", "lte", "gt", "gte" and "custom".</td>
                             </tr>
                             <tr>
                                 <td>filterFunction</td>
@@ -485,7 +485,7 @@ data() {
                 <p>Filtering is enabled by defining a filter template per column to populate the <i>filters</i> property of the DataTable. The <i>filters</i>
                 property should be an key-value object where keys are the field name and the value is the filter value. The filter template receives the column properties
                 via the slotProps and accepts any form element as the filter element. Default match mode is "startsWith" and this can be configured per column using the <i>filterMatchMode</i> property that also accepts
-                "contains", "endsWith", "equals", "notEquals", "in" and "custom" as available modes.</p>
+                "contains", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt", "gte" and "custom" as available modes.</p>
                 <p>Optionally a global filter is available to search against all the fields, in this case the special <i>global</i> keyword should be the property to be populated.</p>
 <CodeHighlight>
 <template v-pre>