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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,297 +1,298 @@
|
|||||||
import { DateTooltip } from "@/components/shared/date-tooltip";
|
import { DateTooltip } from "@/components/shared/date-tooltip";
|
||||||
import {
|
import {
|
||||||
AlertDialog,
|
AlertDialog,
|
||||||
AlertDialogAction,
|
AlertDialogAction,
|
||||||
AlertDialogCancel,
|
AlertDialogCancel,
|
||||||
AlertDialogContent,
|
AlertDialogContent,
|
||||||
AlertDialogDescription,
|
AlertDialogDescription,
|
||||||
AlertDialogFooter,
|
AlertDialogFooter,
|
||||||
AlertDialogHeader,
|
AlertDialogHeader,
|
||||||
AlertDialogTitle,
|
AlertDialogTitle,
|
||||||
AlertDialogTrigger,
|
AlertDialogTrigger,
|
||||||
} from "@/components/ui/alert-dialog";
|
} from "@/components/ui/alert-dialog";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Card, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
|
import { Card, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
import {
|
import {
|
||||||
DropdownMenu,
|
DropdownMenu,
|
||||||
DropdownMenuContent,
|
DropdownMenuContent,
|
||||||
DropdownMenuGroup,
|
DropdownMenuGroup,
|
||||||
DropdownMenuItem,
|
DropdownMenuItem,
|
||||||
DropdownMenuLabel,
|
DropdownMenuLabel,
|
||||||
DropdownMenuSeparator,
|
DropdownMenuSeparator,
|
||||||
DropdownMenuTrigger,
|
DropdownMenuTrigger,
|
||||||
} from "@/components/ui/dropdown-menu";
|
} from "@/components/ui/dropdown-menu";
|
||||||
import { api } from "@/utils/api";
|
import { api } from "@/utils/api";
|
||||||
import {
|
import {
|
||||||
AlertTriangle,
|
AlertTriangle,
|
||||||
BookIcon,
|
BookIcon,
|
||||||
ExternalLink,
|
ExternalLink,
|
||||||
ExternalLinkIcon,
|
ExternalLinkIcon,
|
||||||
FolderInput,
|
FolderInput,
|
||||||
MoreHorizontalIcon,
|
MoreHorizontalIcon,
|
||||||
TrashIcon,
|
TrashIcon,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { Fragment } from "react";
|
import { Fragment } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { ProjectEnviroment } from "./project-enviroment";
|
import { ProjectEnviroment } from "./project-enviroment";
|
||||||
import { UpdateProject } from "./update";
|
import { UpdateProject } from "./update";
|
||||||
import {SearchCommand} from "@/components/dashboard/projects/search-command";
|
import { SearchCommand } from "@/components/dashboard/search-command";
|
||||||
|
|
||||||
export const ShowProjects = () => {
|
export const ShowProjects = () => {
|
||||||
const utils = api.useUtils();
|
const utils = api.useUtils();
|
||||||
const { data } = api.project.all.useQuery();
|
const { data } = api.project.all.useQuery();
|
||||||
const { data: auth } = api.auth.get.useQuery();
|
const { data: auth } = api.auth.get.useQuery();
|
||||||
const { data: user } = api.user.byAuthId.useQuery(
|
const { data: user } = api.user.byAuthId.useQuery(
|
||||||
{
|
{
|
||||||
authId: auth?.id || "",
|
authId: auth?.id || "",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
enabled: !!auth?.id && auth?.rol === "user",
|
enabled: !!auth?.id && auth?.rol === "user",
|
||||||
},
|
}
|
||||||
);
|
);
|
||||||
const { mutateAsync } = api.project.remove.useMutation();
|
const { mutateAsync } = api.project.remove.useMutation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/*@ts-expect-error Type mismatch*/}
|
||||||
|
<SearchCommand data={data} />
|
||||||
|
|
||||||
|
{data?.length === 0 && (
|
||||||
|
<div className="mt-6 flex h-[50vh] w-full flex-col items-center justify-center space-y-4">
|
||||||
|
<FolderInput className="size-10 md:size-28 text-muted-foreground" />
|
||||||
|
<span className="text-center font-medium text-muted-foreground">
|
||||||
|
No projects added yet. Click on Create project.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="mt-6 w-full grid sm:grid-cols-2 lg:grid-cols-3 flex-wrap gap-5 pb-10">
|
||||||
|
{data?.map((project) => {
|
||||||
|
const emptyServices =
|
||||||
|
project?.mariadb.length === 0 &&
|
||||||
|
project?.mongo.length === 0 &&
|
||||||
|
project?.mysql.length === 0 &&
|
||||||
|
project?.postgres.length === 0 &&
|
||||||
|
project?.redis.length === 0 &&
|
||||||
|
project?.applications.length === 0 &&
|
||||||
|
project?.compose.length === 0;
|
||||||
|
|
||||||
return (
|
const totalServices =
|
||||||
<>
|
project?.mariadb.length +
|
||||||
|
project?.mongo.length +
|
||||||
|
project?.mysql.length +
|
||||||
|
project?.postgres.length +
|
||||||
|
project?.redis.length +
|
||||||
|
project?.applications.length +
|
||||||
|
project?.compose.length;
|
||||||
|
|
||||||
{/*@ts-expect-error Type mismatch*/}
|
const flattedDomains = [
|
||||||
<SearchCommand data={data} />
|
...project.applications.flatMap((a) => a.domains),
|
||||||
|
...project.compose.flatMap((a) => a.domains),
|
||||||
|
];
|
||||||
|
|
||||||
{data?.length === 0 && (
|
const renderDomainsDropdown = (
|
||||||
<div className="mt-6 flex h-[50vh] w-full flex-col items-center justify-center space-y-4">
|
item: typeof project.compose | typeof project.applications
|
||||||
<FolderInput className="size-10 md:size-28 text-muted-foreground" />
|
) =>
|
||||||
<span className="text-center font-medium text-muted-foreground">
|
item[0] ? (
|
||||||
No projects added yet. Click on Create project.
|
<DropdownMenuGroup>
|
||||||
</span>
|
<DropdownMenuLabel>
|
||||||
</div>
|
{"applicationId" in item[0] ? "Applications" : "Compose"}
|
||||||
)}
|
</DropdownMenuLabel>
|
||||||
<div className="mt-6 w-full grid sm:grid-cols-2 lg:grid-cols-3 flex-wrap gap-5 pb-10">
|
{item.map((a) => (
|
||||||
{data?.map((project) => {
|
<Fragment
|
||||||
const emptyServices =
|
key={"applicationId" in a ? a.applicationId : a.composeId}
|
||||||
project?.mariadb.length === 0 &&
|
>
|
||||||
project?.mongo.length === 0 &&
|
<DropdownMenuSeparator />
|
||||||
project?.mysql.length === 0 &&
|
<DropdownMenuGroup>
|
||||||
project?.postgres.length === 0 &&
|
<DropdownMenuLabel className="font-normal capitalize text-xs ">
|
||||||
project?.redis.length === 0 &&
|
{a.name}
|
||||||
project?.applications.length === 0 &&
|
</DropdownMenuLabel>
|
||||||
project?.compose.length === 0;
|
<DropdownMenuSeparator />
|
||||||
|
{a.domains.map((domain) => (
|
||||||
|
<DropdownMenuItem key={domain.domainId} asChild>
|
||||||
|
<Link
|
||||||
|
className="space-x-4 text-xs cursor-pointer justify-between"
|
||||||
|
target="_blank"
|
||||||
|
href={`${domain.https ? "https" : "http"}://${
|
||||||
|
domain.host
|
||||||
|
}${domain.path}`}
|
||||||
|
>
|
||||||
|
<span>{domain.host}</span>
|
||||||
|
<ExternalLink className="size-4 shrink-0" />
|
||||||
|
</Link>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
))}
|
||||||
|
</DropdownMenuGroup>
|
||||||
|
</Fragment>
|
||||||
|
))}
|
||||||
|
</DropdownMenuGroup>
|
||||||
|
) : null;
|
||||||
|
|
||||||
const totalServices =
|
return (
|
||||||
project?.mariadb.length +
|
<div key={project.projectId} className="w-full lg:max-w-md">
|
||||||
project?.mongo.length +
|
<Link href={`/dashboard/project/${project.projectId}`}>
|
||||||
project?.mysql.length +
|
<Card className="group relative w-full bg-transparent transition-colors hover:bg-card">
|
||||||
project?.postgres.length +
|
{flattedDomains.length > 1 ? (
|
||||||
project?.redis.length +
|
<DropdownMenu>
|
||||||
project?.applications.length +
|
<DropdownMenuTrigger asChild>
|
||||||
project?.compose.length;
|
<Button
|
||||||
|
className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
|
||||||
|
size="sm"
|
||||||
|
variant="default"
|
||||||
|
>
|
||||||
|
<ExternalLinkIcon className="size-3.5" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent
|
||||||
|
className="w-[200px] space-y-2"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
{renderDomainsDropdown(project.applications)}
|
||||||
|
{renderDomainsDropdown(project.compose)}
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
) : flattedDomains[0] ? (
|
||||||
|
<Button
|
||||||
|
className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
|
||||||
|
size="sm"
|
||||||
|
variant="default"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
href={`${
|
||||||
|
flattedDomains[0].https ? "https" : "http"
|
||||||
|
}://${flattedDomains[0].host}${flattedDomains[0].path}`}
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<ExternalLinkIcon className="size-3.5" />
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
|
|
||||||
const flattedDomains = [
|
<CardHeader>
|
||||||
...project.applications.flatMap((a) => a.domains),
|
<CardTitle className="flex items-center justify-between gap-2">
|
||||||
...project.compose.flatMap((a) => a.domains),
|
<span className="flex flex-col gap-1.5">
|
||||||
];
|
<div className="flex items-center gap-2">
|
||||||
|
<BookIcon className="size-4 text-muted-foreground" />
|
||||||
|
<span className="text-base font-medium leading-none">
|
||||||
|
{project.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
const renderDomainsDropdown = (
|
<span className="text-sm font-medium text-muted-foreground">
|
||||||
item: typeof project.compose | typeof project.applications,
|
{project.description}
|
||||||
) =>
|
</span>
|
||||||
item[0] ? (
|
</span>
|
||||||
<DropdownMenuGroup>
|
<div className="flex self-start space-x-1">
|
||||||
<DropdownMenuLabel>
|
<DropdownMenu>
|
||||||
{"applicationId" in item[0] ? "Applications" : "Compose"}
|
<DropdownMenuTrigger asChild>
|
||||||
</DropdownMenuLabel>
|
<Button
|
||||||
{item.map((a) => (
|
variant="ghost"
|
||||||
<Fragment
|
size="icon"
|
||||||
key={"applicationId" in a ? a.applicationId : a.composeId}
|
className="px-2"
|
||||||
>
|
>
|
||||||
<DropdownMenuSeparator />
|
<MoreHorizontalIcon className="size-5" />
|
||||||
<DropdownMenuGroup>
|
</Button>
|
||||||
<DropdownMenuLabel className="font-normal capitalize text-xs ">
|
</DropdownMenuTrigger>
|
||||||
{a.name}
|
<DropdownMenuContent className="w-[200px] space-y-2">
|
||||||
</DropdownMenuLabel>
|
<DropdownMenuLabel className="font-normal">
|
||||||
<DropdownMenuSeparator />
|
Actions
|
||||||
{a.domains.map((domain) => (
|
</DropdownMenuLabel>
|
||||||
<DropdownMenuItem key={domain.domainId} asChild>
|
<div onClick={(e) => e.stopPropagation()}>
|
||||||
<Link
|
<ProjectEnviroment
|
||||||
className="space-x-4 text-xs cursor-pointer justify-between"
|
projectId={project.projectId}
|
||||||
target="_blank"
|
/>
|
||||||
href={`${domain.https ? "https" : "http"}://${domain.host}${domain.path}`}
|
</div>
|
||||||
>
|
<div onClick={(e) => e.stopPropagation()}>
|
||||||
<span>{domain.host}</span>
|
<UpdateProject projectId={project.projectId} />
|
||||||
<ExternalLink className="size-4 shrink-0" />
|
</div>
|
||||||
</Link>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
))}
|
|
||||||
</DropdownMenuGroup>
|
|
||||||
</Fragment>
|
|
||||||
))}
|
|
||||||
</DropdownMenuGroup>
|
|
||||||
) : null;
|
|
||||||
|
|
||||||
return (
|
<div onClick={(e) => e.stopPropagation()}>
|
||||||
<div key={project.projectId} className="w-full lg:max-w-md">
|
{(auth?.rol === "admin" ||
|
||||||
<Link href={`/dashboard/project/${project.projectId}`}>
|
user?.canDeleteProjects) && (
|
||||||
<Card className="group relative w-full bg-transparent transition-colors hover:bg-card">
|
<AlertDialog>
|
||||||
{flattedDomains.length > 1 ? (
|
<AlertDialogTrigger className="w-full">
|
||||||
<DropdownMenu>
|
<DropdownMenuItem
|
||||||
<DropdownMenuTrigger asChild>
|
className="w-full cursor-pointer space-x-3"
|
||||||
<Button
|
onSelect={(e) => e.preventDefault()}
|
||||||
className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
|
>
|
||||||
size="sm"
|
<TrashIcon className="size-4" />
|
||||||
variant="default"
|
<span>Delete</span>
|
||||||
>
|
</DropdownMenuItem>
|
||||||
<ExternalLinkIcon className="size-3.5" />
|
</AlertDialogTrigger>
|
||||||
</Button>
|
<AlertDialogContent>
|
||||||
</DropdownMenuTrigger>
|
<AlertDialogHeader>
|
||||||
<DropdownMenuContent
|
<AlertDialogTitle>
|
||||||
className="w-[200px] space-y-2"
|
Are you sure to delete this project?
|
||||||
onClick={(e) => e.stopPropagation()}
|
</AlertDialogTitle>
|
||||||
>
|
{!emptyServices ? (
|
||||||
{renderDomainsDropdown(project.applications)}
|
<div className="flex flex-row gap-4 rounded-lg bg-yellow-50 p-2 dark:bg-yellow-950">
|
||||||
{renderDomainsDropdown(project.compose)}
|
<AlertTriangle className="text-yellow-600 dark:text-yellow-400" />
|
||||||
</DropdownMenuContent>
|
<span className="text-sm text-yellow-600 dark:text-yellow-400">
|
||||||
</DropdownMenu>
|
You have active services, please
|
||||||
) : flattedDomains[0] ? (
|
delete them first
|
||||||
<Button
|
</span>
|
||||||
className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
|
</div>
|
||||||
size="sm"
|
) : (
|
||||||
variant="default"
|
<AlertDialogDescription>
|
||||||
onClick={(e) => e.stopPropagation()}
|
This action cannot be undone
|
||||||
>
|
</AlertDialogDescription>
|
||||||
<Link
|
)}
|
||||||
href={`${flattedDomains[0].https ? "https" : "http"}://${flattedDomains[0].host}${flattedDomains[0].path}`}
|
</AlertDialogHeader>
|
||||||
target="_blank"
|
<AlertDialogFooter>
|
||||||
>
|
<AlertDialogCancel>
|
||||||
<ExternalLinkIcon className="size-3.5" />
|
Cancel
|
||||||
</Link>
|
</AlertDialogCancel>
|
||||||
</Button>
|
<AlertDialogAction
|
||||||
) : null}
|
disabled={!emptyServices}
|
||||||
|
onClick={async () => {
|
||||||
<CardHeader>
|
await mutateAsync({
|
||||||
<CardTitle className="flex items-center justify-between gap-2">
|
projectId: project.projectId,
|
||||||
<span className="flex flex-col gap-1.5">
|
})
|
||||||
<div className="flex items-center gap-2">
|
.then(() => {
|
||||||
<BookIcon className="size-4 text-muted-foreground" />
|
toast.success(
|
||||||
<span className="text-base font-medium leading-none">
|
"Project delete succesfully"
|
||||||
{project.name}
|
);
|
||||||
</span>
|
})
|
||||||
</div>
|
.catch(() => {
|
||||||
|
toast.error(
|
||||||
<span className="text-sm font-medium text-muted-foreground">
|
"Error to delete this project"
|
||||||
{project.description}
|
);
|
||||||
</span>
|
})
|
||||||
</span>
|
.finally(() => {
|
||||||
<div className="flex self-start space-x-1">
|
utils.project.all.invalidate();
|
||||||
<DropdownMenu>
|
});
|
||||||
<DropdownMenuTrigger asChild>
|
}}
|
||||||
<Button
|
>
|
||||||
variant="ghost"
|
Delete
|
||||||
size="icon"
|
</AlertDialogAction>
|
||||||
className="px-2"
|
</AlertDialogFooter>
|
||||||
>
|
</AlertDialogContent>
|
||||||
<MoreHorizontalIcon className="size-5" />
|
</AlertDialog>
|
||||||
</Button>
|
)}
|
||||||
</DropdownMenuTrigger>
|
</div>
|
||||||
<DropdownMenuContent className="w-[200px] space-y-2">
|
</DropdownMenuContent>
|
||||||
<DropdownMenuLabel className="font-normal">
|
</DropdownMenu>
|
||||||
Actions
|
</div>
|
||||||
</DropdownMenuLabel>
|
</CardTitle>
|
||||||
<div onClick={(e) => e.stopPropagation()}>
|
</CardHeader>
|
||||||
<ProjectEnviroment
|
<CardFooter className="pt-4">
|
||||||
projectId={project.projectId}
|
<div className="space-y-1 text-sm flex flex-row justify-between max-sm:flex-wrap w-full gap-2 sm:gap-4">
|
||||||
/>
|
<DateTooltip date={project.createdAt}>
|
||||||
</div>
|
Created
|
||||||
<div onClick={(e) => e.stopPropagation()}>
|
</DateTooltip>
|
||||||
<UpdateProject projectId={project.projectId} />
|
<span>
|
||||||
</div>
|
{totalServices}{" "}
|
||||||
|
{totalServices === 1 ? "service" : "services"}
|
||||||
<div onClick={(e) => e.stopPropagation()}>
|
</span>
|
||||||
{(auth?.rol === "admin" ||
|
</div>
|
||||||
user?.canDeleteProjects) && (
|
</CardFooter>
|
||||||
<AlertDialog>
|
</Card>
|
||||||
<AlertDialogTrigger className="w-full">
|
</Link>
|
||||||
<DropdownMenuItem
|
</div>
|
||||||
className="w-full cursor-pointer space-x-3"
|
);
|
||||||
onSelect={(e) => e.preventDefault()}
|
})}
|
||||||
>
|
</div>
|
||||||
<TrashIcon className="size-4" />
|
</>
|
||||||
<span>Delete</span>
|
);
|
||||||
</DropdownMenuItem>
|
|
||||||
</AlertDialogTrigger>
|
|
||||||
<AlertDialogContent>
|
|
||||||
<AlertDialogHeader>
|
|
||||||
<AlertDialogTitle>
|
|
||||||
Are you sure to delete this project?
|
|
||||||
</AlertDialogTitle>
|
|
||||||
{!emptyServices ? (
|
|
||||||
<div className="flex flex-row gap-4 rounded-lg bg-yellow-50 p-2 dark:bg-yellow-950">
|
|
||||||
<AlertTriangle className="text-yellow-600 dark:text-yellow-400" />
|
|
||||||
<span className="text-sm text-yellow-600 dark:text-yellow-400">
|
|
||||||
You have active services, please
|
|
||||||
delete them first
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<AlertDialogDescription>
|
|
||||||
This action cannot be undone
|
|
||||||
</AlertDialogDescription>
|
|
||||||
)}
|
|
||||||
</AlertDialogHeader>
|
|
||||||
<AlertDialogFooter>
|
|
||||||
<AlertDialogCancel>
|
|
||||||
Cancel
|
|
||||||
</AlertDialogCancel>
|
|
||||||
<AlertDialogAction
|
|
||||||
disabled={!emptyServices}
|
|
||||||
onClick={async () => {
|
|
||||||
await mutateAsync({
|
|
||||||
projectId: project.projectId,
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
toast.success(
|
|
||||||
"Project delete succesfully",
|
|
||||||
);
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
toast.error(
|
|
||||||
"Error to delete this project",
|
|
||||||
);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
utils.project.all.invalidate();
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</AlertDialogAction>
|
|
||||||
</AlertDialogFooter>
|
|
||||||
</AlertDialogContent>
|
|
||||||
</AlertDialog>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
</div>
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardFooter className="pt-4">
|
|
||||||
<div className="space-y-1 text-sm flex flex-row justify-between max-sm:flex-wrap w-full gap-2 sm:gap-4">
|
|
||||||
<DateTooltip date={project.createdAt}>
|
|
||||||
Created
|
|
||||||
</DateTooltip>
|
|
||||||
<span>
|
|
||||||
{totalServices}{" "}
|
|
||||||
{totalServices === 1 ? "service" : "services"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|||||||
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