DataTable removed from all settings
This commit is contained in:
Sean Edmunds
@@ -0,0 +1,358 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Group,
|
||||
Modal,
|
||||
Popover,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
|
||||
import { IconTrash } from '@tabler/icons-react';
|
||||
import { useCommonHooks, useMutationAPI } from 'hooks';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { buttonClasses, cardClasses, modalClasses, textInputClasses } from 'styles';
|
||||
import BookmarkSettingsItem from './BookmarkSettingsItem';
|
||||
import DebouncedBookmarkItem from './DebouncedBookmarkItem';
|
||||
|
||||
function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
|
||||
const { theme } = useCommonHooks();
|
||||
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
|
||||
const [popoverOpened, setPopoverOpened] = useState(false);
|
||||
const { mutateAsync } = useMutationAPI();
|
||||
const [group, setGroup] = useState<any>(bookmarkGroup);
|
||||
const [update, setUpdate] = useState({});
|
||||
const [debounced] = useDebouncedValue(update, 1000);
|
||||
const [newBookmark, setNewBookmark] = useState<any>({});
|
||||
const handleDeleteBookmark = (application: any) => {
|
||||
mutateAsync({ method: 'DELETE', endpoint: 'api/links', body: application });
|
||||
};
|
||||
const handleDeleteGroup = (application: any) => {
|
||||
mutateAsync({ method: 'DELETE', endpoint: 'api/categories', body: application });
|
||||
};
|
||||
useEffect(() => {
|
||||
if (Object.keys(debounced).length) {
|
||||
mutateAsync({ method: 'PATCH', endpoint: 'api/categories', body: debounced });
|
||||
setUpdate({});
|
||||
}
|
||||
}, [debounced]);
|
||||
|
||||
useEffect(() => {
|
||||
if (update !== group && Object.keys(update).length) {
|
||||
setGroup(update);
|
||||
}
|
||||
}, [update]);
|
||||
|
||||
return (
|
||||
<Card w={'400px'} className={cardClasses.settingsItem} classNames={cardClasses}>
|
||||
<Modal.Root
|
||||
size={'60%'}
|
||||
className={modalClasses.helpModal}
|
||||
classNames={modalClasses}
|
||||
opened={modalOpened}
|
||||
onClose={() => {
|
||||
closeModal();
|
||||
}}
|
||||
style={{
|
||||
'--color-text-pri': theme.primaryColor,
|
||||
'--color-text-acc': theme.accentColor,
|
||||
'--color-background': theme.backgroundColor,
|
||||
'--color-border': theme.borderColor,
|
||||
'--color-search-background': theme.searchColor,
|
||||
'--image-background': `url(${theme.backgroundImage})`,
|
||||
}}
|
||||
closeOnEscape
|
||||
closeOnClickOutside
|
||||
>
|
||||
<Modal.Overlay />
|
||||
<Modal.Content>
|
||||
<Modal.Header>
|
||||
<Modal.Title>Delete Application</Modal.Title>
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body pb={'2rem'}>
|
||||
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
|
||||
<Text>Are you sure you want to delete this application?</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontWeight: 'bold',
|
||||
fontSize: '20px',
|
||||
padding: '8px',
|
||||
margin: '8px',
|
||||
borderRadius: '10px',
|
||||
backgroundColor: 'var(--color-text-acc)',
|
||||
color: 'var(--color-background)',
|
||||
}}
|
||||
>{`"${group.categoryName}"`}</Text>
|
||||
<Text c='red'>This action cannot be undone!</Text>
|
||||
<Group pos={'absolute'} bottom={8}>
|
||||
<Button
|
||||
color={'red'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
handleDeleteGroup(group);
|
||||
closeModal();
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
<Button
|
||||
color={'grey'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
closeModal();
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
<Card.Section p={16} bg={theme.searchColor} c={theme.backgroundColor}>
|
||||
<Stack gap={0}>
|
||||
<Group gap={0} align='center' justify='space-between'>
|
||||
<TextInput
|
||||
label={'Name'}
|
||||
labelProps={{
|
||||
style: {
|
||||
color: theme.primaryColor,
|
||||
},
|
||||
}}
|
||||
w={'58%'}
|
||||
className={textInputClasses.settingsItem}
|
||||
classNames={textInputClasses}
|
||||
defaultValue={group.categoryName}
|
||||
onChange={(event) => {
|
||||
setUpdate({
|
||||
...group,
|
||||
categoryName: event.target.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label={'Filter Name'}
|
||||
labelProps={{
|
||||
style: {
|
||||
color: theme.primaryColor,
|
||||
},
|
||||
}}
|
||||
w={'28%'}
|
||||
className={textInputClasses.settingsItem}
|
||||
classNames={textInputClasses}
|
||||
defaultValue={group.filterName}
|
||||
onChange={(event) => {
|
||||
setUpdate({
|
||||
...group,
|
||||
filterName: event.target.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Tooltip
|
||||
color={theme.primaryColor}
|
||||
bd={`solid 1px ${theme.borderColor}`}
|
||||
label={'Delete'}
|
||||
>
|
||||
<ActionIcon
|
||||
mt={24}
|
||||
size={'lg'}
|
||||
color='red'
|
||||
onClick={() => {
|
||||
openModal();
|
||||
}}
|
||||
>
|
||||
<IconTrash />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
width: '30px',
|
||||
height: '30px',
|
||||
borderRadius: '100%',
|
||||
backgroundColor: theme.accentColor,
|
||||
position: 'absolute',
|
||||
top: 78,
|
||||
right: 18,
|
||||
zIndex: 10,
|
||||
fontSize: 20,
|
||||
textAlign: 'center',
|
||||
textJustify: 'auto',
|
||||
}}
|
||||
>
|
||||
{bookmarks.length}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Card.Section>
|
||||
<Card.Section mt={16} p={16}>
|
||||
<Stack>
|
||||
{bookmarks.map((bookmark: any) => (
|
||||
<Popover key={bookmark.id} withArrow withOverlay>
|
||||
<Popover.Target>
|
||||
<Box>
|
||||
<BookmarkSettingsItem bookmark={bookmark} />
|
||||
</Box>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown
|
||||
style={{
|
||||
'--color-text-pri': theme.primaryColor,
|
||||
'--color-text-acc': theme.accentColor,
|
||||
'--color-background': theme.backgroundColor,
|
||||
'--color-border': theme.borderColor,
|
||||
'--color-search-background': theme.searchColor,
|
||||
'--image-background': `url(${theme.backgroundImage})`,
|
||||
}}
|
||||
>
|
||||
<DebouncedBookmarkItem
|
||||
bookmarkItem={bookmark}
|
||||
handleDelete={handleDeleteBookmark}
|
||||
/>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
))}
|
||||
</Stack>
|
||||
</Card.Section>
|
||||
<Card.Section p={8} bg={theme.searchColor} c={theme.backgroundColor}>
|
||||
<Group align='center' justify='center'>
|
||||
<Popover
|
||||
withArrow
|
||||
withOverlay
|
||||
position='top'
|
||||
opened={popoverOpened}
|
||||
onChange={setPopoverOpened}
|
||||
closeOnEscape
|
||||
>
|
||||
<Popover.Target>
|
||||
<Button
|
||||
className={buttonClasses.tableButton}
|
||||
classNames={buttonClasses}
|
||||
w={'min-content'}
|
||||
onClick={() => {
|
||||
setPopoverOpened((o) => !o);
|
||||
setNewBookmark({
|
||||
...newBookmark,
|
||||
category: group.categoryName,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Add bookmark
|
||||
</Button>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown
|
||||
style={{
|
||||
'--color-text-pri': theme.primaryColor,
|
||||
'--color-text-acc': theme.accentColor,
|
||||
'--color-background': theme.backgroundColor,
|
||||
'--color-border': theme.borderColor,
|
||||
'--color-search-background': theme.searchColor,
|
||||
'--image-background': `url(${theme.backgroundImage})`,
|
||||
}}
|
||||
>
|
||||
<Stack w={'100%'} display={'flex'} pos={'relative'}>
|
||||
<Group w={'100%'} justify='center'>
|
||||
<TextInput
|
||||
label={'Name'}
|
||||
labelProps={{
|
||||
style: {
|
||||
color: theme.primaryColor,
|
||||
},
|
||||
}}
|
||||
className={textInputClasses.settingsItem}
|
||||
pt={16}
|
||||
classNames={textInputClasses}
|
||||
onChange={(event) => {
|
||||
setNewBookmark({
|
||||
...newBookmark,
|
||||
name: event.target.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label={'Category'}
|
||||
labelProps={{
|
||||
style: {
|
||||
color: theme.primaryColor,
|
||||
},
|
||||
}}
|
||||
className={textInputClasses.settingsItem}
|
||||
pt={16}
|
||||
classNames={textInputClasses}
|
||||
disabled
|
||||
defaultValue={group.categoryName}
|
||||
onChange={(event) => {
|
||||
setNewBookmark({
|
||||
...newBookmark,
|
||||
category: event.target.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
<Group w={'100%'} justify='center' mb={60}>
|
||||
<TextInput
|
||||
label={'URL'}
|
||||
labelProps={{
|
||||
style: {
|
||||
color: theme.primaryColor,
|
||||
},
|
||||
}}
|
||||
className={textInputClasses.settingsItem}
|
||||
w={'100%'}
|
||||
pt={16}
|
||||
classNames={textInputClasses}
|
||||
onChange={(event) => {
|
||||
setNewBookmark({
|
||||
...newBookmark,
|
||||
url: event.target.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
<Group
|
||||
w={'100%'}
|
||||
pos={'absolute'}
|
||||
bottom={8}
|
||||
align='center'
|
||||
justify='center'
|
||||
>
|
||||
<Button
|
||||
color={'green'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
if (newBookmark) {
|
||||
mutateAsync({
|
||||
method: 'POST',
|
||||
endpoint: 'api/links',
|
||||
body: newBookmark,
|
||||
});
|
||||
setPopoverOpened(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
color={'red'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
setPopoverOpened(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
</Group>
|
||||
</Card.Section>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default DebouncedGroupSettingsItem;
|
||||
Reference in New Issue
Block a user