diff --git a/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.tsx b/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.tsx index 09269dbcc..b9cde7b9a 100644 --- a/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.tsx +++ b/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.tsx @@ -220,6 +220,7 @@ function SelectEpisodeModalContentInner(props: SelectEpisodeModalContentProps) { title={item.title} airDate={item.airDate} isAnime={isAnime} + unverifiedSceneNumbering={item.unverifiedSceneNumbering} /> ) : null; })} diff --git a/frontend/src/InteractiveImport/Episode/SelectEpisodeRow.css b/frontend/src/InteractiveImport/Episode/SelectEpisodeRow.css new file mode 100644 index 000000000..c29a495bb --- /dev/null +++ b/frontend/src/InteractiveImport/Episode/SelectEpisodeRow.css @@ -0,0 +1,3 @@ +.warning { + margin-left: 8px; +} diff --git a/frontend/src/InteractiveImport/Episode/SelectEpisodeRow.css.d.ts b/frontend/src/InteractiveImport/Episode/SelectEpisodeRow.css.d.ts new file mode 100644 index 000000000..3705c1d5e --- /dev/null +++ b/frontend/src/InteractiveImport/Episode/SelectEpisodeRow.css.d.ts @@ -0,0 +1,7 @@ +// This file is automatically generated. +// Please do not change this file! +interface CssExports { + 'warning': string; +} +export const cssExports: CssExports; +export default cssExports; diff --git a/frontend/src/InteractiveImport/Episode/SelectEpisodeRow.tsx b/frontend/src/InteractiveImport/Episode/SelectEpisodeRow.tsx index f4b4e13ab..f006b10c1 100644 --- a/frontend/src/InteractiveImport/Episode/SelectEpisodeRow.tsx +++ b/frontend/src/InteractiveImport/Episode/SelectEpisodeRow.tsx @@ -4,7 +4,29 @@ import TableRowCell from 'Components/Table/Cells/TableRowCell'; import TableSelectCell from 'Components/Table/Cells/TableSelectCell'; import TableRowButton from 'Components/Table/TableRowButton'; import Episode from 'Episode/Episode'; +import { icons, kinds } from 'Helpers/Props'; import { SelectStateInputProps } from 'typings/props'; +import translate from 'Utilities/String/translate'; +import Icon from '../../Components/Icon'; +import styles from './SelectEpisodeRow.css'; + +function getWarningMessage( + unverifiedSceneNumbering: boolean, + isAnime: boolean, + absoluteEpisodeNumber: number | undefined +) { + const messages = []; + + if (unverifiedSceneNumbering) { + messages.push(translate('SceneNumberNotVerified')); + } + + if (isAnime && !absoluteEpisodeNumber) { + messages.push(translate('EpisodeMissingAbsoluteNumber')); + } + + return messages.join('\n'); +} interface SelectEpisodeRowProps { id: number; @@ -14,6 +36,7 @@ interface SelectEpisodeRowProps { airDate: string; isAnime: boolean; isSelected?: boolean; + unverifiedSceneNumbering?: boolean; } function SelectEpisodeRow({ @@ -23,6 +46,7 @@ function SelectEpisodeRow({ title, airDate, isAnime, + unverifiedSceneNumbering = false, }: SelectEpisodeRowProps) { const { toggleSelected, useIsSelected } = useSelect(); const isSelected = useIsSelected(id); @@ -42,6 +66,12 @@ function SelectEpisodeRow({ handleSelectedChange({ id, value: !isSelected, shiftKey: false }); }, [id, isSelected, handleSelectedChange]); + const warningMessage = getWarningMessage( + unverifiedSceneNumbering, + isAnime, + absoluteEpisodeNumber + ); + return ( {episodeNumber} - {isAnime ? ` (${absoluteEpisodeNumber})` : ''} + {isAnime && !!absoluteEpisodeNumber + ? ` (${absoluteEpisodeNumber})` + : ''} + {warningMessage ? ( + + ) : null} {title}