Skip to content

Commit

Permalink
geosolutions-it#9706: Allow time range filtering for Attribute Table …
Browse files Browse the repository at this point in the history 
…quick filter

* Description:
- Add date-time icon and use it
- replcae inline if
- using omit instead of reduce
- fix some style issues in date/time pickers in range component
  • Loading branch information
@mahmoudadel54
mahmoudadel54 committed Dec 18, 2023
1 parent 083b971 commit c4f5640
Show file tree
Hide file tree
Showing 11 changed files with 824 additions and 780 deletions.
4 changes: 3 additions & 1 deletion web/client/components/data/featuregrid/filterRenderers/AttributeFilter.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,9 @@ class AttributeFilter extends React.PureComponent {
}
}
this.setState({value, isInputValid: isValid});
if (isValid) this.props.onChange({value, attribute: this.props.column && this.props.column.key, inputOperator: this.state.operator});
if (isValid) {
this.props.onChange({value, attribute: this.props.column && this.props.column.key, inputOperator: this.state.operator});
}
}
}

Expand Down
51 changes: 13 additions & 38 deletions web/client/components/misc/datetimepicker/CustomDateTimePickerWithRange.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ import PropTypes from 'prop-types';
import moment from 'moment';
import { Calendar } from 'react-widgets';
import localizer from 'react-widgets/lib/localizers/moment';
import { Tooltip } from 'react-bootstrap';
import { isDate, isNil } from 'lodash';
import { Tooltip, Glyphicon } from 'react-bootstrap';
import { isDate, isNil, omit } from 'lodash';
import OverlayTrigger from '../OverlayTrigger';
import Hours from './Hours';

Expand Down Expand Up @@ -127,15 +127,7 @@ class DateTimePickerWithRange extends Component {
renderHoursRange = () =>{
const { inputValue, operator, focused, openRangeInputs, openTime } = this.state;
const { placeholder, tabIndex } = this.props;
const props = Object.keys(this.props).reduce((acc, key) => {
if (['placeholder', 'calendar', 'time', 'onChange', 'value', 'toolTip', 'onMouseOver'].includes(key)) {
// remove these props because they might have undesired effects to the subsequent components
return acc;
}
acc[key] = this.props[key];
return acc;

}, {});
const props = omit(this.props, ['placeholder', 'calendar', 'time', 'onChange', 'value', 'toolTip', 'onMouseOver']);
return (
<div onMouseDown={this.handleMouseDown} style={{display: 'flex', flexDirection: 'column', border: 'solid 5px'}}>
<div style={{display: 'flex', flexDirection: 'row'}}>
Expand All @@ -160,7 +152,7 @@ class DateTimePickerWithRange extends Component {
<span aria-hidden="true" className="rw-i rw-i-clock-o"></span>
</button>
</span>
<div style={{display: openTime ? 'block' : 'none'}}>
<div style={{display: openTime ? 'block' : 'none', background: 'white', height: "216px"}}>
<Hours ref={this.attachTimeRef} onMouseDown={this.handleMouseDown} {...props} onClose={this.close} onSelect={(evt) => this.handleTimeSelect(evt, 'start')} />
</div>
</div>
Expand All @@ -171,7 +163,7 @@ class DateTimePickerWithRange extends Component {
<span aria-hidden="true" className="rw-i rw-i-clock-o"></span>
</button>
</span>
<div style={{display: openTime ? 'block' : 'none'}}>
<div style={{display: openTime ? 'block' : 'none', background: 'white', height: "216px"}}>
<Hours ref={this.attachTimeRef} onMouseDown={this.handleMouseDown} {...props} onClose={this.close} onSelect={(evt) => this.handleTimeSelect(evt, 'end')} />
</div>
</div>
Expand Down Expand Up @@ -202,17 +194,9 @@ class DateTimePickerWithRange extends Component {
}
renderCalendarRange = () =>{
const { openRangeInputs, inputValue } = this.state;
const props = Object.keys(this.props).reduce((acc, key) => {
if (['placeholder', 'calendar', 'time', 'onChange', 'value', 'toolTip', 'onMouseOver'].includes(key)) {
// remove these props because they might have undesired effects to the subsequent components
return acc;
}
acc[key] = this.props[key];
return acc;

}, {});
const props = omit(this.props, ['placeholder', 'calendar', 'time', 'onChange', 'value', 'toolTip', 'onMouseOver']);
return (
<div onMouseDown={this.handleMouseDown} style={{display: 'flex', flexDirection: 'column', border: 'solid 5px'}}>
<div onMouseDown={this.handleMouseDown} style={{display: 'flex', flexDirection: 'column', border: 'solid 5px', height: 'inherit'}}>
<div style={{display: 'flex', flexDirection: 'row'}}>
<div onClick={this.toggleStart} className="range-tab" style={{width: '50%', fontSize: '8px', height: '40px', color: 'black', display: 'flex', flexDirection: 'column', justifyContent: 'center', background: openRangeInputs === 'start' || !openRangeInputs ? 'white' : 'gray', padding: '0.5rem'}}>
<strong style={{fontSize: '12px'}}>Start</strong>
Expand Down Expand Up @@ -266,7 +250,7 @@ class DateTimePickerWithRange extends Component {
</button>
</span>
{ openRangeContainer && <>
<div className={`rw-calendar-popup rw-popup-container ${popupPosition === 'top' ? 'rw-dropup' : ''} ${!openRangeContainer ? 'rw-popup-animating' : ''}`} style={{ display: openRangeContainer ? 'block' : 'none', overflow: openRangeContainer ? 'visible' : 'hidden', height: '285px' }}>
<div className={`rw-calendar-popup rw-popup-container ${popupPosition === 'top' ? 'rw-dropup' : ''} ${!openRangeContainer ? 'rw-popup-animating' : ''}`} style={{ display: openRangeContainer ? 'block' : 'none', overflow: openRangeContainer ? 'visible' : 'hidden', height: '250px' }}>
{ this.renderCalendarRange() }
</div>
</>}
Expand All @@ -276,18 +260,9 @@ class DateTimePickerWithRange extends Component {
renderDateTimeRange = () =>{
const { inputValue, operator, openRangeInputs, openTime } = this.state;
const { placeholder, tabIndex } = this.props;

const props = Object.keys(this.props).reduce((acc, key) => {
if (['placeholder', 'calendar', 'time', 'onChange', 'value', 'toolTip', 'onMouseOver'].includes(key)) {
// remove these props because they might have undesired effects to the subsequent components
return acc;
}
acc[key] = this.props[key];
return acc;

}, {});
const props = omit(this.props, ['placeholder', 'calendar', 'time', 'onChange', 'value', 'toolTip', 'onMouseOver']);
return (
<div onMouseDown={this.handleMouseDown} style={{display: 'flex', flexDirection: 'column', border: 'solid 5px', maxHeight: '360px', overflowY: 'auto'}}>
<div onMouseDown={this.handleMouseDown} style={{display: 'flex', flexDirection: 'column', border: 'solid 5px', maxHeight: '260px', overflowY: 'auto'}}>
<div style={{display: 'flex', flexDirection: 'row'}}>
<div onClick={this.toggleStart} className="range-tab" style={{width: '50%', fontSize: '8px', height: '40px', color: 'black', display: 'flex', flexDirection: 'column', justifyContent: 'center', background: openRangeInputs === 'start' || !openRangeInputs ? 'white' : 'gray', padding: '0.5rem'}}>
<strong style={{fontSize: '12px'}}>Start</strong>
Expand Down Expand Up @@ -321,7 +296,7 @@ class DateTimePickerWithRange extends Component {
</button>
</span>
</div>
<div style={{display: openTime ? 'block' : 'none'}}>
<div className="dateTime-picker-hours" style={{display: openTime ? 'block' : 'none', background: 'white'}}>
<Hours ref={this.attachTimeRef} onMouseDown={this.handleMouseDown} {...props} onClose={this.close} onSelect={(evt) => this.handleTimeSelect(evt, 'start')} />
</div>
</div>
Expand All @@ -344,7 +319,7 @@ class DateTimePickerWithRange extends Component {
</button>
</span>
</div>
<div style={{display: openTime ? 'block' : 'none'}}>
<div className="dateTime-picker-hours" style={{display: openTime ? 'block' : 'none', background: 'white'}}>
<Hours ref={this.attachTimeRef} onMouseDown={this.handleMouseDown} {...props} onClose={this.close} onSelect={(evt) => this.handleTimeSelect(evt, 'end')} />
</div>
</div>
Expand All @@ -363,7 +338,7 @@ class DateTimePickerWithRange extends Component {
{this.renderInput(shownVal, operator, toolTip, placeholder, tabIndex, true, true)}
<span className="rw-select">
<button tabIndex="-1" title="Select Date" type="button" aria-disabled="false" aria-label="Select Date" className="rw-btn-calendar rw-btn" onClick={this.toggleHandler}>
<span aria-hidden="true" className="rw-i rw-i-calendar"></span>
<Glyphicon glyph={'date-time'} />
</button>
</span>
{ openRangeContainer && <>
Expand Down
27 changes: 10 additions & 17 deletions web/client/components/misc/datetimepicker/DateTimePicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ import PropTypes from 'prop-types';
import moment from 'moment';
import { Calendar } from 'react-widgets';
import localizer from 'react-widgets/lib/localizers/moment';
import { Tooltip } from 'react-bootstrap';
import { isDate, isNil } from 'lodash';
import { Tooltip, Glyphicon } from 'react-bootstrap';
import { isDate, isNil, omit } from 'lodash';
import OverlayTrigger from '../OverlayTrigger';
import Hours from './Hours';

Expand Down Expand Up @@ -111,22 +111,15 @@ class DateTimePicker extends Component {
const { placeholder, tabIndex } = this.props;

const timeVisible = open === 'time';
const props = Object.keys(this.props).reduce((acc, key) => {
if (['placeholder', 'calendar', 'time', 'onChange', 'value'].includes(key)) {
// remove these props because they might have undesired effects to the subsequent components
return acc;
}
acc[key] = this.props[key];
return acc;
}, {});
const props = omit(this.props, ['placeholder', 'calendar', 'time', 'onChange', 'value']);
let calendarVal;
if ( this.props.value && typeof this.props.value === 'object') {
calendarVal = this.props.value?.startDate;
} else if (this.props.value && typeof this.props.value === 'string') calendarVal = this.props.value;

return (
<div style={{display: 'flex', flexDirection: 'column', border: 'solid 5px', maxHeight: '360px', overflowY: 'auto'}}>
<div style={{display: 'flex', flexDirection: 'column', overflow: 'auto'}}>
<div style={{display: 'flex', flexDirection: 'column', border: 'solid 5px', maxHeight: '260px', overflowY: 'auto'}}>
<div style={{display: 'flex', flexDirection: 'column', overflow: 'auto', height: 'inherit'}}>
<div>
<Calendar
tabIndex="-1"
Expand All @@ -137,15 +130,15 @@ class DateTimePicker extends Component {
value={!isNil(calendarVal) ? new Date(calendarVal) : undefined}
/>
<div>
<div style={{display: 'flex'}}>
<div style={{display: 'flex', background: 'white'}}>
{this.renderInput(inputValue, operator, '', placeholder, tabIndex, false, true, {width: '100%'})}
<span className="">
<button tabIndex="-1" title="Select Time" type="button" aria-disabled="false" aria-label="Select Time" className="rw-btn-time rw-btn" onClick={this.toggleTime}>
<span aria-hidden="true" className="rw-i rw-i-clock-o"></span>
</button>
</span>
</div>
<div style={{display: timeVisible ? 'block' : 'none'}}>
<div className="dateTime-picker-hours" style={{display: timeVisible ? 'block' : 'none', background: 'white'}}>
<Hours ref={this.attachTimeRef} {...props} onClose={this.close} onSelect={this.handleTimeSelect} />
</div>
</div>
Expand Down Expand Up @@ -190,7 +183,7 @@ class DateTimePicker extends Component {
{this.renderInput(inputValue, operator, toolTip, placeholder, tabIndex, true, true)}
<span className="rw-select">
<button tabIndex="-1" title="Select Date" type="button" aria-disabled="false" aria-label="Select Date" className="rw-btn-calendar rw-btn" onClick={this.toggleDateTime}>
<span aria-hidden="true" className="rw-i rw-i-calendar"></span>
<Glyphicon glyph={'date-time'} />
</button>
</span>
{ dateTimeVisible && <>
Expand Down Expand Up @@ -223,8 +216,8 @@ class DateTimePicker extends Component {
<Hours ref={this.attachTimeRef} onMouseDown={this.handleMouseDown} {...props} onClose={this.close} onSelect={this.handleTimeSelect} />
</div>
</div>
<div className={`rw-calendar-popup rw-popup-container ${popupPosition === 'top' ? 'rw-dropup' : ''} ${!calendarVisible ? 'rw-popup-animating' : ''}`} style={{ display: calendarVisible ? 'block' : 'none', overflow: calendarVisible ? 'visible' : 'hidden', height: '285px' }}>
<div className={`rw-popup`} style={{ transform: calendarVisible ? 'translateY(0)' : 'translateY(-100%)', padding: '0', borderRadius: '4px', position: calendarVisible ? '' : 'absolute' }}>
<div className={`rw-calendar-popup rw-popup-container ${popupPosition === 'top' ? 'rw-dropup' : ''} ${!calendarVisible ? 'rw-popup-animating' : ''}`} style={{ display: calendarVisible ? 'block' : 'none', overflow: calendarVisible ? 'visible' : 'hidden', height: '260px' }}>
<div className={`rw-popup`} style={{ transform: calendarVisible ? 'translateY(0)' : 'translateY(-100%)', padding: '0', borderRadius: '4px', position: calendarVisible ? '' : 'absolute', height: 'inherit' }}>
<Calendar
tabIndex="-1"
ref={this.attachCalRef}
Expand Down
Loading

0 comments on commit c4f5640

Please sign in to comment.