From b0c5c5e051caf5cf9eefa7b8df3deed800da2d04 Mon Sep 17 00:00:00 2001 From: sdarbinyan Date: Sun, 5 Jul 2026 03:37:35 +0400 Subject: [PATCH] feat static pages system with dynamic footer and safe html rendering --- src/app/app.routes.ts | 8 + .../components/footer/footer.component.html | 45 ++++- src/app/components/footer/footer.component.ts | 157 ++++++++++++++++- .../config/static-page-resolver.service.ts | 158 ++++++++++++++++++ .../static-page/static-page.component.html | 18 ++ .../static-page/static-page.component.scss | 39 +++++ .../static-page/static-page.component.ts | 82 +++++++++ .../models/config/bootstrap-config.model.ts | 2 + src/app/shared/models/config/index.ts | 1 + .../shared/models/config/navigation.model.ts | 30 +++- .../shared/models/config/static-page.model.ts | 36 ++++ 11 files changed, 566 insertions(+), 10 deletions(-) create mode 100644 src/app/core/config/static-page-resolver.service.ts create mode 100644 src/app/pages/static-page/static-page.component.html create mode 100644 src/app/pages/static-page/static-page.component.scss create mode 100644 src/app/pages/static-page/static-page.component.ts create mode 100644 src/app/shared/models/config/static-page.model.ts diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 876b2bc..347e88f 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -41,6 +41,14 @@ const coreRoutes: Routes = [ { path: 'cart', loadComponent: () => import('./pages/cart/cart.component').then(m => m.CartComponent) + }, + { + path: 'page/:key', + loadComponent: () => import('./pages/static-page/static-page.component').then(m => m.StaticPageComponent) + }, + { + path: ':staticPath', + loadComponent: () => import('./pages/static-page/static-page.component').then(m => m.StaticPageComponent) } ]; diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html index 80469d6..6219e2f 100644 --- a/src/app/components/footer/footer.component.html +++ b/src/app/components/footer/footer.component.html @@ -9,7 +9,20 @@

{{ 'footer.description' | translate }}

- + @for (group of footerGroups(); track group.id) { +
+ @if (group.title) { +

{{ group.title }}

+ } + +
+ }
@@ -36,7 +49,20 @@

{{ 'footer.description' | translate }}

- + @for (group of footerGroups(); track group.id) { +
+ @if (group.title) { +

{{ group.title }}

+ } + +
+ }
@@ -62,7 +88,20 @@
- + @for (group of footerGroups(); track group.id) { +
+ @if (group.title) { +

{{ group.title }}

+ } + +
+ }

{{ 'footer.payment' | translate }}

diff --git a/src/app/components/footer/footer.component.ts b/src/app/components/footer/footer.component.ts index 06595db..8ed4238 100644 --- a/src/app/components/footer/footer.component.ts +++ b/src/app/components/footer/footer.component.ts @@ -1,17 +1,52 @@ -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ChangeDetectionStrategy, signal } from '@angular/core'; +import { take } from 'rxjs/operators'; +import { RouterLink } from '@angular/router'; import { TranslatePipe } from '../../i18n/translate.pipe'; import { LogoComponent } from '../logo/logo.component'; import { UiRuntimeFacade } from '../../facades/runtime/ui-runtime.facade'; +import { LangRoutePipe } from '../../pipes/lang-route.pipe'; +import { ConfigService } from '../../core/config/config.service'; +import { StaticPageResolverService } from '../../core/config/static-page-resolver.service'; +import { BootstrapConfig, FooterNavigationGroupConfig, NavigationConfig, NavigationItemConfig, FooterNavigationItemConfig } from '../../shared/models/config'; +import { LanguageService } from '../../services/language.service'; + +interface FooterResolvedItem { + id: string; + label: string; + route: string; +} + +interface FooterResolvedGroup { + id: string; + title: string; + items: FooterResolvedItem[]; +} @Component({ selector: 'app-footer', - imports: [TranslatePipe, LogoComponent], + imports: [TranslatePipe, LogoComponent, RouterLink, LangRoutePipe], templateUrl: './footer.component.html', styleUrls: ['./footer.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) export class FooterComponent { - constructor(private readonly uiRuntime: UiRuntimeFacade) {} + readonly footerGroups = signal([]); + + constructor( + private readonly uiRuntime: UiRuntimeFacade, + private readonly configService: ConfigService, + private readonly staticPageResolver: StaticPageResolverService, + private readonly languageService: LanguageService + ) { + this.configService.loadBootstrap().pipe(take(1)).subscribe({ + next: bootstrap => { + this.footerGroups.set(this.resolveFooterGroups(bootstrap)); + }, + error: () => { + this.footerGroups.set([]); + } + }); + } currentYear = new Date().getFullYear(); @@ -30,4 +65,120 @@ export class FooterComponent { get isMarketplaceLavero(): boolean { return this.uiRuntime.isMarketplaceVariant('lavero'); } + + private resolveFooterGroups(bootstrap: BootstrapConfig): FooterResolvedGroup[] { + const footer = bootstrap.navigation?.footer ?? []; + const lang = this.languageService.currentLanguage(); + + if (this.isGroupedFooter(footer)) { + return footer + .map((group, index) => this.resolveGroupFromConfig(group, bootstrap, lang, index)) + .filter((group): group is FooterResolvedGroup => group != null && group.items.length > 0); + } + + const items = (footer as NavigationItemConfig[]) + .map(item => this.resolveLegacyItem(item, bootstrap, lang)) + .filter((item): item is FooterResolvedItem => item != null); + + if (!items.length) { + return []; + } + + return [{ + id: 'footer-group-default', + title: '', + items + }]; + } + + private resolveGroupFromConfig( + group: FooterNavigationGroupConfig, + bootstrap: BootstrapConfig, + lang: string, + index: number + ): FooterResolvedGroup | null { + const items = (group.items ?? []) + .map(item => this.resolveGroupItem(item, bootstrap, lang)) + .filter((item): item is FooterResolvedItem => item != null); + + if (!items.length) { + return null; + } + + return { + id: `footer-group-${index}`, + title: this.staticPageResolver.resolveFooterTitle(group.groupTitle, lang), + items + }; + } + + private resolveGroupItem( + item: FooterNavigationItemConfig, + bootstrap: BootstrapConfig, + lang: string + ): FooterResolvedItem | null { + if (item.visible === false) { + return null; + } + + if (item.type === 'staticPage' && item.key) { + const staticPage = this.staticPageResolver.resolveByKeyFromBootstrap(bootstrap, item.key, lang); + if (!staticPage) { + return null; + } + + return { + id: `static-${item.key}`, + label: staticPage.title, + route: staticPage.route + }; + } + + const label = typeof item.label === 'string' + ? item.label + : this.staticPageResolver.resolveFooterTitle(item.label, lang); + + if (!item.route || !label) { + return null; + } + + return { + id: `${item.type}-${label}`, + label, + route: item.route + }; + } + + private resolveLegacyItem(item: NavigationItemConfig, bootstrap: BootstrapConfig, lang: string): FooterResolvedItem | null { + if (item.visible === false) { + return null; + } + + if (item.type === 'staticPage' && item.key) { + const staticPage = this.staticPageResolver.resolveByKeyFromBootstrap(bootstrap, item.key, lang); + if (!staticPage) { + return null; + } + + return { + id: item.id, + label: staticPage.title, + route: staticPage.route + }; + } + + if (!item.route) { + return null; + } + + return { + id: item.id, + label: item.labelKey ?? item.id, + route: item.route + }; + } + + private isGroupedFooter(footer: NavigationConfig['footer']): footer is FooterNavigationGroupConfig[] { + return Array.isArray(footer) && footer.length > 0 && 'items' in footer[0]; + } } diff --git a/src/app/core/config/static-page-resolver.service.ts b/src/app/core/config/static-page-resolver.service.ts new file mode 100644 index 0000000..533f62a --- /dev/null +++ b/src/app/core/config/static-page-resolver.service.ts @@ -0,0 +1,158 @@ +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; +import { ConfigService } from './config.service'; +import { BootstrapConfig, LegacyStaticPageConfig, LocalizedHtmlContent, LocalizedTextContent, ResolvedStaticPage, StaticPageConfig } from '../../shared/models/config'; +import { LanguageService } from '../../services/language.service'; + +@Injectable({ providedIn: 'root' }) +export class StaticPageResolverService { + constructor( + private readonly configService: ConfigService, + private readonly languageService: LanguageService + ) {} + + resolveByKey(key: string, lang?: string): Observable { + return this.configService.loadBootstrap().pipe( + map(bootstrap => this.resolveByKeyFromBootstrap(bootstrap, key, lang ?? this.languageService.currentLanguage())) + ); + } + + resolveByRoute(route: string, lang?: string): Observable { + return this.configService.loadBootstrap().pipe( + map(bootstrap => this.resolveByRouteFromBootstrap(bootstrap, route, lang ?? this.languageService.currentLanguage())) + ); + } + + resolveByKeyFromBootstrap(bootstrap: BootstrapConfig, key: string, lang: string): ResolvedStaticPage | null { + const page = this.getPageByKey(bootstrap, key); + if (!page) { + return null; + } + + const route = this.normalizeRoute(page.route || `/page/${key}`); + const title = this.resolveLocalizedText(page.title, lang, key); + const html = this.resolveLocalizedHtml(page.content, lang); + + return { + key, + route, + title, + html + }; + } + + resolveByRouteFromBootstrap(bootstrap: BootstrapConfig, route: string, lang: string): ResolvedStaticPage | null { + const normalized = this.normalizeRoute(route); + const registry = this.getRegistry(bootstrap); + + for (const [key, page] of Object.entries(registry)) { + const routePath = this.normalizeRoute(page.route || `/page/${key}`); + if (routePath === normalized) { + return { + key, + route: routePath, + title: this.resolveLocalizedText(page.title, lang, key), + html: this.resolveLocalizedHtml(page.content, lang) + }; + } + } + + return null; + } + + resolveFooterTitle(groupTitle: string | LocalizedTextContent | undefined, lang: string): string { + if (!groupTitle) { + return ''; + } + + if (typeof groupTitle === 'string') { + return groupTitle; + } + + return this.resolveLocalizedText(groupTitle, lang, ''); + } + + private getRegistry(bootstrap: BootstrapConfig): Record { + const raw = bootstrap.staticPages; + if (!raw) { + return {}; + } + + if (Array.isArray(raw)) { + return raw.reduce>((acc, item) => { + const legacy = item as LegacyStaticPageConfig; + const key = legacy.key; + if (!key) { + return acc; + } + + const route = typeof legacy.route === 'string' ? legacy.route : legacy.route?.path ?? `/page/${key}`; + + let titleMap: LocalizedTextContent; + if (typeof legacy.title === 'string') { + titleMap = { en: legacy.title }; + } else { + titleMap = legacy.title ?? { en: key }; + } + + let contentMap: LocalizedHtmlContent; + if (typeof legacy.content === 'string') { + contentMap = { en: legacy.content }; + } else if (legacy.content && typeof legacy.content === 'object' && 'value' in legacy.content) { + contentMap = { en: legacy.content.value ?? '' }; + } else { + contentMap = (legacy.content as LocalizedHtmlContent) ?? { en: '' }; + } + + acc[key] = { + route, + title: titleMap, + content: contentMap, + visible: legacy.visible + }; + return acc; + }, {}); + } + + return raw; + } + + private getPageByKey(bootstrap: BootstrapConfig, key: string): StaticPageConfig | null { + const registry = this.getRegistry(bootstrap); + const page = registry[key]; + if (!page) { + return null; + } + + if (page.visible === false) { + return null; + } + + return page; + } + + private resolveLocalizedText(text: LocalizedTextContent | undefined, lang: string, fallback: string): string { + if (!text) { + return fallback; + } + + return text[lang] ?? text['en'] ?? Object.values(text)[0] ?? fallback; + } + + private resolveLocalizedHtml(content: LocalizedHtmlContent | undefined, lang: string): string { + if (!content) { + return ''; + } + + return content[lang] ?? content['en'] ?? Object.values(content)[0] ?? ''; + } + + private normalizeRoute(route: string): string { + if (!route) { + return '/'; + } + + return route.startsWith('/') ? route : `/${route}`; + } +} diff --git a/src/app/pages/static-page/static-page.component.html b/src/app/pages/static-page/static-page.component.html new file mode 100644 index 0000000..c50c667 --- /dev/null +++ b/src/app/pages/static-page/static-page.component.html @@ -0,0 +1,18 @@ +
+ @if (loading()) { +
{{ 'app.connecting' | translate }}
+ } @else if (notFound()) { +
+

404

+

Страница не найдена

+ На главную +
+ } @else { +
+ @if (title()) { +

{{ title() }}

+ } +
+
+ } +
diff --git a/src/app/pages/static-page/static-page.component.scss b/src/app/pages/static-page/static-page.component.scss new file mode 100644 index 0000000..6099bc8 --- /dev/null +++ b/src/app/pages/static-page/static-page.component.scss @@ -0,0 +1,39 @@ +.static-page { + min-height: 45vh; +} + +.static-page__state { + text-align: center; + padding: 2rem 0; + color: var(--text-secondary, #667a77); + + h1 { + margin-bottom: 0.5rem; + color: var(--text-primary, #1e3c38); + } + + a { + color: var(--primary-color, #497671); + text-decoration: none; + } +} + +.static-page__content { + display: grid; + gap: 1rem; + + h1 { + color: var(--text-primary, #1e3c38); + margin: 0; + } +} + +.static-page__html { + color: var(--text-primary, #1e3c38); + line-height: 1.6; + + h2, + h3 { + margin-top: 1.25rem; + } +} diff --git a/src/app/pages/static-page/static-page.component.ts b/src/app/pages/static-page/static-page.component.ts new file mode 100644 index 0000000..0f5546b --- /dev/null +++ b/src/app/pages/static-page/static-page.component.ts @@ -0,0 +1,82 @@ +import { ChangeDetectionStrategy, Component, SecurityContext, inject, signal } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { ActivatedRoute, RouterLink } from '@angular/router'; +import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; +import { StaticPageResolverService } from '../../core/config/static-page-resolver.service'; +import { LanguageService } from '../../services/language.service'; +import { TranslatePipe } from '../../i18n/translate.pipe'; +import { LangRoutePipe } from '../../pipes/lang-route.pipe'; + +@Component({ + selector: 'app-static-page', + standalone: true, + imports: [CommonModule, RouterLink, TranslatePipe, LangRoutePipe], + templateUrl: './static-page.component.html', + styleUrls: ['./static-page.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class StaticPageComponent { + private readonly route = inject(ActivatedRoute); + private readonly sanitizer = inject(DomSanitizer); + private readonly staticPageResolver = inject(StaticPageResolverService); + private readonly languageService = inject(LanguageService); + + readonly loading = signal(true); + readonly notFound = signal(false); + readonly title = signal(''); + readonly safeHtml = signal(this.sanitizer.bypassSecurityTrustHtml('')); + + constructor() { + this.route.paramMap.subscribe(params => { + const keyFromParam = params.get('key'); + const staticPath = params.get('staticPath'); + + if (keyFromParam) { + this.loadByKey(keyFromParam); + return; + } + + if (staticPath) { + this.loadByPath(`/${staticPath}`); + return; + } + + this.notFound.set(true); + this.loading.set(false); + }); + } + + private loadByKey(key: string): void { + this.loading.set(true); + this.notFound.set(false); + + this.staticPageResolver.resolveByKey(key, this.languageService.currentLanguage()).subscribe(page => { + this.applyPage(page?.title ?? '', page?.html ?? '', !page); + }); + } + + private loadByPath(path: string): void { + this.loading.set(true); + this.notFound.set(false); + + this.staticPageResolver.resolveByRoute(path, this.languageService.currentLanguage()).subscribe(page => { + this.applyPage(page?.title ?? '', page?.html ?? '', !page); + }); + } + + private applyPage(title: string, html: string, notFound: boolean): void { + if (notFound) { + this.title.set(''); + this.safeHtml.set(this.sanitizer.bypassSecurityTrustHtml('')); + this.notFound.set(true); + this.loading.set(false); + return; + } + + const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, html) ?? ''; + this.title.set(title); + this.safeHtml.set(this.sanitizer.bypassSecurityTrustHtml(sanitized)); + this.notFound.set(false); + this.loading.set(false); + } +} diff --git a/src/app/shared/models/config/bootstrap-config.model.ts b/src/app/shared/models/config/bootstrap-config.model.ts index 2b8d443..db9ccaa 100644 --- a/src/app/shared/models/config/bootstrap-config.model.ts +++ b/src/app/shared/models/config/bootstrap-config.model.ts @@ -7,6 +7,7 @@ import { NavigationConfig } from './navigation.model'; import { PageConfig } from './page.model'; import { PermissionsConfig } from './permissions.model'; import { SeoConfig } from './seo.model'; +import { StaticPagesConfig } from './static-page.model'; import { TenantConfig } from './tenant.model'; import { ThemeConfig } from './theme.model'; @@ -24,4 +25,5 @@ export interface BootstrapConfig { permissions: PermissionsConfig; navigation: NavigationConfig; pages: PageConfig[]; + staticPages?: StaticPagesConfig; } diff --git a/src/app/shared/models/config/index.ts b/src/app/shared/models/config/index.ts index fda5cc9..bf3a0db 100644 --- a/src/app/shared/models/config/index.ts +++ b/src/app/shared/models/config/index.ts @@ -9,6 +9,7 @@ export * from './page.model'; export * from './permissions.model'; export * from './section.model'; export * from './seo.model'; +export * from './static-page.model'; export * from './tenant.model'; export * from './theme.model'; export * from './widget.model'; diff --git a/src/app/shared/models/config/navigation.model.ts b/src/app/shared/models/config/navigation.model.ts index 0add129..c120bce 100644 --- a/src/app/shared/models/config/navigation.model.ts +++ b/src/app/shared/models/config/navigation.model.ts @@ -1,15 +1,37 @@ +export interface NavigationLocalizedText { + [locale: string]: string; +} + export interface NavigationItemConfig { id: string; - labelKey: string; - route: string; + labelKey?: string; + label?: string | NavigationLocalizedText; + route?: string; + type?: string; + key?: string; icon?: string; - order: number; + order?: number; + visible?: boolean; visibleWhenFlags?: string[]; children?: NavigationItemConfig[]; } +export interface FooterNavigationItemConfig { + type: string; + key?: string; + label?: string | NavigationLocalizedText; + labelKey?: string; + route?: string; + visible?: boolean; +} + +export interface FooterNavigationGroupConfig { + groupTitle?: string | NavigationLocalizedText; + items: FooterNavigationItemConfig[]; +} + export interface NavigationConfig { header: NavigationItemConfig[]; - footer: NavigationItemConfig[]; + footer: NavigationItemConfig[] | FooterNavigationGroupConfig[]; sidebar?: NavigationItemConfig[]; } diff --git a/src/app/shared/models/config/static-page.model.ts b/src/app/shared/models/config/static-page.model.ts new file mode 100644 index 0000000..bb0a799 --- /dev/null +++ b/src/app/shared/models/config/static-page.model.ts @@ -0,0 +1,36 @@ +export interface LocalizedHtmlContent { + [locale: string]: string; +} + +export interface LocalizedTextContent { + [locale: string]: string; +} + +export interface StaticPageConfig { + route: string; + title: LocalizedTextContent; + content: LocalizedHtmlContent; + seo?: { + title?: LocalizedTextContent; + description?: LocalizedTextContent; + robots?: string; + }; + visible?: boolean; +} + +export interface LegacyStaticPageConfig { + key: string; + route: string | { path: string; exact?: boolean }; + title?: string | LocalizedTextContent; + content?: string | LocalizedHtmlContent | { value?: string; contentType?: string; source?: string }; + visible?: boolean; +} + +export type StaticPagesConfig = Record | LegacyStaticPageConfig[]; + +export interface ResolvedStaticPage { + key: string; + route: string; + title: string; + html: string; +}