96b12a1fbe
Milestone 5 of the Configuration Engine sprint. - Facade: changeSummary computed - per modified field, before/after values (schema label + stringified diff vs originalBootstrap), reusing modifiedFields from M4. - preview-section: new "changes since last publish" card ahead of the existing export/import/live-preview card - validation issue list (warning/error styled) plus a before/after change table. Reuses the existing, non-destructive ProjectEditorPreviewService.preview() call. - i18n: previewChangesTitle/NoIssues/NoChanges/ChangeField/Before/After in interface + en/ru/hy. Gate: tsc --noEmit, npm test (33/33), arch:check, build all green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
54 lines
2.2 KiB
HTML
54 lines
2.2 KiB
HTML
<app-section-card [title]="'builder.previewChangesTitle' | translate">
|
|
@if (issues().length > 0) {
|
|
<ul class="preview-validation" [class.has-errors]="hasBlockingIssues()">
|
|
@for (issue of issues(); track issue.code) {
|
|
<li [class.is-warning]="issue.severity === 'warning'" [class.is-error]="issue.severity === 'error'">{{ issue.message | translate }}</li>
|
|
}
|
|
</ul>
|
|
} @else {
|
|
<p class="preview-validation-ok">{{ 'builder.previewNoIssues' | translate }}</p>
|
|
}
|
|
|
|
@if (changeSummary().length > 0) {
|
|
<table class="preview-changes">
|
|
<thead>
|
|
<tr>
|
|
<th>{{ 'builder.previewChangeField' | translate }}</th>
|
|
<th>{{ 'builder.previewChangeBefore' | translate }}</th>
|
|
<th>{{ 'builder.previewChangeAfter' | translate }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@for (row of changeSummary(); track row.fieldKey) {
|
|
<tr>
|
|
<td>{{ row.labelKey | translate }}</td>
|
|
<td class="preview-before">{{ row.before || '—' }}</td>
|
|
<td class="preview-after">{{ row.after || '—' }}</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
} @else {
|
|
<p class="preview-validation-ok">{{ 'builder.previewNoChanges' | translate }}</p>
|
|
}
|
|
</app-section-card>
|
|
|
|
<app-section-card [title]="'builder.preview' | translate">
|
|
<div class="editor-actions">
|
|
<app-button variant="primary" (click)="preview()">{{ 'builder.livePreview' | translate }}</app-button>
|
|
<app-button variant="secondary" (click)="refreshExport()">{{ 'builder.exportBootstrap' | translate }}</app-button>
|
|
<app-button variant="secondary" (click)="importDraft()">{{ 'builder.importBootstrap' | translate }}</app-button>
|
|
</div>
|
|
@if (importError()) {
|
|
<p class="editor-error">{{ importError()! | translate }}</p>
|
|
}
|
|
<label>
|
|
<span>{{ 'builder.exportedBootstrap' | translate }}</span>
|
|
<textarea rows="10" [ngModel]="exportValue()" (ngModelChange)="exportValue.set($event)"></textarea>
|
|
</label>
|
|
<label>
|
|
<span>{{ 'builder.importSource' | translate }}</span>
|
|
<textarea rows="10" [ngModel]="importValue()" (ngModelChange)="importValue.set($event)"></textarea>
|
|
</label>
|
|
</app-section-card>
|