fix: add icon preview to badge selector, hide displayBadges from view

This commit is contained in:
Dương Cầm
2026-02-05 00:02:56 +07:00
parent 420b18cebf
commit ea3d0a19cf
3 changed files with 44 additions and 28 deletions

View File

@@ -361,13 +361,17 @@ function ViewMode({ item, setMode, onDelete }: { item: any, setMode: (m: "EDIT")
</div>
)}
{/* DYNAMIC SPECS LOOP - Render ALL of them, skip 'other' if empty */}
{/* DYNAMIC SPECS LOOP - Render ALL of them, skip 'other' if empty, skip 'displayBadges' */}
{Object.entries(allSpecs)
.filter(([k, v]: any) => {
// Ẩn field "other" nếu trống
if (k.toLowerCase() === 'other' && (!v || String(v).trim() === '')) {
return false;
}
// Ẩn displayBadges (internal config, không hiển thị)
if (k === 'displayBadges') {
return false;
}
return true;
})
.map(([k, v]: any) => (
@@ -833,22 +837,28 @@ function EditMode({ item, locations, onCancel, onClose }: { item: any, locations
<div className="font-medium text-sm truncate">{badge.key}</div>
</div>
{/* Icon Select (Dynamic) */}
{/* Icon Select (Dynamic with preview) */}
<div className="flex-1">
<div className="text-[10px] uppercase font-bold text-gray-400 mb-0.5">Icon</div>
<Select
value={badge.icon || 'tag'}
onChange={(e) => {
const updated = [...currentBadges];
updated[idx] = { ...updated[idx], icon: e.target.value };
updateBadges(updated);
}}
className="h-8 text-xs w-full"
>
{Object.keys(BADGE_ICONS_MAP).map(k => (
<option key={k} value={k}>{k}</option>
))}
</Select>
<div className="flex items-center gap-1">
{(() => {
const PreviewIcon = BADGE_ICONS_MAP[badge.icon] || BADGE_ICONS_MAP['tag'];
return <PreviewIcon size={16} className="text-gray-600 shrink-0" />;
})()}
<Select
value={badge.icon || 'tag'}
onChange={(e) => {
const updated = [...currentBadges];
updated[idx] = { ...updated[idx], icon: e.target.value };
updateBadges(updated);
}}
className="h-8 text-xs w-full"
>
{Object.keys(BADGE_ICONS_MAP).map(k => (
<option key={k} value={k}>{k}</option>
))}
</Select>
</div>
</div>
{/* Color Select (Dynamic) */}

View File

@@ -838,19 +838,25 @@ export function SmartAddForm({ locations, onSuccess }: SmartAddFormProps) {
{/* Icon Select */}
<div className="flex-1">
<div className="text-[10px] uppercase font-bold text-gray-400 mb-0.5">Icon</div>
<Select
value={badge.icon || 'tag'}
onChange={(e) => {
const updated = [...currentBadges];
updated[idx] = { ...updated[idx], icon: e.target.value };
updateBadges(updated);
}}
className="h-8 text-xs w-full bg-white dark:bg-gray-900"
>
{Object.keys(BADGE_ICONS_MAP).map(k => (
<option key={k} value={k}>{k}</option>
))}
</Select>
<div className="flex items-center gap-1">
{(() => {
const PreviewIcon = BADGE_ICONS_MAP[badge.icon] || BADGE_ICONS_MAP['tag'];
return <PreviewIcon size={16} className="text-gray-600 shrink-0" />;
})()}
<Select
value={badge.icon || 'tag'}
onChange={(e) => {
const updated = [...currentBadges];
updated[idx] = { ...updated[idx], icon: e.target.value };
updateBadges(updated);
}}
className="h-8 text-xs w-full bg-white dark:bg-gray-900"
>
{Object.keys(BADGE_ICONS_MAP).map(k => (
<option key={k} value={k}>{k}</option>
))}
</Select>
</div>
</div>
{/* Color Select */}