Initial support for album browsing from UI

This commit is contained in:
Deluan
2020-01-22 12:32:31 -05:00
parent 3a8124a1de
commit ea30b4c2d9
6 changed files with 94 additions and 28 deletions
+2
View File
@@ -6,6 +6,7 @@ import authProvider from './authProvider'
import { Login } from './layout'
import user from './user'
import song from './song'
import album from './album'
const App = () => (
<Admin
@@ -14,6 +15,7 @@ const App = () => (
loginPage={Login}
>
<Resource name="song" {...song} />
<Resource name="album" {...album} />
<Resource name="user" {...user} />
</Admin>
)
+57
View File
@@ -0,0 +1,57 @@
import React from 'react'
import {
BooleanField,
Datagrid,
DateField,
Filter,
List,
NumberField,
SearchInput,
TextInput,
Show,
SimpleShowLayout,
TextField
} from 'react-admin'
import { BitrateField, DurationField, Title } from '../common'
const AlbumFilter = (props) => (
<Filter {...props}>
<SearchInput source="name" alwaysOn />
<TextInput source="artist" />
</Filter>
)
const AlbumDetails = (props) => {
return (
<Show {...props} title=" ">
<SimpleShowLayout>
<TextField label="Album Artist" source="albumArtist" />
<TextField source="genre" />
<BooleanField source="compilation" />
<DateField source="updatedAt" showTime />
</SimpleShowLayout>
</Show>
)
}
const AlbumList = (props) => (
<List
{...props}
title={<Title subTitle={'Albums'} />}
sort={{ field: 'name', order: 'ASC' }}
exporter={false}
bulkActionButtons={false}
filters={<AlbumFilter />}
perPage={15}
>
<Datagrid expand={<AlbumDetails />}>
<TextField source="name" />
<TextField source="artist" />
<NumberField source="songCount" />
<TextField source="year" />
<DurationField label="Time" source="duration" />
</Datagrid>
</List>
)
export default AlbumList
+7
View File
@@ -0,0 +1,7 @@
import AlbumIcon from '@material-ui/icons/Album'
import AlbumList from './AlbumList'
export default {
list: AlbumList,
icon: AlbumIcon
}
+2 -2
View File
@@ -1,7 +1,7 @@
import MusicNote from '@material-ui/icons/MusicNote'
import MusicNoteIcon from '@material-ui/icons/MusicNote'
import SongList from './SongList'
export default {
list: SongList,
icon: MusicNote
icon: MusicNoteIcon
}