Applied app-input/app-form-field/app-button to 9 of 11 Project Editor sections: general, branding, theme, footer, homepage, widgets, languages, navigation, preview. header and features sections were left unchanged - they contain only checkboxes and selects, and no Checkbox/Select primitive exists yet. Theme section's 8 color pickers stay native <input type=color> (app-input's type union doesn't include 'color') but are now wrapped in app-form-field for consistent label/hint treatment. Added app-form-field.full grid-column rule to section.shared.scss (shared by all 11 sections) alongside the existing label.full rule, since the custom element doesn't match that selector. Production build green, arch:check passes.
66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { ProjectEditorFacade } from '../facade/project-editor.facade';
|
|
import { TranslatePipe } from '../../../i18n/translate.pipe';
|
|
import { InputComponent } from '../../../shared/ui/input/input.component';
|
|
import { FormFieldComponent } from '../../../shared/ui/form-field/form-field.component';
|
|
|
|
@Component({
|
|
selector: 'app-project-editor-general-section',
|
|
standalone: true,
|
|
imports: [FormsModule, TranslatePipe, InputComponent, FormFieldComponent],
|
|
templateUrl: './general-section.component.html',
|
|
styleUrls: ['./section.shared.scss'],
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
})
|
|
export class ProjectEditorGeneralSectionComponent {
|
|
private readonly facade = inject(ProjectEditorFacade);
|
|
readonly bootstrap = this.facade.bootstrap;
|
|
readonly languagesValue = computed(() => (this.bootstrap()?.localization.supportedLocales ?? []).join(', '));
|
|
|
|
updateMarketplaceName(value: string): void {
|
|
this.facade.updateBootstrap(current => ({
|
|
...current,
|
|
branding: { ...current.branding, brandName: value },
|
|
tenant: { ...current.tenant, name: value }
|
|
}));
|
|
}
|
|
|
|
updateDomain(value: string): void {
|
|
this.facade.updateBootstrap(current => ({
|
|
...current,
|
|
tenant: { ...current.tenant, host: value, websiteBaseUrl: `https://${value}` }
|
|
}));
|
|
}
|
|
|
|
updateDescription(value: string): void {
|
|
this.facade.updateBootstrap(current => ({
|
|
...current,
|
|
seo: {
|
|
...current.seo,
|
|
default: {
|
|
...current.seo.default,
|
|
description: value
|
|
}
|
|
}
|
|
}));
|
|
}
|
|
|
|
updateDefaultLanguage(value: string): void {
|
|
this.facade.updateBootstrap(current => ({
|
|
...current,
|
|
tenant: { ...current.tenant, defaultLocale: value },
|
|
localization: { ...current.localization, defaultLocale: value }
|
|
}));
|
|
}
|
|
|
|
updateSupportedLanguages(value: string): void {
|
|
const locales = value.split(',').map(item => item.trim()).filter(Boolean);
|
|
this.facade.updateBootstrap(current => ({
|
|
...current,
|
|
tenant: { ...current.tenant, supportedLocales: locales },
|
|
localization: { ...current.localization, supportedLocales: locales }
|
|
}));
|
|
}
|
|
}
|