mirror of
https://github.com/idanoo/autobrr
synced 2025-07-24 17:29:12 +00:00
feat(feeds): add force run (#1243)
* feat(feeds): add force run * fix: simplify ForceRun * add confirmation modal * handle errors by using the test func * require user input to run * make sure to reschedule next job after forcerun * refactor modal centering with grid * refactor: Simplify startJob and forceRun logic - Refactor `startJob` to accept a `runImmediately` flag. This flag controls whether the job should be run immediately or scheduled for later. This change simplifies the `ForceRun` function by allowing it to call `startJob` with `runImmediately` set to `true`. - Remove redundant checks in `ForceRun` related to feed type. These checks are handled in `startJob`. BREAKING CHANGE: The `startJob` function now requires a second argument, `runImmediately`. This change affects all calls to `startJob`. * fix(web) Invalidate queries after forceRun * refactor(feeds): init and test run --------- Co-authored-by: ze0s <43699394+zze0s@users.noreply.github.com>
This commit is contained in:
soup
GitHub
parent
ff70a341ad
commit
2bd1a68a94
10 changed files with 318 additions and 38 deletions
|
|
@ -3,7 +3,8 @@
|
|||
* SPDX-License-Identifier: GPL-2.0-or-later
|
||||
*/
|
||||
|
||||
import { FC, Fragment, MutableRefObject } from "react";
|
||||
|
||||
import { FC, Fragment, MutableRefObject, useState } from "react";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
|
||||
|
||||
|
|
@ -18,13 +19,24 @@ interface ModalLowerProps {
|
|||
isOpen: boolean;
|
||||
isLoading: boolean;
|
||||
toggle: () => void;
|
||||
deleteAction: () => void;
|
||||
deleteAction?: () => void;
|
||||
forceRunAction?: () => void;
|
||||
}
|
||||
|
||||
interface DeleteModalProps extends ModalUpperProps, ModalLowerProps {
|
||||
buttonRef: MutableRefObject<HTMLElement | null> | undefined;
|
||||
}
|
||||
|
||||
interface ForceRunModalProps {
|
||||
isOpen: boolean;
|
||||
isLoading: boolean;
|
||||
toggle: () => void;
|
||||
buttonRef: MutableRefObject<HTMLElement | null> | undefined;
|
||||
forceRunAction: () => void;
|
||||
title: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
const ModalUpper = ({ title, text }: ModalUpperProps) => (
|
||||
<div className="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div className="sm:flex sm:items-start">
|
||||
|
|
@ -55,7 +67,7 @@ const ModalLower = ({ isOpen, isLoading, toggle, deleteAction }: ModalLowerProps
|
|||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
if (isOpen) {
|
||||
deleteAction();
|
||||
deleteAction?.();
|
||||
toggle();
|
||||
}
|
||||
}}
|
||||
|
|
@ -121,3 +133,116 @@ export const DeleteModal: FC<DeleteModalProps> = (props: DeleteModalProps) => (
|
|||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
|
||||
export const ForceRunModal: FC<ForceRunModalProps> = (props: ForceRunModalProps) => {
|
||||
const [inputValue, setInputValue] = useState("");
|
||||
const isInputCorrect = inputValue.trim().toLowerCase() === "i understand";
|
||||
|
||||
// A function to reset the input and handle any necessary cleanup
|
||||
const resetAndClose = () => {
|
||||
setInputValue("");
|
||||
props.toggle();
|
||||
};
|
||||
|
||||
// The handleClose function will be passed to the onClose prop of the Dialog
|
||||
const handleClose = () => {
|
||||
setTimeout(() => {
|
||||
resetAndClose();
|
||||
}, 200);
|
||||
};
|
||||
|
||||
const handleForceRun = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
if (props.isOpen && isInputCorrect) {
|
||||
props.forceRunAction();
|
||||
props.toggle();
|
||||
// Delay the reset of the input until after the transition finishes
|
||||
setTimeout(() => {
|
||||
setInputValue("");
|
||||
}, 400);
|
||||
}
|
||||
};
|
||||
|
||||
// When the 'Cancel' button is clicked
|
||||
const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
resetAndClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Transition.Root show={props.isOpen} as={Fragment}>
|
||||
<Dialog
|
||||
as="div"
|
||||
static
|
||||
className="fixed z-10 inset-0 overflow-y-auto"
|
||||
initialFocus={props.buttonRef}
|
||||
open={props.isOpen}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<div className="grid place-items-center min-h-screen">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-gray-700/60 dark:bg-black/60 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<div className="inline-block align-bottom border border-transparent dark:border-gray-700 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
|
||||
<ModalUpper title={props.title} text={props.text} />
|
||||
|
||||
<div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 sm:px-6 flex justify-center">
|
||||
<input
|
||||
type="text"
|
||||
className="w-96 shadow-sm sm:text-sm rounded-md border py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-400 dark:border-gray-700 bg-gray-100 dark:bg-gray-900 dark:text-gray-100"
|
||||
placeholder="Type 'I understand' to enable the button"
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
|
||||
{props.isLoading ? (
|
||||
<SectionLoader $size="small" />
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
disabled={!isInputCorrect}
|
||||
className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 ${
|
||||
isInputCorrect ? "bg-red-600 text-white hover:bg-red-700" : "bg-gray-300"
|
||||
} text-base font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm`}
|
||||
onClick={handleForceRun}
|
||||
>
|
||||
Force Run
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
onClick={handleCancel}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue