tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(qr-modal): implement QR modal component and integrate with tickets page

Browse Source
This commit is contained in:
ncoronel
2026-07-21 14:55:46 -03:00
parent 472dead0ff
commit 3cefaf85d9
10 changed files with 274 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/app/core/services/modal.service.spec.ts
View File

@@ -1,37 +1,23 @@
import '@angular/compiler';
import { Component, inject } from '@angular/core';
import { TestBed, getTestBed } from '@angular/core/testing';
import {
BrowserTestingModule,
platformBrowserTesting
} from '@angular/platform-browser/testing';
import {
afterEach,
beforeAll,
beforeEach,
describe,
expect,
it,
vi
} from 'vitest';
import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
import { firstValueFrom } from 'rxjs';
import { ConfirmDeleteModalComponent } from '../../shared/components/confirm-delete-modal/confirm-delete-modal.component';
import { ConfirmModalComponent } from '../../shared/components/confirm-modal/confirm-modal.component';
import { QrModalComponent } from '../../shared/components/qr-modal/qr-modal.component';
import { SimpleModalComponent } from '../../shared/components/simple-modal/simple-modal.component';
import {
MODAL_DATA,
ModalRef,
ModalService
} from './modal.service';
import { MODAL_DATA, ModalRef, ModalService } from './modal.service';
@Component({
template: ''
template: '',
})
class FirstTestModalComponent {}
@Component({
template: ''
template: '',
})
class SecondTestModalComponent {}
@@ -40,10 +26,7 @@ describe('ModalService', () => {
beforeAll(() => {
try {
getTestBed().initTestEnvironment(
BrowserTestingModule,
platformBrowserTesting()
);
getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting());
} catch {
// Test environment may already be initialized by another setup entrypoint.
}
@@ -55,7 +38,7 @@ describe('ModalService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [ModalService]
providers: [ModalService],
});
service = TestBed.inject(ModalService);
@@ -66,7 +49,7 @@ describe('ModalService', () => {
title: 'Confirmar compra',
data: { productId: 10 },
size: 'lg',
closeOnBackdrop: false
closeOnBackdrop: false,
});
const activeModal = service.activeModal();
@@ -80,7 +63,7 @@ describe('ModalService', () => {
size: 'lg',
closeOnBackdrop: false,
closeOnEscape: true,
showCloseButton: true
showCloseButton: true,
});
});
@@ -115,7 +98,7 @@ describe('ModalService', () => {
firstRef.afterClosed$.subscribe(firstClosedSpy);
const secondRef = service.open(SecondTestModalComponent, {
title: 'Segundo modal'
title: 'Segundo modal',
});
expect(firstClosedSpy).toHaveBeenCalledWith(undefined);
@@ -126,7 +109,7 @@ describe('ModalService', () => {
it('injects MODAL_DATA and ModalRef into opened components through the host injector contract', () => {
const ref = service.open(DataTestModalComponent, {
data: { amount: 3 }
data: { amount: 3 },
});
const activeModal = service.activeModal();
@@ -138,7 +121,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.'
content: 'Esto confirmara la compra actual.',
});
const activeModal = service.activeModal();
@@ -150,19 +133,19 @@ describe('ModalService', () => {
data: {
content: 'Esto confirmara la compra actual.',
confirmLabel: 'Confirmar',
cancelLabel: 'Cancelar'
cancelLabel: 'Cancelar',
},
size: 'md',
closeOnBackdrop: true,
closeOnEscape: true,
showCloseButton: true
showCloseButton: true,
});
});
it('maps the confirm modal close result to true', async () => {
const result$ = service.openConfirm({
title: 'Confirmar compra',
content: 'Esto confirmara la compra actual.'
content: 'Esto confirmara la compra actual.',
});
const activeModal = service.activeModal();
const resultPromise = firstValueFrom(result$);
@@ -175,7 +158,7 @@ describe('ModalService', () => {
it('maps dismissing a confirm modal to false', async () => {
const result$ = service.openConfirmDelete({
title: 'Eliminar producto',
content: 'Se eliminara el producto.'
content: 'Se eliminara el producto.',
});
const activeModal = service.activeModal();
const resultPromise = firstValueFrom(result$);
@@ -194,7 +177,7 @@ describe('ModalService', () => {
size: 'lg',
closeOnBackdrop: false,
closeOnEscape: false,
showCloseButton: false
showCloseButton: false,
});
const activeModal = service.activeModal();
@@ -205,19 +188,19 @@ describe('ModalService', () => {
data: {
content: 'Se eliminara el producto.',
confirmLabel: 'Eliminar',
cancelLabel: 'Conservar'
cancelLabel: 'Conservar',
},
size: 'lg',
closeOnBackdrop: false,
closeOnEscape: false,
showCloseButton: false
showCloseButton: false,
});
});
it('opens the simple modal with default button label', () => {
service.openSimple({
title: 'Aviso',
content: 'Este es un aviso simple.'
content: 'Este es un aviso simple.',
});
const activeModal = service.activeModal();
@@ -227,19 +210,19 @@ describe('ModalService', () => {
title: 'Aviso',
data: {
content: 'Este es un aviso simple.',
buttonLabel: 'Entendido'
buttonLabel: 'Entendido',
},
size: 'md',
closeOnBackdrop: true,
closeOnEscape: true,
showCloseButton: true
showCloseButton: true,
});
});
it('maps the simple modal close result to undefined', async () => {
const result$ = service.openSimple({
title: 'Aviso',
content: 'Este es un aviso simple.'
content: 'Este es un aviso simple.',
});
const activeModal = service.activeModal();
const resultPromise = firstValueFrom(result$);
@@ -248,10 +231,35 @@ describe('ModalService', () => {
await expect(resultPromise).resolves.toBeUndefined();
});
it('opens the QR modal with the ticket information and compact size', () => {
service.openQr({
title: 'Entrada general',
id: 42,
date: '09 de octubre',
ticket: 'ticket-payload',
});
const activeModal = service.activeModal();
expect(activeModal?.component).toBe(QrModalComponent);
expect(activeModal?.config).toEqual({
title: 'Entrada general',
data: {
id: 42,
date: '09 de octubre',
ticket: 'ticket-payload',
},
size: 'qr',
closeOnBackdrop: true,
closeOnEscape: true,
showCloseButton: true,
});
});
});
@Component({
template: ''
template: '',
})
class DataTestModalComponent {
readonly data = inject(MODAL_DATA);

121
src/app/core/services/modal.service.ts
View File

@@ -2,14 +2,11 @@ import { InjectionToken, Injectable, Type, signal } from '@angular/core';
import { Observable, Subject, map } from 'rxjs';
import { ConfirmDeleteModalComponent } from '../../shared/components/confirm-delete-modal/confirm-delete-modal.component';
import { ConfirmModalComponent } from '../../shared/components/confirm-modal/confirm-modal.component';
import { QrModalComponent } from '../../shared/components/qr-modal/qr-modal.component';
import { SimpleModalComponent } from '../../shared/components/simple-modal/simple-modal.component';
export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
export type ModalDismissReason =
| 'backdrop'
| 'escape'
| 'programmatic'
| 'replaced';
export type ModalSize = 'qr' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
export type ModalDismissReason = 'backdrop' | 'escape' | 'programmatic' | 'replaced';
export interface ModalConfig<TData = unknown> {
title?: string;
@@ -20,11 +17,10 @@ export interface ModalConfig<TData = unknown> {
showCloseButton?: boolean;
}
export interface NormalizedModalConfig<TData = unknown>
extends Omit<
ModalConfig<TData>,
'size' | 'closeOnBackdrop' | 'closeOnEscape' | 'showCloseButton'
> {
export interface NormalizedModalConfig<TData = unknown> extends Omit<
ModalConfig<TData>,
'size' | 'closeOnBackdrop' | 'closeOnEscape' | 'showCloseButton'
> {
size: ModalSize;
closeOnBackdrop: boolean;
closeOnEscape: boolean;
@@ -37,8 +33,7 @@ export interface ConfirmModalData {
cancelLabel: string;
}
export interface ConfirmModalConfig
extends Omit<ModalConfig<ConfirmModalData>, 'data'> {
export interface ConfirmModalConfig extends Omit<ModalConfig<ConfirmModalData>, 'data'> {
content: string;
confirmLabel?: string;
cancelLabel?: string;
@@ -49,12 +44,24 @@ export interface SimpleModalData {
buttonLabel: string;
}
export interface SimpleModalConfig
extends Omit<ModalConfig<SimpleModalData>, 'data'> {
export interface SimpleModalConfig extends Omit<ModalConfig<SimpleModalData>, 'data'> {
content: string;
buttonLabel?: string;
}
export interface QrModalData {
id: string | number;
date: string;
ticket: string;
}
export interface QrModalConfig extends Omit<ModalConfig<QrModalData>, 'data' | 'title'> {
title: string;
id: string | number;
date: string;
ticket: string;
}
export interface ActiveModalState<TResult = unknown, TData = unknown> {
component: Type<unknown>;
config: NormalizedModalConfig<TData>;
@@ -70,25 +77,24 @@ const DEFAULT_MODAL_CONFIG: Pick<
size: 'md',
closeOnBackdrop: true,
closeOnEscape: true,
showCloseButton: true
showCloseButton: true,
};
const DEFAULT_CONFIRM_MODAL_LABELS = {
confirmLabel: 'Confirmar',
cancelLabel: 'Cancelar'
cancelLabel: 'Cancelar',
} satisfies Pick<ConfirmModalData, 'confirmLabel' | 'cancelLabel'>;
export class ModalRef<TResult = unknown> {
private readonly afterClosedSubject = new Subject<TResult | undefined>();
private closed = false;
readonly afterClosed$: Observable<TResult | undefined> =
this.afterClosedSubject.asObservable();
readonly afterClosed$: Observable<TResult | undefined> = this.afterClosedSubject.asObservable();
readonly dismissReason = signal<ModalDismissReason | null>(null);
constructor(
private readonly closeHandler: (result?: TResult) => void,
private readonly dismissHandler: (reason: ModalDismissReason) => void
private readonly dismissHandler: (reason: ModalDismissReason) => void,
) {}
close(result?: TResult): void {
@@ -120,7 +126,7 @@ export class ModalRef<TResult = unknown> {
}
@Injectable({
providedIn: 'root'
providedIn: 'root',
})
export class ModalService {
private readonly activeModalState = signal<ActiveModalState | null>(null);
@@ -128,35 +134,31 @@ export class ModalService {
open<TComponent, TResult = unknown, TData = unknown>(
component: Type<TComponent>,
config: ModalConfig<TData> = {}
config: ModalConfig<TData> = {},
): ModalRef<TResult> {
this.activeModalState()?.ref.dismiss('replaced');
let ref!: ModalRef<TResult>;
ref = new ModalRef<TResult>(
(result) => this.close(ref, result),
(reason) => this.dismiss(ref, reason)
(reason) => this.dismiss(ref, reason),
);
this.activeModalState.set({
component,
config: this.normalizeConfig(config),
ref: ref as ModalRef<unknown>
ref: ref as ModalRef<unknown>,
});
return ref;
}
openConfirm(config: ConfirmModalConfig): Observable<boolean> {
return this.openConfirmRef(config).afterClosed$.pipe(
map((result) => result === true)
);
return this.openConfirmRef(config).afterClosed$.pipe(map((result) => result === true));
}
openConfirmDelete(config: ConfirmModalConfig): Observable<boolean> {
return this.openConfirmDeleteRef(config).afterClosed$.pipe(
map((result) => result === true)
);
return this.openConfirmDeleteRef(config).afterClosed$.pipe(map((result) => result === true));
}
openConfirmRef(config: ConfirmModalConfig): ModalRef<boolean> {
@@ -164,23 +166,30 @@ export class ModalService {
}
openConfirmDeleteRef(config: ConfirmModalConfig): ModalRef<boolean> {
return this.open(
ConfirmDeleteModalComponent,
this.buildConfirmModalConfig(config)
);
return this.open(ConfirmDeleteModalComponent, this.buildConfirmModalConfig(config));
}
openSimple(config: SimpleModalConfig): Observable<void> {
return this.openSimpleRef(config).afterClosed$.pipe(
map(() => undefined)
);
return this.openSimpleRef(config).afterClosed$.pipe(map(() => undefined));
}
openSimpleRef(config: SimpleModalConfig): ModalRef<void> {
return this.open(
SimpleModalComponent,
this.buildSimpleModalConfig(config)
);
return this.open(SimpleModalComponent, this.buildSimpleModalConfig(config));
}
openQr(config: QrModalConfig): Observable<void> {
return this.openQrRef(config).afterClosed$.pipe(map(() => undefined));
}
openQrRef(config: QrModalConfig): ModalRef<void> {
const { title, id, date, ticket, size = 'qr', ...modalConfig } = config;
return this.open(QrModalComponent, {
...modalConfig,
title,
size,
data: { id, date, ticket },
});
}
private close<TResult>(ref: ModalRef<TResult>, result?: TResult): void {
@@ -194,7 +203,7 @@ export class ModalService {
private dismiss<TResult>(
ref: ModalRef<TResult>,
reason: ModalDismissReason = 'programmatic'
reason: ModalDismissReason = 'programmatic',
): void {
if (this.activeModalState()?.ref !== ref) {
return;
@@ -204,18 +213,14 @@ export class ModalService {
this.activeModalState.set(null);
}
private normalizeConfig<TData>(
config: ModalConfig<TData>
): NormalizedModalConfig<TData> {
private normalizeConfig<TData>(config: ModalConfig<TData>): NormalizedModalConfig<TData> {
return {
...DEFAULT_MODAL_CONFIG,
...config
...config,
};
}
private buildConfirmModalConfig(
config: ConfirmModalConfig
): ModalConfig<ConfirmModalData> {
private buildConfirmModalConfig(config: ConfirmModalConfig): ModalConfig<ConfirmModalData> {
const {
content,
confirmLabel = DEFAULT_CONFIRM_MODAL_LABELS.confirmLabel,
@@ -228,26 +233,20 @@ export class ModalService {
data: {
content,
confirmLabel,
cancelLabel
}
cancelLabel,
},
};
}
private buildSimpleModalConfig(
config: SimpleModalConfig
): ModalConfig<SimpleModalData> {
const {
content,
buttonLabel = 'Entendido',
...modalConfig
} = config;
private buildSimpleModalConfig(config: SimpleModalConfig): ModalConfig<SimpleModalData> {
const { content, buttonLabel = 'Entendido', ...modalConfig } = config;
return {
...modalConfig,
data: {
content,
buttonLabel
}
buttonLabel,
},
};
}
}