diff --git a/frontend/src/Series/Delete/DeleteSeriesModalContent.css b/frontend/src/Series/Delete/DeleteSeriesModalContent.css index a6ac76133..d19745c2b 100644 --- a/frontend/src/Series/Delete/DeleteSeriesModalContent.css +++ b/frontend/src/Series/Delete/DeleteSeriesModalContent.css @@ -14,4 +14,9 @@ .deleteFilesMessage { margin-top: 20px; color: var(--dangerColor); + + .deleteCount { + margin-top: 20px; + color: var(--warningColor); + } } diff --git a/frontend/src/Series/Delete/DeleteSeriesModalContent.css.d.ts b/frontend/src/Series/Delete/DeleteSeriesModalContent.css.d.ts index f43438341..2b4dea066 100644 --- a/frontend/src/Series/Delete/DeleteSeriesModalContent.css.d.ts +++ b/frontend/src/Series/Delete/DeleteSeriesModalContent.css.d.ts @@ -1,6 +1,7 @@ // This file is automatically generated. // Please do not change this file! interface CssExports { + 'deleteCount': string; 'deleteFilesMessage': string; 'folderPath': string; 'pathContainer': string; diff --git a/frontend/src/Series/Delete/DeleteSeriesModalContent.js b/frontend/src/Series/Delete/DeleteSeriesModalContent.js index 2af242499..233f355e1 100644 --- a/frontend/src/Series/Delete/DeleteSeriesModalContent.js +++ b/frontend/src/Series/Delete/DeleteSeriesModalContent.js @@ -50,15 +50,15 @@ class DeleteSeriesModalContent extends Component { const { title, path, - statistics, + statistics = {}, deleteOptions, onModalClose, onDeleteOptionChange } = this.props; const { - episodeFileCount, - sizeOnDisk + episodeFileCount = 0, + sizeOnDisk = 0 } = statistics; const deleteFiles = this.state.deleteFiles; @@ -108,16 +108,20 @@ class DeleteSeriesModalContent extends Component { { - deleteFiles && + deleteFiles ?
+ { - !!episodeFileCount && -
{translate('DeleteSeriesFolderEpisodeCount', { episodeFileCount, size: formatBytes(sizeOnDisk) })}
+ episodeFileCount ? +
+ {translate('DeleteSeriesFolderEpisodeCount', { episodeFileCount, size: formatBytes(sizeOnDisk) })} +
: + null } -
+ : + null } - diff --git a/frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.css b/frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.css index 02a0514be..09cf7e58b 100644 --- a/frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.css +++ b/frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.css @@ -10,4 +10,15 @@ .path { margin-left: 5px; color: var(--dangerColor); + font-weight: bold; +} + +.statistics { + margin-left: 5px; + color: var(--warningColor); +} + +.deleteFilesMessage { + margin-top: 20px; + color: var(--warningColor); } diff --git a/frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.css.d.ts b/frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.css.d.ts index bcc2e2492..ca4650422 100644 --- a/frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.css.d.ts +++ b/frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.css.d.ts @@ -1,9 +1,11 @@ // This file is automatically generated. // Please do not change this file! interface CssExports { + 'deleteFilesMessage': string; 'message': string; 'path': string; 'pathContainer': string; + 'statistics': string; } export const cssExports: CssExports; export default cssExports; diff --git a/frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.tsx b/frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.tsx index 8904a24ce..ea35657e3 100644 --- a/frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.tsx +++ b/frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.tsx @@ -16,6 +16,7 @@ import Series from 'Series/Series'; import { bulkDeleteSeries, setDeleteOption } from 'Store/Actions/seriesActions'; import createAllSeriesSelector from 'Store/Selectors/createAllSeriesSelector'; import { CheckInputChanged } from 'typings/inputs'; +import formatBytes from 'Utilities/Number/formatBytes'; import translate from 'Utilities/String/translate'; import styles from './DeleteSeriesModalContent.css'; @@ -85,6 +86,24 @@ function DeleteSeriesModalContent(props: DeleteSeriesModalContentProps) { onModalClose, ]); + const { totalEpisodeFileCount, totalSizeOnDisk } = useMemo(() => { + return series.reduce( + (acc, s) => { + const { statistics = { episodeFileCount: 0, sizeOnDisk: 0 } } = s; + const { episodeFileCount = 0, sizeOnDisk = 0 } = statistics; + + acc.totalEpisodeFileCount += episodeFileCount; + acc.totalSizeOnDisk += sizeOnDisk; + + return acc; + }, + { + totalEpisodeFileCount: 0, + totalSizeOnDisk: 0, + } + ); + }, [series]); + return ( {translate('DeleteSelectedSeries')} @@ -137,19 +156,43 @@ function DeleteSeriesModalContent(props: DeleteSeriesModalContentProps) { + + {deleteFiles && !!totalEpisodeFileCount ? ( +
+ {translate('DeleteSeriesFolderEpisodeCount', { + episodeFileCount: totalEpisodeFileCount, + size: formatBytes(totalSizeOnDisk), + })} +
+ ) : null}