Rodax_Software/FactuGES_ERP
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(proformas): mejorar la estructura de la página de actualización de proformas y corregir selectores en pruebas E2E

Browse Source
This commit is contained in:
David Arranz 2026-09-14 16:41:35 +02:00
parent ed58bd1e64
commit 6b05ee01f3
3 changed files with 98 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
modules/customer-invoices/src/web/proformas/update/ui/pages/proforma-update-page.tsx
View File

@ -49,14 +49,22 @@ export const ProformaUpdatePage = () => {
}; };
if (ctrl.isInitialLoading) { if (ctrl.isInitialLoading) {
return <ProformaUpdateSkeleton />; return (
<RdxPageFrame>
<RdxPageContainer width="content">
<RdxPageContent>
<ProformaUpdateSkeleton />
</RdxPageContent>
</RdxPageContainer>
</RdxPageFrame>
);
} }
if (ctrl.pageError) { if (ctrl.pageError) {
return ( return (
<RdxPageFrame> <RdxPageFrame>
<RdxPageContainer width="full"> <RdxPageContainer width="content">
<div className="mx-auto w-full max-w-3xl"> <RdxPageContent>
<PageErrorState <PageErrorState
description={ctrl.pageError.description} description={ctrl.pageError.description}
primaryAction={ primaryAction={
@ -90,13 +98,12 @@ export const ProformaUpdatePage = () => {
title={ctrl.pageError.title} title={ctrl.pageError.title}
variant={ctrl.pageError.variant} variant={ctrl.pageError.variant}
/> />
</div> </RdxPageContent>
</RdxPageContainer> </RdxPageContainer>
</RdxPageFrame> </RdxPageFrame>
); );
} }
const hasPageAlerts = updateCtrl.isUpdateError || updateCtrl.isSeriesLoadError;
const actionBar = ( const actionBar = (
<RdxEditorActionBar <RdxEditorActionBar
leading={ leading={
@ -120,6 +127,7 @@ export const ProformaUpdatePage = () => {
primary={ primary={
<RhfSubmitActionButton <RhfSubmitActionButton
busyLabel="Guardando..." busyLabel="Guardando..."
data-testid="proforma-update-submit"
disabled={updateCtrl.isUpdating} disabled={updateCtrl.isUpdating}
formId={updateCtrl.formId} formId={updateCtrl.formId}
isBusy={updateCtrl.form.formState.isSubmitting} isBusy={updateCtrl.form.formState.isSubmitting}
@ -188,61 +196,50 @@ export const ProformaUpdatePage = () => {
} }
> >
<RdxPageContainer width="full"> <RdxPageContainer width="full">
{hasPageAlerts ? ( <RdxPageContent>
<RdxPageContainer className="pb-0" width="full"> {updateCtrl.isUpdateError ? (
<RdxPageContent spacing="compact"> <ErrorAlert
{updateCtrl.isUpdateError && ( message={
<ErrorAlert (updateCtrl.updateError as Error)?.message ??
message={ t("pages.proformas.update.error_msg", "Revisa los datos e inténtalo de nuevo.")
(updateCtrl.updateError as Error)?.message ?? }
t( title={t("pages.proformas.update.error_title", "No se pudo guardar los cambios")}
"pages.proformas.update.error_msg", />
"Revisa los datos e inténtalo de nuevo." ) : null}
{updateCtrl.isSeriesLoadError ? (
<ErrorAlert
message={
updateCtrl.seriesLoadError instanceof Error
? updateCtrl.seriesLoadError.message
: t(
"pages.proformas.update.series_load_error.message",
"Inténtalo de nuevo más tarde."
) )
} }
title={t( title={t(
"pages.proformas.update.error_title", "pages.proformas.update.series_load_error.title",
"No se pudo guardar los cambios" "No se pudieron cargar las series de facturación"
)}
/>
)} )}
/>
) : null}
{updateCtrl.isSeriesLoadError && ( <ProformaUpdateEditorForm
<ErrorAlert formId={updateCtrl.formId}
message={ isSubmitting={updateCtrl.isUpdating}
updateCtrl.seriesLoadError instanceof Error itemsCtrl={updateCtrl.itemsCtrl}
? updateCtrl.seriesLoadError.message onChangeCustomerClick={selectCustomerCtrl.selectCtrl.openDialog}
: t( onCreateCustomerClick={selectCustomerCtrl.openQuickCreateDialog}
"pages.proformas.update.series_load_error.message", onPaymentTermChange={updateCtrl.handlePaymentTermChange}
"Inténtalo de nuevo más tarde." onReset={updateCtrl.resetForm}
) onSubmit={updateCtrl.onSubmit}
} paymentCtrl={updateCtrl.paymentCtrl}
title={t( selectedCustomer={updateCtrl.selectedCustomer}
"pages.proformas.update.series_load_error.title", seriesOptions={updateCtrl.seriesOptions}
"No se pudieron cargar las series de facturación" taxCtrl={updateCtrl.taxCtrl}
)} totalsCtrl={updateCtrl.totalsCtrl}
/> />
)} </RdxPageContent>
</RdxPageContent>
</RdxPageContainer>
) : null}
<ProformaUpdateEditorForm
className={hasPageAlerts ? "pt-0" : undefined}
formId={updateCtrl.formId}
isSubmitting={updateCtrl.isUpdating}
itemsCtrl={updateCtrl.itemsCtrl}
onChangeCustomerClick={selectCustomerCtrl.selectCtrl.openDialog}
onCreateCustomerClick={selectCustomerCtrl.openQuickCreateDialog}
onPaymentTermChange={updateCtrl.handlePaymentTermChange}
onReset={updateCtrl.resetForm}
onSubmit={updateCtrl.onSubmit}
paymentCtrl={updateCtrl.paymentCtrl}
selectedCustomer={updateCtrl.selectedCustomer}
seriesOptions={updateCtrl.seriesOptions}
taxCtrl={updateCtrl.taxCtrl}
totalsCtrl={updateCtrl.totalsCtrl}
/>
</RdxPageContainer> </RdxPageContainer>
</RdxPageFrame> </RdxPageFrame>

113
modules/customers/src/web/update/ui/pages/customer-update-page.tsx
View File

@ -29,52 +29,51 @@ export const CustomerUpdatePage = () => {
return ( return (
<RdxPageFrame> <RdxPageFrame>
<RdxPageContainer width="content"> <RdxPageContainer width="content">
<PageErrorState <RdxPageContent>
description={ctrl.pageError.description} <PageErrorState
primaryAction={ description={ctrl.pageError.description}
ctrl.pageError.canRetry primaryAction={
? { ctrl.pageError.canRetry
label: ctrl.isRetrying
? t("update.page_error.actions.retrying")
: t("update.page_error.actions.retry"),
onClick: ctrl.retryUpdate,
isLoading: ctrl.isRetrying,
}
: ctrl.pageError.variant === "forbidden"
? { ? {
label: t("update.page_error.actions.go_home"), label: ctrl.isRetrying
onClick: ctrl.goHome, ? t("update.page_error.actions.retrying")
: t("update.page_error.actions.retry"),
onClick: ctrl.retryUpdate,
isLoading: ctrl.isRetrying,
} }
: { : ctrl.pageError.variant === "forbidden"
? {
label: t("update.page_error.actions.go_home"),
onClick: ctrl.goHome,
}
: {
label: t("update.page_error.actions.back_to_list"),
onClick: ctrl.goBackToList,
}
}
reference={ctrl.pageError.reference}
secondaryAction={
ctrl.pageError.canRetry
? {
label: t("update.page_error.actions.back_to_list"), label: t("update.page_error.actions.back_to_list"),
onClick: ctrl.goBackToList, onClick: ctrl.goBackToList,
} }
} : undefined
reference={ctrl.pageError.reference} }
secondaryAction={ title={ctrl.pageError.title}
ctrl.pageError.canRetry variant={ctrl.pageError.variant}
? { />
label: t("update.page_error.actions.back_to_list"), </RdxPageContent>
onClick: ctrl.goBackToList,
}
: undefined
}
title={ctrl.pageError.title}
variant={ctrl.pageError.variant}
/>
</RdxPageContainer> </RdxPageContainer>
</RdxPageFrame> </RdxPageFrame>
); );
} }
const hasPageAlerts = updateCtrl.isUpdateError;
return ( return (
<FormProvider {...updateCtrl.form}> <FormProvider {...updateCtrl.form}>
<UnsavedChangesProvider isDirty={updateCtrl.form.formState.isDirty}> <UnsavedChangesProvider isDirty={updateCtrl.form.formState.isDirty}>
<RdxPageFrame <RdxPageFrame
contentClassName="bg-muted/20" contentClassName="bg-red-500"
footer={<h1>hola</h1>}
header={ header={
<CustomerUpdateHeader <CustomerUpdateHeader
formId={updateCtrl.formId} formId={updateCtrl.formId}
@ -99,28 +98,16 @@ export const CustomerUpdatePage = () => {
/> />
} }
> >
<RdxPageContainer className="bg-white" width="content"> <RdxPageContainer width="content">
<RdxPageContent> <RdxPageContent>
{hasPageAlerts ? ( {updateCtrl.isUpdateError ? (
<RdxPageContainer className="pb-0" width="full"> <ErrorAlert
<div className="flex min-w-0 flex-col gap-4"> message={
{updateCtrl.isUpdateError && ( (updateCtrl.updateError as Error)?.message ??
<ErrorAlert t("pages.customers.update.error_msg", "Revisa los datos e inténtalo de nuevo.")
message={ }
(updateCtrl.updateError as Error)?.message ?? title={t("pages.customers.update.error_title", "No se pudo guardar los cambios")}
t( />
"pages.customers.update.error_msg",
"Revisa los datos e inténtalo de nuevo."
)
}
title={t(
"pages.customers.update.error_title",
"No se pudo guardar los cambios"
)}
/>
)}
</div>
</RdxPageContainer>
) : null} ) : null}
<CustomerUpdateEditorForm <CustomerUpdateEditorForm
@ -130,26 +117,6 @@ export const CustomerUpdatePage = () => {
onReset={updateCtrl.resetForm} onReset={updateCtrl.resetForm}
onSubmit={updateCtrl.onSubmit} onSubmit={updateCtrl.onSubmit}
/> />
<div className="rounded-2xl border border-border/60 bg-background px-4 py-4 shadow-xs md:px-6 md:py-6">
<div className="flex min-w-0 flex-col gap-6">
{updateCtrl.isUpdateError ? (
<ErrorAlert
message={
(updateCtrl.updateError as Error)?.message ??
t(
"pages.customers.update.error_msg",
"Revisa los datos e inténtalo de nuevo."
)
}
title={t(
"pages.customers.update.error_title",
"No se pudo guardar los cambios"
)}
/>
) : null}
</div>
</div>
</RdxPageContent> </RdxPageContent>
</RdxPageContainer> </RdxPageContainer>
</RdxPageFrame> </RdxPageFrame>

8
tests/e2e/customer-invoices/proformas/update-proforma.spec.ts
View File

@ -12,18 +12,18 @@ test("CUSTOMER-INVOICES-PROFORMA-UPDATE-001: modifica referencia y descripción
const reference = `E2E ${proforma.token}`; const reference = `E2E ${proforma.token}`;
const description = `E2E updated draft ${proforma.token}`; const description = `E2E updated draft ${proforma.token}`;
await page.locator('input[name="reference"]').fill(reference); await page.locator('input[name="reference"]').fill(reference);
await page.locator('textarea[name="description"]').fill(description); await page.locator('input[name="description"]').fill(description);
const responsePromise = page.waitForResponse( const responsePromise = page.waitForResponse(
(response) => (response) =>
response.request().method() === "PUT" && response.request().method() === "PUT" &&
new URL(response.url()).pathname.endsWith(`/proformas/${proforma.id}`) new URL(response.url()).pathname.endsWith(`/proformas/${proforma.id}`)
); );
await page.getByTestId("submit-button").click(); await page.getByTestId("proforma-update-submit").click();
expect((await responsePromise).status()).toBe(200); expect((await responsePromise).status()).toBe(200);
await expect(page).toHaveURL((url) => url.pathname === `/proformas/${proforma.id}/edit`); await expect(page).toHaveURL((url) => url.pathname === `/proformas/${proforma.id}/edit`);
await expect(page.locator('input[name="reference"]')).toHaveValue(reference); await expect(page.locator('input[name="reference"]')).toHaveValue(reference);
await expect(page.locator('textarea[name="description"]')).toHaveValue(description); await expect(page.locator('input[name="description"]')).toHaveValue(description);
await page.reload(); await page.reload();
await expect(page.locator('input[name="reference"]')).toHaveValue(reference); await expect(page.locator('input[name="reference"]')).toHaveValue(reference);
await expect(page.locator('textarea[name="description"]')).toHaveValue(description); await expect(page.locator('input[name="description"]')).toHaveValue(description);
}); });