53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
|
|
import SaveFilterButton from 'Shared/SaveFilterButton';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { useStore } from 'App/mstore';
|
|
import TagList from '../MainSearchBar/components/TagList';
|
|
import SavedSearch from '../SavedSearch/SavedSearch';
|
|
import { Button } from 'antd';
|
|
|
|
function SearchActions() {
|
|
const { aiFiltersStore, searchStore, customFieldStore } = useStore();
|
|
const appliedFilter = searchStore.instance;
|
|
const metaLoading = customFieldStore.isLoading;
|
|
const hasEvents =
|
|
appliedFilter.filters.filter((i: any) => i.isEvent).length > 0;
|
|
const hasFilters =
|
|
appliedFilter.filters.filter((i: any) => !i.isEvent).length > 0;
|
|
const savedSearch = searchStore.savedSearch;
|
|
const hasSavedSearch = savedSearch && savedSearch.exists();
|
|
const hasSearch = hasFilters || hasSavedSearch;
|
|
|
|
const showPanel = hasEvents || hasFilters || aiFiltersStore.isLoading;
|
|
return !metaLoading ? (
|
|
<div className={'mb-2'}>
|
|
<div className={'flex items-center gap-2 w-full'}>
|
|
<TagList />
|
|
<SavedSearch />
|
|
<div className={'ml-auto'} />
|
|
<Button
|
|
type="link"
|
|
disabled={!hasSearch}
|
|
onClick={() => searchStore.clearSearch()}
|
|
className="font-medium"
|
|
>
|
|
Clear Search
|
|
</Button>
|
|
<SaveFilterButton disabled={!hasEvents && !hasFilters} />
|
|
</div>
|
|
{showPanel ? (
|
|
<>
|
|
{aiFiltersStore.isLoading ? (
|
|
<div className={'font-semibold flex items-center gap-2 p-4'}>
|
|
<AnimatedSVG name={ICONS.LOADER} size={18} />
|
|
<span>Translating your query into search steps...</span>
|
|
</div>
|
|
) : null}
|
|
</>
|
|
) : null}
|
|
</div>
|
|
) : null;
|
|
}
|
|
|
|
export default observer(SearchActions);
|