tedkulp/Radarr
1
0
Fork 0
mirror of https://github.com/Radarr/Radarr.git synced 2026-04-18 21:35:51 -04:00
Code Issues Projects Releases Wiki Activity

New: Get Custom Formats Working in Aphrodite

Browse Source
This commit is contained in:
Qstick
2019-08-31 02:45:22 -04:00
parent 86dde88fe6
commit b2268c7452
35 changed files with 1066 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.js
+14 -14
View File
@@ -1,11 +1,12 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import split from 'Utilities/String/split';
import { icons, kinds } from 'Helpers/Props';
import Card from 'Components/Card';
import Label from 'Components/Label';
import IconButton from 'Components/Link/IconButton';
import ConfirmModal from 'Components/Modal/ConfirmModal';
// import EditCustomFormatModalConnector from './EditCustomFormatModalConnector';
import EditCustomFormatModalConnector from './EditCustomFormatModalConnector';
import styles from './CustomFormat.css';
class CustomFormat extends Component {
@@ -62,15 +63,15 @@ class CustomFormat extends Component {
render() {
const {
// id,
id,
name,
items,
formatTags,
isDeleting
} = this.props;
return (
<Card
className={styles.CustomFormat}
className={styles.customFormat}
overlayContent={true}
onPress={this.onEditCustomFormatPress}
>
@@ -87,32 +88,31 @@ class CustomFormat extends Component {
/>
</div>
<div className={styles.formats}>
<div>
{
items.map((item) => {
if (!item.allowed) {
split(formatTags).map((item) => {
if (!item) {
return null;
}
return (
<Label
key={item.quality.id}
kind={kinds.default}
title={null}
key={item}
kind={kinds.DEFAULT}
>
{item.quality.name}
{item}
</Label>
);
})
}
</div>
{/* <EditCustomFormatModalConnector
<EditCustomFormatModalConnector
id={id}
isOpen={this.state.isEditCustomFormatModalOpen}
onModalClose={this.onEditCustomFormatModalClose}
onDeleteCustomFormatPress={this.onDeleteCustomFormatPress}
/> */}
/>
<ConfirmModal
isOpen={this.state.isDeleteCustomFormatModalOpen}
@@ -132,7 +132,7 @@ class CustomFormat extends Component {
CustomFormat.propTypes = {
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
items: PropTypes.arrayOf(PropTypes.object).isRequired,
formatTags: PropTypes.string.isRequired,
isDeleting: PropTypes.bool.isRequired,
onConfirmDeleteCustomFormat: PropTypes.func.isRequired,
onCloneCustomFormatPress: PropTypes.func.isRequired
frontend/src/Settings/CustomFormats/CustomFormats/CustomFormats.js
+3 -4
View File
@@ -7,7 +7,7 @@ import Card from 'Components/Card';
import Icon from 'Components/Icon';
import PageSectionContent from 'Components/Page/PageSectionContent';
import CustomFormat from './CustomFormat';
// import EditCustomFormatModalConnector from './EditCustomFormatModalConnector';
import EditCustomFormatModalConnector from './EditCustomFormatModalConnector';
import styles from './CustomFormats.css';
class CustomFormats extends Component {
@@ -57,7 +57,7 @@ class CustomFormats extends Component {
errorMessage="Unable to load Custom Formats"
{...otherProps}c={true}
>
<div className={styles.CustomFormats}>
<div className={styles.customFormats}>
{
items.sort(sortByName).map((item) => {
return (
@@ -85,11 +85,10 @@ class CustomFormats extends Component {
</Card>
</div>
{/*
<EditCustomFormatModalConnector
isOpen={this.state.isCustomFormatModalOpen}
onModalClose={this.onModalClose}
/> */}
/>
</PageSectionContent>
</FieldSet>
frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModal.js
+61
View File
@@ -0,0 +1,61 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { sizes } from 'Helpers/Props';
import Modal from 'Components/Modal/Modal';
import EditCustomFormatModalContentConnector from './EditCustomFormatModalContentConnector';
class EditCustomFormatModal extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
height: 'auto'
};
}
//
// Listeners
onContentHeightChange = (height) => {
if (this.state.height === 'auto' || height > this.state.height) {
this.setState({ height });
}
}
//
// Render
render() {
const {
isOpen,
onModalClose,
...otherProps
} = this.props;
return (
<Modal
style={{ height: `${this.state.height}px` }}
isOpen={isOpen}
size={sizes.EXTRA_LARGE}
onModalClose={onModalClose}
>
<EditCustomFormatModalContentConnector
{...otherProps}
onContentHeightChange={this.onContentHeightChange}
onModalClose={onModalClose}
/>
</Modal>
);
}
}
EditCustomFormatModal.propTypes = {
isOpen: PropTypes.bool.isRequired,
onModalClose: PropTypes.func.isRequired
};
export default EditCustomFormatModal;
frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalConnector.js
+43
View File
@@ -0,0 +1,43 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { clearPendingChanges } from 'Store/Actions/baseActions';
import EditCustomFormatModal from './EditCustomFormatModal';
function mapStateToProps() {
return {};
}
const mapDispatchToProps = {
clearPendingChanges
};
class EditCustomFormatModalConnector extends Component {
//
// Listeners
onModalClose = () => {
this.props.clearPendingChanges({ section: 'settings.customFormats' });
this.props.onModalClose();
}
//
// Render
render() {
return (
<EditCustomFormatModal
{...this.props}
onModalClose={this.onModalClose}
/>
);
}
}
EditCustomFormatModalConnector.propTypes = {
onModalClose: PropTypes.func.isRequired,
clearPendingChanges: PropTypes.func.isRequired
};
export default connect(mapStateToProps, mapDispatchToProps)(EditCustomFormatModalConnector);
frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.css
+18
View File
@@ -0,0 +1,18 @@
.formGroupsContainer {
display: flex;
flex-wrap: wrap;
}
.formGroupWrapper {
flex: 0 0 calc($formGroupSmallWidth - 100px);
}
.deleteButtonContainer {
margin-right: auto;
}
@media only screen and (max-width: $breakpointLarge) {
.formGroupsContainer {
display: block;
}
}
frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.js
+131
View File
@@ -0,0 +1,131 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { inputTypes, sizes } from 'Helpers/Props';
import Button from 'Components/Link/Button';
import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import ModalContent from 'Components/Modal/ModalContent';
import ModalHeader from 'Components/Modal/ModalHeader';
import ModalBody from 'Components/Modal/ModalBody';
import ModalFooter from 'Components/Modal/ModalFooter';
import Form from 'Components/Form/Form';
import FormGroup from 'Components/Form/FormGroup';
import FormLabel from 'Components/Form/FormLabel';
import FormInputGroup from 'Components/Form/FormInputGroup';
import styles from './EditCustomFormatModalContent.css';
class EditCustomFormatModalContent extends Component {
//
// Render
render() {
const {
isFetching,
error,
isSaving,
saveError,
item,
onInputChange,
onSavePress,
onModalClose,
...otherProps
} = this.props;
const {
id,
name,
formatTags
} = item;
return (
<ModalContent onModalClose={onModalClose}>
<ModalHeader>
{id ? 'Edit Custom Format' : 'Add Custom Format'}
</ModalHeader>
<ModalBody>
<div>
{
isFetching &&
<LoadingIndicator />
}
{
!isFetching && !!error &&
<div>Unable to add a new custom format, please try again.</div>
}
{
!isFetching && !error &&
<Form
{...otherProps}
>
<div className={styles.formGroupsContainer}>
<div className={styles.formGroupWrapper}>
<FormGroup size={sizes.EXTRA_SMALL}>
<FormLabel size={sizes.SMALL}>
Name
</FormLabel>
<FormInputGroup
type={inputTypes.TEXT}
name="name"
{...name}
onChange={onInputChange}
/>
</FormGroup>
<FormGroup size={sizes.EXTRA_SMALL}>
<FormLabel size={sizes.SMALL}>
Format Tags
</FormLabel>
<FormInputGroup
type={inputTypes.TEXT_TAG}
name="formatTags"
{...formatTags}
onChange={onInputChange}
/>
</FormGroup>
</div>
</div>
</Form>
}
</div>
</ModalBody>
<ModalFooter>
<Button
onPress={onModalClose}
>
Cancel
</Button>
<SpinnerErrorButton
isSpinning={isSaving}
error={saveError}
onPress={onSavePress}
>
Save
</SpinnerErrorButton>
</ModalFooter>
</ModalContent>
);
}
}
EditCustomFormatModalContent.propTypes = {
isFetching: PropTypes.bool.isRequired,
error: PropTypes.object,
isSaving: PropTypes.bool.isRequired,
saveError: PropTypes.object,
item: PropTypes.object.isRequired,
onInputChange: PropTypes.func.isRequired,
onSavePress: PropTypes.func.isRequired,
onContentHeightChange: PropTypes.func.isRequired,
onModalClose: PropTypes.func.isRequired
};
export default EditCustomFormatModalContent;
frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContentConnector.js
+74
View File
@@ -0,0 +1,74 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
import { setCustomFormatValue, saveCustomFormat } from 'Store/Actions/settingsActions';
import EditCustomFormatModalContent from './EditCustomFormatModalContent';
function createMapStateToProps() {
return createSelector(
(state) => state.settings.advancedSettings,
createProviderSettingsSelector('customFormats'),
(advancedSettings, customFormat) => {
return {
advancedSettings,
...customFormat
};
}
);
}
const mapDispatchToProps = {
setCustomFormatValue,
saveCustomFormat
};
class EditCustomFormatModalContentConnector extends Component {
//
// Lifecycle
componentDidUpdate(prevProps, prevState) {
if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
this.props.onModalClose();
}
}
//
// Listeners
onInputChange = ({ name, value }) => {
this.props.setCustomFormatValue({ name, value });
}
onSavePress = () => {
this.props.saveCustomFormat({ id: this.props.id });
}
//
// Render
render() {
return (
<EditCustomFormatModalContent
{...this.props}
onSavePress={this.onSavePress}
onInputChange={this.onInputChange}
/>
);
}
}
EditCustomFormatModalContentConnector.propTypes = {
id: PropTypes.number,
isFetching: PropTypes.bool.isRequired,
isSaving: PropTypes.bool.isRequired,
saveError: PropTypes.object,
item: PropTypes.object.isRequired,
setCustomFormatValue: PropTypes.func.isRequired,
saveCustomFormat: PropTypes.func.isRequired,
onModalClose: PropTypes.func.isRequired
};
export default connect(createMapStateToProps, mapDispatchToProps)(EditCustomFormatModalContentConnector);