cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-16 21:03:29 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor: user alerts on destructive actions

Browse Source
This commit is contained in:
Carlos Valente
2024-04-27 10:04:36 +02:00
committed by Carlos Valente
parent dcbb92c470
commit 75b5118b0f
9 changed files with 73 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/app-settings/panel/shutdown-panel/ShutdownPanel.tsx
+5 -4
View File
@@ -20,6 +20,7 @@ export default function ShutdownPanel() {
const sendShutdown = () => {
sendToElectron('shutdown', 'now');
onClose();
};
return (
@@ -30,10 +31,10 @@ export default function ShutdownPanel() {
This will shutdown the Ontime server. <br />
The runtime state will be lost, but your project is kept for next time.
</Panel.Paragraph>
<Button colorScheme='red' onClick={onOpen} isDisabled={!isElectron}>
<Button colorScheme='red' onClick={onOpen} maxWidth='350px' isDisabled={!isElectron}>
Shutdown ontime
</Button>
<AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
<AlertDialog variant='ontime' isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
<AlertDialogOverlay>
<AlertDialogContent>
<AlertDialogHeader fontSize='lg' fontWeight='bold'>
@@ -43,10 +44,10 @@ export default function ShutdownPanel() {
This will shutdown the Ontime server. <br /> Are you sure?
</AlertDialogBody>
<AlertDialogFooter>
<Button ref={cancelRef} onClick={onClose} variant='ghost'>
<Button ref={cancelRef} onClick={onClose} variant='ontime-ghosted-white'>
Cancel
</Button>
<Button colorScheme='red' onClick={sendShutdown}>
<Button colorScheme='red' onClick={sendShutdown} ml={4}>
Shutdown
</Button>
</AlertDialogFooter>
apps/client/src/features/rundown/rundown-header/RundownMenu.tsx
+48 -13
View File
@@ -1,5 +1,14 @@
import { useCallback } from 'react';
import { Button } from '@chakra-ui/react';
import { useCallback, useRef } from 'react';
import {
AlertDialog,
AlertDialogBody,
AlertDialogContent,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogOverlay,
Button,
useDisclosure,
} from '@chakra-ui/react';
import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
import { useEventAction } from '../../../common/hooks/useEventAction';
@@ -12,22 +21,48 @@ export default function RundownMenu() {
const appMode = useAppMode((state) => state.mode);
const { deleteAllEvents } = useEventAction();
const { isOpen, onOpen, onClose } = useDisclosure();
const cancelRef = useRef<HTMLButtonElement | null>(null);
const deleteAll = useCallback(() => {
deleteAllEvents();
clearSelectedEvents();
setCursor(null);
}, [clearSelectedEvents, deleteAllEvents, setCursor]);
onClose();
}, [clearSelectedEvents, deleteAllEvents, onClose, setCursor]);
return (
<Button
size='sm'
variant='ontime-outlined'
leftIcon={<IoTrash />}
onClick={deleteAll}
color='#FA5656'
isDisabled={appMode === 'run'}
>
Clear rundown
</Button>
<>
<Button
size='sm'
variant='ontime-outlined'
leftIcon={<IoTrash />}
onClick={onOpen}
color='#FA5656'
isDisabled={appMode === 'run'}
>
Clear rundown
</Button>
<AlertDialog variant='ontime' isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
<AlertDialogOverlay>
<AlertDialogContent>
<AlertDialogHeader fontSize='lg' fontWeight='bold'>
Clear rundown
</AlertDialogHeader>
<AlertDialogBody>
You will lose all data in your rundown. <br /> Are you sure?
</AlertDialogBody>
<AlertDialogFooter>
<Button ref={cancelRef} onClick={onClose} variant='ontime-ghosted-white'>
Cancel
</Button>
<Button colorScheme='red' onClick={deleteAll} ml={4}>
Delete all
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogOverlay>
</AlertDialog>
</>
);
}