cf8ee251ee
* Add toggleColumns - Add logic for toggling columns - Add MenuComponent + useSelectedFields hook * Refactoring * eslint-fixes * Typo * skip menu in albumGridView * add omittedFields * Add toggling for playlists and albumSong * Refactoring * defaultProps - fix * Add toggling for PlaylistSongs * remove accidental console log * Refactoring for future compatibility * Hide ToggleMenu in albumGridView * Add TopBarComponent in ToggleFieldsMenu * Add defaultOff for useSelectedFields * Fix edge case * eslint fix * Refactoring * Add propType for forwardRef * Fix issues * add translation for grid and table * add translation for grid and table * Ignore menuBtn for spotify-ish and Ligera themes * hide bpm by default in playlistSongs * Add memoization * Default album view must be Grid Co-authored-by: Deluan <deluan@navidrome.org>
72 lines
1.8 KiB
JavaScript
72 lines
1.8 KiB
JavaScript
import React from 'react'
|
|
import {
|
|
ReferenceManyField,
|
|
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: {
|
|
width: '100%',
|
|
},
|
|
}),
|
|
{
|
|
name: 'NDPlaylistShow',
|
|
}
|
|
)
|
|
|
|
const PlaylistShowLayout = (props) => {
|
|
const { loading, ...context } = useShowContext(props)
|
|
const { record } = context
|
|
const classes = useStyles()
|
|
|
|
return (
|
|
<>
|
|
{record && <PlaylistDetails {...context} />}
|
|
{record && (
|
|
<ReferenceManyField
|
|
{...context}
|
|
addLabel={false}
|
|
reference="playlistTrack"
|
|
target="playlist_id"
|
|
sort={{ field: 'id', order: 'ASC' }}
|
|
perPage={100}
|
|
filter={{ playlist_id: props.id }}
|
|
>
|
|
<PlaylistSongs
|
|
{...props}
|
|
readOnly={isReadOnly(record.owner)}
|
|
title={<Title subTitle={record.name} />}
|
|
actions={
|
|
<PlaylistActions
|
|
className={classes.playlistActions}
|
|
record={record}
|
|
/>
|
|
}
|
|
resource={'playlistTrack'}
|
|
exporter={false}
|
|
pagination={<RaPagination rowsPerPageOptions={[100, 250, 500]} />}
|
|
/>
|
|
</ReferenceManyField>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
const PlaylistShow = (props) => {
|
|
const controllerProps = useShowController(props)
|
|
return (
|
|
<ShowContextProvider value={controllerProps}>
|
|
<PlaylistShowLayout {...props} {...controllerProps} />
|
|
</ShowContextProvider>
|
|
)
|
|
}
|
|
|
|
export default PlaylistShow
|