Fixed #279 - filterLocale for components with filtering

pull/310/head
cagataycivici 2020-04-19 12:09:27 +03:00
parent 09c2241723
commit 42a1ef2a66
19 changed files with 88 additions and 31 deletions

View File

@ -25,6 +25,7 @@ export declare class DataTable extends Vue {
filters?: {
[s: string]: any;
};
filterLocale?: string;
selection?: any[]|any;
selectionMode?: string;
compareSelectionBy?: string;

View File

@ -230,6 +230,10 @@ export default {
type: Object,
default: null
},
filterLocale: {
type: String,
default: null
},
selection: {
type: [Array,Object],
default: null
@ -597,7 +601,7 @@ export default {
let filterValue = this.filters[columnField];
let dataFieldValue = ObjectUtils.resolveFieldData(data[i], columnField);
let filterConstraint = col.filterMatchMode === 'custom' ? col.filterFunction : FilterUtils[col.filterMatchMode];
if (!filterConstraint(dataFieldValue, filterValue)) {
if (!filterConstraint(dataFieldValue, filterValue, this.filterLocale)) {
localMatch = false;
}
@ -607,7 +611,7 @@ export default {
}
if (!col.excludeGlobalFilter && this.hasGlobalFilter && !globalMatch) {
globalMatch = FilterUtils.contains(ObjectUtils.resolveFieldData(data[i], columnField), this.filters['global']);
globalMatch = FilterUtils.contains(ObjectUtils.resolveFieldData(data[i], columnField), this.filters['global'], this.filterLocale);
}
}

View File

@ -9,6 +9,7 @@ export declare class Dropdown extends Vue {
scrollHeight?: string;
filter?: boolean;
filterPlaceholder?: string;
filterLocale?: string;
editable?: boolean;
placeholder?: string;
disabled?: boolean;

View File

@ -53,6 +53,7 @@ export default {
},
filter: Boolean,
filterPlaceholder: String,
filterLocale: String,
editable: Boolean,
placeholder: String,
disabled: Boolean,
@ -378,8 +379,8 @@ export default {
searchOptionInRange(start, end) {
for (let i = start; i < end; i++) {
let opt = this.visibleOptions[i];
let label = this.getOptionLabel(opt).toLowerCase();
if (label.startsWith(this.searchValue.toLowerCase())) {
let label = this.getOptionLabel(opt).toLocaleLowerCase(this.filterLocale);
if (label.startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale))) {
return opt;
}
}
@ -406,7 +407,7 @@ export default {
computed: {
visibleOptions() {
if (this.filterValue && this.filterValue.trim().length > 0)
return this.options.filter(option => this.getOptionLabel(option).toLowerCase().indexOf(this.filterValue.toLowerCase()) > -1);
return this.options.filter(option => this.getOptionLabel(option).toLocaleLowerCase(this.filterLocale).indexOf(this.filterValue.toLocaleLowerCase(this.filterLocale)) > -1);
else
return this.options;
},

View File

@ -12,6 +12,7 @@ export declare class Listbox extends Vue {
multiple?: boolean;
metaKeySelection?: boolean;
filter?: boolean;
filterLocale?: string;
ariaLabelledBy?: string;
$emit(eventName: 'input', value: any): this;
$emit(eventName: 'change', e: { originalEvent: Event, value: any }): this;

View File

@ -35,7 +35,8 @@ export default {
dataKey: null,
multiple: Boolean,
metaKeySelection: Boolean,
filter: Boolean
filter: Boolean,
filterLocale: String
},
optionTouched: false,
data() {
@ -218,7 +219,7 @@ export default {
computed: {
visibleOptions() {
if (this.filterValue)
return this.options.filter(option => this.getOptionLabel(option).toLowerCase().indexOf(this.filterValue.toLowerCase()) > -1);
return this.options.filter(option => this.getOptionLabel(option).toLocaleLowerCase(this.filterLocale).indexOf(this.filterValue.toLocaleLowerCase(this.filterLocale)) > -1);
else
return this.options;
},

View File

@ -13,6 +13,7 @@ export declare class MultiSelect extends Vue {
tabindex?: string;
dataKey?: string;
filterPlaceholder?: string;
filterLocale?: string;
ariaLabelledBy?: string;
appendTo?: string;
$emit(eventName: 'input', value: any): this;

View File

@ -74,6 +74,7 @@ export default {
tabindex: String,
dataKey: null,
filterPlaceholder: String,
filterLocale: String,
ariaLabelledBy: null,
appendTo: {
type: String,
@ -340,7 +341,7 @@ export default {
computed: {
visibleOptions() {
if (this.filterValue && this.filterValue.trim().length > 0)
return this.options.filter(option => this.getOptionLabel(option).toLowerCase().indexOf(this.filterValue.toLowerCase()) > -1);
return this.options.filter(option => this.getOptionLabel(option).toLocaleLowerCase(this.filterLocale).indexOf(this.filterValue.toLocaleLowerCase(this.filterLocale)) > -1);
else
return this.options;
},

View File

@ -12,6 +12,7 @@ export declare class Tree extends Vue {
filterBy?: string;
filterMode?: string;
filterPlaceholder?: string;
filterLocale?: string;
$emit(eventName: 'node-select', node: any): this;
$emit(eventName: 'node-unselect', node: any): this;
$emit(eventName: 'node-expand', node: any): this;

View File

@ -68,6 +68,10 @@ export default {
filterPlaceholder: {
type: String,
default: null
},
filterLocale: {
type: String,
default: null
}
},
data() {
@ -221,7 +225,7 @@ export default {
isFilterMatched(node, {searchFields, filterText, strict}) {
let matched = false;
for(let field of searchFields) {
let fieldValue = String(ObjectUtils.resolveFieldData(node, field)).toLowerCase();
let fieldValue = String(ObjectUtils.resolveFieldData(node, field)).toLocaleLowerCase(this.filterLocale);
if(fieldValue.indexOf(filterText) > -1) {
matched = true;
}
@ -247,7 +251,7 @@ export default {
filteredValue() {
let filteredNodes = [];
const searchFields = this.filterBy.split(',');
const filterText = this.filterValue.trim().toLowerCase();
const filterText = this.filterValue.trim().toLocaleLowerCase(this.filterLocale);
const strict = this.filterMode === 'strict';
for (let node of this.value) {

View File

@ -31,6 +31,7 @@ export declare class TreeTable extends Vue {
[s: string]: any;
};
filterMode?: string;
filterLocale?: string;
resizableColumns?: boolean;
columnResizeMode?: string;
$emit(eventName: 'page', event: Event): this;

View File

@ -200,6 +200,10 @@ export default {
type: String,
default: 'lenient'
},
filterLocale: {
type: String,
default: null
},
resizableColumns: {
type: Boolean,
default: false
@ -590,7 +594,7 @@ export default {
if (this.hasGlobalFilter && !globalMatch) {
let copyNodeForGlobal = {...copyNode};
let globalFilterValue = this.props.globalFilter;
let globalFilterConstraint = ObjectUtils.filterConstraints['contains'];
let globalFilterConstraint = FilterUtils['contains'];
let globalFilterParamsWithoutNode = {filterField, globalFilterValue, globalFilterConstraint, strict};
if ((strict && (this.findFilteredNodes(copyNodeForGlobal, globalFilterParamsWithoutNode) || this.isFilterMatched(copyNodeForGlobal, globalFilterParamsWithoutNode))) ||
@ -642,7 +646,7 @@ export default {
isFilterMatched(node, {filterField, filterValue, filterConstraint, strict}) {
let matched = false;
let dataFieldValue = ObjectUtils.resolveFieldData(node.data, filterField);
if (filterConstraint(dataFieldValue, filterValue)) {
if (filterConstraint(dataFieldValue, filterValue, this.filterLocale)) {
matched = true;
}

View File

@ -2,7 +2,7 @@ import ObjectUtils from './ObjectUtils';
export default class FilterUtils {
static startsWith(value, filter) {
static startsWith(value, filter, filterLocale) {
if (filter === undefined || filter === null || filter.trim() === '') {
return true;
}
@ -11,13 +11,13 @@ export default class FilterUtils {
return false;
}
let filterValue = ObjectUtils.removeAccents(filter.toString()).toLowerCase();
let stringValue = ObjectUtils.removeAccents(value.toString()).toLowerCase();
let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
return stringValue.slice(0, filterValue.length) === filterValue;
}
static contains(value, filter) {
static contains(value, filter, filterLocale) {
if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
return true;
}
@ -26,13 +26,13 @@ export default class FilterUtils {
return false;
}
let filterValue = ObjectUtils.removeAccents(filter.toString()).toLowerCase();
let stringValue = ObjectUtils.removeAccents(value.toString()).toLowerCase();
let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
return stringValue.indexOf(filterValue) !== -1;
}
static endsWith(value, filter) {
static endsWith(value, filter, filterLocale) {
if (filter === undefined || filter === null || filter.trim() === '') {
return true;
}
@ -41,13 +41,13 @@ export default class FilterUtils {
return false;
}
let filterValue = ObjectUtils.removeAccents(filter.toString()).toLowerCase();
let stringValue = ObjectUtils.removeAccents(value.toString()).toLowerCase();
let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
return stringValue.indexOf(filterValue, stringValue.length - filterValue.length) !== -1;
}
static equals(value, filter) {
static equals(value, filter, filterLocale) {
if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
return true;
}
@ -59,10 +59,10 @@ export default class FilterUtils {
if (value.getTime && filter.getTime)
return value.getTime() === filter.getTime();
else
return ObjectUtils.removeAccents(value.toString()).toLowerCase() === ObjectUtils.removeAccents(filter.toString()).toLowerCase();
return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) === ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
}
static notEquals(value, filter) {
static notEquals(value, filter, filterLocale) {
if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
return false;
}
@ -74,10 +74,10 @@ export default class FilterUtils {
if (value.getTime && filter.getTime)
return value.getTime() !== filter.getTime();
else
return ObjectUtils.removeAccents(value.toString()).toLowerCase() !== ObjectUtils.removeAccents(filter.toString()).toLowerCase();
return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) !== ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
}
static in(value, filter) {
static in(value, filter, filterLocale) {
if (filter === undefined || filter === null || filter.length === 0) {
return true;
}
@ -95,7 +95,7 @@ export default class FilterUtils {
return false;
}
static lt(value, filter) {
static lt(value, filter, filterLocale) {
if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
return true;
}
@ -110,7 +110,7 @@ export default class FilterUtils {
return value < parseFloat(filter);
}
static lte(value, filter) {
static lte(value, filter, filterLocale) {
if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
return true;
}
@ -125,7 +125,7 @@ export default class FilterUtils {
return value <= parseFloat(filter);
}
static gt(value, filter) {
static gt(value, filter, filterLocale) {
if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
return true;
}
@ -140,7 +140,7 @@ export default class FilterUtils {
return value > parseFloat(filter);
}
static gte(value, filter) {
static gte(value, filter, filterLocale) {
if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
return true;
}

View File

@ -1831,6 +1831,12 @@ export default {
<td>null</td>
<td>Filters object with key-value pairs to define the filters.</td>
</tr>
<tr>
<td>filterLocale</td>
<td>string</td>
<td>undefined</td>
<td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
</tr>
<tr>
<td>selection</td>
<td>any</td>

View File

@ -124,6 +124,12 @@ data() {
<td>null</td>
<td>Placeholder text to show when filter input is empty.</td>
</tr>
<tr>
<td>filterLocale</td>
<td>string</td>
<td>undefined</td>
<td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
</tr>
<tr>
<td>editable</td>
<td>boolean</td>

View File

@ -136,6 +136,12 @@ data() {
<td>boolean</td>
<td>false</td>
<td>When specified, displays a filter input at header.</td>
</tr>
<tr>
<td>filterLocale</td>
<td>string</td>
<td>undefined</td>
<td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
</tr>
</tbody>
</table>

View File

@ -148,6 +148,12 @@ data() {
<td>null</td>
<td>Placeholder text to show when filter input is empty.</td>
</tr>
<tr>
<td>filterLocale</td>
<td>string</td>
<td>undefined</td>
<td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>

View File

@ -622,6 +622,12 @@ export default {
<td>string</td>
<td>null</td>
<td>Placeholder text to show when filter input is empty.</td>
</tr>
<tr>
<td>filterLocale</td>
<td>string</td>
<td>undefined</td>
<td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
</tr>
</tbody>
</table>

View File

@ -1411,6 +1411,12 @@ export default {
<td>lenient</td>
<td>Mode for filtering valid values are "lenient" and "strict". Default is lenient.</td>
</tr>
<tr>
<td>filterLocale</td>
<td>string</td>
<td>undefined</td>
<td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
</tr>
<tr>
<td>resizableColumns</td>
<td>boolean</td>