Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#9706: Allow time range filtering for Attribute Table quick filter #9743

Merged
merged 19 commits into from
Jan 22, 2024
Merged
Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
7f3c2e7
#9706: handle the advanced filter in attribute table with different o…
mahmoudadel54 Nov 22, 2023
fc0f4c8
#9706: Allow time range filtering for Attribute Table quick filter an…
mahmoudadel54 Nov 23, 2023
5205513
Merge branch 'master' into feature_9706
mahmoudadel54 Nov 23, 2023
7edb767
#9706: fix test failure by remove unused variable
mahmoudadel54 Nov 23, 2023
2bec670
#9706: fix test failure by remove unused action in featuregrid file
mahmoudadel54 Nov 23, 2023
d8d1ae8
#9706: resolve review comments
mahmoudadel54 Dec 1, 2023
70e7e69
#9706: fix test case in AttributeFilter file
mahmoudadel54 Dec 1, 2023
083b971
Merge branch 'master' into feature_9706
mahmoudadel54 Dec 13, 2023
483af18
Merge branch 'master' into feature_9706
mahmoudadel54 Dec 15, 2023
c4f5640
#9706: Allow time range filtering for Attribute Table quick filter
mahmoudadel54 Dec 18, 2023
820517c
Merge branch 'feature_9706' of https://github.com/mahmoudadel54/MapSt…
mahmoudadel54 Dec 18, 2023
322d3d4
#9706: Allow time range filtering for Attribute Table quick filter
mahmoudadel54 Dec 18, 2023
e105916
#9706: resolve reviewer comments [improve UI of pickers]
mahmoudadel54 Jan 14, 2024
2960978
#9706: resolve reviewer comments
mahmoudadel54 Jan 16, 2024
ad64e56
#9706: resolve FE test failure
mahmoudadel54 Jan 16, 2024
ad2ff6f
#9706: resolve reviewer comments
mahmoudadel54 Jan 18, 2024
bd0c36f
#9706: hide input tooltip when user open pickers
mahmoudadel54 Jan 18, 2024
be42c15
Time filter refactor
dsuren1 Jan 22, 2024
170fd7c
unit test
dsuren1 Jan 22, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions web/client/components/data/featuregrid/enhancers/editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,8 @@ const featuresToGrid = compose(
focusOnEdit: false,
editors,
dataStreamFactory,
virtualScroll: true
virtualScroll: true,
isWithinAttrTbl: false
}),
withPropsOnChange("showDragHandle", ({showDragHandle = true} = {}) => ({
className: showDragHandle ? 'feature-grid-drag-handle-show' : 'feature-grid-drag-handle-hide'
Expand Down Expand Up @@ -170,7 +171,8 @@ const featuresToGrid = compose(
return props.editors(desc.localType, generalProps);
},
getFilterRenderer: getFilterRendererFunc,
getFormatter: (desc) => getFormatter(desc, (props.fields ?? []).find(f => f.name === desc.name), {dateFormats: props.dateFormats})
getFormatter: (desc) => getFormatter(desc, (props.fields ?? []).find(f => f.name === desc.name), {dateFormats: props.dateFormats}),
isWithinAttrTbl: props.isWithinAttrTbl
}))
});
return result;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import PropTypes from 'prop-types';
import { getMessageById } from '../../../../utils/LocaleUtils';
import { Tooltip } from 'react-bootstrap';
import OverlayTrigger from '../../../misc/OverlayTrigger';
import ComboField from '../../query/ComboField';

class AttributeFilter extends React.PureComponent {
static propTypes = {
Expand All @@ -21,7 +22,10 @@ class AttributeFilter extends React.PureComponent {
value: PropTypes.any,
column: PropTypes.object,
placeholderMsgId: PropTypes.string,
tooltipMsgId: PropTypes.string
tooltipMsgId: PropTypes.string,
operator: PropTypes.string,
type: PropTypes.string,
isWithinAttrTbl: PropTypes.bool
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think that this should be removed in the future since also attribute table in dashboard should inherit timerange changes

};

static contextTypes = {
Expand All @@ -33,15 +37,66 @@ class AttributeFilter extends React.PureComponent {
valid: true,
onChange: () => {},
column: {},
placeholderMsgId: "featuregrid.filter.placeholders.default"
placeholderMsgId: "featuregrid.filter.placeholders.default",
operator: "=",
isWithinAttrTbl: false
};
constructor(props) {
super(props);
this.state = {
listOperators: ["="],
stringOperators: ["=", "<>", "like", "ilike", "isNull"],
arrayOperators: ["contains"],
booleanOperators: ["="],
defaultOperators: ["=", ">", "<", ">=", "<=", "<>", "isNull"],
timeDateOperators: ["=", ">", "<", ">=", "<=", "<>", "><", "isNull"],
operator: this.props.isWithinAttrTbl ? "=" : "",
isInputValid: true
};
}
getOperator = (type) => {
switch (type) {
case "list": {
return this.state.listOperators;
}
case "string": {
return this.state.stringOperators;
}
case "boolean": {
return this.state.booleanOperators;
}
case "array": {
return this.state.arrayOperators;
}
case "date":
case "time":
case "date-time":
{
return this.state.timeDateOperators;
}
default:
return this.state.defaultOperators;
}
};
renderInput = () => {
if (this.props.column.filterable === false) {
return <span/>;
}
const placeholder = getMessageById(this.context.messages, this.props.placeholderMsgId) || "Search";
let inputKey = 'header-filter-' + this.props.column.key;
return (<input disabled={this.props.disabled} key={inputKey} type="text" className="form-control input-sm" placeholder={placeholder} value={this.state?.value ?? this.props.value} onChange={this.handleChange}/>);
let isValueExist = this.state?.value ?? this.props.value;
if (['date', 'time', 'date-time'].includes(this.props.type) && this.props.isWithinAttrTbl) isValueExist = this.state?.value ?? this.props.value?.startDate ?? this.props.value;
let isNullOperator = this.state.operator === 'isNull';
return (<div className={`rw-widget ${this.state.isInputValid ? "" : "show-error"}`}>
<input
disabled={this.props.disabled || isNullOperator}
key={inputKey}
type="text"
className={"form-control input-sm"}
placeholder={placeholder}
value={isValueExist}
onChange={this.handleChange}/>
</div>);
}
renderTooltip = (cmp) => {
if (this.props.tooltipMsgId && getMessageById(this.context.messages, this.props.tooltipMsgId)) {
Expand All @@ -51,19 +106,67 @@ class AttributeFilter extends React.PureComponent {
}
return cmp;
}

renderOperatorField = () => {
return (
<ComboField
style={{ width: '90px'}}
fieldOptions= {this.getOperator(this.props.type)}
fieldName="operator"
fieldRowId={1}
onSelect={(selectedOperator)=>{
// if select the same operator -> don't do anything
if (selectedOperator === this.state.operator) return;
let isValueExist; // entered value
if (['date', 'time', 'date-time'].includes(this.props.type)) {
isValueExist = this.state?.value ?? this.props.value?.startDate ?? this.props.value;
} else {
isValueExist = this.state?.value ?? this.props.value;
}
let isNullOperatorSelected = selectedOperator === 'isNull';
let isOperatorChangedFromRange = this.state.operator === '><';
// set the selected operator + value and reset the value in case of isNull
this.setState({ operator: selectedOperator, value: (isNullOperatorSelected || isOperatorChangedFromRange) ? undefined : isValueExist });
// get flag of being (operator was isNull then changes to other operator)
let isOperatorChangedFromIsNull = this.state.operator === 'isNull' && selectedOperator !== 'isNull';
// apply filter if value exists 'OR' operator = isNull 'OR' (prev operator was isNull and changes --> reset filter)
if (isNullOperatorSelected || isOperatorChangedFromIsNull || isOperatorChangedFromRange) {
// reset data --> operator = isNull 'OR' (prev operator was isNull and changes)
this.props.onChange({value: null, attribute: this.props.column && this.props.column.key, inputOperator: selectedOperator});
} else if (isValueExist) {
// apply filter --> if value exists
this.props.onChange({value: isValueExist, attribute: this.props.column && this.props.column.key, inputOperator: selectedOperator});
}
}}
fieldValue={this.state.operator}
onUpdateField={() => {}}/>
);
};
render() {
let inputKey = 'header-filter--' + this.props.column.key;
return (
<div key={inputKey} className={`form-group${(this.props.valid ? "" : " has-error")}`}>
{this.renderTooltip(this.renderInput())}
<div key={inputKey} className={`form-group${((this.state.isInputValid && this.props.valid) ? "" : " has-error")}`}>
{this.props.isWithinAttrTbl ? <>
{this.renderOperatorField()}
{['time', 'date', 'date-time'].includes(this.props.type) ? this.renderInput() : this.renderTooltip(this.renderInput())}
</> : this.renderTooltip(this.renderInput())}
</div>
);
}
handleChange = (e) => {
const value = e.target.value;
this.setState({value});
this.props.onChange({value, attribute: this.props.column && this.props.column.key});
// todo: validate input based on type
let isValid = true;
if (this.props.isWithinAttrTbl) {
const match = /\s*(!==|!=|<>|<=|>=|===|==|=|<|>)?(.*)/.exec(value);
if (match[1]) isValid = false;
if (match[2]) {
if (['integer', 'number'].includes(this.props.type) && isNaN(match[2])) isValid = false;
}
}
this.setState({value, isInputValid: isValid});
if (isValid) {
this.props.onChange({value, attribute: this.props.column && this.props.column.key, inputOperator: this.state.operator});
}
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import PropTypes from 'prop-types';
import {intlShape} from 'react-intl';
import {getContext} from 'recompose';
import DateTimePicker from '../../../misc/datetimepicker';
import RangedDateTimePicker from '../../../misc/datetimepicker/RangedDateTimePicker';
import {getMessageById} from '../../../../utils/LocaleUtils';
import { getDateTimeFormat } from '../../../../utils/TimeUtils';
import AttributeFilter from './AttributeFilter';
Expand All @@ -22,6 +23,12 @@ const UTCDateTimePicker = utcDateWrapper({
setDateProp: "onChange"
})(DateTimePicker);

const UTCDateTimePickerWithRange = utcDateWrapper({
dateProp: "value",
dateTypeProp: "type",
setDateProp: "onChange"
})(RangedDateTimePicker );


class DateFilter extends AttributeFilter {
static propTypes = {
Expand All @@ -45,6 +52,7 @@ class DateFilter extends AttributeFilter {
if (this.props.column.filterable === false) {
return <span />;
}
const operator = this.props.value && this.props.value.operator || this.state.operator;
const format = getDateTimeFormat(this.context.locale, this.props.type);
const placeholder = getMessageById(this.context.messages, this.props.placeholderMsgId) || "Insert date";
const toolTip = this.props.intl && this.props.intl.formatMessage({id: `${this.props.tooltipMsgId}`}, {format}) || `Insert date in ${format} format`;
Expand All @@ -58,8 +66,27 @@ class DateFilter extends AttributeFilter {
val = this.props.value && this.props.value.startDate || this.props.value;
}
const dateValue = this.props.value ? val : null;
const operator = this.props.value && this.props.value.operator;
if (operator === '><') {
return (
<UTCDateTimePickerWithRange
isWithinAttrTbl={this.props.isWithinAttrTbl}
key={inputKey}
disabled={this.props.disabled}
format={format}
placeholder={placeholder}
value={dateValue}
toolTip={toolTip}
popupPosition={'top'} // popover open direction
operator={operator}
type={this.props.type}
time={this.props.type === 'time'}
calendar={this.props.type === 'date-time' || this.props.type === 'date'}
onChange={(date, stringDate, order) => this.handleChangeRangeFilter(date, stringDate, order)}
/>
);
}
return (<UTCDateTimePicker
isWithinAttrTbl={this.props.isWithinAttrTbl}
key={inputKey}
disabled={this.props.disabled}
format={format}
Expand All @@ -68,13 +95,29 @@ class DateFilter extends AttributeFilter {
toolTip={toolTip}
operator={operator}
type={this.props.type}
popupPosition={'top'} // popover open direction
time={this.props.type === 'date-time' || this.props.type === 'time'}
calendar={this.props.type === 'date-time' || this.props.type === 'date'}
onChange={(date, stringDate) => this.handleChange(date, stringDate)}
/>);
}
handleChange = (value, stringValue) => {
this.props.onChange({ value, stringValue, attribute: this.props.column && this.props.column.name });
this.props.onChange({ value, stringValue, attribute: this.props.column && this.props.column.name, inputOperator: this.state.operator || this.props.operator });
}
handleChangeRangeFilter = (value, stringValue, order = 'start') => {
let reqVal = {};
if (order === 'end') {
reqVal = {
startDate: this.props.value?.startDate,
endDate: value
};
} else {
reqVal = {
startDate: value,
endDate: this.props.value?.endDate
};
}
this.props.onChange({ value: reqVal, stringValue, attribute: this.props.column && this.props.column.name, inputOperator: this.state.operator || this.props.operator });
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,23 +15,41 @@ export default compose(
value: null
}),
withHandlers({
onChange: props => ({ value, attribute, stringValue } = {}) => {
const match = /\s*(!==|!=|<>|<=|>=|===|==|=|<|>)?(.*)/.exec(stringValue);
const operator = match[1];
let enhancedOperator = match[1] || '=';
// replace with standard operators
if (operator === "!==" | operator === "!=") {
enhancedOperator = "<>";
} else if (operator === "===" | operator === "==") {
enhancedOperator = "=";
onChange: props => ({ value, attribute, stringValue, inputOperator } = {}) => {
if (typeof value === 'string') {
const match = /\s*(!==|!=|<>|<=|>=|===|==|=|<|>)?(.*)/.exec(stringValue);
const operator = match[1];
let enhancedOperator = match[1] || '=';
// replace with standard operators
if (operator === "!==" | operator === "!=") {
enhancedOperator = "<>";
} else if (operator === "===" | operator === "==") {
enhancedOperator = "=";
}
props.onValueChange(value);
props.onChange({
value: { startDate: value, operator: inputOperator || operator },
operator: inputOperator || enhancedOperator,
type: props.type,
attribute
});
} else if (value && typeof value === 'object') {
props.onValueChange(value);
props.onChange({
value: { startDate: value?.startDate, endDate: value?.endDate, operator: inputOperator },
operator: inputOperator,
type: props.type,
attribute
});
} else if (!value) {
props.onValueChange(value);
props.onChange({
value: { startDate: value, operator: inputOperator },
operator: inputOperator,
type: props.type,
attribute
});
}
props.onValueChange(value);
props.onChange({
value: { startDate: value, operator },
operator: enhancedOperator,
type: props.type,
attribute
});
}
}),
defaultProps({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@ export default compose(
onValueChange: () => {}
}),
withHandlers({
onChange: props => ({value, attribute} = {}) => {
onChange: props => ({value, attribute, inputOperator} = {}) => {
props.onValueChange(value);
props.onChange({
value: value,
operator: "=",
operator: inputOperator || "=",
type: props.type,
attribute
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default compose(
}),
withState("valid", "setValid", true),
withHandlers({
onChange: props => ({value, attribute} = {}) => {
onChange: props => ({value, attribute, inputOperator} = {}) => {
props.onValueChange(value);
if (!COMMA_REGEX.exec(value)) {
let {operator, newVal} = getOperatorAndValue(value, "number");
Expand All @@ -31,7 +31,7 @@ export default compose(
props.onChange({
value: isNaN(newVal) ? undefined : newVal,
rawValue: value,
operator,
operator: inputOperator || operator,
type: 'number',
attribute
});
Expand All @@ -48,7 +48,7 @@ export default compose(
isValid && props.onChange({
value,
rawValue: value,
operator: "=",
operator: inputOperator || "=",
type: 'number',
attribute
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@ export default compose(
placeholderMsgId: "featuregrid.filter.placeholders.string"
}),
withHandlers({
onChange: props => ({value, attribute} = {}) => {
onChange: props => ({value, attribute, inputOperator} = {}) => {
props.onValueChange(value);
props.onChange({
rawValue: value,
value: trim(value) ? trim(value) : undefined,
operator: "ilike",
operator: inputOperator || "ilike",
type: 'string',
attribute
});
Expand Down
Loading
Loading