149 lines
3.6 KiB
TypeScript
149 lines
3.6 KiB
TypeScript
import {
|
|
ActionIcon,
|
|
Button,
|
|
Card,
|
|
Group,
|
|
Stack,
|
|
Text,
|
|
TextInput,
|
|
Tooltip,
|
|
} from '@mantine/core';
|
|
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
|
|
import { useCommonHooks, useMutationAPI } from 'hooks';
|
|
import { useEffect, useState } from 'react';
|
|
import { FiTrash } from 'react-icons/fi';
|
|
import { cardClasses, textInputClasses } from 'styles';
|
|
import type { Provider } from 'types';
|
|
import DeleteItemModal from '../Shared/DeleteItemModal';
|
|
|
|
function DebouncedSearchProvider({ searchProvider }: any) {
|
|
const { theme, handleDelete } = useCommonHooks();
|
|
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
|
|
const { mutateAsync } = useMutationAPI();
|
|
|
|
const [provider, setProvider] = useState<Provider>(searchProvider);
|
|
const [update, setUpdate] = useState<any>({});
|
|
const [debounced] = useDebouncedValue(update, 1000);
|
|
|
|
useEffect(() => {
|
|
if (Object.keys(debounced).length) {
|
|
mutateAsync({ method: 'PATCH', endpoint: 'api/providers', body: debounced });
|
|
}
|
|
}, [debounced]);
|
|
|
|
useEffect(() => {
|
|
if (update !== provider && Object.keys(update).length) {
|
|
setProvider(update);
|
|
}
|
|
}, [update]);
|
|
|
|
return (
|
|
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
|
|
<DeleteItemModal
|
|
modalOpened={modalOpened}
|
|
handleClose={closeModal}
|
|
title={'Delete Search Provider'}
|
|
body={
|
|
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
|
|
<Text>Are you sure you want to delete this Search Provider?</Text>
|
|
<Text
|
|
style={{
|
|
fontWeight: 'bold',
|
|
fontSize: '20px',
|
|
padding: '8px',
|
|
margin: '8px',
|
|
borderRadius: '10px',
|
|
backgroundColor: 'var(--color-text-acc)',
|
|
color: 'var(--color-background)',
|
|
}}
|
|
>{`"${provider.name}"`}</Text>
|
|
<Text c='red'>This action cannot be undone!</Text>
|
|
<Group pos={'absolute'} bottom={8}>
|
|
<Button
|
|
color={'red'}
|
|
styles={{ label: { color: 'black' } }}
|
|
onClick={() => {
|
|
handleDelete(provider, 'api/providers');
|
|
closeModal();
|
|
}}
|
|
>
|
|
Delete
|
|
</Button>
|
|
<Button
|
|
color={'grey'}
|
|
styles={{ label: { color: 'black' } }}
|
|
onClick={() => {
|
|
closeModal();
|
|
}}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</Group>
|
|
</Stack>
|
|
}
|
|
/>
|
|
<Tooltip
|
|
color={theme.primaryColor}
|
|
bd={`solid 1px ${theme.borderColor}`}
|
|
label={'Delete'}
|
|
>
|
|
<ActionIcon
|
|
pos={'absolute'}
|
|
right={16}
|
|
color='red'
|
|
onClick={() => {
|
|
openModal();
|
|
}}
|
|
>
|
|
<FiTrash />
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
<Stack>
|
|
<Group w={'100%'} justify='center'>
|
|
<TextInput
|
|
label={'Name'}
|
|
className={textInputClasses.settingsItem}
|
|
pt={16}
|
|
classNames={textInputClasses}
|
|
defaultValue={provider.name}
|
|
onChange={(event) => {
|
|
setUpdate({
|
|
...provider,
|
|
name: event.target.value,
|
|
});
|
|
}}
|
|
/>
|
|
<TextInput
|
|
label={'Prefix'}
|
|
className={textInputClasses.settingsItem}
|
|
pt={16}
|
|
classNames={textInputClasses}
|
|
defaultValue={provider.prefix}
|
|
onChange={(event) => {
|
|
setUpdate({
|
|
...provider,
|
|
prefix: event.target.value,
|
|
});
|
|
}}
|
|
/>
|
|
</Group>
|
|
<TextInput
|
|
label={'Url'}
|
|
className={textInputClasses.settingsItem}
|
|
pt={16}
|
|
classNames={textInputClasses}
|
|
defaultValue={provider.url}
|
|
onChange={(event) => {
|
|
setUpdate({
|
|
...provider,
|
|
url: event.target.value,
|
|
});
|
|
}}
|
|
/>
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default DebouncedSearchProvider;
|