Add tracks to playlist

ui/src/common/SelectPlaylistDialog.js

@@ -0,0 +1,77 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useGetList, useTranslate } from 'react-admin'
+import { makeStyles } from '@material-ui/core/styles'
+import Avatar from '@material-ui/core/Avatar'
+import List from '@material-ui/core/List'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemAvatar from '@material-ui/core/ListItemAvatar'
+import ListItemText from '@material-ui/core/ListItemText'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import Dialog from '@material-ui/core/Dialog'
+import { blue } from '@material-ui/core/colors'
+import PlaylistIcon from '../icons/Playlist'
+
+const useStyles = makeStyles({
+  avatar: {
+    backgroundColor: blue[100],
+    color: blue[600],
+  },
+})
+
+function SelectPlaylistDialog(props) {
+  const classes = useStyles()
+  const translate = useTranslate()
+  const { onClose, selectedValue, open } = props
+  const { ids, data, loaded } = useGetList(
+    'playlist',
+    { page: 1, perPage: -1 },
+    { field: '', order: '' },
+    {}
+  )
+
+  if (!loaded) {
+    return <div />
+  }
+
+  const handleClose = () => {
+    onClose(selectedValue)
+  }
+
+  const handleListItemClick = (value) => {
+    onClose(value)
+  }
+
+  return (
+    <Dialog
+      onClose={handleClose}
+      aria-labelledby="select-playlist-dialog-title"
+      open={open}
+      scroll={'paper'}
+    >
+      <DialogTitle id="select-playlist-dialog-title">
+        {translate('resources.playlist.actions.selectPlaylist')}
+      </DialogTitle>
+      <List>
+        {ids.map((id) => (
+          <ListItem button onClick={() => handleListItemClick(id)} key={id}>
+            <ListItemAvatar>
+              <Avatar className={classes.avatar}>
+                <PlaylistIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary={data[id].name} />
+          </ListItem>
+        ))}
+      </List>
+    </Dialog>
+  )
+}
+
+SelectPlaylistDialog.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  open: PropTypes.bool.isRequired,
+  selectedValue: PropTypes.string.isRequired,
+}
+
+export default SelectPlaylistDialog

ui/src/common/index.js

@@ -11,6 +11,7 @@ import SizeField from './SizeField'
 import DocLink from './DocLink'
 import List from './List'
 import SongDatagridRow from './SongDatagridRow'
+import SelectPlaylistDialog from './SelectPlaylistDialog'
 
 export {
   Title,
@@ -28,4 +29,5 @@ export {
   formatRange,
   ArtistLinkField,
   artistLink,
+  SelectPlaylistDialog,
 }

ui/src/dataProvider/wrapperDataProvider.js

@@ -6,7 +6,6 @@ const restUrl = '/app/api'
 const dataProvider = jsonServerProvider(restUrl, httpClient)
 
 const mapResource = (resource, params) => {
-  console.log('R: ', resource, 'P: ', params)
   switch (resource) {
     case 'albumSong':
       return ['song', params]

ui/src/i18n/en.json

@@ -22,6 +22,7 @@
             },
             "actions": {
                 "addToQueue": "Play Later",
+                "addToPlaylist": "Add to Playlist",
                 "playNow": "Play Now"
             }
         },
@@ -63,6 +64,9 @@
                 "public": "Public",
                 "updatedAt":"Updated at",
                 "createdAt": "Created at"
+            },
+            "actions": {
+                "selectPlaylist": "Add songs to playlist:"
             }
         },
         "user": {

ui/src/playlist/PlaylistSongs.js

@@ -54,13 +54,17 @@ const PlaylistSongs = (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 { bulkActionButtons, expand, className, playlistId } = props
+  const { data, ids, version, loaded } = controllerProps
 
   const anySong = data[ids[0]]
-  const showPlaceholder = !anySong
+  const showPlaceholder = !anySong || anySong.playlistId !== playlistId
   const hasBulkActions = props.bulkActionButtons !== false
 
+  if (loaded && ids.length === 0) {
+    return <div />
+  }
+
   return (
     <>
       <ListToolbar

ui/src/song/AddToPlaylistButton.js

@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  useTranslate,
+  useUnselectAll,
+  useDataProvider,
+  useNotify,
+} from 'react-admin'
+import SelectPlaylistDialog from '../common/SelectPlaylistDialog'
+import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd'
+
+const AddToPlaylistButton = ({ resource, selectedIds }) => {
+  const [open, setOpen] = useState(false)
+  const [selectedValue, setSelectedValue] = useState('')
+  const translate = useTranslate()
+  const unselectAll = useUnselectAll()
+  const notify = useNotify()
+  const dataProvider = useDataProvider()
+
+  const handleClickOpen = () => {
+    setOpen(true)
+  }
+
+  const handleClose = (value) => {
+    if (value !== '') {
+      dataProvider
+        .create('playlistTrack', {
+          data: { ids: selectedIds },
+          filter: { playlist_id: value },
+        })
+        .then(() => {
+          notify(`Added ${selectedIds.length} songs to playlist`)
+        })
+        .catch(() => {
+          notify('ra.page.error', 'warning')
+        })
+    }
+    setOpen(false)
+    setSelectedValue(value)
+    unselectAll(resource)
+  }
+
+  return (
+    <>
+      <Button
+        color="secondary"
+        onClick={handleClickOpen}
+        label={translate('resources.song.actions.addToPlaylist')}
+      >
+        <PlaylistAddIcon />
+      </Button>
+      <SelectPlaylistDialog
+        selectedValue={selectedValue}
+        open={open}
+        onClose={handleClose}
+      />
+    </>
+  )
+}
+
+export default AddToPlaylistButton

ui/src/song/SongBulkActions.js

@@ -1,10 +1,12 @@
 import React, { Fragment } from 'react'
 import AddToQueueButton from './AddToQueueButton'
+import AddToPlaylistButton from './AddToPlaylistButton'
 
 export const SongBulkActions = (props) => {
   return (
     <Fragment>
       <AddToQueueButton {...props} />
+      <AddToPlaylistButton {...props} />
     </Fragment>
   )
 }