Add a sortable Starred column and a Starred filter to Song List

persistence/mediafile_repository.go

@@ -29,12 +29,13 @@ func NewMediaFileRepository(ctx context.Context, o orm.Ormer) *mediaFileReposito
 	}
 	r.filterMappings = map[string]filterFunc{
 		"title":   fullTextFilter,
+		"starred": booleanFilter,
 	}
 	return r
 }
 
 func (r mediaFileRepository) CountAll(options ...model.QueryOptions) (int64, error) {
-	return r.count(Select(), options...)
+	return r.count(r.newSelectWithAnnotation("id", options...))
 }
 
 func (r mediaFileRepository) Exists(id string) (bool, error) {

ui/src/album/AlbumSongs.js

@@ -6,6 +6,7 @@ import {
   ListToolbar,
   TextField,
   useListController,
+  useTranslate,
 } from 'react-admin'
 import classnames from 'classnames'
 import { useDispatch } from 'react-redux'
@@ -65,6 +66,7 @@ const trackName = (r) => {
 
 const AlbumSongs = (props) => {
   const classes = useStyles(props)
+  const translate = useTranslate()
   const classesToolbar = useStylesListToolbar(props)
   const dispatch = useDispatch()
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
@@ -144,7 +146,9 @@ const AlbumSongs = (props) => {
               )}
               {isDesktop && <TextField source="artist" sortable={false} />}
               <DurationField source="duration" sortable={false} />
-              <SongContextMenu />
+              <SongContextMenu
+                label={translate('resources.song.fields.starred')}
+              />
             </SongDatagrid>
           )}
         </Card>

ui/src/i18n/en.json

@@ -18,7 +18,8 @@
                 "size": "File size",
                 "bitRate": "Bit rate",
                 "updatedAt": "Uploaded at",
-                "discSubtitle": "Disc Subtitle"
+                "discSubtitle": "Disc Subtitle",
+                "starred": "Starred"
             },
             "actions": {
                 "addToQueue": "Play Later",

ui/src/song/SongList.js

@@ -2,11 +2,14 @@ import React from 'react'
 import {
   Filter,
   FunctionField,
+  NullableBooleanInput,
   NumberField,
   SearchInput,
   TextField,
+  useTranslate,
 } from 'react-admin'
 import { useMediaQuery } from '@material-ui/core'
+import StarBorderIcon from '@material-ui/icons/StarBorder'
 import {
   DurationField,
   SimpleList,
@@ -23,11 +26,13 @@ import { AlbumLinkField } from './AlbumLinkField'
 const SongFilter = (props) => (
   <Filter {...props}>
     <SearchInput source="title" alwaysOn />
+    <NullableBooleanInput source="starred" />
   </Filter>
 )
 
 const SongList = (props) => {
   const dispatch = useDispatch()
+  const translate = useTranslate()
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   return (
@@ -66,7 +71,10 @@ const SongList = (props) => {
             <FunctionField source="year" render={(r) => r.year || ''} />
           )}
           <DurationField source="duration" />
-          <SongContextMenu />
+          <SongContextMenu
+            label={translate('resources.song.fields.starred')}
+            sortBy={'starred DESC, starredAt ASC'}
+          />
         </SongDatagrid>
       )}
     </List>