New: Redo Notification Triggers UI (From Lidarr)

This commit is contained in:
Qstick 2020-08-02 00:43:42 -04:00
parent 5c7e28a280
commit b25e42c456
3 changed files with 130 additions and 94 deletions

View File

@ -15,6 +15,7 @@ import ModalFooter from 'Components/Modal/ModalFooter';
import ModalHeader from 'Components/Modal/ModalHeader'; import ModalHeader from 'Components/Modal/ModalHeader';
import { inputTypes, kinds } from 'Helpers/Props'; import { inputTypes, kinds } from 'Helpers/Props';
import translate from 'Utilities/String/translate'; import translate from 'Utilities/String/translate';
import NotificationEventItems from './NotificationEventItems';
import styles from './EditNotificationModalContent.css'; import styles from './EditNotificationModalContent.css';
function EditNotificationModalContent(props) { function EditNotificationModalContent(props) {
@ -39,17 +40,6 @@ function EditNotificationModalContent(props) {
id, id,
implementationName, implementationName,
name, name,
onGrab,
onDownload,
onUpgrade,
onRename,
onHealthIssue,
supportsOnGrab,
supportsOnDownload,
supportsOnUpgrade,
supportsOnRename,
supportsOnHealthIssue,
includeHealthWarnings,
tags, tags,
fields, fields,
message message
@ -96,89 +86,10 @@ function EditNotificationModalContent(props) {
/> />
</FormGroup> </FormGroup>
<FormGroup> <NotificationEventItems
<FormLabel>On Grab</FormLabel> item={item}
onInputChange={onInputChange}
<FormInputGroup
type={inputTypes.CHECK}
name="onGrab"
helpText="Be notified when movies are available for download and has been sent to a download client"
isDisabled={!supportsOnGrab.value}
{...onGrab}
onChange={onInputChange}
/> />
</FormGroup>
<FormGroup>
<FormLabel>On Import</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="onDownload"
helpText="Be notified when movies are successfully imported"
isDisabled={!supportsOnDownload.value}
{...onDownload}
onChange={onInputChange}
/>
</FormGroup>
{
onDownload.value &&
<FormGroup>
<FormLabel>On Upgrade</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="onUpgrade"
helpText="Be notified when movies are upgraded to a better quality"
isDisabled={!supportsOnUpgrade.value}
{...onUpgrade}
onChange={onInputChange}
/>
</FormGroup>
}
<FormGroup>
<FormLabel>On Rename</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="onRename"
helpText="Be notified when movies are renamed"
isDisabled={!supportsOnRename.value}
{...onRename}
onChange={onInputChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>On Health Issue</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="onHealthIssue"
helpText="Be notified on health check failures"
isDisabled={!supportsOnHealthIssue.value}
{...onHealthIssue}
onChange={onInputChange}
/>
</FormGroup>
{
onHealthIssue.value &&
<FormGroup>
<FormLabel>Include Health Warnings</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="includeHealthWarnings"
helpText="Be notified on health warnings in addition to errors"
isDisabled={!supportsOnHealthIssue.value}
{...includeHealthWarnings}
onChange={onInputChange}
/>
</FormGroup>
}
<FormGroup> <FormGroup>
<FormLabel>Tags</FormLabel> <FormLabel>Tags</FormLabel>

View File

@ -0,0 +1,4 @@
.events {
margin-top: 10px;
user-select: none;
}

View File

@ -0,0 +1,121 @@
import PropTypes from 'prop-types';
import React from 'react';
import FormGroup from 'Components/Form/FormGroup';
import FormInputGroup from 'Components/Form/FormInputGroup';
import FormInputHelpText from 'Components/Form/FormInputHelpText';
import FormLabel from 'Components/Form/FormLabel';
import { inputTypes } from 'Helpers/Props';
import styles from './NotificationEventItems.css';
function NotificationEventItems(props) {
const {
item,
onInputChange
} = props;
const {
onGrab,
onDownload,
onUpgrade,
onRename,
onHealthIssue,
supportsOnGrab,
supportsOnDownload,
supportsOnUpgrade,
supportsOnRename,
supportsOnHealthIssue,
includeHealthWarnings
} = item;
return (
<FormGroup>
<FormLabel>Notification Triggers</FormLabel>
<div>
<FormInputHelpText
text="Select which events should trigger this notification"
link="https://github.com/Radarr/Radarr/wiki/Connections"
/>
<div className={styles.events}>
<div>
<FormInputGroup
type={inputTypes.CHECK}
name="onGrab"
helpText="On Grab"
isDisabled={!supportsOnGrab.value}
{...onGrab}
onChange={onInputChange}
/>
</div>
<div>
<FormInputGroup
type={inputTypes.CHECK}
name="onDownload"
helpText="Be notified when movies are successfully imported"
isDisabled={!supportsOnDownload.value}
{...onDownload}
onChange={onInputChange}
/>
</div>
{
onDownload.value &&
<div>
<FormInputGroup
type={inputTypes.CHECK}
name="onUpgrade"
helpText="Be notified when movies are upgraded to a better quality"
isDisabled={!supportsOnUpgrade.value}
{...onUpgrade}
onChange={onInputChange}
/>
</div>
}
<div>
<FormInputGroup
type={inputTypes.CHECK}
name="onRename"
helpText="On Rename"
isDisabled={!supportsOnRename.value}
{...onRename}
onChange={onInputChange}
/>
</div>
<div>
<FormInputGroup
type={inputTypes.CHECK}
name="onHealthIssue"
helpText="On Health Issue"
isDisabled={!supportsOnHealthIssue.value}
{...onHealthIssue}
onChange={onInputChange}
/>
</div>
{
onHealthIssue.value &&
<div>
<FormInputGroup
type={inputTypes.CHECK}
name="includeHealthWarnings"
helpText="Include Health Warnings"
isDisabled={!supportsOnHealthIssue.value}
{...includeHealthWarnings}
onChange={onInputChange}
/>
</div>
}
</div>
</div>
</FormGroup>
);
}
NotificationEventItems.propTypes = {
item: PropTypes.object.isRequired,
onInputChange: PropTypes.func.isRequired
};
export default NotificationEventItems;