jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui) - filters show no results message, filter modal options

Browse source
This commit is contained in:
Shekar Siri 2022-02-17 16:42:58 +01:00
parent e0da7357ce
commit df240bc7c4
3 changed files with 28 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css
View file

@ -48,14 +48,14 @@
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
border: solid thin $gray-light !important; border: solid thin $gray-light !important;
box-shadow: 0 2px 2px 0 $gray-light; box-shadow: 0 2px 2px 0 $gray-light;
/* padding: 20px; */ min-height: 50px;
background-color: white; background-color: white;
max-height: 350px; max-height: 350px;
overflow-y: auto; overflow-y: auto;
position: absolute; position: absolute;
top: 28px; top: 28px;
left: 0; left: 0;
width: 500px; width: 400px;
z-index: 99; z-index: 99;
} }

43
frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
View file

@ -58,7 +58,7 @@ function FilterAutoComplete(props: Props) {
}).finally(() => setLoading(false)); }).finally(() => setLoading(false));
} }
const debouncedRequestValues = React.useCallback(debounce(requestValues, 500), []); const debouncedRequestValues = React.useCallback(debounce(requestValues, 300), []);
const onInputChange = ({ target: { value } }) => { const onInputChange = ({ target: { value } }) => {
setQuery(value); setQuery(value);
@ -86,17 +86,12 @@ function FilterAutoComplete(props: Props) {
const onItemClick = (e, item) => { const onItemClick = (e, item) => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
// const { onSelect, name } = this.props;
if (query !== item.value) { if (query !== item.value) {
setQuery(item.value); setQuery(item.value);
} }
// this.setState({ query: item.value, ddOpen: false})
props.onSelect(e, item); props.onSelect(e, item);
// setTimeout(() => {
// setShowModal(false)
// }, 10)
} }
return ( return (
@ -106,7 +101,6 @@ function FilterAutoComplete(props: Props) {
name="query" name="query"
onChange={ onInputChange } onChange={ onInputChange }
onBlur={ onBlur } onBlur={ onBlur }
// onFocus={ () => setShowModal(true)}
value={ query } value={ query }
autoFocus={ true } autoFocus={ true }
type="text" type="text"
@ -119,7 +113,6 @@ function FilterAutoComplete(props: Props) {
/> />
<div <div
className={stl.right} className={stl.right}
// onClick={showOrButton ? onRemoveValue : onAddValue}
> >
{ showCloseButton && <div onClick={onRemoveValue}><Icon name="close" size="12" /></div> } { showCloseButton && <div onClick={onRemoveValue}><Icon name="close" size="12" /></div> }
{ showOrButton && <div onClick={onAddValue} className="color-teal"><span className="px-1">or</span></div> } { showOrButton && <div onClick={onAddValue} className="color-teal"><span className="px-1">or</span></div> }
@ -128,21 +121,27 @@ function FilterAutoComplete(props: Props) {
{ !showOrButton && <div className="ml-3">or</div> } { !showOrButton && <div className="ml-3">or</div> }
{ (showModal && (options.length > 0) || loading) && ( { showModal && (
<div className={ stl.menu }> <div className={ stl.menu }>
<Loader loading={loading} size="small"> <Loader loading={loading} size="small">
{ { options.length === 0 ? (
options.map((item, i) => ( <div className="p-4 w-full">No results found!</div>
<div ) : (
key={item.value + '_' + i} <div>
className={ cn(stl.filterItem) } {
id="filter-item" onClick={ (e) => onItemClick(e, item) } options.map((item, i) => (
> <div
{ icon && <Icon name={ icon } size="16" marginRight="8" /> } key={item.value + '_' + i}
<span className={ stl.label }>{ item.value }</span> className={ cn(stl.filterItem) }
</div> id="filter-item" onClick={ (e) => onItemClick(e, item) }
)) >
} { icon && <Icon name={ icon } size="16" marginRight="8" /> }
<span className={ stl.label }>{ item.value }</span>
</div>
))
}
</div>
)}
</Loader> </Loader>
</div> </div>
)} )}

7
frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
View file

@ -4,9 +4,12 @@ import LiveFilterModal from '../LiveFilterModal';
import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv'; import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
import { Icon } from 'UI'; import { Icon } from 'UI';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { dashboard as dashboardRoute, isRoute } from "App/routes";
const DASHBOARD_ROUTE = dashboardRoute();
interface Props { interface Props {
filter: any; // event/filter filter?: any; // event/filter
onFilterClick: (filter) => void; onFilterClick: (filter) => void;
children?: any; children?: any;
isLive?: boolean; isLive?: boolean;
@ -40,7 +43,7 @@ function FilterSelection(props: Props) {
</OutsideClickDetectingDiv> </OutsideClickDetectingDiv>
{showModal && ( {showModal && (
<div className="absolute left-0 top-20 border shadow rounded bg-white z-50"> <div className="absolute left-0 top-20 border shadow rounded bg-white z-50">
{ isLive ? <LiveFilterModal onFilterClick={onFilterClick} /> : <FilterModal onFilterClick={onFilterClick} /> } { (isLive && !isRoute(DASHBOARD_ROUTE, window.location.pathname)) ? <LiveFilterModal onFilterClick={onFilterClick} /> : <FilterModal onFilterClick={onFilterClick} /> }
</div> </div>
)} )}
</div> </div>