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

fix(ui): bug fixes for dashboard

Browse source
This commit is contained in:
sylenien 2022-05-19 13:06:53 +02:00 • committed by Delirium
parent 580641efe8
commit c82efbeb6b
2 changed files with 37 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
View file

@ -7,16 +7,26 @@ import { filtersMap } from 'Types/filter/newFilter';
export const getMatchingEntries = (searchQuery: string, filters: Record<string, any>) => {
const matchingCategories: string[] = [];
const matchingFilters: [] = []
Object.keys(filters).forEach(name => {
if (name.includes(searchQuery)) matchingCategories.push(name);
const filtersQuery: [] = filters[name]
.filter(filterOption => filterOption.label.includes(searchQuery))
const matchingFilters: Record<string, any> = {};
if (searchQuery.length === 0) return {
matchingCategories: Object.keys(filters),
matchingFilters: filters,
};
matchingFilters.push(...filtersQuery)
Object.keys(filters).forEach(name => {
if (name.toLocaleLowerCase().includes(searchQuery)) {
matchingCategories.push(name);
matchingFilters[name] = filters[name];
} else {
const filtersQuery = filters[name]
.filter(filterOption => filterOption.label.toLocaleLowerCase().includes(searchQuery))
matchingFilters[name] = filtersQuery
filtersQuery.length > 0 && matchingCategories.push(name);
}
})
return { matchingCategories, matchingFilters }
return { matchingCategories, matchingFilters };
}
interface Props {
@ -60,20 +70,12 @@ function FilterModal(props: Props) {
<div className="mb-6" key={key}>
<div className="uppercase font-medium mb-1 color-gray-medium tracking-widest text-sm">{key}</div>
<div>
{filters[key].map((filter: any) => {
if (hasSearchQuery) {
const matchingFilters = filters[key].filter(filter => filter.label.includes(searchQuery));
const hasMatchingSubstring = matchingFilters.length > 0 || key.includes(searchQuery);
if (hasSearchQuery && !hasMatchingSubstring) return null;
}
return (
{matchingFilters[key].map((filter: any) => (
<div key={filter.label} className={cn(stl.optionItem, "flex items-center py-2 cursor-pointer -mx-2 px-2")} onClick={() => onFilterClick({ ...filter, value: [''] })}>
<Icon name={filter.icon} size="16"/>
<span className="ml-2">{filter.label}</span>
</div>
)
}
)}
</div>
</div>

35
frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx
View file

@ -16,19 +16,21 @@ import stl from './savedSearchModal.css'
interface ITooltipIcon {
title: string;
name: string;
onClick: (item: any, e: MouseEvent<HTMLButtonElement>) => void;
onClick: (e: MouseEvent<HTMLDivElement>) => void;
}
function TooltipIcon(props: ITooltipIcon) {
return (
// @ts-ignore - problem with react-tippy types TODO: remove after fix
<Tooltip
delay={250}
title={props.title}
hideOnClick={true}
position="bottom"
>
<Icon size="24" name={props.name} color="main" onClick={props.onClick} />
</Tooltip>
<div onClick={(e) => props.onClick(e)} >
{/* @ts-ignore - problem with react-tippy types TODO: remove after fix */}
<Tooltip
delay={250}
title={props.title}
hideOnClick={true}
position="bottom"
>
<Icon size="24" name={props.name} color="main" />
</Tooltip>
</div>
)
}
@ -43,11 +45,12 @@ function SavedSearchModal(props: Props) {
const [showModal, setshowModal] = useState(false)
const [filterQuery, setFilterQuery] = useState('')
const onClick = (item: SavedSearch) => {
const onClick = (item: SavedSearch, e) => {
e.stopPropagation();
props.applySavedSearch(item);
hideModal();
}
const onDelete = async (item: SavedSearch, e: MouseEvent<HTMLButtonElement>) => {
const onDelete = async (item: SavedSearch, e: MouseEvent<HTMLDivElement>) => {
e.stopPropagation();
const confirmation = await confirm({
header: 'Confirm',
@ -58,7 +61,7 @@ function SavedSearchModal(props: Props) {
props.remove(item.searchId)
}
}
const onEdit = (item: SavedSearch, e: MouseEvent<HTMLButtonElement>) => {
const onEdit = (item: SavedSearch, e: MouseEvent<HTMLDivElement>) => {
e.stopPropagation();
props.editSavedSearch(item);
setTimeout(() => setshowModal(true), 0);
@ -83,7 +86,7 @@ function SavedSearchModal(props: Props) {
</div>
)}
{shownItems.map(item => (
<div key={item.key} className={cn('px-6 py-4 cursor-pointer flex items-start', stl.rowItem)} onClick={() => onClick(item)}>
<div key={item.key} className={cn('px-6 py-4 cursor-pointer flex items-start', stl.rowItem)} onClick={(e) => onClick(item, e)}>
<Icon name="search" color="gray-medium" size="24" />
<div className="ml-4">
<div className="text-xl">{item.name} </div>
@ -96,10 +99,10 @@ function SavedSearchModal(props: Props) {
</div>
<div className="flex items-center ml-auto self-center">
<div className={stl.iconCircle}>
<TooltipIcon name="pencil" onClick={onEdit} title="Rename" />
<TooltipIcon name="pencil" onClick={(e) => onEdit(item, e)} title="Rename" />
</div>
<div className={stl.iconCircle}>
<TooltipIcon name="trash" onClick={onEdit} title="Delete" />
<TooltipIcon name="trash" onClick={(e) => onDelete(item, e)} title="Delete" />
</div>
</div>
</div>