diff --git a/frontend/src/Components/Table/Table.js b/frontend/src/Components/Table/Table.js
index dbd60bf5f..8363cd0c4 100644
--- a/frontend/src/Components/Table/Table.js
+++ b/frontend/src/Components/Table/Table.js
@@ -52,6 +52,7 @@ function Table(props) {
scrollDirections.HORIZONTAL :
scrollDirections.NONE
}
+ autoFocus={false}
>
diff --git a/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.css b/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.css
index 67f91fa3c..fd624f2a0 100644
--- a/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.css
+++ b/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.css
@@ -1,3 +1,22 @@
+.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';
diff --git a/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.js b/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.js
index e10eeddec..7c1e0a5b3 100644
--- a/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.js
+++ b/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.js
@@ -4,13 +4,15 @@ import getErrorMessage from 'Utilities/Object/getErrorMessage';
import getSelectedIds from 'Utilities/Table/getSelectedIds';
import selectAll from 'Utilities/Table/selectAll';
import toggleSelected from 'Utilities/Table/toggleSelected';
-import { kinds } from 'Helpers/Props';
+import { kinds, scrollDirections } from 'Helpers/Props';
+import TextInput from 'Components/Form/TextInput';
import Button from 'Components/Link/Button';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import ModalContent from 'Components/Modal/ModalContent';
import ModalHeader from 'Components/Modal/ModalHeader';
import ModalBody from 'Components/Modal/ModalBody';
import ModalFooter from 'Components/Modal/ModalFooter';
+import Scroller from 'Components/Scroller/Scroller';
import Table from 'Components/Table/Table';
import TableBody from 'Components/Table/TableBody';
import SelectEpisodeRow from './SelectEpisodeRow';
@@ -46,6 +48,7 @@ class SelectEpisodeModalContent extends Component {
this.state = {
allSelected: false,
allUnselected: false,
+ filter: '',
lastToggled: null,
selectedState: {}
};
@@ -61,6 +64,10 @@ class SelectEpisodeModalContent extends Component {
//
// Listeners
+ onFilterChange = ({ value }) => {
+ this.setState({ filter: value.toLowerCase() });
+ }
+
onSelectAllChange = ({ value }) => {
this.setState(selectAll(this.state.selectedState, value));
}
@@ -95,8 +102,10 @@ class SelectEpisodeModalContent extends Component {
const {
allSelected,
allUnselected,
+ filter,
selectedState
} = this.state;
+ const filterEpisodeNumber = parseInt(filter);
const errorMessage = getErrorMessage(error, 'Unable to load episodes');
@@ -116,53 +125,73 @@ class SelectEpisodeModalContent extends Component {
-
- {
- isFetching &&
-
- }
+
+
- {
- error &&
- {errorMessage}
- }
+
+ {
+ isFetching ? : null
+ }
- {
- isPopulated && !!items.length &&
-
-
- {
- items.map((item) => {
- return (
-
- );
- })
- }
-
-
- }
+ {
+ error ? {errorMessage}
: null
+ }
- {
- isPopulated && !items.length &&
- 'No episodes were found for the selected season'
- }
+ {
+ isPopulated && !!items.length ?
+
+
+ {
+ items.map((item) => {
+ return item.title.toLowerCase().includes(filter) ||
+ item.episodeNumber === filterEpisodeNumber ?
+ (
+
+ ) :
+ null;
+ })
+ }
+
+
:
+ null
+ }
+
+ {
+ isPopulated && !items.length ?
+ 'No episodes were found for the selected season' :
+ null
+ }
+