feat: show year range in album view and match ranges in year filter. #118

ui/src/album/AlbumDetails.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { Card, CardContent, CardMedia, Typography } from '@material-ui/core'
 import { useTranslate } from 'react-admin'
 import { subsonicUrl } from '../subsonic'
-import { DurationField } from '../common'
+import { DurationField, formatRange } from '../common'
 
 const AlbumDetails = ({ classes, record }) => {
   const translate = useTranslate()
@@ -11,8 +11,9 @@ const AlbumDetails = ({ classes, record }) => {
     if (record.genre) {
       genreDateLine.push(record.genre)
     }
-    if (record.maxYear) {
-      genreDateLine.push(record.maxYear)
+    const year = formatRange(record, 'year')
+    if (year) {
+      genreDateLine.push(year)
     }
     return genreDateLine.join(' · ')
   }

ui/src/album/AlbumList.js

@@ -16,7 +16,7 @@ import {
   AutocompleteInput,
   TextField
 } from 'react-admin'
-import { DurationField, Pagination, Title } from '../common'
+import { DurationField, Pagination, Title, RangeField } from '../common'
 import { useMediaQuery } from '@material-ui/core'
 
 const AlbumFilter = (props) => (
@@ -31,7 +31,7 @@ const AlbumFilter = (props) => (
       <AutocompleteInput emptyText="-- None --" />
     </ReferenceInput>
     <NullableBooleanInput source="compilation" />
-    <NumberInput source="max_year" />
+    <NumberInput source="year" />
   </Filter>
 )
 
@@ -68,7 +68,7 @@ const AlbumList = (props) => {
           render={(r) => (r.albumArtist ? r.albumArtist : r.artist)}
         />
         {isDesktop && <NumberField source="songCount" />}
-        <TextField source="maxYear" />
+        <RangeField source={'year'} sortBy={'maxYear'} />
         {isDesktop && <DurationField source="duration" />}
       </Datagrid>
     </List>