Add resets on forms

Fix #164

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Jonathan
2025-07-08 15:18:31 +02:00
committed by Sacha Al Himdani
parent f114f3bc4a
commit 1240d2bb2e
9 changed files with 77 additions and 65 deletions

View File

@@ -34,7 +34,10 @@ export function InviteUserDialog({ children }: PropsWithChildren) {
successMessage: __("User invited successfully"),
errorMessage: __("Failed to invite user"),
});
const { register, handleSubmit, formState } = useFormWithSchema(schema, {});
const { register, handleSubmit, formState, reset } = useFormWithSchema(
schema,
{},
);
const dialogRef = useDialogRef();
@@ -48,6 +51,7 @@ export function InviteUserDialog({ children }: PropsWithChildren) {
},
},
onSuccess: () => {
reset();
dialogRef.current?.close();
},
});

View File

@@ -103,9 +103,8 @@ export default function TaskFormDialog(props: Props) {
errorMessage: __("Failed to create task. Please try again."),
});
const { control, handleSubmit, register, formState } = useFormWithSchema(
schema,
{
const { control, handleSubmit, register, formState, reset } =
useFormWithSchema(schema, {
defaultValues: {
name: task?.name ?? "",
description: task?.description ?? "",
@@ -114,8 +113,7 @@ export default function TaskFormDialog(props: Props) {
measureId: task?.measure?.id ?? props.measureId ?? "",
deadline: task?.deadline?.split("T")[0] ?? null,
},
}
);
});
const onSubmit = handleSubmit(async (data) => {
if (task) {
@@ -145,6 +143,7 @@ export default function TaskFormDialog(props: Props) {
connections: [props.connection!],
},
});
reset();
}
dialogRef.current?.close();
});

View File

@@ -34,7 +34,7 @@ export default function RegisterPage() {
},
credentials: "include",
body: JSON.stringify(data),
}
},
);
// Registration failed

View File

@@ -32,18 +32,23 @@ type Props = {
organizationId: string;
};
export function CreateAssetDialog({ children, connection, organizationId }: Props) {
export function CreateAssetDialog({
children,
connection,
organizationId,
}: Props) {
const { __ } = useTranslate();
const { control, handleSubmit, register, formState } = useFormWithSchema(schema, {
defaultValues: {
name: "",
amount: 0,
criticity: "LOW",
assetType: "VIRTUAL",
ownerId: "",
vendorIds: [],
},
});
const { control, handleSubmit, register, formState, reset } =
useFormWithSchema(schema, {
defaultValues: {
name: "",
amount: 0,
criticity: "LOW",
assetType: "VIRTUAL",
ownerId: "",
vendorIds: [],
},
});
const ref = useDialogRef();
const createAsset = useCreateAsset(connection);
@@ -54,6 +59,7 @@ export function CreateAssetDialog({ children, connection, organizationId }: Prop
organizationId,
});
ref.current?.close();
reset();
} catch (error) {
console.error("Failed to create asset:", error);
}
@@ -67,11 +73,7 @@ export function CreateAssetDialog({ children, connection, organizationId }: Prop
>
<form onSubmit={onSubmit} className="space-y-4">
<DialogContent padded className="space-y-4">
<Field
label={__("Name")}
{...register("name")}
type="text"
/>
<Field label={__("Name")} {...register("name")} type="text" />
<Field
label={__("Amount")}
{...register("amount", { valueAsNumber: true })}

View File

@@ -25,6 +25,7 @@ import { PeopleSelectField } from "/components/form/PeopleSelectField";
import { VendorsMultiSelectField } from "/components/form/VendorsMultiSelectField";
import { useFormWithSchema } from "/hooks/useFormWithSchema";
import z from "zod";
import type { DatumGraphNodeQuery } from "/hooks/graph/__generated__/DatumGraphNodeQuery.graphql.ts";
const updateDatumSchema = z.object({
name: z.string().min(1, "Name is required"),
@@ -38,26 +39,30 @@ type Props = {
};
export default function DatumDetailsPage(props: Props) {
const datum = usePreloadedQuery(datumNodeQuery, props.queryRef);
const datum = usePreloadedQuery<DatumGraphNodeQuery>(
datumNodeQuery,
props.queryRef,
);
const datumEntry = datum.node;
const { __ } = useTranslate();
const organizationId = useOrganizationId();
const deleteDatum = useDeleteDatum(
datumEntry,
ConnectionHandler.getConnectionID(organizationId, "DataPage_data")
ConnectionHandler.getConnectionID(organizationId, "DataPage_data"),
);
const vendors = datumEntry?.vendors?.edges.map((edge: any) => edge.node) ?? [];
const vendorIds = vendors.map((vendor: any) => vendor.id);
const vendors = datumEntry?.vendors?.edges.map((edge) => edge.node) ?? [];
const vendorIds = vendors.map((vendor) => vendor.id);
const { control, formState, handleSubmit, register, reset } = useFormWithSchema(updateDatumSchema, {
defaultValues: {
name: datumEntry?.name || "",
dataClassification: datumEntry?.dataClassification || "PUBLIC",
ownerId: datumEntry?.owner?.id || "",
vendorIds: vendorIds,
},
});
const { control, formState, handleSubmit, register, reset } =
useFormWithSchema(updateDatumSchema, {
defaultValues: {
name: datumEntry?.name || "",
dataClassification: datumEntry?.dataClassification || "PUBLIC",
ownerId: datumEntry?.owner?.id || "",
vendorIds: vendorIds,
},
});
const updateDatum = useUpdateDatum();
@@ -104,11 +109,7 @@ export default function DatumDetailsPage(props: Props) {
</div>
<form onSubmit={onSubmit} className="space-y-6 max-w-2xl">
<Field
label={__("Name")}
{...register("name")}
type="text"
/>
<Field label={__("Name")} {...register("name")} type="text" />
<ControlledField
control={control}

View File

@@ -29,16 +29,21 @@ type Props = {
organizationId: string;
};
export function CreateDatumDialog({ children, connection, organizationId }: Props) {
export function CreateDatumDialog({
children,
connection,
organizationId,
}: Props) {
const { __ } = useTranslate();
const { control, handleSubmit, register, formState } = useFormWithSchema(schema, {
defaultValues: {
name: "",
dataClassification: "PUBLIC",
ownerId: "",
vendorIds: [],
},
});
const { control, handleSubmit, register, formState, reset } =
useFormWithSchema(schema, {
defaultValues: {
name: "",
dataClassification: "PUBLIC",
ownerId: "",
vendorIds: [],
},
});
const ref = useDialogRef();
const createDatum = useCreateDatum(connection);
@@ -49,6 +54,7 @@ export function CreateDatumDialog({ children, connection, organizationId }: Prop
organizationId,
});
ref.current?.close();
reset();
} catch (error) {
console.error("Failed to create datum:", error);
}
@@ -62,11 +68,7 @@ export function CreateDatumDialog({ children, connection, organizationId }: Prop
>
<form onSubmit={onSubmit} className="space-y-4">
<DialogContent padded className="space-y-4">
<Field
label={__("Name")}
{...register("name")}
type="text"
/>
<Field label={__("Name")} {...register("name")} type="text" />
<ControlledField
control={control}
name="dataClassification"

View File

@@ -77,7 +77,7 @@ export function FrameworkControlDialog(props: Props) {
successMessage: __("Control created successfully."),
errorMessage: __("Failed to create control. Please try again."),
});
const { control, handleSubmit, register } = useFormWithSchema(schema, {
const { control, handleSubmit, register, reset } = useFormWithSchema(schema, {
defaultValues: {
name: frameworkControl?.name ?? "",
description: frameworkControl?.description ?? "",
@@ -111,6 +111,7 @@ export function FrameworkControlDialog(props: Props) {
connections: [props.connectionId!],
},
});
reset();
}
dialogRef.current?.close();
});

View File

@@ -129,12 +129,15 @@ const linkSchema = z.object({
function EvidenceLink({ measureId, connectionId, ref }: Props) {
const { __ } = useTranslate();
const { handleSubmit, register, formState } = useFormWithSchema(linkSchema, {
defaultValues: {
name: "",
url: "",
const { handleSubmit, register, formState, reset } = useFormWithSchema(
linkSchema,
{
defaultValues: {
name: "",
url: "",
},
},
});
);
const [mutate] = useMutationWithToasts(uploadEvidenceMutation, {
successMessage: __("Evidence created successfully"),
@@ -158,6 +161,7 @@ function EvidenceLink({ measureId, connectionId, ref }: Props) {
},
});
ref.current?.close();
reset();
});
return (
<form onSubmit={onSubmit}>

View File

@@ -76,17 +76,15 @@ export default function MeasureFormDialog(props: Props) {
errorMessage: __("Failed to create measure. Please try again."),
});
const { control, handleSubmit, register, formState } = useFormWithSchema(
measureSchema,
{
const { control, handleSubmit, register, formState, reset } =
useFormWithSchema(measureSchema, {
defaultValues: {
name: measure?.name ?? "",
description: measure?.description ?? "",
category: measure?.category ?? "",
state: "NOT_STARTED",
},
}
);
});
const onSubmit = handleSubmit(async (data) => {
if (measure) {
@@ -113,6 +111,7 @@ export default function MeasureFormDialog(props: Props) {
connections: [props.connection!],
},
});
reset();
}
dialogRef.current?.close();
});