Fix Language Selection on Manual Import
This commit is contained in:
Qstick
parent
89ee7d4452
commit
fa1e67a6c8
|
|
@ -487,7 +487,7 @@ class InteractiveImportModalContent extends Component {
|
|||
<SelectLanguageModal
|
||||
isOpen={selectModalOpen === LANGUAGE}
|
||||
ids={selectedIds}
|
||||
languageId={0}
|
||||
languageIds={[0]}
|
||||
modalTitle={modalTitle}
|
||||
onModalClose={this.onSelectModalClose}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
.languageInput {
|
||||
display: flex;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { createAction } from 'redux-actions';
|
||||
import { filterBuilderTypes, filterBuilderValueTypes, filterTypes, sortDirections } from 'Helpers/Props';
|
||||
import { filterBuilderTypes, filterBuilderValueTypes, filterTypePredicates, filterTypes, sortDirections } from 'Helpers/Props';
|
||||
import { createThunk, handleThunks } from 'Store/thunks';
|
||||
import sortByName from 'Utilities/Array/sortByName';
|
||||
import createAjaxRequest from 'Utilities/createAjaxRequest';
|
||||
import createFetchHandler from './Creators/createFetchHandler';
|
||||
import createHandleActions from './Creators/createHandleActions';
|
||||
|
|
@ -37,6 +38,13 @@ export const defaultState = {
|
|||
return seeders * 1000000 + leechers;
|
||||
},
|
||||
|
||||
languages: function(item, direction) {
|
||||
if (item.languages.length > 1) {
|
||||
return 10000;
|
||||
}
|
||||
|
||||
return item.languages[0].id;
|
||||
},
|
||||
rejections: function(item, direction) {
|
||||
const rejections = item.rejections;
|
||||
const releaseWeight = item.releaseWeight;
|
||||
|
|
@ -95,6 +103,13 @@ export const defaultState = {
|
|||
return false;
|
||||
},
|
||||
|
||||
languages: function(item, filterValue, type) {
|
||||
const predicate = filterTypePredicates[type];
|
||||
|
||||
const languages = item.languages.map((language) => language.name);
|
||||
|
||||
return predicate(languages, filterValue);
|
||||
},
|
||||
rejectionCount: function(item, value, type) {
|
||||
const rejectionCount = item.rejections.length;
|
||||
|
||||
|
|
@ -197,6 +212,25 @@ export const defaultState = {
|
|||
type: filterBuilderTypes.EXACT,
|
||||
valueType: filterBuilderValueTypes.QUALITY
|
||||
},
|
||||
{
|
||||
name: 'languages',
|
||||
label: 'Languages',
|
||||
type: filterBuilderTypes.ARRAY,
|
||||
optionsSelector: function(items) {
|
||||
const genreList = items.reduce((acc, release) => {
|
||||
release.languages.forEach((language) => {
|
||||
acc.push({
|
||||
id: language.name,
|
||||
name: language.name
|
||||
});
|
||||
});
|
||||
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
return genreList.sort(sortByName);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'rejectionCount',
|
||||
label: 'Rejection Count',
|
||||
|
|
|
|||
Loading…
Reference in New Issue