diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/logicpill/QueryLogicPill.tsx b/libs/shared/lib/querybuilder/pills/customFlowPills/logicpill/QueryLogicPill.tsx index 14370915cd196755a02e43358aa1bb8ba707aa54..5f4b8bb5118532901327b6756fbb5f8f4930cfd7 100644 --- a/libs/shared/lib/querybuilder/pills/customFlowPills/logicpill/QueryLogicPill.tsx +++ b/libs/shared/lib/querybuilder/pills/customFlowPills/logicpill/QueryLogicPill.tsx @@ -6,8 +6,9 @@ import { GeneralDescription, InputNode, InputNodeTypeTypes } from '../../../mode import { styleHandleMap } from '../../utils'; import { setQuerybuilderGraphology, toQuerybuilderGraphology } from '@graphpolaris/shared/lib/data-access/store/querybuilderSlice'; import { LogicInput } from './LogicInput'; -import { Button, DropdownTrigger, Input, LogicPill } from '@graphpolaris/shared/lib/components'; +import { Button, Input, LogicPill } from '@graphpolaris/shared/lib/components'; import { QueryBuilderDispatcherContext } from '../../../panel/QueryBuilderDispatcher'; +import { DropdownTrigger, DropdownContainer, DropdownItemContainer, DropdownItem } from '@graphpolaris/shared/lib/components/dropdowns'; export function QueryLogicPill(node: SchemaReactflowLogicNode) { const dispatch = useAppDispatch(); @@ -28,6 +29,7 @@ export function QueryLogicPill(node: SchemaReactflowLogicNode) { [node.id], ); const [localInputCache, setLocalInputCache] = useState<Record<string, InputNodeTypeTypes>>({ ...graphologyNodeAttributes?.inputs }); + const [openDropdown, setOpenDropdown] = useState(false); if (!data.id) throw new Error('LogicPill: data.id is undefined'); const defaultHandleData = { @@ -49,6 +51,11 @@ export function QueryLogicPill(node: SchemaReactflowLogicNode) { } }; + function removeNode() { + graphologyGraph.dropNode(node.id); + dispatch(setQuerybuilderGraphology(graphologyGraph)); + } + useEffect(() => { if (inputReference?.current) inputReference.current.focus(); }, [node.id]); @@ -61,7 +68,27 @@ export function QueryLogicPill(node: SchemaReactflowLogicNode) { return ( <LogicPill - title={connectionsToLeft[0]?.attributes?.sourceHandleData.attributeName} + title={ + <div className="flex flex-row justify-between items-center"> + <span>{connectionsToLeft[0]?.attributes?.sourceHandleData.attributeName}</span> + + <DropdownContainer> + <DropdownTrigger size="md"> + <Button + variantType="secondary" + variant="ghost" + size="2xs" + iconComponent={openDropdown ? 'icon-[ic--baseline-arrow-drop-up]' : 'icon-[ic--baseline-arrow-drop-down]'} + className={openDropdown ? 'border-secondary-200' : ''} + /> + </DropdownTrigger> + + <DropdownItemContainer> + <DropdownItem value="Remove" className="text-danger" onClick={(e) => removeNode()} /> + </DropdownItemContainer> + </DropdownContainer> + </div> + } handleLeft={ <Handle className={'!rounded-none !bg-transparent !w-full !h-full !border-0 !right-0 !left-0'}