tedkulp/Sonarr
1
0
Fork 0
mirror of https://github.com/Sonarr/Sonarr.git synced 2026-04-23 22:25:56 -04:00
Code Issues Projects Releases Wiki Activity

Fix Language Selection on Manual Import

Browse Source
This commit is contained in:
Qstick
2022-08-21 10:46:09 -05:00
parent 89ee7d4452
commit fa1e67a6c8
7 changed files with 166 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js
+1 -1
View File
@@ -487,7 +487,7 @@ class InteractiveImportModalContent extends Component {
<SelectLanguageModal
isOpen={selectModalOpen === LANGUAGE}
ids={selectedIds}
languageId={0}
languageIds={[0]}
modalTitle={modalTitle}
onModalClose={this.onSelectModalClose}
/>
frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js
+1 -1
View File
@@ -441,7 +441,7 @@ class InteractiveImportRow extends Component {
<SelectLanguageModal
isOpen={isSelectLanguageModalOpen}
ids={[id]}
languageId={languages ? languages.id : 0}
languageIds={languages ? languages.map((l) => l.id) : []}
modalTitle={modalTitle}
onModalClose={this.onSelectLanguageModalClose}
/>
frontend/src/InteractiveImport/Language/SelectLanguageModal.js
+2
View File
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Modal from 'Components/Modal/Modal';
import { sizes } from 'Helpers/Props';
import SelectLanguageModalContentConnector from './SelectLanguageModalContentConnector';
class SelectLanguageModal extends Component {
@@ -19,6 +20,7 @@ class SelectLanguageModal extends Component {
<Modal
isOpen={isOpen}
onModalClose={onModalClose}
size={sizes.MEDIUM}
>
<SelectLanguageModalContentConnector
{...otherProps}
frontend/src/InteractiveImport/Language/SelectLanguageModalContent.css
+4
View File
@@ -0,0 +1,4 @@
.languageInput {
display: flex;
margin-bottom: 0;
}
frontend/src/InteractiveImport/Language/SelectLanguageModalContent.js
+121 -56
View File
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
import React from 'react';
import React, { Component } from 'react';
import Form from 'Components/Form/Form';
import FormGroup from 'Components/Form/FormGroup';
import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -10,73 +10,134 @@ import ModalBody from 'Components/Modal/ModalBody';
import ModalContent from 'Components/Modal/ModalContent';
import ModalFooter from 'Components/Modal/ModalFooter';
import ModalHeader from 'Components/Modal/ModalHeader';
import { inputTypes } from 'Helpers/Props';
import { inputTypes, kinds, sizes } from 'Helpers/Props';
import styles from './SelectLanguageModalContent.css';
function SelectLanguageModalContent(props) {
const {
languageId,
isFetching,
isPopulated,
error,
items,
modalTitle,
onModalClose,
onLanguageSelect
} = props;
class SelectLanguageModalContent extends Component {
const languageOptions = items.map(({ language }) => {
return {
key: language.id,
value: language.name
//
// Lifecycle
constructor(props, context) {
super(props, context);
const {
languageIds
} = props;
this.state = {
languageIds
};
});
}
return (
<ModalContent onModalClose={onModalClose}>
<ModalHeader>
{modalTitle} - Select Language
</ModalHeader>
//
// Listeners
<ModalBody>
{
isFetching &&
<LoadingIndicator />
}
onLanguageChange = ({ value, name }) => {
const {
languageIds
} = this.state;
{
!isFetching && !!error &&
<div>Unable to load languages</div>
}
const changedId = parseInt(name);
{
isPopulated && !error &&
<Form>
<FormGroup>
<FormLabel>Language</FormLabel>
let newLanguages = languageIds;
<FormInputGroup
type={inputTypes.SELECT}
name="language"
value={languageId}
values={languageOptions}
onChange={onLanguageSelect}
/>
</FormGroup>
</Form>
}
</ModalBody>
if (value) {
newLanguages.push(changedId);
}
<ModalFooter>
<Button onPress={onModalClose}>
Cancel
</Button>
</ModalFooter>
</ModalContent>
);
if (!value) {
newLanguages = languageIds.filter((i) => i !== changedId);
}
this.setState({ languageIds: newLanguages });
};
onLanguageSelect = () => {
this.props.onLanguageSelect(this.state);
};
//
// Render
render() {
const {
isFetching,
isPopulated,
error,
items,
modalTitle,
onModalClose
} = this.props;
const {
languageIds
} = this.state;
return (
<ModalContent onModalClose={onModalClose}>
<ModalHeader>
{modalTitle}
</ModalHeader>
<ModalBody>
{
isFetching &&
<LoadingIndicator />
}
{
!isFetching && !!error &&
<div>
Unable To Load Languages
</div>
}
{
isPopulated && !error &&
<Form>
{
items.map(( language ) => {
return (
<FormGroup
key={language.id}
size={sizes.EXTRA_SMALL}
className={styles.languageInput}
>
<FormLabel>{language.name}</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name={language.id.toString()}
value={languageIds.includes(language.id)}
onChange={this.onLanguageChange}
/>
</FormGroup>
);
})
}
</Form>
}
</ModalBody>
<ModalFooter>
<Button onPress={onModalClose}>
Cancel
</Button>
<Button
kind={kinds.SUCCESS}
onPress={this.onLanguageSelect}
>
Select Languages
</Button>
</ModalFooter>
</ModalContent>
);
}
}
SelectLanguageModalContent.propTypes = {
languageId: PropTypes.number.isRequired,
languageIds: PropTypes.arrayOf(PropTypes.number).isRequired,
isFetching: PropTypes.bool.isRequired,
isPopulated: PropTypes.bool.isRequired,
error: PropTypes.object,
@@ -86,4 +147,8 @@ SelectLanguageModalContent.propTypes = {
onModalClose: PropTypes.func.isRequired
};
SelectLanguageModalContent.defaultProps = {
languages: []
};
export default SelectLanguageModalContent;
frontend/src/InteractiveImport/Language/SelectLanguageModalContentConnector.js
+2 -2
View File
@@ -26,7 +26,7 @@ class SelectLanguageModalContentConnector extends Component {
//
// Listeners
onLanguageSelect = ({ value }) => {
onLanguageSelect = ({ languageIds }) => {
const {
ids,
dispatchUpdateInteractiveImportItems,
@@ -35,7 +35,7 @@ class SelectLanguageModalContentConnector extends Component {
const languages = [];
value.forEach((languageId) => {
languageIds.forEach((languageId) => {
const language = _.find(this.props.items,
(item) => item.id === parseInt(languageId));