Presupuestador_web/client/src/app/quotes/edit.tsx

import { FormMoneyField, LoadingOverlay, SubmitButton } from "@/components";
import { calculateItemTotals } from "@/lib/calc";
import { useGetIdentity } from "@/lib/hooks";
import { useUrlId } from "@/lib/hooks/useUrlId";
import { Badge, Button, Form, Tabs, TabsContent, TabsList, TabsTrigger } from "@/ui";
import { IUpdateQuote_Request_DTO, MoneyValue } from "@shared/contexts";
import { t } from "i18next";
import { ChevronLeftIcon } from "lucide-react";
import { useEffect, useState } from "react";
import { SubmitHandler, useForm } from "react-hook-form";
import { QuoteDetailsCardEditor, QuoteGeneralCardEditor } from "./components/editors";
import { useQuotes } from "./hooks";

// simple typesafe helperfunction
type EndsWith<T, b extends string> = T extends `${infer f}${b}` ? T : never;
const endsWith = <T extends string, b extends string>(str: T, prefix: b): str is EndsWith<T, b> =>
  str.endsWith(prefix);

interface QuoteDataForm extends IUpdateQuote_Request_DTO {
  /*status: string;
  date: string;
  reference: string;
  customer_information: string;
  lang_code: string;
  currency_code: string;
  payment_method: string;
  notes: string;
  validity: string;
  discount: IPercentage;

  subtotal: IMoney;

  items: {
    quantity: IQuantity;
    description: string;
    unit_price: IMoney;
    price: IMoney;
    discount: IPercentage;
    total: IMoney;
  }[];*/
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const QuoteEdit = () => {
  const [loading, setLoading] = useState(false);
  const quoteId = useUrlId();

  const { data: userIdentity } = useGetIdentity();

  const { useOne, useUpdate } = useQuotes();

  const { data, status } = useOne(quoteId);
  const { mutate } = useUpdate(quoteId);

  const form = useForm<QuoteDataForm>({
    mode: "onBlur",
    values: data,
    defaultValues: {
      date: "",
      reference: "",
      customer_information: "",
      lang_code: "",
      currency_code: "",
      payment_method: "",
      notes: "",
      validity: "",
      subtotal: "",
      items: [],
    },
  });

  const onSubmit: SubmitHandler<QuoteDataForm> = async (data) => {
    console.debug(JSON.stringify(data));

    try {
      setLoading(true);
      // Transformación del form -> typo de request
      mutate(data, {
        onError: (error) => {
          alert(error);
        },
        //onSettled: () => {},
        onSuccess: () => {
          alert("guardado");
        },
      });
    } finally {
      setLoading(false);
    }
  };

  const { watch, getValues, setValue } = form;

  useEffect(() => {
    const { unsubscribe } = watch((_, { name, type }) => {
      const value = getValues();

      console.debug({ name, type });

      if (name) {
        if (name === "items") {
          const { items } = value;
          let quoteSubtotal = MoneyValue.create().object;

          // Recálculo líneas
          items.map((item, index) => {
            const itemTotals = calculateItemTotals(item);
            quoteSubtotal = quoteSubtotal.add(itemTotals.totalPrice);

            setValue(`items.${index}.subtotal_price`, itemTotals.subtotalPrice.toObject());
            setValue(`items.${index}.total_price`, itemTotals.totalPrice.toObject());
          });

          console.log(quoteSubtotal.toFormat());

          // Recálculo completo
          setValue("subtotal", quoteSubtotal.toObject());
        }

        if (
          endsWith(name, "quantity") ||
          endsWith(name, "retail_price") ||
          endsWith(name, "discount")
        ) {
          const { items } = value;
          const [, indexString, fieldName] = String(name).split(".");
          const index = parseInt(indexString);

          const itemTotals = calculateItemTotals(items[index]);

          setValue(`items.${index}.subtotal_price`, itemTotals.subtotalPrice.toObject());
          setValue(`items.${index}.total_price`, itemTotals.totalPrice.toObject());

          // Recálculo completo
        }
      }
    });
    return () => unsubscribe();
  }, [watch, getValues, setValue]);

  if (status !== "success") {
    return <LoadingOverlay />;
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <div className='mx-auto grid max-w-[90rem] flex-1 auto-rows-max gap-6'>
          <div className='flex items-center gap-4'>
            <Button variant='outline' size='icon' className='h-7 w-7'>
              <ChevronLeftIcon className='w-4 h-4' />
              <span className='sr-only'>{t("quotes.common.back")}</span>
            </Button>
            <h1 className='flex-1 text-xl font-semibold tracking-tight shrink-0 whitespace-nowrap sm:grow-0'>
              {t("quotes.edit.title")}
            </h1>
            <Badge variant='default' className='ml-auto sm:ml-0'>
              {data.status}
            </Badge>
            <div className='items-center hidden gap-2 md:ml-auto md:flex'>
              <Button variant='outline' size='sm'>
                {t("common.cancel")}
              </Button>
              <SubmitButton variant={form.formState.isDirty ? "default" : "outline"} size='sm'>
                {t("common.save")}
              </SubmitButton>
            </div>
          </div>

          <FormMoneyField
            label={"subtotal_price"}
            disabled={form.formState.disabled}
            {...form.register("subtotal_price")}
          />

          <Tabs defaultValue='items' className='space-y-4'>
            <TabsList>
              <TabsTrigger value='general'>{t("quotes.create.tabs.general")}</TabsTrigger>
              <TabsTrigger value='items'>{t("quotes.create.tabs.items")}</TabsTrigger>
              <TabsTrigger value='history'>{t("quotes.create.tabs.history")}</TabsTrigger>
            </TabsList>
            <TabsContent value='general'>
              <QuoteGeneralCardEditor />
            </TabsContent>
            <TabsContent value='items'>
              <QuoteDetailsCardEditor />
            </TabsContent>

            <TabsContent value='history'></TabsContent>
          </Tabs>
          <div className='flex items-center justify-center gap-2 md:hidden'>
            <Button variant='outline' size='sm'>
              {t("quotes.create.buttons.discard")}
            </Button>
            <Button size='sm'>{t("quotes.create.buttons.save_quote")}</Button>
          </div>
        </div>
      </form>
    </Form>
  );
};