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

Refactor(web): Replace final-form with Formik and cleanup (#46)

Browse source 
* refactor: begin to replace final-form

* refactor: replace final-form with formik n cleanup
This commit is contained in:
Ludvig Lundgren 2021-12-23 22:01:59 +01:00 • committed by GitHub
parent c4d580eb03
commit 5e29564f03
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
66 changed files with 1523 additions and 3409 deletions
Download patch file Download diff file Expand all files Collapse all files

6
web/package.json
View file

@ -2,7 +2,7 @@
"name": "web",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8989",
"proxy": "http://127.0.0.1:8989",
"homepage": ".",
"dependencies": {
"@craco/craco": "^6.1.2",
@ -16,14 +16,10 @@
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"date-fns": "^2.25.0",
"final-form": "^4.20.2",
"final-form-arrays": "^3.0.2",
"formik": "^2.2.9",
"react": "^17.0.2",
"react-cookie": "^4.1.1",
"react-dom": "^17.0.2",
"react-final-form": "^6.5.3",
"react-final-form-arrays": "^3.1.3",
"react-hot-toast": "^2.1.1",
"react-multi-select-component": "^4.0.2",
"react-query": "^3.18.1",

2
web/src/App.tsx
View file

@ -5,7 +5,7 @@ import Logout from "./screens/auth/logout";
import Base from "./screens/Base";
import { ReactQueryDevtools } from "react-query/devtools";
import Layout from "./components/Layout";
import { baseUrl } from "./utils/utils";
import { baseUrl } from "./utils";
function Protected() {
return (

2
web/src/api/APIClient.ts
View file

@ -1,5 +1,5 @@
import {Action, DownloadClient, Filter, Indexer, Network} from "../domain/interfaces";
import {baseUrl, sseBaseUrl} from "../utils/utils";
import {baseUrl, sseBaseUrl} from "../utils";
function baseClient(endpoint: string, method: string, { body, ...customConfig}: any = {}) {
let baseURL = baseUrl()

22
web/src/components/EmptyListState.tsx
View file

@ -1,22 +0,0 @@
interface props {
text: string;
buttonText?: string;
buttonOnClick?: any;
}
export function EmptyListState({ text, buttonText, buttonOnClick }: props) {
return (
<div className="px-4 py-12 flex flex-col items-center">
<p className="text-center text-gray-500 dark:text-white">{text}</p>
{buttonText && buttonOnClick && (
<button
type="button"
className="relative inline-flex items-center px-4 py-2 mt-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
onClick={buttonOnClick}
>
{buttonText}
</button>
)}
</div>
)
}

495
web/src/components/FilterActionList.tsx
View file

@ -1,495 +0,0 @@
import { Action, DownloadClient } from "../domain/interfaces";
import { Fragment, useEffect, useRef } from "react";
import { Dialog, Listbox, Switch, Transition } from "@headlessui/react";
import { classNames } from "../styles/utils";
import {
CheckIcon,
ChevronRightIcon,
SelectorIcon,
} from "@heroicons/react/solid";
import { useToggle } from "../hooks/hooks";
import { useMutation } from "react-query";
import { Field, Form } from "react-final-form";
import { SwitchGroup, TextField } from "./inputs";
import { NumberField, SelectField } from "./inputs/compact";
import DEBUG from "./debug";
import APIClient from "../api/APIClient";
import { queryClient } from "../App";
import { ActionTypeNameMap, ActionTypeOptions } from "../domain/constants";
import { AlertWarning } from "./alerts";
import { DeleteModal } from "./modals";
interface DownloadClientSelectProps {
name: string;
action: Action;
clients: DownloadClient[];
}
function DownloadClientSelect({
name,
action,
clients,
}: DownloadClientSelectProps) {
return (
<div className="col-span-6 sm:col-span-6">
<Field
name={name}
type="select"
render={({ input }) => (
<Listbox value={input.value} onChange={input.onChange}>
{({ open }) => (
<>
<Listbox.Label className="block text-xs font-bold text-gray-700 uppercase tracking-wide">
Client
</Listbox.Label>
<div className="mt-2 relative">
<Listbox.Button className="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<span className="block truncate">
{input.value
? clients.find((c) => c.id === input.value)!.name
: "Choose a client"}
</span>
{/*<span className="block truncate">Choose a client</span>*/}
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</span>
</Listbox.Button>
<Transition
show={open}
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options
static
className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
>
{clients
.filter((c) => c.type === action.type)
.map((client: any) => (
<Listbox.Option
key={client.id}
className={({ active }) =>
classNames(
active
? "text-white bg-indigo-600"
: "text-gray-900",
"cursor-default select-none relative py-2 pl-3 pr-9"
)
}
value={client.id}
>
{({ selected, active }) => (
<>
<span
className={classNames(
selected ? "font-semibold" : "font-normal",
"block truncate"
)}
>
{client.name}
</span>
{selected ? (
<span
className={classNames(
active ? "text-white" : "text-indigo-600",
"absolute inset-y-0 right-0 flex items-center pr-4"
)}
>
<CheckIcon
className="h-5 w-5"
aria-hidden="true"
/>
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
)}
/>
</div>
);
}
interface FilterListProps {
actions: Action[];
clients: DownloadClient[];
filterID: number;
}
export function FilterActionList({
actions,
clients,
filterID,
}: FilterListProps) {
useEffect(() => {
// console.log("render list")
}, []);
return (
<div className="bg-white shadow overflow-hidden sm:rounded-md">
<ul className="divide-y divide-gray-200">
{actions.map((action, idx) => (
<ListItem
action={action}
clients={clients}
filterID={filterID}
key={action.id}
idx={idx}
/>
))}
</ul>
</div>
);
}
interface ListItemProps {
action: Action;
clients: DownloadClient[];
filterID: number;
idx: number;
}
function ListItem({ action, clients, filterID, idx }: ListItemProps) {
const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
const [edit, toggleEdit] = useToggle(false);
const deleteMutation = useMutation(
(actionID: number) => APIClient.actions.delete(actionID),
{
onSuccess: () => {
queryClient.invalidateQueries(["filter", filterID]);
toggleDeleteModal();
},
}
);
const enabledMutation = useMutation(
(actionID: number) => APIClient.actions.toggleEnable(actionID),
{
onSuccess: () => {
queryClient.invalidateQueries(["filter", filterID]);
},
}
);
const updateMutation = useMutation(
(action: Action) => APIClient.actions.update(action),
{
onSuccess: () => {
queryClient.invalidateQueries(["filter", filterID]);
},
}
);
const toggleActive = () => {
enabledMutation.mutate(action.id);
};
useEffect(() => { }, [action]);
const cancelButtonRef = useRef(null);
const deleteAction = () => {
deleteMutation.mutate(action.id);
};
const onSubmit = (action: Action) => {
// TODO clear data depending on type
updateMutation.mutate(action);
};
const TypeForm = (action: Action) => {
switch (action.type) {
case "TEST":
return (
<AlertWarning
title="Notice"
text="The test action does nothing except to show if the filter works."
/>
);
case "EXEC":
return (
<div>
<div className="mt-6 grid grid-cols-12 gap-6">
<TextField
name="exec_cmd"
label="Command"
columns={6}
placeholder="Path to program eg. /bin/test"
/>
<TextField
name="exec_args"
label="Arguments"
columns={6}
placeholder="Arguments eg. --test"
/>
</div>
</div>
);
case "WATCH_FOLDER":
return (
<div className="mt-6 grid grid-cols-12 gap-6">
<TextField
name="watch_folder"
label="Watch folder"
columns={6}
placeholder="Watch directory eg. /home/user/rwatch"
/>
</div>
);
case "QBITTORRENT":
return (
<div className="w-full">
<div className="mt-6 grid grid-cols-12 gap-6">
<DownloadClientSelect
name="client_id"
action={action}
clients={clients}
/>
<div className="col-span-6 sm:col-span-6">
<TextField name="save_path" label="Save path" columns={6} />
</div>
</div>
<div className="mt-6 grid grid-cols-12 gap-6">
<TextField name="category" label="Category" columns={6} />
<TextField name="tags" label="Tags" columns={6} />
</div>
<div className="mt-6 grid grid-cols-12 gap-6">
<NumberField
name="limit_download_speed"
label="Limit download speed (KB/s)"
/>
<NumberField
name="limit_upload_speed"
label="Limit upload speed (KB/s)"
/>
</div>
<div className="mt-6 grid grid-cols-12 gap-6">
<div className="col-span-6">
<SwitchGroup name="paused" label="Add paused" />
</div>
</div>
</div>
);
case "DELUGE_V1":
case "DELUGE_V2":
return (
<div>
<div className="mt-6 grid grid-cols-12 gap-6">
<DownloadClientSelect
name="client_id"
action={action}
clients={clients}
/>
<div className="col-span-12 sm:col-span-6">
<TextField name="save_path" label="Save path" columns={6} />
</div>
</div>
<div className="mt-6 col-span-12 sm:col-span-6">
<TextField name="label" label="Label" columns={6} />
</div>
<div className="mt-6 grid grid-cols-12 gap-6">
<NumberField
name="limit_download_speed"
label="Limit download speed (KB/s)"
/>
<NumberField
name="limit_upload_speed"
label="Limit upload speed (KB/s)"
/>
</div>
<div className="mt-6 grid grid-cols-12 gap-6">
<div className="col-span-6">
<SwitchGroup name="paused" label="Add paused" />
</div>
</div>
</div>
);
case "RADARR":
case "SONARR":
case "LIDARR":
return (
<div className="mt-6 grid grid-cols-12 gap-6">
<DownloadClientSelect
name="client_id"
action={action}
clients={clients}
/>
</div>
);
default:
return null;
}
};
return (
<li key={action.id}>
<div
className={classNames(
idx % 2 === 0 ? "bg-white" : "bg-gray-50",
"flex items-center sm:px-6 hover:bg-gray-50"
)}
>
<Switch
checked={action.enabled}
onChange={toggleActive}
className={classNames(
action.enabled ? "bg-teal-500" : "bg-gray-200",
"z-10 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
)}
>
<span className="sr-only">Use setting</span>
<span
aria-hidden="true"
className={classNames(
action.enabled ? "translate-x-5" : "translate-x-0",
"inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
)}
/>
</Switch>
<button className="px-4 py-4 w-full flex block" onClick={toggleEdit}>
<div className="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
<div className="truncate">
<div className="flex text-sm">
<p className="ml-4 font-medium text-indigo-600 truncate">
{action.name}
</p>
</div>
</div>
<div className="mt-4 flex-shrink-0 sm:mt-0 sm:ml-5">
<div className="flex overflow-hidden -space-x-1">
<span className="text-sm font-normal text-gray-500">
{ActionTypeNameMap[action.type]}
</span>
</div>
</div>
</div>
<div className="ml-5 flex-shrink-0">
<ChevronRightIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</div>
</button>
</div>
{edit && (
<div className="px-4 py-4 flex items-center sm:px-6">
<Transition.Root show={deleteModalIsOpen} as={Fragment}>
<Dialog
as="div"
static
className="fixed inset-0 overflow-y-auto"
initialFocus={cancelButtonRef}
open={deleteModalIsOpen}
onClose={toggleDeleteModal}
>
<DeleteModal
isOpen={deleteModalIsOpen}
buttonRef={cancelButtonRef}
toggle={toggleDeleteModal}
deleteAction={deleteAction}
title="Remove filter action"
text="Are you sure you want to remove this action? This action cannot be undone."
/>
</Dialog>
</Transition.Root>
<Form
initialValues={{
id: action.id,
name: action.name,
enabled: action.enabled,
type: action.type,
watch_folder: action.watch_folder,
exec_cmd: action.exec_cmd,
exec_args: action.exec_args,
category: action.category,
tags: action.tags,
label: action.label,
save_path: action.save_path,
paused: action.paused,
ignore_rules: action.ignore_rules,
limit_upload_speed: action.limit_upload_speed || 0,
limit_download_speed: action.limit_download_speed || 0,
filter_id: action.filter_id,
client_id: action.client_id,
}}
onSubmit={onSubmit}
>
{({ handleSubmit, values }) => {
return (
<form onSubmit={handleSubmit} className="w-full">
<div className="mt-6 grid grid-cols-12 gap-6">
<SelectField
name="type"
label="Type"
optionDefaultText="Select yype"
options={ActionTypeOptions}
/>
<TextField name="name" label="Name" columns={6} />
</div>
{TypeForm(values)}
<div className="pt-6 divide-y divide-gray-200">
<div className="mt-4 pt-4 flex justify-between">
<button
type="button"
className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
onClick={toggleDeleteModal}
>
Remove
</button>
<div>
<button
type="button"
className="bg-white border border-gray-300 rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
Cancel
</button>
<button
type="submit"
className="ml-4 relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Save
</button>
</div>
</div>
</div>
<DEBUG values={values} />
</form>
);
}}
</Form>
</div>
)}
</li>
);
}

1
web/src/components/alerts/index.ts
View file

@ -1 +0,0 @@
export { default as AlertWarning } from "./warning";

6
web/src/components/alerts/warning.tsx → web/src/components/alerts/index.tsx
View file

@ -1,12 +1,12 @@
import { ExclamationIcon } from "@heroicons/react/solid";
import React from "react";
interface props {
title: string;
text: string;
}
function AlertWarning({ title, text }: props) {
export function AlertWarning({ title, text }: props) {
return (
<div className="p-4">
<div className="rounded-md bg-yellow-50 p-4">
@ -28,5 +28,3 @@ function AlertWarning({ title, text }: props) {
</div>
);
}
export default AlertWarning;

8
web/src/components/debug.tsx
View file

@ -1,4 +1,10 @@
const DEBUG = ({ values }: any) => {
import { FC } from "react"
interface DebugProps {
values: unknown;
}
const DEBUG: FC<DebugProps> = ({ values }) => {
if (process.env.NODE_ENV !== "development") {
return null;
}

27
web/src/components/empty/EmptySimple.tsx
View file

@ -1,27 +0,0 @@
import { PlusIcon } from "@heroicons/react/solid";
interface props {
title: string;
subtitle: string;
buttonText: string;
buttonAction: any;
}
const EmptySimple = ({ title, subtitle, buttonText, buttonAction }: props) => (
<div className="text-center py-8">
<h3 className="mt-2 text-sm font-medium text-gray-900 dark:text-white">{title}</h3>
<p className="mt-1 text-sm text-gray-500 dark:text-gray-200">{subtitle}</p>
<div className="mt-6">
<button
type="button"
onClick={buttonAction}
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
>
<PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
{buttonText}
</button>
</div>
</div>
)
export default EmptySimple;

48
web/src/components/emptystates/index.tsx Normal file
View file

@ -0,0 +1,48 @@
import { PlusIcon } from "@heroicons/react/solid";
interface EmptySimpleProps {
title: string;
subtitle: string;
buttonText: string;
buttonAction: any;
}
export const EmptySimple = ({ title, subtitle, buttonText, buttonAction }: EmptySimpleProps) => (
<div className="text-center py-8">
<h3 className="mt-2 text-sm font-medium text-gray-900 dark:text-white">{title}</h3>
<p className="mt-1 text-sm text-gray-500 dark:text-gray-200">{subtitle}</p>
<div className="mt-6">
<button
type="button"
onClick={buttonAction}
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
>
<PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
{buttonText}
</button>
</div>
</div>
)
interface EmptyListStateProps {
text: string;
buttonText?: string;
buttonOnClick?: any;
}
export function EmptyListState({ text, buttonText, buttonOnClick }: EmptyListStateProps) {
return (
<div className="px-4 py-12 flex flex-col items-center">
<p className="text-center text-gray-500 dark:text-white">{text}</p>
{buttonText && buttonOnClick && (
<button
type="button"
className="relative inline-flex items-center px-4 py-2 mt-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
onClick={buttonOnClick}
>
{buttonText}
</button>
)}
</div>
)
}

8
web/src/components/headings/TitleSubtitle.tsx → web/src/components/headings/index.tsx
View file

@ -1,15 +1,13 @@
import React from "react";
import { FC } from "react";
interface Props {
title: string;
subtitle: string;
}
const TitleSubtitle: React.FC<Props> = ({ title, subtitle }) => (
export const TitleSubtitle: FC<Props> = ({ title, subtitle }) => (
<div>
<h2 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">{title}</h2>
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{subtitle}</p>
</div>
)
export default TitleSubtitle;
)

20
web/src/components/inputs/Error.tsx
View file

@ -1,20 +0,0 @@
import React from "react";
import { Field } from "react-final-form";
interface Props {
name: string;
classNames?: string;
subscribe?: any;
}
const Error: React.FC<Props> = ({ name, classNames }) => (
<Field
name={name}
subscribe={{ touched: true, error: true }}
render={({ meta: { touched, error } }) =>
touched && error ? <span className={classNames}>{error}</span> : null
}
/>
);
export default Error;

50
web/src/components/inputs/MultiSelectField.tsx
View file

@ -1,50 +0,0 @@
import React from "react";
import {Field} from "react-final-form";
import { MultiSelect } from "react-multi-select-component";
import {classNames, COL_WIDTHS} from "../../styles/utils";
interface Props {
label?: string;
options?: [] | any;
name: string;
className?: string;
columns?: COL_WIDTHS;
}
const MultiSelectField: React.FC<Props> = ({
name,
label,
options,
className,
columns
}) => (
<div
className={classNames(
columns ? `col-span-${columns}` : "col-span-12"
)}
>
<label
className="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase"
htmlFor={label}
>
{label}
</label>
<Field
name={name}
parse={val => val && val.map((item: any) => item.value)}
format={val =>
val &&
val.map((item: any) => options.find((o: any) => o.value === item))
}
render={({input, meta}) => (
<MultiSelect
{...input}
options={options}
labelledBy={name}
/>
)}
/>
</div>
);
export default MultiSelectField;

47
web/src/components/inputs/PasswordField.tsx
View file

@ -1,47 +0,0 @@
import { Field } from "react-final-form";
import React from "react";
import Error from "./Error";
import { classNames } from "../../styles/utils";
type COL_WIDTHS = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
interface Props {
name: string;
label?: string;
placeholder?: string;
columns?: COL_WIDTHS;
className?: string;
autoComplete?: string;
}
const PasswordField: React.FC<Props> = ({ name, label, placeholder, columns, className, autoComplete }) => (
<div
className={classNames(
columns ? `col-span-${columns}` : "col-span-12"
)}
>
{label && (
<label htmlFor={name} className="block text-xs font-bold text-gray-700 dark:text-white uppercase tracking-wide">
{label}
</label>
)}
<Field
name={name}
render={({ input }) => (
<input
{...input}
id={name}
type="password"
autoComplete={autoComplete}
className="mt-2 block w-full border border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-white rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
placeholder={placeholder}
/>
)}
/>
<div>
<Error name={name} classNames="text-red mt-2" />
</div>
</div>
)
export default PasswordField;

60
web/src/components/inputs/RadioFieldset.tsx
View file

@ -1,60 +0,0 @@
import React from "react";
import {Field} from "react-final-form";
export interface radioFieldsetOption {
label: string;
description: string;
value: string;
}
interface props {
name: string;
legend: string;
options: radioFieldsetOption[];
}
const RadioFieldset: React.FC<props> = ({ name, legend,options }) => (
<fieldset>
<div className="space-y-2 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:px-6 sm:py-5">
<div>
<legend className="text-sm font-medium text-gray-900">{legend}</legend>
</div>
<div className="space-y-5 sm:col-span-2">
<div className="space-y-5 sm:mt-0">
{options.map((opt, idx) => (
<div className="relative flex items-start" key={idx}>
<div className="absolute flex items-center h-5">
<Field
name={name}
type="radio"
render={({input}) => (
<input
{...input}
id={name}
value={opt.value}
// type="radio"
checked={input.checked}
className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
/>
)}
/>
</div>
<div className="pl-7 text-sm">
<label htmlFor={opt.value} className="font-medium text-gray-900">
{opt.label}
</label>
<p id={opt.value+"_description"} className="text-gray-500">
{opt.description}
</p>
</div>
</div>
))}
</div>
</div>
</div>
</fieldset>
)
export default RadioFieldset;

57
web/src/components/inputs/SwitchGroup.tsx
View file

@ -1,57 +0,0 @@
import React from "react";
import { Switch } from "@headlessui/react";
import { Field } from "react-final-form";
import { classNames } from "../../styles/utils";
interface Props {
name: string;
label: string;
description?: string;
defaultValue?: boolean;
className?: string;
}
const SwitchGroup: React.FC<Props> = ({ name, label, description, defaultValue }) => (
<ul className="mt-2 divide-y divide-gray-200 dark:divide-gray-700">
<Switch.Group as="li" className="py-4 flex items-center justify-between">
<div className="flex flex-col">
<Switch.Label as="p" className="text-sm font-medium text-gray-900 dark:text-white"
passive>
{label}
</Switch.Label>
{description && (
<Switch.Description className="text-sm text-gray-500 dark:text-gray-700">
{description}
</Switch.Description>
)}
</div>
<Field
name={name}
defaultValue={defaultValue as any}
render={({ input: { onChange, checked, value } }) => (
<Switch
value={value}
checked={value}
onChange={onChange}
className={classNames(
value ? 'bg-teal-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-gray-500',
'ml-4 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
)}
>
<span className="sr-only">Use setting</span>
<span
aria-hidden="true"
className={classNames(
value ? 'translate-x-5' : 'translate-x-0',
'inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
)}
/>
</Switch>
)}
/>
</Switch.Group>
</ul>
)
export default SwitchGroup;

40
web/src/components/inputs/TextAreaWide.tsx
View file

@ -1,40 +0,0 @@
import {Field} from "react-final-form";
import React from "react";
import Error from "./Error";
import {classNames} from "../../styles/utils";
interface Props {
name: string;
label?: string;
placeholder?: string;
className?: string;
required?: boolean;
}
const TextAreaWide: React.FC<Props> = ({name, label, placeholder, required, className}) => (
<div
className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<div>
<label htmlFor={name} className="block text-sm font-medium text-gray-900 sm:mt-px sm:pt-2">
{label} {required && <span className="text-gray-500">*</span>}
</label>
</div>
<div className="sm:col-span-2">
<Field
name={name}
render={({input, meta}) => (
<textarea
{...input}
id={name}
className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-indigo-500 focus:border-indigo-500 border-gray-300", "block w-full shadow-sm sm:text-sm rounded-md")}
placeholder={placeholder}
/>
)}
/>
<Error name={name} classNames="block text-red-500 mt-2"/>
</div>
</div>
)
export default TextAreaWide;

48
web/src/components/inputs/TextField.tsx
View file

@ -1,48 +0,0 @@
import React from "react";
import { Field } from "react-final-form";
import Error from "./Error";
import { classNames } from "../../styles/utils";
type COL_WIDTHS = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
interface Props {
name: string;
label?: string;
placeholder?: string;
columns?: COL_WIDTHS;
className?: string;
autoComplete?: string;
}
const TextField: React.FC<Props> = ({ name, label, placeholder, columns, className, autoComplete }) => (
<div
className={classNames(
columns ? `col-span-${columns}` : "col-span-12"
)}
>
{label && (
<label htmlFor={name} className="block text-xs font-bold text-gray-700 dark:text-white uppercase tracking-wide">
{label}
</label>
)}
<Field
name={name}
render={({ input }) => (
<input
{...input}
id={name}
type="text"
value={input.value}
autoComplete={autoComplete}
className="mt-2 block w-full border border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-white rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
placeholder={placeholder}
/>
)}
/>
<div>
<Error name={name} classNames="text-red mt-2" />
</div>
</div>
)
export default TextField;

49
web/src/components/inputs/TextFieldWide.tsx
View file

@ -1,49 +0,0 @@
import React from "react";
import { Field } from "react-final-form";
import Error from "./Error";
import { classNames } from "../../styles/utils";
interface Props {
name: string;
label?: string;
help?: string;
placeholder?: string;
defaultValue?: string;
className?: string;
required?: boolean;
hidden?: boolean;
}
const TextFieldWide: React.FC<Props> = ({ name, label, help, placeholder, defaultValue, required, hidden, className }) => (
<div hidden={hidden}
className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<div>
<label htmlFor={name} className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2">
{label} {required && <span className="text-gray-500">*</span>}
</label>
</div>
<div className="sm:col-span-2">
<Field
name={name}
defaultValue={defaultValue}
render={({ input, meta }) => (
<input
{...input}
id={name}
type="text"
className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700", "block w-full shadow-sm dark:bg-gray-800 sm:text-sm dark:text-white rounded-md")}
placeholder={placeholder}
hidden={hidden}
/>
)}
/>
{help && (
<p className="mt-2 text-sm text-gray-500" id="email-description">{help}</p>
)}
<Error name={name} classNames="block text-red-500 mt-2" />
</div>
</div>
)
export default TextFieldWide;

17
web/src/components/inputs/common.tsx Normal file
View file

@ -0,0 +1,17 @@
import React from "react";
import { Field } from "formik";
interface ErrorFieldProps {
name: string;
classNames?: string;
subscribe?: any;
}
const ErrorField: React.FC<ErrorFieldProps> = ({ name, classNames }) => (
<Field name={name} subscribe={{ touched: true, error: true }}>
{({ meta: { touched, error } }: any) =>
touched && error ? <span className={classNames}>{error}</span> : null
}
</Field>
);
export { ErrorField }

47
web/src/components/inputs/compact/NumberField.tsx
View file

@ -1,47 +0,0 @@
import { Field } from "react-final-form";
import React from "react";
import Error from "../Error";
import { classNames } from "../../../styles/utils";
interface Props {
name: string;
label?: string;
placeholder?: string;
className?: string;
required?: boolean;
}
const NumberField: React.FC<Props> = ({
name,
label,
placeholder,
required,
className,
}) => (
<div className="col-span-12 sm:col-span-6">
<label htmlFor={name} className="block text-sm font-medium text-gray-700">
{label}
</label>
<Field name={name} parse={(v) => v & parseInt(v, 10)}>
{({ input, meta }) => (
<div className="sm:col-span-2">
<input
type="number"
{...input}
className={classNames(
meta.touched && meta.error
? "focus:ring-red-500 focus:border-red-500 border-red-500"
: "focus:ring-indigo-500 focus:border-indigo-500 border-gray-300",
"block w-full shadow-sm sm:text-sm rounded-md"
)}
placeholder={placeholder}
/>
<Error name={name} classNames="block text-red-500 mt-2" />
</div>
)}
</Field>
</div>
);
export default NumberField;

111
web/src/components/inputs/compact/SelectField.tsx
View file

@ -1,111 +0,0 @@
import { Field } from "react-final-form";
import { Listbox, Transition } from "@headlessui/react";
import { CheckIcon, SelectorIcon } from "@heroicons/react/solid";
import { Fragment } from "react";
import { classNames } from "../../../styles/utils";
interface SelectOption {
label: string;
value: string;
}
interface props {
name: string;
label: string;
optionDefaultText: string;
options: SelectOption[];
}
function SelectField({ name, label, optionDefaultText, options }: props) {
return (
<div className="col-span-6">
<Field
name={name}
type="select"
render={({ input }) => (
<Listbox value={input.value} onChange={input.onChange}>
{({ open }) => (
<>
<Listbox.Label className="block text-xs font-bold text-gray-700 uppercase tracking-wide">
{label}
</Listbox.Label>
<div className="mt-2 relative">
<Listbox.Button className="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<span className="block truncate">
{input.value
? options.find((c) => c.value === input.value)!.label
: optionDefaultText}
</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</span>
</Listbox.Button>
<Transition
show={open}
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options
static
className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
>
{options.map((opt) => (
<Listbox.Option
key={opt.value}
className={({ active }) =>
classNames(
active
? "text-white bg-indigo-600"
: "text-gray-900",
"cursor-default select-none relative py-2 pl-3 pr-9"
)
}
value={opt.value}
>
{({ selected, active }) => (
<>
<span
className={classNames(
selected ? "font-semibold" : "font-normal",
"block truncate"
)}
>
{opt.label}
</span>
{selected ? (
<span
className={classNames(
active ? "text-white" : "text-indigo-600",
"absolute inset-y-0 right-0 flex items-center pr-4"
)}
>
<CheckIcon
className="h-5 w-5"
aria-hidden="true"
/>
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
)}
/>
</div>
);
}
export default SelectField;

2
web/src/components/inputs/compact/index.ts
View file

@ -1,2 +0,0 @@
export { default as NumberField } from "./NumberField";
export { default as SelectField } from "./SelectField";

14
web/src/components/inputs/index.ts
View file

@ -1,7 +1,7 @@
export { default as TextField } from "./TextField";
export { default as TextFieldWide } from "./TextFieldWide";
export { default as PasswordField } from "./PasswordField";
export { default as TextAreaWide } from "./TextAreaWide";
export { default as MultiSelectField } from "./MultiSelectField";
export { default as RadioFieldset } from "./RadioFieldset";
export { default as SwitchGroup } from "./SwitchGroup";
export { ErrorField } from "./common";
export { TextField, NumberField, PasswordField } from "./input";
export { NumberFieldWide, PasswordFieldWide, SwitchGroupWide, TextFieldWide } from "./input_wide";
export { RadioFieldsetWide } from "./radio";
export { DownloadClientSelect, MultiSelect, Select} from "./select";
export { SwitchGroup } from "./switch";

159
web/src/components/inputs/input.tsx Normal file
View file

@ -0,0 +1,159 @@
import React from "react";
import { Field } from "formik";
import { classNames } from "../../utils";
import { EyeIcon, EyeOffIcon } from "@heroicons/react/solid";
import { useToggle } from "../../hooks/hooks";
type COL_WIDTHS = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
interface TextFieldProps {
name: string;
label?: string;
placeholder?: string;
columns?: COL_WIDTHS;
className?: string;
autoComplete?: string;
}
const TextField: React.FC<TextFieldProps> = ({ name, label, placeholder, columns, className, autoComplete }) => (
<div
className={classNames(
columns ? `col-span-${columns}` : "col-span-12"
)}
>
{label && (
<label htmlFor={name} className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
{label}
</label>
)}
<Field name={name}>
{({
field,
meta,
}: any) => (
<div>
<input
{...field}
id={name}
type="text"
autoComplete={autoComplete}
className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
placeholder={placeholder}
/>
{meta.touched && meta.error && (
<div className="error">{meta.error}</div>
)}
</div>
)}
</Field>
</div>
)
interface PasswordFieldProps {
name: string;
label?: string;
placeholder?: string;
columns?: COL_WIDTHS;
className?: string;
autoComplete?: string;
defaultValue?: string;
help?: string;
required?: boolean;
}
const PasswordField: React.FC<PasswordFieldProps> = ({ name, label, placeholder, defaultValue, columns, className, autoComplete, help, required }) => {
const [isVisible, toggleVisibility] = useToggle(false)
return (
<div
className={classNames(
columns ? `col-span-${columns}` : "col-span-12"
)}
>
{label && (
<label htmlFor={name} className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
{label} {required && <span className="text-gray-500">*</span>}
</label>
)}
<Field name={name} defaultValue={defaultValue}>
{({
field,
meta,
}: any) => (
<div className="sm:col-span-2 relative">
<input
{...field}
id={name}
type={isVisible ? "text" : "password"}
autoComplete={autoComplete}
className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700", "mt-2 block w-full dark:bg-gray-800 shadow-sm dark:text-gray-100 sm:text-sm rounded-md")}
placeholder={placeholder}
/>
<div className="absolute inset-y-0 right-0 px-3 flex items-center" onClick={toggleVisibility}>
{!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" /> : <EyeOffIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />}
</div>
{help && (
<p className="mt-2 text-sm text-gray-500" id="email-description">{help}</p>
)}
{meta.touched && meta.error && (
<div className="error">{meta.error}</div>
)}
</div>
)}
</Field>
</div>
)
}
interface NumberFieldProps {
name: string;
label?: string;
placeholder?: string;
className?: string;
required?: boolean;
}
const NumberField: React.FC<NumberFieldProps> = ({
name,
label,
placeholder,
required,
className,
}) => (
<div className="col-span-12 sm:col-span-6">
<label htmlFor={name} className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
{label}
</label>
<Field name={name} type="number">
{({
field,
meta,
}: any) => (
<div className="sm:col-span-2">
<input
type="number"
{...field}
className={classNames(
meta.touched && meta.error
? "focus:ring-red-500 focus:border-red-500 border-red-500"
: "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300",
"mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-sm dark:text-gray-100 sm:text-sm rounded-md"
)}
placeholder={placeholder}
/>
{meta.touched && meta.error && (
<div className="error">{meta.error}</div>
)}
</div>
)}
</Field>
</div>
);
export { TextField, PasswordField, NumberField };

217
web/src/components/inputs/input_wide.tsx Normal file
View file

@ -0,0 +1,217 @@
import React from "react";
import { Field, FieldProps } from "formik";
import { classNames } from "../../utils";
import { useToggle } from "../../hooks/hooks";
import { EyeIcon, EyeOffIcon } from "@heroicons/react/solid";
import { Switch } from "@headlessui/react";
import { ErrorField } from "./common"
interface TextFieldWideProps {
name: string;
label?: string;
help?: string;
placeholder?: string;
defaultValue?: string;
className?: string;
required?: boolean;
hidden?: boolean;
}
const TextFieldWide: React.FC<TextFieldWideProps> = ({ name, label, help, placeholder, defaultValue, required, hidden, className }) => (
<div hidden={hidden} className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<div>
<label htmlFor={name} className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2">
{label} {required && <span className="text-gray-500">*</span>}
</label>
</div>
<div className="sm:col-span-2">
<Field name={name} value={defaultValue}>
{({ field, meta }: FieldProps) => (
<input
{...field}
id={name}
type="text"
value={field.value ? field.value : defaultValue ?? ""}
onChange={field.onChange}
className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700", "block w-full shadow-sm dark:bg-gray-800 sm:text-sm dark:text-white rounded-md")}
placeholder={placeholder}
hidden={hidden}
/>
)}
</Field>
{help && (
<p className="mt-2 text-sm text-gray-500" id={`${name}-description`}>{help}</p>
)}
<ErrorField name={name} classNames="block text-red-500 mt-2" />
</div>
</div>
)
interface PasswordFieldWideProps {
name: string;
label?: string;
placeholder?: string;
defaultValue?: string;
help?: string;
required?: boolean;
}
function PasswordFieldWide({ name, label, placeholder, defaultValue, help, required }: PasswordFieldWideProps) {
const [isVisible, toggleVisibility] = useToggle(false)
return (
<div className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<div>
<label htmlFor={name} className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2">
{label} {required && <span className="text-gray-500">*</span>}
</label>
</div>
<div className="sm:col-span-2">
<Field
name={name}
defaultValue={defaultValue}
>
{({ field, meta }: FieldProps) => (
<div className="relative">
<input
{...field}
id={name}
value={field.value ? field.value : defaultValue ?? ""}
onChange={field.onChange}
type={isVisible ? "text" : "password"}
className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700", "block w-full dark:bg-gray-800 shadow-sm dark:text-gray-100 sm:text-sm rounded-md")}
placeholder={placeholder}
/>
<div className="absolute inset-y-0 right-0 px-3 flex items-center" onClick={toggleVisibility}>
{!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" /> : <EyeOffIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />}
</div>
</div>
)}
</Field>
{help && (
<p className="mt-2 text-sm text-gray-500" id={`${name}-description`}>{help}</p>
)}
<ErrorField name={name} classNames="block text-red-500 mt-2" />
</div>
</div>
)
}
interface NumberFieldWideProps {
name: string;
label?: string;
help?: string;
placeholder?: string;
defaultValue?: number;
className?: string;
required?: boolean;
hidden?: boolean;
}
const NumberFieldWide: React.FC<NumberFieldWideProps> = ({
name,
label,
placeholder,
help,
defaultValue,
required,
hidden,
className,
}) => (
<div className="px-4 space-y-1 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<div>
<label
htmlFor={name}
className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2"
>
{label} {required && <span className="text-gray-500">*</span>}
</label>
</div>
<div className="sm:col-span-2">
<Field
name={name}
defaultValue={defaultValue ?? 0}
>
{({ field, meta, form }: FieldProps) => (
<input
{...field}
id={name}
type="number"
value={field.value ? field.value : defaultValue ?? 0}
onChange={(e) => { form.setFieldValue(field.name, parseInt(e.target.value)) }}
className={classNames(
meta.touched && meta.error
? "focus:ring-red-500 focus:border-red-500 border-red-500"
: "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700",
"block w-full shadow-sm dark:bg-gray-800 sm:text-sm dark:text-white rounded-md"
)}
placeholder={placeholder}
/>
)}
</Field>
{help && (
<p className="mt-2 text-sm text-gray-500 dark:text-gray-200" id={`${name}-description`}>{help}</p>
)}
<ErrorField name={name} classNames="block text-red-500 mt-2" />
</div>
</div>
);
interface SwitchGroupWideProps {
name: string;
label: string;
description?: string;
defaultValue?: boolean;
className?: string;
}
const SwitchGroupWide: React.FC<SwitchGroupWideProps> = ({ name, label, description, defaultValue }) => (
<ul className="mt-2 divide-y divide-gray-200 dark:divide-gray-700">
<Switch.Group as="li" className="py-4 flex items-center justify-between">
<div className="flex flex-col">
<Switch.Label as="p" className="text-sm font-medium text-gray-900 dark:text-white"
passive>
{label}
</Switch.Label>
{description && (
<Switch.Description className="text-sm text-gray-500 dark:text-gray-700">
{description}
</Switch.Description>
)}
</div>
<Field
name={name}
defaultValue={defaultValue as boolean}
type="checkbox"
>
{({ field, form }: FieldProps) => (
<Switch
{...field}
type="button"
value={field.value}
checked={field.checked ?? false}
onChange={value => {
form.setFieldValue(field?.name ?? '', value)
}}
className={classNames(
field.value ? 'bg-teal-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-gray-500',
'ml-4 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
)}
>
<span className="sr-only">Use setting</span>
<span
aria-hidden="true"
className={classNames(
field.value ? 'translate-x-5' : 'translate-x-0',
'inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
)}
/>
</Switch>
)}
</Field>
</Switch.Group>
</ul>
)
export { NumberFieldWide, TextFieldWide, PasswordFieldWide, SwitchGroupWide };

115
web/src/components/inputs/radio.tsx Normal file
View file

@ -0,0 +1,115 @@
import { Fragment } from "react";
import { Field, useFormikContext } from "formik";
import { RadioGroup } from "@headlessui/react";
import { classNames } from "../../utils";
export interface radioFieldsetOption {
label: string;
description: string;
value: string;
}
interface props {
name: string;
legend: string;
options: radioFieldsetOption[];
}
function RadioFieldsetWide({ name, legend, options }: props) {
const {
values,
setFieldValue,
} = useFormikContext<any>();
const onChange = (value: string) => {
setFieldValue(name, value)
}
return (
<fieldset>
<div className="space-y-2 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:px-6 sm:py-5">
<div>
<legend className="text-sm font-medium text-gray-900 dark:text-white">
{legend}
</legend>
</div>
<div className="space-y-5 sm:col-span-2">
<div className="space-y-5 sm:mt-0">
<Field name={name} type="radio">
{() => (
<RadioGroup value={values[name]} onChange={onChange}>
<RadioGroup.Label className="sr-only">
{legend}
</RadioGroup.Label>
<div className="bg-white dark:bg-gray-800 rounded-md -space-y-px">
{options.map((setting, settingIdx) => (
<RadioGroup.Option
key={setting.value}
value={setting.value}
className={({ checked }) =>
classNames(
settingIdx === 0
? "rounded-tl-md rounded-tr-md"
: "",
settingIdx === options.length - 1
? "rounded-bl-md rounded-br-md"
: "",
checked
? "bg-indigo-50 dark:bg-gray-700 border-indigo-200 dark:border-blue-600 z-10"
: "border-gray-200 dark:border-gray-700",
"relative border p-4 flex cursor-pointer focus:outline-none"
)
}
>
{({ active, checked }) => (
<Fragment>
<span
className={classNames(
checked
? "bg-indigo-600 dark:bg-blue-600 border-transparent"
: "bg-white border-gray-300 dark:border-gray-300",
active
? "ring-2 ring-offset-2 ring-indigo-500 dark:ring-blue-500"
: "",
"h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center"
)}
aria-hidden="true"
>
<span className="rounded-full bg-white w-1.5 h-1.5" />
</span>
<div className="ml-3 flex flex-col">
<RadioGroup.Label
as="span"
className={classNames(
checked ? "text-indigo-900 dark:text-blue-500" : "text-gray-900 dark:text-gray-300",
"block text-sm font-medium"
)}
>
{setting.label}
</RadioGroup.Label>
<RadioGroup.Description
as="span"
className={classNames(
checked ? "text-indigo-700 dark:text-blue-500" : "text-gray-500",
"block text-sm"
)}
>
{setting.description}
</RadioGroup.Description>
</div>
</Fragment>
)}
</RadioGroup.Option>
))}
</div>
</RadioGroup>
)}
</Field>
</div>
</div>
</div>
</fieldset>
);
}
export { RadioFieldsetWide };

271
web/src/components/inputs/select.tsx Normal file
View file

@ -0,0 +1,271 @@
import { Fragment } from "react";
import { MultiSelect as RMSC} from "react-multi-select-component";
import { Transition, Listbox } from "@headlessui/react";
import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';
import { Action, DownloadClient } from "../../domain/interfaces";
import { classNames, COL_WIDTHS } from "../../utils";
import { Field } from "formik";
interface MultiSelectProps {
label?: string;
options?: [] | any;
name: string;
className?: string;
columns?: COL_WIDTHS;
}
const MultiSelect: React.FC<MultiSelectProps> = ({
name,
label,
options,
className,
columns
}) => (
<div
className={classNames(
columns ? `col-span-${columns}` : "col-span-12"
)}
>
<label
className="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase dark:text-gray-200"
htmlFor={label}
>
{label}
</label>
<Field name={name} type="select" multiple={true}>
{({
field,
form: { setFieldValue },
}: any) => (
<RMSC
{...field}
type="select"
options={options}
labelledBy={name}
value={field.value && field.value.map((item: any) => options.find((o: any) => o.value === item))}
onChange={(values: any) => {
let am = values && values.map((i: any) => i.value)
setFieldValue(field.name, am)
}}
className="dark:bg-gray-700"
/>
)}
</Field>
</div>
);
interface DownloadClientSelectProps {
name: string;
action: Action;
clients: DownloadClient[];
}
export default function DownloadClientSelect({
name, action, clients,
}: DownloadClientSelectProps) {
return (
<div className="col-span-6 sm:col-span-6">
<Field name={name} type="select">
{({
field,
form: { setFieldValue },
}: any) => (
<Listbox
value={field.value}
onChange={(value: any) => setFieldValue(field?.name, value)}
>
{({ open }) => (
<>
<Listbox.Label className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
Client
</Listbox.Label>
<div className="mt-2 relative">
<Listbox.Button className="bg-white dark:bg-gray-800 relative w-full border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 dark:text-gray-200 sm:text-sm">
<span className="block truncate">
{field.value
? clients.find((c) => c.id === field.value)!.name
: "Choose a client"}
</span>
{/*<span className="block truncate">Choose a client</span>*/}
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon
className="h-5 w-5 text-gray-400 dark:text-gray-300"
aria-hidden="true" />
</span>
</Listbox.Button>
<Transition
show={open}
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options
static
className="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
>
{clients
.filter((c) => c.type === action.type)
.map((client: any) => (
<Listbox.Option
key={client.id}
className={({ active }) => classNames(
active
? "text-white dark:text-gray-100 bg-indigo-600 dark:bg-gray-800"
: "text-gray-900 dark:text-gray-300",
"cursor-default select-none relative py-2 pl-3 pr-9"
)}
value={client.id}
>
{({ selected, active }) => (
<>
<span
className={classNames(
selected ? "font-semibold" : "font-normal",
"block truncate"
)}
>
{client.name}
</span>
{selected ? (
<span
className={classNames(
active ? "text-white dark:text-gray-100" : "text-indigo-600 dark:text-gray-700",
"absolute inset-y-0 right-0 flex items-center pr-4"
)}
>
<CheckIcon
className="h-5 w-5"
aria-hidden="true" />
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
)}
</Field>
</div>
);
}
interface SelectFieldOption {
label: string;
value: string;
}
interface SelectFieldProps {
name: string;
label: string;
optionDefaultText: string;
options: SelectFieldOption[];
}
function Select({ name, label, optionDefaultText, options }: SelectFieldProps) {
return (
<div className="col-span-6">
<Field name={name} type="select">
{({
field,
form: { setFieldValue },
}: any) => (
<Listbox
value={field.value}
onChange={(value: any) => setFieldValue(field?.name, value)}
>
{({ open }) => (
<>
<Listbox.Label className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
{label}
</Listbox.Label>
<div className="mt-2 relative">
<Listbox.Button className="bg-white dark:bg-gray-800 relative w-full border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 dark:text-gray-200 sm:text-sm">
<span className="block truncate">
{field.value
? options.find((c) => c.value === field.value)!.label
: optionDefaultText
}
</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon
className="h-5 w-5 text-gray-400 dark:text-gray-300"
aria-hidden="true"
/>
</span>
</Listbox.Button>
<Transition
show={open}
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options
static
className="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
>
{options.map((opt) => (
<Listbox.Option
key={opt.value}
className={({ active }) =>
classNames(
active
? "text-white dark:text-gray-100 bg-indigo-600 dark:bg-gray-800"
: "text-gray-900 dark:text-gray-300",
"cursor-default select-none relative py-2 pl-3 pr-9"
)
}
value={opt.value}
>
{({ selected, active }) => (
<>
<span
className={classNames(
selected ? "font-semibold" : "font-normal",
"block truncate"
)}
>
{opt.label}
</span>
{selected ? (
<span
className={classNames(
active ? "text-white dark:text-gray-100" : "text-indigo-600 dark:text-gray-700",
"absolute inset-y-0 right-0 flex items-center pr-4"
)}
>
<CheckIcon
className="h-5 w-5"
aria-hidden="true"
/>
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
)}
</Field>
</div>
);
}
export { MultiSelect, DownloadClientSelect, Select }

82
web/src/screens/filters/inputs/SwitchGroup.tsx → web/src/components/inputs/switch.tsx
View file

@ -1,9 +1,65 @@
import React from "react";
import { Switch } from "@headlessui/react";
import { Field } from "formik";
import { classNames } from "../../../styles/utils";
import React, { InputHTMLAttributes } from 'react'
import { Switch as HeadlessSwitch } from '@headlessui/react'
import { FieldInputProps, FieldMetaProps, FieldProps, FormikProps, FormikValues, Field } from 'formik'
import { classNames } from "../../utils";
interface Props {
type SwitchProps<V = any> = {
label: string
checked: boolean
disabled?: boolean
onChange: (value: boolean) => void
field?: FieldInputProps<V>
form?: FormikProps<FormikValues>
meta?: FieldMetaProps<V>
}
export const Switch: React.FC<SwitchProps> = ({
label,
checked: $checked,
disabled = false,
onChange: $onChange,
field,
form,
}) => {
const checked = field?.checked ?? $checked
return (
<HeadlessSwitch.Group as="div" className="flex items-center space-x-4">
<HeadlessSwitch.Label>{label}</HeadlessSwitch.Label>
<HeadlessSwitch
as="button"
name={field?.name}
disabled={disabled}
checked={checked}
onChange={value => {
form?.setFieldValue(field?.name ?? '', value)
$onChange && $onChange(value)
}}
className={classNames(
checked ? 'bg-teal-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-gray-600',
'ml-4 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
)}
>
{({ checked }) => (
<span
aria-hidden="true"
className={classNames(
checked ? 'translate-x-5' : 'translate-x-0',
'inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
)}
/>
)}
</HeadlessSwitch>
</HeadlessSwitch.Group>
)
}
export type SwitchFormikProps = SwitchProps & FieldProps & InputHTMLAttributes<HTMLInputElement>
export const SwitchFormik: React.FC<SwitchProps> = args => <Switch {...args} />
interface SwitchGroupProps {
name: string;
label?: string;
description?: string;
@ -11,18 +67,18 @@ interface Props {
className?: string;
}
const SwitchGroup: React.FC<Props> = ({ name, label, description, defaultValue }) => (
const SwitchGroup: React.FC<SwitchGroupProps> = ({ name, label, description, defaultValue }) => (
<ul className="mt-2 divide-y divide-gray-200">
<Switch.Group as="li" className="py-4 flex items-center justify-between">
<HeadlessSwitch.Group as="li" className="py-4 flex items-center justify-between">
{label && <div className="flex flex-col">
<Switch.Label as="p" className="text-sm font-medium text-gray-900 dark:text-gray-100"
<HeadlessSwitch.Label as="p" className="text-sm font-medium text-gray-900 dark:text-gray-100"
passive>
{label}
</Switch.Label>
</HeadlessSwitch.Label>
{description && (
<Switch.Description className="text-sm text-gray-500 dark:text-gray-400">
<HeadlessSwitch.Description className="text-sm text-gray-500 dark:text-gray-400">
{description}
</Switch.Description>
</HeadlessSwitch.Description>
)}
</div>
}
@ -82,8 +138,8 @@ const SwitchGroup: React.FC<Props> = ({ name, label, description, defaultValue }
</Switch>
)}
/> */}
</Switch.Group>
</HeadlessSwitch.Group>
</ul>
)
export default SwitchGroup;
export { SwitchGroup }

64
web/src/components/inputs/wide/NumberField.tsx
View file

@ -1,64 +0,0 @@
import React from "react";
import { Field } from "react-final-form";
import Error from "../Error";
import { classNames } from "../../../styles/utils";
interface Props {
name: string;
label?: string;
help?: string;
placeholder?: string;
defaultValue?: number;
className?: string;
required?: boolean;
hidden?: boolean;
}
const NumberFieldWide: React.FC<Props> = ({
name,
label,
placeholder,
help,
defaultValue,
required,
hidden,
className,
}) => (
<div className="px-4 space-y-1 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<div>
<label
htmlFor={name}
className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2"
>
{label} {required && <span className="text-gray-500">*</span>}
</label>
</div>
<div className="sm:col-span-2">
<Field
name={name}
defaultValue={defaultValue}
parse={(v: any) => v & parseInt(v, 10)}
render={({ input, meta }) => (
<input
{...input}
id={name}
type="number"
className={classNames(
meta.touched && meta.error
? "focus:ring-red-500 focus:border-red-500 border-red-500"
: "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700",
"block w-full shadow-sm dark:bg-gray-800 sm:text-sm dark:text-white rounded-md"
)}
placeholder={placeholder}
/>
)}
/>
{help && (
<p className="mt-2 text-sm text-gray-500 dark:text-gray-200" id={`${name}-description`}>{help}</p>
)}
<Error name={name} classNames="block text-red-500 mt-2" />
</div>
</div>
);
export default NumberFieldWide;

56
web/src/components/inputs/wide/PasswordField.tsx
View file

@ -1,56 +0,0 @@
import { Field } from "react-final-form";
import Error from "../Error";
import { classNames } from "../../../styles/utils";
import { useToggle } from "../../../hooks/hooks";
import { EyeIcon, EyeOffIcon } from "@heroicons/react/solid";
interface Props {
name: string;
label?: string;
placeholder?: string;
defaultValue?: string;
help?: string;
required?: boolean;
}
function PasswordField({ name, label, placeholder, defaultValue, help, required }: Props) {
const [isVisible, toggleVisibility] = useToggle(false)
return (
<div
className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<div>
<label htmlFor={name} className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2">
{label} {required && <span className="text-gray-500">*</span>}
</label>
</div>
<div className="sm:col-span-2">
<Field
name={name}
defaultValue={defaultValue}
render={({ input, meta }) => (
<div className="relative">
<input
{...input}
id={name}
type={isVisible ? "text" : "password"}
className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700", "block w-full dark:bg-gray-800 shadow-sm dark:text-gray-100 sm:text-sm rounded-md")}
placeholder={placeholder}
/>
<div className="absolute inset-y-0 right-0 px-3 flex items-center" onClick={toggleVisibility}>
{!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" /> : <EyeOffIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />}
</div>
</div>
)}
/>
{help && (
<p className="mt-2 text-sm text-gray-500" id="email-description">{help}</p>
)}
<Error name={name} classNames="block text-red-500 mt-2" />
</div>
</div>
)
}
export default PasswordField;

105
web/src/components/inputs/wide/RadioFieldsetWide.tsx
View file

@ -1,105 +0,0 @@
import { Field, useFormState } from "react-final-form";
import { RadioGroup } from "@headlessui/react";
import { classNames } from "../../../styles/utils";
import { Fragment } from "react";
import { radioFieldsetOption } from "../RadioFieldset";
interface props {
name: string;
legend: string;
options: radioFieldsetOption[];
}
function RadioFieldsetWide({ name, legend, options }: props) {
const { values } = useFormState();
return (
<fieldset>
<div className="space-y-2 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:px-6 sm:py-5">
<div>
<legend className="text-sm font-medium text-gray-900 dark:text-white">
{legend}
</legend>
</div>
<div className="space-y-5 sm:col-span-2">
<div className="space-y-5 sm:mt-0">
<Field
name={name}
type="radio"
render={({ input }) => (
<RadioGroup value={values[name]} onChange={input.onChange}>
<RadioGroup.Label className="sr-only">
Privacy setting
</RadioGroup.Label>
<div className="bg-white dark:bg-gray-800 rounded-md -space-y-px">
{options.map((setting, settingIdx) => (
<RadioGroup.Option
key={setting.value}
value={setting.value}
className={({ checked }) =>
classNames(
settingIdx === 0
? "rounded-tl-md rounded-tr-md"
: "",
settingIdx === options.length - 1
? "rounded-bl-md rounded-br-md"
: "",
checked
? "bg-indigo-50 dark:bg-gray-700 border-indigo-200 dark:border-blue-600 z-10"
: "border-gray-200 dark:border-gray-700",
"relative border p-4 flex cursor-pointer focus:outline-none"
)
}
>
{({ active, checked }) => (
<Fragment>
<span
className={classNames(
checked
? "bg-indigo-600 dark:bg-blue-600 border-transparent"
: "bg-white border-gray-300 dark:border-gray-300",
active
? "ring-2 ring-offset-2 ring-indigo-500 dark:ring-blue-500"
: "",
"h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center"
)}
aria-hidden="true"
>
<span className="rounded-full bg-white w-1.5 h-1.5" />
</span>
<div className="ml-3 flex flex-col">
<RadioGroup.Label
as="span"
className={classNames(
checked ? "text-indigo-900 dark:text-blue-500" : "text-gray-900 dark:text-gray-300",
"block text-sm font-medium"
)}
>
{setting.label}
</RadioGroup.Label>
<RadioGroup.Description
as="span"
className={classNames(
checked ? "text-indigo-700 dark:text-blue-500" : "text-gray-500",
"block text-sm"
)}
>
{setting.description}
</RadioGroup.Description>
</div>
</Fragment>
)}
</RadioGroup.Option>
))}
</div>
</RadioGroup>
)}
/>
</div>
</div>
</div>
</fieldset>
);
}
export default RadioFieldsetWide;

111
web/src/components/inputs/wide/SelectField.tsx
View file

@ -1,111 +0,0 @@
import { Field } from "react-final-form";
import { Listbox, Transition } from "@headlessui/react";
import { CheckIcon, SelectorIcon } from "@heroicons/react/solid";
import React, { Fragment } from "react";
import { classNames } from "../../../styles/utils";
interface SelectOption {
label: string;
value: string;
}
interface props {
name: string;
label: string;
optionDefaultText: string;
options: SelectOption[];
}
function SelectField({ name, label, optionDefaultText, options }: props) {
return (
<div className="col-span-6 sm:col-span-6">
<Field
name={name}
type="select"
render={({ input }) => (
<Listbox value={input.value} onChange={input.onChange}>
{({ open }) => (
<div className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<Listbox.Label className="block text-sm font-medium text-gray-900 sm:mt-px sm:pt-2">
{label}
</Listbox.Label>
<div className="mt-2 relative">
<Listbox.Button className="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<span className="block truncate">
{input.value
? options.find((c) => c.value === input.value)!.label
: optionDefaultText}
</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</span>
</Listbox.Button>
<Transition
show={open}
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options
static
className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
>
{options.map((opt) => (
<Listbox.Option
key={opt.value}
className={({ active }) =>
classNames(
active
? "text-white bg-indigo-600"
: "text-gray-900",
"cursor-default select-none relative py-2 pl-3 pr-9"
)
}
value={opt.value}
>
{({ selected, active }) => (
<>
<span
className={classNames(
selected ? "font-semibold" : "font-normal",
"block truncate"
)}
>
{opt.label}
</span>
{selected ? (
<span
className={classNames(
active ? "text-white" : "text-indigo-600",
"absolute inset-y-0 right-0 flex items-center pr-4"
)}
>
<CheckIcon
className="h-5 w-5"
aria-hidden="true"
/>
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</div>
)}
</Listbox>
)}
/>
</div>
);
}
export default SelectField;

4
web/src/components/inputs/wide/index.ts
View file

@ -1,4 +0,0 @@
export { default as NumberFieldWide } from "./NumberField";
export { default as PasswordFieldWide } from "./PasswordField";
export { default as RadioFieldsetWide } from "./RadioFieldsetWide";
export { default as SelectFieldWide } from "./SelectField";

1
web/src/components/modals/index.ts
View file

@ -1 +0,0 @@
export { default as DeleteModal } from "./Delete";

10
web/src/components/modals/Delete.tsx → web/src/components/modals/index.tsx
View file

@ -1,8 +1,8 @@
import { Fragment } from "react";
import { Fragment, FC } from "react";
import { Dialog, Transition } from "@headlessui/react";
import { ExclamationIcon } from "@heroicons/react/solid";
interface props {
interface DeleteModalProps {
isOpen: boolean;
buttonRef: any;
toggle: any;
@ -11,7 +11,7 @@ interface props {
text: string;
}
const DeleteModal = ({ isOpen, buttonRef, toggle, deleteAction, title, text }: props) => (
export const DeleteModal: FC<DeleteModalProps> = ({ isOpen, buttonRef, toggle, deleteAction, title, text }) => (
<Transition.Root show={isOpen} as={Fragment}>
<Dialog
as="div"
@ -86,6 +86,4 @@ const DeleteModal = ({ isOpen, buttonRef, toggle, deleteAction, title, text }: p
</div>
</Dialog>
</Transition.Root>
)
export default DeleteModal;
)

70
web/src/components/notifications/Toast.tsx
View file

@ -1,7 +1,7 @@
import { FC } from 'react'
import { XIcon, CheckCircleIcon, ExclamationIcon, ExclamationCircleIcon } from '@heroicons/react/solid'
import { toast } from 'react-hot-toast'
import { classNames } from '../../styles/utils'
import { classNames } from '../../utils'
type Props = {
type: 'error' | 'success' | 'warning'
@ -9,45 +9,39 @@ type Props = {
t?: any;
}
const Toast: FC<Props> = ({
type,
body,
t
}) => {
return (
<div className={classNames(
t.visible ? 'animate-enter' : 'animate-leave',
"max-w-sm w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden transition-all")}>
<div className="p-4">
<div className="flex items-start">
<div className="flex-shrink-0">
{type === 'success' && <CheckCircleIcon className="h-6 w-6 text-green-400" aria-hidden="true" />}
{type === 'error' && <ExclamationCircleIcon className="h-6 w-6 text-red-400" aria-hidden="true" />}
{type === 'warning' && <ExclamationIcon className="h-6 w-6 text-yellow-400" aria-hidden="true" />}
</div>
<div className="ml-3 w-0 flex-1 pt-0.5">
<p className="text-sm font-medium text-gray-900 dark:text-gray-200">
{type === 'success' && "Success"}
{type === 'error' && "Error"}
{type === 'warning' && "Warning"}
</p>
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{body}</p>
</div>
<div className="ml-4 flex-shrink-0 flex">
<button
className="bg-white dark:bg-gray-700 rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
onClick={() => {
toast.dismiss(t.id)
}}
>
<span className="sr-only">Close</span>
<XIcon className="h-5 w-5" aria-hidden="true" />
</button>
</div>
const Toast: FC<Props> = ({ type, body, t }) => (
<div className={classNames(
t.visible ? 'animate-enter' : 'animate-leave',
"max-w-sm w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden transition-all")}>
<div className="p-4">
<div className="flex items-start">
<div className="flex-shrink-0">
{type === 'success' && <CheckCircleIcon className="h-6 w-6 text-green-400" aria-hidden="true" />}
{type === 'error' && <ExclamationCircleIcon className="h-6 w-6 text-red-400" aria-hidden="true" />}
{type === 'warning' && <ExclamationIcon className="h-6 w-6 text-yellow-400" aria-hidden="true" />}
</div>
<div className="ml-3 w-0 flex-1 pt-0.5">
<p className="text-sm font-medium text-gray-900 dark:text-gray-200">
{type === 'success' && "Success"}
{type === 'error' && "Error"}
{type === 'warning' && "Warning"}
</p>
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{body}</p>
</div>
<div className="ml-4 flex-shrink-0 flex">
<button
className="bg-white dark:bg-gray-700 rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
onClick={() => {
toast.dismiss(t.id)
}}
>
<span className="sr-only">Close</span>
<XIcon className="h-5 w-5" aria-hidden="true" />
</button>
</div>
</div>
</div>
)
}
</div>
)
export default Toast;

1
web/src/components/panels/index.ts
View file

@ -1 +0,0 @@
export { default as SlideOver } from "./SlideOver";

31
web/src/components/panels/SlideOver.tsx → web/src/components/panels/index.tsx
View file

@ -1,16 +1,15 @@
import { Fragment, useRef } from "react";
import { XIcon } from "@heroicons/react/solid";
import { Dialog, Transition } from "@headlessui/react";
import { Form } from "react-final-form";
import DEBUG from "../../components/debug";
import { Form, Formik } from "formik";
import DEBUG from "../debug";
import { useToggle } from "../../hooks/hooks";
import { DeleteModal } from "../../components/modals";
import { classNames } from "../../styles/utils";
import { DeleteModal } from "../modals";
import { classNames } from "../../utils";
interface props {
interface SlideOverProps {
title: string;
initialValues: any;
mutators?: any;
validate?: any;
onSubmit: any;
isOpen: boolean;
@ -20,7 +19,7 @@ interface props {
type: "CREATE" | "UPDATE";
}
function SlideOver({ title, initialValues, mutators, validate, onSubmit, deleteAction, isOpen, toggle, type, children }: props) {
function SlideOver({ title, initialValues, validate, onSubmit, deleteAction, isOpen, toggle, type, children }: SlideOverProps) {
const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false)
const cancelModalButtonRef = useRef(null)
@ -54,15 +53,13 @@ function SlideOver({ title, initialValues, mutators, validate, onSubmit, deleteA
>
<div className="w-screen max-w-2xl dark:border-gray-700 border-l">
<Form
<Formik
initialValues={initialValues}
mutators={mutators}
onSubmit={onSubmit}
validate={validate}
>
{({ handleSubmit, values }) => {
return (
<form className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll"
{({ handleSubmit, values }) => (
<Form className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll"
onSubmit={handleSubmit}>
<div className="flex-1">
@ -90,7 +87,6 @@ function SlideOver({ title, initialValues, mutators, validate, onSubmit, deleteA
{children !== undefined && children(values)}
</div>
<div className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
<div className={classNames(type === "CREATE" ? "justify-end" : "justify-between", "space-x-3 flex")}>
{type === "UPDATE" && (
@ -122,10 +118,9 @@ function SlideOver({ title, initialValues, mutators, validate, onSubmit, deleteA
</div>
<DEBUG values={values} />
</form>
)
}}
</Form>
</Form>
)}
</Formik>
</div>
@ -137,4 +132,4 @@ function SlideOver({ title, initialValues, mutators, validate, onSubmit, deleteA
)
}
export default SlideOver;
export { SlideOver };

1
web/src/domain/interfaces.ts
View file

@ -152,6 +152,7 @@ export interface Network {
export interface Channel {
name: string;
password: string;
}
export interface SASL {

415
web/src/forms/filters/FilterActionAddForm.tsx
View file

@ -1,415 +0,0 @@
import { Fragment, useEffect } from "react";
import { useMutation } from "react-query";
import { Action, DownloadClient, Filter } from "../../domain/interfaces";
import { queryClient } from "../../App";
import { sleep } from "../../utils/utils";
import { CheckIcon, SelectorIcon, XIcon } from "@heroicons/react/solid";
import { Dialog, Listbox, Transition } from "@headlessui/react";
import { classNames } from "../../styles/utils";
import { Field, Form } from "react-final-form";
import DEBUG from "../../components/debug";
import APIClient from "../../api/APIClient";
import { ActionTypeOptions } from "../../domain/constants";
import { SwitchGroup, TextFieldWide } from "../../components/inputs";
import { AlertWarning } from "../../components/alerts";
import {
NumberFieldWide,
RadioFieldsetWide,
} from "../../components/inputs/wide";
import { toast } from 'react-hot-toast'
import Toast from '../../components/notifications/Toast';
interface DownloadClientSelectProps {
name: string;
clients: DownloadClient[];
values: any;
}
export function DownloadClientSelect({
name,
clients,
values,
}: DownloadClientSelectProps) {
return (
<div className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<Field
name={name}
type="select"
render={({ input }) => (
<Listbox value={input.value} onChange={input.onChange}>
{({ open }) => (
<>
<Listbox.Label className="block text-sm font-medium text-gray-700">
Client
</Listbox.Label>
<div className="mt-1 relative">
<Listbox.Button className="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<span className="block truncate">
{input.value
? clients.find((c) => c.id === input.value)!.name
: "Choose a client"}
</span>
{/*<span className="block truncate">Choose a client</span>*/}
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</span>
</Listbox.Button>
<Transition
show={open}
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options
static
className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
>
{clients
.filter((c) => c.type === values.type)
.map((client: any) => (
<Listbox.Option
key={client.id}
className={({ active }) =>
classNames(
active
? "text-white bg-indigo-600"
: "text-gray-900",
"cursor-default select-none relative py-2 pl-3 pr-9"
)
}
value={client.id}
>
{({ selected, active }) => (
<>
<span
className={classNames(
selected ? "font-semibold" : "font-normal",
"block truncate"
)}
>
{client.name}
</span>
{selected ? (
<span
className={classNames(
active ? "text-white" : "text-indigo-600",
"absolute inset-y-0 right-0 flex items-center pr-4"
)}
>
<CheckIcon
className="h-5 w-5"
aria-hidden="true"
/>
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
)}
/>
</div>
);
}
interface props {
filter: Filter;
isOpen: boolean;
toggle: any;
clients: DownloadClient[];
}
function FilterActionAddForm({ filter, isOpen, toggle, clients }: props) {
const mutation = useMutation(
(action: Action) => APIClient.actions.create(action),
{
onSuccess: () => {
queryClient.invalidateQueries(["filter", filter.id]);
toast.custom((t) => <Toast type="success" body="Action was added" t={t} />)
sleep(500).then(() => toggle());
},
}
);
useEffect(() => {
// console.log("render add action form", clients)
}, []);
const onSubmit = (data: any) => {
// TODO clear data depending on type
mutation.mutate(data);
};
const TypeForm = (values: any) => {
switch (values.type) {
case "TEST":
return (
<AlertWarning
title="Notice"
text="The test action does nothing except to show if the filter works."
/>
);
case "WATCH_FOLDER":
return (
<div>
<TextFieldWide
name="watch_folder"
label="Watch dir"
placeholder="Watch directory eg. /home/user/watch_folder"
/>
</div>
);
case "EXEC":
return (
<div>
<TextFieldWide
name="exec_cmd"
label="Program"
placeholder="Path to program eg. /bin/test"
/>
<TextFieldWide
name="exec_args"
label="Arguments"
placeholder="Arguments eg. --test"
/>
</div>
);
case "QBITTORRENT":
return (
<div>
<DownloadClientSelect
name="client_id"
clients={clients}
values={values}
/>
<TextFieldWide name="category" label="Category" placeholder="" />
<TextFieldWide
name="tags"
label="Tags"
placeholder="Comma separated eg. 4k,remux"
/>
<TextFieldWide name="save_path" label="Save path" />
<div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
<SwitchGroup name="paused" label="Add paused" />
</div>
<div className="divide-y divide-gray-200 pt-8 space-y-6 sm:pt-10 sm:space-y-5">
<div className="px-4">
<h3 className="text-lg leading-6 font-medium text-gray-900">
Limit speeds
</h3>
<p className="mt-1 max-w-2xl text-sm text-gray-500">
Limit download and upload speed for torrents in this filter.
In KB/s.
</p>
</div>
<NumberFieldWide
name="limit_download_speed"
label="Limit download speed"
/>
<NumberFieldWide
name="limit_upload_speed"
label="Limit upload speed"
/>
</div>
</div>
);
case "DELUGE_V1":
case "DELUGE_V2":
return (
<div>
<DownloadClientSelect
name="client_id"
clients={clients}
values={values}
/>
<TextFieldWide name="label" label="Label" />
<TextFieldWide name="save_path" label="Save path" />
<div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
<SwitchGroup name="paused" label="Add paused" />
</div>
<div className="divide-y divide-gray-200 pt-8 space-y-6 sm:pt-10 sm:space-y-5">
<div className="px-4">
<h3 className="text-lg leading-6 font-medium text-gray-900">
Limit speeds
</h3>
<p className="mt-1 max-w-2xl text-sm text-gray-500">
Limit download and upload speed for torrents in this filter.
In KB/s.
</p>
</div>
<NumberFieldWide
name="limit_download_speed"
label="Limit download speed"
/>
<NumberFieldWide
name="limit_upload_speed"
label="Limit upload speed"
/>
</div>
</div>
);
case "RADARR":
case "SONARR":
case "LIDARR":
return (
<div>
<DownloadClientSelect
name="client_id"
clients={clients}
values={values}
/>
</div>
);
default:
return (
<AlertWarning
title="Notice"
text="The test action does nothing except to show if the filter works."
/>
);
}
};
return (
<Transition.Root show={isOpen} as={Fragment}>
<Dialog
as="div"
static
className="fixed inset-0 overflow-hidden"
open={isOpen}
onClose={toggle}
>
<div className="absolute inset-0 overflow-hidden">
<Dialog.Overlay className="absolute inset-0" />
<div className="fixed inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
<Transition.Child
as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700"
enterFrom="translate-x-full"
enterTo="translate-x-0"
leave="transform transition ease-in-out duration-500 sm:duration-700"
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<div className="w-screen max-w-2xl">
<Form
initialValues={{
name: "",
enabled: false,
type: "TEST",
watch_folder: "",
exec_cmd: "",
exec_args: "",
category: "",
tags: "",
label: "",
save_path: "",
paused: false,
ignore_rules: false,
limit_upload_speed: 0,
limit_download_speed: 0,
filter_id: filter.id,
client_id: null,
}}
onSubmit={onSubmit}
>
{({ handleSubmit, values }) => {
return (
<form
className="h-full flex flex-col bg-white shadow-xl overflow-y-scroll"
onSubmit={handleSubmit}
>
<div className="flex-1">
<div className="px-4 py-6 bg-gray-50 sm:px-6">
<div className="flex items-start justify-between space-x-3">
<div className="space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900">
Add action
</Dialog.Title>
<p className="text-sm text-gray-500">
Add filter action.
</p>
</div>
<div className="h-7 flex items-center">
<button
type="button"
className="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
onClick={toggle}
>
<span className="sr-only">Close panel</span>
<XIcon
className="h-6 w-6"
aria-hidden="true"
/>
</button>
</div>
</div>
</div>
<div className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
<TextFieldWide name="name" label="Action name" />
<RadioFieldsetWide
name="type"
legend="Type"
options={ActionTypeOptions}
/>
{TypeForm(values)}
</div>
</div>
<div className="flex-shrink-0 px-4 border-t border-gray-200 py-5 sm:px-6">
<div className="space-x-3 flex justify-end">
<button
type="button"
className="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
onClick={toggle}
>
Cancel
</button>
<button
type="submit"
className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Save
</button>
</div>
</div>
<DEBUG values={values} />
</form>
);
}}
</Form>
</div>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
}
export default FilterActionAddForm;

318
web/src/forms/filters/FilterActionUpdateForm.tsx
View file

@ -1,318 +0,0 @@
import { Fragment, useEffect } from "react";
import { useMutation } from "react-query";
import { Action, DownloadClient, Filter } from "../../domain/interfaces";
import { queryClient } from "../../App";
import { sleep } from "../../utils/utils";
import { XIcon } from "@heroicons/react/solid";
import { Dialog, Transition } from "@headlessui/react";
import { Form } from "react-final-form";
import DEBUG from "../../components/debug";
import APIClient from "../../api/APIClient";
import { ActionTypeOptions } from "../../domain/constants";
import { AlertWarning } from "../../components/alerts";
import { SwitchGroup, TextFieldWide } from "../../components/inputs";
import {
NumberFieldWide,
RadioFieldsetWide,
} from "../../components/inputs/wide";
import { DownloadClientSelect } from "./FilterActionAddForm";
import { toast } from 'react-hot-toast'
import Toast from '../../components/notifications/Toast';
interface props {
filter: Filter;
isOpen: boolean;
toggle: any;
clients: DownloadClient[];
action: Action;
}
function FilterActionUpdateForm({
filter,
isOpen,
toggle,
clients,
action,
}: props) {
const mutation = useMutation(
(action: Action) => APIClient.actions.update(action),
{
onSuccess: () => {
// console.log("add action");
queryClient.invalidateQueries(["filter", filter.id]);
toast.custom((t) => <Toast type="success" body={`${filter.name} was updated successfully`} t={t} />)
sleep(1500);
toggle();
},
}
);
useEffect(() => {
// console.log("render add action form", clients)
}, [clients]);
const onSubmit = (data: any) => {
// TODO clear data depending on type
console.log(data);
mutation.mutate(data);
};
const TypeForm = (values: any) => {
switch (values.type) {
case "TEST":
return (
<AlertWarning
title="Notice"
text="The test action does nothing except to show if the filter works."
/>
);
case "WATCH_FOLDER":
return (
<div>
<TextFieldWide
name="watch_folder"
label="Watch dir"
placeholder="Watch directory eg. /home/user/watch_folder"
/>
</div>
);
case "EXEC":
return (
<div>
<TextFieldWide
name="exec_cmd"
label="Program"
placeholder="Path to program eg. /bin/test"
/>
<TextFieldWide
name="exec_args"
label="Arguments"
placeholder="Arguments eg. --test"
/>
</div>
);
case "QBITTORRENT":
return (
<div>
<DownloadClientSelect
name="client_id"
clients={clients}
values={values}
/>
<TextFieldWide name="category" label="Category" placeholder="" />
<TextFieldWide
name="tags"
label="Tags"
placeholder="Comma separated eg. 4k,remux"
/>
<TextFieldWide name="save_path" label="Save path" />
<div className="divide-y divide-gray-200 pt-8 space-y-6 sm:pt-10 sm:space-y-5">
<div className="px-4">
<h3 className="text-lg leading-6 font-medium text-gray-900">
Limit speeds
</h3>
<p className="mt-1 max-w-2xl text-sm text-gray-500">
Limit download and upload speed for torrents in this filter.
In KB/s.
</p>
</div>
<NumberFieldWide
name="limit_download_speed"
label="Limit download speed"
/>
<NumberFieldWide
name="limit_upload_speed"
label="Limit upload speed"
/>
</div>
<div className="col-span-6">
<SwitchGroup name="paused" label="Add paused" />
</div>
</div>
);
case "DELUGE_V1":
case "DELUGE_V2":
return (
<div>
<DownloadClientSelect
name="client_id"
clients={clients}
values={values}
/>
<TextFieldWide name="label" label="Label" />
<TextFieldWide name="save_path" label="Save path" />
<div className="divide-y divide-gray-200 pt-8 space-y-6 sm:pt-10 sm:space-y-5">
<div className="px-4">
<h3 className="text-lg leading-6 font-medium text-gray-900">
Limit speeds
</h3>
<p className="mt-1 max-w-2xl text-sm text-gray-500">
Limit download and upload speed for torrents in this filter.
In KB/s.
</p>
</div>
<NumberFieldWide
name="limit_download_speed"
label="Limit download speed"
/>
<NumberFieldWide
name="limit_upload_speed"
label="Limit upload speed"
/>
</div>
</div>
);
case "RADARR":
case "SONARR":
case "LIDARR":
return (
<div>
<DownloadClientSelect
name="client_id"
clients={clients}
values={values}
/>
</div>
);
default:
return (
<AlertWarning
title="Notice"
text="The test action does nothing except to show if the filter works."
/>
);
}
};
return (
<Transition.Root show={isOpen} as={Fragment}>
<Dialog
as="div"
static
className="fixed inset-0 overflow-hidden"
open={isOpen}
onClose={toggle}
>
<div className="absolute inset-0 overflow-hidden">
<Dialog.Overlay className="absolute inset-0" />
<div className="fixed inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
<Transition.Child
as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700"
enterFrom="translate-x-full"
enterTo="translate-x-0"
leave="transform transition ease-in-out duration-500 sm:duration-700"
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<div className="w-screen max-w-2xl">
<Form
initialValues={{
name: "",
enabled: false,
type: "TEST",
watch_folder: "",
exec_cmd: "",
exec_args: "",
category: "",
tags: "",
label: "",
save_path: "",
paused: false,
ignore_rules: false,
limit_upload_speed: 0,
limit_download_speed: 0,
filter_id: filter.id,
client_id: null,
}}
onSubmit={onSubmit}
>
{({ handleSubmit, values }) => {
return (
<form
className="h-full flex flex-col bg-white shadow-xl overflow-y-scroll"
onSubmit={handleSubmit}
>
<div className="flex-1">
<div className="px-4 py-6 bg-gray-50 sm:px-6">
<div className="flex items-start justify-between space-x-3">
<div className="space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900">
Update action
</Dialog.Title>
<p className="text-sm text-gray-500">
Add filter action.
</p>
</div>
<div className="h-7 flex items-center">
<button
type="button"
className="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
onClick={toggle}
>
<span className="sr-only">Close panel</span>
<XIcon
className="h-6 w-6"
aria-hidden="true"
/>
</button>
</div>
</div>
</div>
<div className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
<TextFieldWide name="name" label="Action name" />
<RadioFieldsetWide
name="type"
legend="Type"
options={ActionTypeOptions}
/>
{TypeForm(values)}
</div>
</div>
<div className="flex-shrink-0 px-4 border-t border-gray-200 py-5 sm:px-6">
<div className="space-x-3 flex justify-end">
<button
type="button"
className="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
onClick={toggle}
>
Cancel
</button>
<button
type="submit"
className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Save
</button>
</div>
</div>
<DEBUG values={values} />
</form>
);
}}
</Form>
</div>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
}
export default FilterActionUpdateForm;

32
web/src/forms/filters/FilterAddForm.tsx
View file

@ -4,12 +4,12 @@ import { Filter } from "../../domain/interfaces";
import { queryClient } from "../../App";
import { XIcon } from "@heroicons/react/solid";
import { Dialog, Transition } from "@headlessui/react";
import { Field, Form } from "react-final-form";
import DEBUG from "../../components/debug";
import APIClient from "../../api/APIClient";
import { toast } from 'react-hot-toast'
import Toast from '../../components/notifications/Toast';
import { Field, FieldProps, Form, Formik } from "formik";
function FilterAddForm({ isOpen, toggle }: any) {
const mutation = useMutation((filter: Filter) => APIClient.filters.create(filter), {
@ -25,7 +25,7 @@ function FilterAddForm({ isOpen, toggle }: any) {
// console.log("render add action form")
}, []);
const onSubmit = (data: any) => {
const handleSubmit = (data: any) => {
mutation.mutate(data)
}
@ -57,7 +57,7 @@ function FilterAddForm({ isOpen, toggle }: any) {
>
<div className="w-screen max-w-2xl border-l dark:border-gray-700">
<Form
<Formik
initialValues={{
name: "",
enabled: false,
@ -66,12 +66,11 @@ function FilterAddForm({ isOpen, toggle }: any) {
sources: [],
containers: []
}}
onSubmit={handleSubmit}
validate={validate}
onSubmit={onSubmit}
>
{({ handleSubmit, values }) => {
return (
<form className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll" onSubmit={handleSubmit}>
{({ values }) => (
<Form className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll">
<div className="flex-1">
<div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6">
<div className="flex items-start justify-between space-x-3">
@ -107,20 +106,25 @@ function FilterAddForm({ isOpen, toggle }: any) {
</label>
</div>
<Field name="name">
{({ input, meta }) => (
{({
field,
meta,
}: FieldProps ) => (
<div className="sm:col-span-2">
<input
{...field}
id="name"
type="text"
{...input}
className="block w-full shadow-sm dark:bg-gray-800 border-gray-300 dark:border-gray-700 sm:text-sm dark:text-white focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 rounded-md"
/>
{meta.touched && meta.error &&
<span className="block mt-2 text-red-500">{meta.error}</span>}
</div>
)}
</Field>
</div>
</div>
</div>
@ -143,12 +147,10 @@ function FilterAddForm({ isOpen, toggle }: any) {
</div>
</div>
<DEBUG values={values} />
</form>
)
}}
</Form>
</Form>
)}
</Formik>
</div>
</Transition.Child>
</div>
</div>

2
web/src/forms/index.ts
View file

@ -1,6 +1,4 @@
export { default as FilterAddForm } from "./filters/FilterAddForm";
export { default as FilterActionAddForm } from "./filters/FilterActionAddForm";
export { default as FilterActionUpdateForm } from "./filters/FilterActionUpdateForm";
export { DownloadClientAddForm, DownloadClientUpdateForm } from "./settings/DownloadClientForms";
export { IndexerAddForm, IndexerUpdateForm } from "./settings/IndexerForms";

470
web/src/forms/settings/DownloadClientForms.tsx
View file

@ -6,20 +6,47 @@ import {
} from "../../domain/interfaces";
import { Dialog, Transition } from "@headlessui/react";
import { XIcon } from "@heroicons/react/solid";
import { classNames } from "../../styles/utils";
import { Form, useField } from "react-final-form";
import { sleep, classNames } from "../../utils";
import { Form, Formik, useFormikContext } from "formik";
import DEBUG from "../../components/debug";
import { SwitchGroup, TextFieldWide } from "../../components/inputs";
import { queryClient } from "../../App";
import APIClient from "../../api/APIClient";
import { sleep } from "../../utils/utils";
import { DownloadClientTypeOptions } from "../../domain/constants";
import { NumberFieldWide, PasswordFieldWide, RadioFieldsetWide } from "../../components/inputs/wide";
import { toast } from 'react-hot-toast'
import Toast from '../../components/notifications/Toast';
import { useToggle } from "../../hooks/hooks";
import { DeleteModal } from "../../components/modals";
import { NumberFieldWide, PasswordFieldWide, SwitchGroupWide, TextFieldWide } from "../../components/inputs/input_wide";
import { RadioFieldsetWide } from "../../components/inputs/radio";
interface InitialValuesSettings {
basic?: {
auth: boolean;
username: string;
password: string;
};
rules?: {
enabled?: boolean;
ignore_slow_torrents?: boolean;
download_speed_threshold?: number;
max_active_downloads?: number;
};
}
interface InitialValues {
name: string;
type: DOWNLOAD_CLIENT_TYPES;
enabled: boolean;
host: string;
port: number;
ssl: boolean;
username: string;
password: string;
settings: InitialValuesSettings;
}
function FormFieldsDefault() {
return (
@ -29,7 +56,7 @@ function FormFieldsDefault() {
<NumberFieldWide name="port" label="Port" />
<div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
<SwitchGroup name="ssl" label="SSL" />
<SwitchGroupWide name="ssl" label="SSL" />
</div>
<TextFieldWide name="username" label="Username" />
@ -39,7 +66,10 @@ function FormFieldsDefault() {
}
function FormFieldsArr() {
const { input } = useField("settings.basic.auth");
const {
values: { settings },
} = useFormikContext<InitialValues>();
return (
<Fragment>
<TextFieldWide name="host" label="Host" help="Full url like http(s)://domain.ltd/" />
@ -47,10 +77,10 @@ function FormFieldsArr() {
<PasswordFieldWide name="settings.apikey" label="API key" />
<div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
<SwitchGroup name="settings.basic.auth" label="Basic auth" />
<SwitchGroupWide name="settings.basic.auth" label="Basic auth" />
</div>
{input.value === true && (
{settings.basic?.auth === true && (
<Fragment>
<TextFieldWide name="settings.basic.username" label="Username" />
<PasswordFieldWide name="settings.basic.password" label="Password" />
@ -71,7 +101,9 @@ export const componentMap: any = {
function FormFieldsRulesBasic() {
const { input: enabled } = useField("settings.rules.enabled");
const {
values: { settings },
} = useFormikContext<InitialValues>();
return (
<div className="border-t border-gray-200 dark:border-gray-700 py-5">
@ -84,10 +116,10 @@ function FormFieldsRulesBasic() {
</div>
<div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
<SwitchGroup name="settings.rules.enabled" label="Enabled" />
<SwitchGroupWide name="settings.rules.enabled" label="Enabled" />
</div>
{enabled.value === true && (
{settings && settings.rules?.enabled === true && (
<Fragment>
<NumberFieldWide name="settings.rules.max_active_downloads" label="Max active downloads" />
</Fragment>
@ -97,8 +129,9 @@ function FormFieldsRulesBasic() {
}
function FormFieldsRules() {
const { input } = useField("settings.rules.ignore_slow_torrents");
const { input: enabled } = useField("settings.rules.enabled");
const {
values: { settings },
} = useFormikContext<InitialValues>();
return (
<div className="border-t border-gray-200 dark:border-gray-700 py-5">
@ -111,17 +144,17 @@ function FormFieldsRules() {
</div>
<div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
<SwitchGroup name="settings.rules.enabled" label="Enabled" />
<SwitchGroupWide name="settings.rules.enabled" label="Enabled" />
</div>
{enabled.value === true && (
{settings.rules?.enabled === true && (
<Fragment>
<NumberFieldWide name="settings.rules.max_active_downloads" label="Max active downloads" />
<div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
<SwitchGroup name="settings.rules.ignore_slow_torrents" label="Ignore slow torrents" />
<SwitchGroupWide name="settings.rules.ignore_slow_torrents" label="Ignore slow torrents" />
</div>
{input.value === true && (
{settings.rules?.ignore_slow_torrents === true && (
<Fragment>
<NumberFieldWide name="settings.rules.download_speed_threshold" label="Download speed threshold" placeholder="in KB/s" help="If download speed is below this when max active downloads is hit, download anyways. KB/s" />
</Fragment>
@ -138,6 +171,100 @@ export const rulesComponentMap: any = {
QBITTORRENT: <FormFieldsRules />,
};
interface formButtonsProps {
isSuccessfulTest: boolean;
isErrorTest: boolean;
isTesting: boolean;
cancelFn: any;
testFn: any;
values: any;
type: "CREATE" | "UPDATE";
toggleDeleteModal?: any;
}
function DownloadClientFormButtons({ type, isSuccessfulTest, isErrorTest, isTesting, cancelFn, testFn, values, toggleDeleteModal }: formButtonsProps) {
const test = () => {
testFn(values)
}
return (
<div className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
<div className={classNames(type === "CREATE" ? "justify-end" : "justify-between", "space-x-3 flex")}>
{type === "UPDATE" && (
<button
type="button"
className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
onClick={toggleDeleteModal}
>
Remove
</button>
)}
<div className="flex">
<button
type="button"
className={classNames(
isSuccessfulTest
? "text-green-500 border-green-500 bg-green-50"
: isErrorTest
? "text-red-500 border-red-500 bg-red-50"
: "border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-400 bg-white dark:bg-gray-700 hover:bg-gray-50 focus:border-rose-700 active:bg-rose-700",
isTesting ? "cursor-not-allowed" : "",
"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-indigo-500 dark:focus:ring-blue-500"
)}
disabled={isTesting}
// onClick={() => testClient(values)}
onClick={test}
>
{isTesting ? (
<svg
className="animate-spin h-5 w-5 text-green-500"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
) : isSuccessfulTest ? (
"OK!"
) : isErrorTest ? (
"ERROR"
) : (
"Test"
)}
</button>
<button
type="button"
className="mr-4 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-400 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
onClick={cancelFn}
>
Cancel
</button>
<button
type="submit"
className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
>
{type === "CREATE" ? "Create" : "Save"}
</button>
</div>
</div>
</div>
)
}
export function DownloadClientAddForm({ isOpen, toggle }: any) {
const [isTesting, setIsTesting] = useState(false);
const [isSuccessfulTest, setIsSuccessfulTest] = useState(false);
@ -197,6 +324,18 @@ export function DownloadClientAddForm({ isOpen, toggle }: any) {
testClientMutation.mutate(data);
};
let initialValues: InitialValues = {
name: "",
type: DOWNLOAD_CLIENT_TYPES.qBittorrent,
enabled: true,
host: "",
port: 10000,
ssl: false,
username: "",
password: "",
settings: {}
}
return (
<Transition.Root show={isOpen} as={Fragment}>
<Dialog
@ -220,137 +359,75 @@ export function DownloadClientAddForm({ isOpen, toggle }: any) {
leaveTo="translate-x-full"
>
<div className="w-screen max-w-2xl border-l dark:border-gray-700">
<Form
initialValues={{
name: "",
type: DOWNLOAD_CLIENT_TYPES.qBittorrent,
enabled: true,
host: "",
port: 10000,
ssl: false,
username: "",
password: "",
}}
<Formik
initialValues={initialValues}
onSubmit={onSubmit}
>
{({ handleSubmit, values }) => {
return (
<form
className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll"
onSubmit={handleSubmit}
>
<div className="flex-1">
<div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6">
<div className="flex items-start justify-between space-x-3">
<div className="space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">
Add client
</Dialog.Title>
<p className="text-sm text-gray-500 dark:text-gray-400">
Add download client.
</p>
</div>
<div className="h-7 flex items-center">
<button
type="button"
className="bg-white dark:bg-gray-800 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
onClick={toggle}
>
<span className="sr-only">Close panel</span>
<XIcon
className="h-6 w-6"
aria-hidden="true"
/>
</button>
</div>
{({ handleSubmit, values }) => (
<Form
className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll"
onSubmit={handleSubmit}
>
<div className="flex-1">
<div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6">
<div className="flex items-start justify-between space-x-3">
<div className="space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">
Add client
</Dialog.Title>
<p className="text-sm text-gray-500 dark:text-gray-400">
Add download client.
</p>
</div>
</div>
<div className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y dark:divide-gray-700">
<TextFieldWide name="name" label="Name" />
<div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200 dark:divide-gray-700">
<SwitchGroup name="enabled" label="Enabled" />
<div className="h-7 flex items-center">
<button
type="button"
className="bg-white dark:bg-gray-800 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
onClick={toggle}
>
<span className="sr-only">Close panel</span>
<XIcon
className="h-6 w-6"
aria-hidden="true"
/>
</button>
</div>
<RadioFieldsetWide
name="type"
legend="Type"
options={DownloadClientTypeOptions}
/>
<div>{componentMap[values.type]}</div>
</div>
</div>
{rulesComponentMap[values.type]}
<div className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y dark:divide-gray-700">
<TextFieldWide name="name" label="Name" />
<div className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
<div className="space-x-3 flex justify-end">
<button
type="button"
className={classNames(
isSuccessfulTest
? "text-green-500 border-green-500 bg-green-50"
: isErrorTest
? "text-red-500 border-red-500 bg-red-50"
: "border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-400 bg-white dark:bg-gray-700 hover:bg-gray-50 focus:border-rose-700 active:bg-rose-700",
isTesting ? "cursor-not-allowed" : "",
"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-indigo-500 dark:focus:ring-blue-500"
)}
disabled={isTesting}
onClick={() => testClient(values)}
>
{isTesting ? (
<svg
className="animate-spin h-5 w-5 text-green-500"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
) : isSuccessfulTest ? (
"OK!"
) : isErrorTest ? (
"ERROR"
) : (
"Test"
)}
</button>
<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-400 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
onClick={toggle}
>
Cancel
</button>
<button
type="submit"
className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
>
Create
</button>
<div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200 dark:divide-gray-700">
<SwitchGroupWide name="enabled" label="Enabled" />
</div>
</div>
<DEBUG values={values} />
</form>
);
}}
</Form>
<RadioFieldsetWide
name="type"
legend="Type"
options={DownloadClientTypeOptions}
/>
<div>{componentMap[values.type]}</div>
</div>
</div>
{rulesComponentMap[values.type]}
<DownloadClientFormButtons
type="CREATE"
isTesting={isTesting}
isSuccessfulTest={isSuccessfulTest}
isErrorTest={isErrorTest}
cancelFn={toggle}
testFn={testClient}
values={values}
/>
<DEBUG values={values} />
</Form>
)}
</Formik>
</div>
</Transition.Child>
</div>
@ -433,6 +510,19 @@ export function DownloadClientUpdateForm({ client, isOpen, toggle }: any) {
testClientMutation.mutate(data);
};
let initialValues = {
id: client.id,
name: client.name,
type: client.type,
enabled: client.enabled,
host: client.host,
port: client.port,
ssl: client.ssl,
username: client.username,
password: client.password,
settings: client.settings,
}
return (
<Transition.Root show={isOpen} as={Fragment}>
<Dialog
@ -465,24 +555,13 @@ export function DownloadClientUpdateForm({ client, isOpen, toggle }: any) {
leaveTo="translate-x-full"
>
<div className="w-screen max-w-2xl border-l dark:border-gray-700">
<Form
initialValues={{
id: client.id,
name: client.name,
type: client.type,
enabled: client.enabled,
host: client.host,
port: client.port,
ssl: client.ssl,
username: client.username,
password: client.password,
settings: client.settings,
}}
<Formik
initialValues={initialValues}
onSubmit={onSubmit}
>
{({ handleSubmit, values }) => {
return (
<form
<Form
className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll"
onSubmit={handleSubmit}
>
@ -517,7 +596,7 @@ export function DownloadClientUpdateForm({ client, isOpen, toggle }: any) {
<TextFieldWide name="name" label="Name" />
<div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
<SwitchGroup name="enabled" label="Enabled" />
<SwitchGroupWide name="enabled" label="Enabled" />
</div>
<RadioFieldsetWide
@ -532,81 +611,22 @@ export function DownloadClientUpdateForm({ client, isOpen, toggle }: any) {
{rulesComponentMap[values.type]}
<div className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
<div className="space-x-3 flex justify-between">
<button
type="button"
className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
onClick={toggleDeleteModal}
>
Remove
</button>
<div className="flex">
<button
type="button"
className={classNames(
isSuccessfulTest
? "text-green-500 border-green-500 bg-green-50"
: isErrorTest
? "text-red-500 border-red-500 bg-red-50"
: "border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-400 bg-white dark:bg-gray-700 hover:bg-gray-50 focus:border-rose-700 active:bg-rose-700",
isTesting ? "cursor-not-allowed" : "",
"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-indigo-500 dark:focus:ring-blue-500"
)}
disabled={isTesting}
onClick={() => testClient(values)}
>
{isTesting ? (
<svg
className="animate-spin h-5 w-5 text-green-500"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
) : isSuccessfulTest ? (
"OK!"
) : isErrorTest ? (
"ERROR"
) : (
"Test"
)}
</button>
<DownloadClientFormButtons
type="UPDATE"
toggleDeleteModal={toggleDeleteModal}
isTesting={isTesting}
isSuccessfulTest={isSuccessfulTest}
isErrorTest={isErrorTest}
cancelFn={toggle}
testFn={testClient}
values={values}
/>
<button
type="button"
className="mr-4 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-400 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
onClick={toggle}
>
Cancel
</button>
<button
type="submit"
className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
>
Create
</button>
</div>
</div>
</div>
<DEBUG values={values} />
</form>
</Form>
);
}}
</Form>
</Formik>
</div>
</Transition.Child>
</div>

162
web/src/forms/settings/IndexerForms.tsx
View file

@ -1,20 +1,22 @@
import React, { Fragment } from "react";
import { Fragment } from "react";
import { useMutation, useQuery } from "react-query";
import { Channel, Indexer, IndexerSchema, IndexerSchemaSettings, Network } from "../../domain/interfaces";
import { sleep } from "../../utils/utils";
import { sleep } from "../../utils";
import { XIcon } from "@heroicons/react/solid";
import { Dialog, Transition } from "@headlessui/react";
import { Field, Form } from "react-final-form";
import { Field, FieldProps, Form, Formik } from "formik";
import DEBUG from "../../components/debug";
import Select from "react-select";
import Select, { components, InputProps } from "react-select";
import { queryClient } from "../../App";
import { SwitchGroup, TextFieldWide } from "../../components/inputs";
import APIClient from "../../api/APIClient";
import { NumberFieldWide, PasswordFieldWide } from "../../components/inputs/wide";
import { TextFieldWide, PasswordFieldWide, SwitchGroupWide } from "../../components/inputs/input_wide";
import { toast } from 'react-hot-toast'
import Toast from '../../components/notifications/Toast';
import { SlideOver } from "../../components/panels";
const Input = ({ type, ...rest }: InputProps) => <components.Input {...rest} />;
interface AddProps {
isOpen: boolean;
toggle: any;
@ -44,7 +46,7 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
onSuccess: (data) => {
// console.log("irc mutation: ", data);
// queryClient.invalidateQueries(['indexer']);
// queryClient.invalidateQueries(['networks']);
// sleep(1500)
// toggle()
@ -61,24 +63,24 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
let channels: Channel[] = []
if (ind.irc.channels.length) {
ind.irc.channels.forEach(element => {
channels.push({ name: element })
channels.push({ name: element, password: "" })
});
}
const network: Network = {
name: ind.name,
enabled: false,
server: formData.irc.server,
port: formData.irc.port,
tls: formData.irc.tls,
server: ind.irc.server,
port: ind.irc.port,
tls: ind.irc.tls,
nickserv: formData.irc.nickserv,
invite_command: formData.irc.invite_command,
settings: formData.irc.settings,
channels: channels,
}
console.log("network: ", network);
// console.log("network: ", network);
// console.log("formData: ", formData);
mutation.mutate(formData, {
onSuccess: (data) => {
@ -86,7 +88,6 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
ircMutation.mutate(network)
}
})
};
const renderSettingFields = (indexer: string) => {
@ -109,7 +110,7 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
return null
})}
<div hidden={true}>
<TextFieldWide name={`name`} label="Name" defaultValue={ind?.name} />
<TextFieldWide name="name" label="Name" defaultValue={ind?.name} />
</div>
</div>
)
@ -141,11 +142,11 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
return null
})}
<div hidden={true}>
<TextFieldWide name={`irc.server`} label="Server" defaultValue={ind.irc.server} />
<NumberFieldWide name={`irc.port`} label="Port" defaultValue={ind.irc.port} />
<SwitchGroup name="irc.tls" label="TLS" defaultValue={ind.irc.tls} />
</div>
{/* <div hidden={false}>
<TextFieldWide name="irc.server" label="Server" defaultValue={ind.irc.server} />
<NumberFieldWide name="irc.port" label="Port" defaultValue={ind.irc.port} />
<SwitchGroupWide name="irc.tls" label="TLS" defaultValue={ind.irc.tls} />
</div> */}
</div>
)}
</Fragment>
@ -170,18 +171,20 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
leaveTo="translate-x-full"
>
<div className="w-screen max-w-2xl dark:border-gray-700 border-l">
<Form
<Formik
enableReinitialize={true}
initialValues={{
enabled: true,
identifier: "",
irc: {}
irc: {},
settings: {},
}}
onSubmit={onSubmit}
>
{({ handleSubmit, values }) => {
{({ values }) => {
return (
<form className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll"
onSubmit={handleSubmit}>
<Form className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll">
<div className="flex-1">
<div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6">
<div className="flex items-start justify-between space-x-3">
@ -206,11 +209,8 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
</div>
</div>
<div
className="py-6 space-y-6 py-0 space-y-0 divide-y divide-gray-200 dark:divide-gray-700">
<div
className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<div className="py-6 space-y-6 py-0 space-y-0 divide-y divide-gray-200 dark:divide-gray-700">
<div className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<div>
<label
htmlFor="identifier"
@ -220,28 +220,29 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
</label>
</div>
<div className="sm:col-span-2">
<Field
name="identifier"
parse={val => val && val.value}
format={val => data && data.find((o: any) => o.value === val)}
render={({ input, meta }) => (
<React.Fragment>
<Select {...input}
isClearable={true}
placeholder="Choose an indexer"
options={data && data.sort((a, b): any => a.name.localeCompare(b.name)).map(v => ({
label: v.name,
value: v.identifier
}))} />
</React.Fragment>
<Field name="identifier" type="select">
{({ field, form: { setFieldValue } }: FieldProps) => (
<Select {...field}
isClearable={true}
isSearchable={true}
components={{ Input }}
placeholder="Choose an indexer"
value={field?.value && field.value.value}
onChange={(option: any) => {
setFieldValue(field.name, option?.value ?? "")
}}
options={data && data.sort((a, b): any => a.name.localeCompare(b.name)).map(v => ({
label: v.name,
value: v.identifier
}))} />
)}
/>
</Field>
</div>
</div>
<div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
<SwitchGroup name="enabled" label="Enabled" />
<SwitchGroupWide name="enabled" label="Enabled" />
</div>
@ -272,10 +273,10 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
</div>
<DEBUG values={values} />
</form>
</Form>
)
}}
</Form>
</Formik>
</div>
</Transition.Child>
@ -361,45 +362,38 @@ export function IndexerUpdateForm({ isOpen, toggle, indexer }: UpdateProps) {
initialValues={initialValues}
>
{({ values }: any) => (
<>
<div
className="py-6 space-y-6 sm:py-0 sm:space-y-0 divide-y divide-gray-200 dark:divide-gray-700">
<div
className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<div>
<label
htmlFor="name"
className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2"
>
Name
</label>
</div>
<Field name="name">
{({ input, meta }) => (
<div className="sm:col-span-2">
<input
type="text"
{...input}
className="block w-full shadow-sm dark:bg-gray-800 sm:text-sm dark:text-white focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-700 rounded-md"
/>
{meta.touched && meta.error &&
<span>{meta.error}</span>}
</div>
)}
</Field>
<div className="py-6 space-y-6 sm:py-0 sm:space-y-0 divide-y divide-gray-200 dark:divide-gray-700">
<div className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<div>
<label
htmlFor="name"
className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2"
>
Name
</label>
</div>
<div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200 dark:sm:divide-gray-700">
<SwitchGroup name="enabled" label="Enabled" />
</div>
{renderSettingFields(indexer.settings)}
<Field name="name">
{({ field, meta }: FieldProps) => (
<div className="sm:col-span-2">
<input
type="text"
{...field}
className="block w-full shadow-sm dark:bg-gray-800 sm:text-sm dark:text-white focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-700 rounded-md"
/>
{meta.touched && meta.error &&
<span>{meta.error}</span>}
</div>
)}
</Field>
</div>
</>
)}
<div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200 dark:sm:divide-gray-700">
<SwitchGroupWide name="enabled" label="Enabled" />
</div>
{renderSettingFields(indexer.settings)}
</div>
)}
</SlideOver>
)
}

212
web/src/forms/settings/IrcForms.tsx
View file

@ -1,19 +1,83 @@
import { useMutation } from "react-query";
import { Network } from "../../domain/interfaces";
import { Channel, Network } from "../../domain/interfaces";
import { XIcon } from "@heroicons/react/solid";
import { Field } from "react-final-form";
import { SwitchGroup, TextFieldWide } from "../../components/inputs";
import { queryClient } from "../../App";
import arrayMutators from "final-form-arrays";
import { FieldArray } from "react-final-form-arrays";
import { Field, FieldArray, FieldProps } from "formik";
import APIClient from "../../api/APIClient";
import { NumberFieldWide, PasswordFieldWide } from "../../components/inputs/wide";
import { TextFieldWide, PasswordFieldWide, SwitchGroupWide, NumberFieldWide } from "../../components/inputs/input_wide";
import { toast } from 'react-hot-toast';
import Toast from '../../components/notifications/Toast';
import { SlideOver } from "../../components/panels";
function ChannelsFieldArray({ values }: any) {
return (
<div className="p-6">
<FieldArray name="channels">
{({ remove, push }) => (
<div className="flex flex-col border-2 border-dashed dark:border-gray-700 p-4">
{values && values.channels.length > 0 ? (
values.channels.map((_channel: Channel, index: number) => (
<div key={index} className="flex justify-between">
<div className="flex">
<Field name={`channels.${index}.name`}>
{({ field }: FieldProps) => (
<input
{...field}
type="text"
value={field.value ?? ""}
onChange={field.onChange}
placeholder="#Channel"
className="mr-4 dark:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-600 block w-full shadow-sm sm:text-sm dark:text-white rounded-md"
/>
)}
</Field>
<Field name={`channels.${index}.password`}>
{({ field }: FieldProps) => (
<input
{...field}
type="text"
value={field.value ?? ""}
onChange={field.onChange}
placeholder="Password"
className="mr-4 dark:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-600 block w-full shadow-sm sm:text-sm dark:text-white rounded-md"
/>
)}
</Field>
</div>
<button
type="button"
className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
onClick={() => remove(index)}
>
<span className="sr-only">Remove</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
))
) : (
<span className="text-center text-sm text-grey-darker dark:text-white">
No channels!
</span>
)}
<button
type="button"
className="border dark:border-gray-600 dark:bg-gray-700 my-4 px-4 py-2 text-sm text-gray-700 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-600 rounded self-center text-center"
onClick={() => push({ name: "", password: "" })}
>
Add Channel
</button>
</div>
)}
</FieldArray>
</div>
)
}
export function IrcNetworkAddForm({ isOpen, toggle }: any) {
const mutation = useMutation((network: Network) => APIClient.irc.createNetwork(network), {
onSuccess: (data) => {
@ -66,15 +130,13 @@ export function IrcNetworkAddForm({ isOpen, toggle }: any) {
name: "",
enabled: true,
server: "",
port: 6667,
tls: false,
pass: "",
nickserv: {
account: ""
}
}
const mutators = {
...arrayMutators
},
channels: [],
}
return (
@ -85,19 +147,16 @@ export function IrcNetworkAddForm({ isOpen, toggle }: any) {
toggle={toggle}
onSubmit={onSubmit}
initialValues={initialValues}
mutators={mutators}
validate={validate}
>
{() => (
{(values) => (
<>
<TextFieldWide name="name" label="Name" placeholder="Name" required={true} />
<div className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y dark:divide-gray-700">
<div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200 dark:sm:divide-gray-700">
<SwitchGroup name="enabled" label="Enabled" />
<SwitchGroupWide name="enabled" label="Enabled" />
</div>
<div>
@ -105,7 +164,7 @@ export function IrcNetworkAddForm({ isOpen, toggle }: any) {
<NumberFieldWide name="port" label="Port" placeholder="Eg 6667" required={true} />
<div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
<SwitchGroup name="tls" label="TLS" />
<SwitchGroupWide name="tls" label="TLS" />
</div>
<PasswordFieldWide name="pass" label="Password" help="Network password" />
@ -117,57 +176,7 @@ export function IrcNetworkAddForm({ isOpen, toggle }: any) {
</div>
</div>
<div className="p-6">
<FieldArray name="channels">
{({ fields }) => (
<div className="flex flex-col border-2 border-dashed dark:border-gray-700 p-4">
{fields && (fields.length as any) > 0 ? (
fields.map((name, index) => (
<div key={name} className="flex justify-between">
<div className="flex">
<Field
name={`${name}.name`}
component="input"
type="text"
placeholder="#Channel"
className="mr-4 dark:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-600 block w-full shadow-sm sm:text-sm dark:text-white rounded-md"
/>
<Field
name={`${name}.password`}
component="input"
type="text"
placeholder="Password"
className="dark:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-600 block w-full shadow-sm sm:text-sm dark:text-white rounded-md"
/>
</div>
<button
type="button"
className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
onClick={() => fields.remove(index)}
>
<span className="sr-only">Remove</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
))
) : (
<span className="text-center text-sm text-grey-darker dark:text-white">
No channels!
</span>
)}
<button
type="button"
className="border dark:border-gray-600 dark:bg-gray-700 my-4 px-4 py-2 text-sm text-gray-700 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-600 rounded self-center text-center"
onClick={() => fields.push({ name: "", password: "" })}
>
Add Channel
</button>
</div>
)}
</FieldArray>
</div>
<ChannelsFieldArray values={values} />
</>
)}
</SlideOver>
@ -193,8 +202,6 @@ export function IrcNetworkUpdateForm({ isOpen, toggle, network }: any) {
})
const onSubmit = (data: any) => {
console.log(data)
// easy way to split textarea lines into array of strings for each newline.
// parse on the field didn't really work.
// TODO fix connect_commands on network update
@ -241,14 +248,9 @@ export function IrcNetworkUpdateForm({ isOpen, toggle, network }: any) {
nickserv: network.nickserv,
pass: network.pass,
invite_command: network.invite_command,
// connect_commands: network.connect_commands,
channels: network.channels
}
const mutators = {
...arrayMutators
}
return (
<SlideOver
type="UPDATE"
@ -258,18 +260,16 @@ export function IrcNetworkUpdateForm({ isOpen, toggle, network }: any) {
onSubmit={onSubmit}
deleteAction={deleteAction}
initialValues={initialValues}
mutators={mutators}
validate={validate}
>
{() => (
{(values) => (
<>
<TextFieldWide name="name" label="Name" placeholder="Name" required={true} />
<div className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y dark:divide-gray-700">
<div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0">
<SwitchGroup name="enabled" label="Enabled" />
<SwitchGroupWide name="enabled" label="Enabled" />
</div>
<div>
@ -277,7 +277,7 @@ export function IrcNetworkUpdateForm({ isOpen, toggle, network }: any) {
<NumberFieldWide name="port" label="Port" placeholder="Eg 6667" required={true} />
<div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
<SwitchGroup name="tls" label="TLS" />
<SwitchGroupWide name="tls" label="TLS" />
</div>
<PasswordFieldWide name="pass" label="Password" help="Network password" />
@ -289,57 +289,7 @@ export function IrcNetworkUpdateForm({ isOpen, toggle, network }: any) {
</div>
</div>
<div className="p-6">
<FieldArray name="channels">
{({ fields }) => (
<div className="flex flex-col border-2 border-dashed dark:border-gray-700 p-4">
{fields && (fields.length as any) > 0 ? (
fields.map((name, index) => (
<div key={name} className="flex justify-between">
<div className="flex">
<Field
name={`${name}.name`}
component="input"
type="text"
placeholder="#Channel"
className="mr-4 dark:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-600 block w-full shadow-sm sm:text-sm dark:text-white rounded-md"
/>
<Field
name={`${name}.password`}
component="input"
type="text"
placeholder="Password"
className="dark:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-600 block w-full shadow-sm sm:text-sm dark:text-white rounded-md"
/>
</div>
<button
type="button"
className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
onClick={() => fields.remove(index)}
>
<span className="sr-only">Remove</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
))
) : (
<span className="text-center text-sm text-grey-darker dark:text-white">
No channels!
</span>
)}
<button
type="button"
className="border dark:border-gray-600 dark:bg-gray-700 my-4 px-4 py-2 text-sm text-gray-700 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-blue-500 rounded self-center text-center"
onClick={() => fields.push({ name: "", password: "" })}
>
Add Channel
</button>
</div>
)}
</FieldArray>
</div>
<ChannelsFieldArray values={values} />
</>
)}
</SlideOver>

2
web/src/screens/Dashboard.tsx
View file

@ -5,7 +5,7 @@ import { useTable, useFilters, useGlobalFilter, useSortBy, usePagination } from
import APIClient from '../api/APIClient'
import { useQuery } from 'react-query'
import { ReleaseFindResponse, ReleaseStats } from '../domain/interfaces'
import { EmptyListState } from '../components/EmptyListState'
import { EmptyListState } from '../components/emptystates'
export function Dashboard() {
return (

2
web/src/screens/Settings.tsx
View file

@ -4,7 +4,7 @@ import IndexerSettings from "./settings/Indexer";
import IrcSettings from "./settings/Irc";
import ApplicationSettings from "./settings/Application";
import DownloadClientSettings from "./settings/DownloadClient";
import {classNames} from "../styles/utils";
import {classNames} from "../utils";
import ActionSettings from "./settings/Action";
const subNavigation = [

64
web/src/screens/auth/login.tsx
View file

@ -1,12 +1,12 @@
import { useMutation } from "react-query";
import APIClient from "../../api/APIClient";
import { Form } from "react-final-form";
import { PasswordField, TextField } from "../../components/inputs";
import { Form, Formik } from "formik";
import { useRecoilState } from "recoil";
import { isLoggedIn } from "../../state/state";
import { useHistory } from "react-router-dom";
import { useEffect } from "react";
import logo from "../../logo.png"
import { TextField, PasswordField } from "../../components/inputs";
interface loginData {
username: string;
@ -32,9 +32,8 @@ function Login() {
},
})
const onSubmit = (data: any, form: any) => {
const handleSubmit = (data: any) => {
mutation.mutate(data)
form.reset()
}
return (
@ -50,51 +49,34 @@ function Login() {
<div className="sm:mx-auto sm:w-full sm:max-w-md">
<div className="bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
<Form
<Formik
initialValues={{
username: "",
password: "",
}}
onSubmit={onSubmit}
onSubmit={handleSubmit}
>
{({ handleSubmit, values }) => {
return (
<form className="space-y-6" onSubmit={handleSubmit}>
<TextField name="username" label="Username" autoComplete="username" />
<PasswordField name="password" label="password" autoComplete="current-password" />
{() => (
<Form>
{/*<div className="flex items-center justify-between">*/}
{/* <div className="flex items-center">*/}
{/* <input*/}
{/* id="remember-me"*/}
{/* name="remember-me"*/}
{/* type="checkbox"*/}
{/* className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"*/}
{/* />*/}
{/* <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900">*/}
{/* Remember me*/}
{/* </label>*/}
{/* </div>*/}
<div className="space-y-6">
{/* <div className="text-sm">*/}
{/* <a href="#" className="font-medium text-indigo-600 hover:text-indigo-500">*/}
{/* Forgot your password?*/}
{/* </a>*/}
{/* </div>*/}
{/*</div>*/}
<TextField name="username" label="Username" columns={6} autoComplete="username" />
<PasswordField name="password" label="Password" columns={6} autoComplete="current-password" />
</div>
<div>
<button
type="submit"
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
>
Sign in
</button>
</div>
</form>
)
}}
</Form>
<div className="mt-6">
<button
type="submit"
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
>
Sign in
</button>
</div>
</Form>
)}
</Formik>
</div>
</div>
</div>

115
web/src/screens/filters/details.tsx
View file

@ -1,7 +1,7 @@
import { Fragment, useRef } from "react";
import { Dialog, Transition, Switch as SwitchBasic } from "@headlessui/react";
import { ChevronDownIcon, ChevronRightIcon, ExclamationIcon, } from '@heroicons/react/solid'
import { EmptyListState } from "../../components/EmptyListState";
import { EmptyListState } from "../../components/emptystates";
import {
NavLink,
@ -17,14 +17,12 @@ import { useToggle } from "../../hooks/hooks";
import { useMutation, useQuery } from "react-query";
import { queryClient } from "../../App";
import { CONTAINER_OPTIONS, CODECS_OPTIONS, RESOLUTION_OPTIONS, SOURCES_OPTIONS, ActionTypeNameMap, ActionTypeOptions } from "../../domain/constants";
import { TextField, SwitchGroup, Select, MultiSelect, NumberField, DownloadClientSelect } from "./inputs";
import DEBUG from "../../components/debug";
import TitleSubtitle from "../../components/headings/TitleSubtitle";
import { classNames } from "../../styles/utils";
import { TitleSubtitle } from "../../components/headings";
import { buildPath, classNames } from "../../utils";
import SelectM from "react-select";
import APIClient from "../../api/APIClient";
import { buildPath } from "../../utils/utils"
import { toast } from 'react-hot-toast'
import Toast from '../../components/notifications/Toast';
@ -32,6 +30,7 @@ import Toast from '../../components/notifications/Toast';
import { Field, FieldArray, Form, Formik } from "formik";
import { AlertWarning } from "../../components/alerts";
import { DeleteModal } from "../../components/modals";
import { NumberField, TextField, SwitchGroup, Select, MultiSelect, DownloadClientSelect } from "../../components/inputs";
const tabs = [
{ name: 'General', href: '', current: true },
@ -66,93 +65,21 @@ function TabNavLink({ item, url }: any) {
)
}
const FormButtonsGroup = ({ deleteAction, reset, dirty }: any) => {
const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false)
const FormButtonsGroup = ({ values, deleteAction, reset, dirty }: any) => {
const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
const cancelButtonRef = useRef(null)
const cancelModalButtonRef = useRef(null);
return (
<div className="pt-6 divide-y divide-gray-200 dark:divide-gray-700">
<Transition.Root show={deleteModalIsOpen} as={Fragment}>
<Dialog
as="div"
static
className="fixed z-10 inset-0 overflow-y-auto"
initialFocus={cancelButtonRef}
open={deleteModalIsOpen}
onClose={toggleDeleteModal}
>
<div
className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<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-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
&#8203;
</span>
<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 bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div
className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<ExclamationIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<Dialog.Title as="h3"
className="text-lg leading-6 font-medium text-gray-900">
Remove filter
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-gray-500">
Are you sure you want to remove this filter?
This action cannot be undone.
</p>
</div>
</div>
</div>
</div>
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button
type="button"
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
onClick={deleteAction}
>
Remove
</button>
<button
type="button"
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 light:bg-white text-base font-medium text-gray-700 dark:text-red-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
onClick={toggleDeleteModal}
ref={cancelButtonRef}
>
Cancel
</button>
</div>
</div>
</Transition.Child>
</div>
</Dialog>
</Transition.Root>
<DeleteModal
isOpen={deleteModalIsOpen}
toggle={toggleDeleteModal}
buttonRef={cancelModalButtonRef}
deleteAction={deleteAction}
title={`Remove filter: ${values.name}`}
text="Are you sure you want to remove this filter? This action cannot be undone."
/>
<div className="mt-4 pt-4 flex justify-between">
<button
@ -234,8 +161,6 @@ export default function FilterDetails() {
}
const handleSubmit = (data: any) => {
console.log("submit other");
updateMutation.mutate(data)
}
@ -329,7 +254,7 @@ export default function FilterDetails() {
}}
onSubmit={handleSubmit}
>
{({ isSubmitting, values, dirty, resetForm }) => (
{({ values, dirty, resetForm }) => (
<Form>
<RouteSwitch>
<Route exact path={url}>
@ -349,7 +274,7 @@ export default function FilterDetails() {
</Route>
</RouteSwitch>
<FormButtonsGroup deleteAction={deleteAction} dirty={dirty} reset={resetForm} />
<FormButtonsGroup values={values} deleteAction={deleteAction} dirty={dirty} reset={resetForm} />
<DEBUG values={values} />
</Form>
@ -424,7 +349,7 @@ function General({ indexers }: GeneralProps) {
<div className="mt-6 grid grid-cols-12 gap-6">
<TextField name="min_size" label="Min size" columns={6} placeholder="" />
<TextField name="max_size" label="Max size" columns={6} placeholder="" />
<TextField name="delay" label="Delay" columns={6} placeholder="" />
<NumberField name="delay" label="Delay" placeholder="" />
</div>
</div>
@ -665,8 +590,8 @@ function FilterActions({ filter, values }: FilterActionsProps) {
<div className="light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
{values.actions.length > 0 ?
<ul className="divide-y divide-gray-200 dark:divide-gray-700">
{values.actions.map((action: any, index: any) => (
<FilterActionsItem action={action} clients={data!} idx={index} remove={remove} />
{values.actions.map((action: any, index: number) => (
<FilterActionsItem action={action} clients={data!} idx={index} remove={remove} key={index} />
))}
</ul>
: <EmptyListState text="No actions yet!" />

109
web/src/screens/filters/inputs/DownloadClientSelect.tsx
View file

@ -1,109 +0,0 @@
import { Fragment } from "react";
import { Transition, Listbox } from "@headlessui/react";
import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';
import { Action, DownloadClient } from "../../../domain/interfaces";
import { classNames } from "../../../styles/utils";
import { Field } from "formik";
interface DownloadClientSelectProps {
name: string;
action: Action;
clients: DownloadClient[];
}
export default function DownloadClientSelect({
name, action, clients,
}: DownloadClientSelectProps) {
return (
<div className="col-span-6 sm:col-span-6">
<Field name={name} type="select">
{({
field,
form: { setFieldValue },
}: any) => (
<Listbox
value={field.value}
onChange={(value: any) => setFieldValue(field?.name, value)}
>
{({ open }) => (
<>
<Listbox.Label className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
Client
</Listbox.Label>
<div className="mt-2 relative">
<Listbox.Button className="bg-white dark:bg-gray-800 relative w-full border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 dark:text-gray-200 sm:text-sm">
<span className="block truncate">
{field.value
? clients.find((c) => c.id === field.value)!.name
: "Choose a client"}
</span>
{/*<span className="block truncate">Choose a client</span>*/}
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon
className="h-5 w-5 text-gray-400 dark:text-gray-300"
aria-hidden="true" />
</span>
</Listbox.Button>
<Transition
show={open}
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options
static
className="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
>
{clients
.filter((c) => c.type === action.type)
.map((client: any) => (
<Listbox.Option
key={client.id}
className={({ active }) => classNames(
active
? "text-white dark:text-gray-100 bg-indigo-600 dark:bg-gray-800"
: "text-gray-900 dark:text-gray-300",
"cursor-default select-none relative py-2 pl-3 pr-9"
)}
value={client.id}
>
{({ selected, active }) => (
<>
<span
className={classNames(
selected ? "font-semibold" : "font-normal",
"block truncate"
)}
>
{client.name}
</span>
{selected ? (
<span
className={classNames(
active ? "text-white dark:text-gray-100" : "text-indigo-600 dark:text-gray-700",
"absolute inset-y-0 right-0 flex items-center pr-4"
)}
>
<CheckIcon
className="h-5 w-5"
aria-hidden="true" />
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
)}
</Field>
</div>
);
}

56
web/src/screens/filters/inputs/MultiSelect.tsx
View file

@ -1,56 +0,0 @@
import React from "react";
import { MultiSelect as RMSC} from "react-multi-select-component";
import { Field } from "formik";
import { classNames, COL_WIDTHS } from "../../../styles/utils";
interface Props {
label?: string;
options?: [] | any;
name: string;
className?: string;
columns?: COL_WIDTHS;
}
const MultiSelect: React.FC<Props> = ({
name,
label,
options,
className,
columns
}) => (
<div
className={classNames(
columns ? `col-span-${columns}` : "col-span-12"
)}
>
<label
className="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase dark:text-gray-200"
htmlFor={label}
>
{label}
</label>
<Field name={name} type="select" multiple={true}>
{({
field,
form: { setFieldValue },
}: any) => (
<RMSC
{...field}
type="select"
options={options}
labelledBy={name}
value={field.value && field.value.map((item: any) => options.find((o: any) => o.value === item))}
onChange={(values: any) => {
let am = values && values.map((i: any) => i.value)
setFieldValue(field.name, am)
}}
className="dark:bg-gray-700"
/>
)}
</Field>
</div>
);
export default MultiSelect;

52
web/src/screens/filters/inputs/NumberField.tsx
View file

@ -1,52 +0,0 @@
import React from "react";
import { Field } from "formik";
import { classNames } from "../../../styles/utils";
interface Props {
name: string;
label?: string;
placeholder?: string;
className?: string;
required?: boolean;
}
const NumberField: React.FC<Props> = ({
name,
label,
placeholder,
required,
className,
}) => (
<div className="col-span-12 sm:col-span-6">
<label htmlFor={name} className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
{label}
</label>
<Field name={name} type="number">
{({
field,
meta,
}: any) => (
<div className="sm:col-span-2">
<input
type="number"
{...field}
className={classNames(
meta.touched && meta.error
? "focus:ring-red-500 focus:border-red-500 border-red-500"
: "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300",
"mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-sm dark:text-gray-100 sm:text-sm rounded-md"
)}
placeholder={placeholder}
/>
{meta.touched && meta.error && (
<div className="error">{meta.error}</div>
)}
</div>
)}
</Field>
</div>
);
export default NumberField;

116
web/src/screens/filters/inputs/Select.tsx
View file

@ -1,116 +0,0 @@
import { Fragment } from "react";
import { Field } from "formik";
import { Listbox, Transition } from "@headlessui/react";
import { CheckIcon, SelectorIcon } from "@heroicons/react/solid";
import { classNames } from "../../../styles/utils";
interface Option {
label: string;
value: string;
}
interface props {
name: string;
label: string;
optionDefaultText: string;
options: Option[];
}
function Select({ name, label, optionDefaultText, options }: props) {
return (
<div className="col-span-6">
<Field name={name} type="select">
{({
field,
form: { setFieldValue },
}: any) => (
<Listbox
value={field.value}
onChange={(value: any) => setFieldValue(field?.name, value)}
>
{({ open }) => (
<>
<Listbox.Label className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
{label}
</Listbox.Label>
<div className="mt-2 relative">
<Listbox.Button className="bg-white dark:bg-gray-800 relative w-full border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 dark:text-gray-200 sm:text-sm">
<span className="block truncate">
{field.value
? options.find((c) => c.value === field.value)!.label
: optionDefaultText
}
</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon
className="h-5 w-5 text-gray-400 dark:text-gray-300"
aria-hidden="true"
/>
</span>
</Listbox.Button>
<Transition
show={open}
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options
static
className="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
>
{options.map((opt) => (
<Listbox.Option
key={opt.value}
className={({ active }) =>
classNames(
active
? "text-white dark:text-gray-100 bg-indigo-600 dark:bg-gray-800"
: "text-gray-900 dark:text-gray-300",
"cursor-default select-none relative py-2 pl-3 pr-9"
)
}
value={opt.value}
>
{({ selected, active }) => (
<>
<span
className={classNames(
selected ? "font-semibold" : "font-normal",
"block truncate"
)}
>
{opt.label}
</span>
{selected ? (
<span
className={classNames(
active ? "text-white dark:text-gray-100" : "text-indigo-600 dark:text-gray-700",
"absolute inset-y-0 right-0 flex items-center pr-4"
)}
>
<CheckIcon
className="h-5 w-5"
aria-hidden="true"
/>
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
)}
</Field>
</div>
);
}
export default Select;

60
web/src/screens/filters/inputs/Switch.tsx
View file

@ -1,60 +0,0 @@
import React, { InputHTMLAttributes } from 'react'
import { Switch as HeadlessSwitch } from '@headlessui/react'
import { FieldInputProps, FieldMetaProps, FieldProps, FormikProps, FormikValues } from 'formik'
import { classNames } from "../../../styles/utils";
type SwitchProps<V = any> = {
label: string
checked: boolean
disabled?: boolean
onChange: (value: boolean) => void
field?: FieldInputProps<V>
form?: FormikProps<FormikValues>
meta?: FieldMetaProps<V>
}
export const Switch: React.FC<SwitchProps> = ({
label,
checked: $checked,
disabled = false,
onChange: $onChange,
field,
form,
}) => {
const checked = field?.checked ?? $checked
return (
<HeadlessSwitch.Group as="div" className="flex items-center space-x-4">
<HeadlessSwitch.Label>{label}</HeadlessSwitch.Label>
<HeadlessSwitch
as="button"
name={field?.name}
disabled={disabled}
checked={checked}
onChange={value => {
form?.setFieldValue(field?.name ?? '', value)
$onChange && $onChange(value)
}}
className={classNames(
checked ? 'bg-teal-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-gray-600',
'ml-4 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
)}
>
{({ checked }) => (
<span
aria-hidden="true"
className={classNames(
checked ? 'translate-x-5' : 'translate-x-0',
'inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
)}
/>
)}
</HeadlessSwitch>
</HeadlessSwitch.Group>
)
}
export type SwitchFormikProps = SwitchProps & FieldProps & InputHTMLAttributes<HTMLInputElement>
export const SwitchFormik: React.FC<SwitchProps> = args => <Switch {...args} />

51
web/src/screens/filters/inputs/TextField.tsx
View file

@ -1,51 +0,0 @@
import React from "react";
import { Field } from "formik";
import { classNames } from "../../../styles/utils";
type COL_WIDTHS = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
interface Props {
name: string;
label?: string;
placeholder?: string;
columns?: COL_WIDTHS;
className?: string;
autoComplete?: string;
}
const TextField: React.FC<Props> = ({ name, label, placeholder, columns, className, autoComplete }) => (
<div
className={classNames(
columns ? `col-span-${columns}` : "col-span-12"
)}
>
{label && (
<label htmlFor={name} className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
{label}
</label>
)}
<Field name={name}>
{({
field,
meta,
}: any) => (
<div>
<input
{...field}
id={name}
type="text"
autoComplete={autoComplete}
className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
placeholder={placeholder}
/>
{meta.touched && meta.error && (
<div className="error">{meta.error}</div>
)}
</div>
)}
</Field>
</div>
)
export default TextField;

7
web/src/screens/filters/inputs/index.ts
View file

@ -1,7 +0,0 @@
export { default as DownloadClientSelect } from "./DownloadClientSelect";
export { default as TextField } from "./TextField";
export { default as Select } from "./Select";
export { default as SwitchGroup } from "./SwitchGroup";
export { default as MultiSelect } from "./MultiSelect";
export { default as NumberField } from "./NumberField";
export { Switch } from "./Switch";

4
web/src/screens/filters/list.tsx
View file

@ -1,6 +1,6 @@
import { useState } from "react";
import { Switch } from "@headlessui/react";
import { EmptyListState } from "../../components/EmptyListState";
import { EmptyListState } from "../../components/emptystates";
import {
Link,
@ -8,7 +8,7 @@ import {
import { Filter } from "../../domain/interfaces";
import { useToggle } from "../../hooks/hooks";
import { useQuery } from "react-query";
import { classNames } from "../../styles/utils";
import { classNames } from "../../utils";
import { FilterAddForm } from "../../forms";
import APIClient from "../../api/APIClient";

96
web/src/screens/settings/Application.tsx
View file

@ -1,17 +1,17 @@
import React, {useState} from "react";
import {Switch} from "@headlessui/react";
import { classNames } from "../../styles/utils";
import React, { useState } from "react";
import { Switch } from "@headlessui/react";
import { classNames } from "../../utils";
// import {useRecoilState} from "recoil";
// import {configState} from "../../state/state";
import {useQuery} from "react-query";
import {Config} from "../../domain/interfaces";
import { useQuery } from "react-query";
import { Config } from "../../domain/interfaces";
import APIClient from "../../api/APIClient";
function ApplicationSettings() {
const [isDebug, setIsDebug] = useState(true)
// const [config] = useRecoilState(configState)
const {isLoading, data} = useQuery<Config, Error>(['config'], () => APIClient.config.get(),
const { isLoading, data } = useQuery<Config, Error>(['config'], () => APIClient.config.get(),
{
retry: false,
refetchOnWindowFocus: false,
@ -33,49 +33,49 @@ function ApplicationSettings() {
{!isLoading && data && (
<div className="mt-6 grid grid-cols-12 gap-6">
<div className="col-span-6 sm:col-span-4">
<label htmlFor="host" className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
Host
</label>
<input
type="text"
name="host"
id="host"
value={data.host}
disabled={true}
className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
/>
</div>
<div className="mt-6 grid grid-cols-12 gap-6">
<div className="col-span-6 sm:col-span-4">
<label htmlFor="host" className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
Host
</label>
<input
type="text"
name="host"
id="host"
value={data.host}
disabled={true}
className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
/>
</div>
<div className="col-span-6 sm:col-span-4">
<label htmlFor="port" className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
Port
</label>
<input
type="text"
name="port"
id="port"
value={data.port}
disabled={true}
className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
/>
</div>
<div className="col-span-6 sm:col-span-4">
<label htmlFor="port" className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
Port
</label>
<input
type="text"
name="port"
id="port"
value={data.port}
disabled={true}
className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
/>
</div>
<div className="col-span-6 sm:col-span-4">
<label htmlFor="base_url" className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
Base url
</label>
<input
type="text"
name="base_url"
id="base_url"
value={data.base_url}
disabled={true}
className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
/>
<div className="col-span-6 sm:col-span-4">
<label htmlFor="base_url" className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
Base url
</label>
<input
type="text"
name="base_url"
id="base_url"
value={data.base_url}
disabled={true}
className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
/>
</div>
</div>
</div>
)}
</div>
@ -84,8 +84,7 @@ function ApplicationSettings() {
<ul className="mt-2 divide-y divide-gray-200">
<Switch.Group as="li" className="py-4 flex items-center justify-between">
<div className="flex flex-col">
<Switch.Label as="p" className="text-sm font-medium text-gray-900 dark:text-white"
passive>
<Switch.Label as="p" className="text-sm font-medium text-gray-900 dark:text-white" passive>
Debug
</Switch.Label>
<Switch.Description className="text-sm text-gray-500 dark:text-gray-400">
@ -94,6 +93,7 @@ function ApplicationSettings() {
</div>
<Switch
checked={isDebug}
disabled={true}
onChange={setIsDebug}
className={classNames(
isDebug ? 'bg-teal-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-gray-700',

19
web/src/screens/settings/DownloadClient.tsx
View file

@ -2,25 +2,24 @@ import { DownloadClient } from "../../domain/interfaces";
import { useToggle } from "../../hooks/hooks";
import { Switch } from "@headlessui/react";
import { useQuery } from "react-query";
import { classNames } from "../../styles/utils";
import { classNames } from "../../utils";
import { DownloadClientAddForm, DownloadClientUpdateForm } from "../../forms";
import EmptySimple from "../../components/empty/EmptySimple";
import { EmptySimple } from "../../components/emptystates";
import APIClient from "../../api/APIClient";
import { DownloadClientTypeNameMap } from "../../domain/constants";
interface DownloadLClientSettingsListItemProps {
interface DLSettingsItemProps {
client: DownloadClient;
idx: number;
}
function DownloadClientSettingsListItem({ client, idx }: DownloadLClientSettingsListItemProps) {
function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
const [updateClientIsOpen, toggleUpdateClient] = useToggle(false)
return (
<tr key={client.name} className={idx % 2 === 0 ? 'light:bg-white' : 'light:bg-gray-50'}>
{updateClientIsOpen &&
<DownloadClientUpdateForm client={client} isOpen={updateClientIsOpen} toggle={toggleUpdateClient} />
}
<DownloadClientUpdateForm client={client} isOpen={updateClientIsOpen} toggle={toggleUpdateClient} />
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<Switch
checked={client.enabled}
@ -65,9 +64,7 @@ function DownloadClientSettings() {
return (
<div className="divide-y divide-gray-200 lg:col-span-9">
{addClientIsOpen &&
<DownloadClientAddForm isOpen={addClientIsOpen} toggle={toggleAddClient} />
}
<DownloadClientAddForm isOpen={addClientIsOpen} toggle={toggleAddClient} />
<div className="py-6 px-4 sm:p-6 lg:pb-8">
<div className="-ml-4 -mt-4 flex justify-between items-center flex-wrap sm:flex-nowrap">
@ -137,8 +134,6 @@ function DownloadClientSettings() {
: <EmptySimple title="No download clients" subtitle="Add a new client" buttonText="New client" buttonAction={toggleAddClient} />
}
</div>
</div>
</div>

4
web/src/screens/settings/Indexer.tsx
View file

@ -4,8 +4,8 @@ import { useQuery } from "react-query";
import { IndexerAddForm, IndexerUpdateForm } from "../../forms";
import { Indexer } from "../../domain/interfaces";
import { Switch } from "@headlessui/react";
import { classNames } from "../../styles/utils";
import EmptySimple from "../../components/empty/EmptySimple";
import { classNames } from "../../utils";
import { EmptySimple } from "../../components/emptystates";
import APIClient from "../../api/APIClient";
const ListItem = ({ indexer }: any) => {

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

@ -3,8 +3,8 @@ import { IrcNetworkAddForm, IrcNetworkUpdateForm } from "../../forms";
import { useToggle } from "../../hooks/hooks";
import { useQuery } from "react-query";
import { Switch } from "@headlessui/react";
import { classNames } from "../../styles/utils";
import EmptySimple from "../../components/empty/EmptySimple";
import { classNames } from "../../utils";
import { EmptySimple } from "../../components/emptystates";
import APIClient from "../../api/APIClient";
interface IrcNetwork {

7
web/src/styles/utils.ts
View file

@ -1,7 +0,0 @@
// concatenate classes
export function classNames(...classes: string[]) {
return classes.filter(Boolean).join(' ')
}
// column widths for inputs etc
export type COL_WIDTHS = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;

7
web/src/utils/utils.ts → web/src/utils/index.ts
View file

@ -50,3 +50,10 @@ export function buildPath(...args: string[]): string {
return firstTrimmed === '/' ? `/${result}` : result;
}
export function classNames(...classes: string[]) {
return classes.filter(Boolean).join(' ')
}
// column widths for inputs etc
export type COL_WIDTHS = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;

61
web/yarn.lock
View file

@ -1165,13 +1165,20 @@
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
version "7.16.3"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.12.0", "@babel/runtime@^7.13.10", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
version "7.16.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.5.tgz#7f3e34bf8bdbbadf03fbb7b1ea0d929569c9487a"
integrity sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==
dependencies:
regenerator-runtime "^0.13.4"
"@babel/template@^7.10.4", "@babel/template@^7.16.0", "@babel/template@^7.3.3":
version "7.16.0"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.0.tgz#d16a35ebf4cd74e202083356fab21dd89363ddd6"
@ -1238,16 +1245,16 @@
resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
"@emotion/cache@^11.4.0", "@emotion/cache@^11.6.0":
version "11.6.0"
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.6.0.tgz#65fbdbbe4382f1991d8b20853c38e63ecccec9a1"
integrity sha512-ElbsWY1KMwEowkv42vGo0UPuLgtPYfIs9BxxVrmvsaJVvktknsHYYlx5NQ5g6zLDcOTyamlDc7FkRg2TAcQDKQ==
"@emotion/cache@^11.4.0", "@emotion/cache@^11.7.1":
version "11.7.1"
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.7.1.tgz#08d080e396a42e0037848214e8aa7bf879065539"
integrity sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==
dependencies:
"@emotion/memoize" "^0.7.4"
"@emotion/sheet" "^1.1.0"
"@emotion/utils" "^1.0.0"
"@emotion/weak-memoize" "^0.2.5"
stylis "^4.0.10"
stylis "4.0.13"
"@emotion/hash@^0.8.0":
version "0.8.0"
@ -1260,12 +1267,12 @@
integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
"@emotion/react@^11.1.1":
version "11.6.0"
resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.6.0.tgz#61fcb95c1e01255734c2c721cb9beabcf521eb0f"
integrity sha512-23MnRZFBN9+D1lHXC5pD6z4X9yhPxxtHr6f+iTGz6Fv6Rda0GdefPrsHL7otsEf+//7uqCdT5QtHeRxHCERzuw==
version "11.7.1"
resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.7.1.tgz#3f800ce9b20317c13e77b8489ac4a0b922b2fe07"
integrity sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw==
dependencies:
"@babel/runtime" "^7.13.10"
"@emotion/cache" "^11.6.0"
"@emotion/cache" "^11.7.1"
"@emotion/serialize" "^1.0.2"
"@emotion/sheet" "^1.1.0"
"@emotion/utils" "^1.0.0"
@ -5318,18 +5325,6 @@ fill-range@^7.0.1:
dependencies:
to-regex-range "^5.0.1"
final-form-arrays@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/final-form-arrays/-/final-form-arrays-3.0.2.tgz#9f3bef778dec61432357744eb6f3abef7e7f3847"
integrity sha512-TfO8aZNz3RrsZCDx8GHMQcyztDNpGxSSi9w4wpSNKlmv2PfFWVVM8P7Yj5tj4n0OWax+x5YwTLhT5BnqSlCi+w==
final-form@^4.20.2:
version "4.20.4"
resolved "https://registry.yarnpkg.com/final-form/-/final-form-4.20.4.tgz#8d59e36d3248a227265cc731d76c0564dd2606f6"
integrity sha512-hyoOVVilPLpkTvgi+FSJkFZrh0Yhy4BhE6lk/NiBwrF4aRV8/ykKEyXYvQH/pfUbRkOosvpESYouFb+FscsLrw==
dependencies:
"@babel/runtime" "^7.10.0"
finalhandler@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
@ -9681,20 +9676,6 @@ react-fast-compare@^2.0.1:
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
react-final-form-arrays@^3.1.3:
version "3.1.3"
resolved "https://registry.yarnpkg.com/react-final-form-arrays/-/react-final-form-arrays-3.1.3.tgz#d3594c500495a4cf5e437070ada989da9624bba2"
integrity sha512-dzBiLfbr9l1YRExARBpJ8uA/djBenCvFrbrsXjd362joDl3vT+WhmMKKr6HDQMJffjA8T4gZ3n5+G9M59yZfuQ==
dependencies:
"@babel/runtime" "^7.12.1"
react-final-form@^6.5.3:
version "6.5.7"
resolved "https://registry.yarnpkg.com/react-final-form/-/react-final-form-6.5.7.tgz#0c1098accf0f0011adee5a46076ed1b99ed1b1ea"
integrity sha512-o7tvJXB+McGiXOILqIC8lnOcX4aLhIBiF/Xi9Qet35b7XOS8R7KL8HLRKTfnZWQJm6MCE15v1U0SFive0NcxyA==
dependencies:
"@babel/runtime" "^7.15.4"
react-hot-toast@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.1.1.tgz#56409ab406b534e9e58274cf98d80355ba0fdda0"
@ -11015,10 +10996,10 @@ stylehacks@^4.0.0:
postcss "^7.0.0"
postcss-selector-parser "^3.0.0"
stylis@^4.0.10:
version "4.0.10"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
stylis@4.0.13:
version "4.0.13"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
supports-color@^5.3.0, supports-color@^5.4.0:
version "5.5.0"