docs(static-pages): backoffice redirect + StaticPages.md
Milestone 7 of the Static Pages Module sprint.
- app.routes.ts: /backoffice/static-pages now redirects to /edit/static-pages
(absolute redirectTo) instead of rendering BackofficeComingSoonPageComponent
- Static Pages is a first-class Project Editor module, not a second CRUD
surface over the same bootstrap.staticPages data.
- New docs/StaticPages.md: full field reference (General/Localization/SEO/
Media/Publishing), the enabled+status storefront-gating story and its
backward-compat default (existing/legacy data normalizes to
enabled+published so nothing gets silently un-published; only new pages
default to draft), CRUD/search/filter/bulk, the "mutate from the
unfiltered list" implementation note, rich-text/HTML-mode contract
(pointer to EDITOR.md), nav integration, and the export/import/draft/
publish compatibility statement.
- docs/EDITOR.md: Static Pages row in the Sections table (was previously
absent - the row lived implicitly in Footer's description), HTML editor
section updated with the Sprint X+2 toolbar additions + validation
contract, redirect noted near the route line. `docs/Project-Editor.md`
(named in the original brief) no longer exists - superseded by EDITOR.md
per that file's own header; documentation went there + the new file
instead.
- docs/PROJECT.md: doc index entry for StaticPages.md.
Gate: tsc --noEmit, npm test (57/57), arch:check, build all green.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -15,7 +15,7 @@ src/app/features/project-editor/
|
|||||||
facade/ ProjectEditorFacade
|
facade/ ProjectEditorFacade
|
||||||
```
|
```
|
||||||
|
|
||||||
Route: `/edit/:section` or `/{lang}/edit/:section`.
|
Route: `/edit/:section` or `/{lang}/edit/:section`. `/backoffice/static-pages` (the Admin dashboard) redirects here (`/edit/static-pages`) rather than hosting a second CRUD surface over the same `bootstrap.staticPages` data (Sprint X+2 — see `docs/StaticPages.md`).
|
||||||
|
|
||||||
## Facade
|
## Facade
|
||||||
|
|
||||||
@@ -32,6 +32,7 @@ Route: `/edit/:section` or `/{lang}/edit/:section`.
|
|||||||
| Footer | `footer-section` | company info, address, phone, email, copyright, payment icons, social links, static pages list |
|
| Footer | `footer-section` | company info, address, phone, email, copyright, payment icons, social links, static pages list |
|
||||||
| Homepage | `homepage-section` | homepage section list: visibility, order (drag-and-drop), layout strategy, columns |
|
| Homepage | `homepage-section` | homepage section list: visibility, order (drag-and-drop), layout strategy, columns |
|
||||||
| Widgets | `widgets-section` | homepage widget configuration — typed editors for hero/categories/product-collection, JSON fallback for everything else |
|
| Widgets | `widgets-section` | homepage widget configuration — typed editors for hero/categories/product-collection, JSON fallback for everything else |
|
||||||
|
| Static Pages | `static-pages-editor` (`features/content-management/`) | Full CRUD, media, SEO, per-page draft/publish, device preview, nav integration — see `docs/StaticPages.md` (Sprint X+2) |
|
||||||
| Marketplace Features | `features-section` | feature flags, catalog navigation mode, search suggestions/history, recently viewed, reviews/questions/recommendations |
|
| Marketplace Features | `features-section` | feature flags, catalog navigation mode, search suggestions/history, recently viewed, reviews/questions/recommendations |
|
||||||
| Languages | `languages-section` | add/remove supported locale, set default locale; syncs translation keys across static pages and nav labels via `LocaleSyncService` |
|
| Languages | `languages-section` | add/remove supported locale, set default locale; syncs translation keys across static pages and nav labels via `LocaleSyncService` |
|
||||||
| Navigation | `navigation-section` | header nav: add/remove/reorder/edit label/URL/visibility, per-locale via `app-locale-tabs`. Flat footer nav: same. Grouped (column-based) footer nav is read-only here — edit via Footer tab. |
|
| Navigation | `navigation-section` | header nav: add/remove/reorder/edit label/URL/visibility, per-locale via `app-locale-tabs`. Flat footer nav: same. Grouped (column-based) footer nav is read-only here — edit via Footer tab. |
|
||||||
@@ -118,7 +119,11 @@ Interaction feedback + motion applied consistently, all gated behind `prefers-re
|
|||||||
|
|
||||||
**Status: working.** Verified live 2026-07-16 — typing captured, toolbar commands functional (bold toggles, `insertUnorderedList` wraps `<ul><li>`, H2/H3/link/image/table), `htmlChange` emits on every edit, and a "Код" toggle swaps to raw-HTML editing.
|
**Status: working.** Verified live 2026-07-16 — typing captured, toolbar commands functional (bold toggles, `insertUnorderedList` wraps `<ul><li>`, H2/H3/link/image/table), `htmlChange` emits on every edit, and a "Код" toggle swaps to raw-HTML editing.
|
||||||
|
|
||||||
**Caveat:** implemented on the deprecated `document.execCommand` API. It works in all current browsers today but is a legacy web API with no modern drop-in replacement; if a future browser drops it, this component needs a rewrite (e.g. a maintained rich-text library). By design it emits **raw, unsanitized** HTML — sanitization is a storefront-render concern, not an authoring one (see `docs/BACKEND.md` item 4 on server-side content moderation on publish).
|
**Toolbar (Sprint X+2 additions):** horizontal rule, code block (`<pre>`), embed (prompt for a URL, inserts a sandboxed `<iframe sandbox="allow-scripts allow-same-origin">`) — alongside the original bold/italic/underline/H2/H3/lists/link/image/table set.
|
||||||
|
|
||||||
|
**HTML-mode validation (Sprint X+2):** switching from raw-HTML back to the visual surface now runs `schema/validators/primitives.validateHtml` (stack-based tag-balance check) first; a malformed edit (unclosed/mismatched tag) stays in code mode with an inline error instead of silently corrupting the visual editor.
|
||||||
|
|
||||||
|
**Caveat:** implemented on the deprecated `document.execCommand` API. It works in all current browsers today but is a legacy web API with no modern drop-in replacement; if a future browser drops it, this component needs a rewrite (e.g. a maintained rich-text library). By design it emits **raw, unsanitized** HTML — sanitization is a storefront-render concern, not an authoring one (see `docs/BACKEND.md` item 4 on server-side content moderation on publish; `StaticPageComponent` and `StaticPagePreviewComponent` both run content through `DomSanitizer` before render).
|
||||||
|
|
||||||
## Field-description / dropdown UX (Sprint 19+)
|
## Field-description / dropdown UX (Sprint 19+)
|
||||||
|
|
||||||
|
|||||||
@@ -24,6 +24,7 @@ Every tenant conceptually has three surfaces on this one codebase:
|
|||||||
- **[FRONTEND.md](FRONTEND.md)** — app structure, routing, i18n, theming, state management (signals/facades, no NgRx), dynamic rendering.
|
- **[FRONTEND.md](FRONTEND.md)** — app structure, routing, i18n, theming, state management (signals/facades, no NgRx), dynamic rendering.
|
||||||
- **[BOOTSTRAP.md](BOOTSTRAP.md)** — the `BootstrapConfig` model, field-by-field, with a representative example JSON.
|
- **[BOOTSTRAP.md](BOOTSTRAP.md)** — the `BootstrapConfig` model, field-by-field, with a representative example JSON.
|
||||||
- **[EDITOR.md](EDITOR.md)** — the Project Editor: every section, the save/publish/draft/reset model, and the field-description/dropdown UX.
|
- **[EDITOR.md](EDITOR.md)** — the Project Editor: every section, the save/publish/draft/reset model, and the field-description/dropdown UX.
|
||||||
|
- **[StaticPages.md](StaticPages.md)** — the Static Pages module: full field reference, per-page draft/publish gating, CRUD/search/filter/bulk, rich text, device preview, nav integration (Sprint X+2).
|
||||||
- **[PROJECT-STRUCTURE.md](PROJECT-STRUCTURE.md)** — folder-by-folder tour of `src/app/**` with a worked "add a new feature" example (admin dashboard).
|
- **[PROJECT-STRUCTURE.md](PROJECT-STRUCTURE.md)** — folder-by-folder tour of `src/app/**` with a worked "add a new feature" example (admin dashboard).
|
||||||
- **[ADMIN.md](ADMIN.md)** — Sprint 19 admin dashboard: routing, architecture, data sources, known gaps.
|
- **[ADMIN.md](ADMIN.md)** — Sprint 19 admin dashboard: routing, architecture, data sources, known gaps.
|
||||||
- `docs/architecture/foundation/**` — the enforced ADRs (ADR-001…ADR-010) and standards docs (Coding-Standards, Naming-Conventions, Dependency-Rules, Folder-Blueprint, Import-Boundary-Matrix, State-Management-Standards, Configuration-Standards, Component-Standards, Service-Standards). These are governance, not narrative — read them directly; `ARCHITECTURE.md` only links to them.
|
- `docs/architecture/foundation/**` — the enforced ADRs (ADR-001…ADR-010) and standards docs (Coding-Standards, Naming-Conventions, Dependency-Rules, Folder-Blueprint, Import-Boundary-Matrix, State-Management-Standards, Configuration-Standards, Component-Standards, Service-Standards). These are governance, not narrative — read them directly; `ARCHITECTURE.md` only links to them.
|
||||||
|
|||||||
84
docs/StaticPages.md
Normal file
84
docs/StaticPages.md
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
# Static Pages (Project Editor module)
|
||||||
|
|
||||||
|
Sprint X+2. Full-featured CRUD editor for tenant static content (About, Privacy, Terms, Contacts, custom pages, etc.), living inside the Project Editor at `/edit/static-pages`. Edits `bootstrap.staticPages` directly — the same model the storefront renders from (`docs/BOOTSTRAP.md`), no parallel content store.
|
||||||
|
|
||||||
|
`/backoffice/static-pages` (Admin dashboard) redirects here rather than hosting a second CRUD UI over the same data.
|
||||||
|
|
||||||
|
## Where it lives
|
||||||
|
|
||||||
|
```
|
||||||
|
src/app/features/content-management/
|
||||||
|
models/content-page.model.ts ContentPage — the CRUD-facing shape
|
||||||
|
services/content-page.service.ts normalize / resolve / validate / serialize <-> StaticPageConfig
|
||||||
|
facade/content-management.facade.ts
|
||||||
|
components/
|
||||||
|
static-pages-editor.component.* the editor UI (list + per-page card)
|
||||||
|
static-page-preview/ device preview (desktop/tablet/mobile)
|
||||||
|
|
||||||
|
src/app/shared/models/config/static-page.model.ts StaticPageConfig — the bootstrap wire format
|
||||||
|
src/app/features/project-editor/components/html-editor/ MarketplaceHtmlEditorComponent (rich text)
|
||||||
|
src/app/core/config/static-page-resolver.service.ts storefront resolver
|
||||||
|
```
|
||||||
|
|
||||||
|
`ContentPageService` is the single translation layer between the editor's `ContentPage[]` and the bootstrap's `Record<string, StaticPageConfig>` (or the legacy array format) — normalize/resolve/validate/serialize all live there. Nothing else should hand-roll that mapping.
|
||||||
|
|
||||||
|
## Field reference
|
||||||
|
|
||||||
|
### General
|
||||||
|
- `id` — stable key, also the bootstrap record key.
|
||||||
|
- `slug` — used for duplicate-slug detection and as the `route` default.
|
||||||
|
- `route` — **independently editable** from `slug` (defaults from it, but can diverge — e.g. a legacy redirect path). Validated for duplicates against every other page's route.
|
||||||
|
- `enabled` — master on/off switch. A disabled page never resolves on the storefront, regardless of `status`.
|
||||||
|
- Navigation visibility — `showInHeader`, `showInFooter`, `showInSitemap` (independent per-surface flags, unrelated to `enabled`).
|
||||||
|
- `order` — sort position in the editor list and (for footer pages) the auto-generated footer nav group.
|
||||||
|
- `icon` — optional icon identifier.
|
||||||
|
|
||||||
|
### Localization
|
||||||
|
- `title` (per locale, in `translations[locale].title`) and a top-level `title` fallback.
|
||||||
|
- `translations[locale].html` — the rich-text/HTML body, one per supported locale.
|
||||||
|
- `customTemplate` — optional template identifier; consumed by nothing yet (data-only field, forward-compatible with a future template-selection feature).
|
||||||
|
|
||||||
|
### SEO
|
||||||
|
Per top-level `seo` and per-translation `translations[locale].seo` (locale-specific overrides win when resolving): `title`, `description`, `keywords`, `canonical`, `robots`, `ogTitle`, `ogDescription`, `ogImage`.
|
||||||
|
|
||||||
|
### Media
|
||||||
|
- `heroImage`, `thumbnail` — wired through the shared `MediaPickerComponent` (same picker used by Branding/Footer logos).
|
||||||
|
- `gallery: string[]` — a lightweight comma-separated URL list ("future ready" per the brief; no dedicated multi-upload UI yet).
|
||||||
|
|
||||||
|
### Publishing
|
||||||
|
- `status: 'draft' | 'published'` — **per-page** publish lifecycle, independent of the whole-bootstrap draft/publish cycle (see below).
|
||||||
|
- Modified indicator — an "unsaved changes" badge per page, diffed against the originally loaded/published snapshot (`ProjectEditorFacade.originalStaticPages`).
|
||||||
|
|
||||||
|
## The enabled + status gating story
|
||||||
|
|
||||||
|
A static page resolves on the storefront (`ContentPageService.resolvePage`, used by both `StaticPageResolverService` for the page route and `FooterResolverService` for the auto-generated footer nav group) **only when `enabled === true` AND `status === 'published'`.** This is independent of whether the surrounding bootstrap itself has been published — a page marked `draft` stays invisible even after the tenant hits "Publish" on the whole config, and only becomes visible once its own status flips to `published`.
|
||||||
|
|
||||||
|
**Compatibility default:** normalizing existing bootstrap data (loaded from the backend, imported, or read from a legacy array-format `staticPages`) defaults missing `enabled`/`status` to `enabled: true, status: 'published'` — pre-existing pages never get silently un-published by this feature landing. Only the editor's **create-page** action opts a brand-new page into `status: 'draft'` by default, so newly authored content doesn't go live until an author explicitly publishes it.
|
||||||
|
|
||||||
|
The Static Pages editor's own **Live Preview** (desktop/tablet/mobile, `StaticPagePreviewComponent`) intentionally bypasses this gate — it renders straight from the page's current in-memory HTML, so a draft page can still be previewed before publishing.
|
||||||
|
|
||||||
|
## CRUD, search, filter, bulk actions
|
||||||
|
|
||||||
|
- Create, duplicate (clones a page as a new `draft`), delete (confirm dialog), reorder (up/down — not drag-and-drop; see below).
|
||||||
|
- Search across id/slug/route/title (all locales); filter by status (draft/published) or by locale (hides pages missing a translation for the selected locale).
|
||||||
|
- Bulk actions (multi-select checkboxes): delete, enable, disable, publish, unpublish.
|
||||||
|
- **Important implementation detail:** every mutation (create/duplicate/delete/move/bulk) operates on the full, unfiltered page list, never the search/filter-narrowed view — reading from the filtered view before writing back would silently delete whatever the active filter was hiding. See the `persist()` comment in `static-pages-editor.component.ts`.
|
||||||
|
- Reorder is up/down (`move()`), not literal drag handles — a deliberate, lower-complexity scope call; swapping in drag-and-drop later is additive.
|
||||||
|
|
||||||
|
## Validation
|
||||||
|
|
||||||
|
`ContentPageService.validatePages()` returns: `duplicateSlugs`, `duplicateRoutes` (checked independently — a route can diverge from its slug), `emptyTitles`, `invalidHtml` (via `schema/validators/primitives.validateHtml`), `invalidSeo` (canonical/OG-image URL shape, and `robots` against a known-token set: `index`, `noindex`, `follow`, `nofollow`, and their comma-joined combinations). Surfaced as per-page badges in the editor.
|
||||||
|
|
||||||
|
This is layered under (not a replacement for) `ProjectValidator`'s existing platform-wide checks (`docs/EDITOR.md`'s "Configuration schema..." section), which already cover duplicate slugs and cross-surface duplicate routes (pages vs. static pages) at the whole-bootstrap level.
|
||||||
|
|
||||||
|
## Rich text editor
|
||||||
|
|
||||||
|
`MarketplaceHtmlEditorComponent` — see `docs/EDITOR.md`'s "HTML editor (Static Pages)" section for the full toolbar list, the Sprint X+2 additions (horizontal rule, code block, embed), and the HTML-mode validation contract.
|
||||||
|
|
||||||
|
## Navigation integration
|
||||||
|
|
||||||
|
The Navigation section (`navigation-section.component`) has an "Insert page link" control (page picker + button) next to both header and footer "Add link." It creates a `NavigationItemConfig { type: 'staticPage', key: <pageId> }` — a shape the resolvers (`StaticPageResolverService`, `FooterResolverService`) already understood before this sprint; only the editor-side create path was missing. A static-page-linked nav row shows a "Linked to page" indicator instead of editable label/URL fields, since both are derived dynamically from the linked page.
|
||||||
|
|
||||||
|
## Export / import / draft / publish
|
||||||
|
|
||||||
|
No changes to `ProjectEditorIoService` or `ProjectEditorDraftStorageService` — static pages flow through `bootstrap.staticPages` exactly as before, so JSON export/import and the draft-autosave/publish cycle work unmodified. All Sprint X+2 fields are additive and optional at the wire level.
|
||||||
@@ -87,9 +87,12 @@ const coreRoutes: Routes = [
|
|||||||
canDeactivate: [adminCategoryDirtyGuard]
|
canDeactivate: [adminCategoryDirtyGuard]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
// Static Pages is a first-class Project Editor module (Sprint X+2), not a
|
||||||
|
// separate backoffice CRUD surface - redirect here rather than build a
|
||||||
|
// second UI over the same bootstrap.staticPages data.
|
||||||
path: 'static-pages',
|
path: 'static-pages',
|
||||||
loadComponent: () => import('./features/backoffice/shared/backoffice-coming-soon-page.component').then(m => m.BackofficeComingSoonPageComponent),
|
redirectTo: '/edit/static-pages',
|
||||||
data: { titleKey: 'dashboard.actionStaticPages' }
|
pathMatch: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'transactions',
|
path: 'transactions',
|
||||||
|
|||||||
Reference in New Issue
Block a user