New: Custom Formats

Co-Authored-By: ta264 <ta264@users.noreply.github.com>

frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContent.js

@@ -14,11 +14,23 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds, sizes } from 'Helpers/Props';
 import dimensions from 'Styles/Variables/dimensions';
+import QualityProfileFormatItems from './QualityProfileFormatItems';
 import QualityProfileItems from './QualityProfileItems';
 import styles from './EditQualityProfileModalContent.css';
 
 const MODAL_BODY_PADDING = parseInt(dimensions.modalBodyPadding);
 
+function getCustomFormatRender(formatItems, otherProps) {
+  return (
+    <QualityProfileFormatItems
+      profileFormatItems={formatItems.value}
+      errors={formatItems.errors}
+      warnings={formatItems.warnings}
+      {...otherProps}
+    />
+  );
+}
+
 class EditQualityProfileModalContent extends Component {
 
   //
@@ -92,6 +104,7 @@ class EditQualityProfileModalContent extends Component {
       isSaving,
       saveError,
       qualities,
+      customFormats,
       item,
       isInUse,
       onInputChange,
@@ -107,7 +120,10 @@ class EditQualityProfileModalContent extends Component {
       name,
       upgradeAllowed,
       cutoff,
-      items
+      minFormatScore,
+      cutoffFormatScore,
+      items,
+      formatItems
     } = item;
 
     return (
@@ -189,6 +205,44 @@ class EditQualityProfileModalContent extends Component {
                               />
                             </FormGroup>
                         }
+
+                        {
+                          formatItems.value.length > 0 &&
+                            <FormGroup size={sizes.EXTRA_SMALL}>
+                              <FormLabel size={sizes.SMALL}>
+                                Minimum Custom Format Score
+                              </FormLabel>
+
+                              <FormInputGroup
+                                type={inputTypes.NUMBER}
+                                name="minFormatScore"
+                                {...minFormatScore}
+                                helpText="Minimum custom format score allowed to download"
+                                onChange={onInputChange}
+                              />
+                            </FormGroup>
+                        }
+
+                        {
+                          upgradeAllowed.value && formatItems.value.length > 0 &&
+                            <FormGroup size={sizes.EXTRA_SMALL}>
+                              <FormLabel size={sizes.SMALL}>
+                                Upgrade Until Custom Format Score
+                              </FormLabel>
+
+                              <FormInputGroup
+                                type={inputTypes.NUMBER}
+                                name="cutoffFormatScore"
+                                {...cutoffFormatScore}
+                                helpText="Once this custom format score is reached Sonarr will no longer grab episode releases"
+                                onChange={onInputChange}
+                              />
+                            </FormGroup>
+                        }
+
+                        <div className={styles.formatItemLarge}>
+                          {getCustomFormatRender(formatItems, ...otherProps)}
+                        </div>
                       </div>
 
                       <div className={styles.formGroupWrapper}>
@@ -200,6 +254,10 @@ class EditQualityProfileModalContent extends Component {
                           {...otherProps}
                         />
                       </div>
+
+                      <div className={styles.formatItemSmall}>
+                        {getCustomFormatRender(formatItems, otherProps)}
+                      </div>
                     </div>
                   </Form>
 
@@ -215,7 +273,7 @@ class EditQualityProfileModalContent extends Component {
         >
           <ModalFooter>
             {
-              id &&
+              id ?
                 <div
                   className={styles.deleteButtonContainer}
                   title={
@@ -231,7 +289,8 @@ class EditQualityProfileModalContent extends Component {
                   >
                     Delete
                   </Button>
-                </div>
+                </div> :
+                null
             }
 
             <Button
@@ -261,6 +320,7 @@ EditQualityProfileModalContent.propTypes = {
   isSaving: PropTypes.bool.isRequired,
   saveError: PropTypes.object,
   qualities: PropTypes.arrayOf(PropTypes.object).isRequired,
+  customFormats: PropTypes.arrayOf(PropTypes.object).isRequired,
   item: PropTypes.object.isRequired,
   isInUse: PropTypes.bool.isRequired,
   onInputChange: PropTypes.func.isRequired,