Add Genre filters to UI

model/genre.go

@@ -2,9 +2,9 @@ package model
 
 type Genre struct {
 	ID         string `json:"id"               orm:"column(id)"`
-	Name       string
+	Name       string `json:"name"`
-	SongCount  int `json:"-"`
+	SongCount  int    `json:"-"`
-	AlbumCount int `json:"-"`
+	AlbumCount int    `json:"-"`
 }
 
 type Genres []Genre

persistence/album_repository.go

@@ -82,7 +82,12 @@ func artistFilter(field string, value interface{}) Sqlizer {
 }
 
 func (r *albumRepository) CountAll(options ...model.QueryOptions) (int64, error) {
-	return r.count(r.selectAlbum(), options...)
+	sql := r.selectAlbum()
+	sql = sql.LeftJoin("album_genres ag on album.id = ag.album_id").
+		LeftJoin("genre on ag.genre_id = genre.id").
+		GroupBy("album.id")
+
+	return r.count(sql, options...)
 }
 
 func (r *albumRepository) Exists(id string) (bool, error) {

persistence/artist_repository.go

@@ -49,7 +49,11 @@ func (r *artistRepository) selectArtist(options ...model.QueryOptions) SelectBui
 }
 
 func (r *artistRepository) CountAll(options ...model.QueryOptions) (int64, error) {
-	return r.count(r.newSelectWithAnnotation("artist.id"), options...)
+	sql := r.newSelectWithAnnotation("artist.id")
+	sql = sql.LeftJoin("artist_genres ag on artist.id = ag.artist_id").
+		LeftJoin("genre on ag.genre_id = genre.id").
+		GroupBy("artist.id")
+	return r.count(sql, options...)
 }
 
 func (r *artistRepository) Exists(id string) (bool, error) {

persistence/genre_repository.go

@@ -22,6 +22,9 @@ func NewGenreRepository(ctx context.Context, o orm.Ormer) model.GenreRepository
 	r.ctx = ctx
 	r.ormer = o
 	r.tableName = "genre"
+	r.filterMappings = map[string]filterFunc{
+		"name": containsFilter,
+	}
 	return r
 }
 

persistence/mediafile_repository.go

@@ -38,7 +38,11 @@ func NewMediaFileRepository(ctx context.Context, o orm.Ormer) *mediaFileReposito
 }
 
 func (r *mediaFileRepository) CountAll(options ...model.QueryOptions) (int64, error) {
-	return r.count(r.newSelectWithAnnotation("media_file.id"), options...)
+	sql := r.newSelectWithAnnotation("media_file.id")
+	sql = sql.LeftJoin("media_file_genres mfg on media_file.id = mfg.media_file_id").
+		LeftJoin("genre on mfg.genre_id = genre.id").
+		GroupBy("media_file.id")
+	return r.count(sql, options...)
 }
 
 func (r *mediaFileRepository) Exists(id string) (bool, error) {

persistence/persistence.go

@@ -88,6 +88,8 @@ func (s *SQLStore) Resource(ctx context.Context, m interface{}) model.ResourceRe
 		return s.Album(ctx).(model.ResourceRepository)
 	case model.MediaFile:
 		return s.MediaFile(ctx).(model.ResourceRepository)
+	case model.Genre:
+		return s.Genre(ctx).(model.ResourceRepository)
 	case model.Playlist:
 		return s.Playlist(ctx).(model.ResourceRepository)
 	case model.Share:

server/nativeapi/native_api.go

@@ -37,6 +37,7 @@ func (n *Router) routes() http.Handler {
 	n.R(r, "/song", model.MediaFile{}, true)
 	n.R(r, "/album", model.Album{}, true)
 	n.R(r, "/artist", model.Artist{}, true)
+	n.R(r, "/genre", model.Genre{}, true)
 	n.R(r, "/player", model.Player{}, true)
 	n.R(r, "/playlist", model.Playlist{}, true)
 	n.R(r, "/transcoding", model.Transcoding{}, conf.Server.EnableTranscodingConfig)

ui/src/App.js

@@ -108,6 +108,7 @@ const Admin = (props) => {
           <Resource name="transcoding" />
         ),
         <Resource name="translation" />,
+        <Resource name="genre" />,
         <Resource name="playlistTrack" />,
         <Resource name="keepalive" />,
         <Player />,

ui/src/album/AlbumList.js

@@ -42,6 +42,15 @@ const AlbumFilter = (props) => {
       >
         <AutocompleteInput emptyText="-- None --" />
       </ReferenceInput>
+      <ReferenceInput
+        label={translate('resources.album.fields.genre')}
+        source="genre_id"
+        reference="genre"
+        sort={{ field: 'name', order: 'ASC' }}
+        filterToQuery={(searchText) => ({ name: [searchText] })}
+      >
+        <AutocompleteInput emptyText="-- None --" />
+      </ReferenceInput>
       <NullableBooleanInput source="compilation" />
       <NumberInput source="year" />
       {config.enableFavourites && (

ui/src/artist/ArtistList.js

@@ -1,11 +1,14 @@
 import React, { useMemo } from 'react'
 import { useHistory } from 'react-router-dom'
 import {
+  AutocompleteInput,
   Datagrid,
   Filter,
   NumberField,
+  ReferenceInput,
   SearchInput,
   TextField,
+  useTranslate,
 } from 'react-admin'
 import { useMediaQuery, withWidth } from '@material-ui/core'
 import FavoriteIcon from '@material-ui/icons/Favorite'
@@ -49,18 +52,30 @@ const useStyles = makeStyles({
   },
 })
 
-const ArtistFilter = (props) => (
+const ArtistFilter = (props) => {
-  <Filter {...props} variant={'outlined'}>
+  const translate = useTranslate()
-    <SearchInput source="name" alwaysOn />
+  return (
-    {config.enableFavourites && (
+    <Filter {...props} variant={'outlined'}>
-      <QuickFilter
+      <SearchInput source="name" alwaysOn />
-        source="starred"
+      <ReferenceInput
-        label={<FavoriteIcon fontSize={'small'} />}
+        label={translate('resources.artist.fields.genre')}
-        defaultValue={true}
+        source="genre_id"
-      />
+        reference="genre"
-    )}
+        sort={{ field: 'name', order: 'ASC' }}
-  </Filter>
+        filterToQuery={(searchText) => ({ name: [searchText] })}
-)
+      >
+        <AutocompleteInput emptyText="-- None --" />
+      </ReferenceInput>
+      {config.enableFavourites && (
+        <QuickFilter
+          source="starred"
+          label={<FavoriteIcon fontSize={'small'} />}
+          defaultValue={true}
+        />
+      )}
+    </Filter>
+  )
+}
 
 const ArtistListView = ({ hasShow, hasEdit, hasList, width, ...rest }) => {
   const classes = useStyles()

ui/src/artist/ArtistListActions.js

@@ -1,13 +1,29 @@
-import React from 'react'
+import React, { cloneElement } from 'react'
 import { sanitizeListRestProps, TopToolbar } from 'react-admin'
 import { useMediaQuery } from '@material-ui/core'
 import { ToggleFieldsMenu } from '../common'
 
-const ArtistListActions = ({ className, ...rest }) => {
+const ArtistListActions = ({
+  className,
+  filters,
+  resource,
+  showFilter,
+  displayedFilters,
+  filterValues,
+  ...rest
+}) => {
   const isNotSmall = useMediaQuery((theme) => theme.breakpoints.up('sm'))
 
   return (
     <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
+      {filters &&
+        cloneElement(filters, {
+          resource,
+          showFilter,
+          displayedFilters,
+          filterValues,
+          context: 'button',
+        })}
       {isNotSmall && <ToggleFieldsMenu resource="artist" />}
     </TopToolbar>
   )

ui/src/i18n/en.json

@@ -76,6 +76,7 @@
         "albumCount": "Album Count",
         "songCount": "Song Count",
         "playCount": "Plays",
+        "genre": "Genre",
         "rating": "Rating"
       }
     },

ui/src/song/SongList.js

@@ -1,10 +1,13 @@
 import React from 'react'
 import {
+  AutocompleteInput,
   Filter,
   FunctionField,
   NumberField,
+  ReferenceInput,
   SearchInput,
   TextField,
+  useTranslate,
 } from 'react-admin'
 import { useMediaQuery } from '@material-ui/core'
 import FavoriteIcon from '@material-ui/icons/Favorite'
@@ -55,18 +58,30 @@ const useStyles = makeStyles({
   },
 })
 
-const SongFilter = (props) => (
+const SongFilter = (props) => {
-  <Filter {...props} variant={'outlined'}>
+  const translate = useTranslate()
-    <SearchInput source="title" alwaysOn />
+  return (
-    {config.enableFavourites && (
+    <Filter {...props} variant={'outlined'}>
-      <QuickFilter
+      <SearchInput source="title" alwaysOn />
-        source="starred"
+      <ReferenceInput
-        label={<FavoriteIcon fontSize={'small'} />}
+        label={translate('resources.song.fields.genre')}
-        defaultValue={true}
+        source="genre_id"
-      />
+        reference="genre"
-    )}
+        sort={{ field: 'name', order: 'ASC' }}
-  </Filter>
+        filterToQuery={(searchText) => ({ name: [searchText] })}
-)
+      >
+        <AutocompleteInput emptyText="-- None --" />
+      </ReferenceInput>
+      {config.enableFavourites && (
+        <QuickFilter
+          source="starred"
+          label={<FavoriteIcon fontSize={'small'} />}
+          defaultValue={true}
+        />
+      )}
+    </Filter>
+  )
+}
 
 const SongList = (props) => {
   const classes = useStyles()