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

feat(project-editor): reusable image-field (thumbnail+replace+remove), branding OG image+gallery

Browse Source 
- shared app-image-field component: thumbnail preview, replace, remove, opens media-picker
- branding: add socialImageUrl + galleryUrls fields, wire to new image-field
- footer: logo + payment icon fields use image-field (drop manual media-picker plumbing)
- i18n: common.remove, adminCategories.replaceImage, builder.socialImage/gallery keys (en/ru/hy)

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
sdarbinyan
2026-07-17 15:22:45 +04:00
parent feda0f685f
commit b183410888
12 changed files with 175 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,16 +4,12 @@ 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';
import { ButtonComponent } from '../../../shared/ui/button/button.component';
import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
import { KeyValueEditorComponent } from '../../../shared/ui/key-value-editor/key-value-editor.component';
import { MediaPickerComponent } from '../../../shared/media/media-picker/media-picker.component';
import { MediaAsset } from '../../../core/media/models/media-asset.model';
import { ImageFieldComponent } from '../../../shared/ui/image-field/image-field.component';
import { FooterPaymentIconConfig, FooterSocialLinkConfig } from '../../../shared/models/config';
import { isValidHttpUrl } from '../schema/validators/primitives';
type FooterMediaTarget = 'logo' | { type: 'paymentIcon'; index: number };
@Component({
selector: 'app-project-editor-footer-section',
standalone: true,
@@ -22,10 +18,9 @@ type FooterMediaTarget = 'logo' | { type: 'paymentIcon'; index: number };
TranslatePipe,
InputComponent,
FormFieldComponent,
ButtonComponent,
SectionCardComponent,
KeyValueEditorComponent,
MediaPickerComponent
ImageFieldComponent
],
templateUrl: './footer-section.component.html',
styleUrls: ['./section.shared.scss'],
@@ -43,9 +38,6 @@ export class ProjectEditorFooterSectionComponent {
readonly paymentIconRows = computed<FooterPaymentIconConfig[]>(() => this.bootstrap()?.footer?.paymentIcons ?? []);
readonly socialLinkRows = computed<FooterSocialLinkConfig[]>(() => this.bootstrap()?.footer?.socialLinks ?? []);
protected mediaPickerOpen = false;
private mediaPickerTarget: FooterMediaTarget | null = null;
readonly createPaymentIconRow = (): FooterPaymentIconConfig => ({ src: '', alt: '' });
readonly createSocialLinkRow = (): FooterSocialLinkConfig => {
@@ -67,26 +59,6 @@ export class ProjectEditorFooterSectionComponent {
this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, logoUrl: value } }));
}
openLogoPicker(): void {
this.mediaPickerTarget = 'logo';
this.mediaPickerOpen = true;
}
openPaymentIconPicker(index: number): void {
this.mediaPickerTarget = { type: 'paymentIcon', index };
this.mediaPickerOpen = true;
}
onImagePicked(asset: MediaAsset): void {
const target = this.mediaPickerTarget;
if (target === 'logo') {
this.updateLogo(asset.url);
} else if (target?.type === 'paymentIcon') {
this.updatePaymentIconSrc(target.index, asset.url);
}
this.mediaPickerOpen = false;
}
onPaymentIconsChange(rows: FooterPaymentIconConfig[]): void {
this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, paymentIcons: rows } }));
}