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

2026-07-13 08:57:42 +04:00
parent 4d65386052
commit 16a134ca42
11 changed files with 232 additions and 1 deletions
--- a/src/app/features/project-editor/components/project-editor-nav.component.ts
+++ b/src/app/features/project-editor/components/project-editor-nav.component.ts
@@ -24,6 +24,7 @@ export class ProjectEditorNavComponent {
    { id: 'static-pages', label: 'builder.staticPages' },
    { id: 'features', label: 'builder.marketplaceFeatures' },
    { id: 'languages', label: 'builder.languagesTab' },
+    { id: 'navigation', label: 'builder.navigationTab' },
    { id: 'preview', label: 'builder.preview' },
  ];
 }
--- a/src/app/features/project-editor/facade/project-editor.facade.ts
+++ b/src/app/features/project-editor/facade/project-editor.facade.ts
@@ -1,6 +1,7 @@
 import { Injectable, computed, inject, signal } from '@angular/core';
 import { take } from 'rxjs/operators';
 import { BootstrapConfig, DEFAULT_CATALOG_CONFIG, DEFAULT_HEADER_CONFIG, DEFAULT_PRODUCT_PAGE_CONFIG, DEFAULT_USER_EXPERIENCE_CONFIG } from '../../../shared/models/config';
+import { NavigationItemConfig } from '../../../shared/models/config';
 import { ConfigService } from '../../../core/config/config.service';
 import { ProjectEditorIoService } from '../services/project-editor-io.service';
 import { ProjectEditorPreviewService } from '../services/project-editor-preview.service';
@@ -88,6 +89,79 @@ export class ProjectEditorFacade {
    }));
  }

+  addNavLink(target: 'header' | 'footer'): void {
+    this.updateBootstrap(current => {
+      const list = current.navigation[target];
+      if (!this.isFlatNavList(list)) {
+        return current;
+      }
+      const items = list as NavigationItemConfig[];
+      const newItem: NavigationItemConfig = {
+        id: `nav-${Date.now()}`,
+        label: 'New link',
+        route: '/',
+        order: items.length + 1,
+        visible: true,
+      };
+      return { ...current, navigation: { ...current.navigation, [target]: [...items, newItem] } };
+    });
+  }
+
+  removeNavLink(target: 'header' | 'footer', id: string): void {
+    this.updateBootstrap(current => {
+      const list = current.navigation[target];
+      if (!this.isFlatNavList(list)) {
+        return current;
+      }
+      return {
+        ...current,
+        navigation: { ...current.navigation, [target]: (list as NavigationItemConfig[]).filter(item => item.id !== id) },
+      };
+    });
+  }
+
+  updateNavLink(target: 'header' | 'footer', id: string, patch: Partial<NavigationItemConfig>): void {
+    this.updateBootstrap(current => {
+      const list = current.navigation[target];
+      if (!this.isFlatNavList(list)) {
+        return current;
+      }
+      return {
+        ...current,
+        navigation: {
+          ...current.navigation,
+          [target]: (list as NavigationItemConfig[]).map(item => (item.id !== id ? item : { ...item, ...patch })),
+        },
+      };
+    });
+  }
+
+  reorderNavLink(target: 'header' | 'footer', id: string, direction: -1 | 1): void {
+    this.updateBootstrap(current => {
+      const list = current.navigation[target];
+      if (!this.isFlatNavList(list)) {
+        return current;
+      }
+      const items = [...(list as NavigationItemConfig[])].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+      const index = items.findIndex(item => item.id === id);
+      const nextIndex = index + direction;
+      if (index < 0 || nextIndex < 0 || nextIndex >= items.length) {
+        return current;
+      }
+      const tmp = items[index];
+      items[index] = items[nextIndex];
+      items[nextIndex] = tmp;
+      return {
+        ...current,
+        navigation: { ...current.navigation, [target]: items.map((item, order) => ({ ...item, order: order + 1 })) },
+      };
+    });
+  }
+
+  private isFlatNavList(list: NavigationItemConfig[] | { items: unknown }[]): list is NavigationItemConfig[] {
+    return list.length === 0 || !('items' in list[0]);
+  }
+
  private normalize(config: BootstrapConfig): BootstrapConfig {
    return {
      ...config,
--- a/src/app/features/project-editor/models/project-editor.model.ts
+++ b/src/app/features/project-editor/models/project-editor.model.ts
@@ -11,6 +11,7 @@ export type ProjectEditorSectionId =
  | 'static-pages'
  | 'features'
  | 'languages'
+  | 'navigation'
  | 'preview';

 export interface ProjectEditorState {
--- a/src/app/features/project-editor/pages/project-editor-page.component.html
+++ b/src/app/features/project-editor/pages/project-editor-page.component.html
@@ -24,6 +24,7 @@
        @case ('static-pages') { <app-static-pages-editor /> }
        @case ('features') { <app-project-editor-features-section /> }
        @case ('languages') { <app-project-editor-languages-section /> }
+        @case ('navigation') { <app-project-editor-navigation-section /> }
        @case ('preview') { <app-project-editor-preview-section /> }
      }
    </section>
--- a/src/app/features/project-editor/pages/project-editor-page.component.ts
+++ b/src/app/features/project-editor/pages/project-editor-page.component.ts
@@ -13,13 +13,14 @@ import { ProjectEditorHomepageSectionComponent } from '../sections/homepage-sect
 import { ProjectEditorWidgetsSectionComponent } from '../sections/widgets-section.component';
 import { ProjectEditorFeaturesSectionComponent } from '../sections/features-section.component';
 import { ProjectEditorLanguagesSectionComponent } from '../sections/languages-section.component';
+import { ProjectEditorNavigationSectionComponent } from '../sections/navigation-section.component';
 import { ProjectEditorPreviewSectionComponent } from '../sections/preview-section.component';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
 import { StaticPagesEditorComponent } from '../../content-management/components/static-pages-editor.component';
 import { ProjectEditorSectionId } from '../models/project-editor.model';

 const KNOWN_SECTIONS: ProjectEditorSectionId[] = [
-  'general', 'branding', 'theme', 'header', 'footer', 'homepage', 'widgets', 'static-pages', 'features', 'languages', 'preview'
+  'general', 'branding', 'theme', 'header', 'footer', 'homepage', 'widgets', 'static-pages', 'features', 'languages', 'navigation', 'preview'
 ];

@Component({
@@ -38,6 +39,7 @@ const KNOWN_SECTIONS: ProjectEditorSectionId[] = [
    StaticPagesEditorComponent,
    ProjectEditorFeaturesSectionComponent,
    ProjectEditorLanguagesSectionComponent,
+    ProjectEditorNavigationSectionComponent,
    ProjectEditorPreviewSectionComponent,
  ],
  templateUrl: './project-editor-page.component.html',
--- a/src/app/features/project-editor/sections/navigation-section.component.html
+++ b/src/app/features/project-editor/sections/navigation-section.component.html
@@ -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>
--- a/src/app/features/project-editor/sections/navigation-section.component.ts
+++ b/src/app/features/project-editor/sections/navigation-section.component.ts
@@ -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));
+  }
+}
--- a/src/app/i18n/en.ts
+++ b/src/app/i18n/en.ts
@@ -490,6 +490,14 @@ export const en: Translations = {
    removeLanguage: 'Remove',
    setDefaultLanguage: 'Set as Default',
    defaultLanguageLabel: 'Default',
+    navigationTab: 'Navigation',
+    navigationHeader: 'Header Navigation',
+    navigationFooter: 'Footer Navigation',
+    navigationFooterGrouped: 'Footer navigation uses grouped columns and is not editable here yet — edit via the Footer tab.',
+    addLink: 'Add Link',
+    removeLink: 'Remove',
+    linkLabel: 'Label',
+    linkUrl: 'URL',
    exportBootstrap: 'Export Bootstrap',
    importBootstrap: 'Import Bootstrap',
    exportedBootstrap: 'Exported Bootstrap',
--- a/src/app/i18n/hy.ts
+++ b/src/app/i18n/hy.ts
@@ -490,6 +490,14 @@ export const hy: Translations = {
    removeLanguage: 'Հեռացնել',
    setDefaultLanguage: 'Դարձնել լռելյայն',
    defaultLanguageLabel: 'Լռելյայն',
+    navigationTab: 'Նավիգացիա',
+    navigationHeader: 'Վերին նավիգացիա',
+    navigationFooter: 'Ստորին նավիգացիա',
+    navigationFooterGrouped: 'Ստորին նավիգացիան խմբավորված է սյուներով և դեռ խմբագրելի չէ այստեղ. օգտագործեք «Footer» ներդիրը։',
+    addLink: 'Ավելացնել հղում',
+    removeLink: 'Հեռացնել',
+    linkLabel: 'Պիտակ',
+    linkUrl: 'URL',
    exportBootstrap: 'Արտահանել bootstrap',
    importBootstrap: 'Ներմուծել bootstrap',
    exportedBootstrap: 'Արտահանված bootstrap',
--- a/src/app/i18n/ru.ts
+++ b/src/app/i18n/ru.ts
@@ -490,6 +490,14 @@ export const ru: Translations = {
    removeLanguage: 'Удалить',
    setDefaultLanguage: 'Сделать языком по умолчанию',
    defaultLanguageLabel: 'По умолчанию',
+    navigationTab: 'Навигация',
+    navigationHeader: 'Навигация в шапке',
+    navigationFooter: 'Навигация в подвале',
+    navigationFooterGrouped: 'Навигация подвала сгруппирована по колонкам и пока недоступна для редактирования здесь — используйте вкладку "Подвал".',
+    addLink: 'Добавить ссылку',
+    removeLink: 'Удалить',
+    linkLabel: 'Название',
+    linkUrl: 'URL',
    exportBootstrap: 'Экспорт bootstrap',
    importBootstrap: 'Импорт bootstrap',
    exportedBootstrap: 'Экспортированный bootstrap',
--- a/src/app/i18n/translations.ts
+++ b/src/app/i18n/translations.ts
@@ -488,6 +488,14 @@ export interface Translations {
    removeLanguage: string;
    setDefaultLanguage: string;
    defaultLanguageLabel: string;
+    navigationTab: string;
+    navigationHeader: string;
+    navigationFooter: string;
+    navigationFooterGrouped: string;
+    addLink: string;
+    removeLink: string;
+    linkLabel: string;
+    linkUrl: string;
    exportBootstrap: string;
    importBootstrap: string;
    exportedBootstrap: string;