New: (UI) Add clone indexer in info modal

This commit is contained in:
Bogdan
2023-09-03 14:14:54 +03:00
parent 07b98f4137
commit c873b3ffac
7 changed files with 39 additions and 8 deletions

View File

@@ -22,7 +22,7 @@ import AddIndexerModal from 'Indexer/Add/AddIndexerModal';
import EditIndexerModalConnector from 'Indexer/Edit/EditIndexerModalConnector'; import EditIndexerModalConnector from 'Indexer/Edit/EditIndexerModalConnector';
import NoIndexer from 'Indexer/NoIndexer'; import NoIndexer from 'Indexer/NoIndexer';
import { executeCommand } from 'Store/Actions/commandActions'; import { executeCommand } from 'Store/Actions/commandActions';
import { testAllIndexers } from 'Store/Actions/indexerActions'; import { cloneIndexer, testAllIndexers } from 'Store/Actions/indexerActions';
import { import {
setIndexerFilter, setIndexerFilter,
setIndexerSort, setIndexerSort,
@@ -98,6 +98,15 @@ const IndexerIndex = withScrollPosition((props: IndexerIndexProps) => {
setIsEditIndexerModalOpen(false); setIsEditIndexerModalOpen(false);
}, [setIsEditIndexerModalOpen]); }, [setIsEditIndexerModalOpen]);
const onCloneIndexerPress = useCallback(
(id: number) => {
dispatch(cloneIndexer({ id }));
setIsEditIndexerModalOpen(true);
},
[dispatch, setIsEditIndexerModalOpen]
);
const onAppIndexerSyncPress = useCallback(() => { const onAppIndexerSyncPress = useCallback(() => {
dispatch( dispatch(
executeCommand({ executeCommand({
@@ -303,6 +312,7 @@ const IndexerIndex = withScrollPosition((props: IndexerIndexProps) => {
jumpToCharacter={jumpToCharacter} jumpToCharacter={jumpToCharacter}
isSelectMode={isSelectMode} isSelectMode={isSelectMode}
isSmallScreen={isSmallScreen} isSmallScreen={isSmallScreen}
onCloneIndexerPress={onCloneIndexerPress}
/> />
<IndexerIndexFooter /> <IndexerIndexFooter />

View File

@@ -27,10 +27,11 @@ interface IndexerIndexRowProps {
sortKey: string; sortKey: string;
columns: Column[]; columns: Column[];
isSelectMode: boolean; isSelectMode: boolean;
onCloneIndexerPress(id: number): void;
} }
function IndexerIndexRow(props: IndexerIndexRowProps) { function IndexerIndexRow(props: IndexerIndexRowProps) {
const { indexerId, columns, isSelectMode } = props; const { indexerId, columns, isSelectMode, onCloneIndexerPress } = props;
const { indexer, appProfile, status, longDateFormat, timeFormat } = const { indexer, appProfile, status, longDateFormat, timeFormat } =
useSelector(createIndexerIndexItemSelector(props.indexerId)); useSelector(createIndexerIndexItemSelector(props.indexerId));
@@ -153,6 +154,7 @@ function IndexerIndexRow(props: IndexerIndexRowProps) {
<IndexerTitleLink <IndexerTitleLink
indexerId={indexerId} indexerId={indexerId}
indexerName={indexerName} indexerName={indexerName}
onCloneIndexerPress={onCloneIndexerPress}
/> />
</VirtualTableRowCell> </VirtualTableRowCell>
); );

View File

@@ -26,6 +26,7 @@ interface RowItemData {
sortKey: string; sortKey: string;
columns: Column[]; columns: Column[];
isSelectMode: boolean; isSelectMode: boolean;
onCloneIndexerPress(id: number): void;
} }
interface IndexerIndexTableProps { interface IndexerIndexTableProps {
@@ -37,6 +38,7 @@ interface IndexerIndexTableProps {
scrollerRef: RefObject<HTMLElement>; scrollerRef: RefObject<HTMLElement>;
isSelectMode: boolean; isSelectMode: boolean;
isSmallScreen: boolean; isSmallScreen: boolean;
onCloneIndexerPress(id: number): void;
} }
const columnsSelector = createSelector( const columnsSelector = createSelector(
@@ -49,7 +51,7 @@ const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
style, style,
data, data,
}) => { }) => {
const { items, sortKey, columns, isSelectMode } = data; const { items, sortKey, columns, isSelectMode, onCloneIndexerPress } = data;
if (index >= items.length) { if (index >= items.length) {
return null; return null;
@@ -71,6 +73,7 @@ const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
sortKey={sortKey} sortKey={sortKey}
columns={columns} columns={columns}
isSelectMode={isSelectMode} isSelectMode={isSelectMode}
onCloneIndexerPress={onCloneIndexerPress}
/> />
</div> </div>
); );
@@ -89,6 +92,7 @@ function IndexerIndexTable(props: IndexerIndexTableProps) {
isSelectMode, isSelectMode,
isSmallScreen, isSmallScreen,
scrollerRef, scrollerRef,
onCloneIndexerPress,
} = props; } = props;
const columns = useSelector(columnsSelector); const columns = useSelector(columnsSelector);
@@ -198,6 +202,7 @@ function IndexerIndexTable(props: IndexerIndexTableProps) {
sortKey, sortKey,
columns, columns,
isSelectMode, isSelectMode,
onCloneIndexerPress,
}} }}
> >
{Row} {Row}

View File

@@ -7,10 +7,11 @@ import styles from './IndexerTitleLink.css';
interface IndexerTitleLinkProps { interface IndexerTitleLinkProps {
indexerName: string; indexerName: string;
indexerId: number; indexerId: number;
onCloneIndexerPress(id: number): void;
} }
function IndexerTitleLink(props: IndexerTitleLinkProps) { function IndexerTitleLink(props: IndexerTitleLinkProps) {
const { indexerName, indexerId } = props; const { indexerName, indexerId, onCloneIndexerPress } = props;
const [isIndexerInfoModalOpen, setIsIndexerInfoModalOpen] = useState(false); const [isIndexerInfoModalOpen, setIsIndexerInfoModalOpen] = useState(false);
@@ -32,6 +33,7 @@ function IndexerTitleLink(props: IndexerTitleLinkProps) {
indexerId={indexerId} indexerId={indexerId}
isOpen={isIndexerInfoModalOpen} isOpen={isIndexerInfoModalOpen}
onModalClose={onIndexerInfoModalClose} onModalClose={onIndexerInfoModalClose}
onCloneIndexerPress={onCloneIndexerPress}
/> />
</div> </div>
); );

View File

@@ -7,16 +7,18 @@ interface IndexerInfoModalProps {
isOpen: boolean; isOpen: boolean;
indexerId: number; indexerId: number;
onModalClose(): void; onModalClose(): void;
onCloneIndexerPress(id: number): void;
} }
function IndexerInfoModal(props: IndexerInfoModalProps) { function IndexerInfoModal(props: IndexerInfoModalProps) {
const { isOpen, onModalClose, indexerId } = props; const { isOpen, indexerId, onModalClose, onCloneIndexerPress } = props;
return ( return (
<Modal size={sizes.MEDIUM} isOpen={isOpen} onModalClose={onModalClose}> <Modal size={sizes.MEDIUM} isOpen={isOpen} onModalClose={onModalClose}>
<IndexerInfoModalContent <IndexerInfoModalContent
indexerId={indexerId} indexerId={indexerId}
onModalClose={onModalClose} onModalClose={onModalClose}
onCloneIndexerPress={onCloneIndexerPress}
/> />
</Modal> </Modal>
); );

View File

@@ -41,12 +41,13 @@ function createIndexerInfoItemSelector(indexerId: number) {
interface IndexerInfoModalContentProps { interface IndexerInfoModalContentProps {
indexerId: number; indexerId: number;
onModalClose(): void; onModalClose(): void;
onCloneIndexerPress(id: number): void;
} }
function IndexerInfoModalContent(props: IndexerInfoModalContentProps) { function IndexerInfoModalContent(props: IndexerInfoModalContentProps) {
const { indexer } = useSelector( const { indexerId, onCloneIndexerPress } = props;
createIndexerInfoItemSelector(props.indexerId)
); const { indexer } = useSelector(createIndexerInfoItemSelector(indexerId));
const { const {
id, id,
@@ -92,6 +93,11 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) {
onModalClose(); onModalClose();
}, [setIsDeleteIndexerModalOpen, onModalClose]); }, [setIsDeleteIndexerModalOpen, onModalClose]);
const onCloneIndexerPressWrapper = useCallback(() => {
onCloneIndexerPress(id);
onModalClose();
}, [id, onCloneIndexerPress, onModalClose]);
return ( return (
<ModalContent onModalClose={onModalClose}> <ModalContent onModalClose={onModalClose}>
<ModalHeader>{`${name}`}</ModalHeader> <ModalHeader>{`${name}`}</ModalHeader>
@@ -304,6 +310,9 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) {
> >
{translate('Delete')} {translate('Delete')}
</Button> </Button>
<Button onPress={onCloneIndexerPressWrapper}>
{translate('Clone')}
</Button>
<Button onPress={onEditIndexerPress}>{translate('Edit')}</Button> <Button onPress={onEditIndexerPress}>{translate('Edit')}</Button>
<Button onPress={onModalClose}>{translate('Close')}</Button> <Button onPress={onModalClose}>{translate('Close')}</Button>
</ModalFooter> </ModalFooter>

View File

@@ -108,6 +108,7 @@
"ClearHistory": "Clear History", "ClearHistory": "Clear History",
"ClearHistoryMessageText": "Are you sure you want to clear all Prowlarr history?", "ClearHistoryMessageText": "Are you sure you want to clear all Prowlarr history?",
"ClientPriority": "Client Priority", "ClientPriority": "Client Priority",
"Clone": "Clone",
"CloneProfile": "Clone Profile", "CloneProfile": "Clone Profile",
"Close": "Close", "Close": "Close",
"CloseCurrentModal": "Close Current Modal", "CloseCurrentModal": "Close Current Modal",