in frontend/apps/quantgrid/src/app/components/Dashboard/DashboardFileList/DashboardFileListSelectionToolbar.tsx [26:226]
export function DashboardFileListSelectionToolbar() {
const {
selectedItems,
setSelectedItems,
displayedDashboardItems,
folderPath,
currentTab,
refetchData,
} = useContext(DashboardContext);
const { isAdmin } = useContext(ApiContext);
const { shareResources } = useContext(ProjectContext);
const { deleteResources } = useDeleteResources();
const { cloneResources } = useCloneResources();
const { moveResources } = useMoveResources();
const { downloadFiles } = useApiRequests();
const [selectFolderModalOpen, setSelectFolderModalOpen] = useState(false);
const isCloneDisplayed = useMemo(() => {
const tabs: DashboardTab[] = ['home', 'examples'];
if (!currentTab) return false;
if (!tabs.includes(currentTab)) return false;
if (currentTab === 'examples' && !isAdmin) return false;
return true;
}, [currentTab, isAdmin]);
const isDownloadDisplayed = useMemo(() => {
const tabs: DashboardTab[] = [
'recent',
'home',
'sharedByMe',
'sharedWithMe',
'examples',
];
if (!currentTab) return false;
if (!tabs.includes(currentTab)) return false;
return true;
}, [currentTab]);
const isMoveToDisplayed = useMemo(() => {
const tabs: DashboardTab[] = ['home', 'examples'];
if (!currentTab) return false;
if (!tabs.includes(currentTab)) return false;
if (currentTab === 'examples' && !isAdmin) return false;
return true;
}, [currentTab, isAdmin]);
const isShareDisplayed = useMemo(() => {
const tabs: DashboardTab[] = ['recent', 'home', 'sharedByMe'];
if (!currentTab) return false;
if (!tabs.includes(currentTab)) return false;
return true;
}, [currentTab]);
const isDeleteDisplayed = useMemo(() => {
const tabs: DashboardTab[] = ['recent', 'home', 'sharedByMe', 'examples'];
if (!currentTab) return false;
if (!tabs.includes(currentTab)) return false;
if (currentTab === 'examples' && !isAdmin) return false;
return true;
}, [currentTab, isAdmin]);
const onSelectAll = useCallback(() => {
setSelectedItems(
displayedDashboardItems.filter((i) => i.nodeType !== 'FOLDER')
);
}, [displayedDashboardItems, setSelectedItems]);
const clearSelection = useCallback(() => {
setSelectedItems([]);
}, [setSelectedItems]);
const onDelete = useCallback(() => {
deleteResources(selectedItems, () => refetchData());
}, [deleteResources, refetchData, selectedItems]);
const onDownload = useCallback(async () => {
toast.loading(`Downloading ${selectedItems.length} files...`);
const result = await downloadFiles({
files: selectedItems.map(({ bucket, name, parentPath: path }) => ({
bucket,
name,
path,
})),
});
toast.dismiss();
if (!result) {
toast.error('Error happened during downloading files');
}
}, [downloadFiles, selectedItems]);
const onClone = useCallback(async () => {
await cloneResources({
items: selectedItems,
});
refetchData();
}, [cloneResources, refetchData, selectedItems]);
const onShare = useCallback(() => {
shareResources(
selectedItems.map(({ name, bucket, parentPath, nodeType }) => ({
name,
bucket,
parentPath,
nodeType,
}))
);
}, [selectedItems, shareResources]);
const onMoveTo = useCallback(() => {
setSelectFolderModalOpen(true);
}, []);
const handleMoveToFolder = useCallback(
async (path: string | null | undefined, bucket: string) => {
setSelectFolderModalOpen(false);
await moveResources(selectedItems, path, bucket, () => refetchData());
},
[moveResources, refetchData, selectedItems]
);
return (
<div className="flex items-center w-full h-full">
<SelectionToolbarButton
IconComponent={SelectAllIcon}
title="Select all"
onClick={onSelectAll}
/>
<SelectionToolbarButton
IconComponent={UnselectAllIcon}
title="Clear all"
onClick={clearSelection}
/>
<div className="h-[18px] bg-strokeSecondary w-[1px] mr-4" />
{isCloneDisplayed && (
<SelectionToolbarButton
IconComponent={CopyIcon}
title="Clone"
onClick={onClone}
/>
)}
{isDownloadDisplayed && (
<SelectionToolbarButton
IconComponent={DownloadIcon}
title="Download"
onClick={onDownload}
/>
)}
{isMoveToDisplayed && (
<SelectionToolbarButton
IconComponent={MoveToIcon}
title="Move to"
onClick={onMoveTo}
/>
)}
{isShareDisplayed && (
<SelectionToolbarButton
IconComponent={ShareIcon}
title="Share"
onClick={onShare}
/>
)}
{isDeleteDisplayed && (
<SelectionToolbarButton
IconComponent={TrashIcon}
title="Delete"
onClick={onDelete}
/>
)}
{selectFolderModalOpen && (
<SelectFolder
initialBucket={selectedItems[0]?.bucket}
initialPath={folderPath}
onCancel={() => setSelectFolderModalOpen(false)}
onOk={handleMoveToFolder}
/>
)}
</div>
);
}