142 lines
3.3 KiB
TypeScript
142 lines
3.3 KiB
TypeScript
import {
|
|
ActionIcon,
|
|
Button,
|
|
Card,
|
|
Group,
|
|
Stack,
|
|
Text,
|
|
TextInput,
|
|
Tooltip,
|
|
} from '@mantine/core';
|
|
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
|
|
import { useCommonHooks, useMutationAPI } from 'hooks';
|
|
import { useEffect, useState } from 'react';
|
|
import { FiTrash } from 'react-icons/fi';
|
|
import { cardClasses, textInputClasses } from 'styles';
|
|
import type { WolClient } from 'types';
|
|
import DeleteItemModal from '../Shared/DeleteItemModal';
|
|
|
|
function DebouncedWolClient({
|
|
wolClient,
|
|
setIsOpen,
|
|
}: {
|
|
wolClient: WolClient;
|
|
setIsOpen: (isOpen: boolean) => void;
|
|
}) {
|
|
const { theme, handleDelete } = useCommonHooks();
|
|
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
|
|
const { mutateAsync } = useMutationAPI();
|
|
|
|
const [client, setClient] = useState<any>(wolClient);
|
|
const [update, setUpdate] = useState({});
|
|
const [debounced] = useDebouncedValue(update, 1000);
|
|
const handleClose = () => {
|
|
setIsOpen(false);
|
|
closeModal();
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (Object.keys(debounced).length) {
|
|
mutateAsync({ method: 'PATCH', endpoint: 'api/WolClients', body: debounced });
|
|
}
|
|
}, [debounced]);
|
|
|
|
useEffect(() => {
|
|
if (update !== client && Object.keys(update).length) {
|
|
setClient(update);
|
|
}
|
|
}, [update]);
|
|
|
|
return (
|
|
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
|
|
<DeleteItemModal
|
|
modalOpened={modalOpened}
|
|
handleClose={handleClose}
|
|
title={'Delete WoL Client'}
|
|
body={
|
|
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
|
|
<Text>Are you sure you want to delete this WoL Client?</Text>
|
|
<Text
|
|
style={{
|
|
fontWeight: 'bold',
|
|
fontSize: '20px',
|
|
padding: '8px',
|
|
margin: '8px',
|
|
borderRadius: '10px',
|
|
backgroundColor: 'var(--color-text-acc)',
|
|
color: 'var(--color-background)',
|
|
}}
|
|
>{`"${client.hostname}"`}</Text>
|
|
<Text c='red'>This action cannot be undone!</Text>
|
|
<Group pos={'absolute'} bottom={8}>
|
|
<Button
|
|
color={'red'}
|
|
styles={{ label: { color: 'black' } }}
|
|
onClick={() => {
|
|
handleDelete(client, 'api/WolClients');
|
|
handleClose();
|
|
}}
|
|
>
|
|
Delete
|
|
</Button>
|
|
<Button
|
|
color={'grey'}
|
|
styles={{ label: { color: 'black' } }}
|
|
onClick={handleClose}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</Group>
|
|
</Stack>
|
|
}
|
|
/>
|
|
<Tooltip
|
|
color={theme.primaryColor}
|
|
bd={`solid 1px ${theme.borderColor}`}
|
|
label={'Delete'}
|
|
>
|
|
<ActionIcon
|
|
pos={'absolute'}
|
|
right={16}
|
|
color='red'
|
|
onClick={() => {
|
|
openModal();
|
|
}}
|
|
>
|
|
<FiTrash />
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
<Group w={'100%'} justify='center'>
|
|
<TextInput
|
|
label={'Hostname'}
|
|
className={textInputClasses.settingsItem}
|
|
pt={16}
|
|
classNames={textInputClasses}
|
|
defaultValue={client.hostname}
|
|
onChange={(event) => {
|
|
setUpdate({
|
|
...client,
|
|
hostname: event.target.value,
|
|
});
|
|
}}
|
|
/>
|
|
<TextInput
|
|
label={'MAC Address'}
|
|
className={textInputClasses.settingsItem}
|
|
pt={16}
|
|
classNames={textInputClasses}
|
|
defaultValue={client.macAddress}
|
|
onChange={(event) => {
|
|
setUpdate({
|
|
...client,
|
|
macAddress: event.target.value,
|
|
});
|
|
}}
|
|
/>
|
|
</Group>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default DebouncedWolClient;
|