Better layout for Song Details

ui/src/common/SongDetails.js

@@ -1,29 +1,50 @@
 import React from 'react'
-import {
-  Show,
-  SimpleShowLayout,
-  BooleanField,
-  DateField,
-  TextField
-} from 'react-admin'
+import Paper from '@material-ui/core/Paper'
+import Table from '@material-ui/core/Table'
+import TableBody from '@material-ui/core/TableBody'
+import TableCell from '@material-ui/core/TableCell'
+import TableContainer from '@material-ui/core/TableContainer'
+import TableRow from '@material-ui/core/TableRow'
+import { BooleanField, DateField, TextField, useTranslate } from 'react-admin'
+import inflection from 'inflection'
 import { BitrateField, SizeField } from './index'
 
 const SongDetails = (props) => {
+  const translate = useTranslate()
   const { record } = props
+  const data = {
+    path: <TextField record={record} source="path" />,
+    albumArtist: <TextField record={record} source="albumArtist" />,
+    genre: <TextField record={record} source="genre" />,
+    compilation: <BooleanField record={record} source="compilation" />,
+    bitRate: <BitrateField record={record} source="bitRate" />,
+    size: <SizeField record={record} source="size" />,
+    updatedAt: <DateField record={record} source="updatedAt" showTime />,
+    playCount: <TextField record={record} source="playCount" />
+  }
+  if (record.playCount > 0) {
+    data.playDate = <DateField record={record} source="playDate" showTime />
+  }
   return (
-    <Show {...props} title=" ">
-      <SimpleShowLayout>
-        <TextField source="path" />
-        <TextField source="albumArtist" />
-        <TextField source="genre" />
-        <BooleanField source="compilation" />
-        <BitrateField source="bitRate" />
-        <DateField source="updatedAt" showTime />
-        <SizeField source="size" />
-        <TextField source="playCount" />
-        {record.playCount > 0 && <DateField source="playDate" showTime />}
-      </SimpleShowLayout>
-    </Show>
+    <TableContainer component={Paper}>
+      <Table aria-label="simple table">
+        <TableBody>
+          {Object.keys(data).map((key) => {
+            return (
+              <TableRow key={record.id}>
+                <TableCell component="th" scope="row">
+                  {translate(`resources.song.fields.${key}`, {
+                    _: inflection.humanize(inflection.underscore(key))
+                  })}
+                  :
+                </TableCell>
+                <TableCell align="left">{data[key]}</TableCell>
+              </TableRow>
+            )
+          })}
+        </TableBody>
+      </Table>
+    </TableContainer>
   )
 }