github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: gantt chart empty state (#2279)

Browse Source 
* chore: gantt empty state

* chore: Add heading to the gantt sidebar
This commit is contained in:
Aaryan Khandelwal 2023-09-27 14:53:26 +05:30 committed by GitHub
parent b3be363b00
commit a243bb6a15
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/components/gantt-chart/chart/index.tsx
View File

@ -304,9 +304,12 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
>
<div
id="gantt-sidebar"
className="h-full w-1/4 flex flex-col border-r border-custom-border-200 space-y-3"
className="h-full w-1/4 flex flex-col border-r border-custom-border-200"
>
<div className="h-[60px] border-b border-custom-border-200 box-border flex-shrink-0" />
<div className="h-[60px] border-b border-custom-border-200 box-border flex-shrink-0 flex items-end justify-between gap-2 text-sm text-custom-text-300 font-medium pb-2 pl-10 pr-4">
<h6>{title}</h6>
<h6>Duration</h6>
</div>
<GanttSidebar
title={title}
blockUpdateHandler={blockUpdateHandler}
@ -315,7 +318,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
enableReorder={enableReorder}
/>
{chartBlocks && (
<div className="pl-2.5">
<div className="pl-2.5 py-3">
<GanttInlineCreateIssueForm
isOpen={isCreateIssueFormOpen}
handleClose={() => setIsCreateIssueFormOpen(false)}

31
web/components/gantt-chart/sidebar.tsx
View File

@ -8,6 +8,8 @@ import { useChart } from "./hooks";
import { Loader } from "components/ui";
// icons
import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
// helpers
import { findTotalDaysInRange } from "helpers/date-time.helper";
// types
import { IBlockUpdateData, IGanttBlock } from "./types";
@ -86,14 +88,20 @@ export const GanttSidebar: React.FC<Props> = (props) => {
{(droppableProvided) => (
<div
id={`gantt-sidebar-${cycleId}`}
className="max-h-full overflow-y-auto pl-2.5"
className="max-h-full overflow-y-auto pl-2.5 mt-3"
ref={droppableProvided.innerRef}
{...droppableProvided.droppableProps}
>
<>
{blocks ? (
blocks.length > 0 ? (
blocks.map((block, index) => (
blocks.map((block, index) => {
const duration = findTotalDaysInRange(
block.start_date ?? "",
block.target_date ?? "",
true
);
return (
<Draggable
key={`sidebar-block-${block.id}`}
draggableId={`sidebar-block-${block.id}`}
@ -126,19 +134,20 @@ export const GanttSidebar: React.FC<Props> = (props) => {
<EllipsisVerticalIcon className="h-4 -ml-5" />
</button>
)}
<div className="flex-grow truncate w-full h-full">
<SidebarBlockRender data={block.data} />
<div className="flex-grow truncate h-full flex items-center justify-between gap-2">
<div className="flex-grow truncate">
<SidebarBlockRender data={block.data} />
</div>
<div className="flex-shrink-0 text-sm text-custom-text-200">
{duration} day{duration > 1 ? "s" : ""}
</div>
</div>
</div>
</div>
)}
</Draggable>
))
) : (
<div className="text-custom-text-200 text-sm text-center mt-8">
No <span className="lowercase">{title}</span> found
</div>
)
);
})
) : (
<Loader className="pr-2 space-y-3">
<Loader.Item height="34px" />

11
web/components/issues/gantt-chart/blocks.tsx
View File

@ -5,7 +5,7 @@ import { Tooltip } from "components/ui";
// icons
import { StateGroupIcon } from "components/icons";
// helpers
import { findTotalDaysInRange, renderShortDate } from "helpers/date-time.helper";
import { renderShortDate } from "helpers/date-time.helper";
// types
import { IIssue } from "types";
@ -52,8 +52,6 @@ export const IssueGanttBlock = ({ data }: { data: IIssue }) => {
export const IssueGanttSidebarBlock = ({ data }: { data: IIssue }) => {
const router = useRouter();
const duration = findTotalDaysInRange(data?.start_date ?? "", data?.target_date ?? "", true);
const openPeekOverview = () => {
const { query } = router;
@ -72,12 +70,7 @@ export const IssueGanttSidebarBlock = ({ data }: { data: IIssue }) => {
<div className="text-xs text-custom-text-300 flex-shrink-0">
{data?.project_detail?.identifier} {data?.sequence_id}
</div>
<div className="flex items-center justify-between gap-2 w-full flex-grow truncate">
<h6 className="text-sm font-medium flex-grow truncate">{data?.name}</h6>
<span className="flex-shrink-0 text-sm text-custom-text-200">
{duration} day{duration > 1 ? "s" : ""}
</span>
</div>
<h6 className="text-sm font-medium flex-grow truncate">{data?.name}</h6>
</div>
);
};