From a4c1bc3221be1bc964a5eb929ba42de997947d66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Fri, 10 Dec 2021 10:54:40 +0300 Subject: [PATCH] Fixed #1865 - New FilterService Utility --- src/components/api/Api.d.ts | 50 ++++ src/components/api/Api.js | 5 + src/components/api/FilterMatchMode.js | 20 ++ src/components/api/FilterOperator.js | 6 + src/components/api/FilterService.js | 240 +++++++++++++++ src/components/api/index.d.ts | 1 + src/components/api/index.js | 2 + src/components/api/plugins.js | 4 + src/views/filterservice/FilterServiceDemo.vue | 97 ++++++ src/views/filterservice/FilterServiceDoc.vue | 280 ++++++++++++++++++ src/views/locale/LocaleDemo.vue | 133 +++------ 11 files changed, 750 insertions(+), 88 deletions(-) create mode 100644 src/components/api/Api.d.ts create mode 100644 src/components/api/Api.js create mode 100644 src/components/api/FilterMatchMode.js create mode 100644 src/components/api/FilterOperator.js create mode 100644 src/components/api/FilterService.js create mode 100644 src/components/api/index.d.ts create mode 100644 src/components/api/index.js create mode 100644 src/components/api/plugins.js create mode 100644 src/views/filterservice/FilterServiceDemo.vue create mode 100644 src/views/filterservice/FilterServiceDoc.vue diff --git a/src/components/api/Api.d.ts b/src/components/api/Api.d.ts new file mode 100644 index 0000000000..c71053aa97 --- /dev/null +++ b/src/components/api/Api.d.ts @@ -0,0 +1,50 @@ +export const FilterMatchMode: { + STARTS_WITH?: string, + CONTAINS?: string, + NOT_CONTAINS?: string, + ENDS_WITH?: string, + EQUALS?: string, + NOT_EQUALS?: string, + IN?: string, + LESS_THAN?: string, + LESS_THAN_OR_EQUAL_TO?: string, + GREATER_THAN?: string, + GREATER_THAN_OR_EQUAL_TO?: string, + BETWEEN?: string, + DATE_IS?: string, + DATE_IS_NOT?: string, + DATE_BEFORE?: string, + DATE_AFTER?: string +} + +export const FilterOperator: { + AND?: string, + OR?: string +} + +interface FiltersOptions { + startsWith?(value: any, filter: any, filterLocale: string): boolean, + contains?(value: any, filter: any, filterLocale: string): boolean, + notContains?(value: any, filter: any, filterLocale: string): boolean, + endsWith?(value: any, filter: any, filterLocale: string): boolean, + equals?(value: any, filter: any, filterLocale: string): boolean, + notEquals?(value: any, filter: any, filterLocale: string): boolean, + in?(value: any, filter: any): boolean, + between?(value: any, filter: any): boolean, + lt?(value: any, filter: any): boolean, + lte?(value: any, filter: any): boolean, + gt?(value: any, filter: any): boolean, + gte?(value: any, filter: any): boolean, + dateIs?(value: any, filter: any): boolean, + dateIsNot?(value: any, filter: any): boolean, + dateBefore?(value: any, filter: any): boolean, + dateAfter?(value: any, filter: any): boolean +} + +interface FilterServiceOptions { + filter?(value: any[], fields: any[], filterValue: any, filterMatchMode: string, filterLocale: string): any[], + filters?: FiltersOptions, + register?(rule: string, fn: any): void +} + +export const FilterService: FilterServiceOptions; diff --git a/src/components/api/Api.js b/src/components/api/Api.js new file mode 100644 index 0000000000..398c1db5d2 --- /dev/null +++ b/src/components/api/Api.js @@ -0,0 +1,5 @@ +import FilterMatchMode from './FilterMatchMode'; +import FilterOperator from './FilterOperator'; +import FilterService from './FilterService'; + +export {FilterMatchMode,FilterOperator,FilterService}; \ No newline at end of file diff --git a/src/components/api/FilterMatchMode.js b/src/components/api/FilterMatchMode.js new file mode 100644 index 0000000000..4ff43bcde2 --- /dev/null +++ b/src/components/api/FilterMatchMode.js @@ -0,0 +1,20 @@ +const FilterMatchMode = { + STARTS_WITH : 'startsWith', + CONTAINS : 'contains', + NOT_CONTAINS : 'notContains', + ENDS_WITH : 'endsWith', + EQUALS : 'equals', + NOT_EQUALS : 'notEquals', + IN : 'in', + LESS_THAN : 'lt', + LESS_THAN_OR_EQUAL_TO : 'lte', + GREATER_THAN : 'gt', + GREATER_THAN_OR_EQUAL_TO : 'gte', + BETWEEN : 'between', + DATE_IS : 'dateIs', + DATE_IS_NOT : 'dateIsNot', + DATE_BEFORE : 'dateBefore', + DATE_AFTER : 'dateAfter' +} + +export default FilterMatchMode; \ No newline at end of file diff --git a/src/components/api/FilterOperator.js b/src/components/api/FilterOperator.js new file mode 100644 index 0000000000..76adf7d645 --- /dev/null +++ b/src/components/api/FilterOperator.js @@ -0,0 +1,6 @@ +const FilterOperator = { + AND: 'and', + OR: 'or' +} + +export default FilterOperator; \ No newline at end of file diff --git a/src/components/api/FilterService.js b/src/components/api/FilterService.js new file mode 100644 index 0000000000..7b0fa9ec03 --- /dev/null +++ b/src/components/api/FilterService.js @@ -0,0 +1,240 @@ +import ObjectUtils from '../utils/ObjectUtils'; + +const FilterService = { + filter(value, fields, filterValue, filterMatchMode, filterLocale) { + let filteredItems = []; + + if (value) { + for (let item of value) { + for (let field of fields) { + let fieldValue = ObjectUtils.resolveFieldData(item, field); + + if (this.filters[filterMatchMode](fieldValue, filterValue, filterLocale)) { + filteredItems.push(item); + break; + } + } + } + } + + return filteredItems; + }, + filters: { + startsWith(value, filter, filterLocale) { + if (filter === undefined || filter === null || filter.trim() === '') { + return true; + } + + if (value === undefined || value === null) { + return false; + } + + let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); + let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale); + + return stringValue.slice(0, filterValue.length) === filterValue; + }, + contains(value, filter, filterLocale) { + if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) { + return true; + } + + if (value === undefined || value === null) { + return false; + } + + let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); + let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale); + + return stringValue.indexOf(filterValue) !== -1; + }, + notContains(value, filter, filterLocale) { + if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) { + return true; + } + + if (value === undefined || value === null) { + return false; + } + + let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); + let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale); + + return stringValue.indexOf(filterValue) === -1; + }, + endsWith(value, filter, filterLocale) { + if (filter === undefined || filter === null || filter.trim() === '') { + return true; + } + + if (value === undefined || value === null) { + return false; + } + + 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; + }, + equals(value, filter, filterLocale) { + if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) { + return true; + } + + if (value === undefined || value === null) { + return false; + } + + if (value.getTime && filter.getTime) + return value.getTime() === filter.getTime(); + else + return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) == ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); + }, + notEquals(value, filter, filterLocale) { + if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) { + return false; + } + + if (value === undefined || value === null) { + return true; + } + + if (value.getTime && filter.getTime) + return value.getTime() !== filter.getTime(); + else + return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) != ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); + }, + in(value, filter) { + if (filter === undefined || filter === null || filter.length === 0) { + return true; + } + + for (let i = 0; i < filter.length; i++) { + if (ObjectUtils.equals(value, filter[i])) { + return true; + } + } + + return false; + }, + between(value, filter) { + if (filter == null || filter[0] == null || filter[1] == null) { + return true; + } + + if (value === undefined || value === null) { + return false; + } + + if (value.getTime) + return filter[0].getTime() <= value.getTime() && value.getTime() <= filter[1].getTime(); + else + return filter[0] <= value && value <= filter[1]; + }, + lt(value, filter) { + if (filter === undefined || filter === null) { + return true; + } + + if (value === undefined || value === null) { + return false; + } + + if (value.getTime && filter.getTime) + return value.getTime() < filter.getTime(); + else + return value < filter; + }, + lte(value, filter) { + if (filter === undefined || filter === null) { + return true; + } + + if (value === undefined || value === null) { + return false; + } + + if (value.getTime && filter.getTime) + return value.getTime() <= filter.getTime(); + else + return value <= filter; + }, + gt(value, filter) { + if (filter === undefined || filter === null) { + return true; + } + + if (value === undefined || value === null) { + return false; + } + + if (value.getTime && filter.getTime) + return value.getTime() > filter.getTime(); + else + return value > filter; + }, + gte(value, filter) { + if (filter === undefined || filter === null) { + return true; + } + + if (value === undefined || value === null) { + return false; + } + + if (value.getTime && filter.getTime) + return value.getTime() >= filter.getTime(); + else + return value >= filter; + }, + dateIs(value, filter) { + if (filter === undefined || filter === null) { + return true; + } + + if (value === undefined || value === null) { + return false; + } + + return value.toDateString() === filter.toDateString(); + }, + dateIsNot(value, filter) { + if (filter === undefined || filter === null) { + return true; + } + + if (value === undefined || value === null) { + return false; + } + + return value.toDateString() !== filter.toDateString(); + }, + dateBefore(value, filter) { + if (filter === undefined || filter === null) { + return true; + } + + if (value === undefined || value === null) { + return false; + } + + return value.getTime() < filter.getTime(); + }, + dateAfter(value, filter) { + if (filter === undefined || filter === null) { + return true; + } + + if (value === undefined || value === null) { + return false; + } + + return value.getTime() > filter.getTime(); + } + }, + register(rule, fn) { + this.filters[rule] = fn; + } +} + +export default FilterService; \ No newline at end of file diff --git a/src/components/api/index.d.ts b/src/components/api/index.d.ts new file mode 100644 index 0000000000..13289cd982 --- /dev/null +++ b/src/components/api/index.d.ts @@ -0,0 +1 @@ +export * from './Api'; \ No newline at end of file diff --git a/src/components/api/index.js b/src/components/api/index.js new file mode 100644 index 0000000000..cd2a5662cd --- /dev/null +++ b/src/components/api/index.js @@ -0,0 +1,2 @@ +'use strict'; +module.exports = require('./Api.js'); \ No newline at end of file diff --git a/src/components/api/plugins.js b/src/components/api/plugins.js new file mode 100644 index 0000000000..2865b9f93c --- /dev/null +++ b/src/components/api/plugins.js @@ -0,0 +1,4 @@ +import Vue from 'vue'; +import PrimeVue from 'primevue/config'; + +Vue.use(PrimeVue); \ No newline at end of file diff --git a/src/views/filterservice/FilterServiceDemo.vue b/src/views/filterservice/FilterServiceDemo.vue new file mode 100644 index 0000000000..b73de86bc9 --- /dev/null +++ b/src/views/filterservice/FilterServiceDemo.vue @@ -0,0 +1,97 @@ + + + \ No newline at end of file diff --git a/src/views/filterservice/FilterServiceDoc.vue b/src/views/filterservice/FilterServiceDoc.vue new file mode 100644 index 0000000000..a62461a8f8 --- /dev/null +++ b/src/views/filterservice/FilterServiceDoc.vue @@ -0,0 +1,280 @@ + \ No newline at end of file diff --git a/src/views/locale/LocaleDemo.vue b/src/views/locale/LocaleDemo.vue index a2d9e11320..4961670ffd 100644 --- a/src/views/locale/LocaleDemo.vue +++ b/src/views/locale/LocaleDemo.vue @@ -39,94 +39,51 @@ export default {
Locale Options
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyValue
acceptYes
rejectNo
chooseChoose
uploadUpload
cancelCancel
dayNames["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
dayNamesShort["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
dayNamesMin["Su","Mo","Tu","We","Th","Fr","Sa"]
monthNames["January","February","March","April","May","June","July","August","September","October","November","December"]
monthNamesShort["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
todayToday
todayToday
weekHeaderWk
firstDayOfWeek0
dateFormatmm/dd/yy
weakWeak
mediumMedium
strongStrong
passwordPromptEnter a password
-
+ +locale: { + startsWith: 'Starts with', + contains: 'Contains', + notContains: 'Not contains', + endsWith: 'Ends with', + equals: 'Equals', + notEquals: 'Not equals', + noFilter: 'No Filter', + lt: 'Less than', + lte: 'Less than or equal to', + gt: 'Greater than', + gte: 'Greater than or equal to', + dateIs: 'Date is', + dateIsNot: 'Date is not', + dateBefore: 'Date is before', + dateAfter: 'Date is after', + clear: 'Clear', + apply: 'Apply', + matchAll: 'Match All', + matchAny: 'Match Any', + addRule: 'Add Rule', + removeRule: 'Remove Rule', + accept: 'Yes', + reject: 'No', + choose: 'Choose', + upload: 'Upload', + cancel: 'Cancel', + dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], + dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], + dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"], + monthNames: ["January","February","March","April","May","June","July","August","September","October","November","December"], + monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], + today: 'Today', + weekHeader: 'Wk', + firstDayOfWeek: 0, + dateFormat: 'mm/dd/yy', + weak: 'Weak', + medium: 'Medium', + strong: 'Strong', + passwordPrompt: 'Enter a password', + emptyFilterMessage: 'No results found', + emptyMessage: 'No available options' +} +