68442919d3
updateLabel() previously overwrote NavigationItemConfig.label with a bare string via updateNavLink, destroying every other locale's translation whenever a localized label object was edited. Add a facade method updateNavLinkLabel() that inspects the existing label shape: plain strings are replaced as before, but localized objects only have the current default locale's key overwritten, leaving other locales intact.
64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
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.updateNavLinkLabel(target, id, 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));
|
|
}
|
|
}
|