114 lines
3.7 KiB
TypeScript
114 lines
3.7 KiB
TypeScript
import React from 'react';
|
|
import { confirm, Modal, Form, Icon, Checkbox, Input } from 'UI';
|
|
import { Button } from 'antd'
|
|
import stl from './SaveSearchModal.module.css';
|
|
import cn from 'classnames';
|
|
import { toast } from 'react-toastify';
|
|
import { useStore } from 'App/mstore';
|
|
import { observer } from 'mobx-react-lite';
|
|
|
|
interface Props {
|
|
show: boolean;
|
|
closeHandler: () => void;
|
|
rename?: boolean;
|
|
}
|
|
|
|
function SaveSearchModal({ show, closeHandler, rename = false }: Props) {
|
|
const { searchStore, userStore } = useStore();
|
|
const userId = userStore.account.id;
|
|
const savedSearch = searchStore.savedSearch;
|
|
const loading = searchStore.isSaving;
|
|
|
|
const onNameChange = ({ target: { value } }: any) => {
|
|
searchStore.editSavedSearch({ name: value });
|
|
};
|
|
|
|
const onSave = () => {
|
|
searchStore.save(savedSearch.exists() ? savedSearch.searchId : null, rename)
|
|
.then(() => {
|
|
toast.success(`${savedSearch.exists() ? 'Updated' : 'Saved'} Successfully`);
|
|
closeHandler();
|
|
})
|
|
.catch((e) => {
|
|
console.error(e)
|
|
toast.error('Something went wrong, please try again');
|
|
});
|
|
};
|
|
|
|
const onDelete = async () => {
|
|
if (
|
|
await confirm({
|
|
header: 'Confirm',
|
|
confirmButton: 'Yes, delete',
|
|
confirmation: `Are you sure you want to permanently delete this Saved search?`
|
|
})
|
|
) {
|
|
searchStore.removeSavedSearch(savedSearch.searchId!).then(() => {
|
|
closeHandler();
|
|
});
|
|
}
|
|
};
|
|
|
|
const onChangeOption = ({ target: { checked, name } }: any) => searchStore.editSavedSearch({ [name]: checked });
|
|
|
|
return (
|
|
<Modal size="small" open={show} onClose={closeHandler}>
|
|
<Modal.Header className={stl.modalHeader}>
|
|
<div>{'Save Search'}</div>
|
|
<Icon role="button" tabIndex="-1" color="gray-dark" size="18" name="close" onClick={closeHandler} />
|
|
</Modal.Header>
|
|
|
|
<Modal.Content>
|
|
<Form onSubmit={onSave}>
|
|
<Form.Field>
|
|
<label>{'Title:'}</label>
|
|
<Input
|
|
autoFocus={true}
|
|
// className={ stl.name }
|
|
name="name"
|
|
value={savedSearch.name}
|
|
onChange={onNameChange}
|
|
placeholder="Title"
|
|
/>
|
|
</Form.Field>
|
|
|
|
<Form.Field>
|
|
<div
|
|
className={cn('flex items-center', { disabled: savedSearch.exists() && savedSearch.userId !== userId })}>
|
|
<Checkbox
|
|
name="isPublic"
|
|
type="checkbox"
|
|
checked={savedSearch.isPublic}
|
|
onClick={onChangeOption}
|
|
/>
|
|
<div
|
|
className="flex items-center cursor-pointer select-none ml-2"
|
|
onClick={() => searchStore.editSavedSearch({ isPublic: !savedSearch.isPublic })}
|
|
>
|
|
<Icon name="user-friends" size="16" />
|
|
<span className="ml-2"> Team Visible</span>
|
|
</div>
|
|
</div>
|
|
</Form.Field>
|
|
</Form>
|
|
{/* {savedSearch.exists() && <div className="mt-4">Changes in filters will be updated.</div>} */}
|
|
</Modal.Content>
|
|
<Modal.Footer className="flex items-center px-6">
|
|
<div className="mr-auto flex items-center">
|
|
<Button type="primary" onClick={onSave} loading={loading} disabled={!savedSearch.validate()}
|
|
className="mr-2">
|
|
{savedSearch.exists() ? 'Update' : 'Save'}
|
|
</Button>
|
|
<Button onClick={closeHandler}>{'Cancel'}</Button>
|
|
</div>
|
|
{savedSearch.exists() && (
|
|
<Button type="text" onClick={onDelete}>
|
|
<Icon name="trash" size="18" />
|
|
</Button>
|
|
)}
|
|
</Modal.Footer>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
export default observer(SaveSearchModal);
|