Feature/batch chapter actions (#194)

* Add batch delete chapters

* Add remaining batch actions
This commit is contained in:
Valter Martinek
2022-11-21 01:33:21 +01:00
committed by GitHub
parent 1510c5a093
commit 68f67273aa
5 changed files with 180 additions and 37 deletions

View File

@@ -5,18 +5,21 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import Download from '@mui/icons-material/Download';
import MoreHoriz from '@mui/icons-material/MoreHoriz';
import {
Fab, ListItemIcon, ListItemText, Menu, MenuItem,
Fab, Menu,
} from '@mui/material';
import { Box } from '@mui/system';
import { pluralize } from 'components/util/helpers';
import React, { useRef, useState } from 'react';
import type { IChapterWithMeta } from './ChapterList';
import SelectionFABActionItem from './SelectionFABActionItem';
export type SelectionAction = 'download' | 'delete' | 'bookmark' | 'unbookmark' | 'mark_as_read' | 'mark_as_unread';
interface SelectionFABProps{
selectedChapters: IChapter[]
onAction: (action: 'download') => void
selectedChapters: IChapterWithMeta[]
onAction: (action: SelectionAction, chapters: IChapterWithMeta[]) => void
}
const SelectionFAB: React.FC<SelectionFABProps> = (props) => {
@@ -27,6 +30,11 @@ const SelectionFAB: React.FC<SelectionFABProps> = (props) => {
const [open, setOpen] = useState(false);
const handleClose = () => setOpen(false);
const handleAction = (action: SelectionAction, chapters: IChapterWithMeta[]) => {
onAction(action, chapters);
handleClose();
};
return (
<Box
sx={{
@@ -54,24 +62,44 @@ const SelectionFAB: React.FC<SelectionFABProps> = (props) => {
'aria-labelledby': 'selectionMenuButton',
}}
>
<MenuItem
onClick={() => { onAction('download'); handleClose(); }}
>
<ListItemIcon>
<Download fontSize="small" />
</ListItemIcon>
<ListItemText>
Download selected
</ListItemText>
</MenuItem>
{/* <MenuItem onClick={() => { onClearSelection(); handleClose(); }}>
<ListItemIcon>
<Clear fontSize="small" />
</ListItemIcon>
<ListItemText>
ClearSelection
</ListItemText>
</MenuItem> */}
<SelectionFABActionItem
action="download"
matchingChapters={selectedChapters.filter(
({ chapter: c, downloadChapter: dc }) => !c.downloaded && dc === undefined,
)}
onClick={handleAction}
title="Download selected"
/>
<SelectionFABActionItem
action="delete"
matchingChapters={selectedChapters.filter(({ chapter }) => chapter.downloaded)}
onClick={handleAction}
title="Delete selected"
/>
<SelectionFABActionItem
action="bookmark"
matchingChapters={selectedChapters.filter(({ chapter }) => !chapter.bookmarked)}
onClick={handleAction}
title="Bookmark selected"
/>
<SelectionFABActionItem
action="unbookmark"
matchingChapters={selectedChapters.filter(({ chapter }) => chapter.bookmarked)}
onClick={handleAction}
title="Remove bookmarks from selected"
/>
<SelectionFABActionItem
action="mark_as_read"
matchingChapters={selectedChapters.filter(({ chapter }) => !chapter.read)}
onClick={handleAction}
title="Mark selected as read"
/>
<SelectionFABActionItem
action="mark_as_unread"
matchingChapters={selectedChapters.filter(({ chapter }) => chapter.read)}
onClick={handleAction}
title="Mark selected as unread"
/>
</Menu>
</Box>
);