sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(project-editor): add Navigation tab for header/flat footer nav

Browse Source
This commit is contained in:
sdarbinyan
2026-07-13 08:57:42 +04:00
parent 4d65386052
commit 16a134ca42
11 changed files with 232 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/app/features/project-editor/sections/navigation-section.component.html Normal file
View File

@@ -0,0 +1,57 @@
<section class="editor-section-card">
<div class="editor-actions">
<h2>{{ 'builder.navigationHeader' | translate }}</h2>
<button type="button" (click)="addLink('header')">{{ 'builder.addLink' | translate }}</button>
</div>
<div class="stack-list">
@for (item of headerLinks(); track item.id) {
<article class="sub-card">
<div class="editor-actions">
<h3>{{ labelOf(item) }}</h3>
<div class="editor-actions">
<button type="button" class="secondary" (click)="move('header', item.id, -1)">↑</button>
<button type="button" class="secondary" (click)="move('header', item.id, 1)">↓</button>
<button type="button" class="secondary" (click)="removeLink('header', item.id)">{{ 'builder.removeLink' | translate }}</button>
</div>
</div>
<div class="editor-grid three">
<label><span>{{ 'builder.linkLabel' | translate }}</span><input type="text" [ngModel]="labelOf(item)" (ngModelChange)="updateLabel('header', item.id, $event)" /></label>
<label><span>{{ 'builder.linkUrl' | translate }}</span><input type="text" [ngModel]="item.route" (ngModelChange)="updateRoute('header', item.id, $event)" /></label>
<label class="toggle-row"><input type="checkbox" [checked]="item.visible !== false" (change)="updateVisible('header', item.id, $any($event.target).checked)" /><span>{{ 'builder.visible' | translate }}</span></label>
</div>
</article>
}
</div>
<div class="editor-actions">
<h2>{{ 'builder.navigationFooter' | translate }}</h2>
@if (footerLinks(); as footer) {
<button type="button" (click)="addLink('footer')">{{ 'builder.addLink' | translate }}</button>
}
</div>
@if (footerLinks(); as footer) {
<div class="stack-list">
@for (item of footer; track item.id) {
<article class="sub-card">
<div class="editor-actions">
<h3>{{ labelOf(item) }}</h3>
<div class="editor-actions">
<button type="button" class="secondary" (click)="move('footer', item.id, -1)">↑</button>
<button type="button" class="secondary" (click)="move('footer', item.id, 1)">↓</button>
<button type="button" class="secondary" (click)="removeLink('footer', item.id)">{{ 'builder.removeLink' | translate }}</button>
</div>
</div>
<div class="editor-grid three">
<label><span>{{ 'builder.linkLabel' | translate }}</span><input type="text" [ngModel]="labelOf(item)" (ngModelChange)="updateLabel('footer', item.id, $event)" /></label>
<label><span>{{ 'builder.linkUrl' | translate }}</span><input type="text" [ngModel]="item.route" (ngModelChange)="updateRoute('footer', item.id, $event)" /></label>
<label class="toggle-row"><input type="checkbox" [checked]="item.visible !== false" (change)="updateVisible('footer', item.id, $any($event.target).checked)" /><span>{{ 'builder.visible' | translate }}</span></label>
</div>
</article>
}
</div>
} @else {
<p class="editor-error">{{ 'builder.navigationFooterGrouped' | translate }}</p>
}
</section>

63
src/app/features/project-editor/sections/navigation-section.component.ts Normal file
View File

@@ -0,0 +1,63 @@
import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ProjectEditorFacade } from '../facade/project-editor.facade';
import { TranslatePipe } from '../../../i18n/translate.pipe';
import { NavigationItemConfig } from '../../../shared/models/config';
@Component({
selector: 'app-project-editor-navigation-section',
standalone: true,
imports: [FormsModule, TranslatePipe],
templateUrl: './navigation-section.component.html',
styleUrls: ['./section.shared.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProjectEditorNavigationSectionComponent {
private readonly facade = inject(ProjectEditorFacade);
readonly bootstrap = this.facade.bootstrap;
readonly headerLinks = computed(() => this.sorted(this.bootstrap()?.navigation.header ?? []));
readonly footerLinks = computed<NavigationItemConfig[] | null>(() => {
const footer = this.bootstrap()?.navigation.footer ?? [];
if (footer.length === 0) {
return [];
}
return 'items' in footer[0] ? null : this.sorted(footer as NavigationItemConfig[]);
});
labelOf(item: NavigationItemConfig): string {
if (typeof item.label === 'string' || !item.label) {
return item.label ?? '';
}
const defaultLocale = this.bootstrap()?.localization.defaultLocale ?? 'en';
return item.label[defaultLocale] ?? Object.values(item.label)[0] ?? '';
}
addLink(target: 'header' | 'footer'): void {
this.facade.addNavLink(target);
}
removeLink(target: 'header' | 'footer', id: string): void {
this.facade.removeNavLink(target, id);
}
move(target: 'header' | 'footer', id: string, direction: -1 | 1): void {
this.facade.reorderNavLink(target, id, direction);
}
updateLabel(target: 'header' | 'footer', id: string, value: string): void {
this.facade.updateNavLink(target, id, { label: value });
}
updateRoute(target: 'header' | 'footer', id: string, value: string): void {
this.facade.updateNavLink(target, id, { route: value });
}
updateVisible(target: 'header' | 'footer', id: string, value: boolean): void {
this.facade.updateNavLink(target, id, { visible: value });
}
private sorted(items: NavigationItemConfig[]): NavigationItemConfig[] {
return [...items].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
}
}