diff --git a/client/src/app/quotes/create.tsx b/client/src/app/quotes/create.tsx index 3c5390a..c2b912a 100644 --- a/client/src/app/quotes/create.tsx +++ b/client/src/app/quotes/create.tsx @@ -1,11 +1,17 @@ -import { CancelButton, FormDatePickerField, FormTextAreaField, FormTextField } from "@/components"; +import { + BackHistoryButton, + FormDatePickerField, + FormTextAreaField, + FormTextField, +} from "@/components"; import { t } from "i18next"; import { ChevronLeft } from "lucide-react"; import { SubmitButton } from "@/components"; import { Button, Form } from "@/ui"; -import { SubmitHandler, useForm } from "react-hook-form"; +import { FieldErrors, SubmitErrorHandler, SubmitHandler, useForm } from "react-hook-form"; +import { useNavigate } from "react-router-dom"; import { useQuotes } from "./hooks"; type QuoteDataForm = { @@ -32,14 +38,15 @@ export const QuoteCreate = () => { //const { data: userIdentity } = useGetIdentity(); //console.log(userIdentity); + const navigate = useNavigate(); const { useMutation } = useQuotes(); - const { mutate } = useMutation; + const { mutate } = useMutation(); const form = useForm({ defaultValues: { - reference: "", - date: Date.now().toLocaleString(), + date: new Date(Date.now()).toUTCString(), customer_information: "", + reference: "", }, }); @@ -48,15 +55,25 @@ export const QuoteCreate = () => { try { //setLoading(true); - mutate(formData); + mutate(formData, { + onSuccess: (data) => { + navigate(`/quotes/edit/${data.id}`, { relative: "path", replace: true }); + }, + }); } finally { //setLoading(false); } }; + const onErrors: SubmitErrorHandler = async ( + errors: FieldErrors + ) => { + console.log(errors); + }; + return (
- +
); diff --git a/client/src/components/Buttons/CustomButton.tsx b/client/src/components/Buttons/CustomButton.tsx index 5d129ce..7ef594d 100644 --- a/client/src/components/Buttons/CustomButton.tsx +++ b/client/src/components/Buttons/CustomButton.tsx @@ -18,9 +18,7 @@ const customButtonVariants = cva("", { }, }); -export interface CustomButtonProps - extends ButtonProps, - VariantProps { +export interface CustomButtonProps extends ButtonProps, VariantProps { icon: LucideIcon; // Propiedad para proporcionar el icono personalizado label?: string; } diff --git a/client/src/components/CustomButtons/BackHistoryButton.tsx b/client/src/components/CustomButtons/BackHistoryButton.tsx index 650637c..4af3e98 100644 --- a/client/src/components/CustomButtons/BackHistoryButton.tsx +++ b/client/src/components/CustomButtons/BackHistoryButton.tsx @@ -1,6 +1,7 @@ import { Button, ButtonProps } from "@/ui"; import { ChevronLeft } from "lucide-react"; import { To, useNavigate } from "react-router-dom"; +import { CustomButton } from "../Buttons/CustomButton"; export interface BackHistoryButtonProps extends ButtonProps { label?: string; @@ -15,16 +16,29 @@ export const BackHistoryButton = ({ }: BackHistoryButtonProps): JSX.Element => { const navigate = useNavigate(); + return ( + { + url ? navigate(url) : navigate(-1); + }} + {...props} + /> + ); + return ( ); diff --git a/client/src/components/Forms/FormDatePickerField.tsx b/client/src/components/Forms/FormDatePickerField.tsx index a6dd9cc..9637dac 100644 --- a/client/src/components/Forms/FormDatePickerField.tsx +++ b/client/src/components/Forms/FormDatePickerField.tsx @@ -12,7 +12,6 @@ import { FormDescription, FormField, FormItem, - FormMessage, InputProps, Popover, PopoverContent, @@ -28,14 +27,12 @@ import { CalendarIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { t } from "i18next"; +import { FormErrorMessage } from "./FormErrorMessage"; type FormDatePickerFieldProps< TFieldValues extends FieldValues = FieldValues, TName extends FieldPath = FieldPath -> = InputProps & - FormInputProps & - Partial & - UseControllerProps & {}; +> = InputProps & FormInputProps & Partial & UseControllerProps; /*const loadDateFnsLocale = async (locale: Locale) => { return await import(`date-fns/locale/${locale.code}/index.js`); @@ -45,19 +42,7 @@ export const FormDatePickerField = React.forwardRef< HTMLDivElement, React.HTMLAttributes & FormDatePickerFieldProps >((props: FormDatePickerFieldProps, ref) => { - const { - label, - placeholder, - hint, - description, - required, - className, - disabled, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - errors, - name, - type, - } = props; + const { label, placeholder, hint, description, required, className, name } = props; const { control } = useFormContext(); //const { locale } = loadDateFnsLocale(); @@ -72,11 +57,10 @@ export const FormDatePickerField = React.forwardRef< control={control} name={name} rules={{ required }} - disabled={disabled} // eslint-disable-next-line @typescript-eslint/no-unused-vars render={({ field, fieldState, formState }) => ( - {label && } + {label && } @@ -90,6 +74,8 @@ export const FormDatePickerField = React.forwardRef< > {field.value ? ( new Date(field.value).toLocaleDateString() //"en-US", DATE_OPTIONS) + ) : placeholder ? ( + placeholder ) : ( {t("common.pick_date")} )} @@ -117,8 +103,9 @@ export const FormDatePickerField = React.forwardRef< /> + {description && {description}} - + )} /> diff --git a/client/src/components/Forms/FormErrorMessage.tsx b/client/src/components/Forms/FormErrorMessage.tsx new file mode 100644 index 0000000..9c43781 --- /dev/null +++ b/client/src/components/Forms/FormErrorMessage.tsx @@ -0,0 +1,30 @@ +import { FormMessage, useFormField } from "@/ui"; +import { t } from "i18next"; +import * as React from "react"; + +export const FormErrorMessage = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ children, ...props }, ref) => { + const { error } = useFormField(); + let message = children; + + if (error) { + if (error.message) { + message = String(error?.message || error.root?.message); + } else { + if (error.type === "required") { + message = t("common.required_field"); + } + } + } + + console.log(message); + + return ( + + {message} + + ); +}); +FormErrorMessage.displayName = "FormErrorMessage"; diff --git a/client/src/components/Forms/FormLabel.tsx b/client/src/components/Forms/FormLabel.tsx index fc5ae52..65ee4c3 100644 --- a/client/src/components/Forms/FormLabel.tsx +++ b/client/src/components/Forms/FormLabel.tsx @@ -14,12 +14,14 @@ export const FormLabel = React.forwardRef< FormLabelProps & Pick >(({ label, hint, required, ...props }, ref) => { + const { error } = UI.useFormField(); + const _hint = hint ? hint : required ? "obligatorio" : undefined; - const _hintClassName = required ? "text-destructive" : ""; + const _hintClassName = error ? "text-destructive font-semibold" : ""; return ( - {label} - {_hint && {_hint}} + {label} + {_hint && {_hint}} ); }); diff --git a/client/src/components/Forms/FormTextAreaField.tsx b/client/src/components/Forms/FormTextAreaField.tsx index e2532b2..02ac3d2 100644 --- a/client/src/components/Forms/FormTextAreaField.tsx +++ b/client/src/components/Forms/FormTextAreaField.tsx @@ -5,7 +5,6 @@ import { FormDescription, FormField, FormItem, - FormMessage, Textarea, } from "@/ui"; import * as React from "react"; @@ -17,6 +16,7 @@ import { UseControllerProps, useFormContext, } from "react-hook-form"; +import { FormErrorMessage } from "./FormErrorMessage"; import { FormLabel, FormLabelProps } from "./FormLabel"; export type FormTextAreaFieldProps< @@ -41,12 +41,14 @@ export const FormTextAreaField = React.forwardRef< name, label, hint, - description, placeholder, + description, + required, - disabled, - autoSize, className, + + autoSize, + ...props }, ref @@ -57,7 +59,6 @@ export const FormTextAreaField = React.forwardRef< control={control} name={name} rules={{ required }} - disabled={disabled} // eslint-disable-next-line @typescript-eslint/no-unused-vars render={({ field, fieldState, formState }) => ( @@ -65,17 +66,29 @@ export const FormTextAreaField = React.forwardRef< {autoSize ? ( ) : ( -