Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add search command dialog with projects and services

Browse Source
This commit is contained in:
djknaeckebrot
2024-12-10 13:37:46 +01:00
parent 0b3e15aabc
commit cbf0f37a49
1 changed files with 114 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
apps/dokploy/components/dashboard/projects/search-command.tsx Normal file
View File

@@ -0,0 +1,114 @@
"use client"
import React from "react";
import {Command, CommandEmpty, CommandList, CommandGroup, CommandInput, CommandItem,CommandDialog, CommandSeparator} from "@/components/ui/command";
import { useRouter } from 'next/router'
import {extractServices, type Services} from "@/pages/dashboard/project/[projectId]";
import type {findProjectById} from "@dokploy/server/services/project";
import {BookIcon, CircuitBoard, GlobeIcon} from "lucide-react";
import {
MariadbIcon,
MongodbIcon,
MysqlIcon,
PostgresqlIcon,
RedisIcon,
} from "@/components/icons/data-tools-icons";
// export type Services = {
// name: string;
// type:
// | "mariadb"
// | "application"
// | "postgres"
// | "mysql"
// | "mongo"
// | "redis"
// | "compose";
// description?: string | null;
// id: string;
// createdAt: string;
// status?: "idle" | "running" | "done" | "error";
// };
type Project = Awaited<ReturnType<typeof findProjectById>>;
interface Props {
data: Project[];
}
export const SearchCommand = ({data}: Props) => {
const router = useRouter()
const [open, setOpen] = React.useState(false)
React.useEffect(() => {
const down = (e: KeyboardEvent) => {
if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
e.preventDefault()
setOpen((open) => !open)
}
}
document.addEventListener("keydown", down)
return () => document.removeEventListener("keydown", down)
}, [])
console.log("DEBUG: data: ", data);
return (
<div>
<CommandDialog open={open} onOpenChange={setOpen}>
<CommandInput placeholder={"Search projects"}/>
<CommandList>
<CommandEmpty>No projects added yet. Click on Create project.</CommandEmpty>
<CommandGroup heading={"Projects"}>
<CommandList>
{data?.map((project) => (
<CommandItem onSelect={() => router.push(project.projectId)}>
<BookIcon className="size-4 text-muted-foreground mr-2" />
{project.name}
</CommandItem>
))}
</CommandList>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading={"Services"}>
<CommandList>
{data?.map((project) => {
const applications: Services[] = extractServices(project);
return (
applications.map((application) => (
<CommandItem
onSelect={() => router.push(`/dashboard/project/${project.projectId}/services/${application.type}/${application.id}`)}>
{application.type === "postgres" && (
<PostgresqlIcon className="h-6 w-6 mr-2" />
)}
{application.type === "redis" && (
<RedisIcon className="h-6 w-6 mr-2" />
)}
{application.type === "mariadb" && (
<MariadbIcon className="h-6 w-6 mr-2" />
)}
{application.type === "mongo" && (
<MongodbIcon className="h-6 w-6 mr-2" />
)}
{application.type === "mysql" && (
<MysqlIcon className="h-6 w-6 mr-2" />
)}
{application.type === "application" && (
<GlobeIcon className="h-6 w-6 mr-2" />
)}
{application.type === "compose" && (
<CircuitBoard className="h-6 w-6 mr-2" />
)}
{application.name}
</CommandItem>
))
);
})}
</CommandList>
</CommandGroup>
</CommandList>
</CommandDialog>
</div>
)
}