Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: gantt chart empty state #2279

Merged
merged 2 commits into from
Sep 27, 2023
Merged

chore: gantt chart empty state #2279

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
81b706b
chore: gantt empty state
aaryan610 Sep 27, 2023
962d171
chore: Add heading to the gantt sidebar
aaryan610 Sep 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions web/components/gantt-chart/chart/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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)}
Expand Down
31 changes: 20 additions & 11 deletions web/components/gantt-chart/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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}`}
Expand Down Expand Up @@ -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" />
Expand Down
11 changes: 2 additions & 9 deletions web/components/issues/gantt-chart/blocks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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;

Expand All @@ -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>
);
};