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

233
src/components/DataTable/DataTable.tsx
View File

@@ -1,233 +0,0 @@
import { ActionIcon, Button, Flex, Text, Tooltip } from '@mantine/core';
import { modals } from '@mantine/modals';
import { IconEdit, IconTrash } from '@tabler/icons-react';
import { ThemeProvider } from 'components/ThemeProvider';
import { useCommonHooks, useMutationAPI } from 'hooks';
import {
type MRT_Row,
type MRT_TableOptions,
MantineReactTable,
useMantineReactTable,
} from 'mantine-react-table';
import { memo } from 'react';
import { FiPlus } from 'react-icons/fi';
import { actionIconClasses, buttonClasses, textInputClasses } from 'styles';
export function DataTableComponent({
tableName,
columns,
tableData,
isFetching,
isLoading,
endpoint,
}: {
tableName: string;
columns: any;
tableData: any;
isFetching: boolean;
isLoading: boolean;
endpoint: string;
}) {
const { theme } = useCommonHooks();
const { mutateAsync: createRow } = useMutationAPI();
const { mutateAsync: editRow } = useMutationAPI();
const { mutateAsync: deleteRow } = useMutationAPI();
const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
values,
exitCreatingMode,
}) => {
createRow({ method: 'POST', endpoint: endpoint, body: values });
exitCreatingMode();
};
const handleEditRow: MRT_TableOptions<any>['onEditingRowSave'] = async ({
values,
table,
row,
}) => {
editRow({ method: 'PATCH', endpoint: endpoint, body: { ...values, id: row.id } });
table.setEditingRow(null);
};
const openDeleteConfirmModal = (row: MRT_Row<any>) =>
modals.openConfirmModal({
title: (
<Text c={theme.primaryColor}>Are you sure you want to delete this user?</Text>
),
children: <Text c={theme.primaryColor}>Are you sure?</Text>,
labels: { confirm: 'Delete', cancel: 'Cancel' },
confirmProps: {
style: {
backgroundColor: 'var(--mantine-color-red-6)',
color: 'var(--mantine-color-white)',
},
},
cancelProps: { color: 'green' },
onConfirm: () =>
deleteRow({ method: 'DELETE', endpoint: endpoint, body: row.original }),
});
const table = useMantineReactTable({
columns: columns,
data: tableData,
enableFacetedValues: true,
enablePagination: false,
enableRowVirtualization: true,
enableEditing: true,
createDisplayMode: 'modal',
editDisplayMode: 'row',
enableBottomToolbar: false,
enableToolbarInternalActions: false,
positionGlobalFilter: 'right',
onCreatingRowSave: handleCreateRow,
onEditingRowSave: handleEditRow,
getRowId: (row: any) => row.id,
initialState: {
showLoadingOverlay: isLoading,
isLoading: isLoading,
},
state: {
showLoadingOverlay: isFetching,
isLoading: isLoading,
columnVisibility: { id: false, categoryIndex: false },
showGlobalFilter: tableName !== 'Personalization',
},
mantineSearchTextInputProps: {
classNames: textInputClasses,
className: textInputClasses.default,
},
mantinePaperProps: {
style: {
border: 'none',
boxShadow: 'none',
'--mrt-base-background-color': 'transparent',
'--mrt-row-hover-background-color': theme.searchColor,
color: 'var(--color-text-pri)',
},
},
mantineTableContainerProps: {
style: {
maxHeight: '700px',
borderRadius: '20px',
backgroundColor: theme.searchColor,
backdropFilter: theme.backgroundImage === 'none' ? undefined : 'blur(20px)',
fontSize: '18px',
},
},
mantineTableHeadProps: {
style: {
fontSize: '18px',
backgroundColor: theme.primaryColor,
color: theme.accentColor,
opacity: 1,
},
},
mantineTableBodyRowProps: {
style: {
fontSize: '18px',
borderBottom: 'none',
},
},
mantineEditTextInputProps: {
styles: {
wrapper: {
display: 'flex',
},
input: {
width: '100%',
border: 'none',
backgroundColor: `${theme.searchColor}`,
color: 'var(--color-text-pri)',
fontSize: '18px',
},
},
},
mantineFilterTextInputProps: {
classNames: textInputClasses,
className: textInputClasses.default,
},
mantineEditSelectProps: {
styles: {
input: {
color: theme.primaryColor,
fontSize: '18px',
backgroundColor: theme.searchColor,
border: 'none',
},
option: {
color: theme.primaryColor,
fontSize: '18px',
backgroundColor: 'transparent',
},
dropdown: {
backgroundColor: `${theme.backgroundColor} !important`,
},
},
},
displayColumnDefOptions: {
'mrt-row-actions': {
header: '',
minSize: 40,
},
},
renderRowActions: ({ row, table }) => (
<Flex gap='xs'>
<Tooltip
color={theme.primaryColor}
bd={`solid 1px ${theme.borderColor}`}
label={'Edit'}
>
<ActionIcon
className={actionIconClasses.editButton}
classNames={actionIconClasses}
onClick={() => table.setEditingRow(row)}
>
<IconEdit />
</ActionIcon>
</Tooltip>
<Tooltip
color={theme.primaryColor}
bd={`solid 1px ${theme.borderColor}`}
label={'Delete'}
>
<ActionIcon color='red' onClick={() => openDeleteConfirmModal(row)}>
<IconTrash />
</ActionIcon>
</Tooltip>
</Flex>
),
mantineCreateRowModalProps: {
styles: {
root: {
color: theme.primaryColor,
},
content: {
color: theme.primaryColor,
},
},
},
renderTopToolbarCustomActions: ({ table }) => {
return (
<>
{tableName !== 'Personalization' && (
<Button
className={buttonClasses.tableButton}
classNames={buttonClasses}
onClick={() => {
table.setCreatingRow(true);
}}
>
<FiPlus />
</Button>
)}
</>
);
},
});
return (
<ThemeProvider theme={theme}>
<MantineReactTable table={table} />
</ThemeProvider>
);
}
export const DataTable = memo(DataTableComponent);
export default DataTable;

86
src/components/DataTable/columns/ApplicationColumns.tsx
View File

@@ -1,86 +0,0 @@
import type { MRT_ColumnDef } from 'mantine-react-table';
import { useMemo } from 'react';
export function ApplicationColumns() {
const columns = useMemo<MRT_ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => {
if (row.id) {
return `${row.id}`;
}
return '';
},
enableEditing: false,
id: 'id',
header: 'ID',
size: 50,
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.name) {
return `${row.name}`;
}
return '';
},
id: 'name',
header: 'Name',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.url) {
return `${row.url}`;
}
return '';
},
id: 'url',
header: 'Url',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.icon) {
return `${row.icon}`;
}
return '';
},
id: 'icon',
header: 'Icon',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.baseUrl) {
return `${row.baseUrl}`;
}
return '';
},
id: 'baseUrl',
header: 'Base Url',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.filterName) {
return `${row.filterName}`;
}
return '';
},
id: 'filterName',
header: 'Filter Name',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
],
[],
);
return columns;
}

64
src/components/DataTable/columns/BookmarkColumns.tsx
View File

@@ -1,64 +0,0 @@
import type { MRT_ColumnDef } from 'mantine-react-table';
import { useMemo } from 'react';
export function BookmarkColumns(groups: any) {
const columns = useMemo<MRT_ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => {
if (row.id) {
return `${row.id}`;
}
return '';
},
enableEditing: false,
id: 'id',
header: 'ID',
size: 50,
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.name) {
return `${row.name}`;
}
return '';
},
id: 'name',
header: 'Name',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.url) {
return `${row.url}`;
}
return '';
},
id: 'url',
header: 'Url',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.category) {
return `${row.category}`;
}
return '';
},
id: 'category',
header: 'Category',
editVariant: 'select',
mantineEditSelectProps: { data: groups },
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
],
[groups],
);
return columns;
}

66
src/components/DataTable/columns/CategoryColumns.tsx
View File

@@ -1,66 +0,0 @@
import type { MRT_ColumnDef } from 'mantine-react-table';
import { useMemo } from 'react';
export function CategoryColumns() {
const columns = useMemo<MRT_ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => {
if (row.id) {
return `${row.id}`;
}
return '';
},
enableEditing: false,
id: 'id',
header: 'ID',
size: 50,
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.categoryName) {
return `${row.categoryName}`;
}
return '';
},
id: 'categoryName',
header: 'Name',
size: 50,
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.categoryIndex > -1) {
return `${row.categoryIndex}`;
}
return '';
},
enableEditing: false,
id: 'categoryIndex',
header: 'Index',
size: 50,
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.filterName) {
return `${row.filterName}`;
}
return '';
},
id: 'filterName',
header: 'Filter Name',
size: 50,
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
],
[],
);
return columns;
}

38
src/components/DataTable/columns/MessagesColumns.tsx
View File

@@ -1,38 +0,0 @@
import type { MRT_ColumnDef } from 'mantine-react-table';
import { useMemo } from 'react';
export function MessagesColumns() {
const columns = useMemo<MRT_ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => {
if (row.id) {
return `${row.id}`;
}
return '';
},
enableEditing: false,
id: 'id',
header: 'ID',
size: 50,
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.message) {
return `${row.message}`;
}
return '';
},
id: 'message',
header: 'Message',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
],
[],
);
return columns;
}

62
src/components/DataTable/columns/SearchProviderColumns.tsx
View File

@@ -1,62 +0,0 @@
import type { MRT_ColumnDef } from 'mantine-react-table';
import { useMemo } from 'react';
export function SearchProviderColumns() {
const columns = useMemo<MRT_ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => {
if (row.id) {
return `${row.id}`;
}
return '';
},
enableEditing: false,
id: 'id',
header: 'ID',
size: 50,
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.name) {
return `${row.name}`;
}
return '';
},
id: 'name',
header: 'Name',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.url) {
return `${row.url}`;
}
return '';
},
id: 'url',
header: 'Url',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.prefix) {
return `${row.prefix}`;
}
return '';
},
id: 'prefix',
header: 'Prefix',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
],
[],
);
return columns;
}

50
src/components/DataTable/columns/WolClientColumns.tsx
View File

@@ -1,50 +0,0 @@
import type { MRT_ColumnDef } from 'mantine-react-table';
import { useMemo } from 'react';
export function WolClientColumns() {
const columns = useMemo<MRT_ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => {
if (row.id) {
return `${row.id}`;
}
return '';
},
enableEditing: false,
id: 'id',
header: 'ID',
size: 50,
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.hostname) {
return `${row.hostname}`;
}
return '';
},
id: 'hostname',
header: 'Hostname',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.macAddress) {
return `${row.macAddress}`;
}
return '';
},
id: 'macAddress',
header: 'MAC Address',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
],
[],
);
return columns;
}

7
src/components/index.ts
View File

@@ -1,11 +1,4 @@
export { HelpModal } from './HelpModal/HelpModal';
export { WeatherModal } from './WeatherModal/WeatherModal';
export { DataTable } from './DataTable/DataTable';
export { ThemeProvider } from './ThemeProvider';
export { MainLayout } from './MainLayout';
export { ApplicationColumns } from './DataTable/columns/ApplicationColumns';
export { BookmarkColumns } from './DataTable/columns/BookmarkColumns';
export { CategoryColumns } from './DataTable/columns/CategoryColumns';
export { MessagesColumns } from './DataTable/columns/MessagesColumns';
export { SearchProviderColumns } from './DataTable/columns/SearchProviderColumns';
export { WolClientColumns } from './DataTable/columns/WolClientColumns';

8
src/pages/settings/Settings.tsx
View File

@@ -2,7 +2,6 @@ import { ActionIcon, Group, Stack, Tabs, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import {
FiArrowLeftCircle,
FiBook,
FiBookmark,
FiEdit,
FiGlobe,
@@ -15,7 +14,6 @@ import { useNavigate, useParams } from 'react-router-dom';
import { actionIconClasses, tabClasses, textClasses } from 'styles';
import Applications from './components/Applications/Applications';
import Bookmarks from './components/Bookmarks/Bookmarks';
import Categories from './components/Categories/Categories';
import Messages from './components/Messages/Messages';
import Personalization from './components/Personalization/Personalization';
import SearchProviders from './components/Search/SearchProviders';
@@ -66,9 +64,6 @@ export function Settings() {
<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='bookmarks'>
{isMobile ? <FiBookmark /> : 'Bookmarks'}
</Tabs.Tab>
<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='bookmarksCategories'>
{isMobile ? <FiBook /> : 'Categories'}
</Tabs.Tab>
<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='themes'>
{isMobile ? <FiEdit /> : 'Themes'}
</Tabs.Tab>
@@ -94,9 +89,6 @@ export function Settings() {
<Tabs.Panel value='bookmarks'>
<Bookmarks />
</Tabs.Panel>
<Tabs.Panel value='bookmarksCategories'>
<Categories />
</Tabs.Panel>
<Tabs.Panel value='themes'>
<Themes />
</Tabs.Panel>

2
src/pages/settings/components/Applications/DebouncedApplication.tsx
View File

@@ -60,7 +60,7 @@ function DebouncedApplication({ application, handleDelete }: any) {
<Modal.Overlay />
<Modal.Content>
<Modal.Header>
<Modal.Title>Add a new message</Modal.Title>
<Modal.Title>Delete Application</Modal.Title>
<Modal.CloseButton />
</Modal.Header>
<Modal.Body pb={'2rem'}>

39
src/pages/settings/components/Bookmarks/BookmarkSettingsItem.tsx Normal file
View File

@@ -0,0 +1,39 @@
import { ActionIcon, Box, Group, Text } from '@mantine/core';
import { useState } from 'react';
import { FiEdit } from 'react-icons/fi';
import { actionIconClasses } from 'styles';
function BookmarkSettingsItem({ bookmark }: any) {
const [hover, setHover] = useState(false);
return (
<Box
style={{
cursor: 'pointer',
borderRadius: '4px',
color: 'var(--color-text-pri)',
backgroundColor: 'var(--color-text-acc)',
padding: '8px',
}}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
>
<Group>
<Text>{bookmark.name}</Text>
{hover && (
<ActionIcon
className={actionIconClasses.editButton}
classNames={actionIconClasses}
style={{
position: 'absolute',
right: 24,
}}
>
<FiEdit />
</ActionIcon>
)}
</Group>
</Box>
);
}
export default BookmarkSettingsItem;

219
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>
<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>
<DataTable
tableName='Bookmarks'
columns={BookmarkColumns(groups)}
tableData={bookmarkData}
isFetching={linksIsFetching}
isLoading={linksIsLoading}
endpoint={endpoint}
<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>
);
};

170
src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx Normal file
View File

@@ -0,0 +1,170 @@
import {
ActionIcon,
Button,
Card,
Group,
Modal,
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 { cardClasses, modalClasses, textInputClasses } from 'styles';
function DebouncedBookmarkItem({ bookmarkItem, handleDelete }: any) {
const { theme } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
const [bookmark, setBookmark] = useState<any>(bookmarkItem);
const [update, setUpdate] = useState({});
const [debounced] = useDebouncedValue(update, 1000);
useEffect(() => {
if (Object.keys(debounced).length) {
mutateAsync({ method: 'PATCH', endpoint: 'api/links', body: debounced });
}
}, [debounced]);
useEffect(() => {
if (update !== bookmark && Object.keys(update).length) {
setBookmark(update);
}
}, [update]);
return (
<Card 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 style={{ zIndex: 999 }} />
<Modal.Content style={{ zIndex: 1000 }}>
<Modal.Header>
<Modal.Title>Delete Bookmark</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 bookmark?</Text>
<Text
style={{
fontWeight: 'bold',
fontSize: '20px',
padding: '8px',
margin: '8px',
borderRadius: '10px',
backgroundColor: 'var(--color-text-acc)',
color: 'var(--color-background)',
}}
>{`"${bookmark.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(bookmark);
closeModal();
}}
>
Delete
</Button>
<Button
color={'grey'}
styles={{ label: { color: 'black' } }}
onClick={() => {
closeModal();
}}
>
Cancel
</Button>
</Group>
</Stack>
</Modal.Body>
</Modal.Content>
</Modal.Root>
<Tooltip
color={theme.primaryColor}
bd={`solid 1px ${theme.borderColor}`}
label={'Delete'}
>
<ActionIcon
pos={'absolute'}
right={16}
color='red'
onClick={() => {
openModal();
}}
>
<IconTrash />
</ActionIcon>
</Tooltip>
<Group w={'100%'} justify='center'>
<TextInput
label={'Name'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={bookmark.name}
onChange={(event) => {
setUpdate({
...bookmark,
name: event.target.value,
});
}}
/>
<TextInput
label={'Category'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={bookmark.category}
onChange={(event) => {
setUpdate({
...bookmark,
category: event.target.value,
});
}}
/>
</Group>
<Group w={'100%'} justify='center'>
<TextInput
label={'URL'}
className={textInputClasses.settingsItem}
w={'100%'}
pt={16}
classNames={textInputClasses}
defaultValue={bookmark.url}
onChange={(event) => {
setUpdate({
...bookmark,
url: event.target.value,
});
}}
/>
</Group>
</Card>
);
}
export default DebouncedBookmarkItem;

358
src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx Normal file
View File

@@ -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;

43
src/pages/settings/components/Categories/Categories.tsx
View File

@@ -1,43 +0,0 @@
import { Stack, Text } from '@mantine/core';
import { CategoryColumns, DataTable } from 'components';
import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textClasses } from '../../../../styles';
const CategorySettings = () => {
const endpoint = 'api/categories';
const {
data: groupData,
isFetching: groupsIsFetching,
isLoading: groupsIsLoading,
isFetched: groupsIsFetched,
} = useQueryAPI({
endpoint: endpoint,
});
const [groups, setGroups] = useState([]);
useEffect(() => {
if (groupData && groupsIsFetched) {
const groupList = groupData?.map((category: any) => {
return category;
});
setGroups(groupList);
}
}, [groupData, groupsIsFetched]);
return (
<Stack>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
Categories
</Text>
<DataTable
tableName='Categories'
columns={CategoryColumns()}
tableData={groups ?? []}
isFetching={groupsIsFetching}
isLoading={groupsIsLoading}
endpoint={endpoint}
/>
</Stack>
);
};
export default CategorySettings;

7
src/pages/settings/components/Search/SearchProviders.tsx
View File

@@ -29,12 +29,7 @@ import SearchProviderSettingsItem from './SearchProviderSettingsItem';
const SearchProviderSettings = () => {
const endpoint = 'api/providers';
const {
data: providers,
isFetched: providersIsFetched,
isFetching: providersIsFetching,
isLoading: providersIsLoading,
} = useQueryAPI({
const { data: providers, isFetched: providersIsFetched } = useQueryAPI({
endpoint: endpoint,
});
const [providerData, setProviderData] = useState<any>([]);

1
src/pages/settings/components/Theming/ThemePlaylists.tsx
View File

@@ -75,7 +75,6 @@ function ThemePlaylists() {
Theme Playlists
</Text>
<Button
mb={'-1.5em'}
className={buttonClasses.tableButton}
classNames={buttonClasses}
onClick={() => {

1
src/pages/settings/components/Theming/Themes.tsx
View File

@@ -90,7 +90,6 @@ function ThemesSettings() {
Themes
</Text>
<Button
mb={'-1.5em'}
className={buttonClasses.tableButton}
classNames={buttonClasses}
onClick={() => {