Theming working

src/pages/settings/components/Themes.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useQueryAPI } from "../../../hooks/useAPI";
+import { useMutationAPI, useQueryAPI } from "../../../hooks/useAPI";
 import {
 	ActionIcon,
 	Button,
@@ -7,22 +7,27 @@ import {
 	ColorPicker,
 	ColorSwatch,
 	Divider,
+	Grid,
 	Group,
 	Modal,
 	SimpleGrid,
 	Stack,
 	Text,
+	TextInput,
 } from "@mantine/core";
-import { FiEdit } from "react-icons/fi";
+import { FiEdit, FiPlus, FiSave, FiTrash, FiX } from "react-icons/fi";
 import { useDisclosure, useLocalStorage } from "@mantine/hooks";
 import "@mantine/core/styles/ModalBase.css";
 import "@mantine/core/styles/Modal.css";
 import { actionIconClasses, modalClasses, textClasses } from "../../../styles";
 import ThemeModalContent from "./ThemeModalContent";
+import { modals } from "@mantine/modals";
 function ThemesSettings({ theme }: any) {
 	const [opened, { open, close }] = useDisclosure(false);
-    const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
-    const [colorValue, onChange] = useState('#000000');
+	const [pickerOpen, { open: openPicker, close: closePicker }] =
+		useDisclosure(false);
+	const [colorId, setColorId] = useState<string>("");
+	const [colorValue, setColorValue] = useState("#000000");
 	const [value, setValue] = useLocalStorage<any>({
 		key: "theme",
 		defaultValue: {},
@@ -32,6 +37,10 @@ function ThemesSettings({ theme }: any) {
 	});
 	const [themesList, setThemesList] = useState([]);
 	const [selectedTheme, setSelectedTheme] = useState<any>({});
+	const { mutateAsync: createTheme, isPending: isCreatingTheme } =
+		useMutationAPI();
+	const { mutateAsync: deleteTheme, isPending: isDeletingTheme } =
+		useMutationAPI();
 	useEffect(() => {
 		if (isFetched) {
 			setThemesList(data);
@@ -43,10 +52,33 @@ function ThemesSettings({ theme }: any) {
 		open();
 	};
 
-    const handleClose = () => {
-        close();
-        closePicker();
-    };
+	const handleClose = () => {
+		close();
+		closePicker();
+	};
+
+	const handleSaveTheme = () => {
+		createTheme({
+			method: selectedTheme.id === undefined ? "POST" : "PATCH",
+			endpoint: "api/themes",
+			body: selectedTheme,
+		});
+		close();
+	};
+
+	const openDeleteConfirmModal = (theme: any) =>
+		modals.openConfirmModal({
+			title: "Are you sure you want to delete this theme?",
+			labels: { confirm: "Delete", cancel: "Cancel" },
+			confirmProps: { color: "red" },
+			onConfirm: () =>
+				deleteTheme({ method: "DELETE", endpoint: "api/themes", body: theme }),
+		});
+
+	const handleDeleteTheme = (theme: any) => {
+		openDeleteConfirmModal(theme);
+		close();
+	};
 
 	return (
 		<>
@@ -72,87 +104,247 @@ function ThemesSettings({ theme }: any) {
 					</Modal.Header>
 					<Modal.Body p={"2rem"}>
 						<ThemeModalContent selectedTheme={selectedTheme} />
-                        <Divider color="black" my="sm" />
-                        <Group w={"100%"} h={"100%"} gap={0}>
-                            <Stack w={"50%"}>
-                                <Group c={'black'} justify="space-between">
-                                    <Text>Primary Color</Text>
-                                    <ColorSwatch onClick={openPicker} radius={"sm"} w={"100px"} color={selectedTheme.colortextpri} />
-                                </Group>
-                                <Group c={'black'} justify="space-between">
-                                    <Text>Accent Color</Text>
-                                    <ColorSwatch radius={"sm"} w={"100px"} color={selectedTheme.colortextacc} />
-                                </Group>
-                                <Group c={'black'} justify="space-between">
-                                    <Text>Background Color</Text>
-                                    <ColorSwatch radius={"sm"} w={"100px"} color={selectedTheme.colorbackground} />
-                                </Group>
-                                <Group c={'black'} justify="space-between">
-                                    <Text>Border Color</Text>
-                                    <ColorSwatch radius={"sm"} w={"100px"} color={selectedTheme.colorborder} />
-                                </Group>
-                                <Group c={'black'} justify="space-between">
-                                    <Text>Search Background Color</Text>
-                                    <ColorSwatch radius={"sm"} w={"100px"} color={selectedTheme.colorsearchbackground} />
-                                </Group>
-                            </Stack>
-                            <Stack h={"100%"} w={'50%'} align="center" justify="center">
-                                {pickerOpen ? (
-                                    <>
-                                        <ColorPicker value={colorValue} onChange={onChange}/>
-                                        <Group><Text c={'black'}>{colorValue}</Text><Button onClick={() => {setSelectedTheme({ ...selectedTheme, colorbackground: colorValue }); closePicker();}} c={'white'} bg={'forestgreen'}>Save</Button></Group>
-                                    </>
-                                ) : (
-                                    <Card bg={'#0002'} h={"100%"} w={"90%"}>
-                                        <Text c="black">
-                                            Pick a swatch to edit the color.
-                                        </Text>
-                                    </Card>
-                                )}
-                            </Stack>
-                        </Group>
+						<Divider color="black" my="sm" />
+						<TextInput
+							label="Theme Name"
+							value={selectedTheme.name}
+							onChange={(e) =>
+								setSelectedTheme({ ...selectedTheme, name: e.target.value })
+							}
+							styles={{
+								label: {
+									color: "black",
+								},
+								input: {
+									color: "black",
+									backgroundColor: "white",
+								},
+							}}
+						/>
+						<Divider color="black" my="sm" />
+						<Group w={"100%"} h={"100%"} gap={0}>
+							<Stack w={"50%"}>
+								<Group c={"black"} justify="space-between">
+									<Text>Primary Color</Text>
+									<ColorSwatch
+										onClick={() => {
+											setColorId("primary");
+											openPicker();
+											setColorValue(selectedTheme.colortextpri);
+										}}
+										radius={"sm"}
+										w={"100px"}
+										color={selectedTheme.colortextpri}
+										style={{ cursor: "pointer" }}
+									/>
+								</Group>
+								<Group c={"black"} justify="space-between">
+									<Text>Accent Color</Text>
+									<ColorSwatch
+										onClick={() => {
+											setColorId("accent");
+											openPicker();
+											setColorValue(selectedTheme.colortextacc);
+										}}
+										radius={"sm"}
+										w={"100px"}
+										color={selectedTheme.colortextacc}
+										style={{ cursor: "pointer" }}
+									/>
+								</Group>
+								<Group c={"black"} justify="space-between">
+									<Text>Background Color</Text>
+									<ColorSwatch
+										onClick={() => {
+											setColorId("background");
+											openPicker();
+											setColorValue(selectedTheme.colorbackground);
+										}}
+										radius={"sm"}
+										w={"100px"}
+										color={selectedTheme.colorbackground}
+										style={{ cursor: "pointer" }}
+									/>
+								</Group>
+								<Group c={"black"} justify="space-between">
+									<Text>Border Color</Text>
+									<ColorSwatch
+										onClick={() => {
+											setColorId("border");
+											openPicker();
+											setColorValue(selectedTheme.colorborder);
+										}}
+										radius={"sm"}
+										w={"100px"}
+										color={selectedTheme.colorborder}
+										style={{ cursor: "pointer" }}
+									/>
+								</Group>
+								<Group c={"black"} justify="space-between">
+									<Text>Search Background Color</Text>
+									<ColorSwatch
+										onClick={() => {
+											setColorId("searchbackground");
+											openPicker();
+											setColorValue(selectedTheme.colorsearchbackground);
+										}}
+										radius={"sm"}
+										w={"100px"}
+										color={selectedTheme.colorsearchbackground}
+										style={{ cursor: "pointer" }}
+									/>
+								</Group>
+							</Stack>
+							<Stack h={"100%"} w={"50%"} align="center" justify="center">
+								{pickerOpen ? (
+									<>
+										<ColorPicker value={colorValue} onChange={setColorValue} />
+										<Group w={"75%"} justify="space-between">
+											<Text c={"black"}>{colorValue}</Text>
+											<Group>
+												<Button
+													color={"green"}
+													onClick={() => {
+														switch (colorId) {
+															case "primary":
+																setSelectedTheme({
+																	...selectedTheme,
+																	colortextpri: colorValue,
+																});
+																break;
+															case "accent":
+																setSelectedTheme({
+																	...selectedTheme,
+																	colortextacc: colorValue,
+																});
+																break;
+															case "background":
+																setSelectedTheme({
+																	...selectedTheme,
+																	colorbackground: colorValue,
+																});
+																break;
+															case "border":
+																setSelectedTheme({
+																	...selectedTheme,
+																	colorborder: colorValue,
+																});
+																break;
+															case "searchbackground":
+																setSelectedTheme({
+																	...selectedTheme,
+																	colorsearchbackground: colorValue,
+																});
+																break;
+														}
+														closePicker();
+													}}
+												>
+													<FiSave />
+												</Button>
+												<Button color={"red"} onClick={closePicker}>
+													<FiX />
+												</Button>
+											</Group>
+										</Group>
+									</>
+								) : (
+									<Card
+										bg={"#0002"}
+										h={"100%"}
+										w={"90%"}
+										style={{ alignItems: "center" }}
+									>
+										<Text c="black">Pick a swatch to edit the color.</Text>
+									</Card>
+								)}
+							</Stack>
+						</Group>
+						<Divider color="black" my="sm" />
+						<Group>
+							<Button color={"green"} onClick={handleSaveTheme}>
+								Save
+							</Button>
+							<Button color={"red"} onClick={close}>
+								Cancel
+							</Button>
+						</Group>
 					</Modal.Body>
 				</Modal.Content>
 			</Modal.Root>
 			<Stack h={"100%"} w={"100%"}>
-				<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
-					Themes
-				</Text>
-				<SimpleGrid cols={5}>
+				<Group>
+					<Text
+						className={textClasses.settingsSubTitle}
+						classNames={textClasses}
+					>
+						Themes
+					</Text>
+					<Button
+						onClick={() => {
+							setSelectedTheme({
+								id: undefined,
+								name: "default",
+								imagebackground: "none",
+								colorbackground: "#EEEEEE",
+								colorsearchbackground: "#00000033",
+								colortextpri: "#222222",
+								colortextacc: "#5c5c5c",
+								colorborder: "#5c5c5c",
+							});
+							open();
+						}}
+					>
+						<FiPlus />
+					</Button>
+				</Group>
+				<Group justify="center">
 					{themesList.map((theme: any) => (
-						<Stack key={theme.name}>
-							<Button
-								style={{
-									backgroundColor: theme.colorbackground,
-									border: `solid ${theme.colorborder}`,
-									color: theme.colortextpri,
-								}}
-								data-theme={theme.name}
-								onClick={() => {
-									setValue(theme.name);
-								}}
-							>
-								{theme.name}
-							</Button>
-							<Group justify="space-between">
+						<Stack key={theme.name} w={"300px"}>
+							<Group gap={0} justify="space-between">
+								<Button
+									w={"100%"}
+									h={"75px"}
+									style={{
+										backgroundColor: theme.colorbackground,
+										border: `solid ${theme.colorborder}`,
+										color: theme.colortextpri,
+									}}
+									data-theme={theme.name}
+									onClick={() => {
+										setValue(theme.name);
+									}}
+								>
+									{theme.name}
+								</Button>
+							</Group>
+							<Group justify="space-between" gap={0}>
 								<Group className="theme-palette">
+									<ActionIcon
+										className={actionIconClasses.editButton}
+										classNames={actionIconClasses}
+										onClick={() => handleOpen(theme)}
+									>
+										<FiEdit />
+									</ActionIcon>
 									<ColorSwatch color={theme.colorbackground} />
 									<ColorSwatch color={theme.colorsearchbackground} />
 									<ColorSwatch color={theme.colortextpri} />
 									<ColorSwatch color={theme.colortextacc} />
 									<ColorSwatch color={theme.colorborder} />
+
+									<ActionIcon
+										className={actionIconClasses.editButton}
+										classNames={actionIconClasses}
+										onClick={() => handleDeleteTheme(theme)}
+									>
+										<FiTrash color="red" />
+									</ActionIcon>
 								</Group>
-								<ActionIcon
-									className={actionIconClasses.editButton}
-									classNames={actionIconClasses}
-									onClick={() => handleOpen(theme)}
-								>
-									<FiEdit />
-								</ActionIcon>
 							</Group>
 						</Stack>
 					))}
-				</SimpleGrid>
+				</Group>
 			</Stack>
 		</>
 	);