> = ({
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
};