idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 16:59:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(web): cant update from settings panels (#1105)

Browse source 
* fix(web): propagation bug with IRC network table dropdown

* fix submit button not working
This commit is contained in:
stacksmash76 2023-09-11 13:31:07 +02:00 • committed by GitHub
parent 996519cbae
commit 3c030dc0ce
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 46 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

54
web/src/components/panels/index.tsx
View file

@ -7,7 +7,7 @@ import { Fragment, useRef, ReactNode, ReactElement } from "react";
import { XMarkIcon } from "@heroicons/react/24/solid"; import { XMarkIcon } from "@heroicons/react/24/solid";
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
import { Form, Formik } from "formik"; import { Form, Formik } from "formik";
import type { FormikValues } from "formik"; import type { FormikValues, FormikProps } from "formik";
import DEBUG from "@components/debug"; import DEBUG from "@components/debug";
import { useToggle } from "@hooks/hooks"; import { useToggle } from "@hooks/hooks";
@ -16,7 +16,7 @@ import { classNames } from "@utils";
interface SlideOverProps<DataType> { interface SlideOverProps<DataType> {
title: string; title: string;
initialValues: FormikValues & DataType; initialValues: DataType;
validate?: (values: DataType) => void; validate?: (values: DataType) => void;
onSubmit: (values?: DataType) => void; onSubmit: (values?: DataType) => void;
isOpen: boolean; isOpen: boolean;
@ -31,7 +31,7 @@ interface SlideOverProps<DataType> {
extraButtons?: (values: DataType) => ReactNode; extraButtons?: (values: DataType) => ReactNode;
} }
function SlideOver<DataType>({ function SlideOver<DataType extends FormikValues>({
title, title,
initialValues, initialValues,
validate, validate,
@ -48,13 +48,9 @@ function SlideOver<DataType>({
extraButtons extraButtons
}: SlideOverProps<DataType>): ReactElement { }: SlideOverProps<DataType>): ReactElement {
const cancelModalButtonRef = useRef<HTMLInputElement | null>(null); const cancelModalButtonRef = useRef<HTMLInputElement | null>(null);
const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false); const formRef = useRef<FormikProps<DataType>>(null);
const test = (values: unknown) => { const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
if (testFn) {
testFn(values);
}
};
return ( return (
<Transition.Root show={isOpen} as={Fragment}> <Transition.Root show={isOpen} as={Fragment}>
@ -71,13 +67,16 @@ function SlideOver<DataType>({
/> />
)} )}
<div className="absolute inset-0 overflow-hidden" onClick={(e) => { <div className="absolute inset-0 overflow-hidden">
e.preventDefault();
e.stopPropagation();
}}>
<Dialog.Overlay className="absolute inset-0" /> <Dialog.Overlay className="absolute inset-0" />
<div className="fixed inset-y-0 right-0 max-w-full flex"> <div
className="fixed inset-y-0 right-0 max-w-full flex"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
}}
>
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700" enter="transform transition ease-in-out duration-500 sm:duration-700"
@ -93,10 +92,16 @@ function SlideOver<DataType>({
initialValues={initialValues} initialValues={initialValues}
onSubmit={onSubmit} onSubmit={onSubmit}
validate={validate} validate={validate}
innerRef={formRef}
> >
{({ handleSubmit, values }) => ( {({ handleSubmit, values }) => (
<Form className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll" <Form
onSubmit={handleSubmit}> className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll"
onSubmit={(e) => {
e.preventDefault();
handleSubmit(e);
}}
>
<div className="flex-1"> <div className="flex-1">
<div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6"> <div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6">
@ -154,7 +159,10 @@ function SlideOver<DataType>({
"mr-2 inline-flex items-center px-4 py-2 border font-medium rounded-md shadow-sm text-sm transition ease-in-out duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500" "mr-2 inline-flex items-center px-4 py-2 border font-medium rounded-md shadow-sm text-sm transition ease-in-out duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
)} )}
disabled={isTesting} disabled={isTesting}
onClick={() => test(values)} onClick={(e) => {
e.preventDefault();
testFn(values);
}}
> >
{isTesting ? ( {isTesting ? (
<svg <svg
@ -190,13 +198,20 @@ function SlideOver<DataType>({
<button <button
type="button" type="button"
className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm 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" className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm 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"
onClick={toggle} onClick={(e) => {
e.preventDefault();
toggle();
}}
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="button"
className="ml-4 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" className="ml-4 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
onClick={(e) => {
e.preventDefault();
formRef.current?.submitForm();
}}
> >
{type === "CREATE" ? "Create" : "Save"} {type === "CREATE" ? "Create" : "Save"}
</button> </button>
@ -208,7 +223,6 @@ function SlideOver<DataType>({
</Form> </Form>
)} )}
</Formik> </Formik>
</div> </div>
</Transition.Child> </Transition.Child>

14
web/src/screens/settings/Irc.tsx
View file

@ -248,7 +248,13 @@ const ListItem = ({ network, expanded }: ListItemProps) => {
"grid grid-cols-12 gap-2 lg:gap-4 items-center py-2 cursor-pointer", "grid grid-cols-12 gap-2 lg:gap-4 items-center py-2 cursor-pointer",
network.enabled && !network.healthy ? "bg-red-50 dark:bg-red-900 hover:bg-red-100 dark:hover:bg-red-800" : "hover:bg-gray-50 dark:hover:bg-gray-700" network.enabled && !network.healthy ? "bg-red-50 dark:bg-red-900 hover:bg-red-100 dark:hover:bg-red-800" : "hover:bg-gray-50 dark:hover:bg-gray-700"
)} )}
onClick={toggleEdit} onClick={(e) => {
if (e.defaultPrevented)
return;
e.preventDefault();
toggleEdit();
}}
> >
<IrcNetworkUpdateForm <IrcNetworkUpdateForm
isOpen={updateIsOpen} isOpen={updateIsOpen}
@ -474,7 +480,11 @@ const ListItemDropdown = ({
return ( return (
<Menu <Menu
as="div" as="div"
onClick={(e: MouseEvent) => e.stopPropagation()} onClick={(e: MouseEvent) => {
e.preventDefault();
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
}}
> >
<DeleteModal <DeleteModal
isOpen={deleteModalIsOpen} isOpen={deleteModalIsOpen}