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

feat(menu): refactor menu handling to use labels directly and remove unused functions

Browse Source
This commit is contained in:
ncoronel
2026-07-24 10:12:11 -03:00
parent 974f947fc6
commit 752c5fceea
17 changed files with 130 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.html
View File

@@ -1,10 +1,10 @@
<div class="sidebar-container">
<h2 class="sidebar-title">MI CUENTA</h2>
<h2 class="sidebar-title">{{ menu()?.label }}</h2>
<div class="divider"></div>
<nav class="sidebar-nav" aria-label="Secciones de mi cuenta">
@for (menu of submenues(); track menu.code) {
<a [routerLink]="menu.route" routerLinkActive="active" class="nav-link">
{{ menuLabel(menu) }}
{{ menu.label }}
</a>
}
</nav>

1
src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.scss
View File

@@ -7,6 +7,7 @@
font-weight: bold;
color: #1a1a1a;
margin-bottom: 12px;
text-transform: uppercase;
}
.divider {
height: 1px;

8
src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.spec.ts
View File

@@ -26,13 +26,15 @@ describe('AccountSidebar', () => {
{
id: 1,
code: 'account',
label: 'Mi cuenta',
parent_menu_code: null,
content_type: 'dynamic',
route: '/mi-cuenta',
submenues: [
{
id: 2,
code: 'profile',
code: 'account.profile',
label: 'Datos personales',
parent_menu_code: 'account',
content_type: 'dynamic',
route: '/mi-cuenta/datos-personales',
@@ -40,7 +42,8 @@ describe('AccountSidebar', () => {
},
{
id: 3,
code: 'purchases',
code: 'account.purchases',
label: 'Mis compras',
parent_menu_code: 'account',
content_type: 'dynamic',
route: '/mi-cuenta/compras',
@@ -68,6 +71,7 @@ describe('AccountSidebar', () => {
const element = fixture.nativeElement as HTMLElement;
const links = Array.from(element.querySelectorAll<HTMLAnchorElement>('.nav-link'));
expect(element.querySelector('.sidebar-title')?.textContent?.trim()).toBe('Mi cuenta');
expect(links.map((link) => link.textContent?.trim())).toEqual([
'Datos personales',
'Mis compras',

12
src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.ts
View File

@@ -1,8 +1,7 @@
import { Component, computed, inject } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { findMenu, getMenuLabel } from '../../../../../../core/services/menu.utils';
import { Menu } from '../../../../../../core/services/tenant.interface';
import { findMenu } from '../../../../../../core/services/menu.utils';
import { TenantService } from '../../../../../../core/services/tenant.service';
@Component({
@@ -15,11 +14,8 @@ import { TenantService } from '../../../../../../core/services/tenant.service';
export class AccountSidebar {
private readonly tenantService = inject(TenantService);
protected readonly submenues = computed(
() => findMenu(this.tenantService.tenant()?.menues ?? [], 'account')?.submenues ?? [],
protected readonly menu = computed(() =>
findMenu(this.tenantService.tenant()?.menues ?? [], 'account'),
);
protected menuLabel(menu: Menu): string {
return getMenuLabel(menu);
}
protected readonly submenues = computed(() => this.menu()?.submenues ?? []);
}

4
src/app/features/store/pages/help-page/components/help-sidebar/help-sidebar.html
View File

@@ -1,5 +1,5 @@
<aside class="help-sidebar">
<h1 class="help-sidebar__title">AYUDA</h1>
<h1 class="help-sidebar__title">{{ menu()?.label }}</h1>
<div class="help-sidebar__divider"></div>
<nav class="help-sidebar__nav" aria-label="Secciones de ayuda">
@@ -9,7 +9,7 @@
[routerLink]="menu.route"
routerLinkActive="help-sidebar__link--active"
>
{{ menuLabel(menu) }}
{{ menu.label }}
</a>
}
</nav>

1
src/app/features/store/pages/help-page/components/help-sidebar/help-sidebar.scss
View File

@@ -9,6 +9,7 @@
font-size: 1rem;
font-weight: 700;
line-height: 1.25;
text-transform: uppercase;
}
.help-sidebar__divider {

71
src/app/features/store/pages/help-page/components/help-sidebar/help-sidebar.spec.ts Normal file
View File

@@ -0,0 +1,71 @@
import { signal } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { provideRouter } from '@angular/router';
import { describe, expect, it } from 'vitest';
import { Tenant } from '../../../../../../core/services/tenant.interface';
import { TenantService } from '../../../../../../core/services/tenant.service';
import { HelpSidebar } from './help-sidebar';
describe('HelpSidebar', () => {
it('renders the parent and submenu labels supplied by the tenant', async () => {
const tenant = signal<Tenant>({
id: 1,
codigo: 'test',
nombre: 'Test',
dominio: 'localhost',
primary_color: '#000000',
secondary_color: '#000000',
danger_color: '#000000',
success_color: '#000000',
header_bg_color: '#ffffff',
footer_bg_color: '#ffffff',
header_logo: '',
footer_logo: '',
menues: [
{
id: 1,
code: 'help',
label: 'Centro de ayuda',
parent_menu_code: null,
content_type: 'dynamic',
route: '/ayuda',
submenues: [
{
id: 2,
code: 'help.faq',
label: 'Consultas habituales',
parent_menu_code: 'help',
content_type: 'dynamic',
route: '/ayuda/preguntas-frecuentes',
submenues: [],
},
],
},
],
});
await TestBed.configureTestingModule({
imports: [HelpSidebar],
providers: [
provideRouter([]),
{
provide: TenantService,
useValue: { tenant: tenant.asReadonly() },
},
],
}).compileComponents();
const fixture = TestBed.createComponent(HelpSidebar);
fixture.detectChanges();
const element = fixture.nativeElement as HTMLElement;
expect(element.querySelector('.help-sidebar__title')?.textContent?.trim()).toBe(
'Centro de ayuda',
);
expect(element.querySelector('.help-sidebar__link')?.textContent?.trim()).toBe(
'Consultas habituales',
);
});
});

12
src/app/features/store/pages/help-page/components/help-sidebar/help-sidebar.ts
View File

@@ -1,8 +1,7 @@
import { Component, computed, inject } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { findMenu, getMenuLabel } from '../../../../../../core/services/menu.utils';
import { Menu } from '../../../../../../core/services/tenant.interface';
import { findMenu } from '../../../../../../core/services/menu.utils';
import { TenantService } from '../../../../../../core/services/tenant.service';
@Component({
@@ -14,11 +13,8 @@ import { TenantService } from '../../../../../../core/services/tenant.service';
export class HelpSidebar {
private readonly tenantService = inject(TenantService);
protected readonly submenues = computed(
() => findMenu(this.tenantService.tenant()?.menues ?? [], 'help')?.submenues ?? [],
protected readonly menu = computed(() =>
findMenu(this.tenantService.tenant()?.menues ?? [], 'help'),
);
protected menuLabel(menu: Menu): string {
return getMenuLabel(menu);
}
protected readonly submenues = computed(() => this.menu()?.submenues ?? []);
}

2
src/app/features/store/pages/help-page/pages/contact-page/contact-page.spec.ts
View File

@@ -22,6 +22,7 @@ const tenant: Tenant = {
{
id: 1,
code: 'help',
label: 'Ayuda',
parent_menu_code: null,
content_type: 'dynamic',
route: '/ayuda',
@@ -29,6 +30,7 @@ const tenant: Tenant = {
{
id: 2,
code: 'help.contact',
label: 'Contacto',
parent_menu_code: 'help',
content_type: 'static',
route: '/ayuda/contacto',

2
src/app/features/store/pages/help-page/pages/faq-page/faq-page.spec.ts
View File

@@ -22,6 +22,7 @@ const tenant: Tenant = {
{
id: 1,
code: 'help',
label: 'Ayuda',
parent_menu_code: null,
content_type: 'dynamic',
route: '/ayuda',
@@ -29,6 +30,7 @@ const tenant: Tenant = {
{
id: 2,
code: 'help.faq',
label: 'Preguntas frecuentes',
parent_menu_code: 'help',
content_type: 'static',
route: '/ayuda/preguntas-frecuentes',

6
src/app/features/store/store.routes.ts
View File

@@ -121,7 +121,7 @@ export const routes: Routes = [
children: [
{
path: 'datos-personales',
canActivate: [hasMenuGuard('profile')],
canActivate: [hasMenuGuard('account.profile')],
loadComponent: () =>
import('./pages/account-page/pages/profile-page/profile-page').then(
(m) => m.ProfilePage,
@@ -129,7 +129,7 @@ export const routes: Routes = [
},
{
path: 'compras',
canActivate: [hasMenuGuard('purchases')],
canActivate: [hasMenuGuard('account.purchases')],
loadComponent: () =>
import('./pages/account-page/pages/purchases-page/purchases-page').then(
(m) => m.PurchasesPage,
@@ -144,7 +144,7 @@ export const routes: Routes = [
},
{
path: 'tickets',
canActivate: [hasMenuGuard('tickets')],
canActivate: [hasMenuGuard('account.tickets')],
loadComponent: () =>
import('./pages/account-page/pages/tickets-page/tickets-page').then(
(m) => m.TicketsPage,