2020-05-15 19:48:33 +02:00
|
|
|
import React from 'react'
|
|
|
|
import {
|
|
|
|
BulkActionsToolbar,
|
|
|
|
DatagridLoading,
|
|
|
|
ListToolbar,
|
|
|
|
TextField,
|
2020-05-23 03:31:45 +02:00
|
|
|
DatagridBody,
|
|
|
|
Datagrid,
|
2020-05-15 19:48:33 +02:00
|
|
|
useListController,
|
2020-05-18 19:05:54 +02:00
|
|
|
useRefresh,
|
2020-05-15 19:48:33 +02:00
|
|
|
} from 'react-admin'
|
|
|
|
import classnames from 'classnames'
|
|
|
|
import { Card, useMediaQuery } from '@material-ui/core'
|
|
|
|
import { makeStyles } from '@material-ui/core/styles'
|
2020-05-23 02:15:58 +02:00
|
|
|
import {
|
|
|
|
DurationField,
|
|
|
|
SongDetails,
|
|
|
|
SongContextMenu,
|
|
|
|
SongDatagridRow,
|
|
|
|
} from '../common'
|
2020-05-26 00:34:31 +02:00
|
|
|
import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
|
2020-05-15 19:48:33 +02:00
|
|
|
|
|
|
|
const useStyles = makeStyles(
|
|
|
|
(theme) => ({
|
|
|
|
root: {},
|
|
|
|
main: {
|
|
|
|
display: 'flex',
|
|
|
|
},
|
|
|
|
content: {
|
|
|
|
marginTop: 0,
|
|
|
|
transition: theme.transitions.create('margin-top'),
|
|
|
|
position: 'relative',
|
|
|
|
flex: '1 1 auto',
|
|
|
|
[theme.breakpoints.down('xs')]: {
|
|
|
|
boxShadow: 'none',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
bulkActionsDisplayed: {
|
|
|
|
marginTop: -theme.spacing(8),
|
|
|
|
transition: theme.transitions.create('margin-top'),
|
|
|
|
},
|
|
|
|
actions: {
|
|
|
|
zIndex: 2,
|
|
|
|
display: 'flex',
|
|
|
|
justifyContent: 'flex-end',
|
|
|
|
flexWrap: 'wrap',
|
|
|
|
},
|
|
|
|
noResults: { padding: 20 },
|
|
|
|
}),
|
|
|
|
{ name: 'RaList' }
|
|
|
|
)
|
|
|
|
|
|
|
|
const useStylesListToolbar = makeStyles({
|
|
|
|
toolbar: {
|
|
|
|
justifyContent: 'flex-start',
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|
2020-05-23 20:11:39 +02:00
|
|
|
const SongsDatagridBody = (props) => (
|
|
|
|
<DatagridBody {...props} row={<SongDatagridRow contextVisible={true} />} />
|
|
|
|
)
|
|
|
|
|
|
|
|
const SongsDatagrid = ({ contextVisible, ...rest }) => {
|
|
|
|
return <Datagrid {...rest} body={<SongsDatagridBody />} />
|
|
|
|
}
|
|
|
|
|
2020-05-15 19:48:33 +02:00
|
|
|
const PlaylistSongs = (props) => {
|
|
|
|
const classes = useStyles(props)
|
|
|
|
const classesToolbar = useStylesListToolbar(props)
|
|
|
|
const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
|
2020-05-19 00:00:55 +02:00
|
|
|
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
|
2020-05-15 19:48:33 +02:00
|
|
|
const controllerProps = useListController(props)
|
2020-05-18 19:05:54 +02:00
|
|
|
const refresh = useRefresh()
|
2020-05-16 02:47:15 +02:00
|
|
|
const { bulkActionButtons, expand, className, playlistId } = props
|
|
|
|
const { data, ids, version, loaded } = controllerProps
|
2020-05-15 19:48:33 +02:00
|
|
|
|
|
|
|
const anySong = data[ids[0]]
|
2020-05-16 02:47:15 +02:00
|
|
|
const showPlaceholder = !anySong || anySong.playlistId !== playlistId
|
2020-05-15 19:48:33 +02:00
|
|
|
const hasBulkActions = props.bulkActionButtons !== false
|
|
|
|
|
2020-05-16 02:47:15 +02:00
|
|
|
if (loaded && ids.length === 0) {
|
|
|
|
return <div />
|
|
|
|
}
|
|
|
|
|
2020-05-25 20:50:46 +02:00
|
|
|
const onAddToPlaylist = (pls) => {
|
|
|
|
if (pls.id === props.id) {
|
2020-05-18 19:05:54 +02:00
|
|
|
refresh()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-05-15 19:48:33 +02:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<ListToolbar
|
|
|
|
classes={classesToolbar}
|
|
|
|
filters={props.filters}
|
|
|
|
{...controllerProps}
|
|
|
|
actions={props.actions}
|
|
|
|
permanentFilter={props.filter}
|
|
|
|
/>
|
|
|
|
<div className={classes.main}>
|
|
|
|
<Card
|
|
|
|
className={classnames(classes.content, {
|
|
|
|
[classes.bulkActionsDisplayed]:
|
|
|
|
controllerProps.selectedIds.length > 0,
|
|
|
|
})}
|
|
|
|
key={version}
|
|
|
|
>
|
|
|
|
{bulkActionButtons !== false && bulkActionButtons && (
|
|
|
|
<BulkActionsToolbar {...controllerProps}>
|
|
|
|
{bulkActionButtons}
|
|
|
|
</BulkActionsToolbar>
|
|
|
|
)}
|
|
|
|
{showPlaceholder ? (
|
|
|
|
<DatagridLoading
|
|
|
|
classes={classes}
|
|
|
|
className={className}
|
|
|
|
expand={expand}
|
|
|
|
hasBulkActions={hasBulkActions}
|
|
|
|
nbChildren={3}
|
|
|
|
size={'small'}
|
|
|
|
/>
|
|
|
|
) : (
|
2020-05-23 02:15:58 +02:00
|
|
|
<SongsDatagrid
|
2020-05-15 19:48:33 +02:00
|
|
|
expand={!isXsmall && <SongDetails />}
|
|
|
|
rowClick={null}
|
|
|
|
{...controllerProps}
|
|
|
|
hasBulkActions={hasBulkActions}
|
|
|
|
>
|
2020-05-19 00:00:55 +02:00
|
|
|
{isDesktop && <TextField source="id" label={'#'} />}
|
2020-05-18 19:21:47 +02:00
|
|
|
<TextField source="title" />
|
2020-05-19 00:00:55 +02:00
|
|
|
{isDesktop && <TextField source="artist" />}
|
2020-05-18 19:21:47 +02:00
|
|
|
<DurationField source="duration" />
|
2020-05-23 20:11:39 +02:00
|
|
|
<SongContextMenu
|
|
|
|
onAddToPlaylist={onAddToPlaylist}
|
|
|
|
showStar={false}
|
|
|
|
/>
|
2020-05-23 02:15:58 +02:00
|
|
|
</SongsDatagrid>
|
2020-05-15 19:48:33 +02:00
|
|
|
)}
|
|
|
|
</Card>
|
|
|
|
</div>
|
2020-05-26 00:34:31 +02:00
|
|
|
<AddToPlaylistDialog />,
|
2020-05-15 19:48:33 +02:00
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default PlaylistSongs
|