Fixed #217, Fixed #219 , Fixed #220

pull/227/head
cagataycivici 2020-03-04 09:41:10 +03:00
parent 86945d7980
commit ffa7caa295
4 changed files with 118 additions and 21 deletions

View File

@ -1,3 +1,5 @@
import ObjectUtils from './ObjectUtils';
export default class FilterUtils { export default class FilterUtils {
static startsWith(value, filter) { static startsWith(value, filter) {
@ -9,8 +11,10 @@ export default class FilterUtils {
return false; return false;
} }
let filterValue = filter.toLowerCase(); let filterValue = ObjectUtils.removeAccents(filter.toString()).toLowerCase();
return value.toString().toLowerCase().slice(0, filterValue.length) === filterValue; let stringValue = ObjectUtils.removeAccents(value.toString()).toLowerCase();
return stringValue.slice(0, filterValue.length) === filterValue;
} }
static contains(value, filter) { static contains(value, filter) {
@ -22,7 +26,10 @@ export default class FilterUtils {
return false; 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) { static endsWith(value, filter) {
@ -34,8 +41,10 @@ export default class FilterUtils {
return false; return false;
} }
let filterValue = filter.toString().toLowerCase(); let filterValue = ObjectUtils.removeAccents(filter.toString()).toLowerCase();
return value.toString().toLowerCase().indexOf(filterValue, value.toString().length - filterValue.length) !== -1; let stringValue = ObjectUtils.removeAccents(value.toString()).toLowerCase();
return stringValue.indexOf(filterValue, stringValue.length - filterValue.length) !== -1;
} }
static equals(value, filter) { static equals(value, filter) {
@ -47,7 +56,10 @@ export default class FilterUtils {
return false; 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) { static notEquals(value, filter) {
@ -59,7 +71,10 @@ export default class FilterUtils {
return true; 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) { static in(value, filter) {
@ -72,11 +87,72 @@ export default class FilterUtils {
} }
for (let i = 0; i < filter.length; i++) { 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 true;
}
} }
return false; 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);
}
} }

View File

@ -151,4 +151,33 @@ export default class ObjectUtils {
arr.push(item); 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;
}
} }

View File

@ -13,8 +13,8 @@
<div class="p-card"> <div class="p-card">
<div class="p-card-body" style="padding:0"> <div class="p-card-body" style="padding:0">
<DataTable :value="customers" :paginator="true" class="p-datatable-responsive p-datatable-customers" :rows="10" <DataTable :value="customers" :paginator="true" class="p-datatable-responsive p-datatable-customers" :rows="10"
dataKey="id" :rowHover="true" :selection.sync="selectedCustomers" dataKey="id" :rowHover="true" :selection.sync="selectedCustomers" :filters="filters"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"> paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport " :rowsPerPageOptions="[10,25,50]">
<template #header> <template #header>
List of Customers List of Customers
<div class="p-datatable-globalfilter-container"> <div class="p-datatable-globalfilter-container">
@ -72,7 +72,7 @@
</Dropdown> </Dropdown>
</template> </template>
</Column> </Column>
<Column field="activity" header="Activity" :sortable="true"> <Column field="activity" header="Activity" :sortable="true" filterMatchMode="gte">
<template #body="slotProps"> <template #body="slotProps">
<span class="p-column-title">Activity</span> <span class="p-column-title">Activity</span>
<ProgressBar :value="slotProps.data.activity" :showValue="false" /> <ProgressBar :value="slotProps.data.activity" :showValue="false" />
@ -134,14 +134,6 @@ export default {
mounted() { mounted() {
this.customerService.getCustomers().then(data => this.customers = data); 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: { components: {
'DataTableDoc': DataTableDoc, 'DataTableDoc': DataTableDoc,
'DataTableSubMenu': DataTableSubMenu 'DataTableSubMenu': DataTableSubMenu

View File

@ -206,7 +206,7 @@ export default {
<td>filterMatchMode</td> <td>filterMatchMode</td>
<td>string</td> <td>string</td>
<td>startsWith</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>
<tr> <tr>
<td>filterFunction</td> <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> <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 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 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> <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> <CodeHighlight>
<template v-pre> <template v-pre>