forked from github/plane
chore: minor fixes
This commit is contained in:
sriram veeraghanta
parent
27f78dd283
commit
9a8dcc349f
@ -5,7 +5,7 @@ export * from "./settings-sidebar";
|
||||
export * from "./single-integration-card";
|
||||
export * from "./single-project-card";
|
||||
export * from "./sidebar-list-item";
|
||||
export * from "./confirm-project-leave-modal";
|
||||
export * from "./leave-project-modal";
|
||||
export * from "./member-select";
|
||||
export * from "./members-select";
|
||||
export * from "./label-select";
|
||||
|
||||
@ -1,18 +1,14 @@
|
||||
import React from "react";
|
||||
// next imports
|
||||
import { FC } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
// react-hook-form
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
// headless ui
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
// icons
|
||||
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// ui
|
||||
import { DangerButton, Input, SecondaryButton } from "components/ui";
|
||||
// fetch-keys
|
||||
import { PROJECTS_LIST } from "constants/fetch-keys";
|
||||
// mobx react lite
|
||||
import { observer } from "mobx-react-lite";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
import { RootStore } from "store/root";
|
||||
@ -33,16 +29,17 @@ const defaultValues: FormData = {
|
||||
confirmLeave: "",
|
||||
};
|
||||
|
||||
export const ConfirmProjectLeaveModal: React.FC = observer(() => {
|
||||
export const LeaveProjectModal: FC<> = observer(() => {
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const store: RootStore = useMobxStore();
|
||||
const { project } = store;
|
||||
|
||||
// store
|
||||
const { project: projectStore } = useMobxStore();
|
||||
// user
|
||||
const { user } = useUser();
|
||||
// project
|
||||
const { mutateProjects } = useProjects();
|
||||
|
||||
// toast
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const {
|
||||
@ -50,23 +47,21 @@ export const ConfirmProjectLeaveModal: React.FC = observer(() => {
|
||||
formState: { isSubmitting },
|
||||
handleSubmit,
|
||||
reset,
|
||||
watch,
|
||||
} = useForm({ defaultValues });
|
||||
|
||||
const handleClose = () => {
|
||||
project.handleProjectLeaveModal(null);
|
||||
|
||||
projectStore.handleProjectLeaveModal(null);
|
||||
reset({ ...defaultValues });
|
||||
};
|
||||
|
||||
const onSubmit = async (data: any) => {
|
||||
if (data) {
|
||||
if (data.projectName === project?.projectLeaveDetails?.name) {
|
||||
if (data.projectName === projectStore?.projectLeaveDetails?.name) {
|
||||
if (data.confirmLeave === "Leave Project") {
|
||||
return project
|
||||
return projectStore
|
||||
.leaveProject(
|
||||
project.projectLeaveDetails.workspaceSlug.toString(),
|
||||
project.projectLeaveDetails.id.toString(),
|
||||
projectStore.projectLeaveDetails.workspaceSlug.toString(),
|
||||
projectStore.projectLeaveDetails.id.toString(),
|
||||
user
|
||||
)
|
||||
.then((res) => {
|
||||
@ -105,7 +100,7 @@ export const ConfirmProjectLeaveModal: React.FC = observer(() => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Transition.Root show={project.projectLeaveModal} as={React.Fragment}>
|
||||
<Transition.Root show={projectStore.projectLeaveModal} as={React.Fragment}>
|
||||
<Dialog as="div" className="relative z-20" onClose={handleClose}>
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
@ -134,10 +129,7 @@ export const ConfirmProjectLeaveModal: React.FC = observer(() => {
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
|
||||
<div className="flex w-full items-center justify-start gap-6">
|
||||
<span className="place-items-center rounded-full bg-red-500/20 p-4">
|
||||
<ExclamationTriangleIcon
|
||||
className="h-6 w-6 text-red-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
|
||||
</span>
|
||||
<span className="flex items-center justify-start">
|
||||
<h3 className="text-xl font-medium 2xl:text-2xl">Leave Project</h3>
|
||||
@ -155,10 +147,8 @@ export const ConfirmProjectLeaveModal: React.FC = observer(() => {
|
||||
<div className="text-custom-text-200">
|
||||
<p className="break-words text-sm ">
|
||||
Enter the project name{" "}
|
||||
<span className="font-medium text-custom-text-100">
|
||||
{project?.projectLeaveDetails?.name}
|
||||
</span>{" "}
|
||||
to continue:
|
||||
<span className="font-medium text-custom-text-100">{project?.projectLeaveDetails?.name}</span> to
|
||||
continue:
|
||||
</p>
|
||||
<Controller
|
||||
control={control}
|
||||
@ -177,8 +167,7 @@ export const ConfirmProjectLeaveModal: React.FC = observer(() => {
|
||||
|
||||
<div className="text-custom-text-200">
|
||||
<p className="text-sm">
|
||||
To confirm, type{" "}
|
||||
<span className="font-medium text-custom-text-100">Leave Project</span> below:
|
||||
To confirm, type <span className="font-medium text-custom-text-100">Leave Project</span> below:
|
||||
</p>
|
||||
<Controller
|
||||
control={control}
|
||||
@ -1,12 +1,10 @@
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import { mutate } from "swr";
|
||||
|
||||
// react-beautiful-dnd
|
||||
import { DraggableProvided, DraggableStateSnapshot } from "react-beautiful-dnd";
|
||||
// headless ui
|
||||
import { Disclosure, Transition } from "@headlessui/react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// services
|
||||
import projectService from "services/project.service";
|
||||
// hooks
|
||||
@ -32,11 +30,10 @@ import { renderEmoji } from "helpers/emoji.helper";
|
||||
import { IProject } from "types";
|
||||
// fetch-keys
|
||||
import { PROJECTS_LIST } from "constants/fetch-keys";
|
||||
// mobx react lite
|
||||
import { observer } from "mobx-react-lite";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
import { RootStore } from "store/root";
|
||||
import { LeaveProjectModal } from "./leave-project-modal";
|
||||
|
||||
type Props = {
|
||||
project: IProject;
|
||||
@ -98,6 +95,8 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
// toast
|
||||
const { setToastAlert } = useToast();
|
||||
// states
|
||||
const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false);
|
||||
|
||||
const isAdmin = project.member_role === 20;
|
||||
const isViewerOrGuest = project.member_role === 10 || project.member_role === 5;
|
||||
@ -126,218 +125,219 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
|
||||
});
|
||||
};
|
||||
|
||||
const handleLeaveProject = () => {
|
||||
setLeaveProjectModal(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<Disclosure key={project.id} defaultOpen={projectId === project.id}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div
|
||||
className={`group relative text-custom-sidebar-text-10 px-2 py-1 w-full flex items-center hover:bg-custom-sidebar-background-80 rounded-md ${
|
||||
snapshot?.isDragging ? "opacity-60" : ""
|
||||
}`}
|
||||
>
|
||||
{provided && (
|
||||
<Tooltip
|
||||
tooltipContent={project.sort_order === null ? "Join the project to rearrange" : "Drag to rearrange"}
|
||||
position="top-right"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={`absolute top-1/2 -translate-y-1/2 -left-4 hidden rounded p-0.5 text-custom-sidebar-text-400 ${
|
||||
sidebarCollapse ? "" : "group-hover:!flex"
|
||||
} ${project.sort_order === null ? "opacity-60 cursor-not-allowed" : ""}`}
|
||||
{...provided?.dragHandleProps}
|
||||
<>
|
||||
<LeaveProjectModal project={project} isOpen={leaveProjectModalOpen} onClose={} />
|
||||
<Disclosure key={project.id} defaultOpen={projectId === project.id}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div
|
||||
className={`group relative text-custom-sidebar-text-10 px-2 py-1 w-full flex items-center hover:bg-custom-sidebar-background-80 rounded-md ${
|
||||
snapshot?.isDragging ? "opacity-60" : ""
|
||||
}`}
|
||||
>
|
||||
{provided && (
|
||||
<Tooltip
|
||||
tooltipContent={project.sort_order === null ? "Join the project to rearrange" : "Drag to rearrange"}
|
||||
position="top-right"
|
||||
>
|
||||
<EllipsisVerticalIcon className="h-4" />
|
||||
<EllipsisVerticalIcon className="-ml-5 h-4" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip tooltipContent={`${project.name}`} position="right" className="ml-2" disabled={!sidebarCollapse}>
|
||||
<Disclosure.Button
|
||||
as="div"
|
||||
className={`flex items-center flex-grow truncate cursor-pointer select-none text-left text-sm font-medium ${
|
||||
sidebarCollapse ? "justify-center" : `justify-between`
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`flex items-center flex-grow w-full truncate gap-x-2 ${
|
||||
sidebarCollapse ? "justify-center" : ""
|
||||
<button
|
||||
type="button"
|
||||
className={`absolute top-1/2 -translate-y-1/2 -left-4 hidden rounded p-0.5 text-custom-sidebar-text-400 ${
|
||||
sidebarCollapse ? "" : "group-hover:!flex"
|
||||
} ${project.sort_order === null ? "opacity-60 cursor-not-allowed" : ""}`}
|
||||
{...provided?.dragHandleProps}
|
||||
>
|
||||
<EllipsisVerticalIcon className="h-4" />
|
||||
<EllipsisVerticalIcon className="-ml-5 h-4" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip tooltipContent={`${project.name}`} position="right" className="ml-2" disabled={!sidebarCollapse}>
|
||||
<Disclosure.Button
|
||||
as="div"
|
||||
className={`flex items-center flex-grow truncate cursor-pointer select-none text-left text-sm font-medium ${
|
||||
sidebarCollapse ? "justify-center" : `justify-between`
|
||||
}`}
|
||||
>
|
||||
{project.emoji ? (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
|
||||
{renderEmoji(project.emoji)}
|
||||
</span>
|
||||
) : project.icon_prop ? (
|
||||
<div className="h-7 w-7 flex-shrink-0 grid place-items-center">
|
||||
{renderEmoji(project.icon_prop)}
|
||||
</div>
|
||||
) : (
|
||||
<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={`truncate ${open ? "" : "text-custom-sidebar-text-200"}`}>{project.name}</p>
|
||||
)}
|
||||
</div>
|
||||
{!sidebarCollapse && (
|
||||
<ExpandMoreOutlined
|
||||
fontSize="small"
|
||||
className={`flex-shrink-0 ${
|
||||
open ? "rotate-180" : ""
|
||||
} !hidden group-hover:!block text-custom-sidebar-text-400 duration-300`}
|
||||
/>
|
||||
)}
|
||||
</Disclosure.Button>
|
||||
</Tooltip>
|
||||
|
||||
{!sidebarCollapse && (
|
||||
<CustomMenu
|
||||
className="hidden group-hover:block flex-shrink-0"
|
||||
buttonClassName="!text-custom-sidebar-text-400 hover:text-custom-sidebar-text-400"
|
||||
ellipsis
|
||||
>
|
||||
{!shortContextMenu && isAdmin && (
|
||||
<CustomMenu.MenuItem onClick={handleDeleteProject}>
|
||||
<span className="flex items-center justify-start gap-2 ">
|
||||
<TrashIcon className="h-4 w-4" />
|
||||
<span>Delete project</span>
|
||||
</span>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
{!project.is_favorite && (
|
||||
<CustomMenu.MenuItem onClick={handleAddToFavorites}>
|
||||
<span className="flex items-center justify-start gap-2">
|
||||
<StarIcon className="h-4 w-4" />
|
||||
<span>Add to favorites</span>
|
||||
</span>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
{project.is_favorite && (
|
||||
<CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
|
||||
<span className="flex items-center justify-start gap-2">
|
||||
<StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
|
||||
<span>Remove from favorites</span>
|
||||
</span>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
<CustomMenu.MenuItem onClick={handleCopyText}>
|
||||
<span className="flex items-center justify-start gap-2">
|
||||
<LinkIcon className="h-4 w-4" />
|
||||
<span>Copy project link</span>
|
||||
</span>
|
||||
</CustomMenu.MenuItem>
|
||||
|
||||
{/* publish project settings */}
|
||||
{isAdmin && (
|
||||
<CustomMenu.MenuItem onClick={() => projectPublish.handleProjectModal(project?.id)}>
|
||||
<div className="flex-shrink-0 relative flex items-center justify-start gap-2">
|
||||
<div className="rounded transition-all w-4 h-4 flex justify-center items-center text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 duration-300 cursor-pointer">
|
||||
<Icon iconName="ios_share" className="!text-base" />
|
||||
<div
|
||||
className={`flex items-center flex-grow w-full truncate gap-x-2 ${
|
||||
sidebarCollapse ? "justify-center" : ""
|
||||
}`}
|
||||
>
|
||||
{project.emoji ? (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
|
||||
{renderEmoji(project.emoji)}
|
||||
</span>
|
||||
) : project.icon_prop ? (
|
||||
<div className="h-7 w-7 flex-shrink-0 grid place-items-center">
|
||||
{renderEmoji(project.icon_prop)}
|
||||
</div>
|
||||
<div>{project.is_deployed ? "Publish settings" : "Publish"}</div>
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
|
||||
{project.archive_in > 0 && (
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/archived-issues/`)}
|
||||
>
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<ArchiveOutlined fontSize="small" />
|
||||
<span>Archived Issues</span>
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/draft-issues`)}
|
||||
{!sidebarCollapse && (
|
||||
<p className={`truncate ${open ? "" : "text-custom-sidebar-text-200"}`}>{project.name}</p>
|
||||
)}
|
||||
</div>
|
||||
{!sidebarCollapse && (
|
||||
<ExpandMoreOutlined
|
||||
fontSize="small"
|
||||
className={`flex-shrink-0 ${
|
||||
open ? "rotate-180" : ""
|
||||
} !hidden group-hover:!block text-custom-sidebar-text-400 duration-300`}
|
||||
/>
|
||||
)}
|
||||
</Disclosure.Button>
|
||||
</Tooltip>
|
||||
|
||||
{!sidebarCollapse && (
|
||||
<CustomMenu
|
||||
className="hidden group-hover:block flex-shrink-0"
|
||||
buttonClassName="!text-custom-sidebar-text-400 hover:text-custom-sidebar-text-400"
|
||||
ellipsis
|
||||
>
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<PenSquare className="!text-base !leading-4 w-[14px] h-[14px] text-custom-text-300" />
|
||||
<span>Draft Issues</span>
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/settings`)}>
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<Icon iconName="settings" className="!text-base !leading-4" />
|
||||
<span>Settings</span>
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
{!shortContextMenu && isAdmin && (
|
||||
<CustomMenu.MenuItem onClick={handleDeleteProject}>
|
||||
<span className="flex items-center justify-start gap-2 ">
|
||||
<TrashIcon className="h-4 w-4" />
|
||||
<span>Delete project</span>
|
||||
</span>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
{!project.is_favorite && (
|
||||
<CustomMenu.MenuItem onClick={handleAddToFavorites}>
|
||||
<span className="flex items-center justify-start gap-2">
|
||||
<StarIcon className="h-4 w-4" />
|
||||
<span>Add to favorites</span>
|
||||
</span>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
{project.is_favorite && (
|
||||
<CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
|
||||
<span className="flex items-center justify-start gap-2">
|
||||
<StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
|
||||
<span>Remove from favorites</span>
|
||||
</span>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
<CustomMenu.MenuItem onClick={handleCopyText}>
|
||||
<span className="flex items-center justify-start gap-2">
|
||||
<LinkIcon className="h-4 w-4" />
|
||||
<span>Copy project link</span>
|
||||
</span>
|
||||
</CustomMenu.MenuItem>
|
||||
|
||||
{/* leave project */}
|
||||
{isViewerOrGuest && (
|
||||
{/* publish project settings */}
|
||||
{isAdmin && (
|
||||
<CustomMenu.MenuItem onClick={() => projectPublish.handleProjectModal(project?.id)}>
|
||||
<div className="flex-shrink-0 relative flex items-center justify-start gap-2">
|
||||
<div className="rounded transition-all w-4 h-4 flex justify-center items-center text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 duration-300 cursor-pointer">
|
||||
<Icon iconName="ios_share" className="!text-base" />
|
||||
</div>
|
||||
<div>{project.is_deployed ? "Publish settings" : "Publish"}</div>
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
|
||||
{project.archive_in > 0 && (
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/archived-issues/`)}
|
||||
>
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<ArchiveOutlined fontSize="small" />
|
||||
<span>Archived Issues</span>
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() =>
|
||||
projectStore.handleProjectLeaveModal({
|
||||
id: project?.id,
|
||||
name: project?.name,
|
||||
workspaceSlug: workspaceSlug as string,
|
||||
})
|
||||
}
|
||||
onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/draft-issues`)}
|
||||
>
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<Icon iconName="logout" className="!text-base !leading-4" />
|
||||
<span>Leave Project</span>
|
||||
<PenSquare className="!text-base !leading-4 w-[14px] h-[14px] text-custom-text-300" />
|
||||
<span>Draft Issues</span>
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/settings`)}
|
||||
>
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<Icon iconName="settings" className="!text-base !leading-4" />
|
||||
<span>Settings</span>
|
||||
</div>
|
||||
</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={`space-y-2 mt-1 ${sidebarCollapse ? "" : "ml-[2.25rem]"}`}>
|
||||
{navigation(workspaceSlug as string, project?.id).map((item) => {
|
||||
if (
|
||||
(item.name === "Cycles" && !project.cycle_view) ||
|
||||
(item.name === "Modules" && !project.module_view) ||
|
||||
(item.name === "Views" && !project.issue_views_view) ||
|
||||
(item.name === "Pages" && !project.page_view)
|
||||
)
|
||||
return;
|
||||
{/* leave project */}
|
||||
{isViewerOrGuest && (
|
||||
<CustomMenu.MenuItem onClick={handleLeaveProject}>
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<Icon iconName="logout" className="!text-base !leading-4" />
|
||||
<span>Leave Project</span>
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
</CustomMenu>
|
||||
)}
|
||||
</div>
|
||||
|
||||
return (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<a className="block w-full">
|
||||
<Tooltip
|
||||
tooltipContent={`${project?.name}: ${item.name}`}
|
||||
position="right"
|
||||
className="ml-2"
|
||||
disabled={!sidebarCollapse}
|
||||
>
|
||||
<div
|
||||
className={`group flex items-center rounded-md px-2 py-1.5 gap-2.5 text-xs font-medium outline-none ${
|
||||
router.asPath.includes(item.href)
|
||||
? "bg-custom-primary-100/10 text-custom-primary-100"
|
||||
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
|
||||
} ${sidebarCollapse ? "justify-center" : ""}`}
|
||||
<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={`space-y-2 mt-1 ${sidebarCollapse ? "" : "ml-[2.25rem]"}`}>
|
||||
{navigation(workspaceSlug as string, project?.id).map((item) => {
|
||||
if (
|
||||
(item.name === "Cycles" && !project.cycle_view) ||
|
||||
(item.name === "Modules" && !project.module_view) ||
|
||||
(item.name === "Views" && !project.issue_views_view) ||
|
||||
(item.name === "Pages" && !project.page_view)
|
||||
)
|
||||
return;
|
||||
|
||||
return (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<a className="block w-full">
|
||||
<Tooltip
|
||||
tooltipContent={`${project?.name}: ${item.name}`}
|
||||
position="right"
|
||||
className="ml-2"
|
||||
disabled={!sidebarCollapse}
|
||||
>
|
||||
<item.Icon
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
}}
|
||||
/>
|
||||
{!sidebarCollapse && item.name}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
<div
|
||||
className={`group flex items-center rounded-md px-2 py-1.5 gap-2.5 text-xs font-medium outline-none ${
|
||||
router.asPath.includes(item.href)
|
||||
? "bg-custom-primary-100/10 text-custom-primary-100"
|
||||
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
|
||||
} ${sidebarCollapse ? "justify-center" : ""}`}
|
||||
>
|
||||
<item.Icon
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
}}
|
||||
/>
|
||||
{!sidebarCollapse && item.name}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
@ -9,7 +9,8 @@ import useToast from "hooks/use-toast";
|
||||
import useUserAuth from "hooks/use-user-auth";
|
||||
import useProjects from "hooks/use-projects";
|
||||
// components
|
||||
import { CreateProjectModal, DeleteProjectModal, ProjectSidebarListItem } from "components/project";
|
||||
import { CreateProjectModal, DeleteProjectModal, ProjectSidebarListItem, LeaveProjectModal } from "components/project";
|
||||
import { PublishProjectModal } from "components/project/publish-project/modal";
|
||||
// services
|
||||
import projectService from "services/project.service";
|
||||
// icons
|
||||
@ -26,7 +27,7 @@ import { PROJECTS_LIST } from "constants/fetch-keys";
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
|
||||
export const ProjectSidebarList: FC = observer(() => {
|
||||
const { theme: themeStore, workspace: workspaceStore } = useMobxStore();
|
||||
const { theme: themeStore, workspace: workspaceStore, project: projectStore } = useMobxStore();
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
@ -39,11 +40,8 @@ export const ProjectSidebarList: FC = observer(() => {
|
||||
const [isFavoriteProjectCreate, setIsFavoriteProjectCreate] = useState(false);
|
||||
const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
|
||||
const [deleteProjectModal, setDeleteProjectModal] = useState(false);
|
||||
const [projectToDelete, setProjectToDelete] = useState<IProject | null>(null);
|
||||
const [projectToLeaveId, setProjectToLeaveId] = useState<string | null>(null);
|
||||
|
||||
// router
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [isScrolled, setIsScrolled] = useState(false); // scroll animation state
|
||||
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
@ -53,9 +51,6 @@ export const ProjectSidebarList: FC = observer(() => {
|
||||
const joinedProjects = workspaceSlug && workspaceStore.workspaceJoinedProjects;
|
||||
const favoriteProjects = workspaceSlug && workspaceStore.workspaceFavoriteProjects;
|
||||
|
||||
console.log("workspaceJoinedProjects", workspaceStore.workspaceJoinedProjects);
|
||||
console.log("workspaceFavoriteProjects", workspaceStore.workspaceFavoriteProjects);
|
||||
|
||||
const orderedJoinedProjects: IProject[] | undefined = joinedProjects
|
||||
? orderArrayBy(joinedProjects, "sort_order", "ascending")
|
||||
: undefined;
|
||||
@ -64,11 +59,6 @@ export const ProjectSidebarList: FC = observer(() => {
|
||||
? orderArrayBy(favoriteProjects, "sort_order", "ascending")
|
||||
: undefined;
|
||||
|
||||
const handleDeleteProject = (project: IProject) => {
|
||||
setProjectToDelete(project);
|
||||
setDeleteProjectModal(true);
|
||||
};
|
||||
|
||||
const handleCopyText = (projectId: string) => {
|
||||
const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
|
||||
copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues`).then(() => {
|
||||
@ -87,36 +77,11 @@ export const ProjectSidebarList: FC = observer(() => {
|
||||
|
||||
if (source.index === destination.index) return;
|
||||
|
||||
const projectsList =
|
||||
(destination.droppableId === "joined-projects" ? orderedJoinedProjects : orderedFavProjects) ?? [];
|
||||
const updatedSortOrder = projectStore.orderProjectsWithSortOrder(source.index, destination.index, draggableId);
|
||||
|
||||
let updatedSortOrder = projectsList[source.index].sort_order;
|
||||
|
||||
if (destination.index === 0) updatedSortOrder = (projectsList[0].sort_order as number) - 1000;
|
||||
else if (destination.index === projectsList.length - 1)
|
||||
updatedSortOrder = (projectsList[projectsList.length - 1].sort_order as number) + 1000;
|
||||
else {
|
||||
const destinationSortingOrder = projectsList[destination.index].sort_order as number;
|
||||
const relativeDestinationSortingOrder =
|
||||
source.index < destination.index
|
||||
? (projectsList[destination.index + 1].sort_order as number)
|
||||
: (projectsList[destination.index - 1].sort_order as number);
|
||||
|
||||
updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
|
||||
}
|
||||
|
||||
mutate<IProject[]>(
|
||||
PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
|
||||
(prevData) => {
|
||||
if (!prevData) return prevData;
|
||||
return prevData.map((p) => (p.id === draggableId ? { ...p, sort_order: updatedSortOrder } : p));
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
await projectService
|
||||
.setProjectView(workspaceSlug as string, draggableId, { sort_order: updatedSortOrder })
|
||||
.catch(() => {
|
||||
projectStore
|
||||
.updateProjectView(workspaceSlug.toString(), draggableId, { sort_order: updatedSortOrder })
|
||||
.catch((error) => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
@ -125,20 +90,20 @@ export const ProjectSidebarList: FC = observer(() => {
|
||||
});
|
||||
};
|
||||
|
||||
const handleScroll = () => {
|
||||
if (containerRef.current) {
|
||||
const scrollTop = containerRef.current.scrollTop;
|
||||
setIsScrolled(scrollTop > 0);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Implementing scroll animation styles based on the scroll length of the container
|
||||
*/
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
if (containerRef.current) {
|
||||
const scrollTop = containerRef.current.scrollTop;
|
||||
setIsScrolled(scrollTop > 0);
|
||||
}
|
||||
};
|
||||
const currentContainerRef = containerRef.current;
|
||||
|
||||
if (currentContainerRef) {
|
||||
currentContainerRef.addEventListener("scroll", handleScroll);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (currentContainerRef) {
|
||||
currentContainerRef.removeEventListener("scroll", handleScroll);
|
||||
@ -160,6 +125,10 @@ export const ProjectSidebarList: FC = observer(() => {
|
||||
data={projectToDelete}
|
||||
user={user}
|
||||
/>
|
||||
{/* project leave modal */}
|
||||
<LeaveProjectModal />
|
||||
{/* publish project modal */}
|
||||
<PublishProjectModal />
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={`h-full overflow-y-auto px-4 space-y-3 pt-3 ${
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
// hooks
|
||||
import useTheme from "hooks/use-theme";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// components
|
||||
import {
|
||||
WorkspaceHelpSection,
|
||||
@ -8,10 +7,6 @@ import {
|
||||
WorkspaceSidebarQuickAction,
|
||||
} from "components/workspace";
|
||||
import { ProjectSidebarList } from "components/project";
|
||||
import { PublishProjectModal } from "components/project/publish-project/modal";
|
||||
import { ConfirmProjectLeaveModal } from "components/project/confirm-project-leave-modal";
|
||||
// mobx react lite
|
||||
import { observer } from "mobx-react-lite";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
|
||||
@ -21,15 +16,13 @@ export interface SidebarProps {
|
||||
}
|
||||
|
||||
const Sidebar: React.FC<SidebarProps> = observer(({ toggleSidebar, setToggleSidebar }) => {
|
||||
const store: any = useMobxStore();
|
||||
// theme
|
||||
const { collapsed: sidebarCollapse } = useTheme();
|
||||
const { theme: themStore } = useMobxStore();
|
||||
|
||||
return (
|
||||
<div
|
||||
id="app-sidebar"
|
||||
className={`fixed md:relative inset-y-0 flex flex-col bg-custom-sidebar-background-100 h-full flex-shrink-0 flex-grow-0 border-r border-custom-sidebar-border-200 z-20 duration-300 ${
|
||||
store?.theme?.sidebarCollapsed ? "" : "md:w-[280px]"
|
||||
themStore?.sidebarCollapsed ? "" : "md:w-[280px]"
|
||||
} ${toggleSidebar ? "left-0" : "-left-full md:left-0"}`}
|
||||
>
|
||||
<div className="flex h-full w-full flex-1 flex-col">
|
||||
@ -39,10 +32,6 @@ const Sidebar: React.FC<SidebarProps> = observer(({ toggleSidebar, setToggleSide
|
||||
<ProjectSidebarList />
|
||||
<WorkspaceHelpSection setSidebarActive={setToggleSidebar} />
|
||||
</div>
|
||||
{/* publish project modal */}
|
||||
<PublishProjectModal />
|
||||
{/* project leave modal */}
|
||||
<ConfirmProjectLeaveModal />
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@ -15,9 +15,6 @@ export interface IProjectStore {
|
||||
loader: boolean;
|
||||
error: any | null;
|
||||
|
||||
projectLeaveModal: boolean;
|
||||
projectLeaveDetails: IProject | any;
|
||||
|
||||
projectId: string | null;
|
||||
|
||||
projects: {
|
||||
@ -65,6 +62,9 @@ export interface IProjectStore {
|
||||
addProjectToFavorites: (workspaceSlug: string, projectSlug: string) => Promise<any>;
|
||||
removeProjectFromFavorites: (workspaceSlug: string, projectSlug: string) => Promise<any>;
|
||||
|
||||
orderProjectsWithSortOrder: (sourceIndex: number, destinationIndex: number, projectId: string) => number;
|
||||
updateProjectView: (workspaceSlug: string, projectId: string, viewProps: any) => Promise<any>;
|
||||
|
||||
handleProjectLeaveModal: (project: any | null) => void;
|
||||
|
||||
leaveProject: (workspaceSlug: string, projectSlug: string, user: any) => Promise<void>;
|
||||
@ -150,6 +150,9 @@ class ProjectStore implements IProjectStore {
|
||||
addProjectToFavorites: action,
|
||||
removeProjectFromFavorites: action,
|
||||
|
||||
orderProjectsWithSortOrder: action,
|
||||
updateProjectView: action,
|
||||
|
||||
handleProjectLeaveModal: action,
|
||||
leaveProject: action,
|
||||
});
|
||||
@ -421,6 +424,56 @@ class ProjectStore implements IProjectStore {
|
||||
}
|
||||
};
|
||||
|
||||
orderProjectsWithSortOrder = (sortIndex: number, destinationIndex: number, projectId: string) => {
|
||||
try {
|
||||
const workspaceSlug = this.rootStore.workspace.workspaceSlug;
|
||||
if (!workspaceSlug) return 0;
|
||||
|
||||
const projectsList = this.rootStore.workspace.projects[workspaceSlug] || [];
|
||||
let updatedSortOrder = projectsList[sortIndex].sort_order;
|
||||
|
||||
if (destinationIndex === 0) updatedSortOrder = (projectsList[0].sort_order as number) - 1000;
|
||||
else if (destinationIndex === projectsList.length - 1)
|
||||
updatedSortOrder = (projectsList[projectsList.length - 1].sort_order as number) + 1000;
|
||||
else {
|
||||
const destinationSortingOrder = projectsList[destinationIndex].sort_order as number;
|
||||
const relativeDestinationSortingOrder =
|
||||
sortIndex < destinationIndex
|
||||
? (projectsList[destinationIndex + 1].sort_order as number)
|
||||
: (projectsList[destinationIndex - 1].sort_order as number);
|
||||
|
||||
updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
|
||||
}
|
||||
|
||||
const updatedProjectsList = projectsList.map((p) =>
|
||||
p.id === projectId ? { ...p, sort_order: updatedSortOrder } : p
|
||||
);
|
||||
|
||||
runInAction(() => {
|
||||
this.rootStore.workspace.projects = {
|
||||
...this.rootStore.workspace.projects,
|
||||
[workspaceSlug]: updatedProjectsList,
|
||||
};
|
||||
});
|
||||
|
||||
return updatedSortOrder;
|
||||
} catch (error) {
|
||||
console.log("failed to update sort order of the projects");
|
||||
return 0;
|
||||
}
|
||||
};
|
||||
|
||||
updateProjectView = async (workspaceSlug: string, projectId: string, viewProps: any) => {
|
||||
try {
|
||||
const response = await this.projectService.setProjectView(workspaceSlug, projectId, viewProps);
|
||||
await this.rootStore.workspace.getWorkspaceProjects(workspaceSlug);
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.log("Failed to update sort order of the projects");
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
handleProjectLeaveModal = (project: IProject | null = null) => {
|
||||
if (project && project?.id) {
|
||||
this.projectLeaveModal = !this.projectLeaveModal;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user