import { Button, DialogActions, DialogContent, DialogTitle, Drawer, Input, ModalClose, Radio, RadioGroup } from "@mui/joy"; import { isUndefined } from "lodash-es"; import { useEffect, useState } from "react"; import { toast } from "react-hot-toast"; import { useTranslation } from "react-i18next"; import useLoading from "@/hooks/useLoading"; import { useCollectionStore, useShortcutStore, useWorkspaceStore } from "@/stores"; import { Collection } from "@/types/proto/api/v1/collection_service"; import { Visibility } from "@/types/proto/api/v1/common"; import { Shortcut } from "@/types/proto/api/v1/shortcut_service"; import { convertVisibilityFromPb } from "@/utils/visibility"; import Icon from "./Icon"; import ShortcutView from "./ShortcutView"; interface Props { collectionId?: number; onClose: () => void; onConfirm?: () => void; } interface State { collectionCreate: Collection; } const CreateCollectionDrawer: React.FC = (props: Props) => { const { onClose, onConfirm, collectionId } = props; const { t } = useTranslation(); const workspaceStore = useWorkspaceStore(); const collectionStore = useCollectionStore(); const shortcutList = useShortcutStore().getShortcutList(); const [state, setState] = useState({ collectionCreate: Collection.fromPartial({ visibility: Visibility.WORKSPACE, }), }); const [selectedShortcuts, setSelectedShortcuts] = useState([]); const isCreating = isUndefined(collectionId); const loadingState = useLoading(!isCreating); const requestState = useLoading(false); const unselectedShortcuts = shortcutList .filter((shortcut) => { if (state.collectionCreate.visibility === Visibility.PUBLIC) { return shortcut.visibility === Visibility.PUBLIC; } else if (state.collectionCreate.visibility === Visibility.WORKSPACE) { return shortcut.visibility === Visibility.PUBLIC || shortcut.visibility === Visibility.WORKSPACE; } else { return true; } }) .filter((shortcut) => !selectedShortcuts.find((selectedShortcut) => selectedShortcut.id === shortcut.id)); const setPartialState = (partialState: Partial) => { setState({ ...state, ...partialState, }); }; useEffect(() => { if (workspaceStore.setting.defaultVisibility !== Visibility.VISIBILITY_UNSPECIFIED) { setPartialState({ collectionCreate: Object.assign(state.collectionCreate, { visibility: workspaceStore.setting.defaultVisibility, }), }); } }, []); useEffect(() => { (async () => { if (collectionId) { const collection = await collectionStore.getOrFetchCollectionById(collectionId); if (collection) { setState({ ...state, collectionCreate: Object.assign(state.collectionCreate, { ...collection, }), }); setSelectedShortcuts( collection.shortcutIds .map((shortcutId) => shortcutList.find((shortcut) => shortcut.id === shortcutId)) .filter(Boolean) as Shortcut[], ); loadingState.setFinish(); } } })(); }, [collectionId]); if (loadingState.isLoading) { return null; } const handleNameInputChange = (e: React.ChangeEvent) => { setPartialState({ collectionCreate: Object.assign(state.collectionCreate, { name: e.target.value.replace(/\s+/g, "-"), }), }); }; const handleTitleInputChange = (e: React.ChangeEvent) => { setPartialState({ collectionCreate: Object.assign(state.collectionCreate, { title: e.target.value, }), }); }; const handleVisibilityInputChange = (e: React.ChangeEvent) => { setPartialState({ collectionCreate: Object.assign(state.collectionCreate, { visibility: e.target.value, }), }); }; const handleDescriptionInputChange = (e: React.ChangeEvent) => { setPartialState({ collectionCreate: Object.assign(state.collectionCreate, { description: e.target.value, }), }); }; const handleSaveBtnClick = async () => { if (!state.collectionCreate.name || !state.collectionCreate.title) { toast.error("Please fill in required fields."); return; } if (selectedShortcuts.length === 0) { toast.error("Please select at least one shortcut."); return; } try { if (!isCreating) { await collectionStore.updateCollection( { id: collectionId, name: state.collectionCreate.name, title: state.collectionCreate.title, description: state.collectionCreate.description, visibility: state.collectionCreate.visibility, shortcutIds: selectedShortcuts.map((shortcut) => shortcut.id), }, ["name", "title", "description", "visibility", "shortcut_ids"], ); } else { await collectionStore.createCollection({ ...state.collectionCreate, shortcutIds: selectedShortcuts.map((shortcut) => shortcut.id), }); } if (onConfirm) { onConfirm(); } else { onClose(); } } catch (error: any) { console.error(error); toast.error(error.details); } }; return ( {isCreating ? "Create Collection" : "Edit Collection"}
Name *
Title *
Description
Visibility

{t(`shortcut.visibility.${convertVisibilityFromPb(state.collectionCreate.visibility).toLowerCase()}.description`)}

Shortcuts ({selectedShortcuts.length}) {selectedShortcuts.length === 0 && (Select a shortcut first)}

{selectedShortcuts.map((shortcut) => { return ( { setSelectedShortcuts([...selectedShortcuts.filter((selectedShortcut) => selectedShortcut.id !== shortcut.id)]); }} /> ); })} {unselectedShortcuts.map((shortcut) => { return ( { setSelectedShortcuts([...selectedShortcuts, shortcut]); }} /> ); })} {selectedShortcuts.length + unselectedShortcuts.length === 0 && (

No shortcuts found.

)}
); }; export default CreateCollectionDrawer;