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 { 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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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('');
|
||||
|
||||
Reference in New Issue
Block a user