107 lines
3 KiB
TypeScript
107 lines
3 KiB
TypeScript
import { Button, Input, Segmented } from 'antd';
|
|
import { observer } from 'mobx-react-lite';
|
|
import React from 'react';
|
|
import { useStore } from 'App/mstore';
|
|
import { debounce } from 'App/utils';
|
|
import ReloadButton from 'Shared/ReloadButton';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
const SpotsListHeader = observer(
|
|
({
|
|
onDelete,
|
|
selectedCount,
|
|
onClearSelection,
|
|
tenantHasSpots,
|
|
onRefresh,
|
|
}: {
|
|
onDelete: () => void;
|
|
selectedCount: number;
|
|
onClearSelection: () => void;
|
|
onRefresh: () => void;
|
|
isEmpty?: boolean;
|
|
tenantHasSpots: boolean;
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const { spotStore } = useStore();
|
|
|
|
const debouncedFetch = React.useMemo(
|
|
() => debounce(spotStore.fetchSpots, 250),
|
|
[],
|
|
);
|
|
const onSearch = (value: string) => {
|
|
spotStore.setQuery(value);
|
|
void spotStore.fetchSpots();
|
|
};
|
|
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
spotStore.setQuery(e.target.value);
|
|
debouncedFetch();
|
|
};
|
|
|
|
const onFilterChange = (key: 'all' | 'own') => {
|
|
spotStore.setFilter(key);
|
|
void spotStore.fetchSpots();
|
|
};
|
|
|
|
const handleSegmentChange = (value: string) => {
|
|
const key = value === t('All Spots') ? 'all' : 'own';
|
|
onFilterChange(key);
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center justify-between w-full">
|
|
<div className="flex gap-1 items-center">
|
|
<h1 className={'text-2xl capitalize mr-2'}>{t('Spots')}</h1>
|
|
<ReloadButton buttonSize={'small'} onClick={onRefresh} iconSize={14} />
|
|
</div>
|
|
|
|
{tenantHasSpots ? (
|
|
<div className="flex gap-2 items-center">
|
|
<div className="ml-auto">
|
|
{selectedCount > 0 && (
|
|
<>
|
|
<Button
|
|
type="text"
|
|
onClick={onClearSelection}
|
|
className="mr-2 px-3"
|
|
size='small'
|
|
>
|
|
{t('Clear')}
|
|
</Button>
|
|
<Button onClick={onDelete} type="primary" ghost size='small'>
|
|
{t('Delete')} ({selectedCount})
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<Segmented
|
|
options={[t('All Spots'), t('My Spots')]}
|
|
value={
|
|
spotStore.filter === 'all' ? t('All Spots') : t('My Spots')
|
|
}
|
|
onChange={handleSegmentChange}
|
|
className="mr-4 lg:hidden xl:flex"
|
|
size="small"
|
|
/>
|
|
|
|
<div className="w-56">
|
|
<Input.Search
|
|
value={spotStore.query}
|
|
allowClear
|
|
name="spot-search"
|
|
placeholder={t('Filter by title')}
|
|
onChange={handleInputChange}
|
|
onSearch={onSearch}
|
|
className="rounded-lg"
|
|
size="small"
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
|
|
export default SpotsListHeader;
|