Fix Album View
This commit is contained in:
Deluan
Deluan Quintão
parent
3209430ebd
commit
f5808288ab
|
|
@ -1,40 +1,50 @@
|
|||
import React from 'react'
|
||||
import { useGetOne } from 'react-admin'
|
||||
import AlbumDetails from './AlbumDetails'
|
||||
import { Title } from '../common'
|
||||
import { SongBulkActions } from '../common'
|
||||
import AlbumActions from './AlbumActions'
|
||||
import {
|
||||
ReferenceManyField,
|
||||
ShowContextProvider,
|
||||
useShowContext,
|
||||
useShowController,
|
||||
} from 'react-admin'
|
||||
import AlbumSongs from './AlbumSongs'
|
||||
import AlbumDetails from './AlbumDetails'
|
||||
import AlbumActions from './AlbumActions'
|
||||
|
||||
const AlbumShow = (props) => {
|
||||
const { data: record, loading, error } = useGetOne('album', props.id)
|
||||
|
||||
if (loading) {
|
||||
return null
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <p>ERROR: {error}</p>
|
||||
}
|
||||
const AlbumShowLayout = (props) => {
|
||||
console.log('show', props)
|
||||
const { loading, ...context } = useShowContext(props)
|
||||
const { record } = context
|
||||
|
||||
return (
|
||||
<>
|
||||
<AlbumDetails {...props} record={record} />
|
||||
<AlbumSongs
|
||||
{...props}
|
||||
albumId={props.id}
|
||||
title={<Title subTitle={record.name} />}
|
||||
actions={<AlbumActions record={record} />}
|
||||
filter={{ album_id: props.id }}
|
||||
resource={'albumSong'}
|
||||
exporter={false}
|
||||
perPage={0}
|
||||
pagination={null}
|
||||
sort={{ field: 'discNumber asc, trackNumber asc', order: 'ASC' }}
|
||||
bulkActionButtons={<SongBulkActions />}
|
||||
/>
|
||||
{record && <AlbumDetails {...context} />}
|
||||
{record && (
|
||||
<ReferenceManyField
|
||||
{...context}
|
||||
addLabel={false}
|
||||
reference="albumSong"
|
||||
target="album_id"
|
||||
sort={{ field: 'discNumber asc, trackNumber asc', order: 'ASC' }}
|
||||
perPage={0}
|
||||
pagination={null}
|
||||
>
|
||||
<AlbumSongs
|
||||
resource={'albumSong'}
|
||||
exporter={false}
|
||||
actions={<AlbumActions record={record} />}
|
||||
/>
|
||||
</ReferenceManyField>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const AlbumShow = (props) => {
|
||||
const controllerProps = useShowController(props)
|
||||
return (
|
||||
<ShowContextProvider value={controllerProps}>
|
||||
<AlbumShowLayout {...props} {...controllerProps} />
|
||||
</ShowContextProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export default AlbumShow
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import React from 'react'
|
||||
import {
|
||||
BulkActionsToolbar,
|
||||
DatagridLoading,
|
||||
ListToolbar,
|
||||
TextField,
|
||||
useListController,
|
||||
useVersion,
|
||||
useListContext,
|
||||
} from 'react-admin'
|
||||
import classnames from 'classnames'
|
||||
import { useDispatch } from 'react-redux'
|
||||
|
|
@ -14,6 +14,7 @@ import StarBorderIcon from '@material-ui/icons/StarBorder'
|
|||
import { playTracks } from '../actions'
|
||||
import {
|
||||
DurationField,
|
||||
SongBulkActions,
|
||||
SongContextMenu,
|
||||
SongDatagrid,
|
||||
SongDetails,
|
||||
|
|
@ -52,97 +53,74 @@ const useStyles = makeStyles(
|
|||
marginTop: '-2px',
|
||||
verticalAlign: 'text-top',
|
||||
},
|
||||
toolbar: {
|
||||
justifyContent: 'flex-start',
|
||||
},
|
||||
}),
|
||||
{ name: 'RaList' }
|
||||
)
|
||||
|
||||
const useStylesListToolbar = makeStyles({
|
||||
toolbar: {
|
||||
justifyContent: 'flex-start',
|
||||
},
|
||||
})
|
||||
|
||||
const AlbumSongs = (props) => {
|
||||
console.log('songs', props)
|
||||
const listContext = props
|
||||
const classes = useStyles(props)
|
||||
const classesToolbar = useStylesListToolbar(props)
|
||||
const dispatch = useDispatch()
|
||||
const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
|
||||
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
|
||||
const controllerProps = useListController(props)
|
||||
const { bulkActionButtons, albumId, className } = props
|
||||
const { data, ids, version } = controllerProps
|
||||
|
||||
const anySong = data[ids[0]]
|
||||
const showPlaceholder = !anySong || anySong.albumId !== albumId
|
||||
const hasBulkActions = props.bulkActionButtons !== false
|
||||
|
||||
const { id: album_id, data, ids } = listContext
|
||||
const version = useVersion()
|
||||
return (
|
||||
<>
|
||||
<ListToolbar
|
||||
classes={classesToolbar}
|
||||
filters={props.filters}
|
||||
{...controllerProps}
|
||||
classes={{ toolbar: classes.toolbar }}
|
||||
actions={props.actions}
|
||||
permanentFilter={props.filter}
|
||||
permanentFilter={{ album_id }}
|
||||
{...listContext}
|
||||
/>
|
||||
<div className={classes.main}>
|
||||
<Card
|
||||
className={classnames(classes.content, {
|
||||
[classes.bulkActionsDisplayed]:
|
||||
controllerProps.selectedIds.length > 0,
|
||||
[classes.bulkActionsDisplayed]: listContext.selectedIds.length > 0,
|
||||
})}
|
||||
key={version}
|
||||
>
|
||||
{bulkActionButtons !== false && bulkActionButtons && (
|
||||
<BulkActionsToolbar {...controllerProps}>
|
||||
{bulkActionButtons}
|
||||
</BulkActionsToolbar>
|
||||
)}
|
||||
{showPlaceholder ? (
|
||||
<DatagridLoading
|
||||
classes={classes}
|
||||
className={className}
|
||||
expand={null}
|
||||
hasBulkActions={hasBulkActions}
|
||||
nbChildren={3}
|
||||
size={'small'}
|
||||
<BulkActionsToolbar {...listContext}>
|
||||
<SongBulkActions />
|
||||
</BulkActionsToolbar>
|
||||
<SongDatagrid
|
||||
expand={isXsmall ? null : <SongDetails />}
|
||||
rowClick={(id) => dispatch(playTracks(data, ids, id))}
|
||||
{...listContext}
|
||||
hasBulkActions={true}
|
||||
showDiscSubtitles={true}
|
||||
contextAlwaysVisible={!isDesktop}
|
||||
>
|
||||
{isDesktop && (
|
||||
<TextField
|
||||
source="trackNumber"
|
||||
sortBy="discNumber asc, trackNumber asc"
|
||||
label="#"
|
||||
sortable={false}
|
||||
/>
|
||||
)}
|
||||
<SongTitleField
|
||||
source="title"
|
||||
sortable={false}
|
||||
showTrackNumbers={!isDesktop}
|
||||
/>
|
||||
) : (
|
||||
<SongDatagrid
|
||||
expand={isXsmall ? null : <SongDetails />}
|
||||
rowClick={(id) => dispatch(playTracks(data, ids, id))}
|
||||
{...controllerProps}
|
||||
hasBulkActions={hasBulkActions}
|
||||
showDiscSubtitles={true}
|
||||
contextAlwaysVisible={!isDesktop}
|
||||
>
|
||||
{isDesktop && (
|
||||
<TextField
|
||||
source="trackNumber"
|
||||
sortBy="discNumber asc, trackNumber asc"
|
||||
label="#"
|
||||
sortable={false}
|
||||
{isDesktop && <TextField source="artist" sortable={false} />}
|
||||
<DurationField source="duration" sortable={false} />
|
||||
<SongContextMenu
|
||||
source={'starred'}
|
||||
sortable={false}
|
||||
label={
|
||||
<StarBorderIcon
|
||||
fontSize={'small'}
|
||||
className={classes.columnIcon}
|
||||
/>
|
||||
)}
|
||||
<SongTitleField
|
||||
source="title"
|
||||
sortable={false}
|
||||
showTrackNumbers={!isDesktop}
|
||||
/>
|
||||
{isDesktop && <TextField source="artist" sortable={false} />}
|
||||
<DurationField source="duration" sortable={false} />
|
||||
<SongContextMenu
|
||||
source={'starred'}
|
||||
sortable={false}
|
||||
label={
|
||||
<StarBorderIcon
|
||||
fontSize={'small'}
|
||||
className={classes.columnIcon}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</SongDatagrid>
|
||||
)}
|
||||
}
|
||||
/>
|
||||
</SongDatagrid>
|
||||
</Card>
|
||||
</div>
|
||||
<AddToPlaylistDialog />
|
||||
|
|
@ -150,4 +128,9 @@ const AlbumSongs = (props) => {
|
|||
)
|
||||
}
|
||||
|
||||
export default AlbumSongs
|
||||
const SanitizedAlbumSongs = (props) => {
|
||||
const { loaded, loading, total, ...rest } = useListContext(props)
|
||||
return <>{loaded && <AlbumSongs {...rest} actions={props.actions} />}</>
|
||||
}
|
||||
|
||||
export default SanitizedAlbumSongs
|
||||
|
|
|
|||
|
|
@ -138,6 +138,9 @@ export const SongDatagrid = ({
|
|||
)
|
||||
|
||||
const firstTracks = useMemo(() => {
|
||||
if (!ids) {
|
||||
return new Set()
|
||||
}
|
||||
const set = new Set(
|
||||
ids
|
||||
.filter((i) => data[i])
|
||||
|
|
|
|||
Loading…
Reference in New Issue