New settings pages

2025-03-20 17:09:07 -05:00
parent cecdc84cf6
commit 321d620d3c
28 changed files with 529 additions and 228 deletions
--- a/src/pages/settings/components/Theming/ThemePlaylists.tsx
+++ b/src/pages/settings/components/Theming/ThemePlaylists.tsx
@@ -0,0 +1,184 @@
+import { Box, Button, Group, Stack, Text } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { modals } from '@mantine/modals';
+import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
+import { useState } from 'react';
+import { FiChevronRight, FiPlus } from 'react-icons/fi';
+import { buttonClasses, textClasses } from 'styles';
+import ThemePlaylistCard from './ThemePlaylistCard';
+import ThemePlaylistModal from './ThemePlaylistModal';
+
+function ThemePlaylists() {
+	const { data: allThemes } = useQueryAPI({
+		endpoint: 'api/themes',
+	});
+	const { data: themePlaylists } = useQueryAPI({
+		endpoint: 'api/themePlaylists',
+	});
+	const { mutateAsync: createPlaylist } = useMutationAPI();
+	const { mutateAsync: deletePlaylist } = useMutationAPI();
+	const [opened, { open, close }] = useDisclosure(false);
+	const [selectedPlaylist, setSelectedPlaylist] = useState<any>({});
+	const { currentThemePlaylist, setCurrentThemePlaylist, theme } = useCommonHooks();
+
+	const handleOpen = (playlist: any) => {
+		setSelectedPlaylist(playlist);
+		open();
+	};
+
+	const handleClose = () => {
+		close();
+	};
+
+	const handleSavePlaylist = () => {
+		createPlaylist({
+			method: selectedPlaylist.id === undefined ? 'POST' : 'PATCH',
+			endpoint: 'api/themePlaylists',
+			body: selectedPlaylist,
+		});
+		close();
+	};
+
+	const openDeleteConfirmModal = (playlist: any) =>
+		modals.openConfirmModal({
+			title: 'Are you sure you want to delete this theme playlist?',
+			labels: { confirm: 'Delete', cancel: 'Cancel' },
+			confirmProps: { color: 'red' },
+			onConfirm: () =>
+				deletePlaylist({
+					method: 'DELETE',
+					endpoint: 'api/themePlaylists',
+					body: playlist,
+				}),
+		});
+
+	const handleDeletePlaylist = (playlist: any) => {
+		openDeleteConfirmModal(playlist);
+		close();
+	};
+
+	return (
+		<>
+			<ThemePlaylistModal
+				opened={opened}
+				handleClose={handleClose}
+				selectedPlaylist={selectedPlaylist}
+				setSelectedPlaylist={setSelectedPlaylist}
+				handleSavePlaylist={handleSavePlaylist}
+				allThemes={allThemes}
+				createPlaylist={createPlaylist}
+			/>
+			<Stack h={'100%'} w={'100%'}>
+				<Group w={'100%'} justify='space-between'>
+					<Group>
+						<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+							Theme Playlists
+						</Text>
+						<Button
+							mb={'-1.5em'}
+							className={buttonClasses.tableButton}
+							classNames={buttonClasses}
+							onClick={() => {
+								setSelectedPlaylist({
+									name: 'New Playlist',
+									themeList: '[]',
+								});
+								open();
+							}}
+						>
+							<FiPlus />
+						</Button>
+					</Group>
+				</Group>
+				<Group justify='center' align='center' pos={'relative'}>
+					<Text p={0} className={textClasses.settingsSubTitle} classNames={textClasses}>
+						Defaults
+					</Text>
+				</Group>
+				<Group justify='center' align='center' pos={'relative'}>
+					{themePlaylists
+						?.filter((playlist: any) => playlist.default === 1)
+						.map((cardPlaylist: any) => {
+							return (
+								<Group key={cardPlaylist.name} pos={'relative'}>
+									{cardPlaylist.name === currentThemePlaylist && (
+										<FiChevronRight
+											style={{
+												position: 'absolute',
+												left: -14,
+												zIndex: 10,
+												fontSize: '2em',
+												fontWeight: 'bold',
+												borderRadius: '50%',
+												backgroundColor: theme.borderColor,
+												color:
+													theme.borderColor === theme.primaryColor
+														? theme.accentColor
+														: theme.primaryColor,
+											}}
+										/>
+									)}
+									<Box>
+										<ThemePlaylistCard
+											cardPlaylist={cardPlaylist}
+											handleOpen={handleOpen}
+											currentThemePlaylist={currentThemePlaylist}
+											setCurrentThemePlaylist={setCurrentThemePlaylist}
+											handleDeletePlaylist={handleDeletePlaylist}
+											allThemes={allThemes}
+											createPlaylist={createPlaylist}
+										/>
+									</Box>
+								</Group>
+							);
+						})}
+				</Group>
+				<Group justify='center' align='center' pos={'relative'}>
+					<Text p={0} className={textClasses.settingsSubTitle} classNames={textClasses}>
+						User Made
+					</Text>
+				</Group>
+				<Group justify='center' align='center' pos={'relative'}>
+					{themePlaylists
+						?.filter((playlist: any) => playlist.default === 0)
+						.map((cardPlaylist: any) => {
+							return (
+								<Group key={cardPlaylist.name} pos={'relative'}>
+									{cardPlaylist.name === currentThemePlaylist && (
+										<FiChevronRight
+											style={{
+												position: 'absolute',
+												left: -14,
+												zIndex: 10,
+												fontSize: '2em',
+												fontWeight: 'bold',
+												borderRadius: '50%',
+												backgroundColor: theme.borderColor,
+												color:
+													theme.borderColor === theme.primaryColor
+														? theme.accentColor
+														: theme.primaryColor,
+											}}
+										/>
+									)}
+									<Box>
+										<ThemePlaylistCard
+											cardPlaylist={cardPlaylist}
+											handleOpen={handleOpen}
+											currentThemePlaylist={currentThemePlaylist}
+											setCurrentThemePlaylist={setCurrentThemePlaylist}
+											handleDeletePlaylist={handleDeletePlaylist}
+											allThemes={allThemes}
+											createPlaylist={createPlaylist}
+										/>
+									</Box>
+								</Group>
+							);
+						})}
+				</Group>
+			</Stack>
+		</>
+	);
+}
+
+export default ThemePlaylists;