feat(content-management): adopt Design System primitives in Static Pages editor
Some checks failed
Architecture Governance / architecture (push) Has been cancelled
Some checks failed
Architecture Governance / architecture (push) Has been cancelled
Replace raw button/input elements with app-button, app-input, app-card, app-form-field, app-badge, app-empty-state across the static pages CMS editor. Checkboxes left native (no checkbox primitive built yet). Also fix pre-existing bug in ContentPageService.normalizePages: iterating Object.values(config) lost the record key, so legacy-shaped bootstrap entries without explicit id/slug fields (e.g. mock bootstrap.json's about-us, privacy-policy, terms-of-service) crashed normalizeSlug(undefined). Now falls back to the record key for id/slug/title. Verified in browser at /edit/static-pages: renders correctly, primitives styled per tenant CSS vars, no console errors after fix.
This commit is contained in:
sdarbinyan
@@ -1,55 +1,78 @@
|
||||
<section class="editor-section-card">
|
||||
<div class="editor-actions">
|
||||
<h2>{{ 'builder.staticPages' | translate }}</h2>
|
||||
<button type="button" (click)="createPage()">{{ 'builder.createPage' | translate }}</button>
|
||||
<app-button variant="primary" (click)="createPage()">{{ 'builder.createPage' | translate }}</app-button>
|
||||
</div>
|
||||
|
||||
@if (validation().duplicateSlugs.length > 0) {
|
||||
<p class="editor-error">{{ 'staticPages.duplicateSlug' | translate }}</p>
|
||||
<app-badge variant="danger">{{ 'staticPages.duplicateSlug' | translate }}</app-badge>
|
||||
}
|
||||
@if (validation().emptyTitles.length > 0) {
|
||||
<p class="editor-error">{{ 'staticPages.emptyTitle' | translate }}</p>
|
||||
<app-badge variant="danger">{{ 'staticPages.emptyTitle' | translate }}</app-badge>
|
||||
}
|
||||
|
||||
@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) {
|
||||
<article class="sub-card">
|
||||
<div class="editor-actions">
|
||||
<h3>{{ page.id }}</h3>
|
||||
<div class="editor-actions">
|
||||
<button type="button" class="secondary" (click)="move(page.id, -1)">↑</button>
|
||||
<button type="button" class="secondary" (click)="move(page.id, 1)">↓</button>
|
||||
<button type="button" class="secondary" (click)="deletePage(page.id)">{{ 'builder.deletePage' | translate }}</button>
|
||||
<app-card padding="md">
|
||||
<div class="page-card">
|
||||
<div class="page-card__header">
|
||||
<h3 class="page-card__title">{{ page.id }}</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="danger" size="sm" (click)="deletePage(page.id)">{{ 'builder.deletePage' | translate }}</app-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-grid three">
|
||||
<label><span>{{ 'builder.pageId' | translate }}</span><input type="text" [ngModel]="page.id" (ngModelChange)="updatePage(page.id, { id: $event })" /></label>
|
||||
<label><span>{{ 'builder.slug' | translate }}</span><input type="text" [ngModel]="page.slug" (ngModelChange)="updatePage(page.id, { slug: $event })" /></label>
|
||||
<label><span>{{ 'builder.iconLabel' | translate }}</span><input type="text" [ngModel]="page.icon || ''" (ngModelChange)="updatePage(page.id, { icon: $event })" /></label>
|
||||
<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>
|
||||
<label><span>{{ 'builder.footerGroup' | translate }}</span><input type="text" [ngModel]="page.footerGroup || ''" (ngModelChange)="updatePage(page.id, { footerGroup: $event })" /></label>
|
||||
<label><span>{{ 'builder.orderLabel' | translate }}</span><input type="number" [ngModel]="page.order" (ngModelChange)="updatePage(page.id, { order: +$event })" /></label>
|
||||
</div>
|
||||
|
||||
@for (locale of locales(); track locale) {
|
||||
<div class="editor-grid two">
|
||||
<label>
|
||||
<span>{{ 'builder.translationTitle' | translate }} {{ locale }}</span>
|
||||
<input type="text" [ngModel]="page.translations[locale]?.title || ''" (ngModelChange)="updateTranslation(page.id, locale, 'title', $event)" />
|
||||
</label>
|
||||
<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 class="editor-grid three">
|
||||
<app-form-field [label]="'builder.pageId' | translate">
|
||||
<app-input [ngModel]="page.id" (ngModelChange)="updatePage(page.id, { id: $event })" />
|
||||
</app-form-field>
|
||||
<app-form-field [label]="'builder.slug' | translate">
|
||||
<app-input [ngModel]="page.slug" (ngModelChange)="updatePage(page.id, { slug: $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>
|
||||
</div>
|
||||
}
|
||||
</article>
|
||||
|
||||
<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>
|
||||
}
|
||||
</div>
|
||||
</app-card>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user