New: Redo Notification Triggers UI (From Lidarr)

pull/4798/head
Qstick 4 years ago
parent 5c7e28a280
commit b25e42c456

@ -15,6 +15,7 @@ import ModalFooter from 'Components/Modal/ModalFooter';
import ModalHeader from 'Components/Modal/ModalHeader';
import { inputTypes, kinds } from 'Helpers/Props';
import translate from 'Utilities/String/translate';
import NotificationEventItems from './NotificationEventItems';
import styles from './EditNotificationModalContent.css';
function EditNotificationModalContent(props) {
@ -39,17 +40,6 @@ function EditNotificationModalContent(props) {
id,
implementationName,
name,
onGrab,
onDownload,
onUpgrade,
onRename,
onHealthIssue,
supportsOnGrab,
supportsOnDownload,
supportsOnUpgrade,
supportsOnRename,
supportsOnHealthIssue,
includeHealthWarnings,
tags,
fields,
message
@ -96,89 +86,10 @@ function EditNotificationModalContent(props) {
/>
</FormGroup>
<FormGroup>
<FormLabel>On Grab</FormLabel>
<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}
<NotificationEventItems
item={item}
onInputChange={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>
<FormLabel>Tags</FormLabel>

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

@ -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;
Loading…
Cancel
Save