revisar pantalla de ajustes para que guarde los datos

This commit is contained in:
David Arranz 2024-08-11 10:24:07 +02:00
parent 006ef44ffd
commit 11308d8eac

View File

@ -15,10 +15,11 @@ import {
import { t } from "i18next";
import { AlertCircleIcon } from "lucide-react";
import { useMemo } from "react";
import { useMemo, useState } from "react";
import { SubmitHandler, useForm } from "react-hook-form";
import { Trans } from "react-i18next";
import { cn } from "@/lib/utils";
import { IUpdateProfile_Request_DTO } from "@shared/contexts";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";
@ -27,6 +28,7 @@ import { useSettings } from "./hooks";
type SettingsDataForm = IUpdateProfile_Request_DTO;
export const SettingsEditor = () => {
const [activeSection, setActiveSection] = useState("profile");
const { useOne, useUpdate } = useSettings();
const { data, status, error: queryError } = useOne();
@ -61,7 +63,7 @@ export const SettingsEditor = () => {
),*/
});
const { formState } = form;
const { formState, reset } = form;
const { isSubmitting } = formState;
const onSubmit: SubmitHandler<SettingsDataForm> = async (data) => {
@ -74,6 +76,7 @@ export const SettingsEditor = () => {
},
//onSettled: () => {},
onSuccess: () => {
reset({}, { keepValues: true, keepIsValid: true });
toast("Ajustes guardados");
//clear();
},
@ -114,17 +117,29 @@ export const SettingsEditor = () => {
)}
<nav className='grid gap-4 text-sm text-muted-foreground'>
<Link to='#' className='font-semibold text-primary'>
<Link
to='#'
onClick={() => setActiveSection("profile")}
className={activeSection === "profile" ? "font-semibold text-primary" : ""}
>
<Trans i18nKey='settings.edit.tabs.profile' />
</Link>
<Link to='#'>
<Link
to='#'
onClick={() => setActiveSection("quotes")}
className={activeSection === "quotes" ? "font-semibold text-primary" : ""}
>
<Trans i18nKey='settings.edit.tabs.quotes' />
</Link>
<Link to='#'>
<Link
to='#'
onClick={() => setActiveSection("legal")}
className={activeSection === "legal" ? "font-semibold text-primary" : ""}
>
<Trans i18nKey='settings.edit.tabs.legal' />
</Link>
</nav>
<div className='grid gap-6'>
<div className={cn("grid gap-6", activeSection === "profile" ? "visible" : "hidden")}>
<Card>
<CardHeader>
<CardTitle>
@ -136,6 +151,7 @@ export const SettingsEditor = () => {
</CardHeader>
<CardContent>
<FormTextAreaField
autoSize
placeholder={t("settings.form_fields.contact_information.placeholder")}
{...form.register("contact_information", {
required: true,
@ -149,7 +165,8 @@ export const SettingsEditor = () => {
</Button>
</CardFooter>
</Card>
</div>
<div className={cn("grid gap-6", activeSection === "quotes" ? "visible" : "hidden")}>
<Card>
<CardHeader>
<CardTitle>
@ -161,6 +178,7 @@ export const SettingsEditor = () => {
</CardHeader>
<CardContent>
<FormTextAreaField
autoSize
placeholder={t("settings.form_fields.default_payment_method.placeholder")}
{...form.register("default_payment_method", {
required: true,
@ -174,7 +192,6 @@ export const SettingsEditor = () => {
</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
<CardTitle>
@ -186,6 +203,7 @@ export const SettingsEditor = () => {
</CardHeader>
<CardContent>
<FormTextAreaField
autoSize
placeholder={t("settings.form_fields.default_quote_validity.placeholder")}
{...form.register("default_quote_validity", {
required: true,
@ -211,6 +229,7 @@ export const SettingsEditor = () => {
</CardHeader>
<CardContent>
<FormTextAreaField
autoSize
placeholder={t("settings.form_fields.default_notes.placeholder")}
{...form.register("default_notes", {
required: true,
@ -224,7 +243,8 @@ export const SettingsEditor = () => {
</Button>
</CardFooter>
</Card>
</div>
<div className={cn("grid gap-6", activeSection === "legal" ? "visible" : "hidden")}>
<Card>
<CardHeader>
<CardTitle>
@ -236,6 +256,7 @@ export const SettingsEditor = () => {
</CardHeader>
<CardContent>
<FormTextAreaField
autoSize
placeholder={t("settings.form_fields.default_legal_terms.placeholder")}
{...form.register("default_legal_terms", {
required: true,