mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
style: module ui revamp (#2548)
* chore: module constant and helper function added * style: module card ui revamp * chore: custom media query added * chore: circular progress indicator added * chore: module card item ui improvement * chore: module list view added * chore: module sidebar added in list and card view * chore: module list and card ui improvement * chore: module sidebar select, avatar and link list component improvement * chore: sidebar improvement and refactor * style: module sidebar revamp * style: module sidebar ui improvement * chore: module sidebar lead and member select improvement * style: module sidebar progress section empty state added * chore: module card issue count validation added * style: module card and list item ui improvement
This commit is contained in:
parent
080b5a29ae
commit
fc82d6fc23
@ -213,7 +213,9 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
|
screens: {
|
||||||
|
"3xl": "1792px",
|
||||||
|
},
|
||||||
// scale down font sizes to 90% of default
|
// scale down font sizes to 90% of default
|
||||||
fontSize: {
|
fontSize: {
|
||||||
xs: "0.675rem",
|
xs: "0.675rem",
|
||||||
|
102
packages/ui/src/progress/circular-progress-indicator.tsx
Normal file
102
packages/ui/src/progress/circular-progress-indicator.tsx
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
import React, { Children } from "react";
|
||||||
|
|
||||||
|
interface ICircularProgressIndicator {
|
||||||
|
size: number;
|
||||||
|
percentage: number;
|
||||||
|
strokeWidth?: number;
|
||||||
|
strokeColor?: string;
|
||||||
|
children?: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CircularProgressIndicator: React.FC<ICircularProgressIndicator> = (
|
||||||
|
props
|
||||||
|
) => {
|
||||||
|
const { size = 40, percentage = 25, strokeWidth = 6, children } = props;
|
||||||
|
|
||||||
|
const sqSize = size;
|
||||||
|
const radius = (size - strokeWidth) / 2;
|
||||||
|
const viewBox = `0 0 ${sqSize} ${sqSize}`;
|
||||||
|
const dashArray = radius * Math.PI * 2;
|
||||||
|
const dashOffset = dashArray - (dashArray * percentage) / 100;
|
||||||
|
return (
|
||||||
|
<div className="relative">
|
||||||
|
<svg width={size} height={size} viewBox={viewBox} fill="none">
|
||||||
|
<circle
|
||||||
|
className="fill-none stroke-custom-background-80"
|
||||||
|
cx={size / 2}
|
||||||
|
cy={size / 2}
|
||||||
|
r={radius}
|
||||||
|
strokeWidth={`${strokeWidth}px`}
|
||||||
|
style={{ filter: "url(#filter0_bi_377_19141)" }}
|
||||||
|
/>
|
||||||
|
<defs>
|
||||||
|
<filter
|
||||||
|
id="filter0_bi_377_19141"
|
||||||
|
x="-3.57544"
|
||||||
|
y="-3.57422"
|
||||||
|
width="45.2227"
|
||||||
|
height="45.2227"
|
||||||
|
filterUnits="userSpaceOnUse"
|
||||||
|
color-interpolation-filters="sRGB"
|
||||||
|
>
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||||
|
<feGaussianBlur in="BackgroundImageFix" stdDeviation="2" />
|
||||||
|
<feComposite
|
||||||
|
in2="SourceAlpha"
|
||||||
|
operator="in"
|
||||||
|
result="effect1_backgroundBlur_377_19141"
|
||||||
|
/>
|
||||||
|
<feBlend
|
||||||
|
mode="normal"
|
||||||
|
in="SourceGraphic"
|
||||||
|
in2="effect1_backgroundBlur_377_19141"
|
||||||
|
result="shape"
|
||||||
|
/>
|
||||||
|
<feColorMatrix
|
||||||
|
in="SourceAlpha"
|
||||||
|
type="matrix"
|
||||||
|
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||||
|
result="hardAlpha"
|
||||||
|
/>
|
||||||
|
<feOffset dx="1" dy="1" />
|
||||||
|
<feGaussianBlur stdDeviation="2" />
|
||||||
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||||
|
<feColorMatrix
|
||||||
|
type="matrix"
|
||||||
|
values="0 0 0 0 0.63125 0 0 0 0 0.6625 0 0 0 0 0.75 0 0 0 0.35 0"
|
||||||
|
/>
|
||||||
|
<feBlend
|
||||||
|
mode="normal"
|
||||||
|
in2="shape"
|
||||||
|
result="effect2_innerShadow_377_19141"
|
||||||
|
/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<circle
|
||||||
|
className="stroke-custom-primary-100 fill-none "
|
||||||
|
cx={size / 2}
|
||||||
|
cy={size / 2}
|
||||||
|
r={radius}
|
||||||
|
strokeWidth={`${strokeWidth}px`}
|
||||||
|
transform={`rotate(-90 ${size / 2} ${size / 2})`}
|
||||||
|
style={{
|
||||||
|
strokeDasharray: dashArray,
|
||||||
|
strokeDashoffset: dashOffset,
|
||||||
|
}}
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<div
|
||||||
|
className="absolute"
|
||||||
|
style={{
|
||||||
|
top: "50%",
|
||||||
|
left: "50%",
|
||||||
|
transform: "translate(-50%, -50%)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
@ -1,3 +1,4 @@
|
|||||||
export * from "./radial-progress";
|
export * from "./radial-progress";
|
||||||
export * from "./progress-bar";
|
export * from "./progress-bar";
|
||||||
export * from "./linear-progress-indicator";
|
export * from "./linear-progress-indicator";
|
||||||
|
export * from "./circular-progress-indicator";
|
||||||
|
@ -15,58 +15,63 @@ type Props = {
|
|||||||
|
|
||||||
export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEditLink, userAuth }) => {
|
export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEditLink, userAuth }) => {
|
||||||
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{links.map((link) => (
|
{links.map((link) => (
|
||||||
<div key={link.id} className="relative">
|
<div key={link.id} className="relative flex flex-col rounded-md bg-custom-background-90 p-2.5">
|
||||||
{!isNotAllowed && (
|
<div className="flex items-start justify-between gap-2 w-full">
|
||||||
<div className="absolute top-1.5 right-1.5 z-[1] flex items-center gap-1">
|
<div className="flex items-start gap-2">
|
||||||
<button
|
<span className="py-1">
|
||||||
type="button"
|
<LinkIcon className="h-3 w-3 flex-shrink-0" />
|
||||||
className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 outline-none hover:bg-custom-background-80"
|
</span>
|
||||||
onClick={() => handleEditLink(link)}
|
<span className="text-xs break-all">{link.title && link.title !== "" ? link.title : link.url}</span>
|
||||||
>
|
|
||||||
<Pencil className="text-custom-text-200" />
|
|
||||||
</button>
|
|
||||||
<a
|
|
||||||
href={link.url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 outline-none hover:bg-custom-background-80"
|
|
||||||
>
|
|
||||||
<ExternalLinkIcon className="h-4 w-4 text-custom-text-200" />
|
|
||||||
</a>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 text-red-500 outline-none duration-300 hover:bg-red-500/20"
|
|
||||||
onClick={() => handleDeleteLink(link.id)}
|
|
||||||
>
|
|
||||||
<Trash2 className="h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
<a
|
{!isNotAllowed && (
|
||||||
href={link.url}
|
<div className="flex items-center gap-2 flex-shrink-0 z-[1]">
|
||||||
target="_blank"
|
<button
|
||||||
rel="noopener noreferrer"
|
type="button"
|
||||||
className="relative flex gap-2 rounded-md bg-custom-background-90 p-2"
|
className="flex items-center justify-center p-1 hover:bg-custom-background-80"
|
||||||
>
|
onClick={(e) => {
|
||||||
<div className="mt-0.5">
|
e.preventDefault();
|
||||||
<LinkIcon className="h-3.5 w-3.5" />
|
e.stopPropagation();
|
||||||
</div>
|
handleEditLink(link);
|
||||||
<div>
|
}}
|
||||||
<h5 className="w-4/5 break-words">{link.title ?? link.url}</h5>
|
>
|
||||||
<p className="mt-0.5 text-custom-text-200">
|
<Pencil className="h-3 w-3 text-custom-text-200 stroke-[1.5]" />
|
||||||
Added {timeAgo(link.created_at)}
|
</button>
|
||||||
<br />
|
<a
|
||||||
by{" "}
|
href={link.url}
|
||||||
{link.created_by_detail.is_bot
|
target="_blank"
|
||||||
? link.created_by_detail.first_name + " Bot"
|
rel="noopener noreferrer"
|
||||||
: link.created_by_detail.display_name}
|
className="flex items-center justify-center p-1 hover:bg-custom-background-80"
|
||||||
</p>
|
>
|
||||||
</div>
|
<ExternalLinkIcon className="h-3 w-3 text-custom-text-200 stroke-[1.5]" />
|
||||||
</a>
|
</a>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex items-center justify-center p-1 hover:bg-custom-background-80"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
handleDeleteLink(link.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-3 w-3" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="px-5">
|
||||||
|
<p className="text-xs mt-0.5 text-custom-text-300 stroke-[1.5]">
|
||||||
|
Added {timeAgo(link.created_at)}
|
||||||
|
<br />
|
||||||
|
by{" "}
|
||||||
|
{link.created_by_detail.is_bot
|
||||||
|
? link.created_by_detail.first_name + " Bot"
|
||||||
|
: link.created_by_detail.display_name}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</>
|
</>
|
||||||
|
@ -1,11 +1,16 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
// headless ui
|
// headless ui
|
||||||
import { Tab } from "@headlessui/react";
|
import { Tab } from "@headlessui/react";
|
||||||
// hooks
|
// hooks
|
||||||
import useLocalStorage from "hooks/use-local-storage";
|
import useLocalStorage from "hooks/use-local-storage";
|
||||||
import useIssuesView from "hooks/use-issues-view";
|
import useIssuesView from "hooks/use-issues-view";
|
||||||
|
// images
|
||||||
|
import emptyLabel from "public/empty-state/empty_label.svg";
|
||||||
|
import emptyMembers from "public/empty-state/empty_members.svg";
|
||||||
// components
|
// components
|
||||||
|
import { StateGroupIcon } from "@plane/ui";
|
||||||
import { SingleProgressStats } from "components/core";
|
import { SingleProgressStats } from "components/core";
|
||||||
// ui
|
// ui
|
||||||
import { Avatar } from "components/ui";
|
import { Avatar } from "components/ui";
|
||||||
@ -17,9 +22,7 @@ import {
|
|||||||
TLabelsDistribution,
|
TLabelsDistribution,
|
||||||
TStateGroups,
|
TStateGroups,
|
||||||
} from "types";
|
} from "types";
|
||||||
// constants
|
|
||||||
import { STATE_GROUP_COLORS } from "constants/state";
|
|
||||||
// types
|
|
||||||
type Props = {
|
type Props = {
|
||||||
distribution: {
|
distribution: {
|
||||||
assignees: TAssigneesDistribution[];
|
assignees: TAssigneesDistribution[];
|
||||||
@ -33,6 +36,7 @@ type Props = {
|
|||||||
module?: IModule;
|
module?: IModule;
|
||||||
roundedTab?: boolean;
|
roundedTab?: boolean;
|
||||||
noBackground?: boolean;
|
noBackground?: boolean;
|
||||||
|
isPeekModuleDetails?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const SidebarProgressStats: React.FC<Props> = ({
|
export const SidebarProgressStats: React.FC<Props> = ({
|
||||||
@ -42,6 +46,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
|
|||||||
module,
|
module,
|
||||||
roundedTab,
|
roundedTab,
|
||||||
noBackground,
|
noBackground,
|
||||||
|
isPeekModuleDetails = false,
|
||||||
}) => {
|
}) => {
|
||||||
const { filters, setFilters } = useIssuesView();
|
const { filters, setFilters } = useIssuesView();
|
||||||
|
|
||||||
@ -55,7 +60,6 @@ export const SidebarProgressStats: React.FC<Props> = ({
|
|||||||
return 1;
|
return 1;
|
||||||
case "States":
|
case "States":
|
||||||
return 2;
|
return 2;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
@ -72,7 +76,6 @@ export const SidebarProgressStats: React.FC<Props> = ({
|
|||||||
return setTab("Labels");
|
return setTab("Labels");
|
||||||
case 2:
|
case 2:
|
||||||
return setTab("States");
|
return setTab("States");
|
||||||
|
|
||||||
default:
|
default:
|
||||||
return setTab("Assignees");
|
return setTab("Assignees");
|
||||||
}
|
}
|
||||||
@ -82,15 +85,17 @@ export const SidebarProgressStats: React.FC<Props> = ({
|
|||||||
as="div"
|
as="div"
|
||||||
className={`flex w-full items-center gap-2 justify-between rounded-md ${
|
className={`flex w-full items-center gap-2 justify-between rounded-md ${
|
||||||
noBackground ? "" : "bg-custom-background-90"
|
noBackground ? "" : "bg-custom-background-90"
|
||||||
} px-1 py-1.5
|
} p-0.5
|
||||||
${module ? "text-xs" : "text-sm"} `}
|
${module ? "text-xs" : "text-sm"}`}
|
||||||
>
|
>
|
||||||
<Tab
|
<Tab
|
||||||
className={({ selected }) =>
|
className={({ selected }) =>
|
||||||
`w-full ${
|
`w-full ${
|
||||||
roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
|
roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
|
||||||
} px-3 py-1 text-custom-text-100 ${
|
} px-3 py-1 text-custom-text-100 ${
|
||||||
selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
|
selected
|
||||||
|
? "bg-custom-background-100 text-custom-text-300 shadow-custom-shadow-2xs"
|
||||||
|
: "text-custom-text-400 hover:text-custom-text-300"
|
||||||
}`
|
}`
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
@ -101,7 +106,9 @@ export const SidebarProgressStats: React.FC<Props> = ({
|
|||||||
`w-full ${
|
`w-full ${
|
||||||
roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
|
roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
|
||||||
} px-3 py-1 text-custom-text-100 ${
|
} px-3 py-1 text-custom-text-100 ${
|
||||||
selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
|
selected
|
||||||
|
? "bg-custom-background-100 text-custom-text-300 shadow-custom-shadow-2xs"
|
||||||
|
: "text-custom-text-400 hover:text-custom-text-300"
|
||||||
}`
|
}`
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
@ -112,113 +119,128 @@ export const SidebarProgressStats: React.FC<Props> = ({
|
|||||||
`w-full ${
|
`w-full ${
|
||||||
roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
|
roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
|
||||||
} px-3 py-1 text-custom-text-100 ${
|
} px-3 py-1 text-custom-text-100 ${
|
||||||
selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
|
selected
|
||||||
|
? "bg-custom-background-100 text-custom-text-300 shadow-custom-shadow-2xs"
|
||||||
|
: "text-custom-text-400 hover:text-custom-text-300"
|
||||||
}`
|
}`
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
States
|
States
|
||||||
</Tab>
|
</Tab>
|
||||||
</Tab.List>
|
</Tab.List>
|
||||||
<Tab.Panels className="flex w-full items-center justify-between pt-1 text-custom-text-200">
|
<Tab.Panels className="flex w-full items-center justify-between text-custom-text-200">
|
||||||
<Tab.Panel as="div" className="w-full space-y-1">
|
<Tab.Panel as="div" className="flex flex-col gap-1.5 pt-3.5 w-full h-44 overflow-y-auto">
|
||||||
{distribution.assignees.map((assignee, index) => {
|
{distribution.assignees.length > 0 ? (
|
||||||
if (assignee.assignee_id)
|
distribution.assignees.map((assignee, index) => {
|
||||||
return (
|
if (assignee.assignee_id)
|
||||||
<SingleProgressStats
|
return (
|
||||||
key={assignee.assignee_id}
|
<SingleProgressStats
|
||||||
title={
|
key={assignee.assignee_id}
|
||||||
<div className="flex items-center gap-2">
|
title={
|
||||||
<Avatar
|
<div className="flex items-center gap-2">
|
||||||
user={{
|
<Avatar
|
||||||
id: assignee.assignee_id,
|
user={{
|
||||||
avatar: assignee.avatar ?? "",
|
id: assignee.assignee_id,
|
||||||
first_name: assignee.first_name ?? "",
|
avatar: assignee.avatar ?? "",
|
||||||
last_name: assignee.last_name ?? "",
|
first_name: assignee.first_name ?? "",
|
||||||
display_name: assignee.display_name ?? "",
|
last_name: assignee.last_name ?? "",
|
||||||
}}
|
display_name: assignee.display_name ?? "",
|
||||||
/>
|
}}
|
||||||
<span>{assignee.display_name}</span>
|
height="18px"
|
||||||
</div>
|
width="18px"
|
||||||
}
|
|
||||||
completed={assignee.completed_issues}
|
|
||||||
total={assignee.total_issues}
|
|
||||||
onClick={() => {
|
|
||||||
if (filters?.assignees?.includes(assignee.assignee_id ?? ""))
|
|
||||||
setFilters({
|
|
||||||
assignees: filters?.assignees?.filter((a) => a !== assignee.assignee_id),
|
|
||||||
});
|
|
||||||
else
|
|
||||||
setFilters({
|
|
||||||
assignees: [...(filters?.assignees ?? []), assignee.assignee_id ?? ""],
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
selected={filters?.assignees?.includes(assignee.assignee_id ?? "")}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
else
|
|
||||||
return (
|
|
||||||
<SingleProgressStats
|
|
||||||
key={`unassigned-${index}`}
|
|
||||||
title={
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="h-5 w-5 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
|
|
||||||
<img
|
|
||||||
src="/user.png"
|
|
||||||
height="100%"
|
|
||||||
width="100%"
|
|
||||||
className="rounded-full"
|
|
||||||
alt="User"
|
|
||||||
/>
|
/>
|
||||||
|
<span>{assignee.display_name}</span>
|
||||||
</div>
|
</div>
|
||||||
<span>No assignee</span>
|
}
|
||||||
</div>
|
completed={assignee.completed_issues}
|
||||||
}
|
total={assignee.total_issues}
|
||||||
completed={assignee.completed_issues}
|
{...(!isPeekModuleDetails && {
|
||||||
total={assignee.total_issues}
|
onClick: () => {
|
||||||
/>
|
if (filters?.assignees?.includes(assignee.assignee_id ?? ""))
|
||||||
);
|
setFilters({
|
||||||
})}
|
assignees: filters?.assignees?.filter((a) => a !== assignee.assignee_id),
|
||||||
</Tab.Panel>
|
});
|
||||||
<Tab.Panel as="div" className="w-full space-y-1">
|
else
|
||||||
{distribution.labels.map((label, index) => (
|
setFilters({
|
||||||
<SingleProgressStats
|
assignees: [...(filters?.assignees ?? []), assignee.assignee_id ?? ""],
|
||||||
key={label.label_id ?? `no-label-${index}`}
|
});
|
||||||
title={
|
},
|
||||||
<div className="flex items-center gap-2">
|
selected: filters?.assignees?.includes(assignee.assignee_id ?? ""),
|
||||||
<span
|
})}
|
||||||
className="block h-3 w-3 rounded-full"
|
|
||||||
style={{
|
|
||||||
backgroundColor: label.color ?? "transparent",
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
<span className="text-xs">{label.label_name ?? "No labels"}</span>
|
);
|
||||||
</div>
|
else
|
||||||
}
|
return (
|
||||||
completed={label.completed_issues}
|
<SingleProgressStats
|
||||||
total={label.total_issues}
|
key={`unassigned-${index}`}
|
||||||
onClick={() => {
|
title={
|
||||||
if (filters.labels?.includes(label.label_id ?? ""))
|
<div className="flex items-center gap-2">
|
||||||
setFilters({
|
<div className="h-4 w-4 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
|
||||||
labels: filters?.labels?.filter((l) => l !== label.label_id),
|
<img src="/user.png" height="100%" width="100%" className="rounded-full" alt="User" />
|
||||||
});
|
</div>
|
||||||
else setFilters({ labels: [...(filters?.labels ?? []), label.label_id ?? ""] });
|
<span>No assignee</span>
|
||||||
}}
|
</div>
|
||||||
selected={filters?.labels?.includes(label.label_id ?? "")}
|
}
|
||||||
/>
|
completed={assignee.completed_issues}
|
||||||
))}
|
total={assignee.total_issues}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col items-center justify-center gap-2 h-full">
|
||||||
|
<div className="flex items-center justify-center h-20 w-20 bg-custom-background-80 rounded-full">
|
||||||
|
<Image src={emptyMembers} className="h-12 w-12" alt="empty members" />
|
||||||
|
</div>
|
||||||
|
<h6 className="text-base text-custom-text-300">No assignees yet</h6>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</Tab.Panel>
|
</Tab.Panel>
|
||||||
<Tab.Panel as="div" className="w-full space-y-1">
|
<Tab.Panel as="div" className="flex flex-col gap-1.5 pt-3.5 w-full h-44 overflow-y-auto">
|
||||||
|
{distribution.labels.length > 0 ? (
|
||||||
|
distribution.labels.map((label, index) => (
|
||||||
|
<SingleProgressStats
|
||||||
|
key={label.label_id ?? `no-label-${index}`}
|
||||||
|
title={
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span
|
||||||
|
className="block h-3 w-3 rounded-full"
|
||||||
|
style={{
|
||||||
|
backgroundColor: label.color ?? "transparent",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span className="text-xs">{label.label_name ?? "No labels"}</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
completed={label.completed_issues}
|
||||||
|
total={label.total_issues}
|
||||||
|
{...(!isPeekModuleDetails && {
|
||||||
|
onClick: () => {
|
||||||
|
if (filters.labels?.includes(label.label_id ?? ""))
|
||||||
|
setFilters({
|
||||||
|
labels: filters?.labels?.filter((l) => l !== label.label_id),
|
||||||
|
});
|
||||||
|
else setFilters({ labels: [...(filters?.labels ?? []), label.label_id ?? ""] });
|
||||||
|
},
|
||||||
|
selected: filters?.labels?.includes(label.label_id ?? ""),
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col items-center justify-center gap-2 h-full">
|
||||||
|
<div className="flex items-center justify-center h-20 w-20 bg-custom-background-80 rounded-full">
|
||||||
|
<Image src={emptyLabel} className="h-12 w-12" alt="empty label" />
|
||||||
|
</div>
|
||||||
|
<h6 className="text-base text-custom-text-300">No labels yet</h6>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Tab.Panel>
|
||||||
|
<Tab.Panel as="div" className="flex flex-col gap-1.5 pt-3.5 w-full h-44 overflow-y-auto">
|
||||||
{Object.keys(groupedIssues).map((group, index) => (
|
{Object.keys(groupedIssues).map((group, index) => (
|
||||||
<SingleProgressStats
|
<SingleProgressStats
|
||||||
key={index}
|
key={index}
|
||||||
title={
|
title={
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<span
|
<StateGroupIcon stateGroup={group as TStateGroups} />
|
||||||
className="block h-3 w-3 rounded-full "
|
|
||||||
style={{
|
|
||||||
backgroundColor: STATE_GROUP_COLORS[group as TStateGroups],
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<span className="text-xs capitalize">{group}</span>
|
<span className="text-xs capitalize">{group}</span>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
import { ProgressBar } from "@plane/ui";
|
import { CircularProgressIndicator } from "@plane/ui";
|
||||||
|
|
||||||
type TSingleProgressStatsProps = {
|
type TSingleProgressStatsProps = {
|
||||||
title: any;
|
title: any;
|
||||||
@ -27,7 +27,7 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
|
|||||||
<div className="flex w-1/2 items-center justify-end gap-1 px-2">
|
<div className="flex w-1/2 items-center justify-end gap-1 px-2">
|
||||||
<div className="flex h-5 items-center justify-center gap-1">
|
<div className="flex h-5 items-center justify-center gap-1">
|
||||||
<span className="h-4 w-4">
|
<span className="h-4 w-4">
|
||||||
<ProgressBar value={completed} maxValue={total} />
|
<CircularProgressIndicator percentage={(completed / total) * 100} size={14} strokeWidth={2} />
|
||||||
</span>
|
</span>
|
||||||
<span className="w-8 text-right">
|
<span className="w-8 text-right">
|
||||||
{isNaN(Math.floor((completed / total) * 100)) ? "0" : Math.floor((completed / total) * 100)}%
|
{isNaN(Math.floor((completed / total) * 100)) ? "0" : Math.floor((completed / total) * 100)}%
|
||||||
|
@ -1,25 +1,28 @@
|
|||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { observer } from "mobx-react-lite";
|
import { observer } from "mobx-react-lite";
|
||||||
import { Plus } from "lucide-react";
|
import { GanttChart, LayoutGrid, List, Plus } from "lucide-react";
|
||||||
// mobx store
|
// mobx store
|
||||||
import { useMobxStore } from "lib/mobx/store-provider";
|
import { useMobxStore } from "lib/mobx/store-provider";
|
||||||
// hooks
|
// hooks
|
||||||
import useLocalStorage from "hooks/use-local-storage";
|
import useLocalStorage from "hooks/use-local-storage";
|
||||||
// ui
|
// ui
|
||||||
import { Breadcrumbs, BreadcrumbItem, Button, Tooltip } from "@plane/ui";
|
import { Breadcrumbs, BreadcrumbItem, Button, Tooltip } from "@plane/ui";
|
||||||
import { Icon } from "components/ui";
|
|
||||||
// helper
|
// helper
|
||||||
import { replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helper";
|
import { replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helper";
|
||||||
|
|
||||||
const moduleViewOptions: { type: "grid" | "gantt_chart"; icon: any }[] = [
|
const moduleViewOptions: { type: "list" | "grid" | "gantt_chart"; icon: any }[] = [
|
||||||
{
|
{
|
||||||
type: "gantt_chart",
|
type: "list",
|
||||||
icon: "view_timeline",
|
icon: List,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "grid",
|
type: "grid",
|
||||||
icon: "table_rows",
|
icon: LayoutGrid,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "gantt_chart",
|
||||||
|
icon: GanttChart,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -67,7 +70,7 @@ export const ModulesListHeader: React.FC = observer(() => {
|
|||||||
}`}
|
}`}
|
||||||
onClick={() => setModulesView(option.type)}
|
onClick={() => setModulesView(option.type)}
|
||||||
>
|
>
|
||||||
<Icon iconName={option.icon} className={`!text-base ${option.type === "grid" ? "rotate-90" : ""}`} />
|
<option.icon className="h-3.5 w-3.5" />
|
||||||
</button>
|
</button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
))}
|
))}
|
||||||
|
@ -7,3 +7,5 @@ export * from "./modal";
|
|||||||
export * from "./modules-list-view";
|
export * from "./modules-list-view";
|
||||||
export * from "./sidebar";
|
export * from "./sidebar";
|
||||||
export * from "./module-card-item";
|
export * from "./module-card-item";
|
||||||
|
export * from "./module-list-item";
|
||||||
|
export * from "./module-peek-overview";
|
||||||
|
@ -10,14 +10,16 @@ import useToast from "hooks/use-toast";
|
|||||||
import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
|
import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
|
||||||
// ui
|
// ui
|
||||||
import { AssigneesList } from "components/ui";
|
import { AssigneesList } from "components/ui";
|
||||||
import { CustomMenu, Tooltip } from "@plane/ui";
|
import { CustomMenu, LayersIcon, Tooltip } from "@plane/ui";
|
||||||
// icons
|
// icons
|
||||||
import { CalendarDays, LinkIcon, Pencil, Star, Target, Trash2 } from "lucide-react";
|
import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
|
||||||
// helpers
|
// helpers
|
||||||
import { copyUrlToClipboard, truncateText } from "helpers/string.helper";
|
import { copyUrlToClipboard } from "helpers/string.helper";
|
||||||
import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
|
import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper";
|
||||||
// types
|
// types
|
||||||
import { IModule } from "types";
|
import { IModule } from "types";
|
||||||
|
// constants
|
||||||
|
import { MODULE_STATUS } from "constants/module";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
module: IModule;
|
module: IModule;
|
||||||
@ -72,9 +74,32 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const openModuleOverview = () => {
|
||||||
|
const { query } = router;
|
||||||
|
|
||||||
|
router.push({
|
||||||
|
pathname: router.pathname,
|
||||||
|
query: { ...query, peekModule: module.id },
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const endDate = new Date(module.target_date ?? "");
|
const endDate = new Date(module.target_date ?? "");
|
||||||
const startDate = new Date(module.start_date ?? "");
|
const startDate = new Date(module.start_date ?? "");
|
||||||
const lastUpdated = new Date(module.updated_at ?? "");
|
|
||||||
|
const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
|
||||||
|
|
||||||
|
const moduleStatus = MODULE_STATUS.find((status) => status.value === module.status);
|
||||||
|
|
||||||
|
const issueCount =
|
||||||
|
module.completed_issues && module.total_issues
|
||||||
|
? module.total_issues === 0
|
||||||
|
? "0 Issue"
|
||||||
|
: module.total_issues === module.completed_issues
|
||||||
|
? module.total_issues > 1
|
||||||
|
? `${module.total_issues} Issues`
|
||||||
|
: `${module.total_issues} Issue`
|
||||||
|
: `${module.completed_issues}/${module.total_issues} Issues`
|
||||||
|
: "0 Issue";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -88,96 +113,142 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<DeleteModuleModal data={module} isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} />
|
<DeleteModuleModal data={module} isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} />
|
||||||
<div className="flex flex-col divide-y divide-custom-border-200 overflow-hidden rounded-[10px] border border-custom-border-200 bg-custom-background-100 text-xs">
|
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
|
||||||
<div className="p-4">
|
<a className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px] text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md">
|
||||||
<div className="flex w-full flex-col gap-5">
|
<div>
|
||||||
<div className="flex items-start justify-between gap-2">
|
<div className="flex items-center justify-between gap-2">
|
||||||
<Tooltip tooltipContent={module.name} position="top-left">
|
<Tooltip tooltipContent={module.name} position="auto">
|
||||||
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
|
<span className="text-base font-medium truncate">{module.name}</span>
|
||||||
<a className="w-auto max-w-[calc(100%-9rem)]">
|
|
||||||
<h3 className="truncate break-words text-lg font-semibold text-custom-text-100">
|
|
||||||
{truncateText(module.name, 75)}
|
|
||||||
</h3>
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{moduleStatus && (
|
||||||
|
<span
|
||||||
|
className={`flex items-center justify-center text-xs h-6 w-20 rounded-sm ${moduleStatus.textColor} ${moduleStatus.bgColor}`}
|
||||||
|
>
|
||||||
|
{moduleStatus.label}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
openModuleOverview();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Info className="h-4 w-4 text-custom-text-400" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex flex-col gap-3">
|
||||||
<div className="mr-2 flex whitespace-nowrap rounded bg-custom-background-90 px-2.5 py-2 text-custom-text-200">
|
<div className="flex items-center justify-between">
|
||||||
<span className="capitalize">{module?.status?.replace("-", " ")}</span>
|
<div className="flex items-center gap-1.5 text-custom-text-200">
|
||||||
|
<LayersIcon className="h-4 w-4 text-custom-text-300" />
|
||||||
|
<span className="text-xs text-custom-text-300">{issueCount}</span>
|
||||||
|
</div>
|
||||||
|
{module.members_detail.length > 0 && (
|
||||||
|
<Tooltip tooltipContent={`${module.members_detail.length} Members`}>
|
||||||
|
<div className="flex items-center gap-1 cursor-default">
|
||||||
|
<AssigneesList users={module.members_detail} length={3} />
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Tooltip
|
||||||
|
tooltipContent={isNaN(completionPercentage) ? "0" : `${completionPercentage.toFixed(0)}%`}
|
||||||
|
position="top-left"
|
||||||
|
>
|
||||||
|
<div className="flex items-center w-full">
|
||||||
|
<div
|
||||||
|
className="bar relative h-1.5 w-full rounded bg-custom-background-90"
|
||||||
|
style={{
|
||||||
|
boxShadow: "1px 1px 4px 0px rgba(161, 169, 191, 0.35) inset",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 h-1.5 rounded bg-blue-600 duration-300"
|
||||||
|
style={{
|
||||||
|
width: `${isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-xs text-custom-text-300">
|
||||||
|
{areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
|
||||||
|
{areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
|
||||||
|
</span>
|
||||||
|
<div className="flex items-center gap-1.5 z-10">
|
||||||
{module.is_favorite ? (
|
{module.is_favorite ? (
|
||||||
<button type="button" onClick={handleRemoveFromFavorites}>
|
<button
|
||||||
<Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
|
type="button"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
handleRemoveFromFavorites();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Star className="h-3.5 w-3.5 text-amber-500 fill-current" />
|
||||||
</button>
|
</button>
|
||||||
) : (
|
) : (
|
||||||
<button type="button" onClick={handleAddToFavorites}>
|
<button
|
||||||
<Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
|
type="button"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
handleAddToFavorites();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Star className="h-3.5 w-3.5 text-custom-text-200" />
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
<CustomMenu width="auto" ellipsis className="z-10">
|
||||||
<CustomMenu width="auto" verticalEllipsis placement="bottom-end">
|
<CustomMenu.MenuItem
|
||||||
<CustomMenu.MenuItem onClick={handleCopyText}>
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
setEditModuleModal(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
<span className="flex items-center justify-start gap-2">
|
<span className="flex items-center justify-start gap-2">
|
||||||
<LinkIcon className="h-3 w-3" strokeWidth={2} />
|
<Pencil className="h-3 w-3" />
|
||||||
<span>Copy link</span>
|
|
||||||
</span>
|
|
||||||
</CustomMenu.MenuItem>
|
|
||||||
<CustomMenu.MenuItem onClick={() => setEditModuleModal(true)}>
|
|
||||||
<span className="flex items-center justify-start gap-2">
|
|
||||||
<Pencil className="h-3 w-3" strokeWidth={2} />
|
|
||||||
<span>Edit module</span>
|
<span>Edit module</span>
|
||||||
</span>
|
</span>
|
||||||
</CustomMenu.MenuItem>
|
</CustomMenu.MenuItem>
|
||||||
<CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
|
<CustomMenu.MenuItem
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
setModuleDeleteModal(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
<span className="flex items-center justify-start gap-2">
|
<span className="flex items-center justify-start gap-2">
|
||||||
<Trash2 className="h-3 w-3" strokeWidth={2} />
|
<Trash2 className="h-3 w-3" />
|
||||||
<span>Delete module</span>
|
<span>Delete module</span>
|
||||||
</span>
|
</span>
|
||||||
</CustomMenu.MenuItem>
|
</CustomMenu.MenuItem>
|
||||||
|
<CustomMenu.MenuItem
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
handleCopyText();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="flex items-center justify-start gap-2">
|
||||||
|
<LinkIcon className="h-3 w-3" />
|
||||||
|
<span>Copy module link</span>
|
||||||
|
</span>
|
||||||
|
</CustomMenu.MenuItem>
|
||||||
</CustomMenu>
|
</CustomMenu>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-2 gap-2 text-custom-text-200">
|
|
||||||
<div className="flex items-start gap-1">
|
|
||||||
<CalendarDays className="h-4 w-4" />
|
|
||||||
<span>Start:</span>
|
|
||||||
<span>{renderShortDateWithYearFormat(startDate, "Not set")}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-start gap-1">
|
|
||||||
<Target className="h-4 w-4" />
|
|
||||||
<span>End:</span>
|
|
||||||
<span>{renderShortDateWithYearFormat(endDate, "Not set")}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
<div className="flex h-20 flex-col items-end bg-custom-background-80">
|
</Link>
|
||||||
<div className="flex w-full items-center justify-between gap-2 justify-self-end p-4 text-custom-text-200">
|
|
||||||
<span>Progress</span>
|
|
||||||
<div className="bar relative h-1 w-full rounded bg-custom-background-90">
|
|
||||||
<div
|
|
||||||
className="absolute top-0 left-0 h-1 rounded bg-green-500 duration-300"
|
|
||||||
style={{
|
|
||||||
width: `${isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%`,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<span>{isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%</span>
|
|
||||||
</div>
|
|
||||||
<div className="item-center flex h-full w-full justify-between px-4 pb-4 text-custom-text-200">
|
|
||||||
<p>
|
|
||||||
Last updated:
|
|
||||||
<span className="font-medium">{renderShortDateWithYearFormat(lastUpdated)}</span>
|
|
||||||
</p>
|
|
||||||
{module.members_detail.length > 0 && (
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<AssigneesList users={module.members_detail} length={4} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
242
web/components/modules/module-list-item.tsx
Normal file
242
web/components/modules/module-list-item.tsx
Normal file
@ -0,0 +1,242 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
import { observer } from "mobx-react-lite";
|
||||||
|
// mobx store
|
||||||
|
import { useMobxStore } from "lib/mobx/store-provider";
|
||||||
|
// hooks
|
||||||
|
import useToast from "hooks/use-toast";
|
||||||
|
// components
|
||||||
|
import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
|
||||||
|
// ui
|
||||||
|
import { AssigneesList } from "components/ui";
|
||||||
|
import { CircularProgressIndicator, CustomMenu, Tooltip } from "@plane/ui";
|
||||||
|
// icons
|
||||||
|
import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
|
||||||
|
// helpers
|
||||||
|
import { copyUrlToClipboard } from "helpers/string.helper";
|
||||||
|
import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper";
|
||||||
|
// types
|
||||||
|
import { IModule } from "types";
|
||||||
|
// constants
|
||||||
|
import { MODULE_STATUS } from "constants/module";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
module: IModule;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ModuleListItem: React.FC<Props> = observer((props) => {
|
||||||
|
const { module } = props;
|
||||||
|
|
||||||
|
const [editModuleModal, setEditModuleModal] = useState(false);
|
||||||
|
const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const { workspaceSlug, projectId } = router.query;
|
||||||
|
|
||||||
|
const { setToastAlert } = useToast();
|
||||||
|
|
||||||
|
const { module: moduleStore } = useMobxStore();
|
||||||
|
|
||||||
|
const completionPercentage = ((module.completed_issues + module.cancelled_issues) / module.total_issues) * 100;
|
||||||
|
|
||||||
|
const handleAddToFavorites = () => {
|
||||||
|
if (!workspaceSlug || !projectId) return;
|
||||||
|
|
||||||
|
moduleStore.addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => {
|
||||||
|
setToastAlert({
|
||||||
|
type: "error",
|
||||||
|
title: "Error!",
|
||||||
|
message: "Couldn't add the module to favorites. Please try again.",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveFromFavorites = () => {
|
||||||
|
if (!workspaceSlug || !projectId) return;
|
||||||
|
|
||||||
|
moduleStore.removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => {
|
||||||
|
setToastAlert({
|
||||||
|
type: "error",
|
||||||
|
title: "Error!",
|
||||||
|
message: "Couldn't remove the module from favorites. Please try again.",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCopyText = () => {
|
||||||
|
copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${module.id}`).then(() => {
|
||||||
|
setToastAlert({
|
||||||
|
type: "success",
|
||||||
|
title: "Link Copied!",
|
||||||
|
message: "Module link copied to clipboard.",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const endDate = new Date(module.target_date ?? "");
|
||||||
|
const startDate = new Date(module.start_date ?? "");
|
||||||
|
|
||||||
|
const renderDate = module.start_date || module.target_date;
|
||||||
|
|
||||||
|
const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
|
||||||
|
|
||||||
|
const moduleStatus = MODULE_STATUS.find((status) => status.value === module.status);
|
||||||
|
|
||||||
|
const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);
|
||||||
|
|
||||||
|
const completedModuleCheck = module.status === "completed" && module.total_issues - module.completed_issues;
|
||||||
|
|
||||||
|
const openModuleOverview = () => {
|
||||||
|
const { query } = router;
|
||||||
|
|
||||||
|
router.push({
|
||||||
|
pathname: router.pathname,
|
||||||
|
query: { ...query, peekModule: module.id },
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{workspaceSlug && projectId && (
|
||||||
|
<CreateUpdateModuleModal
|
||||||
|
isOpen={editModuleModal}
|
||||||
|
onClose={() => setEditModuleModal(false)}
|
||||||
|
data={module}
|
||||||
|
projectId={projectId.toString()}
|
||||||
|
workspaceSlug={workspaceSlug.toString()}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<DeleteModuleModal data={module} isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} />
|
||||||
|
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
|
||||||
|
<a className="group flex items-center justify-between gap-5 px-10 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
|
||||||
|
<div className="flex items-center gap-3 w-full truncate">
|
||||||
|
<div className="flex items-center gap-4 truncate">
|
||||||
|
<span className="flex-shrink-0">
|
||||||
|
<CircularProgressIndicator size={38} percentage={progress}>
|
||||||
|
{completedModuleCheck ? (
|
||||||
|
<span className="text-sm text-custom-primary-100">{`!`}</span>
|
||||||
|
) : progress === 100 ? (
|
||||||
|
<Check className="h-3 w-3 text-custom-primary-100 stroke-[2]" />
|
||||||
|
) : (
|
||||||
|
<span className="text-xs text-custom-text-300">{`${progress}%`}</span>
|
||||||
|
)}
|
||||||
|
</CircularProgressIndicator>
|
||||||
|
</span>
|
||||||
|
<Tooltip tooltipContent={module.name} position="auto">
|
||||||
|
<span className="text-base font-medium truncate">{module.name}</span>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
openModuleOverview();
|
||||||
|
}}
|
||||||
|
className="flex-shrink-0 hidden group-hover:flex z-10"
|
||||||
|
>
|
||||||
|
<Info className="h-4 w-4 text-custom-text-400" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2.5 justify-end w-full md:w-auto md:flex-shrink-0 ">
|
||||||
|
<div className="flex items-center justify-center">
|
||||||
|
{moduleStatus && (
|
||||||
|
<span
|
||||||
|
className={`flex items-center justify-center text-xs h-6 w-20 rounded-sm ${moduleStatus.textColor} ${moduleStatus.bgColor}`}
|
||||||
|
>
|
||||||
|
{moduleStatus.label}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{renderDate && (
|
||||||
|
<span className="flex items-center justify-center gap-2 w-28 text-xs text-custom-text-300">
|
||||||
|
{areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
|
||||||
|
{" - "}
|
||||||
|
{areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Tooltip tooltipContent={`${module.members_detail.length} Members`}>
|
||||||
|
<div className="flex items-center justify-center gap-1 cursor-default w-16">
|
||||||
|
{module.members_detail.length > 0 ? (
|
||||||
|
<AssigneesList users={module.members_detail} length={2} />
|
||||||
|
) : (
|
||||||
|
<span className="flex items-end justify-center h-5 w-5 bg-custom-background-80 rounded-full border border-dashed border-custom-text-400">
|
||||||
|
<User2 className="h-4 w-4 text-custom-text-400" />
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
|
{module.is_favorite ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
handleRemoveFromFavorites();
|
||||||
|
}}
|
||||||
|
className="z-[1]"
|
||||||
|
>
|
||||||
|
<Star className="h-3.5 w-3.5 text-amber-500 fill-current" />
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
handleAddToFavorites();
|
||||||
|
}}
|
||||||
|
className="z-[1]"
|
||||||
|
>
|
||||||
|
<Star className="h-3.5 w-3.5 text-custom-text-300" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<CustomMenu width="auto" verticalEllipsis buttonClassName="z-[1]">
|
||||||
|
<CustomMenu.MenuItem
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
setEditModuleModal(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="flex items-center justify-start gap-2">
|
||||||
|
<Pencil className="h-3 w-3" />
|
||||||
|
<span>Edit module</span>
|
||||||
|
</span>
|
||||||
|
</CustomMenu.MenuItem>
|
||||||
|
<CustomMenu.MenuItem
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
setModuleDeleteModal(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="flex items-center justify-start gap-2">
|
||||||
|
<Trash2 className="h-3 w-3" />
|
||||||
|
<span>Delete module</span>
|
||||||
|
</span>
|
||||||
|
</CustomMenu.MenuItem>
|
||||||
|
<CustomMenu.MenuItem
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
handleCopyText();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="flex items-center justify-start gap-2">
|
||||||
|
<LinkIcon className="h-3 w-3" />
|
||||||
|
<span>Copy module link</span>
|
||||||
|
</span>
|
||||||
|
</CustomMenu.MenuItem>
|
||||||
|
</CustomMenu>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
55
web/components/modules/module-peek-overview.tsx
Normal file
55
web/components/modules/module-peek-overview.tsx
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
import React, { useEffect } from "react";
|
||||||
|
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
|
||||||
|
// mobx
|
||||||
|
import { observer } from "mobx-react-lite";
|
||||||
|
import { useMobxStore } from "lib/mobx/store-provider";
|
||||||
|
// components
|
||||||
|
import { ModuleDetailsSidebar } from "./sidebar";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
projectId: string;
|
||||||
|
workspaceSlug: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, workspaceSlug }) => {
|
||||||
|
const router = useRouter();
|
||||||
|
const { peekModule } = router.query;
|
||||||
|
|
||||||
|
const ref = React.useRef(null);
|
||||||
|
|
||||||
|
const { module: moduleStore } = useMobxStore();
|
||||||
|
const { fetchModuleDetails } = moduleStore;
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
delete router.query.peekModule;
|
||||||
|
router.push({
|
||||||
|
pathname: router.pathname,
|
||||||
|
query: { ...router.query },
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!peekModule) return;
|
||||||
|
|
||||||
|
fetchModuleDetails(workspaceSlug, projectId, peekModule.toString());
|
||||||
|
}, [fetchModuleDetails, peekModule, projectId, workspaceSlug]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{peekModule && (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className="flex flex-col gap-3.5 h-full w-[24rem] z-10 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 flex-shrink-0"
|
||||||
|
style={{
|
||||||
|
boxShadow:
|
||||||
|
"0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ModuleDetailsSidebar moduleId={peekModule?.toString() ?? ""} handleClose={handleClose} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
@ -1,3 +1,4 @@
|
|||||||
|
import { useRouter } from "next/router";
|
||||||
import { observer } from "mobx-react-lite";
|
import { observer } from "mobx-react-lite";
|
||||||
import { Plus } from "lucide-react";
|
import { Plus } from "lucide-react";
|
||||||
// mobx store
|
// mobx store
|
||||||
@ -5,7 +6,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
|
|||||||
// hooks
|
// hooks
|
||||||
import useLocalStorage from "hooks/use-local-storage";
|
import useLocalStorage from "hooks/use-local-storage";
|
||||||
// components
|
// components
|
||||||
import { ModuleCardItem, ModulesListGanttChartView } from "components/modules";
|
import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "components/modules";
|
||||||
import { EmptyState } from "components/common";
|
import { EmptyState } from "components/common";
|
||||||
// ui
|
// ui
|
||||||
import { Loader } from "@plane/ui";
|
import { Loader } from "@plane/ui";
|
||||||
@ -13,6 +14,9 @@ import { Loader } from "@plane/ui";
|
|||||||
import emptyModule from "public/empty-state/module.svg";
|
import emptyModule from "public/empty-state/module.svg";
|
||||||
|
|
||||||
export const ModulesListView: React.FC = observer(() => {
|
export const ModulesListView: React.FC = observer(() => {
|
||||||
|
const router = useRouter();
|
||||||
|
const { workspaceSlug, projectId, peekModule } = router.query;
|
||||||
|
|
||||||
const { module: moduleStore } = useMobxStore();
|
const { module: moduleStore } = useMobxStore();
|
||||||
|
|
||||||
const { storedValue: modulesView } = useLocalStorage("modules_view", "grid");
|
const { storedValue: modulesView } = useLocalStorage("modules_view", "grid");
|
||||||
@ -22,12 +26,12 @@ export const ModulesListView: React.FC = observer(() => {
|
|||||||
if (!modulesList)
|
if (!modulesList)
|
||||||
return (
|
return (
|
||||||
<Loader className="grid grid-cols-3 gap-4 p-8">
|
<Loader className="grid grid-cols-3 gap-4 p-8">
|
||||||
<Loader.Item height="100px" />
|
<Loader.Item height="176px" />
|
||||||
<Loader.Item height="100px" />
|
<Loader.Item height="176px" />
|
||||||
<Loader.Item height="100px" />
|
<Loader.Item height="176px" />
|
||||||
<Loader.Item height="100px" />
|
<Loader.Item height="176px" />
|
||||||
<Loader.Item height="100px" />
|
<Loader.Item height="176px" />
|
||||||
<Loader.Item height="100px" />
|
<Loader.Item height="176px" />
|
||||||
</Loader>
|
</Loader>
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -35,12 +39,39 @@ export const ModulesListView: React.FC = observer(() => {
|
|||||||
<>
|
<>
|
||||||
{modulesList.length > 0 ? (
|
{modulesList.length > 0 ? (
|
||||||
<>
|
<>
|
||||||
|
{modulesView === "list" && (
|
||||||
|
<div className="h-full overflow-y-auto">
|
||||||
|
<div className="flex justify-between h-full w-full">
|
||||||
|
<div className="flex flex-col h-full w-full overflow-y-auto">
|
||||||
|
{modulesList.map((module) => (
|
||||||
|
<ModuleListItem key={module.id} module={module} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<ModulePeekOverview
|
||||||
|
projectId={projectId?.toString() ?? ""}
|
||||||
|
workspaceSlug={workspaceSlug?.toString() ?? ""}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
{modulesView === "grid" && (
|
{modulesView === "grid" && (
|
||||||
<div className="h-full overflow-y-auto p-8">
|
<div className="h-full w-full">
|
||||||
<div className="grid grid-cols-1 gap-9 lg:grid-cols-2 xl:grid-cols-3">
|
<div className="flex justify-between h-full w-full">
|
||||||
{modulesList.map((module) => (
|
<div
|
||||||
<ModuleCardItem key={module.id} module={module} />
|
className={`grid grid-cols-1 gap-6 p-8 h-full w-full overflow-y-auto ${
|
||||||
))}
|
peekModule
|
||||||
|
? "lg:grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3"
|
||||||
|
: "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
|
||||||
|
} auto-rows-max transition-all `}
|
||||||
|
>
|
||||||
|
{modulesList.map((module) => (
|
||||||
|
<ModuleCardItem key={module.id} module={module} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<ModulePeekOverview
|
||||||
|
projectId={projectId?.toString() ?? ""}
|
||||||
|
workspaceSlug={workspaceSlug?.toString() ?? ""}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
@ -7,7 +7,7 @@ import { ProjectService } from "services/project";
|
|||||||
import { Avatar } from "components/ui";
|
import { Avatar } from "components/ui";
|
||||||
import { CustomSearchSelect } from "@plane/ui";
|
import { CustomSearchSelect } from "@plane/ui";
|
||||||
// icons
|
// icons
|
||||||
import { UserCircle2 } from "lucide-react";
|
import { ChevronDown, UserCircle2 } from "lucide-react";
|
||||||
// fetch-keys
|
// fetch-keys
|
||||||
import { PROJECT_MEMBERS } from "constants/fetch-keys";
|
import { PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||||
|
|
||||||
@ -36,7 +36,7 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
|
|||||||
query: member.member.display_name,
|
query: member.member.display_name,
|
||||||
content: (
|
content: (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Avatar user={member.member} />
|
<Avatar user={member.member} height="18px" width="18px" />
|
||||||
{member.member.display_name}
|
{member.member.display_name}
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
@ -46,18 +46,27 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-start gap-1">
|
<div className="flex items-center justify-start gap-1">
|
||||||
<div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
|
<div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
|
||||||
<UserCircle2 className="h-5 w-5" />
|
<UserCircle2 className="h-4 w-4" />
|
||||||
<span>Lead</span>
|
<span className="text-base">Lead</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="sm:basis-1/2">
|
<div className="flex items-center w-1/2 rounded-sm">
|
||||||
<CustomSearchSelect
|
<CustomSearchSelect
|
||||||
|
className="w-full rounded-sm"
|
||||||
value={value}
|
value={value}
|
||||||
label={
|
customButtonClassName="rounded-sm"
|
||||||
<div className="flex items-center gap-2">
|
customButton={
|
||||||
{selectedOption && <Avatar user={selectedOption} />}
|
selectedOption ? (
|
||||||
{selectedOption ? selectedOption?.display_name : <span className="text-custom-text-200">No lead</span>}
|
<div className="flex items-center justify-start gap-2 p-0.5 w-full">
|
||||||
</div>
|
<Avatar user={selectedOption} />
|
||||||
|
<span className="text-sm text-custom-text-200">{selectedOption?.display_name}</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="group flex items-center justify-between gap-2 p-1 text-sm text-custom-text-400 w-full">
|
||||||
|
<span>No lead</span>
|
||||||
|
<ChevronDown className="h-3.5 w-3.5 hidden group-hover:flex" />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
options={options}
|
options={options}
|
||||||
maxHeight="md"
|
maxHeight="md"
|
||||||
|
@ -10,6 +10,7 @@ import { ProjectService } from "services/project";
|
|||||||
import { AssigneesList, Avatar } from "components/ui";
|
import { AssigneesList, Avatar } from "components/ui";
|
||||||
import { CustomSearchSelect, UserGroupIcon } from "@plane/ui";
|
import { CustomSearchSelect, UserGroupIcon } from "@plane/ui";
|
||||||
// icons
|
// icons
|
||||||
|
import { ChevronDown } from "lucide-react";
|
||||||
// fetch-keys
|
// fetch-keys
|
||||||
import { PROJECT_MEMBERS } from "constants/fetch-keys";
|
import { PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||||
|
|
||||||
@ -37,7 +38,7 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
|
|||||||
query: member.member.display_name,
|
query: member.member.display_name,
|
||||||
content: (
|
content: (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Avatar user={member.member} />
|
<Avatar user={member.member} height="18px" width="18px" />
|
||||||
{member.member.display_name}
|
{member.member.display_name}
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
@ -45,24 +46,26 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-start gap-1">
|
<div className="flex items-center justify-start gap-1">
|
||||||
<div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
|
<div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
|
||||||
<UserGroupIcon className="h-5 w-5" />
|
<UserGroupIcon className="h-4 w-4" />
|
||||||
<span>Members</span>
|
<span className="text-base">Members</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="sm:basis-1/2">
|
<div className="flex items-center w-1/2 rounded-sm ">
|
||||||
<CustomSearchSelect
|
<CustomSearchSelect
|
||||||
|
className="w-full rounded-sm"
|
||||||
value={value ?? []}
|
value={value ?? []}
|
||||||
label={
|
customButtonClassName="rounded-sm"
|
||||||
<div className="flex items-center gap-2 text-custom-text-200">
|
customButton={
|
||||||
{value && value.length > 0 && Array.isArray(value) ? (
|
value && value.length > 0 && Array.isArray(value) ? (
|
||||||
<div className="flex items-center justify-center gap-2">
|
<div className="flex items-center gap-2 p-0.5 w-full">
|
||||||
<AssigneesList userIds={value} length={3} showLength={false} />
|
<AssigneesList userIds={value} length={2} />
|
||||||
<span className="text-custom-text-200">{value.length} Assignees</span>
|
</div>
|
||||||
</div>
|
) : (
|
||||||
) : (
|
<div className="group flex items-center justify-between gap-2 p-1 text-sm text-custom-text-400 w-full">
|
||||||
"No members"
|
<span>No members</span>
|
||||||
)}
|
<ChevronDown className="h-3.5 w-3.5 hidden group-hover:flex" />
|
||||||
</div>
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
options={options}
|
options={options}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
|
@ -3,8 +3,7 @@ import { useRouter } from "next/router";
|
|||||||
import { observer } from "mobx-react-lite";
|
import { observer } from "mobx-react-lite";
|
||||||
import { mutate } from "swr";
|
import { mutate } from "swr";
|
||||||
import { Controller, useForm } from "react-hook-form";
|
import { Controller, useForm } from "react-hook-form";
|
||||||
import { Disclosure, Popover, Transition } from "@headlessui/react";
|
import { Disclosure, Transition } from "@headlessui/react";
|
||||||
import DatePicker from "react-datepicker";
|
|
||||||
// mobx store
|
// mobx store
|
||||||
import { useMobxStore } from "lib/mobx/store-provider";
|
import { useMobxStore } from "lib/mobx/store-provider";
|
||||||
// services
|
// services
|
||||||
@ -18,22 +17,12 @@ import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
|
|||||||
import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules";
|
import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules";
|
||||||
import ProgressChart from "components/core/sidebar/progress-chart";
|
import ProgressChart from "components/core/sidebar/progress-chart";
|
||||||
// ui
|
// ui
|
||||||
import { CustomSelect, CustomMenu, Loader, ProgressBar } from "@plane/ui";
|
import { CustomMenu, Loader, LayersIcon } from "@plane/ui";
|
||||||
// icon
|
// icon
|
||||||
import {
|
import { AlertCircle, ChevronDown, ChevronRight, Info, LinkIcon, Plus, Trash2 } from "lucide-react";
|
||||||
AlertCircle,
|
|
||||||
CalendarDays,
|
|
||||||
ChevronDown,
|
|
||||||
File,
|
|
||||||
LinkIcon,
|
|
||||||
MoveRight,
|
|
||||||
PieChart,
|
|
||||||
Plus,
|
|
||||||
Trash2,
|
|
||||||
} from "lucide-react";
|
|
||||||
// helpers
|
// helpers
|
||||||
import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
|
import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper";
|
||||||
import { capitalizeFirstLetter, copyUrlToClipboard } from "helpers/string.helper";
|
import { copyUrlToClipboard } from "helpers/string.helper";
|
||||||
// types
|
// types
|
||||||
import { linkDetails, IModule, ModuleLink } from "types";
|
import { linkDetails, IModule, ModuleLink } from "types";
|
||||||
// fetch-keys
|
// fetch-keys
|
||||||
@ -50,8 +39,8 @@ const defaultValues: Partial<IModule> = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
isOpen: boolean;
|
|
||||||
moduleId: string;
|
moduleId: string;
|
||||||
|
handleClose: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
// services
|
// services
|
||||||
@ -59,14 +48,14 @@ const moduleService = new ModuleService();
|
|||||||
|
|
||||||
// TODO: refactor this component
|
// TODO: refactor this component
|
||||||
export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||||
const { isOpen, moduleId } = props;
|
const { moduleId, handleClose } = props;
|
||||||
|
|
||||||
const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
|
const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
|
||||||
const [moduleLinkModal, setModuleLinkModal] = useState(false);
|
const [moduleLinkModal, setModuleLinkModal] = useState(false);
|
||||||
const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<linkDetails | null>(null);
|
const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<linkDetails | null>(null);
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug, projectId } = router.query;
|
const { workspaceSlug, projectId, peekModule } = router.query;
|
||||||
|
|
||||||
const { module: moduleStore, user: userStore } = useMobxStore();
|
const { module: moduleStore, user: userStore } = useMobxStore();
|
||||||
|
|
||||||
@ -77,7 +66,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||||||
|
|
||||||
const { setToastAlert } = useToast();
|
const { setToastAlert } = useToast();
|
||||||
|
|
||||||
const { reset, watch, control } = useForm({
|
const { reset, control } = useForm({
|
||||||
defaultValues,
|
defaultValues,
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -209,12 +198,29 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||||||
: null;
|
: null;
|
||||||
|
|
||||||
const handleEditLink = (link: linkDetails) => {
|
const handleEditLink = (link: linkDetails) => {
|
||||||
|
console.log("link", link);
|
||||||
setSelectedLinkToUpdate(link);
|
setSelectedLinkToUpdate(link);
|
||||||
setModuleLinkModal(true);
|
setModuleLinkModal(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
if (!moduleDetails) return null;
|
if (!moduleDetails) return null;
|
||||||
|
|
||||||
|
const startDate = new Date(moduleDetails.start_date ?? "");
|
||||||
|
const endDate = new Date(moduleDetails.target_date ?? "");
|
||||||
|
|
||||||
|
const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
|
||||||
|
|
||||||
|
const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
|
||||||
|
|
||||||
|
const issueCount =
|
||||||
|
moduleDetails.total_issues === 0
|
||||||
|
? "0 Issue"
|
||||||
|
: moduleDetails.total_issues === moduleDetails.completed_issues
|
||||||
|
? moduleDetails.total_issues > 1
|
||||||
|
? `${moduleDetails.total_issues}`
|
||||||
|
: `${moduleDetails.total_issues}`
|
||||||
|
: `${moduleDetails.completed_issues}/${moduleDetails.total_issues}`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<LinkModal
|
<LinkModal
|
||||||
@ -229,308 +235,160 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||||||
updateIssueLink={handleUpdateLink}
|
updateIssueLink={handleUpdateLink}
|
||||||
/>
|
/>
|
||||||
<DeleteModuleModal isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} data={moduleDetails} />
|
<DeleteModuleModal isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} data={moduleDetails} />
|
||||||
<div
|
{module ? (
|
||||||
className={`fixed top-[66px] ${
|
<>
|
||||||
isOpen ? "right-0" : "-right-[24rem]"
|
<div className="flex items-center justify-between w-full">
|
||||||
} h-full w-[24rem] overflow-y-auto border-l border-custom-border-200 bg-custom-sidebar-background-100 pt-5 pb-10 duration-300`}
|
<div>
|
||||||
>
|
{peekModule && (
|
||||||
{module ? (
|
<button
|
||||||
<>
|
className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-border-300"
|
||||||
<div className="flex flex-col items-start justify-center">
|
onClick={() => handleClose()}
|
||||||
<div className="flex gap-2.5 px-5 text-sm">
|
>
|
||||||
<div className="flex items-center ">
|
<ChevronRight className="h-3 w-3 text-white stroke-2" />
|
||||||
<Controller
|
</button>
|
||||||
control={control}
|
)}
|
||||||
name="status"
|
</div>
|
||||||
render={({ field: { value } }) => (
|
<div className="flex items-center gap-3.5">
|
||||||
<CustomSelect
|
<button onClick={handleCopyText}>
|
||||||
customButton={
|
<LinkIcon className="h-3 w-3 text-custom-text-300" />
|
||||||
<span className="flex cursor-pointer items-center rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2 py-1 text-center text-xs capitalize">
|
</button>
|
||||||
{capitalizeFirstLetter(`${watch("status")}`)}
|
<CustomMenu width="lg" ellipsis>
|
||||||
</span>
|
<CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
|
||||||
}
|
<span className="flex items-center justify-start gap-2">
|
||||||
value={value}
|
<Trash2 className="h-4 w-4" />
|
||||||
onChange={(value: any) => {
|
<span>Delete</span>
|
||||||
submitChanges({ status: value });
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{MODULE_STATUS.map((option) => (
|
|
||||||
<CustomSelect.Option key={option.value} value={option.value}>
|
|
||||||
<span className="text-xs">{option.label}</span>
|
|
||||||
</CustomSelect.Option>
|
|
||||||
))}
|
|
||||||
</CustomSelect>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="relative flex h-full w-52 items-center gap-2 text-sm">
|
|
||||||
<Popover className="flex h-full items-center justify-center rounded-lg">
|
|
||||||
{({}) => (
|
|
||||||
<>
|
|
||||||
<Popover.Button
|
|
||||||
className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2 py-1 text-xs ${
|
|
||||||
moduleDetails.start_date ? "" : "text-custom-text-200"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<CalendarDays className="h-3 w-3" />
|
|
||||||
<span>
|
|
||||||
{renderShortDateWithYearFormat(new Date(`${moduleDetails.start_date}`), "Start date")}
|
|
||||||
</span>
|
|
||||||
</Popover.Button>
|
|
||||||
|
|
||||||
<Transition
|
|
||||||
as={React.Fragment}
|
|
||||||
enter="transition ease-out duration-200"
|
|
||||||
enterFrom="opacity-0 translate-y-1"
|
|
||||||
enterTo="opacity-100 translate-y-0"
|
|
||||||
leave="transition ease-in duration-150"
|
|
||||||
leaveFrom="opacity-100 translate-y-0"
|
|
||||||
leaveTo="opacity-0 translate-y-1"
|
|
||||||
>
|
|
||||||
<Popover.Panel className="absolute top-10 -right-5 z-20 transform overflow-hidden">
|
|
||||||
<DatePicker
|
|
||||||
selected={watch("start_date") ? new Date(`${watch("start_date")}`) : new Date()}
|
|
||||||
onChange={(date) => {
|
|
||||||
submitChanges({
|
|
||||||
start_date: renderDateFormat(date),
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
selectsStart
|
|
||||||
startDate={new Date(`${watch("start_date")}`)}
|
|
||||||
endDate={new Date(`${watch("target_date")}`)}
|
|
||||||
maxDate={new Date(`${watch("target_date")}`)}
|
|
||||||
shouldCloseOnSelect
|
|
||||||
inline
|
|
||||||
/>
|
|
||||||
</Popover.Panel>
|
|
||||||
</Transition>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Popover>
|
|
||||||
<span>
|
|
||||||
<MoveRight className="h-3 w-3 text-custom-text-200" />
|
|
||||||
</span>
|
</span>
|
||||||
<Popover className="flex h-full items-center justify-center rounded-lg">
|
</CustomMenu.MenuItem>
|
||||||
{({}) => (
|
</CustomMenu>
|
||||||
<>
|
</div>
|
||||||
<Popover.Button
|
</div>
|
||||||
className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2 py-1 text-xs ${
|
|
||||||
moduleDetails.target_date ? "" : "text-custom-text-200"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<CalendarDays className="h-3 w-3 " />
|
|
||||||
|
|
||||||
<span>
|
<div className="flex flex-col gap-3">
|
||||||
{renderShortDateWithYearFormat(new Date(`${moduleDetails?.target_date}`), "End date")}
|
<h4 className="text-xl font-semibold break-words w-full text-custom-text-100">{moduleDetails.name}</h4>
|
||||||
</span>
|
<div className="flex items-center gap-5">
|
||||||
</Popover.Button>
|
{moduleStatus && (
|
||||||
|
<span
|
||||||
|
className={`flex items-center cursor-default justify-center text-sm h-6 w-20 rounded-sm ${moduleStatus.textColor} ${moduleStatus.bgColor}`}
|
||||||
|
>
|
||||||
|
{moduleStatus.label}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span className="text-sm text-custom-text-300 font-mediu cursor-default">
|
||||||
|
{areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
|
||||||
|
{areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Transition
|
{moduleDetails.description && (
|
||||||
as={React.Fragment}
|
<span className="whitespace-normal text-sm leading-5 py-2.5 text-custom-text-200 break-words w-full">
|
||||||
enter="transition ease-out duration-200"
|
{moduleDetails.description}
|
||||||
enterFrom="opacity-0 translate-y-1"
|
</span>
|
||||||
enterTo="opacity-100 translate-y-0"
|
)}
|
||||||
leave="transition ease-in duration-150"
|
|
||||||
leaveFrom="opacity-100 translate-y-0"
|
<div className="flex flex-col gap-5 pt-2.5 pb-6">
|
||||||
leaveTo="opacity-0 translate-y-1"
|
<Controller
|
||||||
>
|
control={control}
|
||||||
<Popover.Panel className="absolute top-10 -right-5 z-20 transform overflow-hidden">
|
name="lead"
|
||||||
<DatePicker
|
render={({ field: { value } }) => (
|
||||||
selected={watch("target_date") ? new Date(`${watch("target_date")}`) : new Date()}
|
<SidebarLeadSelect
|
||||||
onChange={(date) => {
|
value={value}
|
||||||
submitChanges({
|
onChange={(val: string) => {
|
||||||
target_date: renderDateFormat(date),
|
submitChanges({ lead: val });
|
||||||
});
|
}}
|
||||||
}}
|
/>
|
||||||
selectsEnd
|
)}
|
||||||
startDate={new Date(`${watch("start_date")}`)}
|
/>
|
||||||
endDate={new Date(`${watch("target_date")}`)}
|
<Controller
|
||||||
minDate={new Date(`${watch("start_date")}`)}
|
control={control}
|
||||||
shouldCloseOnSelect
|
name="members_list"
|
||||||
inline
|
render={({ field: { value } }) => (
|
||||||
/>
|
<SidebarMembersSelect
|
||||||
</Popover.Panel>
|
value={value}
|
||||||
</Transition>
|
onChange={(val: string[]) => {
|
||||||
</>
|
submitChanges({ members_list: val });
|
||||||
)}
|
}}
|
||||||
</Popover>
|
/>
|
||||||
</div>
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-start gap-1">
|
||||||
|
<div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
|
||||||
|
<LayersIcon className="h-4 w-4" />
|
||||||
|
<span className="text-base">Issues</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex items-center w-1/2">
|
||||||
<div className="flex w-full flex-col gap-6 px-6 py-6">
|
<span className="text-sm text-custom-text-300 px-1.5">{issueCount}</span>
|
||||||
<div className="flex w-full flex-col items-start justify-start gap-2">
|
|
||||||
<div className="flex w-full items-start justify-between gap-2 ">
|
|
||||||
<div className="max-w-[300px]">
|
|
||||||
<h4 className="text-xl font-semibold break-words w-full text-custom-text-100">
|
|
||||||
{moduleDetails.name}
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
<CustomMenu width="lg" ellipsis>
|
|
||||||
<CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
|
|
||||||
<span className="flex items-center justify-start gap-2">
|
|
||||||
<Trash2 className="h-4 w-4" />
|
|
||||||
<span>Delete</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 link</span>
|
|
||||||
</span>
|
|
||||||
</CustomMenu.MenuItem>
|
|
||||||
</CustomMenu>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span className="whitespace-normal text-sm leading-5 text-custom-text-200 break-words w-full">
|
|
||||||
{moduleDetails.description}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col gap-4 text-sm">
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="lead"
|
|
||||||
render={({ field: { value } }) => (
|
|
||||||
<SidebarLeadSelect
|
|
||||||
value={value}
|
|
||||||
onChange={(val: string) => {
|
|
||||||
submitChanges({ lead: val });
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="members_list"
|
|
||||||
render={({ field: { value } }) => (
|
|
||||||
<SidebarMembersSelect
|
|
||||||
value={value}
|
|
||||||
onChange={(val: string[]) => {
|
|
||||||
submitChanges({ members_list: val });
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-start gap-1">
|
|
||||||
<div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
|
|
||||||
<PieChart className="h-5 w-5" />
|
|
||||||
<span>Progress</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2.5 text-custom-text-200">
|
|
||||||
<span className="h-4 w-4">
|
|
||||||
<ProgressBar value={moduleDetails.completed_issues} maxValue={moduleDetails.total_issues} />
|
|
||||||
</span>
|
|
||||||
{moduleDetails.completed_issues}/{moduleDetails.total_issues}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 p-6">
|
<div className="flex flex-col">
|
||||||
<Disclosure defaultOpen>
|
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 py-5 px-1.5">
|
||||||
|
<Disclosure>
|
||||||
{({ open }) => (
|
{({ open }) => (
|
||||||
<div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
|
<div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
|
||||||
<div className="flex w-full items-center justify-between gap-2 ">
|
<div className="flex w-full items-center justify-between gap-2">
|
||||||
<div className="flex items-center justify-start gap-2 text-sm">
|
<div className="flex items-center justify-start gap-2 text-sm">
|
||||||
<span className="font-medium text-custom-text-200">Progress</span>
|
<span className="font-medium text-custom-text-200">Progress</span>
|
||||||
{!open && progressPercentage ? (
|
</div>
|
||||||
<span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
|
|
||||||
|
<div className="flex items-center gap-2.5">
|
||||||
|
{progressPercentage ? (
|
||||||
|
<span className="flex items-center justify-center h-5 w-9 rounded text-xs font-medium text-amber-500 bg-amber-50">
|
||||||
{progressPercentage ? `${progressPercentage}%` : ""}
|
{progressPercentage ? `${progressPercentage}%` : ""}
|
||||||
</span>
|
</span>
|
||||||
) : (
|
) : (
|
||||||
""
|
""
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
|
|
||||||
{isStartValid && isEndValid ? (
|
|
||||||
<Disclosure.Button className="p-1">
|
|
||||||
<ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
|
|
||||||
</Disclosure.Button>
|
|
||||||
) : (
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<AlertCircle height={14} width={14} className="text-custom-text-200" />
|
|
||||||
<span className="text-xs italic text-custom-text-200">
|
|
||||||
Invalid date. Please enter valid date.
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<Transition show={open}>
|
|
||||||
<Disclosure.Panel>
|
|
||||||
{isStartValid && isEndValid ? (
|
{isStartValid && isEndValid ? (
|
||||||
<div className=" h-full w-full py-4">
|
<Disclosure.Button className="p-1.5">
|
||||||
<div className="flex items-start justify-between gap-4 py-2 text-xs">
|
<ChevronDown
|
||||||
<div className="flex items-center gap-1">
|
className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
|
||||||
<span>
|
aria-hidden="true"
|
||||||
<File className="h-3 w-3 text-custom-text-200" />
|
/>
|
||||||
</span>
|
</Disclosure.Button>
|
||||||
<span>
|
|
||||||
Pending Issues -{" "}
|
|
||||||
{moduleDetails.total_issues -
|
|
||||||
(moduleDetails.completed_issues + moduleDetails.cancelled_issues)}{" "}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-3 text-custom-text-100">
|
|
||||||
<div className="flex items-center justify-center gap-1">
|
|
||||||
<span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
|
|
||||||
<span>Ideal</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-center gap-1">
|
|
||||||
<span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
|
|
||||||
<span>Current</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="relative h-40 w-80">
|
|
||||||
<ProgressChart
|
|
||||||
distribution={moduleDetails.distribution.completion_chart}
|
|
||||||
startDate={moduleDetails.start_date ?? ""}
|
|
||||||
endDate={moduleDetails.target_date ?? ""}
|
|
||||||
totalIssues={moduleDetails.total_issues}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
) : (
|
||||||
""
|
<div className="flex items-center gap-1">
|
||||||
|
<AlertCircle height={14} width={14} className="text-custom-text-200" />
|
||||||
|
<span className="text-xs italic text-custom-text-200">
|
||||||
|
Invalid date. Please enter valid date.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</Disclosure.Panel>
|
|
||||||
</Transition>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Disclosure>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 p-6">
|
|
||||||
<Disclosure defaultOpen>
|
|
||||||
{({ open }) => (
|
|
||||||
<div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
|
|
||||||
<div className="flex w-full items-center justify-between gap-2 ">
|
|
||||||
<div className="flex items-center justify-start gap-2 text-sm">
|
|
||||||
<span className="font-medium text-custom-text-200">Other Information</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{moduleDetails.total_issues > 0 ? (
|
|
||||||
<Disclosure.Button className="p-1">
|
|
||||||
<ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
|
|
||||||
</Disclosure.Button>
|
|
||||||
) : (
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<AlertCircle height={14} width={14} className="text-custom-text-200" />
|
|
||||||
<span className="text-xs italic text-custom-text-200">
|
|
||||||
No issues found. Please add issue.
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<Transition show={open}>
|
<Transition show={open}>
|
||||||
<Disclosure.Panel>
|
<Disclosure.Panel>
|
||||||
{moduleDetails.total_issues > 0 ? (
|
<div className="flex flex-col gap-3">
|
||||||
<>
|
{isStartValid && isEndValid ? (
|
||||||
<div className=" h-full w-full py-4">
|
<div className=" h-full w-full pt-4">
|
||||||
|
<div className="flex items-start gap-4 py-2 text-xs">
|
||||||
|
<div className="flex items-center gap-3 text-custom-text-100">
|
||||||
|
<div className="flex items-center justify-center gap-1">
|
||||||
|
<span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
|
||||||
|
<span>Ideal</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-center gap-1">
|
||||||
|
<span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
|
||||||
|
<span>Current</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="relative h-40 w-80">
|
||||||
|
<ProgressChart
|
||||||
|
distribution={moduleDetails.distribution.completion_chart}
|
||||||
|
startDate={moduleDetails.start_date ?? ""}
|
||||||
|
endDate={moduleDetails.target_date ?? ""}
|
||||||
|
totalIssues={moduleDetails.total_issues}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
""
|
||||||
|
)}
|
||||||
|
{moduleDetails.total_issues > 0 && (
|
||||||
|
<div className="h-full w-full pt-5 border-t border-custom-border-200">
|
||||||
<SidebarProgressStats
|
<SidebarProgressStats
|
||||||
distribution={moduleDetails.distribution}
|
distribution={moduleDetails.distribution}
|
||||||
groupedIssues={{
|
groupedIssues={{
|
||||||
@ -542,12 +400,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||||||
}}
|
}}
|
||||||
totalIssues={moduleDetails.total_issues}
|
totalIssues={moduleDetails.total_issues}
|
||||||
module={moduleDetails}
|
module={moduleDetails}
|
||||||
|
isPeekModuleDetails={Boolean(peekModule)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</>
|
)}
|
||||||
) : (
|
</div>
|
||||||
""
|
|
||||||
)}
|
|
||||||
</Disclosure.Panel>
|
</Disclosure.Panel>
|
||||||
</Transition>
|
</Transition>
|
||||||
</div>
|
</div>
|
||||||
@ -555,42 +412,83 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||||||
</Disclosure>
|
</Disclosure>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex w-full flex-col border-t border-custom-border-200 px-6 pt-6 pb-10 text-xs">
|
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 py-5 px-1.5">
|
||||||
<div className="flex w-full items-center justify-between">
|
<Disclosure>
|
||||||
<h4 className="text-sm font-medium text-custom-text-200">Links</h4>
|
{({ open }) => (
|
||||||
<button
|
<div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
|
||||||
className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90"
|
<div className="flex w-full items-center justify-between gap-2">
|
||||||
onClick={() => setModuleLinkModal(true)}
|
<div className="flex items-center justify-start gap-2 text-sm">
|
||||||
>
|
<span className="font-medium text-custom-text-200">Links</span>
|
||||||
<Plus className="h-4 w-4" />
|
</div>
|
||||||
</button>
|
|
||||||
</div>
|
<div className="flex items-center gap-2.5">
|
||||||
<div className="mt-2 space-y-2 hover:bg-custom-background-80">
|
<Disclosure.Button className="p-1.5">
|
||||||
{memberRole && moduleDetails.link_module && moduleDetails.link_module.length > 0 ? (
|
<ChevronDown
|
||||||
<LinksList
|
className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`}
|
||||||
links={moduleDetails.link_module}
|
aria-hidden="true"
|
||||||
handleEditLink={handleEditLink}
|
/>
|
||||||
handleDeleteLink={handleDeleteLink}
|
</Disclosure.Button>
|
||||||
userAuth={memberRole}
|
</div>
|
||||||
/>
|
</div>
|
||||||
) : null}
|
<Transition show={open}>
|
||||||
</div>
|
<Disclosure.Panel>
|
||||||
|
<div className="flex flex-col w-full mt-2 space-y-3 h-72 overflow-y-auto">
|
||||||
|
{memberRole && moduleDetails.link_module && moduleDetails.link_module.length > 0 ? (
|
||||||
|
<>
|
||||||
|
<div className="flex items-center justify-end w-full">
|
||||||
|
<button
|
||||||
|
className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
|
||||||
|
onClick={() => setModuleLinkModal(true)}
|
||||||
|
>
|
||||||
|
<Plus className="h-3 w-3" />
|
||||||
|
Add link
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<LinksList
|
||||||
|
links={moduleDetails.link_module}
|
||||||
|
handleEditLink={handleEditLink}
|
||||||
|
handleDeleteLink={handleDeleteLink}
|
||||||
|
userAuth={memberRole}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center justify-between gap-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Info className="h-3.5 w-3.5 text-custom-text-300 stroke-[1.5]" />
|
||||||
|
<span className="text-xs text-custom-text-300 p-0.5">No links added yet</span>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
|
||||||
|
onClick={() => setModuleLinkModal(true)}
|
||||||
|
>
|
||||||
|
<Plus className="h-3 w-3" />
|
||||||
|
Add link
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Disclosure.Panel>
|
||||||
|
</Transition>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Disclosure>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</div>
|
||||||
) : (
|
</>
|
||||||
<Loader className="px-5">
|
) : (
|
||||||
<div className="space-y-2">
|
<Loader className="px-5">
|
||||||
<Loader.Item height="15px" width="50%" />
|
<div className="space-y-2">
|
||||||
<Loader.Item height="15px" width="30%" />
|
<Loader.Item height="15px" width="50%" />
|
||||||
</div>
|
<Loader.Item height="15px" width="30%" />
|
||||||
<div className="mt-8 space-y-3">
|
</div>
|
||||||
<Loader.Item height="30px" />
|
<div className="mt-8 space-y-3">
|
||||||
<Loader.Item height="30px" />
|
<Loader.Item height="30px" />
|
||||||
<Loader.Item height="30px" />
|
<Loader.Item height="30px" />
|
||||||
</div>
|
<Loader.Item height="30px" />
|
||||||
</Loader>
|
</div>
|
||||||
)}
|
</Loader>
|
||||||
</div>
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -76,11 +76,20 @@ export const Avatar: React.FC<AvatarProps> = ({
|
|||||||
type AsigneesListProps = {
|
type AsigneesListProps = {
|
||||||
users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[];
|
users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[];
|
||||||
userIds?: string[];
|
userIds?: string[];
|
||||||
|
height?: string;
|
||||||
|
width?: string;
|
||||||
length?: number;
|
length?: number;
|
||||||
showLength?: boolean;
|
showLength?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, length = 3, showLength = true }) => {
|
export const AssigneesList: React.FC<AsigneesListProps> = ({
|
||||||
|
users,
|
||||||
|
userIds,
|
||||||
|
height = "24px",
|
||||||
|
width = "24px",
|
||||||
|
length = 3,
|
||||||
|
showLength = true,
|
||||||
|
}) => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug } = router.query;
|
const { workspaceSlug } = router.query;
|
||||||
|
|
||||||
@ -101,7 +110,7 @@ export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, len
|
|||||||
{users && (
|
{users && (
|
||||||
<>
|
<>
|
||||||
{users.slice(0, length).map((user, index) => (
|
{users.slice(0, length).map((user, index) => (
|
||||||
<Avatar key={user?.id} user={user} index={index} />
|
<Avatar key={user?.id} user={user} index={index} height={height} width={width} />
|
||||||
))}
|
))}
|
||||||
{users.length > length ? (
|
{users.length > length ? (
|
||||||
<div className="-ml-3.5 relative h-6 w-6 rounded">
|
<div className="-ml-3.5 relative h-6 w-6 rounded">
|
||||||
@ -118,7 +127,7 @@ export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, len
|
|||||||
{userIds.slice(0, length).map((userId, index) => {
|
{userIds.slice(0, length).map((userId, index) => {
|
||||||
const user = people?.find((p) => p.member.id === userId)?.member;
|
const user = people?.find((p) => p.member.id === userId)?.member;
|
||||||
|
|
||||||
return <Avatar key={userId} user={user} index={index} />;
|
return <Avatar key={userId} user={user} index={index} height={height} width={width} />;
|
||||||
})}
|
})}
|
||||||
{showLength ? (
|
{showLength ? (
|
||||||
userIds.length > length ? (
|
userIds.length > length ? (
|
||||||
|
@ -5,11 +5,49 @@ export const MODULE_STATUS: {
|
|||||||
label: string;
|
label: string;
|
||||||
value: TModuleStatus;
|
value: TModuleStatus;
|
||||||
color: string;
|
color: string;
|
||||||
|
textColor: string;
|
||||||
|
bgColor: string;
|
||||||
}[] = [
|
}[] = [
|
||||||
{ label: "Backlog", value: "backlog", color: "#a3a3a2" },
|
{
|
||||||
{ label: "Planned", value: "planned", color: "#3f76ff" },
|
label: "Backlog",
|
||||||
{ label: "In Progress", value: "in-progress", color: "#f39e1f" },
|
value: "backlog",
|
||||||
{ label: "Paused", value: "paused", color: "#525252" },
|
color: "#a3a3a2",
|
||||||
{ label: "Completed", value: "completed", color: "#16a34a" },
|
textColor: "text-custom-text-400",
|
||||||
{ label: "Cancelled", value: "cancelled", color: "#ef4444" },
|
bgColor: "bg-custom-background-80",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Planned",
|
||||||
|
value: "planned",
|
||||||
|
color: "#3f76ff",
|
||||||
|
textColor: "text-blue-500",
|
||||||
|
bgColor: "bg-indigo-50",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "In Progress",
|
||||||
|
value: "in-progress",
|
||||||
|
color: "#f39e1f",
|
||||||
|
textColor: "text-amber-500",
|
||||||
|
bgColor: "bg-amber-50",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Paused",
|
||||||
|
value: "paused",
|
||||||
|
color: "#525252",
|
||||||
|
textColor: "text-custom-text-300",
|
||||||
|
bgColor: "bg-custom-background-90",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Completed",
|
||||||
|
value: "completed",
|
||||||
|
color: "#16a34a",
|
||||||
|
textColor: "text-green-600",
|
||||||
|
bgColor: "bg-green-100",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Cancelled",
|
||||||
|
value: "cancelled",
|
||||||
|
color: "#ef4444",
|
||||||
|
textColor: "text-red-500",
|
||||||
|
bgColor: "bg-red-50",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
@ -172,6 +172,18 @@ export const renderShortDate = (date: string | Date, placeholder?: string) => {
|
|||||||
return isNaN(date.getTime()) ? placeholder ?? "N/A" : `${day} ${month}`;
|
return isNaN(date.getTime()) ? placeholder ?? "N/A" : `${day} ${month}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const renderShortMonthDate = (date: string | Date, placeholder?: string) => {
|
||||||
|
if (!date || date === "") return null;
|
||||||
|
|
||||||
|
date = new Date(date);
|
||||||
|
|
||||||
|
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
||||||
|
const month = months[date.getMonth()];
|
||||||
|
const year = date.getFullYear();
|
||||||
|
|
||||||
|
return isNaN(date.getTime()) ? placeholder ?? "N/A" : `${month} ${year}`;
|
||||||
|
};
|
||||||
|
|
||||||
export const render12HourFormatTime = (date: string | Date): string => {
|
export const render12HourFormatTime = (date: string | Date): string => {
|
||||||
if (!date || date === "") return "";
|
if (!date || date === "") return "";
|
||||||
|
|
||||||
|
@ -27,7 +27,7 @@ const ModuleIssuesPage: NextPage = () => {
|
|||||||
|
|
||||||
const { module: moduleStore } = useMobxStore();
|
const { module: moduleStore } = useMobxStore();
|
||||||
|
|
||||||
const { storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
|
const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
|
||||||
const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
|
const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
|
||||||
|
|
||||||
const { error } = useSWR(
|
const { error } = useSWR(
|
||||||
@ -60,6 +60,10 @@ const ModuleIssuesPage: NextPage = () => {
|
|||||||
// setModuleIssuesListModal(true);
|
// setModuleIssuesListModal(true);
|
||||||
// };
|
// };
|
||||||
|
|
||||||
|
const toggleSidebar = () => {
|
||||||
|
setValue(`${!isSidebarCollapsed}`);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<AppLayout header={<ModuleIssuesHeader />} withProjectWrapper>
|
<AppLayout header={<ModuleIssuesHeader />} withProjectWrapper>
|
||||||
@ -82,10 +86,20 @@ const ModuleIssuesPage: NextPage = () => {
|
|||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex h-full w-full">
|
<div className="flex h-full w-full">
|
||||||
<div className={`h-full w-full ${isSidebarCollapsed ? "" : "mr-[24rem]"} duration-300`}>
|
<div className="h-full w-full">
|
||||||
<ModuleLayoutRoot />
|
<ModuleLayoutRoot />
|
||||||
</div>
|
</div>
|
||||||
{moduleId && <ModuleDetailsSidebar isOpen={!isSidebarCollapsed} moduleId={moduleId.toString()} />}
|
{moduleId && !isSidebarCollapsed && (
|
||||||
|
<div
|
||||||
|
className="flex flex-col gap-3.5 h-full w-[24rem] z-10 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 flex-shrink-0"
|
||||||
|
style={{
|
||||||
|
boxShadow:
|
||||||
|
"0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ModuleDetailsSidebar moduleId={moduleId.toString()} handleClose={toggleSidebar} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</AppLayout>
|
</AppLayout>
|
||||||
|
4
web/public/empty-state/empty_label.svg
Normal file
4
web/public/empty-state/empty_label.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M20 3.33203H3.33331V19.9987L18.8166 35.482C20.3833 37.0487 22.95 37.0487 24.5166 35.482L35.4833 24.5154C37.05 22.9487 37.05 20.382 35.4833 18.8154L20 3.33203Z" fill="#CED4DA" stroke="#CED4DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M11.6667 11.668H11.6834" stroke="#E9ECEF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 487 B |
13
web/public/empty-state/empty_members.svg
Normal file
13
web/public/empty-state/empty_members.svg
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_656_27784)">
|
||||||
|
<path d="M24.8113 22.6226C30.23 22.6226 34.6226 18.23 34.6226 12.8113C34.6226 7.39268 30.23 3 24.8113 3C19.3927 3 15 7.39268 15 12.8113C15 18.23 19.3927 22.6226 24.8113 22.6226Z" fill="#E9ECEF"/>
|
||||||
|
<path d="M41.6604 39.4833C41.6604 35.3986 39.5722 31.4813 36.4863 28.593C33.4005 25.7047 29.2152 24.082 24.8511 24.082C20.4871 24.082 16.3018 25.7047 13.2159 28.593C10.1301 31.4813 8.39648 35.3986 8.39648 39.4833" fill="#CED4DA"/>
|
||||||
|
<path d="M41.6604 39.4833C41.6604 35.3986 39.5722 31.4813 36.4863 28.593C33.4005 25.7047 29.2152 24.082 24.8511 24.082C20.4871 24.082 16.3018 25.7047 13.2159 28.593C10.1301 31.4813 8.39648 35.3986 8.39648 39.4833C10.5708 47.729 38.3358 49.5686 41.6604 39.4833Z" stroke="#CED4DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M41.4427 37.888C41.9639 39.9507 39.7091 42.6049 36.6233 44.3074C33.5374 46.0099 29.8569 46.6995 25.4928 46.6995C21.1288 46.6995 16.9435 45.743 13.8576 44.0405C10.6678 42.8396 7.44345 39.8189 9.03816 37.6211L25.4928 37.6211L41.4427 37.888Z" fill="#CED4DA"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_656_27784">
|
||||||
|
<rect width="47.0943" height="47.0943" fill="white" transform="translate(0.452881 0.820312)"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.3 KiB |
Loading…
Reference in New Issue
Block a user