feat(ui): add missing filter for admin users in album, artist, and song lists

Signed-off-by: Deluan <deluan@navidrome.org>

resources/i18n/pt-br.json

@@ -33,7 +33,8 @@
         "participants": "Outros Participantes",
         "tags": "Outras Tags",
         "mappedTags": "Tags mapeadas",
-        "rawTags": "Tags originais"
+        "rawTags": "Tags originais",
+        "missing": "Ausente"
       },
       "actions": {
         "addToQueue": "Adicionar à fila",
@@ -72,7 +73,8 @@
         "releaseType": "Tipo",
         "grouping": "Agrupamento",
         "media": "Mídia",
-        "mood": "Mood"
+        "mood": "Mood",
+        "missing": "Ausente"
       },
       "actions": {
         "playAll": "Tocar",
@@ -104,7 +106,8 @@
         "rating": "Classificação",
         "genre": "Gênero",
         "size": "Tamanho",
-        "role": "Role"
+        "role": "Role",
+        "missing": "Ausente"
       },
       "roles": {
         "albumartist": "Artista do Álbum |||| Artistas do Álbum",

ui/src/album/AlbumList.jsx

@@ -10,6 +10,7 @@ import {
   ReferenceArrayInput,
   ReferenceInput,
   SearchInput,
+  usePermissions,
   useRefresh,
   useTranslate,
   useVersion,
@@ -44,6 +45,8 @@ const useStyles = makeStyles({
 const AlbumFilter = (props) => {
   const classes = useStyles()
   const translate = useTranslate()
+  const { permissions } = usePermissions()
+  const isAdmin = permissions === 'admin'
   return (
     <Filter {...props} variant={'outlined'}>
       <SearchInput id="search" source="name" alwaysOn />
@@ -153,6 +156,7 @@ const AlbumFilter = (props) => {
           defaultValue={true}
         />
       )}
+      {isAdmin && <NullableBooleanInput source="missing" />}
     </Filter>
   )
 }

ui/src/artist/ArtistList.jsx

@@ -11,6 +11,8 @@ import {
   SelectInput,
   TextField,
   useTranslate,
+  NullableBooleanInput,
+  usePermissions,
 } from 'react-admin'
 import { useMediaQuery, withWidth } from '@material-ui/core'
 import FavoriteIcon from '@material-ui/icons/Favorite'
@@ -63,6 +65,8 @@ const useStyles = makeStyles({
 
 const ArtistFilter = (props) => {
   const translate = useTranslate()
+  const { permissions } = usePermissions()
+  const isAdmin = permissions === 'admin'
   const rolesObj = en?.resources?.artist?.roles
   const roles = Object.keys(rolesObj).reduce((acc, role) => {
     acc.push({
@@ -85,6 +89,7 @@ const ArtistFilter = (props) => {
           defaultValue={true}
         />
       )}
+      {isAdmin && <NullableBooleanInput source="missing" />}
     </Filter>
   )
 }

ui/src/i18n/en.json

@@ -34,7 +34,8 @@
         "participants": "Additional participants",
         "tags": "Additional Tags",
         "mappedTags": "Mapped tags",
-        "rawTags": "Raw tags"
+        "rawTags": "Raw tags",
+        "missing": "Missing"
       },
       "actions": {
         "addToQueue": "Play Later",
@@ -73,7 +74,8 @@
         "releaseType": "Type",
         "grouping": "Grouping",
         "media": "Media",
-        "mood": "Mood"
+        "mood": "Mood",
+        "missing": "Missing"
       },
       "actions": {
         "playAll": "Play",
@@ -105,7 +107,8 @@
         "playCount": "Plays",
         "rating": "Rating",
         "genre": "Genre",
-        "role": "Role"
+        "role": "Role",
+        "missing": "Missing"
       },
       "roles": {
         "albumartist": "Album Artist |||| Album Artists",

ui/src/song/SongList.jsx

@@ -8,6 +8,8 @@ import {
   SearchInput,
   TextField,
   useTranslate,
+  NullableBooleanInput,
+  usePermissions,
 } from 'react-admin'
 import { useMediaQuery } from '@material-ui/core'
 import FavoriteIcon from '@material-ui/icons/Favorite'
@@ -67,6 +69,8 @@ const useStyles = makeStyles({
 const SongFilter = (props) => {
   const classes = useStyles()
   const translate = useTranslate()
+  const { permissions } = usePermissions()
+  const isAdmin = permissions === 'admin'
   return (
     <Filter {...props} variant={'outlined'}>
       <SearchInput source="title" alwaysOn />
@@ -121,6 +125,7 @@ const SongFilter = (props) => {
           defaultValue={true}
         />
       )}
+      {isAdmin && <NullableBooleanInput source="missing" />}
     </Filter>
   )
 }

ui/src/song/SongListActions.jsx

@@ -24,6 +24,7 @@ export const SongListActions = ({
   const isNotSmall = useMediaQuery((theme) => theme.breakpoints.up('sm'))
   return (
     <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
+      <ShuffleAllButton filters={filterValues} />
       {filters &&
         cloneElement(filters, {
           resource,
@@ -32,7 +33,6 @@ export const SongListActions = ({
           filterValues,
           context: 'button',
         })}
-      <ShuffleAllButton filters={filterValues} />
       {isNotSmall && <ToggleFieldsMenu resource="song" />}
     </TopToolbar>
   )