50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
|
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';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'app-project-editor-widgets-section',
|
||
|
|
standalone: true,
|
||
|
|
imports: [FormsModule, TranslatePipe],
|
||
|
|
templateUrl: './widgets-section.component.html',
|
||
|
|
styleUrls: ['./section.shared.scss'],
|
||
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
||
|
|
})
|
||
|
|
export class ProjectEditorWidgetsSectionComponent {
|
||
|
|
private readonly facade = inject(ProjectEditorFacade);
|
||
|
|
readonly widgets = this.facade.homepageWidgets;
|
||
|
|
|
||
|
|
updateWidget(widgetId: string, updater: (props: Record<string, unknown>) => Record<string, unknown>): void {
|
||
|
|
this.facade.updateBootstrap(current => ({
|
||
|
|
...current,
|
||
|
|
pages: current.pages.map(page => ({
|
||
|
|
...page,
|
||
|
|
sections: page.sections.map(section => ({
|
||
|
|
...section,
|
||
|
|
widgets: section.widgets.map(widget => widget.id !== widgetId ? widget : ({
|
||
|
|
...widget,
|
||
|
|
props: updater(widget.props ?? {})
|
||
|
|
}))
|
||
|
|
}))
|
||
|
|
}))
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
|
||
|
|
updateProp(widgetId: string, key: string, value: unknown): void {
|
||
|
|
this.updateWidget(widgetId, props => ({ ...props, [key]: value }));
|
||
|
|
}
|
||
|
|
|
||
|
|
updateJson(widgetId: string, raw: string): void {
|
||
|
|
try {
|
||
|
|
this.updateWidget(widgetId, () => JSON.parse(raw));
|
||
|
|
} catch {
|
||
|
|
// Ignore malformed draft until valid JSON is provided.
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
propsJson(props: Record<string, unknown>): string {
|
||
|
|
return JSON.stringify(props ?? {}, null, 2);
|
||
|
|
}
|
||
|
|
}
|