change(ui) - search cleanup
This commit is contained in:
Shekar Siri
parent
d4fc1c76f5
commit
2895795e8f
2 changed files with 69 additions and 82 deletions
|
|
@ -2,51 +2,40 @@ import React from 'react';
|
|||
import SessionSearchField from 'Shared/SessionSearchField';
|
||||
import SavedSearch from 'Shared/SavedSearch';
|
||||
import { Button } from 'UI';
|
||||
// import { clearSearch } from 'Duck/search';
|
||||
import { connect } from 'react-redux';
|
||||
import { edit as editFilter, addFilterByKeyAndValue, clearSearch, fetchFilterSearch } from 'Duck/search';
|
||||
import { clearSearch } from 'Duck/search';
|
||||
|
||||
interface Props {
|
||||
clearSearch: () => void;
|
||||
appliedFilter: any;
|
||||
optionsReady: boolean;
|
||||
editFilter: any,
|
||||
addFilterByKeyAndValue: any,
|
||||
fetchFilterSearch: any,
|
||||
clearSearch: () => void;
|
||||
appliedFilter: any;
|
||||
}
|
||||
const MainSearchBar = (props: Props) => {
|
||||
const { appliedFilter } = props;
|
||||
const { appliedFilter } = props;
|
||||
const hasFilters = appliedFilter && appliedFilter.filters && appliedFilter.filters.size > 0;
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
<div style={{ width: "60%", marginRight: "10px"}}>
|
||||
<SessionSearchField
|
||||
editFilter={props.editFilter}
|
||||
addFilterByKeyAndValue={props.addFilterByKeyAndValue}
|
||||
clearSearch={props.clearSearch}
|
||||
fetchFilterSearch={props.fetchFilterSearch}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center" style={{ width: "40%"}}>
|
||||
<div style={{ width: '60%', marginRight: '10px' }}>
|
||||
<SessionSearchField />
|
||||
</div>
|
||||
<div className="flex items-center" style={{ width: '40%' }}>
|
||||
<SavedSearch />
|
||||
<Button
|
||||
variant="text-primary"
|
||||
className="ml-auto font-medium"
|
||||
disabled={!hasFilters}
|
||||
onClick={() => props.clearSearch()}
|
||||
variant="text-primary"
|
||||
className="ml-auto font-medium"
|
||||
disabled={!hasFilters}
|
||||
onClick={() => props.clearSearch()}
|
||||
>
|
||||
Clear Search
|
||||
Clear Search
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default connect(state => ({
|
||||
);
|
||||
};
|
||||
export default connect(
|
||||
(state: any) => ({
|
||||
appliedFilter: state.getIn(['search', 'instance']),
|
||||
optionsReady: state.getIn(['customFields', 'optionsReady'])
|
||||
}), {
|
||||
}),
|
||||
{
|
||||
clearSearch,
|
||||
editFilter,
|
||||
addFilterByKeyAndValue,
|
||||
fetchFilterSearch
|
||||
})(MainSearchBar);
|
||||
}
|
||||
)(MainSearchBar);
|
||||
|
|
|
|||
|
|
@ -4,66 +4,64 @@ import { Input } from 'UI';
|
|||
import FilterModal from 'Shared/Filters/FilterModal';
|
||||
import { debounce } from 'App/utils';
|
||||
import { assist as assistRoute, isRoute } from 'App/routes';
|
||||
import { addFilterByKeyAndValue, fetchFilterSearch } from 'Duck/search';
|
||||
const ASSIST_ROUTE = assistRoute();
|
||||
|
||||
interface Props {
|
||||
fetchFilterSearch: (query: any) => void;
|
||||
addFilterByKeyAndValue: (key: string, value: string) => void;
|
||||
filterList: any;
|
||||
filterListLive: any;
|
||||
filterSearchListLive: any;
|
||||
filterSearchList: any;
|
||||
fetchFilterSearch: (query: any) => void;
|
||||
addFilterByKeyAndValue: (key: string, value: string) => void;
|
||||
filterSearchListLive: any;
|
||||
filterSearchList: any;
|
||||
}
|
||||
function SessionSearchField(props: Props) {
|
||||
const debounceFetchFilterSearch = React.useCallback(debounce(props.fetchFilterSearch, 1000), []);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const debounceFetchFilterSearch = React.useCallback(debounce(props.fetchFilterSearch, 1000), []);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
|
||||
const onSearchChange = ({ target: { value } }: any) => {
|
||||
setSearchQuery(value);
|
||||
debounceFetchFilterSearch({ q: value });
|
||||
};
|
||||
const onSearchChange = ({ target: { value } }: any) => {
|
||||
setSearchQuery(value);
|
||||
debounceFetchFilterSearch({ q: value });
|
||||
};
|
||||
|
||||
const onAddFilter = (filter: any) => {
|
||||
props.addFilterByKeyAndValue(filter.key, filter.value);
|
||||
};
|
||||
const onAddFilter = (filter: any) => {
|
||||
props.addFilterByKeyAndValue(filter.key, filter.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<Input
|
||||
icon="search"
|
||||
onFocus={() => setShowModal(true)}
|
||||
onBlur={() => setTimeout(setShowModal, 200, false)}
|
||||
onChange={onSearchChange}
|
||||
placeholder={'Search sessions using any captured event (click, input, page, error...)'}
|
||||
id="search"
|
||||
type="search"
|
||||
autoComplete="off"
|
||||
className="hover:border-gray-medium text-lg placeholder-lg"
|
||||
/>
|
||||
return (
|
||||
<div className="relative">
|
||||
<Input
|
||||
icon="search"
|
||||
onFocus={() => setShowModal(true)}
|
||||
onBlur={() => setTimeout(setShowModal, 200, false)}
|
||||
onChange={onSearchChange}
|
||||
placeholder={'Search sessions using any captured event (click, input, page, error...)'}
|
||||
id="search"
|
||||
type="search"
|
||||
autoComplete="off"
|
||||
className="hover:border-gray-medium text-lg placeholder-lg"
|
||||
/>
|
||||
|
||||
{showModal && (
|
||||
<div className="absolute left-0 border shadow rounded bg-white z-50">
|
||||
<FilterModal
|
||||
searchQuery={searchQuery}
|
||||
isMainSearch={true}
|
||||
onFilterClick={onAddFilter}
|
||||
isLive={isRoute(ASSIST_ROUTE, window.location.pathname) || window.location.pathname.includes('multiview')}
|
||||
// filters={isRoute(ASSIST_ROUTE, window.location.pathname) ? props.filterListLive : props.filterList }
|
||||
// filterSearchList={isRoute(ASSIST_ROUTE, window.location.pathname) ? props.filterSearchListLive : props.filterSearchList }
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{showModal && (
|
||||
<div className="absolute left-0 border shadow rounded bg-white z-50">
|
||||
<FilterModal
|
||||
searchQuery={searchQuery}
|
||||
isMainSearch={true}
|
||||
onFilterClick={onAddFilter}
|
||||
isLive={
|
||||
isRoute(ASSIST_ROUTE, window.location.pathname) ||
|
||||
window.location.pathname.includes('multiview')
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
(state: any) => ({
|
||||
filterSearchList: state.getIn(['search', 'filterSearchList']),
|
||||
filterSearchListLive: state.getIn(['liveSearch', 'filterSearchList']),
|
||||
filterList: state.getIn(['search', 'filterList']),
|
||||
filterListLive: state.getIn(['search', 'filterListLive']),
|
||||
}),
|
||||
{}
|
||||
(state: any) => ({
|
||||
filterSearchList: state.getIn(['search', 'filterSearchList']),
|
||||
filterSearchListLive: state.getIn(['liveSearch', 'filterSearchList']),
|
||||
}),
|
||||
{ addFilterByKeyAndValue, fetchFilterSearch }
|
||||
)(SessionSearchField);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue