feat: option to display albums as a grid

2020-03-28 16:25:55 -04:00
parent fc0621646b
commit f1af646cee
7 changed files with 271 additions and 42 deletions
@@ -0,0 +1,43 @@
+import React from 'react'
+import {
+  BooleanField,
+  Datagrid,
+  DateField,
+  NumberField,
+  FunctionField,
+  Show,
+  SimpleShowLayout,
+  TextField
+} from 'react-admin'
+import { DurationField, RangeField } from '../common'
+import { useMediaQuery } from '@material-ui/core'
+
+const AlbumDetails = (props) => {
+  return (
+    <Show {...props} title=" ">
+      <SimpleShowLayout>
+        <TextField source="albumArtist" />
+        <TextField source="genre" />
+        <BooleanField source="compilation" />
+        <DateField source="updatedAt" showTime />
+      </SimpleShowLayout>
+    </Show>
+  )
+}
+
+const AlbumListView = (props) => {
+  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
+  return (
+    <Datagrid {...props} expand={<AlbumDetails />} rowClick={'show'}>
+      <TextField source="name" />
+      <FunctionField
+        source="artist"
+        render={(r) => (r.albumArtist ? r.albumArtist : r.artist)}
+      />
+      {isDesktop && <NumberField source="songCount" />}
+      <RangeField source={'year'} sortBy={'maxYear'} />
+      {isDesktop && <DurationField source="duration" />}
+    </Datagrid>
+  )
+}
+export default AlbumListView