mirror of
https://github.com/Radarr/Radarr.git
synced 2024-10-05 15:47:20 +02:00
New: Add TmdbId and ImdbId to manual import movie selection
Fixes #8483
This commit is contained in:
parent
fe76cbfc6b
commit
731db1ad79
4
frontend/src/Components/Table/VirtualTableRowButton.css
Normal file
4
frontend/src/Components/Table/VirtualTableRowButton.css
Normal file
@ -0,0 +1,4 @@
|
||||
.row {
|
||||
composes: link from '~Components/Link/Link.css';
|
||||
composes: row from '~./VirtualTableRow.css';
|
||||
}
|
7
frontend/src/Components/Table/VirtualTableRowButton.css.d.ts
vendored
Normal file
7
frontend/src/Components/Table/VirtualTableRowButton.css.d.ts
vendored
Normal file
@ -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;
|
16
frontend/src/Components/Table/VirtualTableRowButton.js
Normal file
16
frontend/src/Components/Table/VirtualTableRowButton.js
Normal file
@ -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 (
|
||||
<Link
|
||||
className={styles.row}
|
||||
component={VirtualTableRow}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default VirtualTableRowButton;
|
@ -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<ListChildComponentProps<RowItemData>> = ({
|
||||
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<ListChildComponentProps<RowItemData>> = ({
|
||||
const movie = items[index];
|
||||
|
||||
return (
|
||||
<div
|
||||
<VirtualTableRowButton
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
...style,
|
||||
}}
|
||||
onPress={() => onMovieSelect(movie.id)}
|
||||
>
|
||||
<SelectMovieRow
|
||||
id={movie.id}
|
||||
title={movie.title}
|
||||
tmdbId={movie.tmdbId}
|
||||
imdbId={movie.imdbId}
|
||||
year={movie.year}
|
||||
columns={columns}
|
||||
onMovieSelect={onMovieSelect}
|
||||
/>
|
||||
</div>
|
||||
</VirtualTableRowButton>
|
||||
);
|
||||
};
|
||||
|
||||
@ -161,6 +193,7 @@ function SelectMovieModalContent(props: SelectMovieModalContentProps) {
|
||||
autoFocus={false}
|
||||
ref={scrollerRef}
|
||||
>
|
||||
<SelectMovieModalTableHeader columns={columns} />
|
||||
<List<RowItemData>
|
||||
ref={listRef}
|
||||
style={{
|
||||
@ -174,6 +207,7 @@ function SelectMovieModalContent(props: SelectMovieModalContentProps) {
|
||||
itemSize={38}
|
||||
itemData={{
|
||||
items,
|
||||
columns,
|
||||
onMovieSelect: onMovieSelectWrapper,
|
||||
}}
|
||||
>
|
||||
|
@ -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;
|
||||
}
|
10
frontend/src/InteractiveImport/Movie/SelectMovieModalTableHeader.css.d.ts
vendored
Normal file
10
frontend/src/InteractiveImport/Movie/SelectMovieModalTableHeader.css.d.ts
vendored
Normal file
@ -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;
|
@ -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 (
|
||||
<VirtualTableHeader>
|
||||
{columns.map((column) => {
|
||||
const { name, label, isVisible } = column;
|
||||
|
||||
if (!isVisible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<VirtualTableHeaderCell
|
||||
key={name}
|
||||
className={
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
styles[name]
|
||||
}
|
||||
name={name}
|
||||
>
|
||||
{label}
|
||||
</VirtualTableHeaderCell>
|
||||
);
|
||||
})}
|
||||
</VirtualTableHeader>
|
||||
);
|
||||
}
|
||||
|
||||
export default SelectMovieModalTableHeader;
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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 (
|
||||
<Link
|
||||
className={styles.movie}
|
||||
component="div"
|
||||
onPress={this.onPress}
|
||||
>
|
||||
{this.props.title} ({this.props.year})
|
||||
</Link>
|
||||
<>
|
||||
<VirtualTableRowCell className={styles.title}>
|
||||
{this.props.title}
|
||||
</VirtualTableRowCell>
|
||||
|
||||
<VirtualTableRowCell className={styles.year}>
|
||||
{this.props.year}
|
||||
</VirtualTableRowCell>
|
||||
|
||||
<VirtualTableRowCell className={styles.imdbId}>
|
||||
<Label>{this.props.imdbId}</Label>
|
||||
</VirtualTableRowCell>
|
||||
|
||||
<VirtualTableRowCell className={styles.tmdbId}>
|
||||
<Label>{this.props.tmdbId}</Label>
|
||||
</VirtualTableRowCell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user