smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

DataTable removed from all settings

Browse Source
This commit is contained in:
Sean Edmunds
2025-03-21 13:32:29 -05:00
parent 50fec41aba
commit 2b972afa68
18 changed files with 766 additions and 696 deletions
Download Patch File Download Diff File Expand all files Collapse all files

227
src/pages/settings/components/Bookmarks/Bookmarks.tsx
View File

@@ -1,52 +1,219 @@
import { Stack, Text } from '@mantine/core';
import { BookmarkColumns, DataTable } from 'components';
import { useQueryAPI } from 'hooks';
import {
ActionIcon,
Button,
Divider,
Group,
Highlight,
Modal,
Popover,
Stack,
Text,
TextInput,
} from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textClasses } from 'styles';
import { FiHelpCircle, FiPlus } from 'react-icons/fi';
import {
actionIconClasses,
buttonClasses,
modalClasses,
textClasses,
textInputClasses,
} from 'styles';
import DebouncedGroupSettingsItem from './DebouncedGroupSettingsItem';
const BookmarkSettings = () => {
const endpoint = 'api/links';
const {
data: linkData,
isFetched: linksIsFetched,
isFetching: linksIsFetching,
isLoading: linksIsLoading,
} = useQueryAPI({
endpoint: endpoint,
const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
endpoint: 'api/links',
});
const [bookmarks, setBookmarks] = useState<any>([]);
const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
endpoint: 'api/categories',
});
const [bookmarkData, setBookmarkData] = useState<any>([]);
const [groups, setGroups] = useState([]);
const [newGroup, setNewGroup] = useState<any>({});
const { theme } = useCommonHooks();
const { mutateAsync } = useMutationAPI();
const [searchValue, setSearchValue] = useState('');
const [debouncedGroupSearch] = useDebouncedValue(searchValue, 500);
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
useEffect(() => {
if (linkData && linksIsFetched) {
setBookmarkData(linkData);
setBookmarks(linkData);
}
}, [linksIsFetched, linkData]);
useEffect(() => {
if (groupData && groupsIsFetched) {
const groupList = groupData?.map((category: any) => {
return category.categoryName;
});
setGroups(groupList);
setGroups(
groupData.filter((a: any) =>
a.categoryName.toLowerCase().includes(debouncedGroupSearch.toLowerCase()),
),
);
}
}, [groupData, groupsIsFetched]);
}, [groupData, groupsIsFetched, debouncedGroupSearch]);
return (
<Stack>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
Bookmarks
</Text>
<DataTable
tableName='Bookmarks'
columns={BookmarkColumns(groups)}
tableData={bookmarkData}
isFetching={linksIsFetching}
isLoading={linksIsLoading}
endpoint={endpoint}
/>
<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>Add a new Group</Modal.Title>
<Modal.CloseButton />
</Modal.Header>
<Modal.Body pb={'2rem'}>
<Stack gap={0} w={'100%'} align='center'>
<Group w={'100%'} justify='center'>
<TextInput
label={'Category Name'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={newGroup.categoryName}
onChange={(event) => {
setNewGroup({
...newGroup,
categoryName: event.target.value,
});
}}
/>
<TextInput
label={'Filter Name'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={newGroup.filterName}
onChange={(event) => {
setNewGroup({
...newGroup,
filterName: event.target.value,
});
}}
/>
</Group>
<Divider color='black' my='sm' />
<Group pos={'absolute'} bottom={8}>
<Button
color={'green'}
styles={{ label: { color: 'black' } }}
onClick={() => {
if (newGroup) {
mutateAsync({
method: 'POST',
endpoint: 'api/categories',
body: newGroup,
});
closeModal();
}
}}
>
Save
</Button>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
closeModal();
}}
>
Cancel
</Button>
</Group>
</Stack>
</Modal.Body>
</Modal.Content>
</Modal.Root>
<Group align='center'>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
Bookmarks
</Text>
<Popover withArrow withOverlay withinPortal={false}>
<Popover.Target>
<ActionIcon
className={actionIconClasses.settingsTooltip}
classNames={actionIconClasses}
>
<FiHelpCircle />
</ActionIcon>
</Popover.Target>
<Popover.Dropdown
style={{
color: theme.primaryColor,
backgroundColor: theme.backgroundColor,
}}
>
<Stack>
<Text className={textClasses.settingsTooltip} classNames={textClasses}>
{'Bookmarks are the links that will be displayed on the homepage.'}
</Text>
<Highlight
ta={'center'}
highlight={''}
className={textClasses.settingsTooltip}
classNames={textClasses}
highlightStyles={{
backgroundImage:
'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
fontWeight: 700,
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
>
{''}
</Highlight>
</Stack>
</Popover.Dropdown>
</Popover>
<Button
className={buttonClasses.tableButton}
classNames={buttonClasses}
onClick={openModal}
>
<FiPlus />
</Button>
<TextInput
className={textInputClasses.settingsItem}
classNames={textInputClasses}
autoFocus
placeholder='Search...'
value={searchValue}
onInput={(event: any) => {
setSearchValue(event.target.value);
}}
/>
</Group>
<Stack w={'100%'} align='center'>
<Group w={'75%'} align='start'>
{groups?.map((group: any) => (
<DebouncedGroupSettingsItem
key={group.id}
bookmarkGroup={group}
bookmarks={bookmarks.filter((a: any) => a.category === group.categoryName)}
/>
))}
</Group>
</Stack>
</Stack>
);
};