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}
- } - - { - isPopulated && !!items.length && -
- - { - items.map((item) => { - return ( - - ); - }) - } - -
- } - - { - isPopulated && !items.length && - 'No episodes were found for the selected season' - } + + + + + { + isFetching ? : null + } + + { + error ?
{errorMessage}
: null + } + + { + 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 + } +