-
Notifications
You must be signed in to change notification settings - Fork 2.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
(wip) delete images along with board
- Loading branch information
1 parent
45935ca
commit ba67e57
Showing
6 changed files
with
212 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
101 changes: 101 additions & 0 deletions
101
invokeai/frontend/web/src/app/contexts/DeleteBoardImagesContext.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import { useDisclosure } from '@chakra-ui/react'; | ||
| import { PropsWithChildren, createContext, useCallback, useState } from 'react'; | ||
| import { BoardDTO } from 'services/api/types'; | ||
| import { useDeleteBoardMutation } from '../../services/api/endpoints/boards'; | ||
|
|
||
| export type ImageUsage = { | ||
| isInitialImage: boolean; | ||
| isCanvasImage: boolean; | ||
| isNodesImage: boolean; | ||
| isControlNetImage: boolean; | ||
| }; | ||
|
|
||
| type DeleteBoardImagesContextValue = { | ||
| /** | ||
| * Whether the move image dialog is open. | ||
| */ | ||
| isOpen: boolean; | ||
| /** | ||
| * Closes the move image dialog. | ||
| */ | ||
| onClose: () => void; | ||
| /** | ||
| * The image pending movement | ||
| */ | ||
| board?: BoardDTO; | ||
| onClickDeleteBoardImages: (board: BoardDTO) => void; | ||
| handleDeleteBoardImages: (boardId: string) => void; | ||
| handleDeleteBoardOnly: (boardId: string) => void; | ||
| }; | ||
|
|
||
| export const DeleteBoardImagesContext = | ||
| createContext<DeleteBoardImagesContextValue>({ | ||
| isOpen: false, | ||
| onClose: () => undefined, | ||
| onClickDeleteBoardImages: () => undefined, | ||
| handleDeleteBoardImages: () => undefined, | ||
| handleDeleteBoardOnly: () => undefined, | ||
| }); | ||
|
|
||
| type Props = PropsWithChildren; | ||
|
|
||
| export const DeleteBoardImagesContextProvider = (props: Props) => { | ||
| const [boardToDelete, setBoardToDelete] = useState<BoardDTO>(); | ||
| const { isOpen, onOpen, onClose } = useDisclosure(); | ||
|
|
||
| const [deleteBoardAndImages] = useDeleteBoardAndImagesMutation(); | ||
| const [deleteBoard] = useDeleteBoardMutation(); | ||
|
|
||
| // Clean up after deleting or dismissing the modal | ||
| const closeAndClearBoardToDelete = useCallback(() => { | ||
| setBoardToDelete(undefined); | ||
| onClose(); | ||
| }, [onClose]); | ||
|
|
||
| const onClickDeleteBoardImages = useCallback( | ||
| (board?: BoardDTO) => { | ||
| console.log({ board }); | ||
| if (!board) { | ||
| return; | ||
| } | ||
| setBoardToDelete(board); | ||
| onOpen(); | ||
| }, | ||
| [setBoardToDelete, onOpen] | ||
| ); | ||
|
|
||
| const handleDeleteBoardImages = useCallback( | ||
| (boardId: string) => { | ||
| if (boardToDelete) { | ||
| deleteBoardAndImages(boardId); | ||
| closeAndClearBoardToDelete(); | ||
| } | ||
| }, | ||
| [deleteBoardAndImages, closeAndClearBoardToDelete, boardToDelete] | ||
| ); | ||
|
|
||
| const handleDeleteBoardOnly = useCallback( | ||
| (boardId: string) => { | ||
| if (boardToDelete) { | ||
| deleteBoard(boardId); | ||
| closeAndClearBoardToDelete(); | ||
| } | ||
| }, | ||
| [deleteBoard, closeAndClearBoardToDelete, boardToDelete] | ||
| ); | ||
|
|
||
| return ( | ||
| <DeleteBoardImagesContext.Provider | ||
| value={{ | ||
| isOpen, | ||
| board: boardToDelete, | ||
| onClose: closeAndClearBoardToDelete, | ||
| onClickDeleteBoardImages, | ||
| handleDeleteBoardImages, | ||
| handleDeleteBoardOnly, | ||
| }} | ||
| > | ||
| {props.children} | ||
| </DeleteBoardImagesContext.Provider> | ||
| ); | ||
| }; |
78 changes: 78 additions & 0 deletions
78
invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardImagesModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import { | ||
| AlertDialog, | ||
| AlertDialogBody, | ||
| AlertDialogContent, | ||
| AlertDialogFooter, | ||
| AlertDialogHeader, | ||
| AlertDialogOverlay, | ||
| Divider, | ||
| Flex, | ||
| Text, | ||
| } from '@chakra-ui/react'; | ||
| import IAIButton from 'common/components/IAIButton'; | ||
| import { memo, useContext, useRef } from 'react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { DeleteBoardImagesContext } from '../../../../app/contexts/DeleteBoardImagesContext'; | ||
|
|
||
| const DeleteBoardImagesModal = () => { | ||
| const { t } = useTranslation(); | ||
|
|
||
| const { | ||
| isOpen, | ||
| onClose, | ||
| board, | ||
| handleDeleteBoardImages, | ||
| handleDeleteBoardOnly, | ||
| } = useContext(DeleteBoardImagesContext); | ||
|
|
||
| const cancelRef = useRef<HTMLButtonElement>(null); | ||
|
|
||
| return ( | ||
| <AlertDialog | ||
| isOpen={isOpen} | ||
| leastDestructiveRef={cancelRef} | ||
| onClose={onClose} | ||
| isCentered | ||
| > | ||
| <AlertDialogOverlay> | ||
| {board && ( | ||
| <AlertDialogContent> | ||
| <AlertDialogHeader fontSize="lg" fontWeight="bold"> | ||
| Delete Board | ||
| </AlertDialogHeader> | ||
|
|
||
| <AlertDialogBody> | ||
| <Flex direction="column" gap={3}> | ||
| <Divider /> | ||
| <Text>{t('common.areYouSure')}</Text> | ||
| <Text fontWeight="bold"> | ||
| This board has {board.image_count} image(s) that will be | ||
| deleted. | ||
| </Text> | ||
| </Flex> | ||
| </AlertDialogBody> | ||
| <AlertDialogFooter gap={3}> | ||
| <IAIButton ref={cancelRef} onClick={onClose}> | ||
| Cancel | ||
| </IAIButton> | ||
| <IAIButton | ||
| colorScheme="warning" | ||
| onClick={() => handleDeleteBoardOnly(board.board_id)} | ||
| > | ||
| Delete Board Only | ||
| </IAIButton> | ||
| <IAIButton | ||
| colorScheme="error" | ||
| onClick={() => handleDeleteBoardImages(board.board_id)} | ||
| > | ||
| Delete Board and Images | ||
| </IAIButton> | ||
| </AlertDialogFooter> | ||
| </AlertDialogContent> | ||
| )} | ||
| </AlertDialogOverlay> | ||
| </AlertDialog> | ||
| ); | ||
| }; | ||
|
|
||
| export default memo(DeleteBoardImagesModal); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters