318 lines
11 KiB
React
318 lines
11 KiB
React
import React, { useRef } from "react";
|
|
import { Button, Stack, Flex, Field, NativeSelect, Input, HoverCard, Text, NumberInput, Box } from "@chakra-ui/react";
|
|
import { Plus, CircleMinus, Files, ClipboardPaste, Trash } from 'lucide-react';
|
|
// import { GrAdd, GrSubtractCircle } from "react-icons/gr";
|
|
// import { FaCopy, FaPaste, FaTrash } from "react-icons/fa";
|
|
|
|
// ============================================================================
|
|
// 1. FILTER ROW (The individual criteria inputs)
|
|
// ============================================================================
|
|
const FilterRow = React.memo(({ filter, columns, setUrl, bundleId, copiedFilter }) => {
|
|
const types = {
|
|
AutoField: ["=", "<", ">", "<=", ">="],
|
|
IntegerField: ["=", "<", ">", "<=", ">="],
|
|
CharField: ["=", "contains"],
|
|
DateTimeField: ["range"],
|
|
};
|
|
|
|
const columnType = columns[filter.column];
|
|
const operators = types[columnType] || ["="]; // default to equals if unknown
|
|
|
|
const handleRemoveFilter = () => {
|
|
setUrl(prev => ({
|
|
...prev,
|
|
bundles: prev.bundles.map((bundle) =>
|
|
bundle.id === bundleId ?
|
|
{ ...bundle, filters: bundle.filters.filter((fil) => fil.id !== filter.id) }
|
|
: bundle
|
|
),
|
|
}));
|
|
};
|
|
|
|
const updateFilterField = (field, value) => {
|
|
setUrl(prev => ({
|
|
...prev,
|
|
bundles: prev.bundles.map(bundle =>
|
|
bundle.id === bundleId
|
|
? {
|
|
...bundle,
|
|
filters: bundle.filters.map(fil =>
|
|
fil.id === filter.id ? { ...fil, [field]: value } : fil
|
|
),
|
|
}
|
|
: bundle
|
|
),
|
|
}));
|
|
};
|
|
|
|
const handleColumnChange = (newCol) => {
|
|
setUrl((prev) => ({
|
|
...prev,
|
|
bundles: prev.bundles.map((bundle) =>
|
|
bundle.id === bundleId
|
|
? {
|
|
...bundle,
|
|
filters: bundle.filters.map((fil) =>
|
|
fil.id === filter.id
|
|
? { ...fil, column: newCol, type: columns[newCol], operator: null, value: null }
|
|
: fil
|
|
),
|
|
}
|
|
: bundle
|
|
),
|
|
}));
|
|
};
|
|
|
|
const handleDateChange = (type, newDate) => {
|
|
const currentValue = filter.value || { start: null, end: null };
|
|
const updatedValue = { ...currentValue, [type]: newDate || null };
|
|
updateFilterField("value", updatedValue);
|
|
updateFilterField("operator", "range");
|
|
};
|
|
|
|
return (
|
|
<Flex gap="2" align="center">
|
|
{/* Remove button */}
|
|
<HoverCard.Root positioning={{ placement: "top" }}>
|
|
<HoverCard.Trigger asChild>
|
|
<Button onClick={handleRemoveFilter} variant="ghost" size="sm" color="red.400">
|
|
<CircleMinus />
|
|
</Button>
|
|
</HoverCard.Trigger>
|
|
<HoverCard.Positioner>
|
|
<HoverCard.Content p="2" bg="widgetItemExpandedBg"><Text fontSize="sm">Remove Filter</Text></HoverCard.Content>
|
|
</HoverCard.Positioner>
|
|
</HoverCard.Root>
|
|
|
|
{/* Copy / Paste Buttons */}
|
|
<HoverCard.Root positioning={{ placement: "top" }}>
|
|
<HoverCard.Trigger asChild>
|
|
<Button onClick={() => (copiedFilter.current = { ...filter })} variant="ghost" size="sm" color="text">
|
|
<Files />
|
|
</Button>
|
|
</HoverCard.Trigger>
|
|
<HoverCard.Positioner>
|
|
<HoverCard.Content p="2" bg="widgetItemExpandedBg"><Text fontSize="sm">Copy Filter</Text></HoverCard.Content>
|
|
</HoverCard.Positioner>
|
|
</HoverCard.Root>
|
|
|
|
<HoverCard.Root positioning={{ placement: "top" }}>
|
|
<HoverCard.Trigger asChild>
|
|
<Button
|
|
onClick={() => {
|
|
if (copiedFilter.current) {
|
|
setUrl((prev) => ({
|
|
...prev,
|
|
bundles: prev.bundles.map((bundle) =>
|
|
bundle.id === bundleId
|
|
? {
|
|
...bundle,
|
|
filters: bundle.filters.map((fil) =>
|
|
fil.id === filter.id ? { ...copiedFilter.current, id: filter.id } : fil
|
|
),
|
|
}
|
|
: bundle
|
|
),
|
|
}));
|
|
}
|
|
}}
|
|
variant="ghost"
|
|
size="sm"
|
|
color="text"
|
|
>
|
|
<ClipboardPaste />
|
|
</Button>
|
|
</HoverCard.Trigger>
|
|
<HoverCard.Positioner>
|
|
<HoverCard.Content p="2" bg="widgetItemExpandedBg"><Text fontSize="sm">Paste Filter</Text></HoverCard.Content>
|
|
</HoverCard.Positioner>
|
|
</HoverCard.Root>
|
|
|
|
{/* Column selector */}
|
|
<Field.Root w={columnType === "DateTimeField" ? "30%" : "30%"}>
|
|
<NativeSelect.Root>
|
|
<NativeSelect.Field
|
|
bg="widgetItemBg"
|
|
color="text"
|
|
value={filter.column ?? ""}
|
|
onChange={(e) => handleColumnChange(e.target.value)}
|
|
>
|
|
<option value="" disabled hidden>Select Column</option>
|
|
{Object.keys(columns).map((colName) => (
|
|
<option key={colName} value={colName}>{colName}</option>
|
|
))}
|
|
</NativeSelect.Field>
|
|
<NativeSelect.Indicator />
|
|
</NativeSelect.Root>
|
|
</Field.Root>
|
|
|
|
{/* Operator selector */}
|
|
<Field.Root w={columnType === "DateTimeField" ? "20%" : "20%"}>
|
|
{columnType === "DateTimeField" ? (
|
|
<Input type="date" bg="widgetItemBg" color="text" value={filter.value?.start || ""} onChange={(e) => handleDateChange("start", e.target.value)} />
|
|
) : (
|
|
<NativeSelect.Root>
|
|
<NativeSelect.Field bg="widgetItemBg" color="text" value={filter.operator ?? ""} onChange={(e) => updateFilterField("operator", e.target.value)}>
|
|
<option value="" disabled hidden>Operator</option>
|
|
{filter.type && operators.map((op) => <option key={op} value={op}>{op}</option>)}
|
|
</NativeSelect.Field>
|
|
<NativeSelect.Indicator />
|
|
</NativeSelect.Root>
|
|
)}
|
|
</Field.Root>
|
|
|
|
{/* Value input */}
|
|
<Field.Root w={columnType === "DateTimeField" ? "20%" : "50%"}>
|
|
{columnType === "DateTimeField" ? (
|
|
<Input type="date" bg="widgetItemBg" color="text" value={filter.value?.end || ""} onChange={(e) => handleDateChange("end", e.target.value)} />
|
|
) : columnType === "IntegerField" || columnType === "AutoField" ? (
|
|
<NumberInput.Root value={filter.value ?? ""} onValueChange={(e) => updateFilterField("value", e.value)}>
|
|
<NumberInput.Input placeholder="Value" bg="widgetItemBg" color="text" />
|
|
</NumberInput.Root>
|
|
) : (
|
|
<Input placeholder="Value" bg="widgetItemBg" color="text" value={filter.value ?? ""} onChange={(e) => updateFilterField("value", e.target.value)} />
|
|
)}
|
|
</Field.Root>
|
|
</Flex>
|
|
);
|
|
});
|
|
|
|
// ============================================================================
|
|
// 2. FILTER BUNDLES (The AND logic groups)
|
|
// ============================================================================
|
|
const FilterBundle = ({ bundle, columns, url, setUrl, copiedFilter }) => {
|
|
const handleRemoveBundle = () => {
|
|
setUrl(prev => ({
|
|
...prev,
|
|
bundles: prev.bundles.filter(b => b.id !== bundle.id)
|
|
}));
|
|
};
|
|
|
|
const handleAddFilter = () => {
|
|
setUrl(prev => ({
|
|
...prev,
|
|
bundles: prev.bundles.map(b =>
|
|
b.id === bundle.id ? ({
|
|
...b,
|
|
filters: [
|
|
...b.filters,
|
|
{
|
|
id: crypto.randomUUID(),
|
|
column: null,
|
|
type: null,
|
|
operator: null,
|
|
value: null
|
|
}
|
|
]
|
|
}) : (b)
|
|
),
|
|
}));
|
|
};
|
|
|
|
return (
|
|
<Stack bg="widgetItemBg" borderWidth="1px" borderColor="widgetBadgeBg" borderRadius="lg" p="3" spacing="3">
|
|
<Flex justify="space-between" align="center">
|
|
<Input placeholder="Group Name (Optional)" maxW="200px" size="sm" variant="flushed" color="text" />
|
|
<Button onClick={handleRemoveBundle} variant="ghost" size="sm" color="red.400">
|
|
<Trash />
|
|
</Button>
|
|
</Flex>
|
|
|
|
<Stack spacing="2">
|
|
{bundle.filters.map((filter) => (
|
|
<FilterRow key={filter.id} filter={filter} columns={columns} setUrl={setUrl} bundleId={bundle.id} copiedFilter={copiedFilter} />
|
|
))}
|
|
<Button onClick={handleAddFilter} variant="outline" size="sm" color="text" borderColor="widgetBadgeBg" _hover={{ bg: "widgetBadgeBg" }}>
|
|
Add Filter <Plus />
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
// ============================================================================
|
|
// 3. MAIN QUERY BUILDER (The Engine Wrapper)
|
|
// ============================================================================
|
|
export default function QueryBuilder({ url, setUrl, allColumns, getColumns, pullTable, isLoading, isReadyRef }) {
|
|
const copiedFilter = useRef(null);
|
|
|
|
const handleAddBundle = () => {
|
|
setUrl(prev => ({
|
|
...prev,
|
|
bundles: [
|
|
...prev.bundles,
|
|
{
|
|
id: crypto.randomUUID(),
|
|
filters: [{
|
|
id: crypto.randomUUID(),
|
|
column: null,
|
|
type: null,
|
|
operator: null,
|
|
value: null
|
|
}],
|
|
},
|
|
],
|
|
}));
|
|
};
|
|
|
|
return (
|
|
<Flex direction="column" gap="4" w="100%" p="4" bg="transparent">
|
|
{/* Top Controls: Source & Execute */}
|
|
<Flex gap="4" align="flex-end">
|
|
<Field.Root maxW="300px">
|
|
<Field.Label color="text">Data Source</Field.Label>
|
|
<NativeSelect.Root>
|
|
<NativeSelect.Field
|
|
bg="widgetItemBg"
|
|
color="text"
|
|
value={url.source || ""}
|
|
onChange={(e) => {
|
|
const selectedView = e.target.value;
|
|
setUrl(prev => ({ ...prev, source: selectedView }));
|
|
// 🚨 FIXED: Now uses relative pathing for the production API
|
|
const endpoint = "/api/v2/view_dash_event_search_columns";
|
|
getColumns(endpoint);
|
|
}}
|
|
>
|
|
<option value="" disabled hidden>Select View</option>
|
|
<option value="main">Main View</option>
|
|
<option value="test">Test View</option>
|
|
</NativeSelect.Field>
|
|
<NativeSelect.Indicator />
|
|
</NativeSelect.Root>
|
|
</Field.Root>
|
|
|
|
<Button
|
|
bg="blue.600"
|
|
color="white"
|
|
_hover={{ bg: "blue.500" }}
|
|
loading={isLoading}
|
|
onClick={() => {
|
|
isReadyRef.current = true;
|
|
pullTable();
|
|
}}
|
|
>
|
|
Execute Search
|
|
</Button>
|
|
</Flex>
|
|
|
|
{/* Filter Builder Engine */}
|
|
{url.source && allColumns?.types && (
|
|
<Stack w="100%" gap="4">
|
|
<Text fontSize="lg" fontWeight="bold" color="text">Filters</Text>
|
|
|
|
<Box w="100%" maxH="400px" overflow="auto">
|
|
<Stack w="100%" gap="4" pr="4">
|
|
{url.bundles.map((bundle) => (
|
|
<FilterBundle key={bundle.id} bundle={bundle} columns={allColumns.types} url={url} setUrl={setUrl} copiedFilter={copiedFilter} />
|
|
))}
|
|
<Button onClick={handleAddBundle} variant="outline" borderColor="widgetBadgeBg" color="text" _hover={{ bg: "widgetBadgeBg" }}>
|
|
New Filter Group <Plus />
|
|
</Button>
|
|
</Stack>
|
|
</Box>
|
|
</Stack>
|
|
)}
|
|
</Flex>
|
|
);
|
|
} |