From cd3750fe4cedc956e02d922e935840633de16284 Mon Sep 17 00:00:00 2001
From: brunoravera <bruno@process.st>
Date: Sun, 10 Mar 2024 14:08:41 -0300
Subject: [PATCH] delete pattern confirm dialog
---
web/src/pages/Patterns/patterns.tsx | 2 +-
.../remove-pattern-icon-button.tsx | 67 ++++++++++++++++---
2 files changed, 57 insertions(+), 12 deletions(-)
diff --git a/web/src/pages/Patterns/patterns.tsx b/web/src/pages/Patterns/patterns.tsx
index 0664c8b..4c9f54d 100644
--- a/web/src/pages/Patterns/patterns.tsx
+++ b/web/src/pages/Patterns/patterns.tsx
@@ -124,7 +124,7 @@ const ActionsRow: React.FC<ActionsRowProps> = ({ pattern }) => {
variant="unstyled"
icon={<Icon as={FaEdit} />}
/>
- <RemovePatternIconButton patternId={pattern.id} />
+ <RemovePatternIconButton pattern={pattern} />
</HStack>
)
}
diff --git a/web/src/pages/Patterns/remove-pattern/remove-pattern-icon-button.tsx b/web/src/pages/Patterns/remove-pattern/remove-pattern-icon-button.tsx
index 67799fc..73d8f49 100644
--- a/web/src/pages/Patterns/remove-pattern/remove-pattern-icon-button.tsx
+++ b/web/src/pages/Patterns/remove-pattern/remove-pattern-icon-button.tsx
@@ -1,18 +1,34 @@
import React from 'react'
-import { IconButtonProps, IconButton, Icon } from '@chakra-ui/react'
+import {
+ IconButtonProps,
+ IconButton,
+ Icon,
+ useDisclosure,
+ AlertDialog,
+ AlertDialogOverlay,
+ AlertDialogContent,
+ AlertDialogHeader,
+ AlertDialogBody,
+ AlertDialogFooter,
+ Button,
+ Text,
+} from '@chakra-ui/react'
import { FaTrash } from 'react-icons/fa'
import { DeletePatternMutation, GetPatternsQuery } from '../query-builder'
import { useQueryClient } from 'react-query'
+import { Pattern } from 'src/models'
export type RemovePatternIconButtonProps = {
- patternId: string
+ pattern: Pattern
} & Partial<IconButtonProps>
export const RemovePatternIconButton: React.FC<
RemovePatternIconButtonProps
-> = ({ patternId, ...props }) => {
+> = ({ pattern, ...props }) => {
const queryClient = useQueryClient()
+ const { isOpen, onOpen, onClose } = useDisclosure()
+ const cancelRef = React.useRef<HTMLButtonElement>(null)
const deletePatternMutation = DeletePatternMutation.useMutation({
onSuccess: () => {
@@ -21,15 +37,44 @@ export const RemovePatternIconButton: React.FC<
})
const handleDeletePattern = () => {
- deletePatternMutation.mutate({ id: patternId })
+ deletePatternMutation.mutate({ id: pattern.id })
}
return (
- <IconButton
- aria-label="view pattern"
- variant="unstyled"
- icon={<Icon as={FaTrash} />}
- {...props}
- onClick={handleDeletePattern}
- />
+ <>
+ <IconButton
+ aria-label="view pattern"
+ variant="unstyled"
+ icon={<Icon as={FaTrash} />}
+ {...props}
+ onClick={onOpen}
+ />
+ <AlertDialog
+ isOpen={isOpen}
+ onClose={onClose}
+ leastDestructiveRef={cancelRef}
+ >
+ <AlertDialogOverlay>
+ <AlertDialogContent>
+ <AlertDialogHeader fontSize="lg" fontWeight="bold">
+ Eliminar este patron?
+ </AlertDialogHeader>
+ <AlertDialogBody>
+ <Text>
+ Si eliminas el patron <Text as="b">{pattern.title}</Text> todos
+ sus datos asociados seran eliminados.
+ </Text>
+ </AlertDialogBody>
+ <AlertDialogFooter>
+ <Button ref={cancelRef} variant="ghost" onClick={onClose}>
+ Cancelar
+ </Button>
+ <Button variant="solid" onClick={handleDeletePattern} ml="3">
+ Eliminar
+ </Button>
+ </AlertDialogFooter>
+ </AlertDialogContent>
+ </AlertDialogOverlay>
+ </AlertDialog>
+ </>
)
}
--
GitLab