From ea481fe422e54a6734338df2321a8a6321a1ac12 Mon Sep 17 00:00:00 2001 From: Aijana Schumann Date: Wed, 2 Dec 2020 11:29:32 +0100 Subject: Update odlux table filters Update string and number filter and add date filter Issue-ID: CCSDK-2891 Signed-off-by: Aijana Schumann Change-Id: If7af4adbbb0159cbd489627404d94b17e0d3c1c0 --- .../src/components/material-table/columnModel.ts | 39 +++--- .../src/components/material-table/index.tsx | 136 ++++++++++++++------- 2 files changed, 110 insertions(+), 65 deletions(-) (limited to 'sdnr/wt/odlux') diff --git a/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts b/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts index c05142084..8124e450d 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts +++ b/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts @@ -1,20 +1,20 @@ -/** - * ============LICENSE_START======================================================================== - * ONAP : ccsdk feature sdnr wt odlux - * ================================================================================================= - * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved. - * ================================================================================================= - * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under the License - * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express - * or implied. See the License for the specific language governing permissions and limitations under - * the License. - * ============LICENSE_END========================================================================== - */ +/** + * ============LICENSE_START======================================================================== + * ONAP : ccsdk feature sdnr wt odlux + * ================================================================================================= + * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved. + * ================================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under the License + * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing permissions and limitations under + * the License. + * ============LICENSE_END========================================================================== + */ import * as React from 'react'; @@ -22,6 +22,7 @@ export enum ColumnType { text, numeric, boolean, + date, custom } @@ -34,7 +35,7 @@ type CustomControl = { export type ColumnModel = { title?: string; disablePadding?: boolean; - width?: string | number; + width?: string | number ; className?: string; style?: React.CSSProperties; align?: 'inherit' | 'left' | 'center' | 'right' | 'justify'; @@ -50,5 +51,5 @@ export type ColumnModel = { labels?: { "true": string, "false": string }; } | { property: keyof TData; - type?: ColumnType.numeric | ColumnType.text; + type?: ColumnType.numeric | ColumnType.text | ColumnType.date; }); \ No newline at end of file diff --git a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx index f6d0b0d47..7d4633bc6 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx @@ -47,6 +47,20 @@ type resultType = { page: number, total: number, rows: TData[] export type DataCallback = (page?: number, rowsPerPage?: number, orderBy?: string | null, order?: 'asc' | 'desc' | null, filter?: { [property: string]: string }) => resultType | Promise>; +function regExpEscape(s: string) { + return s.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&'); +}; + +function wildcardCheck(input: string, pattern: string) { + if (!pattern) return true; + const regex = new RegExp( + (!pattern.startsWith('*') ? '^' : '') + + pattern.split(/\*+/).map(p => p.split(/\?+/).map(regExpEscape).join('.')).join('.*') + + (!pattern.endsWith('*') ? '$' : '') + ); + return input.match(regex) !== null && input.match(regex)!.length >= 1; +}; + function desc(a: dataType, b: dataType, orderBy: string) { if ((b[orderBy] || "") < (a[orderBy] || "")) { return -1; @@ -324,64 +338,94 @@ class MaterialTableComponent extends React.Component { - const exp = filter[prop]; - filtered = filtered || exp !== undefined; - data = exp !== undefined ? data.filter((val) => { - const value = val[prop]; - - if (value) { - - if (typeof exp === 'boolean') { - return value == exp; - - } else if (typeof exp === 'string') { - - const valueAsString = value.toString(); - if (exp.length === 0) return value; - - const regex = new RegExp("\\*", "g"); - const regex2 = new RegExp("\\?", "g"); - - const countStar = (exp.match(regex) || []).length; - const countQuestionmarks = (exp.match(regex2) || []).length; - - if (countStar > 0 || countQuestionmarks > 0) { - let editableExpression = exp; - - if (!exp.startsWith('*')) { - editableExpression = '^' + exp; + const column = columns.find(c => c.property === prop); + const filterExpression = filter[prop]; + + if (!column) throw new Error("Filter for not existing column found."); + + if (filterExpression != null) { + data = data.filter((val) => { + const dataValue = val[prop]; + + if (dataValue != null) { + + if (column.type === ColumnType.boolean) { + + const boolDataValue = JSON.parse(String(dataValue).toLowerCase()); + const boolFilterExpression = JSON.parse(String(filterExpression).toLowerCase()); + return boolDataValue == boolFilterExpression; + + } else if (column.type === ColumnType.text) { + + const valueAsString = String(dataValue); + const filterExpressionAsString = String(filterExpression).trim(); + if (filterExpressionAsString.length === 0) return true; + return wildcardCheck(valueAsString, filterExpressionAsString); + + } else if (column.type === ColumnType.numeric){ + + const valueAsNumber = Number(dataValue); + const filterExpressionAsString = String(filterExpression).trim(); + if (filterExpressionAsString.length === 0 || isNaN(valueAsNumber)) return true; + + if (filterExpressionAsString.startsWith('>=')) { + return valueAsNumber >= Number(filterExpressionAsString.substr(2).trim()); + } else if (filterExpressionAsString.startsWith('<=')) { + return valueAsNumber <= Number(filterExpressionAsString.substr(2).trim()); + } else if (filterExpressionAsString.startsWith('>')) { + return valueAsNumber > Number(filterExpressionAsString.substr(1).trim()); + } else if (filterExpressionAsString.startsWith('<')) { + return valueAsNumber < Number(filterExpressionAsString.substr(1).trim()); } - - if (!exp.endsWith('*')) { - editableExpression = editableExpression + '$'; + } else if (column.type === ColumnType.date){ + const valueAsString = String(dataValue); + + const convertToDate = (valueAsString: string) => { + // time value needs to be padded + const hasTimeValue = /T\d{2,2}/.test(valueAsString); + const indexCollon = valueAsString.indexOf(':'); + if (hasTimeValue && (indexCollon === -1 || indexCollon >= valueAsString.length-2)) { + valueAsString = indexCollon === -1 + ? valueAsString + ":00" + : indexCollon === valueAsString.length-1 + ? valueAsString + "00" + : valueAsString += "0" + } + return new Date(Date.parse(valueAsString)); + }; + + // @ts-ignore + const valueAsDate = new Date(Date.parse(dataValue)); + const filterExpressionAsString = String(filterExpression).trim(); + + if (filterExpressionAsString.startsWith('>=')) { + return valueAsDate >= convertToDate(filterExpressionAsString.substr(2).trim()); + } else if (filterExpressionAsString.startsWith('<=')) { + return valueAsDate <= convertToDate(filterExpressionAsString.substr(2).trim()); + } else if (filterExpressionAsString.startsWith('>')) { + return valueAsDate > convertToDate(filterExpressionAsString.substr(1).trim()); + } else if (filterExpressionAsString.startsWith('<')) { + return valueAsDate < convertToDate(filterExpressionAsString.substr(1).trim()); } - const expressionAsRegex = editableExpression.replace(/\*/g, ".*").replace(/\?/g, "."); + + if (filterExpressionAsString.length === 0) return true; + return wildcardCheck(valueAsString, filterExpressionAsString); - return valueAsString.match(new RegExp(expressionAsRegex, "g")); } - else if (exp.includes('>=')) { - return Number(valueAsString) >= Number(exp.replace('>=', '')); - } else if (exp.includes('<=')) { - return Number(valueAsString) <= Number(exp.replace('<=', '')); - } else - if (exp.includes('>')) { - return Number(valueAsString) > Number(exp.replace('>', '')); - } else if (exp.includes('<')) { - return Number(valueAsString) < Number(exp.replace('<', '')); - } } - } - return (value == exp) - }) : data; + return (dataValue == filterExpression) + }); + }; }); } -- cgit 1.2.3-korg