e4a3ee25db
11-task plan extending the existing /builder editor: route-driven tabs, generic Languages/Navigation tabs, a dependency-free rich HTML editor, client-side draft/publish + validation, and a dirty-state guard. Notes the repo has no test runner configured, so tasks use manual verification instead of automated specs.
1818 lines
73 KiB
Markdown
1818 lines
73 KiB
Markdown
# Sprint 16 — Marketplace Project Editor MVP Implementation Plan
|
||
|
||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||
|
||
**Goal:** Extend the existing `/builder` Project Editor into a routed, deep-linkable editor (`/edit/...`) with Languages, Navigation, a real HTML editor, client-side draft/publish, validation, and dirty-state protection — all still editing the same `BootstrapConfig` the storefront consumes.
|
||
|
||
**Architecture:** Keep `ProjectEditorFacade` (Angular signals, no NgRx) as the single source of truth. Add new signal-backed facade actions and two new pure services (`LocaleSyncService`, `ProjectValidator`). Add new tab components following the existing `sections/*-section.component.ts` pattern. No new state-management library, no new npm dependency.
|
||
|
||
**Tech Stack:** Angular 21.1.5 standalone components, Signals, `@angular/forms` (`FormsModule` + `ngModel`), `@angular/router`, existing `i18n/translate.pipe` + `translations.ts`/`en.ts`/`ru.ts`/`hy.ts` dictionaries.
|
||
|
||
## Global Constraints
|
||
|
||
- Angular is actually **21.1.5** in `package.json`, not 20 as the platform vision doc says — this plan targets the real installed version; syntax used (`@if`/`@for`/`@switch`, signals) is valid in both.
|
||
- **No test runner is configured in this repo** (no karma/jasmine/jest in `package.json`, zero `*.spec.ts` files exist). Writing Jasmine/Karma spec files here would not run under any configured tool and would be a placeholder. Every task below substitutes a **manual verification procedure** (exact `ng serve` steps, exact clicks/values, exact expected result) for an automated test step. Standing up a real test harness is out of scope for this plan — flagged as a follow-up, not silently skipped.
|
||
- State management: signal-based facade + `computed`, no NgRx, matching every existing feature (`ProjectEditorFacade`, `AdminProductsFacade`).
|
||
- Every new user-facing string goes through `TranslatePipe` (`{{ 'builder.x' | translate }}`) and is added to `src/app/i18n/translations.ts` (interface) + `en.ts` + `ru.ts` + `hy.ts` (implementations) in the same task that introduces it.
|
||
- New standalone components go in `src/app/features/project-editor/{sections,components,services,models,guards}/` following existing naming (`*-section.component.ts` for tabs).
|
||
- No new npm dependencies are introduced by this plan.
|
||
- `BootstrapConfig` (`src/app/shared/models/config/bootstrap-config.model.ts`) remains the only configuration model. No parallel `ProjectConfig`/`EditorConfig` type is created anywhere in this plan.
|
||
- There is no `projectId` concept anywhere — a "project" is the tenant resolved from the current domain. No route or model in this plan introduces an id segment.
|
||
|
||
---
|
||
|
||
### Task 1: Route-driven tabs (`/edit/:section`)
|
||
|
||
**Files:**
|
||
- Modify: `src/app/app.routes.ts:42-50`
|
||
- Modify: `src/app/features/project-editor/pages/project-editor-page.component.ts`
|
||
- Modify: `src/app/features/project-editor/components/project-editor-nav.component.ts`
|
||
- Modify: `src/app/features/project-editor/components/project-editor-nav.component.html`
|
||
|
||
**Interfaces:**
|
||
- Consumes: `ProjectEditorFacade.setActiveSection(id: ProjectEditorSectionId)`, `ProjectEditorFacade.activeSection: Signal<ProjectEditorSectionId>` (both already exist, unchanged).
|
||
- Produces: route path `/edit/:section` that every later task's new tab reuses (Languages → `/edit/languages`, Navigation → `/edit/navigation`).
|
||
|
||
- [ ] **Step 1: Update routes**
|
||
|
||
Replace lines 42-50 of `src/app/app.routes.ts`:
|
||
|
||
```typescript
|
||
{
|
||
path: 'edit/:section',
|
||
loadComponent: () => import('./features/project-editor/pages/project-editor-page.component').then(m => m.ProjectEditorPageComponent)
|
||
},
|
||
{
|
||
path: 'edit',
|
||
redirectTo: 'edit/general',
|
||
pathMatch: 'full'
|
||
},
|
||
{
|
||
path: 'builder',
|
||
redirectTo: 'edit/general',
|
||
pathMatch: 'full'
|
||
},
|
||
{
|
||
path: 'project-editor',
|
||
redirectTo: 'edit/general',
|
||
pathMatch: 'full'
|
||
},
|
||
```
|
||
|
||
- [ ] **Step 2: Read the route param in the page component**
|
||
|
||
Replace the full contents of `src/app/features/project-editor/pages/project-editor-page.component.ts`:
|
||
|
||
```typescript
|
||
import { ChangeDetectionStrategy, Component, effect, inject } from '@angular/core';
|
||
import { ActivatedRoute } from '@angular/router';
|
||
import { toSignal } from '@angular/core/rxjs-interop';
|
||
import { map } from 'rxjs/operators';
|
||
import { ProjectEditorFacade } from '../facade/project-editor.facade';
|
||
import { ProjectEditorNavComponent } from '../components/project-editor-nav.component';
|
||
import { ProjectEditorGeneralSectionComponent } from '../sections/general-section.component';
|
||
import { ProjectEditorBrandingSectionComponent } from '../sections/branding-section.component';
|
||
import { ProjectEditorThemeSectionComponent } from '../sections/theme-section.component';
|
||
import { ProjectEditorHeaderSectionComponent } from '../sections/header-section.component';
|
||
import { ProjectEditorFooterSectionComponent } from '../sections/footer-section.component';
|
||
import { ProjectEditorHomepageSectionComponent } from '../sections/homepage-section.component';
|
||
import { ProjectEditorWidgetsSectionComponent } from '../sections/widgets-section.component';
|
||
import { ProjectEditorFeaturesSectionComponent } from '../sections/features-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', 'preview'
|
||
];
|
||
|
||
@Component({
|
||
selector: 'app-project-editor-page',
|
||
standalone: true,
|
||
imports: [
|
||
TranslatePipe,
|
||
ProjectEditorNavComponent,
|
||
ProjectEditorGeneralSectionComponent,
|
||
ProjectEditorBrandingSectionComponent,
|
||
ProjectEditorThemeSectionComponent,
|
||
ProjectEditorHeaderSectionComponent,
|
||
ProjectEditorFooterSectionComponent,
|
||
ProjectEditorHomepageSectionComponent,
|
||
ProjectEditorWidgetsSectionComponent,
|
||
StaticPagesEditorComponent,
|
||
ProjectEditorFeaturesSectionComponent,
|
||
ProjectEditorPreviewSectionComponent,
|
||
],
|
||
templateUrl: './project-editor-page.component.html',
|
||
styleUrls: ['./project-editor-page.component.scss'],
|
||
changeDetection: ChangeDetectionStrategy.OnPush
|
||
})
|
||
export class ProjectEditorPageComponent {
|
||
readonly facade = inject(ProjectEditorFacade);
|
||
private readonly route = inject(ActivatedRoute);
|
||
readonly bootstrap = this.facade.bootstrap;
|
||
readonly activeSection = this.facade.activeSection;
|
||
|
||
private readonly routeSection = toSignal(
|
||
this.route.paramMap.pipe(map(params => params.get('section') as ProjectEditorSectionId | null)),
|
||
{ initialValue: null }
|
||
);
|
||
|
||
constructor() {
|
||
this.facade.loadBootstrap();
|
||
effect(() => {
|
||
const section = this.routeSection();
|
||
if (section && KNOWN_SECTIONS.includes(section)) {
|
||
this.facade.setActiveSection(section);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 3: Make the nav a real router link**
|
||
|
||
Replace `src/app/features/project-editor/components/project-editor-nav.component.ts`:
|
||
|
||
```typescript
|
||
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||
import { RouterLink, RouterLinkActive } from '@angular/router';
|
||
import { TranslatePipe } from '../../../i18n/translate.pipe';
|
||
import { ProjectEditorSectionId } from '../models/project-editor.model';
|
||
|
||
@Component({
|
||
selector: 'app-project-editor-nav',
|
||
standalone: true,
|
||
imports: [TranslatePipe, RouterLink, RouterLinkActive],
|
||
templateUrl: './project-editor-nav.component.html',
|
||
styleUrls: ['./project-editor-nav.component.scss'],
|
||
changeDetection: ChangeDetectionStrategy.OnPush
|
||
})
|
||
export class ProjectEditorNavComponent {
|
||
readonly sections: Array<{ id: ProjectEditorSectionId; label: string }> = [
|
||
{ id: 'general', label: 'builder.general' },
|
||
{ id: 'branding', label: 'builder.branding' },
|
||
{ id: 'theme', label: 'builder.theme' },
|
||
{ id: 'header', label: 'builder.header' },
|
||
{ id: 'footer', label: 'builder.footer' },
|
||
{ id: 'homepage', label: 'builder.homepage' },
|
||
{ id: 'widgets', label: 'builder.widgets' },
|
||
{ id: 'static-pages', label: 'builder.staticPages' },
|
||
{ id: 'features', label: 'builder.marketplaceFeatures' },
|
||
{ id: 'preview', label: 'builder.preview' },
|
||
];
|
||
}
|
||
```
|
||
|
||
Replace `src/app/features/project-editor/components/project-editor-nav.component.html`:
|
||
|
||
```html
|
||
<nav class="editor-nav" [attr.aria-label]="'builder.title' | translate">
|
||
@for (section of sections; track section.id) {
|
||
<a
|
||
[routerLink]="['/edit', section.id]"
|
||
routerLinkActive="active"
|
||
class="editor-nav-link"
|
||
>{{ section.label | translate }}</a>
|
||
}
|
||
</nav>
|
||
```
|
||
|
||
Add to `src/app/features/project-editor/components/project-editor-nav.component.scss` (append; file already styles `.editor-nav` and buttons — add a matching anchor rule so links look identical to the old buttons):
|
||
|
||
```scss
|
||
.editor-nav-link {
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 4: Manual verification**
|
||
|
||
Run `npx ng serve` (or the project's `npm run start`), open `http://localhost:4200/builder` — confirm it redirects to `/edit/general` and the General tab renders. Click each nav link; confirm the URL changes to `/edit/<section>` for each and the correct tab content shows. Reload the browser on `/edit/footer` directly; confirm the Footer tab renders (not General) — this proves the route param, not just the click, drives the active tab.
|
||
|
||
- [ ] **Step 5: Commit**
|
||
|
||
```bash
|
||
git add src/app/app.routes.ts src/app/features/project-editor/pages/project-editor-page.component.ts src/app/features/project-editor/components/project-editor-nav.component.ts src/app/features/project-editor/components/project-editor-nav.component.html src/app/features/project-editor/components/project-editor-nav.component.scss
|
||
git commit -m "feat(project-editor): route-driven tabs under /edit/:section"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 2: Languages tab + generic locale sync
|
||
|
||
**Files:**
|
||
- Create: `src/app/features/project-editor/services/locale-sync.service.ts`
|
||
- Create: `src/app/features/project-editor/sections/languages-section.component.ts`
|
||
- Create: `src/app/features/project-editor/sections/languages-section.component.html`
|
||
- Modify: `src/app/features/project-editor/models/project-editor.model.ts`
|
||
- Modify: `src/app/features/project-editor/facade/project-editor.facade.ts`
|
||
- Modify: `src/app/features/project-editor/pages/project-editor-page.component.ts`
|
||
- Modify: `src/app/features/project-editor/pages/project-editor-page.component.html`
|
||
- Modify: `src/app/features/project-editor/components/project-editor-nav.component.ts`
|
||
- Modify: `src/app/i18n/translations.ts`, `en.ts`, `ru.ts`, `hy.ts`
|
||
|
||
**Interfaces:**
|
||
- Consumes: `NavigationItemConfig`, `NavigationLocalizedText`, `FooterNavigationGroupConfig`, `BootstrapConfig` from `src/app/shared/models/config`; `StaticPageTranslationConfig`, `LocalizedTextContent` likewise.
|
||
- Produces: `LocaleSyncService.addLocale(bootstrap, locale): BootstrapConfig`, `LocaleSyncService.removeLocale(bootstrap, locale): BootstrapConfig`; `ProjectEditorFacade.addLocale(locale: string)`, `.removeLocale(locale: string)`, `.setDefaultLocale(locale: string)` — used by Task 3 (static pages) and Task 4 (navigation) indirectly, and directly by the new Languages tab.
|
||
|
||
- [ ] **Step 1: `LocaleSyncService`**
|
||
|
||
Create `src/app/features/project-editor/services/locale-sync.service.ts`:
|
||
|
||
```typescript
|
||
import { Injectable } from '@angular/core';
|
||
import { BootstrapConfig, FooterNavigationGroupConfig, NavigationItemConfig, NavigationLocalizedText } from '../../../shared/models/config';
|
||
|
||
type SyncMode = 'add' | 'remove';
|
||
|
||
@Injectable({ providedIn: 'root' })
|
||
export class LocaleSyncService {
|
||
addLocale(bootstrap: BootstrapConfig, locale: string): BootstrapConfig {
|
||
return this.sync(bootstrap, locale, 'add');
|
||
}
|
||
|
||
removeLocale(bootstrap: BootstrapConfig, locale: string): BootstrapConfig {
|
||
if (locale === bootstrap.localization.defaultLocale) {
|
||
return bootstrap;
|
||
}
|
||
return this.sync(bootstrap, locale, 'remove');
|
||
}
|
||
|
||
private sync(bootstrap: BootstrapConfig, rawLocale: string, mode: SyncMode): BootstrapConfig {
|
||
const locale = rawLocale.trim().toLowerCase();
|
||
if (!locale) {
|
||
return bootstrap;
|
||
}
|
||
|
||
const alreadyPresent = bootstrap.localization.supportedLocales.includes(locale);
|
||
if (mode === 'add' && alreadyPresent) {
|
||
return bootstrap;
|
||
}
|
||
if (mode === 'remove' && !alreadyPresent) {
|
||
return bootstrap;
|
||
}
|
||
|
||
const supportedLocales = mode === 'add'
|
||
? [...bootstrap.localization.supportedLocales, locale]
|
||
: bootstrap.localization.supportedLocales.filter(existing => existing !== locale);
|
||
|
||
return {
|
||
...bootstrap,
|
||
tenant: { ...bootstrap.tenant, supportedLocales },
|
||
localization: { ...bootstrap.localization, supportedLocales },
|
||
staticPages: this.syncStaticPages(bootstrap.staticPages, locale, mode),
|
||
navigation: {
|
||
...bootstrap.navigation,
|
||
header: this.syncNavItems(bootstrap.navigation.header, locale, mode),
|
||
footer: this.syncFooterNav(bootstrap.navigation.footer, locale, mode),
|
||
sidebar: bootstrap.navigation.sidebar ? this.syncNavItems(bootstrap.navigation.sidebar, locale, mode) : bootstrap.navigation.sidebar,
|
||
},
|
||
};
|
||
}
|
||
|
||
private syncStaticPages(staticPages: BootstrapConfig['staticPages'], locale: string, mode: SyncMode): BootstrapConfig['staticPages'] {
|
||
if (!staticPages || Array.isArray(staticPages)) {
|
||
return staticPages;
|
||
}
|
||
|
||
return Object.fromEntries(
|
||
Object.entries(staticPages).map(([id, page]) => [id, {
|
||
...page,
|
||
translations: this.syncRecord(page.translations, locale, mode, () => ({ title: '', html: '' })),
|
||
}])
|
||
);
|
||
}
|
||
|
||
private syncNavItems(items: NavigationItemConfig[], locale: string, mode: SyncMode): NavigationItemConfig[] {
|
||
return items.map(item => ({
|
||
...item,
|
||
label: this.syncLabel(item.label, locale, mode),
|
||
children: item.children ? this.syncNavItems(item.children, locale, mode) : item.children,
|
||
}));
|
||
}
|
||
|
||
private syncFooterNav(
|
||
footer: NavigationItemConfig[] | FooterNavigationGroupConfig[],
|
||
locale: string,
|
||
mode: SyncMode
|
||
): NavigationItemConfig[] | FooterNavigationGroupConfig[] {
|
||
if (footer.length === 0) {
|
||
return footer;
|
||
}
|
||
|
||
if ('items' in footer[0]) {
|
||
return (footer as FooterNavigationGroupConfig[]).map(group => ({
|
||
...group,
|
||
groupTitle: this.syncLabel(group.groupTitle, locale, mode),
|
||
items: group.items.map(item => ({ ...item, label: this.syncLabel(item.label, locale, mode) })),
|
||
}));
|
||
}
|
||
|
||
return this.syncNavItems(footer as NavigationItemConfig[], locale, mode);
|
||
}
|
||
|
||
private syncLabel(
|
||
label: string | NavigationLocalizedText | undefined,
|
||
locale: string,
|
||
mode: SyncMode
|
||
): string | NavigationLocalizedText | undefined {
|
||
if (label === undefined || typeof label === 'string') {
|
||
return label;
|
||
}
|
||
return this.syncRecord(label, locale, mode, () => Object.values(label)[0] ?? '');
|
||
}
|
||
|
||
private syncRecord<T>(
|
||
record: Record<string, T> | undefined,
|
||
locale: string,
|
||
mode: SyncMode,
|
||
createEmpty: () => T
|
||
): Record<string, T> {
|
||
const next: Record<string, T> = { ...(record ?? {}) };
|
||
if (mode === 'add') {
|
||
if (!(locale in next)) {
|
||
next[locale] = createEmpty();
|
||
}
|
||
} else {
|
||
delete next[locale];
|
||
}
|
||
return next;
|
||
}
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: Wire into the facade**
|
||
|
||
In `src/app/features/project-editor/facade/project-editor.facade.ts`, add the import and the three methods (insert after `setActiveSection`, before `private normalize`):
|
||
|
||
```typescript
|
||
import { LocaleSyncService } from '../services/locale-sync.service';
|
||
```
|
||
|
||
```typescript
|
||
private readonly localeSync = inject(LocaleSyncService);
|
||
```
|
||
|
||
```typescript
|
||
addLocale(locale: string): void {
|
||
this.updateBootstrap(current => this.localeSync.addLocale(current, locale));
|
||
}
|
||
|
||
removeLocale(locale: string): void {
|
||
this.updateBootstrap(current => this.localeSync.removeLocale(current, locale));
|
||
}
|
||
|
||
setDefaultLocale(locale: string): void {
|
||
this.updateBootstrap(current => ({
|
||
...current,
|
||
tenant: { ...current.tenant, defaultLocale: locale },
|
||
localization: { ...current.localization, defaultLocale: locale },
|
||
}));
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 3: Add the section id**
|
||
|
||
In `src/app/features/project-editor/models/project-editor.model.ts`, change the union:
|
||
|
||
```typescript
|
||
export type ProjectEditorSectionId =
|
||
| 'general'
|
||
| 'branding'
|
||
| 'theme'
|
||
| 'header'
|
||
| 'footer'
|
||
| 'homepage'
|
||
| 'widgets'
|
||
| 'static-pages'
|
||
| 'features'
|
||
| 'languages'
|
||
| 'preview';
|
||
```
|
||
|
||
- [ ] **Step 4: Languages tab component**
|
||
|
||
Create `src/app/features/project-editor/sections/languages-section.component.ts`:
|
||
|
||
```typescript
|
||
import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
|
||
import { FormsModule } from '@angular/forms';
|
||
import { ProjectEditorFacade } from '../facade/project-editor.facade';
|
||
import { TranslatePipe } from '../../../i18n/translate.pipe';
|
||
|
||
@Component({
|
||
selector: 'app-project-editor-languages-section',
|
||
standalone: true,
|
||
imports: [FormsModule, TranslatePipe],
|
||
templateUrl: './languages-section.component.html',
|
||
styleUrls: ['./section.shared.scss'],
|
||
changeDetection: ChangeDetectionStrategy.OnPush
|
||
})
|
||
export class ProjectEditorLanguagesSectionComponent {
|
||
private readonly facade = inject(ProjectEditorFacade);
|
||
readonly bootstrap = this.facade.bootstrap;
|
||
readonly locales = computed(() => this.bootstrap()?.localization.supportedLocales ?? []);
|
||
readonly defaultLocale = computed(() => this.bootstrap()?.localization.defaultLocale ?? '');
|
||
readonly newLocale = signal('');
|
||
|
||
updateNewLocale(value: string): void {
|
||
this.newLocale.set(value);
|
||
}
|
||
|
||
addLocale(): void {
|
||
const code = this.newLocale().trim();
|
||
if (!code) {
|
||
return;
|
||
}
|
||
this.facade.addLocale(code);
|
||
this.newLocale.set('');
|
||
}
|
||
|
||
removeLocale(code: string): void {
|
||
this.facade.removeLocale(code);
|
||
}
|
||
|
||
setDefault(code: string): void {
|
||
this.facade.setDefaultLocale(code);
|
||
}
|
||
}
|
||
```
|
||
|
||
Create `src/app/features/project-editor/sections/languages-section.component.html`:
|
||
|
||
```html
|
||
<section class="editor-section-card">
|
||
<div class="editor-actions">
|
||
<h2>{{ 'builder.languagesTab' | translate }}</h2>
|
||
</div>
|
||
|
||
<div class="editor-actions">
|
||
<input
|
||
type="text"
|
||
[ngModel]="newLocale()"
|
||
(ngModelChange)="updateNewLocale($event)"
|
||
placeholder="de"
|
||
/>
|
||
<button type="button" (click)="addLocale()">{{ 'builder.addLanguage' | translate }}</button>
|
||
</div>
|
||
|
||
<div class="stack-list">
|
||
@for (code of locales(); track code) {
|
||
<article class="sub-card">
|
||
<div class="editor-actions">
|
||
<h3>{{ code }}</h3>
|
||
<div class="editor-actions">
|
||
@if (code === defaultLocale()) {
|
||
<span>{{ 'builder.defaultLanguageLabel' | translate }}</span>
|
||
} @else {
|
||
<button type="button" class="secondary" (click)="setDefault(code)">{{ 'builder.setDefaultLanguage' | translate }}</button>
|
||
<button type="button" class="secondary" (click)="removeLocale(code)">{{ 'builder.removeLanguage' | translate }}</button>
|
||
}
|
||
</div>
|
||
</div>
|
||
</article>
|
||
}
|
||
</div>
|
||
</section>
|
||
```
|
||
|
||
- [ ] **Step 5: Register the tab**
|
||
|
||
In `src/app/features/project-editor/pages/project-editor-page.component.ts`, add the import and register it in `imports`:
|
||
|
||
```typescript
|
||
import { ProjectEditorLanguagesSectionComponent } from '../sections/languages-section.component';
|
||
```
|
||
|
||
Add `ProjectEditorLanguagesSectionComponent` to the `imports` array (after `ProjectEditorFeaturesSectionComponent`), and add `'languages'` to `KNOWN_SECTIONS`:
|
||
|
||
```typescript
|
||
const KNOWN_SECTIONS: ProjectEditorSectionId[] = [
|
||
'general', 'branding', 'theme', 'header', 'footer', 'homepage', 'widgets', 'static-pages', 'features', 'languages', 'preview'
|
||
];
|
||
```
|
||
|
||
In `src/app/features/project-editor/pages/project-editor-page.component.html`, add a case inside the `@switch` (after the `features` case):
|
||
|
||
```html
|
||
@case ('languages') { <app-project-editor-languages-section /> }
|
||
```
|
||
|
||
In `src/app/features/project-editor/components/project-editor-nav.component.ts`, add to `sections` (after `features`, before `preview`):
|
||
|
||
```typescript
|
||
{ id: 'languages', label: 'builder.languagesTab' },
|
||
```
|
||
|
||
- [ ] **Step 6: i18n keys**
|
||
|
||
In `src/app/i18n/translations.ts`, inside the `builder: { ... }` interface block, add (after `livePreview: string;`):
|
||
|
||
```typescript
|
||
languagesTab: string;
|
||
addLanguage: string;
|
||
removeLanguage: string;
|
||
setDefaultLanguage: string;
|
||
defaultLanguageLabel: string;
|
||
```
|
||
|
||
In `src/app/i18n/en.ts`, inside `builder: { ... }`, add:
|
||
|
||
```typescript
|
||
languagesTab: 'Languages',
|
||
addLanguage: 'Add Language',
|
||
removeLanguage: 'Remove',
|
||
setDefaultLanguage: 'Set as Default',
|
||
defaultLanguageLabel: 'Default',
|
||
```
|
||
|
||
In `src/app/i18n/ru.ts`, inside `builder: { ... }`, add:
|
||
|
||
```typescript
|
||
languagesTab: 'Языки',
|
||
addLanguage: 'Добавить язык',
|
||
removeLanguage: 'Удалить',
|
||
setDefaultLanguage: 'Сделать языком по умолчанию',
|
||
defaultLanguageLabel: 'По умолчанию',
|
||
```
|
||
|
||
In `src/app/i18n/hy.ts`, inside `builder: { ... }`, add:
|
||
|
||
```typescript
|
||
languagesTab: 'Լեզուներ',
|
||
addLanguage: 'Ավելացնել լեզու',
|
||
removeLanguage: 'Հեռացնել',
|
||
setDefaultLanguage: 'Դարձնել լռելյայն',
|
||
defaultLanguageLabel: 'Լռելյայն',
|
||
```
|
||
|
||
- [ ] **Step 7: Manual verification**
|
||
|
||
Run `ng serve`, open `/edit/languages`. Confirm current locales (en, ru, hy) list with `en` marked default. Type `de` and click Add Language — confirm `de` appears in the list. Click "Set as Default" on `de` — confirm it now shows as default and `en` shows the remove/set-default buttons instead. Go to `/edit/preview`, click the export/refresh action, and inspect the exported JSON textarea: confirm `localization.supportedLocales` includes `"de"` and `localization.defaultLocale` is `"de"`, and (if any static pages exist) each static page's `translations` object now has a `"de"` key with `{ "title": "", "html": "" }`. Go back to `/edit/languages` and remove `de` — confirm it disappears from the list and from the exported JSON's `translations` objects. Attempt to remove the current default locale — confirm nothing happens (no button is shown for the default row).
|
||
|
||
- [ ] **Step 8: Commit**
|
||
|
||
```bash
|
||
git add src/app/features/project-editor/services/locale-sync.service.ts src/app/features/project-editor/sections/languages-section.component.ts src/app/features/project-editor/sections/languages-section.component.html src/app/features/project-editor/models/project-editor.model.ts src/app/features/project-editor/facade/project-editor.facade.ts src/app/features/project-editor/pages/project-editor-page.component.ts src/app/features/project-editor/pages/project-editor-page.component.html src/app/features/project-editor/components/project-editor-nav.component.ts src/app/i18n/translations.ts src/app/i18n/en.ts src/app/i18n/ru.ts src/app/i18n/hy.ts
|
||
git commit -m "feat(project-editor): add Languages tab with generic locale sync"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 3: Static pages editor uses supported locales dynamically
|
||
|
||
**Files:**
|
||
- Modify: `src/app/features/content-management/components/static-pages-editor.component.ts`
|
||
- Modify: `src/app/features/content-management/components/static-pages-editor.component.html`
|
||
|
||
**Interfaces:**
|
||
- Consumes: `ProjectEditorFacade.bootstrap` (existing), `bootstrap.localization.supportedLocales: string[]` (existing field).
|
||
- Produces: `locales: Signal<string[]>` computed on the component, consumed by its own template only.
|
||
|
||
- [ ] **Step 1: Add a `locales` computed**
|
||
|
||
In `src/app/features/content-management/components/static-pages-editor.component.ts`, add after the existing `readonly validation = ...` line:
|
||
|
||
```typescript
|
||
readonly locales = computed(() => this.bootstrap()?.localization.supportedLocales ?? ['en']);
|
||
```
|
||
|
||
- [ ] **Step 2: Use it in the template instead of the hardcoded array**
|
||
|
||
In `src/app/features/content-management/components/static-pages-editor.component.html`, change:
|
||
|
||
```html
|
||
@for (locale of ['en','ru','hy']; track locale) {
|
||
```
|
||
|
||
to:
|
||
|
||
```html
|
||
@for (locale of locales(); track locale) {
|
||
```
|
||
|
||
- [ ] **Step 3: Manual verification**
|
||
|
||
With the dev server running, go to `/edit/languages` and add `de`. Go to `/edit/static-pages` — confirm every page card now shows a fourth translation row for `de` (title input + HTML field) in addition to en/ru/hy. Remove `de` on the Languages tab, return to Static Pages, confirm the `de` row is gone.
|
||
|
||
- [ ] **Step 4: Commit**
|
||
|
||
```bash
|
||
git add src/app/features/content-management/components/static-pages-editor.component.ts src/app/features/content-management/components/static-pages-editor.component.html
|
||
git commit -m "fix(content-management): static pages editor reads supported locales instead of hardcoding en/ru/hy"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 4: Navigation tab
|
||
|
||
**Files:**
|
||
- Modify: `src/app/features/project-editor/facade/project-editor.facade.ts`
|
||
- Modify: `src/app/features/project-editor/models/project-editor.model.ts`
|
||
- Create: `src/app/features/project-editor/sections/navigation-section.component.ts`
|
||
- Create: `src/app/features/project-editor/sections/navigation-section.component.html`
|
||
- Modify: `src/app/features/project-editor/pages/project-editor-page.component.ts`
|
||
- Modify: `src/app/features/project-editor/pages/project-editor-page.component.html`
|
||
- Modify: `src/app/features/project-editor/components/project-editor-nav.component.ts`
|
||
- Modify: `src/app/i18n/translations.ts`, `en.ts`, `ru.ts`, `hy.ts`
|
||
|
||
**Interfaces:**
|
||
- Consumes: `NavigationItemConfig` from `src/app/shared/models/config` (`id`, `label`, `route`, `order`, `visible`, `children`).
|
||
- Produces: `ProjectEditorFacade.addNavLink(target)`, `.removeNavLink(target, id)`, `.updateNavLink(target, id, patch)`, `.reorderNavLink(target, id, direction)` — no other task depends on these, but they follow the same `target: 'header' | 'footer'` shape a future Sidebar tab could reuse.
|
||
|
||
- [ ] **Step 1: Facade actions**
|
||
|
||
In `src/app/features/project-editor/facade/project-editor.facade.ts`, add the import:
|
||
|
||
```typescript
|
||
import { NavigationItemConfig } from '../../../shared/models/config';
|
||
```
|
||
|
||
Add these methods after `setDefaultLocale` (from Task 2), before `private normalize`:
|
||
|
||
```typescript
|
||
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]);
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: Add the section id**
|
||
|
||
In `src/app/features/project-editor/models/project-editor.model.ts`, add `'navigation'` to the `ProjectEditorSectionId` union (next to `'languages'`):
|
||
|
||
```typescript
|
||
export type ProjectEditorSectionId =
|
||
| 'general'
|
||
| 'branding'
|
||
| 'theme'
|
||
| 'header'
|
||
| 'footer'
|
||
| 'homepage'
|
||
| 'widgets'
|
||
| 'static-pages'
|
||
| 'features'
|
||
| 'languages'
|
||
| 'navigation'
|
||
| 'preview';
|
||
```
|
||
|
||
- [ ] **Step 3: Navigation tab component**
|
||
|
||
Create `src/app/features/project-editor/sections/navigation-section.component.ts`:
|
||
|
||
```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.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));
|
||
}
|
||
}
|
||
```
|
||
|
||
Create `src/app/features/project-editor/sections/navigation-section.component.html`:
|
||
|
||
```html
|
||
<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>
|
||
```
|
||
|
||
- [ ] **Step 4: Register the tab**
|
||
|
||
In `src/app/features/project-editor/pages/project-editor-page.component.ts`, add the import, add to `imports`, and add `'navigation'` to `KNOWN_SECTIONS`:
|
||
|
||
```typescript
|
||
import { ProjectEditorNavigationSectionComponent } from '../sections/navigation-section.component';
|
||
```
|
||
|
||
```typescript
|
||
const KNOWN_SECTIONS: ProjectEditorSectionId[] = [
|
||
'general', 'branding', 'theme', 'header', 'footer', 'homepage', 'widgets', 'static-pages', 'features', 'languages', 'navigation', 'preview'
|
||
];
|
||
```
|
||
|
||
In `src/app/features/project-editor/pages/project-editor-page.component.html`, add the case (after `languages`):
|
||
|
||
```html
|
||
@case ('navigation') { <app-project-editor-navigation-section /> }
|
||
```
|
||
|
||
In `src/app/features/project-editor/components/project-editor-nav.component.ts`, add (after `languages`, before `preview`):
|
||
|
||
```typescript
|
||
{ id: 'navigation', label: 'builder.navigationTab' },
|
||
```
|
||
|
||
- [ ] **Step 5: i18n keys**
|
||
|
||
In `src/app/i18n/translations.ts`, add to the `builder` interface (after the Task 2 keys):
|
||
|
||
```typescript
|
||
navigationTab: string;
|
||
navigationHeader: string;
|
||
navigationFooter: string;
|
||
navigationFooterGrouped: string;
|
||
addLink: string;
|
||
removeLink: string;
|
||
linkLabel: string;
|
||
linkUrl: string;
|
||
```
|
||
|
||
In `src/app/i18n/en.ts`, add:
|
||
|
||
```typescript
|
||
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',
|
||
```
|
||
|
||
In `src/app/i18n/ru.ts`, add:
|
||
|
||
```typescript
|
||
navigationTab: 'Навигация',
|
||
navigationHeader: 'Навигация в шапке',
|
||
navigationFooter: 'Навигация в подвале',
|
||
navigationFooterGrouped: 'Навигация подвала сгруппирована по колонкам и пока недоступна для редактирования здесь — используйте вкладку "Подвал".',
|
||
addLink: 'Добавить ссылку',
|
||
removeLink: 'Удалить',
|
||
linkLabel: 'Название',
|
||
linkUrl: 'URL',
|
||
```
|
||
|
||
In `src/app/i18n/hy.ts`, add:
|
||
|
||
```typescript
|
||
navigationTab: 'Նավիգացիա',
|
||
navigationHeader: 'Վերին նավիգացիա',
|
||
navigationFooter: 'Ստորին նավիգացիա',
|
||
navigationFooterGrouped: 'Ստորին նավիգացիան խմբավորված է սյուներով և դեռ խմբագրելի չէ այստեղ. օգտագործեք «Footer» ներդիրը։',
|
||
addLink: 'Ավելացնել հղում',
|
||
removeLink: 'Հեռացնել',
|
||
linkLabel: 'Պիտակ',
|
||
linkUrl: 'URL',
|
||
```
|
||
|
||
- [ ] **Step 6: Manual verification**
|
||
|
||
Run `ng serve`, open `/edit/navigation`. Confirm the existing header nav items list, sorted by order. Click "Add Link" under Header Navigation — confirm a "New link" row appears at the bottom. Edit its label and URL — confirm the values persist (check via `/edit/preview` export JSON: `navigation.header` contains the new item with your edited `label`/`route`). Click ↑ on the new item — confirm it moves up one position and the exported JSON's `order` values update accordingly. Click "Remove" — confirm it disappears. If `navigation.footer` in this bootstrap is grouped (`FooterNavigationGroupConfig[]`), confirm the footer section shows the "not editable here yet" message instead of a broken list.
|
||
|
||
- [ ] **Step 7: Commit**
|
||
|
||
```bash
|
||
git add src/app/features/project-editor/facade/project-editor.facade.ts src/app/features/project-editor/models/project-editor.model.ts src/app/features/project-editor/sections/navigation-section.component.ts src/app/features/project-editor/sections/navigation-section.component.html src/app/features/project-editor/pages/project-editor-page.component.ts src/app/features/project-editor/pages/project-editor-page.component.html src/app/features/project-editor/components/project-editor-nav.component.ts src/app/i18n/translations.ts src/app/i18n/en.ts src/app/i18n/ru.ts src/app/i18n/hy.ts
|
||
git commit -m "feat(project-editor): add Navigation tab for header/flat footer nav"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 5: Reusable rich HTML editor component
|
||
|
||
**Files:**
|
||
- Create: `src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.ts`
|
||
- Create: `src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html`
|
||
- Create: `src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.scss`
|
||
|
||
**Interfaces:**
|
||
- Consumes: nothing outside Angular core/browser APIs (`document.execCommand`, native `contentEditable`).
|
||
- Produces: `MarketplaceHtmlEditorComponent` with `@Input() html: string`, `@Output() htmlChange: EventEmitter<string>` — consumed by Task 6.
|
||
|
||
- [ ] **Step 1: Component**
|
||
|
||
Create `src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.ts`:
|
||
|
||
```typescript
|
||
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild, signal } from '@angular/core';
|
||
|
||
export interface HtmlEditorToolbarCommand {
|
||
id: string;
|
||
label: string;
|
||
command: string;
|
||
value?: string;
|
||
}
|
||
|
||
export const HTML_EDITOR_TOOLBAR: HtmlEditorToolbarCommand[] = [
|
||
{ id: 'bold', label: 'B', command: 'bold' },
|
||
{ id: 'italic', label: 'I', command: 'italic' },
|
||
{ id: 'underline', label: 'U', command: 'underline' },
|
||
{ id: 'h2', label: 'H2', command: 'formatBlock', value: 'H2' },
|
||
{ id: 'h3', label: 'H3', command: 'formatBlock', value: 'H3' },
|
||
{ id: 'ul', label: 'List', command: 'insertUnorderedList' },
|
||
{ id: 'ol', label: '1,2,3', command: 'insertOrderedList' },
|
||
{ id: 'link', label: 'Link', command: 'createLink' },
|
||
{ id: 'image', label: 'Image', command: 'insertImage' },
|
||
{ id: 'table', label: 'Table', command: 'insertHTML', value: '<table><tr><td> </td><td> </td></tr></table>' },
|
||
];
|
||
|
||
@Component({
|
||
selector: 'app-marketplace-html-editor',
|
||
standalone: true,
|
||
imports: [],
|
||
templateUrl: './marketplace-html-editor.component.html',
|
||
styleUrls: ['./marketplace-html-editor.component.scss'],
|
||
changeDetection: ChangeDetectionStrategy.OnPush
|
||
})
|
||
export class MarketplaceHtmlEditorComponent implements OnChanges {
|
||
@Input() html = '';
|
||
@Output() htmlChange = new EventEmitter<string>();
|
||
@ViewChild('surface', { static: true }) surface!: ElementRef<HTMLDivElement>;
|
||
|
||
readonly toolbar = HTML_EDITOR_TOOLBAR;
|
||
readonly showCode = signal(false);
|
||
readonly codeValue = signal('');
|
||
|
||
ngOnChanges(changes: SimpleChanges): void {
|
||
if (changes['html'] && this.surface && this.surface.nativeElement.innerHTML !== (this.html || '')) {
|
||
this.surface.nativeElement.innerHTML = this.html || '';
|
||
}
|
||
}
|
||
|
||
runCommand(item: HtmlEditorToolbarCommand): void {
|
||
this.surface.nativeElement.focus();
|
||
if (item.command === 'createLink') {
|
||
const url = window.prompt('URL');
|
||
if (!url) {
|
||
return;
|
||
}
|
||
document.execCommand('createLink', false, url);
|
||
} else if (item.command === 'insertImage') {
|
||
const url = window.prompt('Image URL');
|
||
if (!url) {
|
||
return;
|
||
}
|
||
document.execCommand('insertImage', false, url);
|
||
} else {
|
||
document.execCommand(item.command, false, item.value);
|
||
}
|
||
this.emitChange();
|
||
}
|
||
|
||
onInput(): void {
|
||
this.emitChange();
|
||
}
|
||
|
||
toggleCode(): void {
|
||
if (!this.showCode()) {
|
||
this.codeValue.set(this.surface.nativeElement.innerHTML);
|
||
this.showCode.set(true);
|
||
return;
|
||
}
|
||
this.surface.nativeElement.innerHTML = this.codeValue();
|
||
this.showCode.set(false);
|
||
this.emitChange();
|
||
}
|
||
|
||
updateCode(value: string): void {
|
||
this.codeValue.set(value);
|
||
}
|
||
|
||
private emitChange(): void {
|
||
this.htmlChange.emit(this.surface.nativeElement.innerHTML);
|
||
}
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: Template**
|
||
|
||
Create `src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html`:
|
||
|
||
```html
|
||
<div class="html-editor">
|
||
<div class="html-editor-toolbar">
|
||
@for (item of toolbar; track item.id) {
|
||
<button type="button" (click)="runCommand(item)">{{ item.label }}</button>
|
||
}
|
||
<button type="button" (click)="toggleCode()">{{ showCode() ? 'Preview' : 'Code' }}</button>
|
||
</div>
|
||
|
||
@if (showCode()) {
|
||
<textarea
|
||
class="html-editor-code"
|
||
rows="10"
|
||
[value]="codeValue()"
|
||
(input)="updateCode($any($event.target).value)"
|
||
></textarea>
|
||
} @else {
|
||
<div
|
||
#surface
|
||
class="html-editor-surface"
|
||
contenteditable="true"
|
||
(input)="onInput()"
|
||
></div>
|
||
}
|
||
</div>
|
||
```
|
||
|
||
- [ ] **Step 3: Styles**
|
||
|
||
Create `src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.scss`:
|
||
|
||
```scss
|
||
.html-editor {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.html-editor-toolbar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
.html-editor-surface {
|
||
min-height: 160px;
|
||
border: 1px solid var(--border, #ccc);
|
||
border-radius: 4px;
|
||
padding: 0.5rem;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.html-editor-code {
|
||
min-height: 160px;
|
||
font-family: monospace;
|
||
border: 1px solid var(--border, #ccc);
|
||
border-radius: 4px;
|
||
padding: 0.5rem;
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 4: Manual verification**
|
||
|
||
This component isn't wired into a page yet — verify it compiles: run `npx tsc -p tsconfig.app.json --noEmit`. Expected: no new errors referencing `marketplace-html-editor.component.ts`. (Full interactive verification happens in Task 6 once it's mounted somewhere.)
|
||
|
||
- [ ] **Step 5: Commit**
|
||
|
||
```bash
|
||
git add src/app/features/project-editor/components/html-editor/
|
||
git commit -m "feat(project-editor): add reusable contentEditable HTML editor component"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 6: Replace the static-pages `<textarea>` with the HTML editor
|
||
|
||
**Files:**
|
||
- Modify: `src/app/features/content-management/components/static-pages-editor.component.ts`
|
||
- Modify: `src/app/features/content-management/components/static-pages-editor.component.html`
|
||
|
||
**Interfaces:**
|
||
- Consumes: `MarketplaceHtmlEditorComponent` (`[html]` input, `(htmlChange)` output) from Task 5.
|
||
- Produces: nothing new — same `updateTranslation(id, locale, 'html', value)` method is now driven by `(htmlChange)` instead of `(ngModelChange)`.
|
||
|
||
- [ ] **Step 1: Import the component**
|
||
|
||
In `src/app/features/content-management/components/static-pages-editor.component.ts`, add the import and register it:
|
||
|
||
```typescript
|
||
import { MarketplaceHtmlEditorComponent } from '../../project-editor/components/html-editor/marketplace-html-editor.component';
|
||
```
|
||
|
||
Change the `imports` array from `[FormsModule, TranslatePipe]` to:
|
||
|
||
```typescript
|
||
imports: [FormsModule, TranslatePipe, MarketplaceHtmlEditorComponent],
|
||
```
|
||
|
||
- [ ] **Step 2: Swap the textarea for the editor**
|
||
|
||
In `src/app/features/content-management/components/static-pages-editor.component.html`, replace:
|
||
|
||
```html
|
||
<label class="full">
|
||
<span>{{ 'builder.htmlPreview' | translate }} {{ locale }}</span>
|
||
<textarea rows="6" [ngModel]="page.translations[locale]?.html || ''" (ngModelChange)="updateTranslation(page.id, locale, 'html', $event)"></textarea>
|
||
</label>
|
||
```
|
||
|
||
with:
|
||
|
||
```html
|
||
<label class="full">
|
||
<span>{{ 'builder.htmlPreview' | translate }} {{ locale }}</span>
|
||
<app-marketplace-html-editor
|
||
[html]="page.translations[locale]?.html || ''"
|
||
(htmlChange)="updateTranslation(page.id, locale, 'html', $event)"
|
||
/>
|
||
</label>
|
||
```
|
||
|
||
- [ ] **Step 3: Manual verification**
|
||
|
||
Run `ng serve`, open `/edit/static-pages`, create a page. Confirm each locale's HTML field is now the toolbar editor, not a plain textarea. Click Bold, type text — confirm it renders bold in the editing surface. Click "Code", confirm the raw HTML (e.g. `<b>...</b>`) shows in a textarea, edit it, click "Code" again (now labeled "Preview") — confirm the surface re-renders your manual HTML edit. Go to `/edit/preview`, export JSON, confirm the page's `translations.<locale>.html` contains the exact HTML you produced (bold tags etc.) — proving nothing sanitized it in the editor.
|
||
|
||
- [ ] **Step 4: Commit**
|
||
|
||
```bash
|
||
git add src/app/features/content-management/components/static-pages-editor.component.ts src/app/features/content-management/components/static-pages-editor.component.html
|
||
git commit -m "feat(content-management): use rich HTML editor for static page content"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 7: `ProjectValidator`
|
||
|
||
**Files:**
|
||
- Create: `src/app/features/project-editor/services/project-validator.service.ts`
|
||
- Modify: `src/app/i18n/translations.ts`, `en.ts`, `ru.ts`, `hy.ts`
|
||
|
||
**Interfaces:**
|
||
- Consumes: `BootstrapConfig` (existing).
|
||
- Produces: `ProjectValidationIssue { code: string; message: string }`, `ProjectValidator.validate(bootstrap: BootstrapConfig): ProjectValidationIssue[]` — consumed by Task 8's facade `validationIssues` computed and Task 9's save bar.
|
||
|
||
- [ ] **Step 1: Service**
|
||
|
||
Create `src/app/features/project-editor/services/project-validator.service.ts`:
|
||
|
||
```typescript
|
||
import { Injectable } from '@angular/core';
|
||
import { BootstrapConfig } from '../../../shared/models/config';
|
||
|
||
export interface ProjectValidationIssue {
|
||
code: string;
|
||
message: string;
|
||
}
|
||
|
||
const HEX_COLOR = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
|
||
const HTTP_URL = /^https?:\/\/\S+$/;
|
||
|
||
@Injectable({ providedIn: 'root' })
|
||
export class ProjectValidator {
|
||
validate(bootstrap: BootstrapConfig): ProjectValidationIssue[] {
|
||
return [
|
||
...this.brandingIssues(bootstrap),
|
||
...this.languageIssues(bootstrap),
|
||
...this.urlIssues(bootstrap),
|
||
...this.duplicateSlugIssues(bootstrap),
|
||
...this.homepageIssues(bootstrap),
|
||
...this.navigationIssues(bootstrap),
|
||
...this.colorIssues(bootstrap),
|
||
];
|
||
}
|
||
|
||
private brandingIssues(bootstrap: BootstrapConfig): ProjectValidationIssue[] {
|
||
return bootstrap.branding.logoUrl ? [] : [{ code: 'missing-logo', message: 'builder.validationMissingLogo' }];
|
||
}
|
||
|
||
private languageIssues(bootstrap: BootstrapConfig): ProjectValidationIssue[] {
|
||
return bootstrap.localization.supportedLocales.length > 0 ? [] : [{ code: 'no-languages', message: 'builder.validationNoLanguages' }];
|
||
}
|
||
|
||
private urlIssues(bootstrap: BootstrapConfig): ProjectValidationIssue[] {
|
||
const url = bootstrap.tenant.websiteBaseUrl;
|
||
return !url || HTTP_URL.test(url) ? [] : [{ code: 'invalid-url', message: 'builder.validationInvalidUrl' }];
|
||
}
|
||
|
||
private duplicateSlugIssues(bootstrap: BootstrapConfig): ProjectValidationIssue[] {
|
||
const staticPages = bootstrap.staticPages;
|
||
if (!staticPages || Array.isArray(staticPages)) {
|
||
return [];
|
||
}
|
||
const slugs = Object.values(staticPages).map(page => page.slug);
|
||
const hasDuplicates = slugs.some((slug, index) => slugs.indexOf(slug) !== index);
|
||
return hasDuplicates ? [{ code: 'duplicate-slugs', message: 'builder.validationDuplicateSlugs' }] : [];
|
||
}
|
||
|
||
private homepageIssues(bootstrap: BootstrapConfig): ProjectValidationIssue[] {
|
||
const homePage = bootstrap.pages.find(page => page.key === 'home' || page.route.path === '/');
|
||
if (!homePage || homePage.sections.length === 0) {
|
||
return [{ code: 'empty-homepage', message: 'builder.validationEmptyHomepage' }];
|
||
}
|
||
const hasMissingWidgetType = homePage.sections.some(section => section.widgets.some(widget => !widget.type?.trim()));
|
||
return hasMissingWidgetType ? [{ code: 'missing-widget', message: 'builder.validationMissingWidget' }] : [];
|
||
}
|
||
|
||
private navigationIssues(bootstrap: BootstrapConfig): ProjectValidationIssue[] {
|
||
const keyOf = (item: { label?: string | Record<string, string>; route?: string }): string =>
|
||
`${typeof item.label === 'string' ? item.label : JSON.stringify(item.label ?? {})}|${item.route ?? ''}`;
|
||
const keys = bootstrap.navigation.header.map(keyOf);
|
||
const hasDuplicates = keys.some((key, index) => keys.indexOf(key) !== index);
|
||
return hasDuplicates ? [{ code: 'duplicate-nav-links', message: 'builder.validationDuplicateNavLinks' }] : [];
|
||
}
|
||
|
||
private colorIssues(bootstrap: BootstrapConfig): ProjectValidationIssue[] {
|
||
const invalid = Object.values(bootstrap.theme.palette).some(value => !HEX_COLOR.test(value));
|
||
return invalid ? [{ code: 'invalid-colors', message: 'builder.validationInvalidColors' }] : [];
|
||
}
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: i18n keys**
|
||
|
||
In `src/app/i18n/translations.ts`, add to the `builder` interface:
|
||
|
||
```typescript
|
||
validationMissingLogo: string;
|
||
validationNoLanguages: string;
|
||
validationInvalidUrl: string;
|
||
validationDuplicateSlugs: string;
|
||
validationEmptyHomepage: string;
|
||
validationMissingWidget: string;
|
||
validationDuplicateNavLinks: string;
|
||
validationInvalidColors: string;
|
||
```
|
||
|
||
In `src/app/i18n/en.ts`, add:
|
||
|
||
```typescript
|
||
validationMissingLogo: 'Branding is missing a logo.',
|
||
validationNoLanguages: 'No languages are configured.',
|
||
validationInvalidUrl: 'The marketplace URL is invalid.',
|
||
validationDuplicateSlugs: 'Two or more static pages share the same slug.',
|
||
validationEmptyHomepage: 'The homepage has no sections.',
|
||
validationMissingWidget: 'A homepage section has a widget with no type.',
|
||
validationDuplicateNavLinks: 'Two or more header navigation links are duplicates.',
|
||
validationInvalidColors: 'One or more theme colors are not valid hex colors.',
|
||
```
|
||
|
||
In `src/app/i18n/ru.ts`, add:
|
||
|
||
```typescript
|
||
validationMissingLogo: 'В брендинге отсутствует логотип.',
|
||
validationNoLanguages: 'Не настроены языки.',
|
||
validationInvalidUrl: 'Некорректный URL маркетплейса.',
|
||
validationDuplicateSlugs: 'Две или более статические страницы имеют одинаковый slug.',
|
||
validationEmptyHomepage: 'На главной странице нет секций.',
|
||
validationMissingWidget: 'В секции главной страницы есть виджет без типа.',
|
||
validationDuplicateNavLinks: 'Две или более ссылки в навигации шапки дублируются.',
|
||
validationInvalidColors: 'Один или несколько цветов темы указаны некорректно.',
|
||
```
|
||
|
||
In `src/app/i18n/hy.ts`, add:
|
||
|
||
```typescript
|
||
validationMissingLogo: 'Բրենդինգում բացակայում է լոգոն։',
|
||
validationNoLanguages: 'Կարգավորված լեզուներ չկան։',
|
||
validationInvalidUrl: 'Մարքեթփլեյսի URL-ը սխալ է։',
|
||
validationDuplicateSlugs: 'Երկու կամ ավելի ստատիկ էջեր ունեն նույն slug-ը։',
|
||
validationEmptyHomepage: 'Գլխավոր էջում սեկցիաներ չկան։',
|
||
validationMissingWidget: 'Գլխավոր էջի սեկցիաներից մեկն ունի վիջեթ առանց տիպի։',
|
||
validationDuplicateNavLinks: 'Վերնագրի նավիգացիայում կան կրկնվող հղումներ։',
|
||
validationInvalidColors: 'Թեմայի գույներից մեկը կամ մի քանիսը վավեր hex գույն չեն։',
|
||
```
|
||
|
||
- [ ] **Step 3: Manual verification**
|
||
|
||
This service isn't wired into the UI yet. Verify it compiles: `npx tsc -p tsconfig.app.json --noEmit`. Expected: no new errors. (Full interactive verification happens in Task 9.)
|
||
|
||
- [ ] **Step 4: Commit**
|
||
|
||
```bash
|
||
git add src/app/features/project-editor/services/project-validator.service.ts src/app/i18n/translations.ts src/app/i18n/en.ts src/app/i18n/ru.ts src/app/i18n/hy.ts
|
||
git commit -m "feat(project-editor): add ProjectValidator with MVP validation rules"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 8: Draft/Publish state and dirty tracking on the facade
|
||
|
||
**Files:**
|
||
- Modify: `src/app/features/project-editor/models/project-editor.model.ts`
|
||
- Modify: `src/app/features/project-editor/facade/project-editor.facade.ts`
|
||
|
||
**Interfaces:**
|
||
- Consumes: `ProjectValidator.validate` (Task 7), `PlatformRuntimeService.reloadFromBootstrap` (existing, `src/app/core/runtime/platform-runtime.service.ts:60`).
|
||
- Produces: `ProjectEditorFacade.status: Signal<'draft' | 'published'>`, `.dirty: Signal<boolean>`, `.validationIssues: Signal<ProjectValidationIssue[]>`, `.save(): void`, `.publish(): boolean` — consumed by Task 9 (save bar) and Task 10 (dirty guard).
|
||
|
||
- [ ] **Step 1: Extend the state shape**
|
||
|
||
In `src/app/features/project-editor/models/project-editor.model.ts`, change `ProjectEditorState`:
|
||
|
||
```typescript
|
||
export interface ProjectEditorState {
|
||
bootstrap: BootstrapConfig | null;
|
||
importError: string | null;
|
||
activeSection: ProjectEditorSectionId;
|
||
status: 'draft' | 'published';
|
||
lastSavedBootstrap: BootstrapConfig | null;
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: Update the facade**
|
||
|
||
In `src/app/features/project-editor/facade/project-editor.facade.ts`, add imports:
|
||
|
||
```typescript
|
||
import { PlatformRuntimeService } from '../../../core/runtime/platform-runtime.service';
|
||
import { ProjectValidator } from '../services/project-validator.service';
|
||
```
|
||
|
||
Add injected services (with the others at the top of the class):
|
||
|
||
```typescript
|
||
private readonly runtime = inject(PlatformRuntimeService);
|
||
private readonly validator = inject(ProjectValidator);
|
||
```
|
||
|
||
Update the initial state:
|
||
|
||
```typescript
|
||
private readonly state = signal<ProjectEditorState>({
|
||
bootstrap: null,
|
||
importError: null,
|
||
activeSection: 'general',
|
||
status: 'draft',
|
||
lastSavedBootstrap: null,
|
||
});
|
||
```
|
||
|
||
Add these computed signals (after `homepageWidgets`):
|
||
|
||
```typescript
|
||
readonly status = computed(() => this.state().status);
|
||
readonly validationIssues = computed(() => {
|
||
const current = this.bootstrap();
|
||
return current ? this.validator.validate(current) : [];
|
||
});
|
||
readonly dirty = computed(() => {
|
||
const current = this.bootstrap();
|
||
if (!current) {
|
||
return false;
|
||
}
|
||
return JSON.stringify(current) !== JSON.stringify(this.state().lastSavedBootstrap);
|
||
});
|
||
```
|
||
|
||
Update `loadBootstrap()` to seed `lastSavedBootstrap`:
|
||
|
||
```typescript
|
||
loadBootstrap(): void {
|
||
this.configService.loadBootstrap(true).pipe(take(1)).subscribe({
|
||
next: config => {
|
||
const normalized = this.normalize(JSON.parse(JSON.stringify(config)) as BootstrapConfig);
|
||
this.state.update(current => ({ ...current, bootstrap: normalized, importError: null, lastSavedBootstrap: normalized, status: 'draft' }));
|
||
},
|
||
error: () => this.state.update(current => ({ ...current, bootstrap: null, importError: 'builder.importError' })),
|
||
});
|
||
}
|
||
```
|
||
|
||
Add `save()` and `publish()` after `setDefaultLocale` / nav actions (from Tasks 2 and 4):
|
||
|
||
```typescript
|
||
save(): void {
|
||
const current = this.state().bootstrap;
|
||
if (!current) {
|
||
return;
|
||
}
|
||
this.state.update(state => ({ ...state, lastSavedBootstrap: JSON.parse(JSON.stringify(current)) }));
|
||
}
|
||
|
||
publish(): boolean {
|
||
const current = this.state().bootstrap;
|
||
if (!current || this.validationIssues().length > 0) {
|
||
return false;
|
||
}
|
||
this.runtime.reloadFromBootstrap(current);
|
||
this.state.update(state => ({
|
||
...state,
|
||
status: 'published',
|
||
lastSavedBootstrap: JSON.parse(JSON.stringify(current)),
|
||
}));
|
||
return true;
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 3: Manual verification**
|
||
|
||
This isn't wired to any button yet. Verify it compiles: `npx tsc -p tsconfig.app.json --noEmit`. Expected: no new errors — in particular no error about `PlatformRuntimeService` not having `reloadFromBootstrap` (it does, confirmed at `src/app/core/runtime/platform-runtime.service.ts:60`). Full interactive verification happens in Task 9.
|
||
|
||
- [ ] **Step 4: Commit**
|
||
|
||
```bash
|
||
git add src/app/features/project-editor/models/project-editor.model.ts src/app/features/project-editor/facade/project-editor.facade.ts
|
||
git commit -m "feat(project-editor): add draft/publish status, dirty tracking, save/publish to facade"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 9: Sticky Save/Publish bar
|
||
|
||
**Files:**
|
||
- Create: `src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.ts`
|
||
- Create: `src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.html`
|
||
- Create: `src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.scss`
|
||
- Modify: `src/app/features/project-editor/pages/project-editor-page.component.ts`
|
||
- Modify: `src/app/features/project-editor/pages/project-editor-page.component.html`
|
||
- Modify: `src/app/i18n/translations.ts`, `en.ts`, `ru.ts`, `hy.ts`
|
||
|
||
**Interfaces:**
|
||
- Consumes: `ProjectEditorFacade.dirty`, `.status`, `.validationIssues`, `.save()`, `.publish()` (Task 8).
|
||
- Produces: nothing consumed elsewhere.
|
||
|
||
- [ ] **Step 1: Component**
|
||
|
||
Create `src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.ts`:
|
||
|
||
```typescript
|
||
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
|
||
import { TranslatePipe } from '../../../../i18n/translate.pipe';
|
||
import { ProjectEditorFacade } from '../../facade/project-editor.facade';
|
||
|
||
@Component({
|
||
selector: 'app-project-editor-save-bar',
|
||
standalone: true,
|
||
imports: [TranslatePipe],
|
||
templateUrl: './project-editor-save-bar.component.html',
|
||
styleUrls: ['./project-editor-save-bar.component.scss'],
|
||
changeDetection: ChangeDetectionStrategy.OnPush
|
||
})
|
||
export class ProjectEditorSaveBarComponent {
|
||
private readonly facade = inject(ProjectEditorFacade);
|
||
readonly dirty = this.facade.dirty;
|
||
readonly status = this.facade.status;
|
||
readonly issues = this.facade.validationIssues;
|
||
|
||
save(): void {
|
||
this.facade.save();
|
||
}
|
||
|
||
publish(): void {
|
||
this.facade.publish();
|
||
}
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: Template**
|
||
|
||
Create `src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.html`:
|
||
|
||
```html
|
||
<div class="project-editor-save-bar">
|
||
<div class="project-editor-save-bar-status">
|
||
<span>{{ (status() === 'published' ? 'builder.statusPublished' : 'builder.statusDraft') | translate }}</span>
|
||
@if (dirty()) {
|
||
<span class="project-editor-save-bar-dirty">{{ 'builder.unsavedChanges' | translate }}</span>
|
||
}
|
||
@if (issues().length > 0) {
|
||
<ul class="project-editor-save-bar-issues">
|
||
@for (issue of issues(); track issue.code) {
|
||
<li>{{ issue.message | translate }}</li>
|
||
}
|
||
</ul>
|
||
}
|
||
</div>
|
||
<div class="project-editor-save-bar-actions">
|
||
<button type="button" (click)="save()">{{ 'builder.save' | translate }}</button>
|
||
<button type="button" [disabled]="issues().length > 0" (click)="publish()">{{ 'builder.publish' | translate }}</button>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
- [ ] **Step 3: Styles**
|
||
|
||
Create `src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.scss`:
|
||
|
||
```scss
|
||
.project-editor-save-bar {
|
||
position: sticky;
|
||
bottom: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: 1rem;
|
||
padding: 0.75rem 1rem;
|
||
background: var(--surface, #fff);
|
||
border-top: 1px solid var(--border, #ddd);
|
||
z-index: 5;
|
||
}
|
||
|
||
.project-editor-save-bar-dirty {
|
||
color: var(--warning, #b45309);
|
||
margin-left: 0.5rem;
|
||
}
|
||
|
||
.project-editor-save-bar-issues {
|
||
margin: 0.25rem 0 0;
|
||
padding-left: 1.25rem;
|
||
color: var(--danger, #b91c1c);
|
||
}
|
||
|
||
.project-editor-save-bar-actions button + button {
|
||
margin-left: 0.5rem;
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 4: Mount it in the page**
|
||
|
||
In `src/app/features/project-editor/pages/project-editor-page.component.ts`, add the import and register in `imports`:
|
||
|
||
```typescript
|
||
import { ProjectEditorSaveBarComponent } from '../components/save-bar/project-editor-save-bar.component';
|
||
```
|
||
|
||
In `src/app/features/project-editor/pages/project-editor-page.component.html`, add the save bar after the closing `</section>` of `project-editor-stack` (still inside the `@else` block, as a sibling after the stack section):
|
||
|
||
```html
|
||
<app-project-editor-save-bar />
|
||
```
|
||
|
||
- [ ] **Step 5: i18n keys**
|
||
|
||
In `src/app/i18n/translations.ts`, add to the `builder` interface:
|
||
|
||
```typescript
|
||
statusDraft: string;
|
||
statusPublished: string;
|
||
unsavedChanges: string;
|
||
save: string;
|
||
publish: string;
|
||
```
|
||
|
||
In `src/app/i18n/en.ts`, add:
|
||
|
||
```typescript
|
||
statusDraft: 'Draft',
|
||
statusPublished: 'Published',
|
||
unsavedChanges: 'Unsaved changes',
|
||
save: 'Save',
|
||
publish: 'Publish',
|
||
```
|
||
|
||
In `src/app/i18n/ru.ts`, add:
|
||
|
||
```typescript
|
||
statusDraft: 'Черновик',
|
||
statusPublished: 'Опубликовано',
|
||
unsavedChanges: 'Есть несохранённые изменения',
|
||
save: 'Сохранить',
|
||
publish: 'Опубликовать',
|
||
```
|
||
|
||
In `src/app/i18n/hy.ts`, add:
|
||
|
||
```typescript
|
||
statusDraft: 'Սևագիր',
|
||
statusPublished: 'Հրապարակված',
|
||
unsavedChanges: 'Չպահված փոփոխություններ',
|
||
save: 'Պահպանել',
|
||
publish: 'Հրապարակել',
|
||
```
|
||
|
||
- [ ] **Step 6: Manual verification**
|
||
|
||
Run `ng serve`, open `/edit/general`. Confirm the sticky bar at the bottom shows "Draft" and no "Unsaved changes" label initially. Change the marketplace name — confirm "Unsaved changes" appears immediately. If your test bootstrap has no `branding.logoUrl`, confirm a validation message ("Branding is missing a logo.") appears in the bar and the Publish button is disabled; set a logo URL on the Branding tab and confirm the message disappears and Publish becomes enabled. Click Save — confirm "Unsaved changes" disappears (status stays Draft). Click Publish — confirm status flips to "Published".
|
||
|
||
- [ ] **Step 7: Commit**
|
||
|
||
```bash
|
||
git add src/app/features/project-editor/components/save-bar/ src/app/features/project-editor/pages/project-editor-page.component.ts src/app/features/project-editor/pages/project-editor-page.component.html src/app/i18n/translations.ts src/app/i18n/en.ts src/app/i18n/ru.ts src/app/i18n/hy.ts
|
||
git commit -m "feat(project-editor): add sticky save/publish bar with validation summary"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 10: Warn before losing unsaved changes
|
||
|
||
**Files:**
|
||
- Create: `src/app/features/project-editor/guards/project-editor-dirty.guard.ts`
|
||
- Modify: `src/app/app.routes.ts`
|
||
- Modify: `src/app/features/project-editor/pages/project-editor-page.component.ts`
|
||
|
||
**Interfaces:**
|
||
- Consumes: `ProjectEditorFacade.dirty` (Task 8).
|
||
- Produces: `projectEditorDirtyGuard: CanDeactivateFn<ProjectEditorPageComponent>`, wired as `canDeactivate` on the `edit/:section` route.
|
||
|
||
- [ ] **Step 1: Guard**
|
||
|
||
Create `src/app/features/project-editor/guards/project-editor-dirty.guard.ts`:
|
||
|
||
```typescript
|
||
import { inject } from '@angular/core';
|
||
import { CanDeactivateFn } from '@angular/router';
|
||
import { ProjectEditorFacade } from '../facade/project-editor.facade';
|
||
import { ProjectEditorPageComponent } from '../pages/project-editor-page.component';
|
||
|
||
export const projectEditorDirtyGuard: CanDeactivateFn<ProjectEditorPageComponent> = () => {
|
||
const facade = inject(ProjectEditorFacade);
|
||
if (!facade.dirty()) {
|
||
return true;
|
||
}
|
||
return window.confirm('You have unsaved changes. Leave anyway?');
|
||
};
|
||
```
|
||
|
||
- [ ] **Step 2: Wire it into the route**
|
||
|
||
In `src/app/app.routes.ts`, update the `edit/:section` route added in Task 1:
|
||
|
||
```typescript
|
||
{
|
||
path: 'edit/:section',
|
||
loadComponent: () => import('./features/project-editor/pages/project-editor-page.component').then(m => m.ProjectEditorPageComponent),
|
||
canDeactivate: [() => import('./features/project-editor/guards/project-editor-dirty.guard').then(m => m.projectEditorDirtyGuard())]
|
||
},
|
||
```
|
||
|
||
- [ ] **Step 3: Warn on tab/window close**
|
||
|
||
In `src/app/features/project-editor/pages/project-editor-page.component.ts`, add `HostListener` import and a listener method:
|
||
|
||
```typescript
|
||
import { ChangeDetectionStrategy, Component, HostListener, effect, inject } from '@angular/core';
|
||
```
|
||
|
||
Add inside the class body:
|
||
|
||
```typescript
|
||
@HostListener('window:beforeunload', ['$event'])
|
||
warnBeforeUnload(event: BeforeUnloadEvent): void {
|
||
if (this.facade.dirty()) {
|
||
event.preventDefault();
|
||
event.returnValue = '';
|
||
}
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 4: Manual verification**
|
||
|
||
Run `ng serve`, open `/edit/general`, change the marketplace name (dirty state is now true). Try to navigate to `/catalog` via the URL bar or a link — confirm a native "Leave site?" confirm dialog appears; cancel it and confirm you're still on the editor. Confirm it, and confirm you land on `/catalog`. Reload the editor, make a change, then try closing/reloading the tab — confirm the browser's native "leave site" prompt appears (exact wording is browser-controlled, not customizable — this is expected `beforeunload` behavior).
|
||
|
||
- [ ] **Step 5: Commit**
|
||
|
||
```bash
|
||
git add src/app/features/project-editor/guards/project-editor-dirty.guard.ts src/app/app.routes.ts src/app/features/project-editor/pages/project-editor-page.component.ts
|
||
git commit -m "feat(project-editor): warn before leaving with unsaved changes"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 11: Documentation
|
||
|
||
**Files:**
|
||
- Modify: `docs/Project-Editor.md`
|
||
- Create: `docs/context/features/project-editor/FACTS.jsonl`
|
||
|
||
**Interfaces:**
|
||
- Consumes: nothing (documentation only).
|
||
- Produces: nothing consumed by code — this is the "every new feature must include documentation" deliverable from the platform's coding rules and this plan's Global Constraints.
|
||
|
||
- [ ] **Step 1: Update `docs/Project-Editor.md`**
|
||
|
||
Replace the `## Supported Sections` list item order and add new subsections after `Preview`, and replace `## Future Backend Endpoints` with a section documenting the current client-side draft/publish behavior and the still-needed backend contract. Insert after the existing `- Preview` bullet block (before `## Preview Strategy`):
|
||
|
||
```markdown
|
||
- Languages (Sprint 16)
|
||
- add/remove supported locale
|
||
- set default locale
|
||
- generically syncs translation keys across static pages and navigation labels (`LocaleSyncService`)
|
||
- Navigation (Sprint 16)
|
||
- header navigation: add/remove/reorder/edit label/URL/visibility
|
||
- flat footer navigation: same actions
|
||
- grouped footer navigation (column-based) is read-only in this tab for now
|
||
```
|
||
|
||
Replace the `## Future Backend Endpoints` section with:
|
||
|
||
```markdown
|
||
## Draft / Publish (Sprint 16)
|
||
|
||
There is still no backend draft/publish API. This sprint models it client-side
|
||
in `ProjectEditorFacade`:
|
||
- `status: 'draft' | 'published'` and `dirty` (diffed against the
|
||
last-saved snapshot) live in facade state.
|
||
- `save()` snapshots the current in-memory bootstrap as "last saved" (no
|
||
network call yet).
|
||
- `publish()` runs `ProjectValidator`, and if there are no issues, applies
|
||
the bootstrap via `PlatformRuntimeService.reloadFromBootstrap` and marks
|
||
status `published`.
|
||
|
||
**Backend gap, not yet implemented:** real persistence needs
|
||
`PUT /builder/bootstrap/draft` and `POST /builder/bootstrap/publish`
|
||
endpoints so drafts/publishes survive a reload and are shared across editors.
|
||
|
||
## Validation
|
||
|
||
`ProjectValidator` (`services/project-validator.service.ts`) runs on every
|
||
render of the save bar: missing logo, no languages, invalid marketplace URL,
|
||
duplicate static-page slugs, empty homepage, a homepage widget with no
|
||
`type`, duplicate header navigation links, invalid theme colors. Publish is
|
||
blocked while any issue is present; Save is not.
|
||
|
||
## Rich HTML editing
|
||
|
||
Static page HTML is edited via `MarketplaceHtmlEditorComponent`
|
||
(`components/html-editor/`), a `contentEditable` + toolbar component with no
|
||
external dependency. It emits raw HTML on every change and never sanitizes —
|
||
sanitization remains a storefront-render concern.
|
||
```
|
||
|
||
- [ ] **Step 2: Fact pack**
|
||
|
||
Create the directory and file `docs/context/features/project-editor/FACTS.jsonl`:
|
||
|
||
```
|
||
{"id":"PE-20260713T010000Z-0001","subject":"project-editor-routing","predicate":"is","object":"flat routes under /edit/:section (no projectId — a project is the domain-resolved tenant); /builder and /project-editor redirect to /edit/general","src":["docs/superpowers/specs/2026-07-13-marketplace-project-editor-sprint16-design.md","src/app/app.routes.ts"],"status":"active","kind":"decision","updated_at":"2026-07-13T01:00:00Z","confidence":"high","tags":["project-editor","routing"]}
|
||
{"id":"PE-20260713T010000Z-0002","subject":"locale-sync","predicate":"is-implemented-by","object":"LocaleSyncService, which generically adds/removes a locale key across static page translations and navigation labels without per-field hardcoding","src":["src/app/features/project-editor/services/locale-sync.service.ts"],"status":"active","kind":"implemented","confidence":"high","updated_at":"2026-07-13T01:00:00Z","tags":["project-editor","i18n"]}
|
||
{"id":"PE-20260713T010000Z-0003","subject":"draft-publish-flow","predicate":"is","object":"client-side only (ProjectEditorFacade.status/dirty/save/publish) because no backend draft/publish endpoint exists yet; PUT /builder/bootstrap/draft and POST /builder/bootstrap/publish are the documented backend gap","src":["docs/Project-Editor.md","src/app/features/project-editor/facade/project-editor.facade.ts"],"status":"active","kind":"constraint","confidence":"high","updated_at":"2026-07-13T01:00:00Z","tags":["project-editor","backend-gap"]}
|
||
{"id":"PE-20260713T010000Z-0004","subject":"html-editing","predicate":"uses","object":"MarketplaceHtmlEditorComponent, a contentEditable + toolbar component with no external rich-text dependency; emits raw HTML, never sanitizes during editing","src":["src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.ts"],"status":"active","kind":"decision","confidence":"high","updated_at":"2026-07-13T01:00:00Z","tags":["project-editor","html-editor"]}
|
||
{"id":"PE-20260713T010000Z-0005","subject":"navigation-tab","predicate":"supports","object":"header navigation and flat-list footer navigation (add/remove/reorder/edit); grouped-column footer navigation is read-only until a future sprint","src":["src/app/features/project-editor/sections/navigation-section.component.ts"],"status":"active","kind":"constraint","confidence":"high","updated_at":"2026-07-13T01:00:00Z","tags":["project-editor","navigation"]}
|
||
```
|
||
|
||
- [ ] **Step 3: Manual verification**
|
||
|
||
Read both files back to confirm they render/parse: `cat docs/Project-Editor.md` (visually check the new sections landed in the right place) and validate the JSONL parses one-object-per-line: run `node -e "require('fs').readFileSync('docs/context/features/project-editor/FACTS.jsonl','utf8').trim().split('\n').forEach(l => JSON.parse(l))"` — expected: no output (no thrown error) means every line is valid JSON.
|
||
|
||
- [ ] **Step 4: Commit**
|
||
|
||
```bash
|
||
git add docs/Project-Editor.md docs/context/features/project-editor/FACTS.jsonl
|
||
git commit -m "docs(project-editor): document Sprint 16 tabs, draft/publish gap, and validation rules"
|
||
```
|
||
|
||
---
|
||
|
||
## Follow-ups (explicitly out of scope, do not fold into the above)
|
||
|
||
- No test runner exists in this repo (`package.json` has none). Recommend a follow-up to add Karma+Jasmine or Jest so this feature (and everything else) gets real automated tests.
|
||
- Real backend `PUT /builder/bootstrap/draft` / `POST /builder/bootstrap/publish` endpoints.
|
||
- A genuinely separate Angular app/deployment for `admin.marketplace.com`, replacing this sprint's same-build flat routes.
|
||
- Grouped (column-based) footer navigation editing.
|