refactor: remove read-only mode from volume form
This commit is contained in:
parent
ae8277ab23
commit
8b796cfec2
5 changed files with 17 additions and 30 deletions
|
|
@ -72,15 +72,7 @@ const defaultValuesForType = {
|
|||
sftp: { backend: "sftp" as const, port: 22, path: "/", skipHostKeyCheck: false },
|
||||
};
|
||||
|
||||
export const CreateVolumeForm = ({
|
||||
onSubmit,
|
||||
mode = "create",
|
||||
initialValues,
|
||||
formId,
|
||||
loading,
|
||||
className,
|
||||
readOnly = false,
|
||||
}: Props) => {
|
||||
export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, formId, loading, className }: Props) => {
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema, undefined, { raw: true }),
|
||||
defaultValues: initialValues || {
|
||||
|
|
@ -146,7 +138,7 @@ export const CreateVolumeForm = ({
|
|||
onSubmit={form.handleSubmit(onSubmit, scrollToFirstError)}
|
||||
className={cn("space-y-4", className)}
|
||||
>
|
||||
<fieldset disabled={readOnly} className="space-y-4">
|
||||
<fieldset className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
|
|
@ -169,7 +161,6 @@ export const CreateVolumeForm = ({
|
|||
<FormItem>
|
||||
<FormLabel>Backend</FormLabel>
|
||||
<Select
|
||||
disabled={readOnly}
|
||||
onValueChange={(value) => {
|
||||
field.onChange(value);
|
||||
if (mode === "create") {
|
||||
|
|
@ -259,13 +250,13 @@ export const CreateVolumeForm = ({
|
|||
)}
|
||||
/>
|
||||
{watchedBackend === "directory" && <DirectoryForm form={form} />}
|
||||
{watchedBackend === "nfs" && <NFSForm form={form} readOnly={readOnly} />}
|
||||
{watchedBackend === "nfs" && <NFSForm form={form} />}
|
||||
{watchedBackend === "webdav" && <WebDAVForm form={form} />}
|
||||
{watchedBackend === "smb" && <SMBForm form={form} readOnly={readOnly} />}
|
||||
{watchedBackend === "rclone" && <RcloneForm form={form} readOnly={readOnly} />}
|
||||
{watchedBackend === "sftp" && <SFTPForm form={form} readOnly={readOnly} />}
|
||||
{watchedBackend === "smb" && <SMBForm form={form} />}
|
||||
{watchedBackend === "rclone" && <RcloneForm form={form} />}
|
||||
{watchedBackend === "sftp" && <SFTPForm form={form} />}
|
||||
</fieldset>
|
||||
{!readOnly && watchedBackend && watchedBackend !== "directory" && watchedBackend !== "rclone" && (
|
||||
{watchedBackend && watchedBackend !== "directory" && watchedBackend !== "rclone" && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
|
|
@ -304,7 +295,7 @@ export const CreateVolumeForm = ({
|
|||
)}
|
||||
</div>
|
||||
)}
|
||||
{!readOnly && mode === "update" && !formId && (
|
||||
{mode === "update" && !formId && (
|
||||
<Button type="submit" className="w-full" loading={loading}>
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
Save changes
|
||||
|
|
|
|||
|
|
@ -13,10 +13,9 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
|
|||
|
||||
type Props = {
|
||||
form: UseFormReturn<FormValues>;
|
||||
readOnly?: boolean;
|
||||
};
|
||||
|
||||
export const NFSForm = ({ form, readOnly = false }: Props) => {
|
||||
export const NFSForm = ({ form }: Props) => {
|
||||
return (
|
||||
<>
|
||||
<FormField
|
||||
|
|
@ -74,7 +73,7 @@ export const NFSForm = ({ form, readOnly = false }: Props) => {
|
|||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Version</FormLabel>
|
||||
<Select disabled={readOnly} onValueChange={field.onChange} value={field.value}>
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select NFS version" />
|
||||
|
|
|
|||
|
|
@ -18,10 +18,9 @@ import { useQuery } from "@tanstack/react-query";
|
|||
|
||||
type Props = {
|
||||
form: UseFormReturn<FormValues>;
|
||||
readOnly?: boolean;
|
||||
};
|
||||
|
||||
export const RcloneForm = ({ form, readOnly = false }: Props) => {
|
||||
export const RcloneForm = ({ form }: Props) => {
|
||||
const { capabilities } = useSystemInfo();
|
||||
|
||||
const { data: rcloneRemotes, isPending } = useQuery({
|
||||
|
|
@ -29,7 +28,7 @@ export const RcloneForm = ({ form, readOnly = false }: Props) => {
|
|||
enabled: capabilities.rclone,
|
||||
});
|
||||
|
||||
if (!readOnly && !isPending && !rcloneRemotes?.length) {
|
||||
if (!isPending && !rcloneRemotes?.length) {
|
||||
return (
|
||||
<Alert>
|
||||
<AlertDescription className="space-y-2">
|
||||
|
|
@ -59,7 +58,7 @@ export const RcloneForm = ({ form, readOnly = false }: Props) => {
|
|||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Remote</FormLabel>
|
||||
<Select disabled={readOnly} onValueChange={(v) => field.onChange(v)} value={field.value ?? ""}>
|
||||
<Select onValueChange={(v) => field.onChange(v)} value={field.value ?? ""}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select an rclone remote" />
|
||||
|
|
|
|||
|
|
@ -15,10 +15,9 @@ import { Switch } from "../../../../components/ui/switch";
|
|||
|
||||
type Props = {
|
||||
form: UseFormReturn<FormValues>;
|
||||
readOnly?: boolean;
|
||||
};
|
||||
|
||||
export const SFTPForm = ({ form, readOnly = false }: Props) => {
|
||||
export const SFTPForm = ({ form }: Props) => {
|
||||
const skipHostKeyCheck = useWatch({ control: form.control, name: "skipHostKeyCheck" });
|
||||
|
||||
return (
|
||||
|
|
@ -130,7 +129,7 @@ export const SFTPForm = ({ form, readOnly = false }: Props) => {
|
|||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch checked={field.value} disabled={readOnly} onCheckedChange={field.onChange} />
|
||||
<Switch checked={field.value} onCheckedChange={field.onChange} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -14,10 +14,9 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
|
|||
|
||||
type Props = {
|
||||
form: UseFormReturn<FormValues>;
|
||||
readOnly?: boolean;
|
||||
};
|
||||
|
||||
export const SMBForm = ({ form, readOnly = false }: Props) => {
|
||||
export const SMBForm = ({ form }: Props) => {
|
||||
const guest = useWatch({ control: form.control, name: "guest" });
|
||||
|
||||
return (
|
||||
|
|
@ -117,7 +116,7 @@ export const SMBForm = ({ form, readOnly = false }: Props) => {
|
|||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>SMB Version</FormLabel>
|
||||
<Select disabled={readOnly} onValueChange={field.onChange} value={field.value}>
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select SMB version" />
|
||||
|
|
|
|||
Loading…
Reference in a new issue