112 lines
2.4 KiB
JavaScript
112 lines
2.4 KiB
JavaScript
import React, { useMemo } from 'react'
|
|
import {
|
|
Datagrid,
|
|
DateField,
|
|
EditButton,
|
|
Filter,
|
|
NumberField,
|
|
SearchInput,
|
|
TextField,
|
|
useUpdate,
|
|
useNotify,
|
|
useRecordContext,
|
|
} from 'react-admin'
|
|
import Switch from '@material-ui/core/Switch'
|
|
import { useMediaQuery } from '@material-ui/core'
|
|
import {
|
|
DurationField,
|
|
List,
|
|
Writable,
|
|
isWritable,
|
|
useSelectedFields,
|
|
useResourceRefresh,
|
|
isSmartPlaylist,
|
|
} from '../common'
|
|
import PlaylistListActions from './PlaylistListActions'
|
|
|
|
const PlaylistFilter = (props) => (
|
|
<Filter {...props} variant={'outlined'}>
|
|
<SearchInput source="q" alwaysOn />
|
|
</Filter>
|
|
)
|
|
|
|
const TogglePublicInput = ({ resource, source }) => {
|
|
const record = useRecordContext()
|
|
const notify = useNotify()
|
|
const [togglePublic] = useUpdate(
|
|
resource,
|
|
record.id,
|
|
{
|
|
...record,
|
|
public: !record.public,
|
|
},
|
|
{
|
|
undoable: false,
|
|
onFailure: (error) => {
|
|
console.log(error)
|
|
notify('ra.page.error', 'warning')
|
|
},
|
|
}
|
|
)
|
|
|
|
const handleClick = (e) => {
|
|
togglePublic()
|
|
e.stopPropagation()
|
|
}
|
|
|
|
return (
|
|
<Switch
|
|
checked={record[source]}
|
|
onClick={handleClick}
|
|
disabled={!isWritable(record.owner) || isSmartPlaylist(record)}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const PlaylistList = (props) => {
|
|
const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
|
|
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
|
|
useResourceRefresh('playlist')
|
|
|
|
const toggleableFields = useMemo(() => {
|
|
return {
|
|
owner: <TextField source="owner" />,
|
|
songCount: isDesktop && <NumberField source="songCount" />,
|
|
duration: isDesktop && <DurationField source="duration" />,
|
|
updatedAt: isDesktop && (
|
|
<DateField source="updatedAt" sortByOrder={'DESC'} />
|
|
),
|
|
public: !isXsmall && (
|
|
<TogglePublicInput source="public" sortByOrder={'DESC'} />
|
|
),
|
|
}
|
|
}, [isDesktop, isXsmall])
|
|
|
|
const columns = useSelectedFields({
|
|
resource: 'playlist',
|
|
columns: toggleableFields,
|
|
})
|
|
|
|
return (
|
|
<List
|
|
{...props}
|
|
exporter={false}
|
|
filters={<PlaylistFilter />}
|
|
actions={<PlaylistListActions />}
|
|
>
|
|
<Datagrid
|
|
rowClick="show"
|
|
isRowSelectable={(r) => isWritable(r && r.owner)}
|
|
>
|
|
<TextField source="name" />
|
|
{columns}
|
|
<Writable>
|
|
<EditButton />
|
|
</Writable>
|
|
</Datagrid>
|
|
</List>
|
|
)
|
|
}
|
|
|
|
export default PlaylistList
|