From 50fec41aba87dcbfffcc8ada56014a96c4e0e46f Mon Sep 17 00:00:00 2001
From: Sean Edmunds <sean.edmunds@cottonteam.com>
Date: Fri, 21 Mar 2025 11:05:01 -0500
Subject: [PATCH] Search Provider settings updates

---
 .../Search/DebouncedSearchProvider.tsx        | 169 ++++++++++++
 .../Search/SearchProviderSettingsItem.tsx     |  26 ++
 .../components/Search/SearchProviders.tsx     | 246 ++++++++++++++++--
 .../settings/components/WoL/WolClients.tsx    |  14 +-
 4 files changed, 426 insertions(+), 29 deletions(-)
 create mode 100644 src/pages/settings/components/Search/DebouncedSearchProvider.tsx
 create mode 100644 src/pages/settings/components/Search/SearchProviderSettingsItem.tsx

diff --git a/src/pages/settings/components/Search/DebouncedSearchProvider.tsx b/src/pages/settings/components/Search/DebouncedSearchProvider.tsx
new file mode 100644
index 0000000..e27e195
--- /dev/null
+++ b/src/pages/settings/components/Search/DebouncedSearchProvider.tsx
@@ -0,0 +1,169 @@
+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 DebouncedSearchProvider({ searchProvider, handleDelete }: any) {
+	const { theme } = useCommonHooks();
+	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
+	const { mutateAsync } = useMutationAPI();
+
+	const [provider, setProvider] = useState<any>(searchProvider);
+	const [update, setUpdate] = useState({});
+	const [debounced] = useDebouncedValue(update, 1000);
+
+	useEffect(() => {
+		if (Object.keys(debounced).length) {
+			mutateAsync({ method: 'PATCH', endpoint: 'api/providers', body: debounced });
+		}
+	}, [debounced]);
+
+	useEffect(() => {
+		if (update !== provider && Object.keys(update).length) {
+			setProvider(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 />
+				<Modal.Content>
+					<Modal.Header>
+						<Modal.Title>Delete Client</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 Search Provider?</Text>
+							<Text
+								style={{
+									fontWeight: 'bold',
+									fontSize: '20px',
+									padding: '8px',
+									margin: '8px',
+									borderRadius: '10px',
+									backgroundColor: 'var(--color-text-acc)',
+									color: 'var(--color-background)',
+								}}
+							>{`"${provider.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(provider);
+										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>
+			<Stack>
+				<Group w={'100%'} justify='center'>
+					<TextInput
+						label={'Name'}
+						className={textInputClasses.settingsItem}
+						pt={16}
+						classNames={textInputClasses}
+						defaultValue={provider.name}
+						onChange={(event) => {
+							setUpdate({
+								...provider,
+								name: event.target.value,
+							});
+						}}
+					/>
+					<TextInput
+						label={'Prefix'}
+						className={textInputClasses.settingsItem}
+						pt={16}
+						classNames={textInputClasses}
+						defaultValue={provider.prefix}
+						onChange={(event) => {
+							setUpdate({
+								...provider,
+								prefix: event.target.value,
+							});
+						}}
+					/>
+				</Group>
+				<TextInput
+					label={'Url'}
+					className={textInputClasses.settingsItem}
+					pt={16}
+					classNames={textInputClasses}
+					defaultValue={provider.url}
+					onChange={(event) => {
+						setUpdate({
+							...provider,
+							url: event.target.value,
+						});
+					}}
+				/>
+			</Stack>
+		</Card>
+	);
+}
+
+export default DebouncedSearchProvider;
diff --git a/src/pages/settings/components/Search/SearchProviderSettingsItem.tsx b/src/pages/settings/components/Search/SearchProviderSettingsItem.tsx
new file mode 100644
index 0000000..72c93ff
--- /dev/null
+++ b/src/pages/settings/components/Search/SearchProviderSettingsItem.tsx
@@ -0,0 +1,26 @@
+import { Card, Stack, Text } from '@mantine/core';
+import HintItem from 'components/HelpModal/HintItem';
+import { cardClasses } from 'styles';
+
+function SearchProviderSettingsItem({ provider }: any) {
+	return (
+		<Card className={cardClasses.settingsItemHover} classNames={cardClasses}>
+			<Stack gap={0} w={'100%'} align='center'>
+				<HintItem command={provider.prefix} name={provider.name} />
+				<Text
+					w={'90%'}
+					style={{
+						overflow: 'hidden',
+						whiteSpace: 'nowrap',
+						textOverflow: 'ellipsis',
+						textAlign: 'center',
+					}}
+				>
+					{provider.url}
+				</Text>
+			</Stack>
+		</Card>
+	);
+}
+
+export default SearchProviderSettingsItem;
diff --git a/src/pages/settings/components/Search/SearchProviders.tsx b/src/pages/settings/components/Search/SearchProviders.tsx
index 56f3546..5d3d9ff 100644
--- a/src/pages/settings/components/Search/SearchProviders.tsx
+++ b/src/pages/settings/components/Search/SearchProviders.tsx
@@ -1,8 +1,31 @@
-import { Stack, Text } from '@mantine/core';
-import { DataTable, SearchProviderColumns } from 'components';
-import { useQueryAPI } from 'hooks';
+import {
+	ActionIcon,
+	Box,
+	Button,
+	Divider,
+	Grid,
+	GridCol,
+	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 DebouncedSearchProvider from './DebouncedSearchProvider';
+import SearchProviderSettingsItem from './SearchProviderSettingsItem';
 
 const SearchProviderSettings = () => {
 	const endpoint = 'api/providers';
@@ -15,26 +38,213 @@ const SearchProviderSettings = () => {
 		endpoint: endpoint,
 	});
 	const [providerData, setProviderData] = useState<any>([]);
-
+	const { theme } = useCommonHooks();
+	const { mutateAsync } = useMutationAPI();
+	const [newProvider, setNewProvider] = useState<any>({});
+	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
+	const [searchValue, setSearchValue] = useState('');
+	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
+	const handleDelete = (application: any) => {
+		mutateAsync({ method: 'DELETE', endpoint: endpoint, body: application });
+	};
 	useEffect(() => {
 		if (providers && providersIsFetched) {
-			setProviderData(providers);
+			setProviderData(
+				providers.filter((a: any) =>
+					a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
+				),
+			);
 		}
-	}, [providers, providersIsFetched]);
+	}, [providers, providersIsFetched, debouncedSearch]);
 
 	return (
 		<Stack>
-			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
-				Search Providers
-			</Text>
-			<DataTable
-				tableName='Categories'
-				columns={SearchProviderColumns()}
-				tableData={providerData}
-				isFetching={providersIsFetching}
-				isLoading={providersIsLoading}
-				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 application</Modal.Title>
+						<Modal.CloseButton />
+					</Modal.Header>
+					<Modal.Body pb={'2rem'}>
+						<Stack gap={0} w={'100%'} align='center'>
+							<Stack>
+								<Group w={'100%'} justify='center'>
+									<TextInput
+										label={'Name'}
+										className={textInputClasses.settingsItem}
+										pt={16}
+										classNames={textInputClasses}
+										defaultValue={newProvider.name}
+										onChange={(event) => {
+											setNewProvider({
+												...newProvider,
+												name: event.target.value,
+											});
+										}}
+									/>
+									<TextInput
+										label={'Prefix'}
+										className={textInputClasses.settingsItem}
+										pt={16}
+										classNames={textInputClasses}
+										defaultValue={newProvider.prefix}
+										onChange={(event) => {
+											setNewProvider({
+												...newProvider,
+												prefix: event.target.value,
+											});
+										}}
+									/>
+								</Group>
+								<TextInput
+									label={'Url'}
+									className={textInputClasses.settingsItem}
+									pt={16}
+									classNames={textInputClasses}
+									defaultValue={newProvider.url}
+									onChange={(event) => {
+										setNewProvider({
+											...newProvider,
+											url: event.target.value,
+										});
+									}}
+								/>
+							</Stack>
+							<Divider color='black' my='sm' />
+							<Group pos={'absolute'} bottom={8}>
+								<Button
+									color={'green'}
+									styles={{ label: { color: 'black' } }}
+									onClick={() => {
+										if (newProvider) {
+											mutateAsync({
+												method: 'POST',
+												endpoint: endpoint,
+												body: newProvider,
+											});
+											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}>
+					Search Providers
+				</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}>
+								{'Search providers and shortcuts can be configured here.'}
+							</Text>
+							<Highlight
+								ta={'center'}
+								highlight={['Providers', 'search']}
+								className={textClasses.settingsTooltip}
+								classNames={textClasses}
+								highlightStyles={{
+									backgroundImage:
+										'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
+									fontWeight: 700,
+									WebkitBackgroundClip: 'text',
+									WebkitTextFillColor: 'transparent',
+								}}
+							>
+								{'Providers can be used in the search bar.'}
+							</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'>
+				<Grid columns={18} w={'75%'}>
+					{providerData?.map((provider: any) => (
+						<GridCol span={6} key={provider.id}>
+							<Popover withArrow withOverlay withinPortal={false}>
+								<Popover.Target>
+									<Box
+										onClick={(e) => {
+											e.stopPropagation();
+										}}
+									>
+										<SearchProviderSettingsItem provider={provider} />
+									</Box>
+								</Popover.Target>
+								<Popover.Dropdown>
+									<DebouncedSearchProvider
+										searchProvider={provider}
+										handleDelete={handleDelete}
+									/>
+								</Popover.Dropdown>
+							</Popover>
+						</GridCol>
+					))}
+				</Grid>
+			</Stack>
 		</Stack>
 	);
 };
diff --git a/src/pages/settings/components/WoL/WolClients.tsx b/src/pages/settings/components/WoL/WolClients.tsx
index 77a3082..d3a3ce9 100644
--- a/src/pages/settings/components/WoL/WolClients.tsx
+++ b/src/pages/settings/components/WoL/WolClients.tsx
@@ -29,23 +29,15 @@ import WolClientSettingsItem from './WolClientSettingsItem';
 
 const WolClientSettings = () => {
 	const endpoint = 'api/wolClients';
-	const {
-		data: wolClientsData,
-		isFetched: wolClientsIsFetched,
-		isFetching: wolClientsIsFetching,
-		isLoading: wolClientsIsLoading,
-	} = useQueryAPI({
+	const { data: wolClientsData, isFetched: wolClientsIsFetched } = useQueryAPI({
 		endpoint: endpoint,
 	});
 	const [wolClients, setWolClients] = useState<any>([]);
 	const { mutateAsync } = useMutationAPI();
 	const { theme } = useCommonHooks();
 	const [newWolClient, setNewWolClient] = useState<any>({
-		name: '',
-		url: '',
-		icon: '',
-		baseUrl: '',
-		filterName: '',
+		hostname: '',
+		macAddress: '',
 	});
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [searchValue, setSearchValue] = useState('');