forked from github/plane
refactor: sidebar projects menu (#377)
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
626aae696f
commit
27653907f9
@ -24,7 +24,7 @@ type TConfirmProjectDeletionProps = {
|
||||
data: IProject | null;
|
||||
};
|
||||
|
||||
const ConfirmProjectDeletion: React.FC<TConfirmProjectDeletionProps> = (props) => {
|
||||
export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = (props) => {
|
||||
const { isOpen, data, onClose, onSuccess } = props;
|
||||
|
||||
const cancelButtonRef = useRef(null);
|
||||
@ -122,12 +122,12 @@ const ConfirmProjectDeletion: React.FC<TConfirmProjectDeletionProps> = (props) =
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
|
||||
<div className="mt-3 w-full text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
|
||||
Delete Project
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-gray-500 break-all">
|
||||
<p className="break-all text-sm text-gray-500">
|
||||
Are you sure you want to delete project - {`"`}
|
||||
<span className="italic">{selectedProject?.name}</span>
|
||||
{`"`} ? All of the data related to the project will be permanently
|
||||
@ -136,7 +136,7 @@ const ConfirmProjectDeletion: React.FC<TConfirmProjectDeletionProps> = (props) =
|
||||
</div>
|
||||
<div className="my-3 h-0.5 bg-gray-200" />
|
||||
<div className="mt-3">
|
||||
<p className="text-sm break-all">
|
||||
<p className="break-all text-sm">
|
||||
Enter the project name{" "}
|
||||
<span className="font-semibold">{selectedProject?.name}</span> to
|
||||
continue:
|
||||
@ -202,5 +202,3 @@ const ConfirmProjectDeletion: React.FC<TConfirmProjectDeletionProps> = (props) =
|
||||
</Transition.Root>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConfirmProjectDeletion;
|
||||
@ -1,5 +1,7 @@
|
||||
export * from "./single-project-card";
|
||||
export * from "./create-project-modal";
|
||||
export * from "./delete-project-modal";
|
||||
export * from "./join-project";
|
||||
export * from "./sidebar-list";
|
||||
export * from "./single-integration-card";
|
||||
export * from "./single-project-card";
|
||||
export * from "./single-sidebar-project";
|
||||
|
||||
@ -1,53 +1,34 @@
|
||||
import React, { useState, FC } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
import { Disclosure, Transition } from "@headlessui/react";
|
||||
import useSWR from "swr";
|
||||
|
||||
import useSWR, { mutate } from "swr";
|
||||
|
||||
// icons
|
||||
import { ContrastIcon, LayerDiagonalIcon, PeopleGroupIcon } from "components/icons";
|
||||
import { ChevronDownIcon, PlusIcon, Cog6ToothIcon } from "@heroicons/react/24/outline";
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import useTheme from "hooks/use-theme";
|
||||
// services
|
||||
import projectService from "services/project.service";
|
||||
// components
|
||||
import { CreateProjectModal } from "components/project";
|
||||
import { CreateProjectModal, DeleteProjectModal, SingleSidebarProject } from "components/project";
|
||||
// ui
|
||||
import { CustomMenu, Loader } from "components/ui";
|
||||
import { Loader } from "components/ui";
|
||||
// helpers
|
||||
import { copyTextToClipboard, truncateText } from "helpers/string.helper";
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
// types
|
||||
import { IFavoriteProject, IProject } from "types";
|
||||
// fetch-keys
|
||||
import { FAVORITE_PROJECTS_LIST, PROJECTS_LIST } from "constants/fetch-keys";
|
||||
|
||||
const navigation = (workspaceSlug: string, projectId: string) => [
|
||||
{
|
||||
name: "Issues",
|
||||
href: `/${workspaceSlug}/projects/${projectId}/issues`,
|
||||
icon: LayerDiagonalIcon,
|
||||
},
|
||||
{
|
||||
name: "Cycles",
|
||||
href: `/${workspaceSlug}/projects/${projectId}/cycles`,
|
||||
icon: ContrastIcon,
|
||||
},
|
||||
{
|
||||
name: "Modules",
|
||||
href: `/${workspaceSlug}/projects/${projectId}/modules`,
|
||||
icon: PeopleGroupIcon,
|
||||
},
|
||||
{
|
||||
name: "Settings",
|
||||
href: `/${workspaceSlug}/projects/${projectId}/settings`,
|
||||
icon: Cog6ToothIcon,
|
||||
},
|
||||
];
|
||||
|
||||
export const ProjectSidebarList: FC = () => {
|
||||
const [deleteProjectModal, setDeleteProjectModal] = useState(false);
|
||||
const [projectToDelete, setProjectToDelete] = useState<IProject | null>(null);
|
||||
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
const { workspaceSlug } = router.query;
|
||||
// states
|
||||
const [isCreateProjectModal, setCreateProjectModal] = useState(false);
|
||||
// theme
|
||||
@ -66,6 +47,81 @@ export const ProjectSidebarList: FC = () => {
|
||||
);
|
||||
const normalProjects = projects?.filter((p) => !p.is_favorite) ?? [];
|
||||
|
||||
const handleAddToFavorites = (project: IProject) => {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
projectService
|
||||
.addProjectToFavorites(workspaceSlug as string, {
|
||||
project: project.id,
|
||||
})
|
||||
.then(() => {
|
||||
mutate<IProject[]>(
|
||||
PROJECTS_LIST(workspaceSlug as string),
|
||||
(prevData) =>
|
||||
(prevData ?? []).map((p) => ({
|
||||
...p,
|
||||
is_favorite: p.id === project.id ? true : p.is_favorite,
|
||||
})),
|
||||
false
|
||||
);
|
||||
mutate(FAVORITE_PROJECTS_LIST(workspaceSlug as string));
|
||||
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
message: "Successfully added the project to favorites.",
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Couldn't remove the project from favorites. Please try again.",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleRemoveFromFavorites = (project: IProject) => {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
projectService
|
||||
.removeProjectFromFavorites(workspaceSlug as string, project.id)
|
||||
.then(() => {
|
||||
mutate<IProject[]>(
|
||||
PROJECTS_LIST(workspaceSlug as string),
|
||||
(prevData) =>
|
||||
(prevData ?? []).map((p) => ({
|
||||
...p,
|
||||
is_favorite: p.id === project.id ? false : p.is_favorite,
|
||||
})),
|
||||
false
|
||||
);
|
||||
mutate<IFavoriteProject[]>(
|
||||
FAVORITE_PROJECTS_LIST(workspaceSlug as string),
|
||||
(prevData) => (prevData ?? []).filter((p) => p.project !== project.id),
|
||||
false
|
||||
);
|
||||
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
message: "Successfully removed the project from favorites.",
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Couldn't remove the project from favorites. Please try again.",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleDeleteProject = (project: IProject) => {
|
||||
setProjectToDelete(project);
|
||||
setDeleteProjectModal(true);
|
||||
};
|
||||
|
||||
const handleCopyText = (projectId: string) => {
|
||||
const originURL =
|
||||
typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
|
||||
@ -81,6 +137,11 @@ export const ProjectSidebarList: FC = () => {
|
||||
return (
|
||||
<>
|
||||
<CreateProjectModal isOpen={isCreateProjectModal} setIsOpen={setCreateProjectModal} />
|
||||
<DeleteProjectModal
|
||||
isOpen={deleteProjectModal}
|
||||
onClose={() => setDeleteProjectModal(false)}
|
||||
data={projectToDelete}
|
||||
/>
|
||||
<div className="mt-2.5 h-full overflow-y-auto border-t bg-white pt-2.5">
|
||||
{favoriteProjects && favoriteProjects.length > 0 && (
|
||||
<div className="mt-3 flex flex-col space-y-2 px-6">
|
||||
@ -89,97 +150,14 @@ export const ProjectSidebarList: FC = () => {
|
||||
const project = favoriteProject.project_detail;
|
||||
|
||||
return (
|
||||
<Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Disclosure.Button
|
||||
as="div"
|
||||
className={`flex w-full cursor-pointer select-none items-center rounded-md py-2 text-left text-sm font-medium ${
|
||||
sidebarCollapse ? "justify-center" : "justify-between"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-x-2">
|
||||
{project.icon ? (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
|
||||
{String.fromCodePoint(parseInt(project.icon))}
|
||||
</span>
|
||||
) : (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
||||
{project?.name.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{!sidebarCollapse && (
|
||||
<p className="overflow-hidden text-ellipsis text-[0.875rem]">
|
||||
{truncateText(project?.name, 20)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-x-1">
|
||||
{!sidebarCollapse && (
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => handleCopyText(project.id)}>
|
||||
Copy project link
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
)}
|
||||
{!sidebarCollapse && (
|
||||
<span>
|
||||
<ChevronDownIcon
|
||||
className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
|
||||
<Transition
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform scale-95 opacity-0"
|
||||
enterTo="transform scale-100 opacity-100"
|
||||
leave="transition duration-75 ease-out"
|
||||
leaveFrom="transform scale-100 opacity-100"
|
||||
leaveTo="transform scale-95 opacity-0"
|
||||
>
|
||||
<Disclosure.Panel
|
||||
className={`${
|
||||
sidebarCollapse ? "" : "ml-[2.25rem]"
|
||||
} flex flex-col gap-y-1`}
|
||||
>
|
||||
{navigation(workspaceSlug as string, project?.id).map((item) => {
|
||||
if (item.name === "Cycles" && !project.cycle_view) return;
|
||||
if (item.name === "Modules" && !project.module_view) return;
|
||||
|
||||
return (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<a
|
||||
className={`group flex items-center rounded-md px-2 py-2 text-xs font-medium outline-none ${
|
||||
item.href === router.asPath
|
||||
? "bg-indigo-50 text-gray-900"
|
||||
: "text-gray-500 hover:bg-indigo-50 hover:text-gray-900 focus:bg-indigo-50 focus:text-gray-900"
|
||||
} ${sidebarCollapse ? "justify-center" : ""}`}
|
||||
>
|
||||
<div className="grid place-items-center">
|
||||
<item.icon
|
||||
className={`h-5 w-5 flex-shrink-0 ${
|
||||
item.href === router.asPath
|
||||
? "text-gray-900"
|
||||
: "text-gray-500 group-hover:text-gray-900"
|
||||
} ${!sidebarCollapse ? "mr-3" : ""}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
{!sidebarCollapse && item.name}
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
<SingleSidebarProject
|
||||
key={project.id}
|
||||
project={project}
|
||||
sidebarCollapse={sidebarCollapse}
|
||||
handleDeleteProject={() => handleDeleteProject(project)}
|
||||
handleCopyText={() => handleCopyText(project.id)}
|
||||
handleRemoveFromFavorites={() => handleRemoveFromFavorites(project)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
@ -190,97 +168,14 @@ export const ProjectSidebarList: FC = () => {
|
||||
<>
|
||||
{normalProjects.length > 0 ? (
|
||||
normalProjects.map((project) => (
|
||||
<Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Disclosure.Button
|
||||
as="div"
|
||||
className={`flex w-full cursor-pointer select-none items-center rounded-md py-2 text-left text-sm font-medium ${
|
||||
sidebarCollapse ? "justify-center" : "justify-between"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-x-2">
|
||||
{project.icon ? (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
|
||||
{String.fromCodePoint(parseInt(project.icon))}
|
||||
</span>
|
||||
) : (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
||||
{project?.name.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{!sidebarCollapse && (
|
||||
<p className="overflow-hidden text-ellipsis text-[0.875rem]">
|
||||
{truncateText(project?.name, 20)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-x-1">
|
||||
{!sidebarCollapse && (
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => handleCopyText(project.id)}>
|
||||
Copy project link
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
)}
|
||||
{!sidebarCollapse && (
|
||||
<span>
|
||||
<ChevronDownIcon
|
||||
className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
|
||||
<Transition
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform scale-95 opacity-0"
|
||||
enterTo="transform scale-100 opacity-100"
|
||||
leave="transition duration-75 ease-out"
|
||||
leaveFrom="transform scale-100 opacity-100"
|
||||
leaveTo="transform scale-95 opacity-0"
|
||||
>
|
||||
<Disclosure.Panel
|
||||
className={`${
|
||||
sidebarCollapse ? "" : "ml-[2.25rem]"
|
||||
} flex flex-col gap-y-1`}
|
||||
>
|
||||
{navigation(workspaceSlug as string, project?.id).map((item) => {
|
||||
if (item.name === "Cycles" && !project.cycle_view) return;
|
||||
if (item.name === "Modules" && !project.module_view) return;
|
||||
|
||||
return (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<a
|
||||
className={`group flex items-center rounded-md px-2 py-2 text-xs font-medium outline-none ${
|
||||
item.href === router.asPath
|
||||
? "bg-indigo-50 text-gray-900"
|
||||
: "text-gray-500 hover:bg-indigo-50 hover:text-gray-900 focus:bg-indigo-50 focus:text-gray-900"
|
||||
} ${sidebarCollapse ? "justify-center" : ""}`}
|
||||
>
|
||||
<div className="grid place-items-center">
|
||||
<item.icon
|
||||
className={`h-5 w-5 flex-shrink-0 ${
|
||||
item.href === router.asPath
|
||||
? "text-gray-900"
|
||||
: "text-gray-500 group-hover:text-gray-900"
|
||||
} ${!sidebarCollapse ? "mr-3" : ""}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
{!sidebarCollapse && item.name}
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
<SingleSidebarProject
|
||||
key={project.id}
|
||||
project={project}
|
||||
sidebarCollapse={sidebarCollapse}
|
||||
handleDeleteProject={() => handleDeleteProject(project)}
|
||||
handleCopyText={() => handleCopyText(project.id)}
|
||||
handleAddToFavorites={() => handleAddToFavorites(project)}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<div className="space-y-3 text-center">
|
||||
|
||||
@ -161,10 +161,12 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
|
||||
<span>Select to Join</span>
|
||||
</button>
|
||||
) : (
|
||||
<span className="rounded bg-green-600 px-2 py-1 text-xs">Member</span>
|
||||
<span className="cursor-default rounded bg-green-600 px-2 py-1 text-xs">
|
||||
Member
|
||||
</span>
|
||||
)}
|
||||
{project.is_favorite && (
|
||||
<span className="grid h-6 w-9 place-items-center rounded bg-orange-400">
|
||||
<span className="grid h-6 w-9 cursor-default place-items-center rounded bg-orange-400">
|
||||
<StarIcon className="h-3 w-3" />
|
||||
</span>
|
||||
)}
|
||||
@ -192,7 +194,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
|
||||
position="bottom"
|
||||
theme="dark"
|
||||
>
|
||||
<div className="flex items-center gap-1.5 text-xs">
|
||||
<div className="flex cursor-default items-center gap-1.5 text-xs">
|
||||
<CalendarDaysIcon className="h-4 w-4" />
|
||||
{renderShortNumericDateFormat(project.created_at)}
|
||||
</div>
|
||||
|
||||
161
apps/app/components/project/single-sidebar-project.tsx
Normal file
161
apps/app/components/project/single-sidebar-project.tsx
Normal file
@ -0,0 +1,161 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// headless ui
|
||||
import { Disclosure, Transition } from "@headlessui/react";
|
||||
// ui
|
||||
import { CustomMenu } from "components/ui";
|
||||
// icons
|
||||
import { ChevronDownIcon, Cog6ToothIcon } from "@heroicons/react/24/outline";
|
||||
import { ContrastIcon, LayerDiagonalIcon, PeopleGroupIcon } from "components/icons";
|
||||
// helpers
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
// types
|
||||
import { IProject } from "types";
|
||||
|
||||
type Props = {
|
||||
project: IProject;
|
||||
sidebarCollapse: boolean;
|
||||
handleDeleteProject: () => void;
|
||||
handleCopyText: () => void;
|
||||
handleAddToFavorites?: () => void;
|
||||
handleRemoveFromFavorites?: () => void;
|
||||
};
|
||||
|
||||
const navigation = (workspaceSlug: string, projectId: string) => [
|
||||
{
|
||||
name: "Issues",
|
||||
href: `/${workspaceSlug}/projects/${projectId}/issues`,
|
||||
icon: LayerDiagonalIcon,
|
||||
},
|
||||
{
|
||||
name: "Cycles",
|
||||
href: `/${workspaceSlug}/projects/${projectId}/cycles`,
|
||||
icon: ContrastIcon,
|
||||
},
|
||||
{
|
||||
name: "Modules",
|
||||
href: `/${workspaceSlug}/projects/${projectId}/modules`,
|
||||
icon: PeopleGroupIcon,
|
||||
},
|
||||
{
|
||||
name: "Settings",
|
||||
href: `/${workspaceSlug}/projects/${projectId}/settings`,
|
||||
icon: Cog6ToothIcon,
|
||||
},
|
||||
];
|
||||
|
||||
export const SingleSidebarProject: React.FC<Props> = ({
|
||||
project,
|
||||
sidebarCollapse,
|
||||
handleDeleteProject,
|
||||
handleCopyText,
|
||||
handleAddToFavorites,
|
||||
handleRemoveFromFavorites,
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
return (
|
||||
<Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="flex items-center gap-x-1">
|
||||
<Disclosure.Button
|
||||
as="div"
|
||||
className={`flex w-full cursor-pointer select-none items-center rounded-md py-2 text-left text-sm font-medium ${
|
||||
sidebarCollapse ? "justify-center" : "justify-between"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-x-2">
|
||||
{project.icon ? (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
|
||||
{String.fromCodePoint(parseInt(project.icon))}
|
||||
</span>
|
||||
) : (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
||||
{project?.name.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{!sidebarCollapse && (
|
||||
<p className="overflow-hidden text-ellipsis text-[0.875rem]">
|
||||
{truncateText(project?.name, 20)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{!sidebarCollapse && (
|
||||
<span>
|
||||
<ChevronDownIcon className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`} />
|
||||
</span>
|
||||
)}
|
||||
</Disclosure.Button>
|
||||
|
||||
{!sidebarCollapse && (
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={handleDeleteProject}>
|
||||
Delete project
|
||||
</CustomMenu.MenuItem>
|
||||
{handleAddToFavorites && (
|
||||
<CustomMenu.MenuItem onClick={handleAddToFavorites}>
|
||||
Add to favorites
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
{handleRemoveFromFavorites && (
|
||||
<CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
|
||||
Remove from favorites
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
<CustomMenu.MenuItem onClick={handleCopyText}>
|
||||
Copy project link
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Transition
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform scale-95 opacity-0"
|
||||
enterTo="transform scale-100 opacity-100"
|
||||
leave="transition duration-75 ease-out"
|
||||
leaveFrom="transform scale-100 opacity-100"
|
||||
leaveTo="transform scale-95 opacity-0"
|
||||
>
|
||||
<Disclosure.Panel
|
||||
className={`${sidebarCollapse ? "" : "ml-[2.25rem]"} flex flex-col gap-y-1`}
|
||||
>
|
||||
{navigation(workspaceSlug as string, project?.id).map((item) => {
|
||||
if (item.name === "Cycles" && !project.cycle_view) return;
|
||||
if (item.name === "Modules" && !project.module_view) return;
|
||||
|
||||
return (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<a
|
||||
className={`group flex items-center rounded-md px-2 py-2 text-xs font-medium outline-none ${
|
||||
item.href === router.asPath
|
||||
? "bg-indigo-50 text-gray-900"
|
||||
: "text-gray-500 hover:bg-indigo-50 hover:text-gray-900 focus:bg-indigo-50 focus:text-gray-900"
|
||||
} ${sidebarCollapse ? "justify-center" : ""}`}
|
||||
>
|
||||
<div className="grid place-items-center">
|
||||
<item.icon
|
||||
className={`h-5 w-5 flex-shrink-0 ${
|
||||
item.href === router.asPath
|
||||
? "text-gray-900"
|
||||
: "text-gray-500 group-hover:text-gray-900"
|
||||
} ${!sidebarCollapse ? "mr-3" : ""}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
{!sidebarCollapse && item.name}
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
);
|
||||
};
|
||||
@ -120,21 +120,27 @@ const MenuItem: React.FC<MenuItemProps> = ({
|
||||
onClick,
|
||||
className = "",
|
||||
}) => (
|
||||
<Menu.Item
|
||||
as="div"
|
||||
className={({ active }) =>
|
||||
`${className} ${
|
||||
active ? "bg-hover-gray" : ""
|
||||
} cursor-pointer select-none gap-2 truncate rounded px-1 py-1.5 text-gray-500`
|
||||
}
|
||||
>
|
||||
{({ close }) =>
|
||||
<Menu.Item as="div">
|
||||
{({ active, close }) =>
|
||||
renderAs === "a" ? (
|
||||
<Link href={href ?? ""}>
|
||||
<a onClick={close}>{children}</a>
|
||||
<a
|
||||
className={`${className} ${
|
||||
active ? "bg-hover-gray" : ""
|
||||
} w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-gray-500`}
|
||||
onClick={close}
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
</Link>
|
||||
) : (
|
||||
<button type="button" onClick={onClick}>
|
||||
<button
|
||||
type="button"
|
||||
className={`${className} ${
|
||||
active ? "bg-hover-gray" : ""
|
||||
} w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-gray-500`}
|
||||
onClick={onClick}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
|
||||
@ -15,7 +15,7 @@ import AppLayout from "layouts/app-layout";
|
||||
import projectService from "services/project.service";
|
||||
import workspaceService from "services/workspace.service";
|
||||
// components
|
||||
import ConfirmProjectDeletion from "components/project/confirm-project-deletion";
|
||||
import { DeleteProjectModal } from "components/project";
|
||||
import EmojiIconPicker from "components/emoji-icon-picker";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
@ -138,7 +138,7 @@ const GeneralSettings: NextPage<UserAuth> = (props) => {
|
||||
}
|
||||
settingsLayout
|
||||
>
|
||||
<ConfirmProjectDeletion
|
||||
<DeleteProjectModal
|
||||
data={projectDetails ?? null}
|
||||
isOpen={Boolean(selectProject)}
|
||||
onClose={() => setSelectedProject(null)}
|
||||
|
||||
@ -10,8 +10,7 @@ import useWorkspaces from "hooks/use-workspaces";
|
||||
import AppLayout from "layouts/app-layout";
|
||||
// components
|
||||
import { JoinProjectModal } from "components/project/join-project-modal";
|
||||
import { SingleProjectCard } from "components/project";
|
||||
import ConfirmProjectDeletion from "components/project/confirm-project-deletion";
|
||||
import { DeleteProjectModal, SingleProjectCard } from "components/project";
|
||||
// ui
|
||||
import { HeaderButton, EmptySpace, EmptySpaceItem, Loader } from "components/ui";
|
||||
import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
|
||||
@ -71,7 +70,7 @@ const ProjectsPage: NextPage = () => {
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<ConfirmProjectDeletion
|
||||
<DeleteProjectModal
|
||||
isOpen={!!deleteProject}
|
||||
onClose={() => setDeleteProject(null)}
|
||||
data={projects?.find((item) => item.id === deleteProject) ?? null}
|
||||
@ -102,7 +101,7 @@ const ProjectsPage: NextPage = () => {
|
||||
</EmptySpace>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-9">
|
||||
<div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
|
||||
{projects.map((project) => (
|
||||
<SingleProjectCard
|
||||
key={project.id}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user