mirror of
https://github.com/Dokploy/dokploy
synced 2025-06-26 18:27:59 +00:00
refactor: change location of search-command
This commit is contained in:
djknaeckebrot
@@ -1,114 +0,0 @@
|
||||
"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>
|
||||
)
|
||||
}
|
||||
@@ -36,7 +36,7 @@ import { Fragment } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { ProjectEnviroment } from "./project-enviroment";
|
||||
import { UpdateProject } from "./update";
|
||||
import {SearchCommand} from "@/components/dashboard/projects/search-command";
|
||||
import { SearchCommand } from "@/components/dashboard/search-command";
|
||||
|
||||
export const ShowProjects = () => {
|
||||
const utils = api.useUtils();
|
||||
@@ -48,15 +48,12 @@ export const ShowProjects = () => {
|
||||
},
|
||||
{
|
||||
enabled: !!auth?.id && auth?.rol === "user",
|
||||
},
|
||||
}
|
||||
);
|
||||
const { mutateAsync } = api.project.remove.useMutation();
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
{/*@ts-expect-error Type mismatch*/}
|
||||
<SearchCommand data={data} />
|
||||
|
||||
@@ -94,7 +91,7 @@ export const ShowProjects = () => {
|
||||
];
|
||||
|
||||
const renderDomainsDropdown = (
|
||||
item: typeof project.compose | typeof project.applications,
|
||||
item: typeof project.compose | typeof project.applications
|
||||
) =>
|
||||
item[0] ? (
|
||||
<DropdownMenuGroup>
|
||||
@@ -116,7 +113,9 @@ export const ShowProjects = () => {
|
||||
<Link
|
||||
className="space-x-4 text-xs cursor-pointer justify-between"
|
||||
target="_blank"
|
||||
href={`${domain.https ? "https" : "http"}://${domain.host}${domain.path}`}
|
||||
href={`${domain.https ? "https" : "http"}://${
|
||||
domain.host
|
||||
}${domain.path}`}
|
||||
>
|
||||
<span>{domain.host}</span>
|
||||
<ExternalLink className="size-4 shrink-0" />
|
||||
@@ -160,7 +159,9 @@ export const ShowProjects = () => {
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Link
|
||||
href={`${flattedDomains[0].https ? "https" : "http"}://${flattedDomains[0].host}${flattedDomains[0].path}`}
|
||||
href={`${
|
||||
flattedDomains[0].https ? "https" : "http"
|
||||
}://${flattedDomains[0].host}${flattedDomains[0].path}`}
|
||||
target="_blank"
|
||||
>
|
||||
<ExternalLinkIcon className="size-3.5" />
|
||||
@@ -250,12 +251,12 @@ export const ShowProjects = () => {
|
||||
})
|
||||
.then(() => {
|
||||
toast.success(
|
||||
"Project delete succesfully",
|
||||
"Project delete succesfully"
|
||||
);
|
||||
})
|
||||
.catch(() => {
|
||||
toast.error(
|
||||
"Error to delete this project",
|
||||
"Error to delete this project"
|
||||
);
|
||||
})
|
||||
.finally(() => {
|
||||
|
||||
169
apps/dokploy/components/dashboard/search-command.tsx
Normal file
169
apps/dokploy/components/dashboard/search-command.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
"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";
|
||||
|
||||
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={"Application"}>
|
||||
<CommandItem
|
||||
onSelect={() => {
|
||||
router.push("/dashboard/projects");
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
Projects
|
||||
</CommandItem>
|
||||
<CommandItem
|
||||
onSelect={() => {
|
||||
router.push("/dashboard/monitoring");
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
Monitoring
|
||||
</CommandItem>
|
||||
<CommandItem
|
||||
onSelect={() => {
|
||||
router.push("/dashboard/traefik");
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
Treafik
|
||||
</CommandItem>
|
||||
<CommandItem
|
||||
onSelect={() => {
|
||||
router.push("/dashboard/docker");
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
Docker
|
||||
</CommandItem>
|
||||
<CommandItem
|
||||
onSelect={() => {
|
||||
router.push("/dashboard/requests");
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
Requests
|
||||
</CommandItem>
|
||||
<CommandItem
|
||||
onSelect={() => {
|
||||
router.push("/dashboard/profile");
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
Settings
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
<CommandGroup heading={"Projects"}>
|
||||
<CommandList>
|
||||
{data?.map((project) => (
|
||||
<CommandItem
|
||||
key={project.projectId}
|
||||
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
|
||||
key={application.id}
|
||||
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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user