github/lidarr
1
0
Fork 0
mirror of https://github.com/lidarr/lidarr.git synced 2025-07-14 17:13:49 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

New: Download Client Tags

Browse source 
(cherry picked from commit f6ae9fd6c5173cbf1540341fa99d2f120be1d28e)
This commit is contained in:
Qstick 2023-07-10 22:51:14 -05:00 • committed by Bogdan
parent 39f5fc1808
commit eb9f56e1eb
25 changed files with 498 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/Settings/DownloadClients/DownloadClients/DownloadClient.js
View file

@ -3,6 +3,7 @@ import React, { Component } from 'react';
import Card from 'Components/Card';
import Label from 'Components/Label';
import ConfirmModal from 'Components/Modal/ConfirmModal';
import TagList from 'Components/TagList';
import { kinds } from 'Helpers/Props';
import translate from 'Utilities/String/translate';
import EditDownloadClientModalConnector from './EditDownloadClientModalConnector';
@ -56,7 +57,9 @@ class DownloadClient extends Component {
id,
name,
enable,
priority
priority,
tags,
tagList
} = this.props;
return (
@ -94,6 +97,11 @@ class DownloadClient extends Component {
}
</div>
<TagList
tags={tags}
tagList={tagList}
/>
<EditDownloadClientModalConnector
id={id}
isOpen={this.state.isEditDownloadClientModalOpen}
@ -120,6 +128,8 @@ DownloadClient.propTypes = {
name: PropTypes.string.isRequired,
enable: PropTypes.bool.isRequired,
priority: PropTypes.number.isRequired,
tags: PropTypes.arrayOf(PropTypes.number).isRequired,
tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
onConfirmDeleteDownloadClient: PropTypes.func.isRequired
};

3
frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.js
View file

@ -50,6 +50,7 @@ class DownloadClients extends Component {
const {
items,
onConfirmDeleteDownloadClient,
tagList,
...otherProps
} = this.props;
@ -71,6 +72,7 @@ class DownloadClients extends Component {
<DownloadClient
key={item.id}
{...item}
tagList={tagList}
onConfirmDeleteDownloadClient={onConfirmDeleteDownloadClient}
/>
);
@ -109,6 +111,7 @@ DownloadClients.propTypes = {
isFetching: PropTypes.bool.isRequired,
error: PropTypes.object,
items: PropTypes.arrayOf(PropTypes.object).isRequired,
tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
onConfirmDeleteDownloadClient: PropTypes.func.isRequired
};

9
frontend/src/Settings/DownloadClients/DownloadClients/DownloadClientsConnector.js
View file

@ -4,13 +4,20 @@ import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { deleteDownloadClient, fetchDownloadClients } from 'Store/Actions/settingsActions';
import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
import createTagsSelector from 'Store/Selectors/createTagsSelector';
import sortByName from 'Utilities/Array/sortByName';
import DownloadClients from './DownloadClients';
function createMapStateToProps() {
return createSelector(
createSortedSectionSelector('settings.downloadClients', sortByName),
(downloadClients) => downloadClients
createTagsSelector(),
(downloadClients, tagList) => {
return {
...downloadClients,
tagList
};
}
);
}

13
frontend/src/Settings/DownloadClients/DownloadClients/EditDownloadClientModalContent.js
View file

@ -51,6 +51,7 @@ class EditDownloadClientModalContent extends Component {
removeCompletedDownloads,
removeFailedDownloads,
fields,
tags,
message
} = item;
@ -146,6 +147,18 @@ class EditDownloadClientModalContent extends Component {
/>
</FormGroup>
<FormGroup>
<FormLabel>{translate('Tags')}</FormLabel>
<FormInputGroup
type={inputTypes.TAG}
name="tags"
helpText={translate('DownloadClientTagHelpText')}
{...tags}
onChange={onInputChange}
/>
</FormGroup>
<FieldSet
size={sizes.SMALL}
legend={translate('CompletedDownloadHandling')}

48
frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalContent.tsx
View file

@ -25,6 +25,7 @@ import translate from 'Utilities/String/translate';
import getSelectedIds from 'Utilities/Table/getSelectedIds';
import ManageDownloadClientsEditModal from './Edit/ManageDownloadClientsEditModal';
import ManageDownloadClientsModalRow from './ManageDownloadClientsModalRow';
import TagsModal from './Tags/TagsModal';
import styles from './ManageDownloadClientsModalContent.css';
// TODO: This feels janky to do, but not sure of a better way currently
@ -69,6 +70,12 @@ const COLUMNS = [
isSortable: true,
isVisible: true,
},
{
name: 'tags',
label: 'Tags',
isSortable: true,
isVisible: true,
},
];
interface ManageDownloadClientsModalContentProps {
@ -94,6 +101,8 @@ function ManageDownloadClientsModalContent(
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
const [isTagsModalOpen, setIsTagsModalOpen] = useState(false);
const [isSavingTags, setIsSavingTags] = useState(false);
const [selectState, setSelectState] = useSelectState();
@ -140,6 +149,30 @@ function ManageDownloadClientsModalContent(
[selectedIds, dispatch]
);
const onTagsPress = useCallback(() => {
setIsTagsModalOpen(true);
}, [setIsTagsModalOpen]);
const onTagsModalClose = useCallback(() => {
setIsTagsModalOpen(false);
}, [setIsTagsModalOpen]);
const onApplyTagsPress = useCallback(
(tags: number[], applyTags: string) => {
setIsSavingTags(true);
setIsTagsModalOpen(false);
dispatch(
bulkEditDownloadClients({
ids: selectedIds,
tags,
applyTags,
})
);
},
[selectedIds, dispatch]
);
const onSelectAllChange = useCallback(
({ value }: SelectStateInputProps) => {
setSelectState({ type: value ? 'selectAll' : 'unselectAll', items });
@ -222,6 +255,14 @@ function ManageDownloadClientsModalContent(
>
{translate('Edit')}
</SpinnerButton>
<SpinnerButton
isSpinning={isSaving && isSavingTags}
isDisabled={!anySelected}
onPress={onTagsPress}
>
{translate('SetTags')}
</SpinnerButton>
</div>
<Button onPress={onModalClose}>{translate('Close')}</Button>
@ -234,6 +275,13 @@ function ManageDownloadClientsModalContent(
downloadClientIds={selectedIds}
/>
<TagsModal
isOpen={isTagsModalOpen}
ids={selectedIds}
onApplyTagsPress={onApplyTagsPress}
onModalClose={onTagsModalClose}
/>
<ConfirmModal
isOpen={isDeleteModalOpen}
kind={kinds.DANGER}

7
frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalRow.tsx
View file

@ -4,6 +4,7 @@ import TableRowCell from 'Components/Table/Cells/TableRowCell';
import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
import Column from 'Components/Table/Column';
import TableRow from 'Components/Table/TableRow';
import TagListConnector from 'Components/TagListConnector';
import { kinds } from 'Helpers/Props';
import { SelectStateInputProps } from 'typings/props';
import translate from 'Utilities/String/translate';
@ -17,6 +18,7 @@ interface ManageDownloadClientsModalRowProps {
removeCompletedDownloads: boolean;
removeFailedDownloads: boolean;
implementation: string;
tags: number[];
columns: Column[];
isSelected?: boolean;
onSelectedChange(result: SelectStateInputProps): void;
@ -34,6 +36,7 @@ function ManageDownloadClientsModalRow(
removeCompletedDownloads,
removeFailedDownloads,
implementation,
tags,
onSelectedChange,
} = props;
@ -75,6 +78,10 @@ function ManageDownloadClientsModalRow(
<TableRowCell className={styles.removeFailedDownloads}>
{removeFailedDownloads ? translate('Yes') : translate('No')}
</TableRowCell>
<TableRowCell className={styles.tags}>
<TagListConnector tags={tags} />
</TableRowCell>
</TableRow>
);
}

22
frontend/src/Settings/DownloadClients/DownloadClients/Manage/Tags/TagsModal.tsx Normal file
View file

@ -0,0 +1,22 @@
import React from 'react';
import Modal from 'Components/Modal/Modal';
import TagsModalContent from './TagsModalContent';
interface TagsModalProps {
isOpen: boolean;
ids: number[];
onApplyTagsPress: (tags: number[], applyTags: string) => void;
onModalClose: () => void;
}
function TagsModal(props: TagsModalProps) {
const { isOpen, onModalClose, ...otherProps } = props;
return (
<Modal isOpen={isOpen} onModalClose={onModalClose}>
<TagsModalContent {...otherProps} onModalClose={onModalClose} />
</Modal>
);
}
export default TagsModal;

12
frontend/src/Settings/DownloadClients/DownloadClients/Manage/Tags/TagsModalContent.css Normal file
View file

@ -0,0 +1,12 @@
.renameIcon {
margin-left: 5px;
}
.message {
margin-top: 20px;
margin-bottom: 10px;
}
.result {
padding-top: 4px;
}

9
frontend/src/Settings/DownloadClients/DownloadClients/Manage/Tags/TagsModalContent.css.d.ts vendored Normal file
View file

@ -0,0 +1,9 @@
// This file is automatically generated.
// Please do not change this file!
interface CssExports {
'message': string;
'renameIcon': string;
'result': string;
}
export const cssExports: CssExports;
export default cssExports;

185
frontend/src/Settings/DownloadClients/DownloadClients/Manage/Tags/TagsModalContent.tsx Normal file
View file

@ -0,0 +1,185 @@
import { uniq } from 'lodash';
import React, { useCallback, useMemo, useState } from 'react';
import { useSelector } from 'react-redux';
import AppState from 'App/State/AppState';
import { DownloadClientAppState } from 'App/State/SettingsAppState';
import { Tag } from 'App/State/TagsAppState';
import Form from 'Components/Form/Form';
import FormGroup from 'Components/Form/FormGroup';
import FormInputGroup from 'Components/Form/FormInputGroup';
import FormLabel from 'Components/Form/FormLabel';
import Label from 'Components/Label';
import Button from 'Components/Link/Button';
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, kinds, sizes } from 'Helpers/Props';
import createTagsSelector from 'Store/Selectors/createTagsSelector';
import DownloadClient from 'typings/DownloadClient';
import translate from 'Utilities/String/translate';
import styles from './TagsModalContent.css';
interface TagsModalContentProps {
ids: number[];
onApplyTagsPress: (tags: number[], applyTags: string) => void;
onModalClose: () => void;
}
function TagsModalContent(props: TagsModalContentProps) {
const { ids, onModalClose, onApplyTagsPress } = props;
const allDownloadClients: DownloadClientAppState = useSelector(
(state: AppState) => state.settings.downloadClients
);
const tagList: Tag[] = useSelector(createTagsSelector());
const [tags, setTags] = useState<number[]>([]);
const [applyTags, setApplyTags] = useState('add');
const downloadClientsTags = useMemo(() => {
const tags = ids.reduce((acc: number[], id) => {
const s = allDownloadClients.items.find(
(s: DownloadClient) => s.id === id
);
if (s) {
acc.push(...s.tags);
}
return acc;
}, []);
return uniq(tags);
}, [ids, allDownloadClients]);
const onTagsChange = useCallback(
({ value }: { value: number[] }) => {
setTags(value);
},
[setTags]
);
const onApplyTagsChange = useCallback(
({ value }: { value: string }) => {
setApplyTags(value);
},
[setApplyTags]
);
const onApplyPress = useCallback(() => {
onApplyTagsPress(tags, applyTags);
}, [tags, applyTags, onApplyTagsPress]);
const applyTagsOptions = [
{ key: 'add', value: translate('Add') },
{ key: 'remove', value: translate('Remove') },
{ key: 'replace', value: translate('Replace') },
];
return (
<ModalContent onModalClose={onModalClose}>
<ModalHeader>{translate('Tags')}</ModalHeader>
<ModalBody>
<Form>
<FormGroup>
<FormLabel>{translate('Tags')}</FormLabel>
<FormInputGroup
type={inputTypes.TAG}
name="tags"
value={tags}
onChange={onTagsChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>{translate('ApplyTags')}</FormLabel>
<FormInputGroup
type={inputTypes.SELECT}
name="applyTags"
value={applyTags}
values={applyTagsOptions}
helpTexts={[
translate('ApplyTagsHelpTexts1'),
translate('ApplyTagsHelpTexts2'),
translate('ApplyTagsHelpTexts3'),
translate('ApplyTagsHelpTexts4'),
]}
onChange={onApplyTagsChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>{translate('Result')}</FormLabel>
<div className={styles.result}>
{downloadClientsTags.map((id) => {
const tag = tagList.find((t) => t.id === id);
if (!tag) {
return null;
}
const removeTag =
(applyTags === 'remove' && tags.indexOf(id) > -1) ||
(applyTags === 'replace' && tags.indexOf(id) === -1);
return (
<Label
key={tag.id}
title={
removeTag
? translate('RemovingTag')
: translate('ExistingTag')
}
kind={removeTag ? kinds.INVERSE : kinds.INFO}
size={sizes.LARGE}
>
{tag.label}
</Label>
);
})}
{(applyTags === 'add' || applyTags === 'replace') &&
tags.map((id) => {
const tag = tagList.find((t) => t.id === id);
if (!tag) {
return null;
}
if (downloadClientsTags.indexOf(id) > -1) {
return null;
}
return (
<Label
key={tag.id}
title={translate('AddingTag')}
kind={kinds.SUCCESS}
size={sizes.LARGE}
>
{tag.label}
</Label>
);
})}
</div>
</FormGroup>
</Form>
</ModalBody>
<ModalFooter>
<Button onPress={onModalClose}>{translate('Cancel')}</Button>
<Button kind={kinds.PRIMARY} onPress={onApplyPress}>
{translate('Apply')}
</Button>
</ModalFooter>
</ModalContent>
);
}
export default TagsModalContent;

18
frontend/src/Settings/Tags/Details/TagDetailsModalContent.js
View file

@ -22,6 +22,7 @@ function TagDetailsModalContent(props) {
notifications,
releaseProfiles,
indexers,
downloadClients,
onModalClose,
onDeleteTagPress
} = props;
@ -180,6 +181,22 @@ function TagDetailsModalContent(props) {
</FieldSet> :
null
}
{
downloadClients.length ?
<FieldSet legend={translate('DownloadClients')}>
{
downloadClients.map((item) => {
return (
<div key={item.id}>
{item.name}
</div>
);
})
}
</FieldSet> :
null
}
</ModalBody>
<ModalFooter>
@ -214,6 +231,7 @@ TagDetailsModalContent.propTypes = {
notifications: PropTypes.arrayOf(PropTypes.object).isRequired,
releaseProfiles: PropTypes.arrayOf(PropTypes.object).isRequired,
indexers: PropTypes.arrayOf(PropTypes.object).isRequired,
downloadClients: PropTypes.arrayOf(PropTypes.object).isRequired,
onModalClose: PropTypes.func.isRequired,
onDeleteTagPress: PropTypes.func.isRequired
};

14
frontend/src/Settings/Tags/Details/TagDetailsModalContentConnector.js
View file

@ -77,6 +77,14 @@ function createMatchingIndexersSelector() {
);
}
function createMatchingDownloadClientsSelector() {
return createSelector(
(state, { downloadClientIds }) => downloadClientIds,
(state) => state.settings.downloadClients.items,
findMatchingItems
);
}
function createMapStateToProps() {
return createSelector(
createMatchingArtistSelector(),
@ -85,14 +93,16 @@ function createMapStateToProps() {
createMatchingNotificationsSelector(),
createMatchingReleaseProfilesSelector(),
createMatchingIndexersSelector(),
(artist, delayProfiles, importLists, notifications, releaseProfiles, indexers) => {
createMatchingDownloadClientsSelector(),
(artist, delayProfiles, importLists, notifications, releaseProfiles, indexers, downloadClients) => {
return {
artist,
delayProfiles,
importLists,
notifications,
releaseProfiles,
indexers
indexers,
downloadClients
};
}
);

21
frontend/src/Settings/Tags/Tag.js
View file

@ -57,8 +57,9 @@ class Tag extends Component {
importListIds,
notificationIds,
restrictionIds,
artistIds,
indexerIds,
artistIds
downloadClientIds
} = this.props;
const {
@ -71,8 +72,9 @@ class Tag extends Component {
importListIds.length ||
notificationIds.length ||
restrictionIds.length ||
artistIds.length ||
indexerIds.length ||
artistIds.length
downloadClientIds.length
);
return (
@ -134,6 +136,14 @@ class Tag extends Component {
</div> :
null
}
{
downloadClientIds.length ?
<div>
{downloadClientIds.length} download client{indexerIds.length > 1 && 's'}
</div> :
null
}
</div>
}
@ -153,6 +163,7 @@ class Tag extends Component {
notificationIds={notificationIds}
restrictionIds={restrictionIds}
indexerIds={indexerIds}
downloadClientIds={downloadClientIds}
isOpen={isDetailsModalOpen}
onModalClose={this.onDetailsModalClose}
onDeleteTagPress={this.onDeleteTagPress}
@ -179,8 +190,9 @@ Tag.propTypes = {
importListIds: PropTypes.arrayOf(PropTypes.number).isRequired,
notificationIds: PropTypes.arrayOf(PropTypes.number).isRequired,
restrictionIds: PropTypes.arrayOf(PropTypes.number).isRequired,
indexerIds: PropTypes.arrayOf(PropTypes.number).isRequired,
artistIds: PropTypes.arrayOf(PropTypes.number).isRequired,
indexerIds: PropTypes.arrayOf(PropTypes.number).isRequired,
downloadClientIds: PropTypes.arrayOf(PropTypes.number).isRequired,
onConfirmDeleteTag: PropTypes.func.isRequired
};
@ -189,8 +201,9 @@ Tag.defaultProps = {
importListIds: [],
notificationIds: [],
restrictionIds: [],
artistIds: [],
indexerIds: [],
artistIds: []
downloadClientIds: []
};
export default Tag;

12
frontend/src/Settings/Tags/TagsConnector.js
View file

@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { fetchDelayProfiles, fetchImportLists, fetchIndexers, fetchNotifications, fetchReleaseProfiles } from 'Store/Actions/settingsActions';
import { fetchDelayProfiles, fetchDownloadClients, fetchImportLists, fetchIndexers, fetchNotifications, fetchReleaseProfiles } from 'Store/Actions/settingsActions';
import { fetchTagDetails } from 'Store/Actions/tagActions';
import Tags from './Tags';
@ -30,7 +30,8 @@ const mapDispatchToProps = {
dispatchFetchImportLists: fetchImportLists,
dispatchFetchNotifications: fetchNotifications,
dispatchFetchReleaseProfiles: fetchReleaseProfiles,
dispatchFetchIndexers: fetchIndexers
dispatchFetchIndexers: fetchIndexers,
dispatchFetchDownloadClients: fetchDownloadClients
};
class MetadatasConnector extends Component {
@ -45,7 +46,8 @@ class MetadatasConnector extends Component {
dispatchFetchImportLists,
dispatchFetchNotifications,
dispatchFetchReleaseProfiles,
dispatchFetchIndexers
dispatchFetchIndexers,
dispatchFetchDownloadClients
} = this.props;
dispatchFetchTagDetails();
@ -54,6 +56,7 @@ class MetadatasConnector extends Component {
dispatchFetchNotifications();
dispatchFetchReleaseProfiles();
dispatchFetchIndexers();
dispatchFetchDownloadClients();
}
//
@ -74,7 +77,8 @@ MetadatasConnector.propTypes = {
dispatchFetchImportLists: PropTypes.func.isRequired,
dispatchFetchNotifications: PropTypes.func.isRequired,
dispatchFetchReleaseProfiles: PropTypes.func.isRequired,
dispatchFetchIndexers: PropTypes.func.isRequired
dispatchFetchIndexers: PropTypes.func.isRequired,
dispatchFetchDownloadClients: PropTypes.func.isRequired
};
export default connect(createMapStateToProps, mapDispatchToProps)(MetadatasConnector);