feat(builder): implement professional content management experience
Content dashboard with real published/draft/SEO-health/completion metrics and a recommended-next-action; static pages editor rebuilt as visual page cards (icon/status/SEO badge/last edited) with legal pages surfaced first; full-page editor grouped into Content/SEO/Sharing/Advanced tabs, raw HTML moved behind an Advanced disclosure; hero image now supports alt text and caption; content-health-widget is a reusable checklist+completion component.
This commit is contained in:
sdarbinyan
@@ -1,198 +1,97 @@
|
||||
<section class="editor-section-card">
|
||||
<div class="editor-actions">
|
||||
<h2>{{ 'builder.staticPages' | translate }}</h2>
|
||||
<app-button variant="primary" (click)="createPage()">{{ 'builder.createPage' | translate }}</app-button>
|
||||
</div>
|
||||
@if (fieldError('staticPages'); as msg) {
|
||||
<p class="editor-error">{{ msg }}</p>
|
||||
}
|
||||
|
||||
<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 (editingPage(); as page) {
|
||||
<app-page-editor
|
||||
[page]="page"
|
||||
[locales]="locales()"
|
||||
[defaultLocale]="defaultLocale()"
|
||||
[hasDuplicateSlug]="hasDuplicateSlug(page)"
|
||||
[hasDuplicateRoute]="hasDuplicateRoute(page)"
|
||||
[hasEmptyTitle]="hasEmptyTitle(page)"
|
||||
[hasInvalidHtml]="hasInvalidHtml(page)"
|
||||
[hasInvalidSeo]="hasInvalidSeo(page)"
|
||||
(close)="closeEditor()"
|
||||
(updatePage)="updatePage(page.id, $event)"
|
||||
(updateTranslation)="updateTranslation(page.id, $event.locale, $event.field, $event.value)"
|
||||
(updateSeo)="updateSeo(page.id, $event)"
|
||||
(updateGallery)="updateGallery(page.id, $event)"
|
||||
(openMediaPicker)="openMediaPicker(page.id, $event)"
|
||||
(clearMedia)="clearMedia(page.id, $event)"
|
||||
(duplicatePage)="duplicatePage(page.id)"
|
||||
(deletePage)="deletePage(page.id)"
|
||||
/>
|
||||
} @else {
|
||||
<div class="editor-actions">
|
||||
<h2>{{ 'builder.staticPages' | translate }}</h2>
|
||||
<app-button variant="primary" (click)="createPage()">{{ 'builder.createPage' | translate }}</app-button>
|
||||
</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>
|
||||
<app-content-dashboard [health]="contentHealth()" (createPage)="createPage()" (goToPage)="openEditor($event)" />
|
||||
|
||||
<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]="'contentManagement.emptyStateGuideTitle' | translate" [description]="'contentManagement.emptyStateGuideBody' | translate">
|
||||
<span slot="actions">
|
||||
<app-button variant="primary" (click)="createPage()">{{ 'builder.createPage' | translate }}</app-button>
|
||||
</span>
|
||||
</app-empty-state>
|
||||
}
|
||||
|
||||
<div class="page-card-grid">
|
||||
@for (page of pages(); track page.id) {
|
||||
<div class="page-card-grid__item">
|
||||
<label class="page-card-grid__select">
|
||||
<app-toggle [ngModel]="isSelected(page.id)" (ngModelChange)="toggleSelect(page.id, $event)" [ariaLabel]="page.id" size="sm" />
|
||||
</label>
|
||||
<app-page-card
|
||||
[page]="page"
|
||||
[legalLabelKey]="legalLabelKey(page)"
|
||||
[seoStatus]="seoStatus(page)"
|
||||
[hasIssue]="hasAnyIssue(page)"
|
||||
[updatedAtLabel]="updatedAtLabel(page)"
|
||||
(open)="openEditor(page.id)"
|
||||
(duplicate)="duplicatePage(page.id)"
|
||||
(preview)="togglePreview(page.id)"
|
||||
(remove)="deletePage(page.id)"
|
||||
/>
|
||||
@if (previewOpenPageId() === page.id) {
|
||||
<app-static-page-preview [html]="previewHtml(page)" [title]="previewTitle(page)" />
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (pages().length === 0) {
|
||||
<app-empty-state [title]="'builder.staticPages' | translate" [description]="'builder.createPage' | translate">
|
||||
<span slot="actions">
|
||||
<app-button variant="primary" (click)="createPage()">{{ 'builder.createPage' | translate }}</app-button>
|
||||
</span>
|
||||
</app-empty-state>
|
||||
}
|
||||
|
||||
<div class="stack-list">
|
||||
@for (page of pages(); track page.id) {
|
||||
<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 (isModified(page)) {
|
||||
<app-badge variant="info">{{ 'builder.unsavedChanges' | 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>
|
||||
<app-button variant="secondary" size="sm" (click)="togglePreview(page.id)">{{ 'staticPages.previewToggle' | 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>
|
||||
|
||||
@if (previewOpenPageId() === page.id) {
|
||||
<app-static-page-preview [html]="previewHtml(page)" [title]="previewTitle(page)" />
|
||||
}
|
||||
|
||||
<div class="editor-grid three">
|
||||
<app-form-field [label]="'builder.pageId' | translate" [error]="hasEmptyTitle(page) ? ('staticPages.emptyTitle' | translate) : null">
|
||||
<app-input [ngModel]="page.id" (ngModelChange)="updatePage(page.id, { id: $event })" />
|
||||
</app-form-field>
|
||||
<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>
|
||||
<app-form-field [label]="'builder.footerGroup' | translate">
|
||||
<app-input [ngModel]="page.footerGroup || ''" (ngModelChange)="updatePage(page.id, { footerGroup: $event })" />
|
||||
</app-form-field>
|
||||
<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">
|
||||
<div class="media-field-row">
|
||||
<app-input [ngModel]="page.heroImage || ''" (ngModelChange)="updatePage(page.id, { heroImage: $event })" />
|
||||
<app-button variant="secondary" size="sm" (click)="openMediaPicker(page.id, 'heroImage')">{{ 'adminCategories.chooseImage' | translate }}</app-button>
|
||||
</div>
|
||||
</app-form-field>
|
||||
<app-form-field [label]="'staticPages.thumbnailLabel' | translate">
|
||||
<div class="media-field-row">
|
||||
<app-input [ngModel]="page.thumbnail || ''" (ngModelChange)="updatePage(page.id, { thumbnail: $event })" />
|
||||
<app-button variant="secondary" size="sm" (click)="openMediaPicker(page.id, 'thumbnail')">{{ 'adminCategories.chooseImage' | translate }}</app-button>
|
||||
</div>
|
||||
</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">
|
||||
<label class="toggle-row"><input type="checkbox" [checked]="page.showInFooter" (change)="updatePage(page.id, { showInFooter: $any($event.target).checked })" /><span>{{ 'builder.showInFooter' | translate }}</span></label>
|
||||
<label class="toggle-row"><input type="checkbox" [checked]="page.showInHeader" (change)="updatePage(page.id, { showInHeader: $any($event.target).checked })" /><span>{{ 'builder.showInHeader' | translate }}</span></label>
|
||||
<label class="toggle-row"><input type="checkbox" [checked]="page.showInSitemap" (change)="updatePage(page.id, { showInSitemap: $any($event.target).checked })" /><span>{{ 'builder.showInSitemap' | translate }}</span></label>
|
||||
<label class="toggle-row"><input type="checkbox" [checked]="page.requiresAuthentication" (change)="updatePage(page.id, { requiresAuthentication: $any($event.target).checked })" /><span>{{ 'builder.requiresAuthentication' | translate }}</span></label>
|
||||
</div>
|
||||
|
||||
@for (locale of locales(); track locale) {
|
||||
<div class="editor-grid two">
|
||||
<app-form-field [label]="(('builder.translationTitle' | translate) + ' ' + locale)">
|
||||
<app-input [ngModel]="page.translations[locale]?.title || ''" (ngModelChange)="updateTranslation(page.id, locale, 'title', $event)" />
|
||||
</app-form-field>
|
||||
<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>
|
||||
</div>
|
||||
}
|
||||
|
||||
<h4 class="page-card__subheading">{{ 'builder.seoSection' | translate }}</h4>
|
||||
<div class="editor-grid two">
|
||||
<app-form-field [label]="'builder.seoTitle' | translate">
|
||||
<app-input [ngModel]="page.seo?.title || ''" (ngModelChange)="updateSeo(page.id, { title: $event })" />
|
||||
</app-form-field>
|
||||
<app-form-field [label]="'builder.seoDescription' | translate">
|
||||
<app-input [ngModel]="page.seo?.description || ''" (ngModelChange)="updateSeo(page.id, { description: $event })" />
|
||||
</app-form-field>
|
||||
<app-form-field [label]="'builder.seoKeywords' | translate">
|
||||
<app-input [ngModel]="page.seo?.keywords || ''" (ngModelChange)="updateSeo(page.id, { keywords: $event })" />
|
||||
</app-form-field>
|
||||
<app-form-field [label]="'builder.seoCanonical' | translate">
|
||||
<app-input [ngModel]="page.seo?.canonical || ''" (ngModelChange)="updateSeo(page.id, { canonical: $event })" />
|
||||
</app-form-field>
|
||||
<app-form-field [label]="'builder.seoOgTitle' | translate">
|
||||
<app-input [ngModel]="page.seo?.ogTitle || ''" (ngModelChange)="updateSeo(page.id, { ogTitle: $event })" />
|
||||
</app-form-field>
|
||||
<app-form-field [label]="'builder.seoOgDescription' | translate">
|
||||
<app-input [ngModel]="page.seo?.ogDescription || ''" (ngModelChange)="updateSeo(page.id, { ogDescription: $event })" />
|
||||
</app-form-field>
|
||||
<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>
|
||||
}
|
||||
</div>
|
||||
<app-media-picker [open]="mediaPickerOpen" (selected)="onImagePicked($event)" (closed)="mediaPickerOpen = false" />
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user