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

feat(admin): visual badge manager with storefront-accurate previews

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

P0 user feedback: badges were a comma-separated text input with no preview.

- Replaced with a chip editor: current badges render as removable pills in the exact colors customers see on the storefront (colors sourced from getBadgeClass/item.utils.ts so admin preview and product card never drift)
- The standard set (new/sale/exclusive/hot/limited/bestseller/featured) is offered as one-click add chips; custom badges added via text field, unlimited, shown in the storefront's custom-badge grey
- Deliberately NOT per-badge arbitrary colors: badge colors are part of the storefront design contract (string[] + fixed palette); introducing per-badge color storage would change the product data shape consumed by the future backend
- New adminProducts keys (badgesHint, addBadge, removeBadge, customBadgePlaceholder) in en/ru/hy; verified in browser
This commit is contained in:
sdarbinyan
2026-07-19 08:44:20 +04:00
parent 31c64e9647
commit afaf79d327
7 changed files with 83 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/features/admin/products/components/admin-product-form.component.html
View File

@@ -231,8 +231,30 @@
<label class="toggle-row"><app-toggle [ngModel]="product.isNew" (ngModelChange)="updateField('isNew', $event)" [ariaLabel]="'adminProducts.new' | translate" /><span>{{ 'adminProducts.new' | translate }}</span></label>
<label class="toggle-row"><app-toggle [ngModel]="product.bestseller" (ngModelChange)="updateField('bestseller', $event)" [ariaLabel]="'adminProducts.bestseller' | translate" /><span>{{ 'adminProducts.bestseller' | translate }}</span></label>
</div>
<app-form-field [label]="'adminProducts.badges' | translate">
<app-input [ngModel]="product.badges.join(', ')" (ngModelChange)="updateBadges($event)" />
<app-form-field [label]="'adminProducts.badges' | translate" [hint]="'adminProducts.badgesHint' | translate">
<div class="badge-manager">
@if (product.badges.length > 0) {
<div class="badge-manager__current">
@for (badge of product.badges; track badge) {
<span class="badge-chip" [style.background]="badgeColor(badge)">
{{ badge }}
<button type="button" class="badge-chip__remove" (click)="removeBadge(badge)" [attr.aria-label]="('adminProducts.removeBadge' | translate) + ' ' + badge">&times;</button>
</span>
}
</div>
}
<div class="badge-manager__known">
@for (known of knownBadges; track known) {
@if (!product.badges.includes(known)) {
<button type="button" class="badge-chip badge-chip--add" [style.background]="badgeColor(known)" (click)="addBadge(known)">+ {{ known }}</button>
}
}
</div>
<div class="badge-manager__custom">
<app-input [ngModel]="customBadge" (ngModelChange)="customBadge = $event" [placeholder]="'adminProducts.customBadgePlaceholder' | translate" />
<app-button variant="secondary" size="sm" [disabled]="!customBadge.trim()" (click)="addCustomBadge()">{{ 'adminProducts.addBadge' | translate }}</app-button>
</div>
</div>
</app-form-field>
}

15
src/app/features/admin/products/components/admin-product-form.component.scss
View File

@@ -105,3 +105,18 @@ input[type='checkbox'] { width: auto; }
color: var(--text-secondary, #6b7280);
font-size: 0.85rem;
}
.badge-manager { display: grid; gap: 10px; }
.badge-manager__current, .badge-manager__known { display: flex; flex-wrap: wrap; gap: 6px; }
.badge-chip {
display: inline-flex; align-items: center; gap: 4px;
min-height: 24px; padding: 3px 10px; border-radius: 999px;
color: #fff; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
border: none;
}
.badge-chip--add { cursor: pointer; opacity: 0.55; &:hover { opacity: 1; } &:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 2px; opacity: 1; } }
.badge-chip__remove {
border: none; background: transparent; color: inherit; cursor: pointer;
font-size: 0.9rem; line-height: 1; padding: 0 0 0 2px;
&:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
}
.badge-manager__custom { display: flex; gap: 8px; align-items: center; app-input { flex: 1; max-width: 260px; } }

30
src/app/features/admin/products/components/admin-product-form.component.ts
View File

@@ -140,8 +140,34 @@ export class AdminProductFormComponent {
});
}
updateBadges(value: string): void {
this.productChange.emit({ badges: value.split(',').map(item => item.trim()).filter(Boolean) });
/** Storefront badge vocabulary from getBadgeClass (item.utils.ts) - same colors the customer sees. */
readonly knownBadges = ['new', 'sale', 'exclusive', 'hot', 'limited', 'bestseller', 'featured'];
private readonly badgeColors: Record<string, string> = {
new: '#4caf50', sale: '#f44336', exclusive: '#9c27b0', hot: '#ff5722',
limited: '#ff9800', bestseller: '#2196f3', featured: '#607d8b',
};
customBadge = '';
badgeColor(badge: string): string {
return this.badgeColors[badge.toLowerCase()] ?? '#78909c';
}
addBadge(badge: string): void {
const value = badge.trim();
if (!value || this.product.badges.includes(value)) {
return;
}
this.productChange.emit({ badges: [...this.product.badges, value] });
}
addCustomBadge(): void {
this.addBadge(this.customBadge);
this.customBadge = '';
}
removeBadge(badge: string): void {
this.productChange.emit({ badges: this.product.badges.filter(item => item !== badge) });
}
readonly createSpecRow = () => ({ key: '', value: '' });