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,
 }