From 95089080f4ed0988287eca9b14b023c1bfe92539 Mon Sep 17 00:00:00 2001
From: Andrew Champion <andrew.champion@gmail.com>
Date: Fri, 10 Jul 2020 11:25:24 +0100
Subject: [PATCH] New: Filter tracks by title or number in Manual Import

(cherry picked from commit 73ed5f6ee27a9de1844d6e7caf26f765b082fe21)
---
 frontend/src/Artist/Details/ArtistDetails.js  |   1 -
 .../Track/SelectTrackModalContent.css         |  51 +++++++
 .../Track/SelectTrackModalContent.css.d.ts    |  12 ++
 .../Track/SelectTrackModalContent.js          | 143 +++++++++++-------
 src/NzbDrone.Core/Localization/Core/en.json   |   1 +
 5 files changed, 151 insertions(+), 57 deletions(-)
 create mode 100644 frontend/src/InteractiveImport/Track/SelectTrackModalContent.css
 create mode 100644 frontend/src/InteractiveImport/Track/SelectTrackModalContent.css.d.ts

diff --git a/frontend/src/Artist/Details/ArtistDetails.js b/frontend/src/Artist/Details/ArtistDetails.js
index c4dd61011..7cf6a1aab 100644
--- a/frontend/src/Artist/Details/ArtistDetails.js
+++ b/frontend/src/Artist/Details/ArtistDetails.js
@@ -197,7 +197,6 @@ class ArtistDetails extends Component {
       overview,
       links,
       images,
-      artistType,
       alternateTitles,
       tags,
       isSaving,
diff --git a/frontend/src/InteractiveImport/Track/SelectTrackModalContent.css b/frontend/src/InteractiveImport/Track/SelectTrackModalContent.css
new file mode 100644
index 000000000..794fca1ef
--- /dev/null
+++ b/frontend/src/InteractiveImport/Track/SelectTrackModalContent.css
@@ -0,0 +1,51 @@
+.modalBody {
+  composes: modalBody from '~Components/Modal/ModalBody.css';
+
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+.filterInput {
+  composes: input from '~Components/Form/TextInput.css';
+
+  flex: 0 0 auto;
+  margin-bottom: 20px;
+}
+
+.scroller {
+  flex: 1 1 auto;
+}
+
+.footer {
+  composes: modalFooter from '~Components/Modal/ModalFooter.css';
+
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.path {
+  margin-right: 20px;
+  color: var(--dimColor);
+}
+
+.buttons {
+  display: flex;
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .footer {
+    display: block;
+  }
+
+  .path {
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+
+  .buttons {
+    justify-content: space-between;
+    flex-grow: 1;
+  }
+}
diff --git a/frontend/src/InteractiveImport/Track/SelectTrackModalContent.css.d.ts b/frontend/src/InteractiveImport/Track/SelectTrackModalContent.css.d.ts
new file mode 100644
index 000000000..4f4df1647
--- /dev/null
+++ b/frontend/src/InteractiveImport/Track/SelectTrackModalContent.css.d.ts
@@ -0,0 +1,12 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'buttons': string;
+  'filterInput': string;
+  'footer': string;
+  'modalBody': string;
+  'path': string;
+  'scroller': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/InteractiveImport/Track/SelectTrackModalContent.js b/frontend/src/InteractiveImport/Track/SelectTrackModalContent.js
index 3b31637ab..05ba1725d 100644
--- a/frontend/src/InteractiveImport/Track/SelectTrackModalContent.js
+++ b/frontend/src/InteractiveImport/Track/SelectTrackModalContent.js
@@ -1,15 +1,17 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import TextInput from 'Components/Form/TextInput';
 import Button from 'Components/Link/Button';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
+import Scroller from 'Components/Scroller/Scroller';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
-import { kinds } from 'Helpers/Props';
+import { kinds, scrollDirections } from 'Helpers/Props';
 import ExpandingFileDetails from 'TrackFile/ExpandingFileDetails';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import translate from 'Utilities/String/translate';
@@ -17,6 +19,7 @@ import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
 import SelectTrackRow from './SelectTrackRow';
+import styles from './SelectTrackModalContent.css';
 
 const columns = [
   {
@@ -65,11 +68,12 @@ class SelectTrackModalContent extends Component {
     this.state = {
       allSelected: false,
       allUnselected: false,
+      filter: '',
       lastToggled: null,
       selectedState: init
     };
 
-    props.onSortPress( props.sortKey, props.sortDirection );
+    props.onSortPress(props.sortKey, props.sortDirection);
   }
 
   //
@@ -82,6 +86,10 @@ class SelectTrackModalContent extends Component {
   //
   // Listeners
 
+  onFilterChange = ({ value }) => {
+    this.setState({ filter: value.toLowerCase() });
+  };
+
   onSelectAllChange = ({ value }) => {
     this.setState(selectAll(this.state.selectedState, value));
   };
@@ -119,8 +127,10 @@ class SelectTrackModalContent extends Component {
     const {
       allSelected,
       allUnselected,
+      filter,
       selectedState
     } = this.state;
+    const filterTrackNumber = parseInt(filter);
 
     const errorMessage = getErrorMessage(error, 'Unable to load tracks');
 
@@ -141,63 +151,84 @@ class SelectTrackModalContent extends Component {
           {translate('ManualImport')} - {translate('SelectTracks')}
         </ModalHeader>
 
-        <ModalBody>
-          {
-            isFetching &&
-              <LoadingIndicator />
-          }
-
-          {
-            error &&
-              <div>{errorMessage}</div>
-          }
-
-          <ExpandingFileDetails
-            audioTags={audioTags}
-            filename={filename}
-            rejections={rejections}
-            isExpanded={false}
+        <ModalBody
+          className={styles.modalBody}
+          scrollDirection={scrollDirections.NONE}
+        >
+          <TextInput
+            className={styles.filterInput}
+            placeholder={translate('FilterTracksByTitleOrNumber')}
+            name="filter"
+            value={filter}
+            autoFocus={true}
+            onChange={this.onFilterChange}
           />
 
-          {
-            isPopulated && !!items.length &&
-              <Table
-                columns={selectAllEnabled ? columns : selectAllBlankColumn.concat(columns)}
-                selectAll={selectAllEnabled}
-                allSelected={allSelected}
-                allUnselected={allUnselected}
-                sortKey={sortKey}
-                sortDirection={sortDirection}
-                onSortPress={onSortPress}
-                onSelectAllChange={this.onSelectAllChange}
-              >
-                <TableBody>
-                  {
-                    items.map((item) => {
-                      return (
-                        <SelectTrackRow
-                          key={item.id}
-                          id={item.id}
-                          mediumNumber={item.mediumNumber}
-                          trackNumber={item.absoluteTrackNumber}
-                          title={item.title}
-                          hasFile={item.hasFile}
-                          importSelected={otherSelected.concat(currentSelected).includes(item.id)}
-                          isDisabled={otherSelected.includes(item.id)}
-                          isSelected={selectedState[item.id]}
-                          onSelectedChange={this.onSelectedChange}
-                        />
-                      );
-                    })
-                  }
-                </TableBody>
-              </Table>
-          }
+          <Scroller
+            className={styles.scroller}
+            autoFocus={false}
+          >
+            {
+              isFetching ? <LoadingIndicator /> : null
+            }
 
-          {
-            isPopulated && !items.length &&
-              'No tracks were found for the selected album'
-          }
+            {
+              error ? <div>{errorMessage}</div> : null
+            }
+
+            <ExpandingFileDetails
+              audioTags={audioTags}
+              filename={filename}
+              rejections={rejections}
+              isExpanded={false}
+            />
+
+            {
+              isPopulated && !!items.length ?
+                <Table
+                  columns={selectAllEnabled ? columns : selectAllBlankColumn.concat(columns)}
+                  selectAll={selectAllEnabled}
+                  allSelected={allSelected}
+                  allUnselected={allUnselected}
+                  sortKey={sortKey}
+                  sortDirection={sortDirection}
+                  onSortPress={onSortPress}
+                  onSelectAllChange={this.onSelectAllChange}
+                >
+                  <TableBody>
+                    {
+                      items.map((item) => {
+                        return item.title.toLowerCase().includes(filter) ||
+                          item.absoluteTrackNumber === filterTrackNumber ||
+                          item.trackNumber === filterTrackNumber ?
+                          (
+                            <SelectTrackRow
+                              key={item.id}
+                              id={item.id}
+                              mediumNumber={item.mediumNumber}
+                              trackNumber={item.absoluteTrackNumber}
+                              title={item.title}
+                              hasFile={item.hasFile}
+                              importSelected={otherSelected.concat(currentSelected).includes(item.id)}
+                              isDisabled={otherSelected.includes(item.id)}
+                              isSelected={selectedState[item.id]}
+                              onSelectedChange={this.onSelectedChange}
+                            />
+                          ) :
+                          null;
+                      })
+                    }
+                  </TableBody>
+                </Table> :
+                null
+            }
+
+            {
+              isPopulated && !items.length ?
+                translate('NoTracksFoundForSelectedAlbum') :
+                null
+            }
+          </Scroller>
         </ModalBody>
 
         <ModalFooter>
diff --git a/src/NzbDrone.Core/Localization/Core/en.json b/src/NzbDrone.Core/Localization/Core/en.json
index cab23ac98..531cbc38d 100644
--- a/src/NzbDrone.Core/Localization/Core/en.json
+++ b/src/NzbDrone.Core/Localization/Core/en.json
@@ -830,6 +830,7 @@
   "NoMediumInformation": "No medium information is available.",
   "NoMinimumForAnyDuration": "No minimum for any duration",
   "NoMissingItems": "No missing items",
+  "NoTracksFoundForSelectedAlbum": "No tracks were found for the selected album",
   "NoResultsFound": "No results found",
   "NoTagsHaveBeenAddedYet": "No tags have been added yet",
   "NoTracksInThisMedium": "No tracks in this medium",