feat(static-pages): CRUD completion + search/filter/bulk actions
Milestone 2 of the Static Pages Module sprint. - StaticPagesEditorComponent: duplicate page, confirm-before-delete/bulk- delete (matches the resetDraft confirm pattern), route/enabled/customTemplate/ media(hero/thumbnail/gallery) fields wired into the card, per-page publish/ unpublish action, status + duplicate-route/invalid-html/invalid-seo badges. - Search (id/slug/route/title across all locales), filter by status (draft/published) and by locale (hides pages missing a translation for the selected locale) - all local computed() filters, no new service. - Bulk selection (per-row + select-all-visible checkboxes) with bulk delete/ enable/disable/publish/unpublish, one updateBootstrap() call each. - Correctness note: introduced `allPages` (unfiltered) vs `pages` (filtered view) computeds. Every mutation (create/duplicate/delete/move/bulk) reads from allPages(), never the filtered pages() - reading from the filtered view would have silently deleted whatever an active search/filter hid on the next persist(). Documented inline on persist() as a guardrail for future edits. - Fixed a template compile error found by the build gate: Angular templates don't support inline arrow functions in binding expressions ((ngModelChange)="...map(v => v.trim())..." failed to parse) - moved the gallery CSV-parsing into a component method (updateGallery). - SEO robots field added to the page card (validated against a known-token set from M1). - i18n: staticPages.* extended (search/filter/bulk/route/enabled/status/ media/robots/disabled labels) across the interface + en/ru/hy. 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:
sdarbinyan
@@ -4,6 +4,35 @@
|
||||
<app-button variant="primary" (click)="createPage()">{{ 'builder.createPage' | translate }}</app-button>
|
||||
</div>
|
||||
|
||||
<div class="editor-grid three static-pages-toolbar">
|
||||
<app-form-field [label]="'staticPages.searchPlaceholder' | translate">
|
||||
<app-input [ngModel]="searchQuery()" (ngModelChange)="updateSearchQuery($event)" [placeholder]="'staticPages.searchPlaceholder' | translate" />
|
||||
</app-form-field>
|
||||
<app-form-field [label]="'staticPages.statusLabel' | translate">
|
||||
<app-select [options]="statusFilterOptions()" [ngModel]="statusFilter()" (ngModelChange)="updateStatusFilter($event)" />
|
||||
</app-form-field>
|
||||
<app-form-field [label]="'builder.languagesTab' | translate">
|
||||
<app-select [options]="localeFilterOptions()" [ngModel]="localeFilter()" (ngModelChange)="updateLocaleFilter($event)" />
|
||||
</app-form-field>
|
||||
</div>
|
||||
|
||||
@if (pages().length > 0) {
|
||||
<div class="editor-actions static-pages-bulk-bar">
|
||||
<label class="toggle-row">
|
||||
<app-toggle [ngModel]="allVisibleSelected()" (ngModelChange)="toggleSelectAllVisible($event)" [ariaLabel]="'staticPages.selectAll' | translate" />
|
||||
<span>{{ 'staticPages.selectAll' | translate }}</span>
|
||||
</label>
|
||||
@if (selectedCount() > 0) {
|
||||
<span>{{ selectedCount() }} {{ 'staticPages.selectedCount' | translate }}</span>
|
||||
<app-button variant="secondary" size="sm" (click)="bulkSetEnabled(true)">{{ 'staticPages.bulkEnable' | translate }}</app-button>
|
||||
<app-button variant="secondary" size="sm" (click)="bulkSetEnabled(false)">{{ 'staticPages.bulkDisable' | translate }}</app-button>
|
||||
<app-button variant="secondary" size="sm" (click)="bulkSetStatus('published')">{{ 'staticPages.bulkPublishAction' | translate }}</app-button>
|
||||
<app-button variant="secondary" size="sm" (click)="bulkSetStatus('draft')">{{ 'staticPages.bulkUnpublish' | translate }}</app-button>
|
||||
<app-button variant="danger" size="sm" (click)="bulkDelete()">{{ 'staticPages.bulkDelete' | translate }}</app-button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (pages().length === 0) {
|
||||
<app-empty-state [title]="'builder.staticPages' | translate" [description]="'builder.createPage' | translate">
|
||||
<span slot="actions">
|
||||
@@ -17,18 +46,40 @@
|
||||
<app-card padding="md">
|
||||
<div class="page-card">
|
||||
<div class="page-card__header">
|
||||
<label class="toggle-row page-card__select">
|
||||
<app-toggle [ngModel]="isSelected(page.id)" (ngModelChange)="toggleSelect(page.id, $event)" [ariaLabel]="page.id" />
|
||||
</label>
|
||||
<h3 class="page-card__title">
|
||||
{{ page.id }}
|
||||
<app-badge [variant]="page.status === 'published' ? 'success' : 'neutral'">{{ (page.status === 'published' ? 'builder.statusPublished' : 'builder.statusDraft') | translate }}</app-badge>
|
||||
@if (!page.enabled) {
|
||||
<app-badge variant="neutral">{{ 'staticPages.disabledBadge' | translate }}</app-badge>
|
||||
}
|
||||
@if (hasDuplicateSlug(page)) {
|
||||
<app-badge variant="danger">{{ 'staticPages.duplicateSlug' | translate }}</app-badge>
|
||||
}
|
||||
@if (hasDuplicateRoute(page)) {
|
||||
<app-badge variant="danger">{{ 'staticPages.duplicateRoute' | translate }}</app-badge>
|
||||
}
|
||||
@if (hasEmptyTitle(page)) {
|
||||
<app-badge variant="danger">{{ 'staticPages.emptyTitle' | translate }}</app-badge>
|
||||
}
|
||||
@if (hasInvalidHtml(page)) {
|
||||
<app-badge variant="danger">{{ 'staticPages.invalidHtml' | translate }}</app-badge>
|
||||
}
|
||||
@if (hasInvalidSeo(page)) {
|
||||
<app-badge variant="warning">{{ 'staticPages.invalidSeo' | translate }}</app-badge>
|
||||
}
|
||||
</h3>
|
||||
<div class="editor-actions">
|
||||
<app-button variant="ghost" size="sm" (click)="move(page.id, -1)">↑</app-button>
|
||||
<app-button variant="ghost" size="sm" (click)="move(page.id, 1)">↓</app-button>
|
||||
<app-button variant="secondary" size="sm" (click)="duplicatePage(page.id)">{{ 'staticPages.duplicatePage' | translate }}</app-button>
|
||||
@if (page.status === 'published') {
|
||||
<app-button variant="secondary" size="sm" (click)="updatePage(page.id, { status: 'draft' })">{{ 'staticPages.unpublishPageAction' | translate }}</app-button>
|
||||
} @else {
|
||||
<app-button variant="primary" size="sm" (click)="updatePage(page.id, { status: 'published' })">{{ 'staticPages.publishPageAction' | translate }}</app-button>
|
||||
}
|
||||
<app-button variant="danger" size="sm" (click)="deletePage(page.id)">{{ 'builder.deletePage' | translate }}</app-button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -40,6 +91,9 @@
|
||||
<app-form-field [label]="'builder.slug' | translate" [error]="hasDuplicateSlug(page) ? ('staticPages.duplicateSlug' | translate) : null">
|
||||
<app-input [ngModel]="page.slug" (ngModelChange)="updatePage(page.id, { slug: $event })" />
|
||||
</app-form-field>
|
||||
<app-form-field [label]="'staticPages.routeLabel' | translate" [error]="hasDuplicateRoute(page) ? ('staticPages.duplicateRoute' | translate) : null">
|
||||
<app-input [ngModel]="page.route" (ngModelChange)="updatePage(page.id, { route: $event })" />
|
||||
</app-form-field>
|
||||
<app-form-field [label]="'builder.iconLabel' | translate">
|
||||
<app-input [ngModel]="page.icon || ''" (ngModelChange)="updatePage(page.id, { icon: $event })" />
|
||||
</app-form-field>
|
||||
@@ -49,6 +103,25 @@
|
||||
<app-form-field [label]="'builder.orderLabel' | translate">
|
||||
<app-input type="number" [ngModel]="page.order" (ngModelChange)="updatePage(page.id, { order: +$event })" />
|
||||
</app-form-field>
|
||||
<app-form-field [label]="'staticPages.customTemplateLabel' | translate">
|
||||
<app-input [ngModel]="page.customTemplate || ''" (ngModelChange)="updatePage(page.id, { customTemplate: $event })" />
|
||||
</app-form-field>
|
||||
<label class="toggle-row">
|
||||
<app-toggle [ngModel]="page.enabled" (ngModelChange)="updatePage(page.id, { enabled: $event })" [ariaLabel]="'staticPages.enabledLabel' | translate" />
|
||||
<span>{{ 'staticPages.enabledLabel' | translate }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="editor-grid three">
|
||||
<app-form-field [label]="'staticPages.heroImageLabel' | translate">
|
||||
<app-input [ngModel]="page.heroImage || ''" (ngModelChange)="updatePage(page.id, { heroImage: $event })" />
|
||||
</app-form-field>
|
||||
<app-form-field [label]="'staticPages.thumbnailLabel' | translate">
|
||||
<app-input [ngModel]="page.thumbnail || ''" (ngModelChange)="updatePage(page.id, { thumbnail: $event })" />
|
||||
</app-form-field>
|
||||
<app-form-field [label]="'staticPages.galleryLabel' | translate">
|
||||
<app-input [ngModel]="(page.gallery || []).join(', ')" (ngModelChange)="updateGallery(page.id, $event)" />
|
||||
</app-form-field>
|
||||
</div>
|
||||
|
||||
<div class="toggle-grid">
|
||||
@@ -96,6 +169,9 @@
|
||||
<app-form-field [label]="'builder.seoOgImage' | translate">
|
||||
<app-input [ngModel]="page.seo?.ogImage || ''" (ngModelChange)="updateSeo(page.id, { ogImage: $event })" />
|
||||
</app-form-field>
|
||||
<app-form-field [label]="'staticPages.seoRobotsLabel' | translate" [error]="hasInvalidSeo(page) ? ('staticPages.invalidSeo' | translate) : null">
|
||||
<app-input [ngModel]="page.seo?.robots || ''" (ngModelChange)="updateSeo(page.id, { robots: $event })" placeholder="index,follow" />
|
||||
</app-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</app-card>
|
||||
|
||||
Reference in New Issue
Block a user