Add AlbumContextMenu to AlbumListView

ui/src/album/AlbumContextMenu.js

@@ -14,7 +14,7 @@ const useStyles = makeStyles({
   },
 })
 
-const AlbumContextMenu = (props) => {
+const AlbumContextMenu = ({ record }) => {
   const classes = useStyles()
   const dataProvider = useDataProvider()
   const dispatch = useDispatch()
@@ -35,22 +35,23 @@ const AlbumContextMenu = (props) => {
   const handleClick = (e) => {
     e.preventDefault()
     setAnchorEl(e.currentTarget)
+    e.stopPropagation()
   }
 
   const handleOnClose = (e) => {
     e.preventDefault()
     setAnchorEl(null)
+    e.stopPropagation()
   }
 
   const handleItemClick = (e) => {
-    e.preventDefault()
     setAnchorEl(null)
     const key = e.target.getAttribute('value')
     dataProvider
       .getList('albumSong', {
         pagination: { page: 1, perPage: -1 },
         sort: { field: 'trackNumber', order: 'ASC' },
-        filter: { album_id: props.id },
+        filter: { album_id: record.id },
       })
       .then((response) => {
         const adata = response.data.reduce(
@@ -59,6 +60,7 @@ const AlbumContextMenu = (props) => {
         )
         dispatch(options[key].action(adata, response.data[0].id))
       })
+    e.stopPropagation()
   }
 
   return (

ui/src/album/AlbumGridView.js

@@ -95,7 +95,7 @@ const LoadedAlbumGrid = ({ ids, data, basePath, width }) => {
                   </ArtistLinkField>
                 </div>
               }
-              actionIcon={<AlbumContextMenu id={id} />}
+              actionIcon={<AlbumContextMenu record={data[id]} />}
             />
           </GridListTile>
         ))}

ui/src/album/AlbumListView.js

@@ -11,6 +11,7 @@ import {
 } from 'react-admin'
 import { DurationField, RangeField } from '../common'
 import { useMediaQuery } from '@material-ui/core'
+import AlbumContextMenu from './AlbumContextMenu'
 
 const AlbumDetails = (props) => {
   return (
@@ -36,8 +37,9 @@ const AlbumListView = ({ hasShow, hasEdit, hasList, ...rest }) => {
       />
       {isDesktop && <NumberField source="songCount" />}
       {isDesktop && <NumberField source="playCount" />}
-      <RangeField source={'year'} sortBy={'maxYear'} />
+      {isDesktop && <RangeField source={'year'} sortBy={'maxYear'} />}
       {isDesktop && <DurationField source="duration" />}
+      <AlbumContextMenu />
     </Datagrid>
   )
 }