diff --git a/src/components/editor/ProductEditor.tsx b/src/components/editor/ProductEditor.tsx index eb7bfa8..63a1ef4 100644 --- a/src/components/editor/ProductEditor.tsx +++ b/src/components/editor/ProductEditor.tsx @@ -2,8 +2,8 @@ // Editor jedného produktu (bežné aj vernostné produkty) – zbalený po produktoch, len to, čo treba: // texty, fotka (zoom/posun), cenovka (šablóna, veľkosť, ceny), dostupnosť a ďalšie možnosti. -import React, { useEffect, useRef } from 'react'; -import { BadgeTemplate, CardProduct, ProductLabel, ProductPhoto } from '@/types/newsletter'; +import React, { useEffect, useRef, useState } from 'react'; +import { BADGE_IMPORT_TYPES, BadgeTemplate, CardProduct, ProductLabel, ProductPhoto } from '@/types/newsletter'; import { ChevronDown, ChevronUp, Trash2, Pencil, Globe, Layers } from 'lucide-react'; import { ImageUploadInput } from './ImageUploadInput'; import { pickAlt } from '@/lib/altText'; @@ -99,6 +99,84 @@ const ResetLink: React.FC<{ onClick: () => void }> = ({ onClick }) => ( ); +// Filter šablón cenoviek v produkte podľa tagov (typ, farba, pôvod, appka); prázdne = všetky +interface BadgeFilter { + type: string; + color: string; + origin: string; // '' | 'SK' | 'none' + app: string; // '' | 'app' | 'none' +} +const EMPTY_BADGE_FILTER: BadgeFilter = { type: '', color: '', origin: '', app: '' }; +// posledný filter – pri otvorení ďalšieho produktu ostane nastavený +let lastBadgeFilter: BadgeFilter = EMPTY_BADGE_FILTER; + +export function filterBadges(badges: BadgeTemplate[], f: BadgeFilter): BadgeTemplate[] { + return badges + .filter((b) => { + const t = b.importTags || {}; + if (f.type && t.type !== f.type) return false; + if (f.color && t.color !== f.color) return false; + if (f.origin === 'SK' && t.origin !== 'SK') return false; + if (f.origin === 'none' && t.origin === 'SK') return false; + if (f.app === 'app' && !t.app) return false; + if (f.app === 'none' && t.app) return false; + return true; + }) + .sort((a, b) => a.name.localeCompare(b.name, 'sk')); +} + +const BadgeFilterBar: React.FC<{ filter: BadgeFilter; onChange: (f: BadgeFilter) => void; shown: number; total: number }> = ({ + filter, + onChange, + shown, + total +}) => { + const cls = (active: boolean) => + `min-w-0 text-[10px] rounded-md border px-1 py-1 bg-white ${active ? 'border-red-400 text-red-700 font-bold' : 'border-gray-200 text-gray-600'}`; + const set = (k: keyof BadgeFilter) => (e: React.ChangeEvent) => onChange({ ...filter, [k]: e.target.value }); + const active = Object.values(filter).some(Boolean); + return ( +
+
+ + + + +
+ {active && ( + + )} +
+ ); +}; + // Poradie fotiek ako vrstvy: navrchu zoznamu je fotka najviac vpredu const PhotoOrderList: React.FC<{ product: CardProduct; onChange: (order: string[]) => void }> = ({ product, onChange }) => { const stack = photoStack(product); // odzadu dopredu @@ -247,6 +325,12 @@ export const ProductEditor: React.FC = ({ }) => { // Po otvorení (aj klikom na produkt v náhľade) posunieme panel na tento produkt const rootRef = useRef(null); + const [badgeFilter, setBadgeFilterState] = useState(() => lastBadgeFilter); + const setBadgeFilter = (f: BadgeFilter) => { + lastBadgeFilter = f; + setBadgeFilterState(f); + }; + const filteredBadges = filterBadges(availableBadges, badgeFilter); useEffect(() => { if (open) rootRef.current?.scrollIntoView({ block: 'start', behavior: 'smooth' }); }, [open]); @@ -416,6 +500,7 @@ export const ProductEditor: React.FC = ({ {/* CENOVKA */} +