Add "AddToPlaylist" to AlbumContextMenu

ui/src/common/AddToPlaylistMenu.js

@@ -0,0 +1,88 @@
+import React from 'react'
+import {
+  useDataProvider,
+  useGetList,
+  useNotify,
+  useTranslate,
+} from 'react-admin'
+import { MenuItem } from '@material-ui/core'
+import PropTypes from 'prop-types'
+
+export const addTracksToPlaylist = (dataProvider, selectedIds, playlistId) =>
+  dataProvider
+    .create('playlistTrack', {
+      data: { ids: selectedIds },
+      filter: { playlist_id: playlistId },
+    })
+    .then(() => selectedIds.length)
+
+export const addAlbumToPlaylist = (dataProvider, albumId, playlistId) =>
+  dataProvider
+    .getList('albumSong', {
+      pagination: { page: 1, perPage: -1 },
+      sort: { field: 'discNumber asc, trackNumber asc', order: 'ASC' },
+      filter: { album_id: albumId },
+    })
+    .then((response) => response.data.map((song) => song.id))
+    .then((ids) => addTracksToPlaylist(dataProvider, ids, playlistId))
+
+const AddToPlaylistMenu = ({ selectedIds, albumId, onClose }) => {
+  const translate = useTranslate()
+  const notify = useNotify()
+  const dataProvider = useDataProvider()
+  const { ids, data, loaded } = useGetList(
+    'playlist',
+    { page: 1, perPage: -1 },
+    { field: 'name', order: 'ASC' },
+    {}
+  )
+
+  if (!loaded) {
+    return <MenuItem>Loading...</MenuItem>
+  }
+
+  const handleItemClick = (e) => {
+    e.preventDefault()
+    const value = e.target.getAttribute('value')
+    if (value !== '') {
+      const add = albumId
+        ? addAlbumToPlaylist(dataProvider, albumId, value)
+        : addTracksToPlaylist(dataProvider, selectedIds, value)
+
+      add
+        .then((len) => {
+          notify(
+            translate('message.songsAddedToPlaylist', {
+              smart_count: len,
+            })
+          )
+        })
+        .catch(() => {
+          notify('ra.page.error', 'warning')
+        })
+    }
+    e.stopPropagation()
+    onClose && onClose()
+  }
+
+  return (
+    <>
+      {ids.map((id) => (
+        <MenuItem value={id} key={id} onClick={handleItemClick}>
+          {data[id].name}
+        </MenuItem>
+      ))}
+    </>
+  )
+}
+
+AddToPlaylistMenu.propTypes = {
+  selectedIds: PropTypes.arrayOf(PropTypes.any).isRequired,
+  albumId: PropTypes.string,
+}
+
+AddToPlaylistMenu.defaultProps = {
+  selectedIds: [],
+}
+
+export default AddToPlaylistMenu

ui/src/common/SelectPlaylistDialog.js

@@ -1,77 +0,0 @@
-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,7 +11,7 @@ import SizeField from './SizeField'
 import DocLink from './DocLink'
 import List from './List'
 import SongDatagridRow from './SongDatagridRow'
-import SelectPlaylistDialog from './SelectPlaylistDialog'
+import AddToPlaylistMenu from './AddToPlaylistMenu'
 
 export {
   Title,
@@ -29,5 +29,5 @@ export {
   formatRange,
   ArtistLinkField,
   artistLink,
-  SelectPlaylistDialog,
+  AddToPlaylistMenu,
 }