Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix #164 fix query section #165

Merged
merged 6 commits into from
Apr 10, 2024
Merged

fix #164 fix query section #165

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d150016
fix query section
Anchel123 Apr 9, 2024
d3cea37
fix lint
Anchel123 Apr 9, 2024
867a991
Merge branch 'styling-graph-page' into fix-query
Anchel123 Apr 10, 2024
b37a159
fix query section
Anchel123 Apr 10, 2024
b713f9f
fix lint
Anchel123 Apr 10, 2024
41c7568
Merge branch 'main' into fix-query
AviAvni Apr 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 44 additions & 40 deletions app/graph/query.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { useToast } from "@/components/ui/use-toast";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import Editor from "@monaco-editor/react";
import { useTheme } from "next-themes";
import GraphsList from "./GraphList";

export class QueryState {
Expand All @@ -26,6 +27,8 @@ export function Query({ onSubmit, onQueryUpdate, onDeleteGraph, className = "" }
const [query, setQuery] = useState('');
const [graphName, setGraphName] = useState('');
const [onDelete, setOnDelete] = useState<boolean>(false);
const { theme, systemTheme } = useTheme()
const darkmode = theme === "dark" || (theme === "system" && systemTheme === "dark")
const { toast } = useToast();

onQueryUpdate(new QueryState(query, graphName))
Expand All @@ -51,17 +54,18 @@ export function Query({ onSubmit, onQueryUpdate, onDeleteGraph, className = "" }

return (
<form
className={cn("flex flex-col space-y-3 md:flex-row md:space-x-3 md:space-y-0", className)}
onSubmit={onSubmit}>
<div className="items-center flex flex-row space-x-3">
className={cn("w-full flex xl:flex-row md:flex-col gap-2 justify-center", className)}
onSubmit={onSubmit}
>
<div className="flex flex-row gap-2 items-center">
<Label htmlFor="query" className="text">Query</Label>
<GraphsList onDelete={onDelete} onSelectedGraph={setGraphName} />
</div>
<div className="flex flex-row space-x-3 w-full md:w-8/12 items-center">
<div className="flex flex-row gap-2 w-3/4">
<Editor
value={query}
onChange={(val) => val && setQuery(val)}
theme="vs-dark"
onChange={(val) => (val || val === "") && setQuery(val)}
theme={`${darkmode ? "vs-dark" : "light"}`}
language="cypher"
options={{
suggest: {
Expand All @@ -77,47 +81,47 @@ export function Query({ onSubmit, onQueryUpdate, onDeleteGraph, className = "" }
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button type="submit" className="mr-16"><Play/></Button>
<Button type="submit"><Play /></Button>
</TooltipTrigger>
<TooltipContent>
<p>Run Query</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<AlertDialog>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button>
<Menu />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel className="flex justify-around">Actions</DropdownMenuLabel>
<DropdownMenuSeparator />
{graphName &&
<DropdownMenuItem className="flex justify-around">
<AlertDialogTrigger className="flex flex-row items-center gap-2">
<Trash2 />
<span>Delete graph</span>
</AlertDialogTrigger>
</DropdownMenuItem>
}
</DropdownMenuContent>
</DropdownMenu>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure you?</AlertDialogTitle>
<AlertDialogDescription>
Are you absolutely sure you want to delete {graphName}?
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={() => handleDelete()}>Delete</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
<AlertDialog>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button>
<Menu />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel className="flex justify-around">Actions</DropdownMenuLabel>
<DropdownMenuSeparator />
{graphName &&
<DropdownMenuItem className="flex justify-around">
<AlertDialogTrigger className="flex flex-row items-center gap-x-2">
<Trash2 />
<span>Delete graph</span>
</AlertDialogTrigger>
</DropdownMenuItem>
}
</DropdownMenuContent>
</DropdownMenu>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure you?</AlertDialogTitle>
<AlertDialogDescription>
Are you absolutely sure you want to delete {graphName}?
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={() => handleDelete()}>Delete</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</form>
)
}
Loading