Add pagination to playlists (#969)
* add pagination * prettier applied * perPage_bug_fixed * pagination_component_changed * getAllSongs function added * pagination component updated * catch_error from data provider * getAllSongsAndDispatch added * remove ids from action function
This commit is contained in:
parent
cdfdf78c73
commit
69ee17402f
|
@ -5,6 +5,8 @@ import {
|
|||
sanitizeListRestProps,
|
||||
TopToolbar,
|
||||
useTranslate,
|
||||
useDataProvider,
|
||||
useNotify,
|
||||
} from 'react-admin'
|
||||
import PlayArrowIcon from '@material-ui/icons/PlayArrow'
|
||||
import ShuffleIcon from '@material-ui/icons/Shuffle'
|
||||
|
@ -23,23 +25,51 @@ import config from '../config'
|
|||
const PlaylistActions = ({ className, ids, data, record, ...rest }) => {
|
||||
const dispatch = useDispatch()
|
||||
const translate = useTranslate()
|
||||
const dataProvider = useDataProvider()
|
||||
const notify = useNotify()
|
||||
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
|
||||
|
||||
const getAllSongsAndDispatch = React.useCallback(
|
||||
(action) => {
|
||||
if (ids.length === record.songCount) {
|
||||
return dispatch(action(data, ids))
|
||||
}
|
||||
|
||||
dataProvider
|
||||
.getList('playlistTrack', {
|
||||
pagination: { page: 1, perPage: 0 },
|
||||
sort: { field: 'id', order: 'ASC' },
|
||||
filter: { playlist_id: record.id },
|
||||
})
|
||||
.then((res) => {
|
||||
const data = res.data.reduce(
|
||||
(acc, curr) => ({ ...acc, [curr.id]: curr }),
|
||||
{}
|
||||
)
|
||||
dispatch(action(data))
|
||||
})
|
||||
.catch(() => {
|
||||
notify('ra.page.error', 'warning')
|
||||
})
|
||||
},
|
||||
[dataProvider, dispatch, record, data, ids, notify]
|
||||
)
|
||||
|
||||
const handlePlay = React.useCallback(() => {
|
||||
dispatch(playTracks(data, ids))
|
||||
}, [dispatch, data, ids])
|
||||
getAllSongsAndDispatch(playTracks)
|
||||
}, [getAllSongsAndDispatch])
|
||||
|
||||
const handlePlayNext = React.useCallback(() => {
|
||||
dispatch(playNext(data, ids))
|
||||
}, [dispatch, data, ids])
|
||||
getAllSongsAndDispatch(playNext)
|
||||
}, [getAllSongsAndDispatch])
|
||||
|
||||
const handlePlayLater = React.useCallback(() => {
|
||||
dispatch(addTracks(data, ids))
|
||||
}, [dispatch, data, ids])
|
||||
getAllSongsAndDispatch(addTracks)
|
||||
}, [getAllSongsAndDispatch])
|
||||
|
||||
const handleShuffle = React.useCallback(() => {
|
||||
dispatch(shuffleTracks(data, ids))
|
||||
}, [dispatch, data, ids])
|
||||
getAllSongsAndDispatch(shuffleTracks)
|
||||
}, [getAllSongsAndDispatch])
|
||||
|
||||
const handleDownload = React.useCallback(() => {
|
||||
subsonic.download(record.id)
|
||||
|
|
|
@ -4,13 +4,13 @@ import {
|
|||
ShowContextProvider,
|
||||
useShowContext,
|
||||
useShowController,
|
||||
Pagination as RaPagination,
|
||||
} from 'react-admin'
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import PlaylistDetails from './PlaylistDetails'
|
||||
import PlaylistSongs from './PlaylistSongs'
|
||||
import PlaylistActions from './PlaylistActions'
|
||||
import { Title, isReadOnly } from '../common'
|
||||
|
||||
const useStyles = makeStyles(
|
||||
(theme) => ({
|
||||
playlistActions: {},
|
||||
|
@ -35,7 +35,7 @@ const PlaylistShowLayout = (props) => {
|
|||
reference="playlistTrack"
|
||||
target="playlist_id"
|
||||
sort={{ field: 'id', order: 'ASC' }}
|
||||
perPage={0}
|
||||
perPage={100}
|
||||
filter={{ playlist_id: props.id }}
|
||||
>
|
||||
<PlaylistSongs
|
||||
|
@ -50,8 +50,7 @@ const PlaylistShowLayout = (props) => {
|
|||
}
|
||||
resource={'playlistTrack'}
|
||||
exporter={false}
|
||||
perPage={0}
|
||||
pagination={null}
|
||||
pagination={<RaPagination rowsPerPageOptions={[100, 250, 500]} />}
|
||||
/>
|
||||
</ReferenceManyField>
|
||||
)}
|
||||
|
|
|
@ -8,6 +8,7 @@ import {
|
|||
useNotify,
|
||||
useVersion,
|
||||
useListContext,
|
||||
ListBase,
|
||||
} from 'react-admin'
|
||||
import clsx from 'clsx'
|
||||
import { useDispatch } from 'react-redux'
|
||||
|
@ -76,8 +77,9 @@ const ReorderableList = ({ readOnly, children, ...rest }) => {
|
|||
return <ReactDragListView {...rest}>{children}</ReactDragListView>
|
||||
}
|
||||
|
||||
const PlaylistSongs = ({ playlistId, readOnly, ...props }) => {
|
||||
const { data, ids, onUnselectItems } = props
|
||||
const PlaylistSongs = ({ playlistId, readOnly, actions, ...props }) => {
|
||||
const listContext = useListContext()
|
||||
const { data, ids, onUnselectItems } = listContext
|
||||
const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
|
||||
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
|
||||
const classes = useStyles({ isDesktop })
|
||||
|
@ -128,17 +130,17 @@ const PlaylistSongs = ({ playlistId, readOnly, ...props }) => {
|
|||
<ListToolbar
|
||||
classes={{ toolbar: classes.toolbar }}
|
||||
filters={props.filters}
|
||||
actions={props.actions}
|
||||
{...props}
|
||||
actions={actions}
|
||||
{...listContext}
|
||||
/>
|
||||
<div className={classes.main}>
|
||||
<Card
|
||||
className={clsx(classes.content, {
|
||||
[classes.bulkActionsDisplayed]: props.selectedIds.length > 0,
|
||||
[classes.bulkActionsDisplayed]: listContext.selectedIds.length > 0,
|
||||
})}
|
||||
key={version}
|
||||
>
|
||||
<BulkActionsToolbar {...props}>
|
||||
<BulkActionsToolbar {...listContext}>
|
||||
<PlaylistSongBulkActions
|
||||
playlistId={playlistId}
|
||||
onUnselectItems={onUnselectItems}
|
||||
|
@ -152,7 +154,7 @@ const PlaylistSongs = ({ playlistId, readOnly, ...props }) => {
|
|||
<SongDatagrid
|
||||
expand={!isXsmall && <SongDetails />}
|
||||
rowClick={(id) => dispatch(playTracks(data, ids, id))}
|
||||
{...props}
|
||||
{...listContext}
|
||||
hasBulkActions={true}
|
||||
contextAlwaysVisible={!isDesktop}
|
||||
classes={{ row: classes.row }}
|
||||
|
@ -172,20 +174,26 @@ const PlaylistSongs = ({ playlistId, readOnly, ...props }) => {
|
|||
</Card>
|
||||
</div>
|
||||
<AddToPlaylistDialog />
|
||||
{React.cloneElement(props.pagination, listContext)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const SanitizedPlaylistSongs = (props) => {
|
||||
const { loaded, loading, total, ...rest } = useListContext(props)
|
||||
const { loaded, ...rest } = props
|
||||
return (
|
||||
<>
|
||||
{loaded && (
|
||||
<PlaylistSongs
|
||||
{...rest}
|
||||
playlistId={props.id}
|
||||
actions={props.actions}
|
||||
/>
|
||||
<>
|
||||
<ListBase {...props}>
|
||||
<PlaylistSongs
|
||||
playlistId={props.id}
|
||||
actions={props.actions}
|
||||
pagination={props.pagination}
|
||||
{...rest}
|
||||
/>
|
||||
</ListBase>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
|
|
Loading…
Reference in New Issue