diff --git a/src/app/core/services/modal.service.spec.ts b/src/app/core/services/modal.service.spec.ts index c6ece6b..12e140d 100644 --- a/src/app/core/services/modal.service.spec.ts +++ b/src/app/core/services/modal.service.spec.ts @@ -122,7 +122,7 @@ describe('ModalService', () => { it('opens the standard confirm modal with default labels', () => { const result$ = service.openConfirm({ title: 'Confirmar compra', - content: 'Esto confirmara la compra actual.', + description: 'Esto confirmara la compra actual.', }); const activeModal = service.activeModal(); @@ -130,9 +130,9 @@ describe('ModalService', () => { expect(activeModal?.component).toBe(ConfirmModalComponent); expect(result$).toBeDefined(); expect(activeModal?.config).toEqual({ - title: 'Confirmar compra', data: { - content: 'Esto confirmara la compra actual.', + title: 'Confirmar compra', + description: 'Esto confirmara la compra actual.', confirmLabel: 'Confirmar', cancelLabel: 'Cancelar', }, @@ -146,7 +146,7 @@ describe('ModalService', () => { it('maps the confirm modal close result to true', async () => { const result$ = service.openConfirm({ title: 'Confirmar compra', - content: 'Esto confirmara la compra actual.', + description: 'Esto confirmara la compra actual.', }); const activeModal = service.activeModal(); const resultPromise = firstValueFrom(result$); @@ -159,7 +159,7 @@ describe('ModalService', () => { it('maps dismissing a confirm modal to false', async () => { const result$ = service.openConfirmDelete({ title: 'Eliminar producto', - content: 'Se eliminara el producto.', + description: 'Se eliminara el producto.', }); const activeModal = service.activeModal(); const resultPromise = firstValueFrom(result$); @@ -174,7 +174,7 @@ describe('ModalService', () => { it('opens the delete confirm modal preserving modal overrides', () => { service.openConfirmDelete({ title: 'Eliminar producto', - content: 'Se eliminara el producto.', + description: 'Se eliminara el producto.', confirmLabel: 'Eliminar', cancelLabel: 'Conservar', size: 'lg', @@ -187,9 +187,9 @@ describe('ModalService', () => { expect(activeModal?.component).toBe(ConfirmDeleteModalComponent); expect(activeModal?.config).toEqual({ - title: 'Eliminar producto', data: { - content: 'Se eliminara el producto.', + title: 'Eliminar producto', + description: 'Se eliminara el producto.', confirmLabel: 'Eliminar', cancelLabel: 'Conservar', }, @@ -203,16 +203,16 @@ describe('ModalService', () => { it('opens the simple modal with default button label', () => { service.openSimple({ title: 'Aviso', - content: 'Este es un aviso simple.', + description: 'Este es un aviso simple.', }); const activeModal = service.activeModal(); expect(activeModal?.component).toBe(SimpleModalComponent); expect(activeModal?.config).toEqual({ - title: 'Aviso', data: { - content: 'Este es un aviso simple.', + title: 'Aviso', + description: 'Este es un aviso simple.', buttonLabel: 'Entendido', }, size: 'md', @@ -225,7 +225,7 @@ describe('ModalService', () => { it('maps the simple modal close result to undefined', async () => { const result$ = service.openSimple({ title: 'Aviso', - content: 'Este es un aviso simple.', + description: 'Este es un aviso simple.', }); const activeModal = service.activeModal(); const resultPromise = firstValueFrom(result$); diff --git a/src/app/core/services/modal.service.ts b/src/app/core/services/modal.service.ts index 54d5915..958631f 100644 --- a/src/app/core/services/modal.service.ts +++ b/src/app/core/services/modal.service.ts @@ -31,24 +31,28 @@ export interface NormalizedModalConfig extends Omit< } export interface ConfirmModalData { - content: string; + title: string; + description?: string; confirmLabel: string; cancelLabel: string; } export interface ConfirmModalConfig extends Omit, 'data'> { - content: string; + title: string; + description?: string; confirmLabel?: string; cancelLabel?: string; } export interface SimpleModalData { - content: string; + title: string; + description?: string; buttonLabel: string; } export interface SimpleModalConfig extends Omit, 'data'> { - content: string; + title: string; + description?: string; buttonLabel?: string; } @@ -274,7 +278,8 @@ export class ModalService { private buildConfirmModalConfig(config: ConfirmModalConfig): ModalConfig { const { - content, + title, + description, confirmLabel = DEFAULT_CONFIRM_MODAL_LABELS.confirmLabel, cancelLabel = DEFAULT_CONFIRM_MODAL_LABELS.cancelLabel, ...modalConfig @@ -283,7 +288,8 @@ export class ModalService { return { ...modalConfig, data: { - content, + title, + description, confirmLabel, cancelLabel, }, @@ -291,12 +297,13 @@ export class ModalService { } private buildSimpleModalConfig(config: SimpleModalConfig): ModalConfig { - const { content, buttonLabel = 'Entendido', ...modalConfig } = config; + const { title, description, buttonLabel = 'Entendido', ...modalConfig } = config; return { ...modalConfig, data: { - content, + title, + description, buttonLabel, }, }; diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.spec.ts b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.spec.ts index 25d24fb..8789d85 100644 --- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.spec.ts +++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.spec.ts @@ -299,12 +299,12 @@ describe('ReutilizablesTestPageComponent', () => { expect(modalServiceStub.openConfirm).toHaveBeenCalledWith({ title: 'Confirmar accion', - content: 'Caso base para verificar apertura, cierre y devolucion de resultado.', + description: 'Caso base para verificar apertura, cierre y devolucion de resultado.', confirmLabel: 'Confirmar', }); expect(modalServiceStub.openConfirmDelete).toHaveBeenCalledWith({ title: 'Eliminar producto', - content: + description: 'Esta accion eliminara el producto del catalogo. Podras volver a crearlo manualmente.', confirmLabel: 'Eliminar', }); diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts index e7c3cac..3a1c48b 100644 --- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts +++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts @@ -448,7 +448,7 @@ export class ReutilizablesTestPageComponent { protected openBasicModal(): void { this.openConfirmModal({ title: 'Confirmar accion', - content: 'Caso base para verificar apertura, cierre y devolucion de resultado.', + description: 'Caso base para verificar apertura, cierre y devolucion de resultado.', confirmLabel: 'Confirmar', }); } @@ -456,7 +456,7 @@ export class ReutilizablesTestPageComponent { protected openConfirmDeleteModal(): void { this.openConfirmDelete({ title: 'Eliminar producto', - content: + description: 'Esta accion eliminara el producto del catalogo. Podras volver a crearlo manualmente.', confirmLabel: 'Eliminar', }); @@ -465,7 +465,7 @@ export class ReutilizablesTestPageComponent { protected openLockedModal(): void { this.openConfirmModal({ title: 'Modal bloqueado', - content: 'Este modal no se cierra tocando el backdrop ni con la tecla Escape.', + description: 'Este modal no se cierra tocando el backdrop ni con la tecla Escape.', confirmLabel: 'Entendido', closeOnBackdrop: false, closeOnEscape: false, @@ -475,7 +475,7 @@ export class ReutilizablesTestPageComponent { protected openWideModal(): void { this.openConfirmModal({ title: 'Modal ancho', - content: 'Demuestra una variante visual mas amplia para contenido mas pesado.', + description: 'Demuestra una variante visual mas amplia para contenido mas pesado.', confirmLabel: 'Seguir', size: 'xl', }); @@ -485,7 +485,7 @@ export class ReutilizablesTestPageComponent { this.modalService .openSimple({ title: 'Mensaje del sistema', - content: 'Este es un mensaje simple del sistema que no requiere confirmación.', + description: 'Este es un mensaje simple del sistema que no requiere confirmación.', buttonLabel: 'Entendido', }) .subscribe(() => { diff --git a/src/app/features/store/pages/register-page/register-page.component.spec.ts b/src/app/features/store/pages/register-page/register-page.component.spec.ts index 1376ffb..f418c2a 100644 --- a/src/app/features/store/pages/register-page/register-page.component.spec.ts +++ b/src/app/features/store/pages/register-page/register-page.component.spec.ts @@ -105,7 +105,7 @@ describe('RegisterPageComponent', () => { password_confirmation: 'Secret!123' }); expect(modalService.openSimple).toHaveBeenCalledWith({ - content: 'Tu cuenta fue creada correctamente', + title: 'Tu cuenta fue creada correctamente', buttonLabel: 'Cerrar' }); expect(navigateSpy).toHaveBeenCalledWith(['/login']); diff --git a/src/app/features/store/pages/register-page/register-page.component.ts b/src/app/features/store/pages/register-page/register-page.component.ts index 11d689a..fdad033 100644 --- a/src/app/features/store/pages/register-page/register-page.component.ts +++ b/src/app/features/store/pages/register-page/register-page.component.ts @@ -93,7 +93,7 @@ export class RegisterPageComponent { next: () => { this.isSubmittingState.set(false); this.modalService.openSimple({ - content: 'Tu cuenta fue creada correctamente', + title: 'Tu cuenta fue creada correctamente', buttonLabel: 'Cerrar' }).subscribe(() => { void this.router.navigate(['/login']); diff --git a/src/app/features/store/pages/reset-password-page/reset-password-page.component.spec.ts b/src/app/features/store/pages/reset-password-page/reset-password-page.component.spec.ts index 636af77..4434911 100644 --- a/src/app/features/store/pages/reset-password-page/reset-password-page.component.spec.ts +++ b/src/app/features/store/pages/reset-password-page/reset-password-page.component.spec.ts @@ -144,7 +144,7 @@ describe('ResetPasswordPageComponent', () => { password_confirmation: 'Secret!123', }); expect(modalService.openSimple).toHaveBeenCalledWith({ - content: 'Contraseña modificada correctamente', + title: 'Contraseña modificada correctamente', buttonLabel: 'Cerrar', }); expect(navigateSpy).toHaveBeenCalledWith(['/login']); diff --git a/src/app/features/store/pages/reset-password-page/reset-password-page.component.ts b/src/app/features/store/pages/reset-password-page/reset-password-page.component.ts index b320af8..e2bc430 100644 --- a/src/app/features/store/pages/reset-password-page/reset-password-page.component.ts +++ b/src/app/features/store/pages/reset-password-page/reset-password-page.component.ts @@ -155,7 +155,7 @@ export class ResetPasswordPageComponent { this.modalService .openSimple({ - content: 'Contraseña modificada correctamente', + title: 'Contraseña modificada correctamente', buttonLabel: 'Cerrar', }) .subscribe(() => { diff --git a/src/app/shared/components/cart/cart.component.spec.ts b/src/app/shared/components/cart/cart.component.spec.ts index ebb46da..b367a0d 100644 --- a/src/app/shared/components/cart/cart.component.spec.ts +++ b/src/app/shared/components/cart/cart.component.spec.ts @@ -115,7 +115,7 @@ describe('CartComponent', () => { expect(openConfirmDelete).toHaveBeenCalledWith({ title: 'Eliminar producto', - content: 'Se eliminará “Producto de prueba” del carrito. Esta acción no se puede deshacer.', + description: 'Se eliminará “Producto de prueba” del carrito. Esta acción no se puede deshacer.', confirmLabel: 'Eliminar', cancelLabel: 'Cancelar', }); diff --git a/src/app/shared/components/cart/cart.component.ts b/src/app/shared/components/cart/cart.component.ts index 2fed061..e0b4e70 100644 --- a/src/app/shared/components/cart/cart.component.ts +++ b/src/app/shared/components/cart/cart.component.ts @@ -236,7 +236,7 @@ export class CartComponent { this.modalService .openConfirmDelete({ title: 'Eliminar producto', - content: `Se eliminará “${target.productName}” del carrito. Esta acción no se puede deshacer.`, + description: `Se eliminará “${target.productName}” del carrito. Esta acción no se puede deshacer.`, confirmLabel: 'Eliminar', cancelLabel: 'Cancelar', }) diff --git a/src/app/shared/components/confirm-delete-modal/confirm-delete-modal.component.html b/src/app/shared/components/confirm-delete-modal/confirm-delete-modal.component.html index 258a70b..d9a82b4 100644 --- a/src/app/shared/components/confirm-delete-modal/confirm-delete-modal.component.html +++ b/src/app/shared/components/confirm-delete-modal/confirm-delete-modal.component.html @@ -1,5 +1,8 @@
-

{{ data.content }}

+

{{ data.title }}

+ @if (data.description) { +

{{ data.description }}

+ }
diff --git a/src/app/shared/components/confirm-delete-modal/confirm-delete-modal.component.spec.ts b/src/app/shared/components/confirm-delete-modal/confirm-delete-modal.component.spec.ts index d38423f..defa998 100644 --- a/src/app/shared/components/confirm-delete-modal/confirm-delete-modal.component.spec.ts +++ b/src/app/shared/components/confirm-delete-modal/confirm-delete-modal.component.spec.ts @@ -15,7 +15,7 @@ import { ConfirmDeleteModalComponent } from './confirm-delete-modal.component'; describe('ConfirmDeleteModalComponent', () => { const data: ConfirmModalData = { - content: 'Se eliminara el elemento seleccionado.', + title: 'Se eliminara el elemento seleccionado.', confirmLabel: 'Eliminar', cancelLabel: 'Cancelar' }; @@ -58,7 +58,7 @@ describe('ConfirmDeleteModalComponent', () => { const element = fixture.nativeElement as HTMLElement; const buttons = element.querySelectorAll('button'); - expect(element.textContent).toContain(data.content); + expect(element.textContent).toContain(data.title); expect(element.textContent).toContain(data.confirmLabel); expect(buttons[1].className).toContain('btn-danger'); }); diff --git a/src/app/shared/components/confirm-modal/confirm-modal.component.html b/src/app/shared/components/confirm-modal/confirm-modal.component.html index 4c3c61f..52a14b0 100644 --- a/src/app/shared/components/confirm-modal/confirm-modal.component.html +++ b/src/app/shared/components/confirm-modal/confirm-modal.component.html @@ -1,5 +1,8 @@
-

{{ data.content }}

+

{{ data.title }}

+ @if (data.description) { +

{{ data.description }}

+ }
diff --git a/src/app/shared/components/confirm-modal/confirm-modal.component.spec.ts b/src/app/shared/components/confirm-modal/confirm-modal.component.spec.ts index f2e8a09..87d0f01 100644 --- a/src/app/shared/components/confirm-modal/confirm-modal.component.spec.ts +++ b/src/app/shared/components/confirm-modal/confirm-modal.component.spec.ts @@ -15,7 +15,7 @@ import { ConfirmModalComponent } from './confirm-modal.component'; describe('ConfirmModalComponent', () => { const data: ConfirmModalData = { - content: 'Se confirmara la operacion seleccionada.', + title: 'Se confirmara la operacion seleccionada.', confirmLabel: 'Aceptar', cancelLabel: 'Volver' }; @@ -57,7 +57,7 @@ describe('ConfirmModalComponent', () => { const element = fixture.nativeElement as HTMLElement; - expect(element.textContent).toContain(data.content); + expect(element.textContent).toContain(data.title); expect(element.textContent).toContain(data.confirmLabel); expect(element.textContent).toContain(data.cancelLabel); }); diff --git a/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.ts b/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.ts index 7d96ec7..f271b1c 100644 --- a/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.ts +++ b/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.ts @@ -176,7 +176,7 @@ export class ProductTicketSelectorComponent { this.modalService .openConfirmDelete({ title: 'Eliminar entrada', - content: `Se eliminará esta entrada de “${this.title()}”. Si ya estaba reservada, se liberará del carrito.`, + description: `Se eliminará esta entrada de “${this.title()}”. Si ya estaba reservada, se liberará del carrito.`, confirmLabel: 'Sí, eliminar', cancelLabel: 'Cancelar', size: 'md', diff --git a/src/app/shared/components/simple-modal/simple-modal.component.html b/src/app/shared/components/simple-modal/simple-modal.component.html index 98bf529..c429045 100644 --- a/src/app/shared/components/simple-modal/simple-modal.component.html +++ b/src/app/shared/components/simple-modal/simple-modal.component.html @@ -1,5 +1,8 @@
-

{{ data.content }}

+

{{ data.title }}

+ @if (data.description) { +

{{ data.description }}

+ }
diff --git a/src/app/shared/components/simple-modal/simple-modal.component.spec.ts b/src/app/shared/components/simple-modal/simple-modal.component.spec.ts index 5f5add8..1614ada 100644 --- a/src/app/shared/components/simple-modal/simple-modal.component.spec.ts +++ b/src/app/shared/components/simple-modal/simple-modal.component.spec.ts @@ -15,7 +15,7 @@ import { SimpleModalComponent } from './simple-modal.component'; describe('SimpleModalComponent', () => { const data: SimpleModalData = { - content: 'Este es un mensaje simple.', + title: 'Este es un mensaje simple.', buttonLabel: 'Entendido' }; @@ -56,7 +56,7 @@ describe('SimpleModalComponent', () => { const element = fixture.nativeElement as HTMLElement; - expect(element.textContent).toContain(data.content); + expect(element.textContent).toContain(data.title); expect(element.textContent).toContain(data.buttonLabel); });