sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(project-editor): live inline validation and publish gating

Browse Source 
Milestone 3 of the Configuration Engine sprint.

- Facade fieldError(key) accessor over issuesByField for inline field errors.
- Bind [error] on schema-backed fields: theme palette colours, general
  name/domain, branding logo (translated via each section).
- project-editor-nav: per-section blocking-issue count badge (issuesBySection).
- save-bar: Publish now disabled on hasBlockingIssues() (errors only, so new
  warnings no longer block); issue list tags warning vs error severity.

Editor verified rendering at /ru/edit/theme with the new nav + save bar;
validation logic covered by the 25 unit tests.

Gate: tsc --noEmit, npm test (25/25), arch:check, build all green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
sdarbinyan
2026-07-17 02:07:14 +04:00
parent 7b8382131d
commit a7bab6be52
13 changed files with 77 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/features/project-editor/components/project-editor-nav.component.html
View File

@@ -5,6 +5,6 @@
routerLinkActive="active"
[ariaCurrentWhenActive]="'page'"
class="editor-nav-link"
>{{ section.label | translate }}</a>
>{{ section.label | translate }}@if (issueCount(section.id); as count) {<span class="editor-nav-badge" [attr.aria-label]="count + ' ' + ('builder.title' | translate)">{{ count }}</span>}</a>
}
</nav>

22
src/app/features/project-editor/components/project-editor-nav.component.scss
View File

@@ -36,6 +36,28 @@
}
}
.editor-nav-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
margin-left: 6px;
padding: 0 5px;
border-radius: 999px;
background: var(--error-color, #ef4444);
color: #fff;
font-size: 0.7rem;
font-weight: 700;
line-height: 1;
vertical-align: middle;
}
.editor-nav-link.active .editor-nav-badge {
background: #fff;
color: var(--error-color, #ef4444);
}
@media (prefers-reduced-motion: reduce) {
.editor-nav-link {
transition: none;

11
src/app/features/project-editor/components/project-editor-nav.component.ts
View File

@@ -1,8 +1,9 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { TranslatePipe } from '../../../i18n/translate.pipe';
import { LangRoutePipe } from '../../../pipes/lang-route.pipe';
import { ProjectEditorSectionId } from '../models/project-editor.model';
import { ProjectEditorFacade } from '../facade/project-editor.facade';
@Component({
selector: 'app-project-editor-nav',
@@ -13,6 +14,14 @@ import { ProjectEditorSectionId } from '../models/project-editor.model';
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProjectEditorNavComponent {
private readonly facade = inject(ProjectEditorFacade);
private readonly issuesBySection = this.facade.issuesBySection;
/** Count of blocking issues in a section, for the nav badge. */
issueCount(sectionId: ProjectEditorSectionId): number {
return this.issuesBySection().get(sectionId) ?? 0;
}
readonly sections: Array<{ id: ProjectEditorSectionId; label: string }> = [
{ id: 'general', label: 'builder.general' },
{ id: 'branding', label: 'builder.branding' },

4
src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.html
View File

@@ -15,7 +15,7 @@
@if (issues().length > 0) {
<ul class="project-editor-save-bar-issues">
@for (issue of issues(); track issue.code) {
<li>{{ issue.message | translate }}</li>
<li [class.is-warning]="issue.severity === 'warning'" [class.is-error]="issue.severity === 'error'">{{ issue.message | translate }}</li>
}
</ul>
}
@@ -23,6 +23,6 @@
<div class="project-editor-save-bar-actions">
<app-button variant="danger" size="sm" (click)="resetDraft()">{{ 'builder.resetDraft' | translate }}</app-button>
<app-button variant="secondary" size="sm" (click)="save()">{{ 'builder.save' | translate }}</app-button>
<app-button variant="primary" size="sm" [disabled]="issues().length > 0" (click)="publish()">{{ 'builder.publish' | translate }}</app-button>
<app-button variant="primary" size="sm" [disabled]="hasBlockingIssues()" (click)="publish()">{{ 'builder.publish' | translate }}</app-button>
</div>
</div>

8
src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.scss
View File

@@ -20,6 +20,14 @@
margin: 0.25rem 0 0;
padding-left: 1.25rem;
color: var(--danger, #b91c1c);
li.is-warning {
color: var(--warning-color, #b45309);
}
li.is-error {
color: var(--error-color, #b91c1c);
}
}
.project-editor-save-bar-actions {

1
src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.ts
View File

@@ -18,6 +18,7 @@ export class ProjectEditorSaveBarComponent {
readonly dirty = this.facade.dirty;
readonly status = this.facade.status;
readonly issues = this.facade.validationIssues;
readonly hasBlockingIssues = this.facade.hasBlockingIssues;
readonly lastSavedAt = this.facade.lastSavedAt;
readonly draftRestored = this.facade.draftRestored;

6
src/app/features/project-editor/facade/project-editor.facade.ts
View File

@@ -119,6 +119,12 @@ export class ProjectEditorFacade {
this.draftStorage.save(next);
}
/** i18n message key of the first issue mapped to a field, or null. Reactive: reads `issuesByField`. */
fieldError(fieldKey: string): string | null {
const issues = this.issuesByField().get(fieldKey);
return issues && issues.length > 0 ? issues[0].message : null;
}
dismissDraftRestoredNotice(): void {
this.state.update(current => ({ ...current, draftRestored: false }));
}

2
src/app/features/project-editor/sections/branding-section.component.html
View File

@@ -1,7 +1,7 @@
@if (bootstrap(); as bootstrap) {
<app-section-card [title]="'builder.branding' | translate">
<div class="editor-grid two">
<app-form-field [label]="'builder.logo' | translate" [hint]="'builder.logoDesc' | translate">
<app-form-field [label]="'builder.logo' | translate" [hint]="'builder.logoDesc' | translate" [error]="fieldError('branding.logoUrl')">
<div class="media-field-row">
<app-input [ngModel]="bootstrap.branding.logoUrl" (ngModelChange)="updateField('logoUrl', $event)" />
<app-button variant="secondary" size="sm" (click)="openMediaPicker('logoUrl')">{{ 'adminCategories.chooseImage' | translate }}</app-button>

6
src/app/features/project-editor/sections/branding-section.component.ts
View File

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ProjectEditorFacade } from '../facade/project-editor.facade';
import { TranslatePipe } from '../../../i18n/translate.pipe';
import { TranslateService } from '../../../i18n/translate.service';
import { InputComponent } from '../../../shared/ui/input/input.component';
import { FormFieldComponent } from '../../../shared/ui/form-field/form-field.component';
import { ButtonComponent } from '../../../shared/ui/button/button.component';
@@ -21,7 +22,12 @@ type BrandingImageField = 'logoUrl' | 'logoCompactUrl' | 'faviconUrl';
})
export class ProjectEditorBrandingSectionComponent {
private readonly facade = inject(ProjectEditorFacade);
private readonly translate = inject(TranslateService);
readonly bootstrap = this.facade.bootstrap;
readonly fieldError = (key: string): string | null => {
const messageKey = this.facade.fieldError(key);
return messageKey ? this.translate.t(messageKey) : null;
};
protected mediaPickerOpen = false;
private mediaPickerTarget: BrandingImageField | null = null;

4
src/app/features/project-editor/sections/general-section.component.html
View File

@@ -1,10 +1,10 @@
@if (bootstrap(); as bootstrap) {
<app-section-card [title]="'builder.general' | translate">
<div class="editor-grid two">
<app-form-field [label]="'builder.marketplaceName' | translate" [hint]="'builder.marketplaceNameDesc' | translate">
<app-form-field [label]="'builder.marketplaceName' | translate" [hint]="'builder.marketplaceNameDesc' | translate" [error]="fieldError('branding.brandName')">
<app-input [ngModel]="bootstrap.branding.brandName" (ngModelChange)="updateMarketplaceName($event)" />
</app-form-field>
<app-form-field [label]="'builder.domain' | translate" [hint]="'builder.domainDesc' | translate">
<app-form-field [label]="'builder.domain' | translate" [hint]="'builder.domainDesc' | translate" [error]="fieldError('tenant.host') || fieldError('tenant.websiteBaseUrl')">
<app-input [ngModel]="bootstrap.tenant.host" (ngModelChange)="updateDomain($event)" />
</app-form-field>
<label class="full">

6
src/app/features/project-editor/sections/general-section.component.ts
View File

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/c
import { FormsModule } from '@angular/forms';
import { ProjectEditorFacade } from '../facade/project-editor.facade';
import { TranslatePipe } from '../../../i18n/translate.pipe';
import { TranslateService } from '../../../i18n/translate.service';
import { InputComponent } from '../../../shared/ui/input/input.component';
import { FormFieldComponent } from '../../../shared/ui/form-field/form-field.component';
import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
@@ -16,7 +17,12 @@ import { SectionCardComponent } from '../../../shared/ui/section-card/section-ca
})
export class ProjectEditorGeneralSectionComponent {
private readonly facade = inject(ProjectEditorFacade);
private readonly translate = inject(TranslateService);
readonly bootstrap = this.facade.bootstrap;
readonly fieldError = (key: string): string | null => {
const messageKey = this.facade.fieldError(key);
return messageKey ? this.translate.t(messageKey) : null;
};
readonly languagesValue = computed(() => (this.bootstrap()?.localization.supportedLocales ?? []).join(', '));
updateMarketplaceName(value: string): void {

16
src/app/features/project-editor/sections/theme-section.component.html
View File

@@ -1,14 +1,14 @@
@if (bootstrap(); as bootstrap) {
<app-section-card [title]="'builder.theme' | translate">
<div class="editor-grid two">
<app-form-field [label]="'builder.primaryColor' | translate" [hint]="'builder.primaryColorDesc' | translate"><app-color-picker [ngModel]="bootstrap.theme.palette.primary" (ngModelChange)="updatePalette('primary', $event)" /></app-form-field>
<app-form-field [label]="'builder.secondaryColor' | translate" [hint]="'builder.secondaryColorDesc' | translate"><app-color-picker [ngModel]="bootstrap.theme.palette.secondary" (ngModelChange)="updatePalette('secondary', $event)" /></app-form-field>
<app-form-field [label]="'builder.backgroundColor' | translate" [hint]="'builder.backgroundColorDesc' | translate"><app-color-picker [ngModel]="bootstrap.theme.palette.backgroundPrimary" (ngModelChange)="updatePalette('backgroundPrimary', $event)" /></app-form-field>
<app-form-field [label]="'builder.surfaceColor' | translate" [hint]="'builder.surfaceColorDesc' | translate"><app-color-picker [ngModel]="bootstrap.theme.palette.backgroundSecondary" (ngModelChange)="updatePalette('backgroundSecondary', $event)" /></app-form-field>
<app-form-field [label]="'builder.textColor' | translate" [hint]="'builder.textColorDesc' | translate"><app-color-picker [ngModel]="bootstrap.theme.palette.textPrimary" (ngModelChange)="updatePalette('textPrimary', $event)" /></app-form-field>
<app-form-field [label]="'builder.successColor' | translate" [hint]="'builder.successColorDesc' | translate"><app-color-picker [ngModel]="bootstrap.theme.palette.success" (ngModelChange)="updatePalette('success', $event)" /></app-form-field>
<app-form-field [label]="'builder.warningColor' | translate" [hint]="'builder.warningColorDesc' | translate"><app-color-picker [ngModel]="bootstrap.theme.palette.warning" (ngModelChange)="updatePalette('warning', $event)" /></app-form-field>
<app-form-field [label]="'builder.dangerColor' | translate" [hint]="'builder.dangerColorDesc' | translate"><app-color-picker [ngModel]="bootstrap.theme.palette.danger" (ngModelChange)="updatePalette('danger', $event)" /></app-form-field>
<app-form-field [label]="'builder.primaryColor' | translate" [hint]="'builder.primaryColorDesc' | translate" [error]="fieldError('theme.palette.primary')"><app-color-picker [ngModel]="bootstrap.theme.palette.primary" (ngModelChange)="updatePalette('primary', $event)" /></app-form-field>
<app-form-field [label]="'builder.secondaryColor' | translate" [hint]="'builder.secondaryColorDesc' | translate" [error]="fieldError('theme.palette.secondary')"><app-color-picker [ngModel]="bootstrap.theme.palette.secondary" (ngModelChange)="updatePalette('secondary', $event)" /></app-form-field>
<app-form-field [label]="'builder.backgroundColor' | translate" [hint]="'builder.backgroundColorDesc' | translate" [error]="fieldError('theme.palette.backgroundPrimary')"><app-color-picker [ngModel]="bootstrap.theme.palette.backgroundPrimary" (ngModelChange)="updatePalette('backgroundPrimary', $event)" /></app-form-field>
<app-form-field [label]="'builder.surfaceColor' | translate" [hint]="'builder.surfaceColorDesc' | translate" [error]="fieldError('theme.palette.backgroundSecondary')"><app-color-picker [ngModel]="bootstrap.theme.palette.backgroundSecondary" (ngModelChange)="updatePalette('backgroundSecondary', $event)" /></app-form-field>
<app-form-field [label]="'builder.textColor' | translate" [hint]="'builder.textColorDesc' | translate" [error]="fieldError('theme.palette.textPrimary')"><app-color-picker [ngModel]="bootstrap.theme.palette.textPrimary" (ngModelChange)="updatePalette('textPrimary', $event)" /></app-form-field>
<app-form-field [label]="'builder.successColor' | translate" [hint]="'builder.successColorDesc' | translate" [error]="fieldError('theme.palette.success')"><app-color-picker [ngModel]="bootstrap.theme.palette.success" (ngModelChange)="updatePalette('success', $event)" /></app-form-field>
<app-form-field [label]="'builder.warningColor' | translate" [hint]="'builder.warningColorDesc' | translate" [error]="fieldError('theme.palette.warning')"><app-color-picker [ngModel]="bootstrap.theme.palette.warning" (ngModelChange)="updatePalette('warning', $event)" /></app-form-field>
<app-form-field [label]="'builder.dangerColor' | translate" [hint]="'builder.dangerColorDesc' | translate" [error]="fieldError('theme.palette.danger')"><app-color-picker [ngModel]="bootstrap.theme.palette.danger" (ngModelChange)="updatePalette('danger', $event)" /></app-form-field>
<app-form-field [label]="'builder.themeModeLabel' | translate" [hint]="'builder.themeModeDesc' | translate">
<app-select [options]="themeModeSelectOptions()" [ngModel]="bootstrap.theme.mode" (ngModelChange)="updateThemeMode($event)" />
</app-form-field>

4
src/app/features/project-editor/sections/theme-section.component.ts
View File

@@ -33,6 +33,10 @@ export class ProjectEditorThemeSectionComponent {
private readonly facade = inject(ProjectEditorFacade);
private readonly translate = inject(TranslateService);
readonly bootstrap = this.facade.bootstrap;
readonly fieldError = (key: string): string | null => {
const messageKey = this.facade.fieldError(key);
return messageKey ? this.translate.t(messageKey) : null;
};
readonly themeModeOptions: ThemeModeOption[] = [
{ value: 'light', labelKey: 'builder.themeModeLight', descKey: 'builder.themeModeLightDesc' },