git.gladyson/openmonetis
1
0
Fork 1
mirror of https://github.com/felipegcoutinho/openmonetis.git synced 2026-05-10 11:21:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(pagadores): corrige envio e seleção de avatar no diálogo

Browse Source
This commit is contained in:
Felipe Coutinho
2026-03-17 17:09:59 +00:00
parent 50177621ff
commit 076953340f
1 changed files with 18 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/features/payers/components/payer-dialog.tsx
View File

@@ -37,6 +37,8 @@ import { getAvatarSrc } from "@/shared/lib/payers/utils";
import { StatusSelectContent } from "./payer-select-items"; import { StatusSelectContent } from "./payer-select-items";
import type { Payer, PayerFormValues } from "./types"; import type { Payer, PayerFormValues } from "./types";
type PayerCreatePayload = Parameters<typeof createPayerAction>[0];
interface PayerDialogProps { interface PayerDialogProps {
mode: "create" | "update"; mode: "create" | "update";
trigger?: React.ReactNode; trigger?: React.ReactNode;
@@ -93,10 +95,11 @@ export function PayerDialog({
useFormState<PayerFormValues>(initialState); useFormState<PayerFormValues>(initialState);
const availableAvatars = useMemo(() => { const availableAvatars = useMemo(() => {
const set = new Set<string>(); const set = new Set([
avatarOptions.forEach((avatar) => set.add(avatar)); ...avatarOptions,
set.add(initialState.avatarUrl); initialState.avatarUrl,
set.add(DEFAULT_PAYER_AVATAR); DEFAULT_PAYER_AVATAR,
]);
return Array.from(set).sort((a, b) => return Array.from(set).sort((a, b) =>
a.localeCompare(b, "pt-BR", { sensitivity: "base" }), a.localeCompare(b, "pt-BR", { sensitivity: "base" }),
); );
@@ -110,8 +113,6 @@ export function PayerDialog({
} }
}, [dialogOpen, initialState, resetForm]); }, [dialogOpen, initialState, resetForm]);
type PayerCreatePayload = Parameters<typeof createPayerAction>[0];
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault(); event.preventDefault();
setErrorMessage(null); setErrorMessage(null);
@@ -135,29 +136,10 @@ export function PayerDialog({
}; };
startTransition(async () => { startTransition(async () => {
if (mode === "create") { const result =
const result = await createPayerAction(payload); mode === "create"
? await createPayerAction(payload)
if (result.success) { : await updatePayerAction({ id: payerId ?? "", ...payload });
toast.success(result.message);
setDialogOpen(false);
resetForm(initialState);
return;
}
setErrorMessage(result.error);
toast.error(result.error);
return;
}
if (!payerId) {
return;
}
const result = await updatePayerAction({
id: payerId,
...payload,
});
if (result.success) { if (result.success) {
toast.success(result.message); toast.success(result.message);
@@ -189,7 +171,7 @@ export function PayerDialog({
</DialogHeader> </DialogHeader>
<form className="flex flex-col gap-6" onSubmit={handleSubmit}> <form className="flex flex-col gap-6" onSubmit={handleSubmit}>
<fieldset className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<div className="flex w-full gap-2"> <div className="flex w-full gap-2">
<div className="flex flex-col gap-2 w-full"> <div className="flex flex-col gap-2 w-full">
@@ -244,7 +226,7 @@ export function PayerDialog({
</Select> </Select>
</div> </div>
<fieldset className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<div className="flex items-start gap-3 rounded-lg border border-border/60 bg-muted/10 p-3"> <div className="flex items-start gap-3 rounded-lg border border-border/60 bg-muted/10 p-3">
<Checkbox <Checkbox
id="payer-auto-send" id="payer-auto-send"
@@ -266,9 +248,9 @@ export function PayerDialog({
</p> </p>
</div> </div>
</div> </div>
</fieldset> </div>
<fieldset className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>Avatar</Label> <Label>Avatar</Label>
<div className="flex flex-wrap gap-3"> <div className="flex flex-wrap gap-3">
{availableAvatars.map((avatar) => { {availableAvatars.map((avatar) => {
@@ -287,13 +269,13 @@ export function PayerDialog({
alt={`Avatar ${avatar}`} alt={`Avatar ${avatar}`}
width={40} width={40}
height={40} height={40}
className="size-12 rounded-full object-cove hover:scale-110 transition-transform duration-200" className="size-12 rounded-full object-cover hover:scale-110 transition-transform duration-200"
/> />
</button> </button>
); );
})} })}
</div> </div>
</fieldset> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label htmlFor="payer-note">Anotações</Label> <Label htmlFor="payer-note">Anotações</Label>
@@ -305,7 +287,7 @@ export function PayerDialog({
/> />
</div> </div>
</div> </div>
</fieldset> </div>
{errorMessage ? ( {errorMessage ? (
<p className="text-sm text-destructive">{errorMessage}</p> <p className="text-sm text-destructive">{errorMessage}</p>