chore: gantt chart empty state (#2279)

* chore: gantt empty state * chore: Add heading to the gantt sidebar
makeplane · Sep 27, 2023 · a243bb6 · a243bb6 · vercel · Sep 27, 2023
1 parent b3be363
commit a243bb6
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 23 deletions.
diff --git a/web/components/gantt-chart/chart/index.tsx b/web/components/gantt-chart/chart/index.tsx
@@ -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)}

diff --git a/web/components/gantt-chart/sidebar.tsx b/web/components/gantt-chart/sidebar.tsx
@@ -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" />

diff --git a/web/components/issues/gantt-chart/blocks.tsx b/web/components/issues/gantt-chart/blocks.tsx
@@ -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>
   );
 };