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

feat(builder): visual footer builder with drag-and-drop columns

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

P0 user feedback: footer static pages were comma-separated text; no way to add extra phones/emails for different countries.

- New FooterColumnConfig/FooterLinkConfig model (footer-config.model.ts): columns of links, each link pointing at an existing static page (resolved by key, so it survives route renames) or a custom URL
- Footer Builder UI: add/remove columns and links, per-link toggle between 'existing page' (dropdown of real static pages) and 'custom URL', drag-and-drop reordering of both columns and links via @angular/cdk/drag-drop (same primitive already used by the homepage section builder)
- Wired FooterResolverService (the service the real storefront footer actually renders through) to read footer.columns as the primary source when present - without this the builder would have saved data nobody ever displayed. Falls back to the existing legacy static-page auto-grouping when no columns are configured, so existing sites are unaffected
- CompanyContactConfig gains additionalPhones/additionalEmails (primary phone/email field unchanged) with add/remove UI for country-specific support lines
- Old comma-separated staticPageKeys input removed from the UI; field kept on the model as deprecated/read-compat only
- New builder.* i18n keys (en/ru/hy); fixed an accidental duplicate-key collision with pre-existing navigation-section addLink/removeLink keys during the rename pass
- Verified in browser: added column, added link, switched link source page->custom, added phone number - all reactive and error-free
This commit is contained in:
sdarbinyan
2026-07-19 13:58:57 +04:00
parent 3b955b116a
commit 726df0cee0
10 changed files with 420 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/app/features/project-editor/sections/footer-section.component.ts
View File

@@ -1,51 +1,62 @@
import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
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 { ButtonComponent } from '../../../shared/ui/button/button.component';
import { FormFieldComponent } from '../../../shared/ui/form-field/form-field.component';
import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
import { KeyValueEditorComponent } from '../../../shared/ui/key-value-editor/key-value-editor.component';
import { ImageFieldComponent } from '../../../shared/ui/image-field/image-field.component';
import { FooterPaymentIconConfig, FooterSocialLinkConfig } from '../../../shared/models/config';
import { FooterColumnConfig, FooterLinkConfig, FooterPaymentIconConfig, FooterSocialLinkConfig } from '../../../shared/models/config';
import { isValidHttpUrl } from '../schema/validators/primitives';
import { ContentPageService } from '../../content-management/services/content-page.service';
@Component({
selector: 'app-project-editor-footer-section',
standalone: true,
imports: [
FormsModule,
DragDropModule,
TranslatePipe,
InputComponent,
ButtonComponent,
FormFieldComponent,
SectionCardComponent,
KeyValueEditorComponent,
ImageFieldComponent
],
templateUrl: './footer-section.component.html',
styleUrls: ['./section.shared.scss'],
styleUrls: ['./section.shared.scss', './footer-section.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProjectEditorFooterSectionComponent {
private readonly facade = inject(ProjectEditorFacade);
private readonly translate = inject(TranslateService);
private readonly contentPageService = inject(ContentPageService);
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 staticPagesValue = computed(() => (this.bootstrap()?.footer?.staticPageKeys ?? this.bootstrap()?.footer?.legalPageKeys ?? []).join(', '));
/** Existing static pages, offered as the primary way to link a footer column - stays correct if a page's route changes later. */
readonly availablePages = computed(() => this.contentPageService.normalizePages(this.bootstrap()?.staticPages));
readonly copyrightValue = computed(() => {
const value = this.bootstrap()?.footer?.copyrightText;
return typeof value === 'string' ? value : '';
});
readonly paymentIconRows = computed<FooterPaymentIconConfig[]>(() => this.bootstrap()?.footer?.paymentIcons ?? []);
readonly socialLinkRows = computed<FooterSocialLinkConfig[]>(() => this.bootstrap()?.footer?.socialLinks ?? []);
readonly columns = computed<FooterColumnConfig[]>(() => this.bootstrap()?.footer?.columns ?? []);
readonly additionalPhones = computed<string[]>(() => this.bootstrap()?.company.contacts.additionalPhones ?? []);
readonly additionalEmails = computed<string[]>(() => this.bootstrap()?.company.contacts.additionalEmails ?? []);
readonly createPaymentIconRow = (): FooterPaymentIconConfig => ({ src: '', alt: '' });
readonly createSocialLinkRow = (): FooterSocialLinkConfig => ({ id: `social-${Date.now()}`, label: '', url: '' });
updateCompanyName(value: string): void { this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, companyName: value } })); }
@@ -53,10 +64,6 @@ export class ProjectEditorFooterSectionComponent {
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 } })); }
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 } }));
}
updateLogo(value: string): void {
this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, logoUrl: value } }));
@@ -93,4 +100,99 @@ export class ProjectEditorFooterSectionComponent {
isValidUrl(url: string): boolean {
return !url || isValidHttpUrl(url);
}
// --- Footer columns (replaces the old comma-separated static-page-keys input) ---
private setColumns(columns: FooterColumnConfig[]): void {
this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, columns } }));
}
addColumn(): void {
this.setColumns([...this.columns(), { id: `col-${Date.now()}`, title: '', links: [] }]);
}
removeColumn(columnId: string): void {
this.setColumns(this.columns().filter(column => column.id !== columnId));
}
updateColumnTitle(columnId: string, title: string): void {
this.setColumns(this.columns().map(column => column.id === columnId ? { ...column, title } : column));
}
dropColumn(event: CdkDragDrop<FooterColumnConfig[]>): void {
const columns = [...this.columns()];
moveItemInArray(columns, event.previousIndex, event.currentIndex);
this.setColumns(columns);
}
addLink(columnId: string): void {
const link: FooterLinkConfig = { id: `link-${Date.now()}`, label: '', pageKey: this.availablePages()[0]?.id ?? '', url: '' };
this.setColumns(this.columns().map(column => column.id === columnId ? { ...column, links: [...column.links, link] } : column));
}
removeLink(columnId: string, linkId: string): void {
this.setColumns(this.columns().map(column => column.id === columnId ? { ...column, links: column.links.filter(link => link.id !== linkId) } : column));
}
updateLink(columnId: string, linkId: string, patch: Partial<FooterLinkConfig>): void {
this.setColumns(this.columns().map(column => column.id === columnId
? { ...column, links: column.links.map(link => link.id === linkId ? { ...link, ...patch } : link) }
: column));
}
dropLink(columnId: string, event: CdkDragDrop<FooterLinkConfig[]>): void {
const column = this.columns().find(c => c.id === columnId);
if (!column) {
return;
}
const links = [...column.links];
moveItemInArray(links, event.previousIndex, event.currentIndex);
this.setColumns(this.columns().map(c => c.id === columnId ? { ...c, links } : c));
}
linkSourceMode(link: FooterLinkConfig): 'page' | 'custom' {
return link.pageKey ? 'page' : 'custom';
}
setLinkSourceMode(columnId: string, linkId: string, mode: 'page' | 'custom'): void {
if (mode === 'page') {
this.updateLink(columnId, linkId, { pageKey: this.availablePages()[0]?.id ?? '', url: '' });
} else {
this.updateLink(columnId, linkId, { pageKey: '' });
}
}
// --- Multiple phones/emails ---
private setAdditionalPhones(phones: string[]): void {
this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, contacts: { ...current.company.contacts, additionalPhones: phones } } }));
}
private setAdditionalEmails(emails: string[]): void {
this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, contacts: { ...current.company.contacts, additionalEmails: emails } } }));
}
addPhone(): void {
this.setAdditionalPhones([...this.additionalPhones(), '']);
}
updatePhoneAt(index: number, value: string): void {
this.setAdditionalPhones(this.additionalPhones().map((phone, i) => i === index ? value : phone));
}
removePhoneAt(index: number): void {
this.setAdditionalPhones(this.additionalPhones().filter((_, i) => i !== index));
}
addEmail(): void {
this.setAdditionalEmails([...this.additionalEmails(), '']);
}
updateEmailAt(index: number, value: string): void {
this.setAdditionalEmails(this.additionalEmails().map((email, i) => i === index ? value : email));
}
removeEmailAt(index: number): void {
this.setAdditionalEmails(this.additionalEmails().filter((_, i) => i !== index));
}
}