diff --git a/frontend/src/Components/Form/Select/RootFolderSelectInput.tsx b/frontend/src/Components/Form/Select/RootFolderSelectInput.tsx index 8ddbd20ea5..dc199d5ef7 100644 --- a/frontend/src/Components/Form/Select/RootFolderSelectInput.tsx +++ b/frontend/src/Components/Form/Select/RootFolderSelectInput.tsx @@ -21,6 +21,7 @@ const ADD_NEW_KEY = 'addNew'; export interface RootFolderSelectInputValue extends EnhancedSelectInputValue { + freeSpace?: number; isMissing?: boolean; } @@ -42,66 +43,58 @@ function createRootFolderOptionsSelector( includeNoChange: boolean, includeNoChangeDisabled: boolean ) { - return createSelector( - createRootFoldersSelector(), - - (rootFolders) => { - const values: RootFolderSelectInputValue[] = rootFolders.items.map( - (rootFolder) => { - return { - key: rootFolder.path, - value: rootFolder.path, - freeSpace: rootFolder.freeSpace, - isMissing: false, - }; - } - ); - - if (includeNoChange) { - values.unshift({ - key: 'noChange', - get value() { - return translate('NoChange'); - }, - isDisabled: includeNoChangeDisabled, + return createSelector(createRootFoldersSelector(), (rootFolders) => { + const values: RootFolderSelectInputValue[] = rootFolders.items.map( + (rootFolder) => { + return { + key: rootFolder.path, + value: rootFolder.path, + freeSpace: rootFolder.freeSpace, isMissing: false, - }); + }; } + ); - if (!values.length) { - values.push({ - key: '', - value: '', - isDisabled: true, - isHidden: true, - }); - } - - if ( - includeMissingValue && - value && - !values.find((v) => v.key === value) - ) { - values.push({ - key: value, - value, - isMissing: true, - isDisabled: true, - }); - } - - values.push({ - key: ADD_NEW_KEY, - value: translate('AddANewPath'), + if (includeNoChange) { + values.unshift({ + key: 'noChange', + get value() { + return translate('NoChange'); + }, + isDisabled: includeNoChangeDisabled, + isMissing: false, }); - - return { - values, - isSaving: rootFolders.isSaving, - saveError: rootFolders.saveError, - }; } - ); + + if (!values.length) { + values.push({ + key: '', + value: '', + isDisabled: true, + isHidden: true, + }); + } + + if (includeMissingValue && value && !values.find((v) => v.key === value)) { + values.push({ + key: value, + value, + isMissing: true, + isDisabled: true, + }); + } + + values.push({ + key: ADD_NEW_KEY, + value: translate('AddANewPath'), + }); + + return { + values, + isSaving: rootFolders.isSaving, + saveError: rootFolders.saveError, + }; + }); } function RootFolderSelectInput({ diff --git a/frontend/src/Components/Form/Select/RootFolderSelectInputOption.tsx b/frontend/src/Components/Form/Select/RootFolderSelectInputOption.tsx index d9f5f7498e..f386127842 100644 --- a/frontend/src/Components/Form/Select/RootFolderSelectInputOption.tsx +++ b/frontend/src/Components/Form/Select/RootFolderSelectInputOption.tsx @@ -18,18 +18,16 @@ interface RootFolderSelectInputOptionProps isWindows?: boolean; } -function RootFolderSelectInputOption(props: RootFolderSelectInputOptionProps) { - const { - id, - value, - freeSpace, - isMissing, - movieFolder, - isMobile, - isWindows, - ...otherProps - } = props; - +function RootFolderSelectInputOption({ + id, + value, + freeSpace, + isMissing, + movieFolder, + isMobile, + isWindows, + ...otherProps +}: RootFolderSelectInputOptionProps) { const slashCharacter = isWindows ? '\\' : '/'; return ( diff --git a/frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.css b/frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.css index 105ab6ec8b..42e920da9d 100644 --- a/frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.css +++ b/frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.css @@ -30,3 +30,11 @@ text-align: right; font-size: $smallFontSize; } + +.isMissing { + flex: 0 0 auto; + margin-left: 15px; + color: var(--dangerColor); + text-align: right; + font-size: $smallFontSize; +} diff --git a/frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.css.d.ts b/frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.css.d.ts index c65e7f2ad9..63e1183488 100644 --- a/frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.css.d.ts +++ b/frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.css.d.ts @@ -2,6 +2,7 @@ // Please do not change this file! interface CssExports { 'freeSpace': string; + 'isMissing': string; 'movieFolder': string; 'path': string; 'pathContainer': string; diff --git a/frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.tsx b/frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.tsx index f62542d70b..15a9a04e8e 100644 --- a/frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.tsx +++ b/frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.tsx @@ -8,27 +8,23 @@ import styles from './RootFolderSelectInputSelectedValue.css'; interface RootFolderSelectInputSelectedValueProps { selectedValue: string; values: RootFolderSelectInputValue[]; - freeSpace?: number; movieFolder?: string; isWindows?: boolean; includeFreeSpace?: boolean; } -function RootFolderSelectInputSelectedValue( - props: RootFolderSelectInputSelectedValueProps -) { - const { - selectedValue, - values, - freeSpace, - movieFolder, - includeFreeSpace = true, - isWindows, - ...otherProps - } = props; - +function RootFolderSelectInputSelectedValue({ + selectedValue, + values, + movieFolder, + includeFreeSpace = true, + isWindows, + ...otherProps +}: RootFolderSelectInputSelectedValueProps) { const slashCharacter = isWindows ? '\\' : '/'; - const value = values.find((v) => v.key === selectedValue)?.value; + const { value, freeSpace, isMissing } = values.find( + (v) => v.key === selectedValue + ) as RootFolderSelectInputValue; return ( ) : null} + + {isMissing ? ( +
{translate('Missing')}
+ ) : null}
); }