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

ui/src/common/RangeField.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const formatRange = (record, source) => {
+  const nameCapitalized = source.charAt(0).toUpperCase() + source.slice(1)
+  const min = record[`min${nameCapitalized}`]
+  const max = record[`max${nameCapitalized}`]
+  let range = []
+  if (min) {
+    range.push(min)
+  }
+  if (max && max !== min) {
+    range.push(max)
+  }
+  return range.join('-')
+}
+
+const RangeField = ({ record = {}, source }) => {
+  return <span>{formatRange(record, source)}</span>
+}
+
+RangeField.propTypes = {
+  label: PropTypes.string,
+  record: PropTypes.object,
+  source: PropTypes.string.isRequired
+}
+
+RangeField.defaultProps = {
+  addLabel: true
+}
+
+export { formatRange }
+export default RangeField

ui/src/common/index.js

@@ -4,6 +4,7 @@ import BitrateField from './BitrateField'
 import Pagination from './Pagination'
 import PlayButton from './PlayButton'
 import SimpleList from './SimpleList'
+import RangeField, { formatRange } from './RangeField'
 
 export {
   Title,
@@ -11,5 +12,7 @@ export {
   BitrateField,
   Pagination,
   PlayButton,
-  SimpleList
+  SimpleList,
+  RangeField,
+  formatRange
 }