Show Playlist tracks

ui/src/playlist/PlaylistDetails.js

@@ -0,0 +1,59 @@
+import React from 'react'
+import { Card, CardContent, Typography } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import { useTranslate } from 'react-admin'
+import { DurationField } from '../common'
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    [theme.breakpoints.down('xs')]: {
+      padding: '0.7em',
+      minWidth: '24em',
+    },
+    [theme.breakpoints.up('sm')]: {
+      padding: '1em',
+      minWidth: '32em',
+    },
+  },
+  details: {
+    display: 'inline-block',
+    verticalAlign: 'top',
+    [theme.breakpoints.down('xs')]: {
+      width: '14em',
+    },
+    [theme.breakpoints.up('sm')]: {
+      width: '26em',
+    },
+    [theme.breakpoints.up('lg')]: {
+      width: '38em',
+    },
+  },
+  title: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+}))
+
+const PlaylistDetails = ({ record }) => {
+  const translate = useTranslate()
+  const classes = useStyles()
+
+  return (
+    <Card className={classes.container}>
+      <CardContent className={classes.details}>
+        <Typography variant="h5" className={classes.title}>
+          {record.name}
+        </Typography>
+        <Typography component="h6">{record.comment}</Typography>
+        <Typography component="p">
+          {record.songCount}{' '}
+          {translate('resources.song.name', { smart_count: record.songCount })}{' '}
+          · <DurationField record={record} source={'duration'} />
+        </Typography>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default PlaylistDetails

ui/src/playlist/PlaylistList.js

@@ -10,7 +10,7 @@ import { DurationField, List } from '../common'
 
 const PlaylistList = (props) => (
   <List {...props} exporter={false}>
-    <Datagrid rowClick="edit">
+    <Datagrid rowClick="show">
       <TextField source="name" />
       <TextField source="owner" />
       <BooleanField source="public" />

ui/src/playlist/PlaylistShow.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import { useGetOne } from 'react-admin'
+import PlaylistDetails from './PlaylistDetails'
+import { Title } from '../common'
+import PlaylistSongs from './PlaylistSongs'
+
+const PlaylistShow = (props) => {
+  const { data: record, loading, error } = useGetOne('playlist', props.id)
+
+  if (loading) {
+    return null
+  }
+
+  if (error) {
+    return <p>ERROR: {error}</p>
+  }
+
+  return (
+    <>
+      <PlaylistDetails {...props} record={record} />
+      <PlaylistSongs
+        {...props}
+        playlistId={props.id}
+        title={<Title subTitle={record.name} />}
+        // actions={<AlbumActions />}
+        filter={{ playlist_id: props.id }}
+        resource={'playlistTrack'}
+        exporter={false}
+        perPage={-1}
+        pagination={null}
+        bulkActionButtons={false}
+        // bulkActionButtons={<AlbumSongBulkActions />}
+      />
+    </>
+  )
+}
+
+export default PlaylistShow

ui/src/playlist/PlaylistSongs.js

@@ -0,0 +1,113 @@
+import React from 'react'
+import {
+  BulkActionsToolbar,
+  Datagrid,
+  DatagridLoading,
+  ListToolbar,
+  TextField,
+  useListController,
+} from 'react-admin'
+import classnames from 'classnames'
+import { Card, useMediaQuery } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import { DurationField, SongDetails } from '../common'
+
+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',
+  },
+})
+
+const PlaylistSongs = (props) => {
+  const classes = useStyles(props)
+  const classesToolbar = useStylesListToolbar(props)
+  const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
+  // const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
+  const controllerProps = useListController(props)
+  const { bulkActionButtons, expand, className } = props
+  const { data, ids, version } = controllerProps
+
+  const anySong = data[ids[0]]
+  const showPlaceholder = !anySong
+  const hasBulkActions = props.bulkActionButtons !== false
+
+  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'}
+            />
+          ) : (
+            <Datagrid
+              expand={!isXsmall && <SongDetails />}
+              rowClick={null}
+              {...controllerProps}
+              hasBulkActions={hasBulkActions}
+            >
+              <TextField source="title" sortable={false} />
+              <TextField source="artist" sortable={false} />
+              <DurationField source="duration" sortable={false} />
+            </Datagrid>
+          )}
+        </Card>
+      </div>
+    </>
+  )
+}
+
+export default PlaylistSongs

ui/src/playlist/index.js

@@ -2,10 +2,12 @@ import PlaylistIcon from '../icons/Playlist'
 import PlaylistList from './PlaylistList'
 import PlaylistEdit from './PlaylistEdit'
 import PlaylistCreate from './PlaylistCreate'
+import PlaylistShow from './PlaylistShow'
 
 export default {
   icon: PlaylistIcon,
   list: PlaylistList,
   create: PlaylistCreate,
   edit: PlaylistEdit,
+  show: PlaylistShow,
 }

ui/src/playlist/styles.js

@@ -0,0 +1,47 @@
+import { makeStyles } from '@material-ui/core/styles'
+
+export const useStyles = makeStyles((theme) => ({
+  container: {
+    [theme.breakpoints.down('xs')]: {
+      padding: '0.7em',
+      minWidth: '24em',
+    },
+    [theme.breakpoints.up('sm')]: {
+      padding: '1em',
+      minWidth: '32em',
+    },
+  },
+  albumCover: {
+    display: 'inline-block',
+    [theme.breakpoints.down('xs')]: {
+      height: '8em',
+      width: '8em',
+    },
+    [theme.breakpoints.up('sm')]: {
+      height: '10em',
+      width: '10em',
+    },
+    [theme.breakpoints.up('lg')]: {
+      height: '15em',
+      width: '15em',
+    },
+  },
+  albumDetails: {
+    display: 'inline-block',
+    verticalAlign: 'top',
+    [theme.breakpoints.down('xs')]: {
+      width: '14em',
+    },
+    [theme.breakpoints.up('sm')]: {
+      width: '26em',
+    },
+    [theme.breakpoints.up('lg')]: {
+      width: '38em',
+    },
+  },
+  albumTitle: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+}))