From bdfd0b8f2c1928df9b84d4d9f8f5385ce72238b2 Mon Sep 17 00:00:00 2001 From: Weixuan Fu Date: Sun, 31 Mar 2024 15:01:21 +0800 Subject: [PATCH] add back gallery media action buttons to new gallery carousel view --- ui/src/RecentFilesDrawer/MoreActionMenu.tsx | 8 +- ui/src/gallery/GalleryContext.ts | 4 +- ui/src/gallery/GalleryModal.tsx | 3 - .../gallery/components/GalleryMediaItem.tsx | 9 +- ui/src/gallery/components/GalleryRightCol.tsx | 56 +------- .../GalleryRightColHeaderButtons.tsx | 130 ++++++++++++++++++ 6 files changed, 143 insertions(+), 67 deletions(-) create mode 100644 ui/src/gallery/components/GalleryRightColHeaderButtons.tsx diff --git a/ui/src/RecentFilesDrawer/MoreActionMenu.tsx b/ui/src/RecentFilesDrawer/MoreActionMenu.tsx index b831244..ab84a88 100644 --- a/ui/src/RecentFilesDrawer/MoreActionMenu.tsx +++ b/ui/src/RecentFilesDrawer/MoreActionMenu.tsx @@ -57,10 +57,14 @@ export default function MoreActionMenu({ workflow }: Props) { method: "POST", body, }); - Array.from(files).forEach((file) => { + Array.from(files).forEach(async (file) => { + const localPath = `workspace_manager/${file.name}`; mediaTable?.create({ workflowID: workflow.id, - localPath: `workspace_manager/${file.name}`, + localPath: localPath, + }); + workflowsTable?.updateMetaInfo(workflow.id, { + coverMediaPath: localPath, }); }); }; diff --git a/ui/src/gallery/GalleryContext.ts b/ui/src/gallery/GalleryContext.ts index a7f0c48..e59e7d5 100644 --- a/ui/src/gallery/GalleryContext.ts +++ b/ui/src/gallery/GalleryContext.ts @@ -1,11 +1,11 @@ -import { createContext } from "react"; +import { type Dispatch, type SetStateAction, createContext } from "react"; import type { Media } from "../types/dbTypes.ts"; interface GalleryContextProps { showAllImages: boolean; curMedia: Media | null; setCurMedia: (media: Media | null) => void; - setMediaList: (media: Media[]) => void; + setMediaList: Dispatch>; setShowAllImages: (showAllImages: boolean) => void; } diff --git a/ui/src/gallery/GalleryModal.tsx b/ui/src/gallery/GalleryModal.tsx index 32a3900..4e41739 100644 --- a/ui/src/gallery/GalleryModal.tsx +++ b/ui/src/gallery/GalleryModal.tsx @@ -20,7 +20,6 @@ import { IconX } from "@tabler/icons-react"; import { WorkspaceContext } from "../WorkspaceContext"; import { Media } from "../types/dbTypes"; import { GalleryCarouselImageViewer } from "./components/GalleryCarouselImageViewer.tsx"; -import { MediaWithMetaData } from "./components/GalleryRightCol.tsx"; import GalleryGridView from "./components/GalleryGridView.tsx"; import { useDebounce } from "../customHooks/useDebounce.ts"; import SearchInput from "../components/SearchInput.tsx"; @@ -31,7 +30,6 @@ export default function GalleryModal({ onclose }: { onclose: () => void }) { const [workflowName, setWorkflowName] = useState(""); const [selectedID, setSelectedID] = useState([]); const [isSelecting, setIsSelecting] = useState(false); - const [coverPath, setCoverPath] = useState(""); const [images, setImages] = useState([]); const [curMedia, setCurMedia] = useState(); const [searchValue, setSearchValue] = useState(""); @@ -53,7 +51,6 @@ export default function GalleryModal({ onclose }: { onclose: () => void }) { workflowsTable?.get(curFlowID).then((flow) => { if (flow) { setWorkflowName(flow.name); - flow?.coverMediaPath && setCoverPath(flow?.coverMediaPath); } }); }, []); diff --git a/ui/src/gallery/components/GalleryMediaItem.tsx b/ui/src/gallery/components/GalleryMediaItem.tsx index 00bd144..aeacfbb 100644 --- a/ui/src/gallery/components/GalleryMediaItem.tsx +++ b/ui/src/gallery/components/GalleryMediaItem.tsx @@ -11,13 +11,8 @@ import { } from "@chakra-ui/react"; import { formatTimestamp } from "../../utils"; import { Media } from "../../types/dbTypes"; -import { - IconDownload, - IconPin, - IconPinFilled, - IconTrash, -} from "@tabler/icons-react"; -import { mediaTable, workflowsTable } from "../../db-tables/WorkspaceDB"; +import { IconDownload, IconTrash } from "@tabler/icons-react"; +import { mediaTable } from "../../db-tables/WorkspaceDB"; import { WorkspaceContext } from "../../WorkspaceContext"; import { useDialog } from "../../components/AlertDialogProvider"; import MediaPreview from "../../components/MediaPreview"; diff --git a/ui/src/gallery/components/GalleryRightCol.tsx b/ui/src/gallery/components/GalleryRightCol.tsx index 3608a37..a1e7687 100644 --- a/ui/src/gallery/components/GalleryRightCol.tsx +++ b/ui/src/gallery/components/GalleryRightCol.tsx @@ -1,16 +1,8 @@ import { MetaData } from "../utils.ts"; import { Media } from "../../types/dbTypes.ts"; -import { - Flex, - IconButton, - Link, - SimpleGrid, - Text, - Tooltip, -} from "@chakra-ui/react"; -import { IconDownload, IconPin, IconPinFilled } from "@tabler/icons-react"; -import { formatTimestamp } from "../../utils.tsx"; +import { Flex } from "@chakra-ui/react"; import MetadataForm from "./MetaBox/MetadataForm.tsx"; +import { GalleryRightColHeaderButtons } from "./GalleryRightColHeaderButtons.tsx"; export type MediaWithMetaData = Media & { metaData?: MetaData; @@ -18,49 +10,7 @@ export type MediaWithMetaData = Media & { export const GalleryRightCol = ({ media }: { media?: MediaWithMetaData }) => { return ( - - - {media?.localPath && ( - <> - {media?.localPath} - - - } - aria-label="donwload image from gallery" - /> - - - - )} - - - {!!media?.createTime && ( - <> - Created: - {formatTimestamp(media?.createTime ?? 0, true)} - - )} - - {/* - : } - aria-label="set as cover" - onClick={() => { - workflowsTable?.updateMetaInfo(curFlowID, { - coverMediaPath: media.localPath, - }); - setCoverPath(media.localPath); - }} - /> - */} - + ); diff --git a/ui/src/gallery/components/GalleryRightColHeaderButtons.tsx b/ui/src/gallery/components/GalleryRightColHeaderButtons.tsx new file mode 100644 index 0000000..28970ea --- /dev/null +++ b/ui/src/gallery/components/GalleryRightColHeaderButtons.tsx @@ -0,0 +1,130 @@ +import { MetaData } from "../utils.ts"; +import { Media } from "../../types/dbTypes.ts"; +import { + Button, + Flex, + IconButton, + Link, + Text, + Tooltip, +} from "@chakra-ui/react"; +import { + IconDownload, + IconPin, + IconPinFilled, + IconTrash, +} from "@tabler/icons-react"; +import { formatTimestamp } from "../../utils.tsx"; +import { mediaTable, workflowsTable } from "../../db-tables/WorkspaceDB.ts"; +import { useContext, useEffect, useState } from "react"; +import { GalleryContext } from "../GalleryContext.ts"; +import { WorkspaceContext } from "../../WorkspaceContext.ts"; +import { useDialog } from "../../components/AlertDialogProvider.tsx"; + +export type MediaWithMetaData = Media & { + metaData?: MetaData; +}; +export const GalleryRightColHeaderButtons = ({ + media, +}: { + media?: MediaWithMetaData; +}) => { + const [isCover, setIsCover] = useState(false); + const { setMediaList } = useContext(GalleryContext); + const { loadFilePath } = useContext(WorkspaceContext); + const { showDialog } = useDialog(); + + useEffect(() => { + setIsCover( + media?.localPath != null && + workflowsTable?.curWorkflow?.coverMediaPath === media?.localPath, + ); + }, [media]); + if (!media) return null; + return ( + + + {media.localPath && ( + <> + {media?.localPath} + + + } + aria-label="donwload image from gallery" + /> + + + + )} + + + {!!media?.createTime && ( + {formatTimestamp(media?.createTime ?? 0, true)} + )} + + + + } + aria-label="remove image from gallery" + colorScheme="red" + onClick={async () => { + const res = confirm( + "Are you sure to remove this image from gallery? (won't delete image on your disk)", + ); + if (!res) return; + await mediaTable?.delete(media.id); + setMediaList((prev) => prev.filter((v) => v.id !== media.id)); + }} + /> + + {workflowsTable?.curWorkflow?.id && ( + + : } + aria-label="set as cover" + onClick={async () => { + await workflowsTable?.updateMetaInfo( + workflowsTable!.curWorkflow!.id, + { + coverMediaPath: isCover ? undefined : media.localPath, + }, + ); + setIsCover(!isCover); + }} + /> + + )} + + + ); +};