feat: Mehrere Suchbegriffe im Maps-Tab (Chip-System)
- Keywords als Chip-Input statt einzelnem Textfeld - Queries = jedes Keyword × jede Region (Kreuzprodukt) - Vorschläge für gängige deutsche B2B-Branchen Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -32,12 +32,10 @@ const RESULTS_OPTIONS = [
|
||||
{ value: "60", label: "60 per query (max)" },
|
||||
];
|
||||
|
||||
// Preset queries for common German solar use cases
|
||||
const PRESET_QUERIES = [
|
||||
"Solaranlage Installateur Deutschland",
|
||||
"Photovoltaik Montage",
|
||||
"Solar Handwerker",
|
||||
"Solarstrom Installation",
|
||||
const KEYWORD_PRESETS = [
|
||||
"Solaranlage Installateur", "Dachdecker", "Elektriker",
|
||||
"Heizungsbauer", "Sanitär", "Steuerberater", "Rechtsanwalt",
|
||||
"Zahnarzt", "Physiotherapeut", "Immobilienmakler",
|
||||
];
|
||||
|
||||
const GERMAN_REGIONS = [
|
||||
@@ -50,7 +48,8 @@ const GERMAN_REGIONS = [
|
||||
type Stage = "idle" | "running" | "done" | "failed";
|
||||
|
||||
export default function MapsPage() {
|
||||
const [keyword, setKeyword] = useState("Solaranlage Installateur");
|
||||
const [keywords, setKeywords] = useState<string[]>(["Solaranlage Installateur"]);
|
||||
const [keywordInput, setKeywordInput] = useState("");
|
||||
const [regions, setRegions] = useState<string[]>(["Bayern", "Baden-Württemberg"]);
|
||||
const [regionInput, setRegionInput] = useState("");
|
||||
const [maxResults, setMaxResults] = useState("60");
|
||||
@@ -62,10 +61,18 @@ export default function MapsPage() {
|
||||
const [results, setResults] = useState<ResultRow[]>([]);
|
||||
const { addJob, updateJob, removeJob } = useAppStore();
|
||||
|
||||
// Build the final queries array: one per region
|
||||
const queries = regions.length > 0
|
||||
? regions.map(r => `${keyword} ${r}`)
|
||||
: [keyword];
|
||||
// Build queries: every keyword × every region
|
||||
const queries = keywords.length === 0 ? [] :
|
||||
regions.length > 0
|
||||
? keywords.flatMap(k => regions.map(r => `${k} ${r}`))
|
||||
: keywords;
|
||||
|
||||
const addKeyword = (k: string) => {
|
||||
const trimmed = k.trim();
|
||||
if (trimmed && !keywords.includes(trimmed)) setKeywords(prev => [...prev, trimmed]);
|
||||
setKeywordInput("");
|
||||
};
|
||||
const removeKeyword = (k: string) => setKeywords(prev => prev.filter(x => x !== k));
|
||||
|
||||
const addRegion = (r: string) => {
|
||||
const trimmed = r.trim();
|
||||
@@ -78,7 +85,7 @@ export default function MapsPage() {
|
||||
const removeRegion = (r: string) => setRegions(prev => prev.filter(x => x !== r));
|
||||
|
||||
const startJob = async () => {
|
||||
if (!keyword.trim()) return toast.error("Suchbegriff eingeben");
|
||||
if (!keywords.length) return toast.error("Mindestens einen Suchbegriff eingeben");
|
||||
|
||||
setStage("running");
|
||||
setResults([]);
|
||||
@@ -208,28 +215,41 @@ export default function MapsPage() {
|
||||
Suchanfrage konfigurieren
|
||||
</h2>
|
||||
|
||||
{/* Keyword */}
|
||||
{/* Keywords */}
|
||||
<div>
|
||||
<Label className="text-gray-300 text-sm mb-1.5 block">Suchbegriff</Label>
|
||||
<Input
|
||||
placeholder="z.B. Solaranlage Installateur"
|
||||
value={keyword}
|
||||
onChange={e => setKeyword(e.target.value)}
|
||||
className="bg-[#0d0d18] border-[#2e2e3e] text-white placeholder:text-gray-600 focus:border-green-500"
|
||||
<Label className="text-gray-300 text-sm mb-1.5 block">
|
||||
Suchbegriffe
|
||||
<span className="text-gray-500 font-normal ml-2">— mehrere möglich</span>
|
||||
</Label>
|
||||
<div className="min-h-[44px] flex flex-wrap gap-2 p-2.5 bg-[#0d0d18] border border-[#2e2e3e] rounded-lg focus-within:border-green-500 transition-colors mb-2">
|
||||
{keywords.map(k => (
|
||||
<span key={k} className="flex items-center gap-1 bg-green-500/15 text-green-300 border border-green-500/25 rounded-md px-2.5 py-0.5 text-sm">
|
||||
{k}
|
||||
<button onClick={() => removeKeyword(k)} className="hover:text-white transition-colors">
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
<input
|
||||
className="flex-1 min-w-[160px] bg-transparent text-sm text-white outline-none placeholder:text-gray-600"
|
||||
placeholder="Begriff eingeben, Enter drücken..."
|
||||
value={keywordInput}
|
||||
onChange={e => setKeywordInput(e.target.value)}
|
||||
onKeyDown={e => {
|
||||
if (e.key === "Enter" || e.key === ",") { e.preventDefault(); addKeyword(keywordInput); }
|
||||
}}
|
||||
onBlur={() => keywordInput && addKeyword(keywordInput)}
|
||||
/>
|
||||
{/* Presets */}
|
||||
<div className="flex flex-wrap gap-1.5 mt-2">
|
||||
{PRESET_QUERIES.map(q => (
|
||||
</div>
|
||||
{/* Keyword presets */}
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{KEYWORD_PRESETS.filter(k => !keywords.includes(k)).map(k => (
|
||||
<button
|
||||
key={q}
|
||||
onClick={() => setKeyword(q)}
|
||||
className={`text-xs px-2.5 py-1 rounded-md border transition-all ${
|
||||
keyword === q
|
||||
? "bg-green-500/20 text-green-300 border-green-500/40"
|
||||
: "bg-[#0d0d18] text-gray-500 border-[#2e2e3e] hover:border-green-500/30 hover:text-gray-300"
|
||||
}`}
|
||||
key={k}
|
||||
onClick={() => addKeyword(k)}
|
||||
className="flex items-center gap-1 text-xs px-2 py-0.5 rounded border border-[#2e2e3e] text-gray-500 hover:border-green-500/30 hover:text-gray-300 transition-all"
|
||||
>
|
||||
{q}
|
||||
<Plus className="w-2.5 h-2.5" /> {k}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -380,7 +400,7 @@ export default function MapsPage() {
|
||||
{stage === "idle" || stage === "failed" ? (
|
||||
<Button
|
||||
onClick={startJob}
|
||||
disabled={!keyword.trim()}
|
||||
disabled={!keywords.length}
|
||||
className="bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 text-white font-medium px-8 shadow-lg hover:shadow-green-500/25 transition-all"
|
||||
>
|
||||
<MapPin className="w-4 h-4 mr-2" />
|
||||
|
||||
Reference in New Issue
Block a user