49 lines
3.3 KiB
TypeScript
49 lines
3.3 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';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'app-project-editor-footer-section',
|
||
|
|
standalone: true,
|
||
|
|
imports: [FormsModule, TranslatePipe],
|
||
|
|
templateUrl: './footer-section.component.html',
|
||
|
|
styleUrls: ['./section.shared.scss'],
|
||
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
||
|
|
})
|
||
|
|
export class ProjectEditorFooterSectionComponent {
|
||
|
|
private readonly facade = inject(ProjectEditorFacade);
|
||
|
|
readonly bootstrap = this.facade.bootstrap;
|
||
|
|
readonly paymentIconsValue = computed(() => (this.bootstrap()?.footer?.paymentIcons ?? []).map(icon => `${icon.src}|${icon.alt}`).join('\n'));
|
||
|
|
readonly socialLinksValue = computed(() => (this.bootstrap()?.footer?.socialLinks ?? []).map(link => `${link.id}|${link.label}|${link.url}`).join('\n'));
|
||
|
|
readonly staticPagesValue = computed(() => (this.bootstrap()?.footer?.staticPageKeys ?? this.bootstrap()?.footer?.legalPageKeys ?? []).join(', '));
|
||
|
|
readonly copyrightValue = computed(() => {
|
||
|
|
const value = this.bootstrap()?.footer?.copyrightText;
|
||
|
|
return typeof value === 'string' ? value : '';
|
||
|
|
});
|
||
|
|
|
||
|
|
updateCompanyName(value: string): void { this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, companyName: value } })); }
|
||
|
|
updateAddress(value: string): void { this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, address: { ...current.company.address, street: value } } })); }
|
||
|
|
updatePhone(value: string): void { this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, contacts: { ...current.company.contacts, phone: value } }, branding: { ...current.branding, supportPhone: value } })); }
|
||
|
|
updateEmail(value: string): void { this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, contacts: { ...current.company.contacts, email: value } }, branding: { ...current.branding, supportEmail: value } })); }
|
||
|
|
updateCopyright(value: string): void { this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, copyrightText: value } })); }
|
||
|
|
updatePaymentIcons(value: string): void {
|
||
|
|
const paymentIcons = value.split('\n').map(line => line.trim()).filter(Boolean).map((line, index) => {
|
||
|
|
const [src, alt] = line.split('|');
|
||
|
|
return { src: src?.trim() ?? '', alt: alt?.trim() ?? `icon-${index + 1}` };
|
||
|
|
});
|
||
|
|
this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, paymentIcons } }));
|
||
|
|
}
|
||
|
|
updateSocialLinks(value: string): void {
|
||
|
|
const socialLinks = value.split('\n').map(line => line.trim()).filter(Boolean).map((line, index) => {
|
||
|
|
const [id, label, url] = line.split('|');
|
||
|
|
return { id: id?.trim() || `social-${index + 1}`, label: label?.trim() || '', url: url?.trim() || '' };
|
||
|
|
});
|
||
|
|
this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, socialLinks } }));
|
||
|
|
}
|
||
|
|
updateStaticPages(value: string): void {
|
||
|
|
const staticPageKeys = value.split(',').map(item => item.trim()).filter(Boolean);
|
||
|
|
this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, staticPageKeys, legalPageKeys: staticPageKeys } }));
|
||
|
|
}
|
||
|
|
}
|