App and sorting updates

src/pages/settings/components/Applications/AppSettingsItem.tsx

@@ -1,74 +1,91 @@
 import { Icon } from '@iconify/react';
-import { Box, Stack, Text } from '@mantine/core';
+import { ActionIcon, Box, Stack, Text, Tooltip } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { useState } from 'react';
-import { boxClasses, textClasses } from 'styles';
+import { FiAlertCircle } from 'react-icons/fi';
+import { actionIconClasses, boxClasses, textClasses } from 'styles';
 
-function AppSettingsItem({ url, icon, name }: any) {
+function AppSettingsItem({ url, icon, name, enabled }: any) {
 	const [textDecoration, setTextDecoration] = useState<string>('none');
 	const [hover, setHover] = useState<boolean>(false);
-	const { isMobile } = useCommonHooks();
+	const { isMobile, theme } = useCommonHooks();
 	return (
-		<Box
-			component='a'
-			onMouseOver={() => {
-				setTextDecoration('underline');
-				setHover(true);
-			}}
-			onMouseOut={() => {
-				setTextDecoration('none');
-				setHover(false);
-			}}
-			className={boxClasses.appItemBox}
-		>
-			{hover && (
-				<svg
-					style={{ position: 'absolute', borderRadius: '6px' }}
-					height='100%'
-					width='100%'
-					xmlns='http://www.w3.org/2000/svg'
-				>
-					<rect rx='16' ry='16' height='100%' width='100%' strokeLinejoin='round' />
-				</svg>
+		<>
+			{enabled === 0 && (
+				<Tooltip label={<Text c={theme.primaryColor}>This app is disabled</Text>}>
+					<ActionIcon
+						className={actionIconClasses.settingsTooltip}
+						classNames={actionIconClasses}
+						pos={'absolute'}
+						size={'xl'}
+						variant='subtle'
+						style={{ zIndex: 1 }}
+					>
+						<FiAlertCircle color='red' />
+					</ActionIcon>
+				</Tooltip>
 			)}
-			<Stack
-				align={isMobile ? 'center' : undefined}
-				justify={isMobile ? 'center' : undefined}
-				style={{
-					height: '128px',
-					width: isMobile ? '100%' : undefined,
-					marginRight: isMobile ? '0' : '1em',
-					marginLeft: isMobile ? '0' : '2em',
-					paddingTop: isMobile ? '0' : '32px',
+			<Box
+				component='a'
+				onMouseOver={() => {
+					setTextDecoration('underline');
+					setHover(true);
 				}}
-			>
-				<Icon icon={`mdi:${icon}`} height={64} width={64} />
-			</Stack>
-			<Stack
-				style={{
-					display: 'flex',
-					flexDirection: 'column',
-					justifyContent: 'center',
-					flex: 1,
-					overflow: 'hidden',
-					gap: 0,
+				onMouseOut={() => {
+					setTextDecoration('none');
+					setHover(false);
 				}}
+				className={boxClasses.appItemBox}
 			>
-				<Text fz={22} className={textClasses.appName} classNames={textClasses}>
-					{name}
-				</Text>
-				<Text
-					fz={16}
-					className={textClasses.appUrl}
-					classNames={textClasses}
+				{hover && (
+					<svg
+						style={{ position: 'absolute', borderRadius: '6px' }}
+						height='100%'
+						width='100%'
+						xmlns='http://www.w3.org/2000/svg'
+					>
+						<rect rx='16' ry='16' height='100%' width='100%' strokeLinejoin='round' />
+					</svg>
+				)}
+				<Stack
+					align={isMobile ? 'center' : undefined}
+					justify={isMobile ? 'center' : undefined}
 					style={{
-						textDecoration: textDecoration,
+						height: '128px',
+						width: isMobile ? '100%' : undefined,
+						marginRight: isMobile ? '0' : '1em',
+						marginLeft: isMobile ? '0' : '2em',
+						paddingTop: isMobile ? '0' : '32px',
 					}}
 				>
-					{url}
-				</Text>
-			</Stack>
-		</Box>
+					<Icon icon={`mdi:${icon}`} height={64} width={64} />
+				</Stack>
+				<Stack
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						justifyContent: 'center',
+						flex: 1,
+						overflow: 'hidden',
+						gap: 0,
+					}}
+				>
+					<Text fz={22} className={textClasses.appName} classNames={textClasses}>
+						{name}
+					</Text>
+					<Text
+						fz={16}
+						className={textClasses.appUrl}
+						classNames={textClasses}
+						style={{
+							textDecoration: textDecoration,
+						}}
+					>
+						{url}
+					</Text>
+				</Stack>
+			</Box>
+		</>
 	);
 }
 

src/pages/settings/components/Applications/Applications.tsx

@@ -1,3 +1,4 @@
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import {
 	ActionIcon,
 	Box,
@@ -11,6 +12,7 @@ import {
 	Modal,
 	Popover,
 	Stack,
+	Switch,
 	Text,
 	TextInput,
 } from '@mantine/core';
@@ -36,19 +38,50 @@ const ApplicationSettings = () => {
 		endpoint: endpoint,
 	});
 	const [applicationData, setApplicationData] = useState<Application[]>([]);
+	const [applicationList, setApplicationList] = useState<Application[]>([]);
 	const { theme, isMobile, modalStyle } = useCommonHooks();
 	const [newApplication, setNewApplication] = useState<Application>({
-		id: undefined,
+		id: null,
 		name: '',
 		url: '',
 		icon: '',
 		baseUrl: '',
 		filterName: '',
 		index: 0,
+		enabled: 1,
 	});
 	const { mutateAsync } = useMutationAPI();
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
+	const [dragging, setDragging] = useState(false);
+
+	const reorder = (list: any, startIndex: any, endIndex: any) => {
+		const result = Array.from(list);
+		const [removed]: any = result.splice(startIndex, 1);
+		result.splice(endIndex, 0, removed);
+		return result;
+	};
+
+	function onDragEnd(result: any) {
+		if (!result.destination) {
+			return;
+		}
+
+		if (result.destination.index === result.source.index) {
+			return;
+		}
+
+		const items = reorder(applicationData, result.source.index, result.destination.index);
+		setApplicationList(
+			items.map((item: any, index: number) => {
+				return {
+					...item,
+					index: index,
+				};
+			}),
+		);
+	}
+
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 
 	useEffect(() => {
@@ -58,11 +91,21 @@ const ApplicationSettings = () => {
 					.filter((a: Application) =>
 						a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
 					)
-					.sort((a: Application, b: Application) => (a.name > b.name ? 1 : -1)),
+					.sort((a: Application, b: Application) => (a.index > b.index ? 1 : -1)),
 			);
 		}
 	}, [apps, isAppsFetching, debouncedSearch]);
 
+	useEffect(() => {
+		if (applicationList.length > 0 && applicationList !== applicationData) {
+			mutateAsync({
+				method: 'PATCH',
+				endpoint: 'api/applicationOrder',
+				body: applicationList,
+			});
+		}
+	}, [applicationList]);
+
 	return (
 		<Stack w={'100%'}>
 			<Modal.Root
@@ -266,33 +309,132 @@ const ApplicationSettings = () => {
 						setSearchValue(event.target.value);
 					}}
 				/>
+				<Switch
+					label={<Text c={theme.primaryColor}>Reorder</Text>}
+					labelPosition='left'
+					pos={'absolute'}
+					right={isMobile ? '2rem' : '1rem'}
+					top={isMobile ? '10rem' : undefined}
+					onChange={(e) => {
+						setDragging(e.target.checked);
+					}}
+					color={theme.primaryColor}
+					styles={{
+						label: {
+							color: theme.primaryColor,
+							top: isMobile ? -22 : 0,
+							left: isMobile ? -8 : 0,
+							position: isMobile ? 'absolute' : undefined,
+						},
+					}}
+				/>
 			</Group>
-			<Stack w={'100%'} align='center'>
-				<Grid columns={18} w={'75%'}>
-					{applicationData?.map((application: Application) => (
-						<GridCol span={6} key={application.id}>
-							<Popover withArrow withOverlay withinPortal={false}>
-								<Popover.Target>
-									<Box
-										onClick={(e) => {
-											e.stopPropagation();
-										}}
-									>
-										<AppSettingsItem
-											url={application.url}
-											icon={application.icon}
-											name={application.name}
-										/>
-									</Box>
-								</Popover.Target>
-								<Popover.Dropdown>
-									<DebouncedApplication application={application} />
-								</Popover.Dropdown>
-							</Popover>
-						</GridCol>
-					))}
-				</Grid>
-			</Stack>
+			{dragging ? (
+				<DragDropContext onDragEnd={onDragEnd}>
+					<Stack w={'100%'} align='center'>
+						<Droppable droppableId={'groupList'}>
+							{(provided) => (
+								<Stack
+									w={'75%'}
+									align='center'
+									justify='center'
+									ref={provided.innerRef}
+									{...provided.droppableProps}
+								>
+									{applicationData?.map((app: Application) => (
+										<Draggable
+											key={app.id}
+											draggableId={`${app.id}`}
+											index={Number(app.index)}
+										>
+											{(provided) => (
+												<Box
+													ref={provided.innerRef}
+													{...provided.draggableProps}
+													{...provided.dragHandleProps}
+												>
+													<Card
+														w={'400px'}
+														style={{
+															backgroundColor: theme.searchColor,
+															border: '1px solid var(--color-border)',
+															borderRadius: '8px',
+														}}
+													>
+														<Group gap={0} align='center' justify='space-between'>
+															<Stack gap={0}>
+																<Text c={theme.accentColor} fz={14}>
+																	Name
+																</Text>
+																<Text
+																	p={4}
+																	style={{
+																		borderRadius: '4px',
+																		paddingLeft: '8px',
+																		color: theme.primaryColor,
+																		backgroundColor: theme.searchColor,
+																	}}
+																>
+																	{app.name}
+																</Text>
+															</Stack>
+															<Stack gap={0}>
+																<Text c={theme.accentColor} fz={14}>
+																	Filter Name
+																</Text>
+																<Text
+																	p={4}
+																	style={{
+																		borderRadius: '4px',
+																		paddingLeft: '8px',
+																		color: theme.primaryColor,
+																		backgroundColor: theme.searchColor,
+																	}}
+																>
+																	{app.filterName}
+																</Text>
+															</Stack>
+														</Group>
+													</Card>
+												</Box>
+											)}
+										</Draggable>
+									))}
+									{provided.placeholder}
+								</Stack>
+							)}
+						</Droppable>
+					</Stack>
+				</DragDropContext>
+			) : (
+				<Stack w={'100%'} align='center'>
+					<Grid columns={18} w={'75%'}>
+						{applicationData?.map((application: Application) => (
+							<GridCol span={6} key={application.id}>
+								<Popover withArrow withOverlay withinPortal={false}>
+									<Popover.Target>
+										<Box
+											onClick={(e) => {
+												e.stopPropagation();
+											}}
+										>
+											<AppSettingsItem
+												url={application.url}
+												icon={application.icon}
+												name={application.name}
+												enabled={application.enabled}
+											/>
+										</Box>
+									</Popover.Target>
+									<Popover.Dropdown>
+										<DebouncedApplication application={application} />
+									</Popover.Dropdown>
+								</Popover>
+							</GridCol>
+						))}
+					</Grid>
+				</Stack>
+			)}
 		</Stack>
 	);
 };

src/pages/settings/components/Applications/DebouncedApplication.tsx

@@ -5,6 +5,7 @@ import {
 	Group,
 	Modal,
 	Stack,
+	Switch,
 	Text,
 	TextInput,
 	Tooltip,
@@ -36,7 +37,6 @@ function DebouncedApplication({ application }: { application: Application }) {
 			setApp(update);
 		}
 	}, [update]);
-
 	return (
 		<Card className={cardClasses.settingsItem} classNames={cardClasses}>
 			<Modal.Root
@@ -114,6 +114,27 @@ function DebouncedApplication({ application }: { application: Application }) {
 					<IconTrash />
 				</ActionIcon>
 			</Tooltip>
+			<Tooltip
+				color={theme.primaryColor}
+				bd={`solid 1px ${theme.borderColor}`}
+				label={'Enabled'}
+			>
+				<Switch
+					label={<Text c={theme.primaryColor}>Enabled</Text>}
+					labelPosition='left'
+					pos={'absolute'}
+					left={16}
+					defaultChecked={app.enabled === 1}
+					defaultValue={app.enabled}
+					onChange={(event) => {
+						setUpdate({
+							...app,
+							enabled: event.target.checked ? 1 : 0,
+						});
+					}}
+					color={theme.primaryColor}
+				/>
+			</Tooltip>
 			<Group w={'100%'} justify='center'>
 				<TextInput
 					label={'Name'}