diff --git a/frontend/src/Components/Table/VirtualTableRowButton.css b/frontend/src/Components/Table/VirtualTableRowButton.css new file mode 100644 index 000000000..886765f2a --- /dev/null +++ b/frontend/src/Components/Table/VirtualTableRowButton.css @@ -0,0 +1,4 @@ +.row { + composes: link from '~Components/Link/Link.css'; + composes: row from '~./VirtualTableRow.css'; +} diff --git a/frontend/src/Components/Table/VirtualTableRowButton.css.d.ts b/frontend/src/Components/Table/VirtualTableRowButton.css.d.ts new file mode 100644 index 000000000..d4b245cd1 --- /dev/null +++ b/frontend/src/Components/Table/VirtualTableRowButton.css.d.ts @@ -0,0 +1,7 @@ +// This file is automatically generated. +// Please do not change this file! +interface CssExports { + 'row': string; +} +export const cssExports: CssExports; +export default cssExports; diff --git a/frontend/src/Components/Table/VirtualTableRowButton.js b/frontend/src/Components/Table/VirtualTableRowButton.js new file mode 100644 index 000000000..ba63c1648 --- /dev/null +++ b/frontend/src/Components/Table/VirtualTableRowButton.js @@ -0,0 +1,16 @@ +import React from 'react'; +import Link from 'Components/Link/Link'; +import VirtualTableRow from './VirtualTableRow'; +import styles from './VirtualTableRowButton.css'; + +function VirtualTableRowButton(props) { + return ( + + ); +} + +export default VirtualTableRowButton; diff --git a/frontend/src/InteractiveImport/Movie/SelectMovieModalContent.tsx b/frontend/src/InteractiveImport/Movie/SelectMovieModalContent.tsx index 3208050cf..e0fc1d43c 100644 --- a/frontend/src/InteractiveImport/Movie/SelectMovieModalContent.tsx +++ b/frontend/src/InteractiveImport/Movie/SelectMovieModalContent.tsx @@ -15,13 +15,40 @@ 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 Column from 'Components/Table/Column'; +import VirtualTableRowButton from 'Components/Table/VirtualTableRowButton'; import { scrollDirections } from 'Helpers/Props'; import Movie from 'Movie/Movie'; import createAllMoviesSelector from 'Store/Selectors/createAllMoviesSelector'; import dimensions from 'Styles/Variables/dimensions'; +import translate from 'Utilities/String/translate'; +import SelectMovieModalTableHeader from './SelectMovieModalTableHeader'; import SelectMovieRow from './SelectMovieRow'; import styles from './SelectMovieModalContent.css'; +const columns = [ + { + name: 'title', + label: translate('Title'), + isVisible: true, + }, + { + name: 'year', + label: translate('Year'), + isVisible: true, + }, + { + name: 'imdbId', + label: translate('ImdbId'), + isVisible: true, + }, + { + name: 'tmdbId', + label: translate('TmdbId'), + isVisible: true, + }, +]; + const bodyPadding = parseInt(dimensions.pageContentBodyPadding); interface SelectMovieModalContentProps { @@ -32,6 +59,7 @@ interface SelectMovieModalContentProps { interface RowItemData { items: Movie[]; + columns: Column[]; onMovieSelect(movieId: number): void; } @@ -40,7 +68,7 @@ const Row: React.FC> = ({ style, data, }) => { - const { items, onMovieSelect } = data; + const { items, columns, onMovieSelect } = data; if (index >= items.length) { return null; @@ -49,20 +77,24 @@ const Row: React.FC> = ({ const movie = items[index]; return ( -
onMovieSelect(movie.id)} > -
+ ); }; @@ -161,6 +193,7 @@ function SelectMovieModalContent(props: SelectMovieModalContentProps) { autoFocus={false} ref={scrollerRef} > + ref={listRef} style={{ @@ -174,6 +207,7 @@ function SelectMovieModalContent(props: SelectMovieModalContentProps) { itemSize={38} itemData={{ items, + columns, onMovieSelect: onMovieSelectWrapper, }} > diff --git a/frontend/src/InteractiveImport/Movie/SelectMovieModalTableHeader.css b/frontend/src/InteractiveImport/Movie/SelectMovieModalTableHeader.css new file mode 100644 index 000000000..387be17ab --- /dev/null +++ b/frontend/src/InteractiveImport/Movie/SelectMovieModalTableHeader.css @@ -0,0 +1,18 @@ +.title { + composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css'; + + flex: 4 0 140px; +} + +.year { + composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css'; + + flex: 0 0 70px; +} + +.imdbId, +.tmdbId { + composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css'; + + flex: 0 0 110px; +} \ No newline at end of file diff --git a/frontend/src/InteractiveImport/Movie/SelectMovieModalTableHeader.css.d.ts b/frontend/src/InteractiveImport/Movie/SelectMovieModalTableHeader.css.d.ts new file mode 100644 index 000000000..5ee495232 --- /dev/null +++ b/frontend/src/InteractiveImport/Movie/SelectMovieModalTableHeader.css.d.ts @@ -0,0 +1,10 @@ +// This file is automatically generated. +// Please do not change this file! +interface CssExports { + 'imdbId': string; + 'title': string; + 'tmdbId': string; + 'year': string; +} +export const cssExports: CssExports; +export default cssExports; diff --git a/frontend/src/InteractiveImport/Movie/SelectMovieModalTableHeader.tsx b/frontend/src/InteractiveImport/Movie/SelectMovieModalTableHeader.tsx new file mode 100644 index 000000000..6471e614e --- /dev/null +++ b/frontend/src/InteractiveImport/Movie/SelectMovieModalTableHeader.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import Column from 'Components/Table/Column'; +import VirtualTableHeader from 'Components/Table/VirtualTableHeader'; +import VirtualTableHeaderCell from 'Components/Table/VirtualTableHeaderCell'; +import styles from './SelectMovieModalTableHeader.css'; + +interface SelectMovieModalTableHeaderProps { + columns: Column[]; +} + +function SelectMovieModalTableHeader(props: SelectMovieModalTableHeaderProps) { + const { columns } = props; + + return ( + + {columns.map((column) => { + const { name, label, isVisible } = column; + + if (!isVisible) { + return null; + } + + return ( + + {label} + + ); + })} + + ); +} + +export default SelectMovieModalTableHeader; diff --git a/frontend/src/InteractiveImport/Movie/SelectMovieRow.css b/frontend/src/InteractiveImport/Movie/SelectMovieRow.css index 95498bf61..2fe6c8538 100644 --- a/frontend/src/InteractiveImport/Movie/SelectMovieRow.css +++ b/frontend/src/InteractiveImport/Movie/SelectMovieRow.css @@ -1,5 +1,25 @@ -.movie { - padding: 8px; - width: 100%; - border-bottom: 1px solid var(--borderColor); +.cell { + composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css'; + + display: flex; + align-items: center; +} + +.title { + composes: cell; + + flex: 4 0 140px; +} + +.year { + composes: cell; + + flex: 0 0 70px; +} + +.tmdbId, +.imdbId { + composes: cell; + + flex: 0 0 110px; } diff --git a/frontend/src/InteractiveImport/Movie/SelectMovieRow.css.d.ts b/frontend/src/InteractiveImport/Movie/SelectMovieRow.css.d.ts index af1c5b2b6..a71a70cf4 100644 --- a/frontend/src/InteractiveImport/Movie/SelectMovieRow.css.d.ts +++ b/frontend/src/InteractiveImport/Movie/SelectMovieRow.css.d.ts @@ -1,7 +1,11 @@ // This file is automatically generated. // Please do not change this file! interface CssExports { - 'movie': string; + 'cell': string; + 'imdbId': string; + 'title': string; + 'tmdbId': string; + 'year': string; } export const cssExports: CssExports; export default cssExports; diff --git a/frontend/src/InteractiveImport/Movie/SelectMovieRow.js b/frontend/src/InteractiveImport/Movie/SelectMovieRow.js index f1b7444e1..b48afb9fe 100644 --- a/frontend/src/InteractiveImport/Movie/SelectMovieRow.js +++ b/frontend/src/InteractiveImport/Movie/SelectMovieRow.js @@ -1,6 +1,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import Link from 'Components/Link/Link'; +import Label from 'Components/Label'; +import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell'; import styles from './SelectMovieRow.css'; class SelectMovieRow extends Component { @@ -17,13 +18,23 @@ class SelectMovieRow extends Component { render() { return ( - - {this.props.title} ({this.props.year}) - + <> + + {this.props.title} + + + + {this.props.year} + + + + + + + + + + ); } } @@ -31,6 +42,8 @@ class SelectMovieRow extends Component { SelectMovieRow.propTypes = { id: PropTypes.number.isRequired, title: PropTypes.string.isRequired, + tmdbId: PropTypes.number.isRequired, + imdbId: PropTypes.string.isRequired, year: PropTypes.number.isRequired, onMovieSelect: PropTypes.func.isRequired };