Search Provider settings updates
This commit is contained in:
Sean Edmunds
169
src/pages/settings/components/Search/DebouncedSearchProvider.tsx
Normal file
169
src/pages/settings/components/Search/DebouncedSearchProvider.tsx
Normal file
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -1,8 +1,31 @@
|
|||||||
import { Stack, Text } from '@mantine/core';
|
import {
|
||||||
import { DataTable, SearchProviderColumns } from 'components';
|
ActionIcon,
|
||||||
import { useQueryAPI } from 'hooks';
|
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 { 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 SearchProviderSettings = () => {
|
||||||
const endpoint = 'api/providers';
|
const endpoint = 'api/providers';
|
||||||
@@ -15,26 +38,213 @@ const SearchProviderSettings = () => {
|
|||||||
endpoint: endpoint,
|
endpoint: endpoint,
|
||||||
});
|
});
|
||||||
const [providerData, setProviderData] = useState<any>([]);
|
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(() => {
|
useEffect(() => {
|
||||||
if (providers && providersIsFetched) {
|
if (providers && providersIsFetched) {
|
||||||
setProviderData(providers);
|
setProviderData(
|
||||||
|
providers.filter((a: any) =>
|
||||||
|
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
|
||||||
|
),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}, [providers, providersIsFetched]);
|
}, [providers, providersIsFetched, debouncedSearch]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack>
|
<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 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}>
|
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
|
||||||
Search Providers
|
Search Providers
|
||||||
</Text>
|
</Text>
|
||||||
<DataTable
|
<Popover withArrow withOverlay withinPortal={false}>
|
||||||
tableName='Categories'
|
<Popover.Target>
|
||||||
columns={SearchProviderColumns()}
|
<ActionIcon
|
||||||
tableData={providerData}
|
className={actionIconClasses.settingsTooltip}
|
||||||
isFetching={providersIsFetching}
|
classNames={actionIconClasses}
|
||||||
isLoading={providersIsLoading}
|
>
|
||||||
endpoint={endpoint}
|
<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>
|
</Stack>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -29,23 +29,15 @@ import WolClientSettingsItem from './WolClientSettingsItem';
|
|||||||
|
|
||||||
const WolClientSettings = () => {
|
const WolClientSettings = () => {
|
||||||
const endpoint = 'api/wolClients';
|
const endpoint = 'api/wolClients';
|
||||||
const {
|
const { data: wolClientsData, isFetched: wolClientsIsFetched } = useQueryAPI({
|
||||||
data: wolClientsData,
|
|
||||||
isFetched: wolClientsIsFetched,
|
|
||||||
isFetching: wolClientsIsFetching,
|
|
||||||
isLoading: wolClientsIsLoading,
|
|
||||||
} = useQueryAPI({
|
|
||||||
endpoint: endpoint,
|
endpoint: endpoint,
|
||||||
});
|
});
|
||||||
const [wolClients, setWolClients] = useState<any>([]);
|
const [wolClients, setWolClients] = useState<any>([]);
|
||||||
const { mutateAsync } = useMutationAPI();
|
const { mutateAsync } = useMutationAPI();
|
||||||
const { theme } = useCommonHooks();
|
const { theme } = useCommonHooks();
|
||||||
const [newWolClient, setNewWolClient] = useState<any>({
|
const [newWolClient, setNewWolClient] = useState<any>({
|
||||||
name: '',
|
hostname: '',
|
||||||
url: '',
|
macAddress: '',
|
||||||
icon: '',
|
|
||||||
baseUrl: '',
|
|
||||||
filterName: '',
|
|
||||||
});
|
});
|
||||||
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
|
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
|
||||||
const [searchValue, setSearchValue] = useState('');
|
const [searchValue, setSearchValue] = useState('');
|
||||||
|
|||||||
Reference in New Issue
Block a user