diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html index 06d1463..fa8f3ab 100644 --- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html +++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html @@ -176,4 +176,84 @@ + +
+
+ Tenant Configuration +

Configuración Tenant

+ + +
+
+
+
Logo del Header
+
+ @if (tenant()?.header_logo) { + Header Logo + } @else { +
+ + Sin Logo de Header +
+ } +
+
+
+ +
+
+
Logo del Footer
+
+ @if (tenant()?.footer_logo) { + Footer Logo + } @else { +
+ + Sin Logo de Footer +
+ } +
+
+
+
+ +
+ + +
+

Colores de Marca

+
+
+
+
+
+ Primario + {{ tenant()?.primary_color || 'Default' }} +
+
+
+ +
+
+
+
+ Secundario + {{ tenant()?.secondary_color || 'Default' }} +
+
+
+ +
+
+
+
+ Danger + {{ tenant()?.danger_color || 'Default' }} +
+
+
+
+
+
+
diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss index 3f5ad41..092dfc1 100644 --- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss +++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss @@ -70,6 +70,12 @@ h1 { gap: 0; } +.file-field { + display: grid; + gap: 0.75rem; +} + + .file-field { display: grid; gap: 0.75rem; @@ -86,3 +92,109 @@ h1 { grid-template-columns: minmax(0, 1fr); } } + +.configuracion-tennant { + margin-top: 2rem; + + .tenant-logo-card { + display: flex; + flex-direction: column; + gap: 0.5rem; + + &__label { + font-size: 0.875rem; + font-weight: 600; + color: #495057; + } + + &__container { + display: flex; + align-items: center; + justify-content: center; + height: 120px; + border-radius: 8px; + border: 1px solid #dee2e6; + padding: 1rem; + overflow: hidden; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); + transition: transform 0.2s ease, box-shadow 0.2s ease; + + &:hover { + transform: translateY(-2px); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.08); + } + } + + &__img { + max-height: 100%; + max-width: 100%; + object-fit: contain; + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); + } + + &__placeholder { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: #6c757d; + font-size: 0.875rem; + + i { + font-size: 2rem; + opacity: 0.6; + } + } + } + + .header-footer-bg { + background-color: var(--tenant-header-footer-bg, #f8f9fa); + } + + .color-swatch-card { + display: flex; + flex-direction: column; + border-radius: 8px; + border: 1px solid #dee2e6; + overflow: hidden; + background-color: #ffffff; + transition: transform 0.2s ease, box-shadow 0.2s ease; + + &:hover { + transform: translateY(-3px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important; + } + + &__preview { + height: 80px; + width: 100%; + border-bottom: 1px solid #dee2e6; + transition: opacity 0.2s ease; + + &:hover { + opacity: 0.95; + } + } + + &__body { + padding: 0.75rem 1rem; + display: flex; + flex-direction: column; + gap: 0.25rem; + } + + &__title { + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.05em; + font-weight: 700; + color: #6c757d; + } + + &__value { + font-size: 0.875rem; + color: #212529; + font-family: var(--bs-font-monospace); + } + } +} 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 new file mode 100644 index 0000000..25eb65e --- /dev/null +++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.spec.ts @@ -0,0 +1,66 @@ +import { signal } from '@angular/core'; +import { TestBed } from '@angular/core/testing'; +import { ReutilizablesTestPageComponent } from './reutilizables-test-page.component'; +import { Tenant } from '../../../../core/services/tenant.interface'; +import { TenantService } from '../../../../core/services/tenant.service'; + +const tenant: Tenant = { + id: 1, + codigo: 'test', + nombre: 'Test Tenant', + dominio: 'localhost', + primary_color: '#6376F3', + secondary_color: '#A0A0A0', + danger_color: '#FF8888', + header_footer_bg_color: '#313131', + header_logo: 'https://example.com/header.png', + footer_logo: 'https://example.com/footer.png' +}; + +function createTenantServiceStub(currentTenant: Tenant | null) { + const tenantState = signal(currentTenant); + const statusState = signal<'ready' | 'not-found'>('ready'); + + return { + tenant: tenantState.asReadonly(), + status: statusState.asReadonly(), + getTenant: () => tenantState(), + bootstrap: vi.fn().mockResolvedValue(undefined) + }; +} + +describe('ReutilizablesTestPageComponent', () => { + it('renders the tenant configuration section with logo sources and swatch colors', async () => { + await TestBed.configureTestingModule({ + imports: [ReutilizablesTestPageComponent], + providers: [ + { + provide: TenantService, + useValue: createTenantServiceStub(tenant) + } + ] + }).compileComponents(); + + const fixture = TestBed.createComponent(ReutilizablesTestPageComponent); + fixture.detectChanges(); + + const element = fixture.nativeElement as HTMLElement; + + // Check section title + const sectionTitle = element.querySelector('.configuracion-tennant h2'); + expect(sectionTitle?.textContent).toContain('Configuración Tenant'); + + // Check header logo source + const headerImg = element.querySelector('.tenant-logo-card img[alt="Header Logo"]') as HTMLImageElement; + expect(headerImg?.src).toBe(tenant.header_logo); + + // Check footer logo source + const footerImg = element.querySelector('.tenant-logo-card img[alt="Footer Logo"]') as HTMLImageElement; + expect(footerImg?.src).toBe(tenant.footer_logo); + + // Check color hex values + expect(element.textContent).toContain(tenant.primary_color); + expect(element.textContent).toContain(tenant.secondary_color); + expect(element.textContent).toContain(tenant.danger_color); + }); +}); 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 e1ee059..b212cf6 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 @@ -1,6 +1,7 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { ButtonComponent } from '../../../../shared/components/button/button.component'; import { InputComponent } from '../../../../shared/components/input/input.component'; +import { TenantService } from '../../../../core/services/tenant.service'; @Component({ selector: 'app-reutilizables-test-page', @@ -9,6 +10,8 @@ import { InputComponent } from '../../../../shared/components/input/input.compon styleUrl: './reutilizables-test-page.component.scss' }) export class ReutilizablesTestPageComponent { + private readonly tenantService = inject(TenantService); + protected readonly tenant = this.tenantService.tenant; protected textValue = 'Auriculares'; protected numberValue = '24'; protected email = 'usuario@empresa.com';