feat(missingfiles): add library filter and display in MissingFilesList component

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

ui/src/i18n/en.json

@@ -254,6 +254,7 @@
       "fields": {
         "path": "Path",
         "size": "Size",
+        "libraryName": "Library",
         "updatedAt": "Disappeared on"
       },
       "actions": {

ui/src/missing/MissingFilesList.jsx

@@ -5,10 +5,15 @@ import {
   TextField,
   downloadCSV,
   Pagination,
+  Filter,
+  ReferenceInput,
+  useTranslate,
+  SelectInput,
 } from 'react-admin'
 import jsonExport from 'jsonexport/dist'
 import DeleteMissingFilesButton from './DeleteMissingFilesButton.jsx'
 import MissingListActions from './MissingListActions.jsx'
+import React from 'react'
 
 const exporter = (files) => {
   const filesToExport = files.map((file) => {
@@ -20,6 +25,24 @@ const exporter = (files) => {
   })
 }
 
+const MissingFilesFilter = (props) => {
+  const translate = useTranslate()
+  return (
+    <Filter {...props} variant={'outlined'}>
+      <ReferenceInput
+        label={translate('resources.missing.fields.libraryName')}
+        source="library_id"
+        reference="library"
+        sort={{ field: 'name', order: 'ASC' }}
+        filterToQuery={(searchText) => ({ name: [searchText] })}
+        alwaysOn
+      >
+        <SelectInput emptyText="-- All --" optionText="name" />
+      </ReferenceInput>
+    </Filter>
+  )
+}
+
 const BulkActionButtons = (props) => (
   <>
     <DeleteMissingFilesButton {...props} />
@@ -38,11 +61,13 @@ const MissingFilesList = (props) => {
       sort={{ field: 'updated_at', order: 'DESC' }}
       exporter={exporter}
       actions={<MissingListActions />}
+      filters={<MissingFilesFilter />}
       bulkActionButtons={<BulkActionButtons />}
       perPage={50}
       pagination={<MissingPagination />}
     >
       <Datagrid>
+        <TextField source={'libraryName'} />
         <TextField source={'path'} />
         <SizeField source={'size'} />
         <DateField source={'updatedAt'} showTime />