mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
e1e9a5ed96
* dev: Helpers * dev: views * dev: Chart views Month, Year and Day * dev: Chart Workflow updates * update: scroll functionality implementation * update: data vaidation * update: date renders and issue filter in the month view * update: new date render month view * update: scroll enabled left in chart * update: Item render from the date it created. * update: width implementation in chat view * dev: chart render functionality in the gantt chart * update: month view fix * dev: chart render issues resolved * update: fixed allchat views * update: updated week view default values * update: integrated chart view in issues * update: grabble and sidebar logic impleemntation and integrated gantt in issues * update: Preview gantt chart in month view * fix: mutation in gantt chart after creating a new issue * chore: cycles and modules list gantt chart * update: Ui changes on gantt view * fix: gantt chart height, chore: remove link from issue --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
82 lines
3.3 KiB
TypeScript
82 lines
3.3 KiB
TypeScript
import { FC, useEffect, useState } from "react";
|
|
// helpers
|
|
import { ChartDraggable } from "../helpers/draggable";
|
|
// data
|
|
import { datePreview } from "../data";
|
|
|
|
export const GanttChartBlocks: FC<{
|
|
itemsContainerWidth: number;
|
|
blocks: null | any[];
|
|
sidebarBlockRender: FC;
|
|
blockRender: FC;
|
|
}> = ({ itemsContainerWidth, blocks, sidebarBlockRender, blockRender }) => {
|
|
const handleChartBlockPosition = (block: any) => {
|
|
// setChartBlocks((prevData: any) =>
|
|
// prevData.map((_block: any) => (_block?.data?.id == block?.data?.id ? block : _block))
|
|
// );
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="relative z-10 mt-[58px] h-full w-[4000px] divide-x divide-gray-300 overflow-hidden overflow-y-auto bg-[#999] bg-opacity-5"
|
|
style={{ width: `${itemsContainerWidth}px` }}
|
|
>
|
|
<div className="w-full divide-y divide-brand-base">
|
|
{blocks &&
|
|
blocks.length > 0 &&
|
|
blocks.map((block: any, _idx: number) => (
|
|
<>
|
|
{block.start_date && block.target_date && (
|
|
<ChartDraggable
|
|
className="relative flex h-[36.5px] items-center"
|
|
key={`blocks-${_idx}`}
|
|
block={block}
|
|
handleBlock={handleChartBlockPosition}
|
|
>
|
|
<div
|
|
className="relative group inline-flex cursor-pointer items-center font-medium transition-all"
|
|
style={{ marginLeft: `${block?.position?.marginLeft}px` }}
|
|
>
|
|
<div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
|
|
<div className="absolute right-0 mr-[5px] rounded-sm bg-brand-surface-1 px-2 py-0.5 text-xs font-medium">
|
|
{block?.start_date ? datePreview(block?.start_date, true) : "-"}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="rounded-sm shadow-sm bg-brand-base overflow-hidden relative flex items-center"
|
|
style={{
|
|
width: `${block?.position?.width}px`,
|
|
}}
|
|
>
|
|
<div className="w-full h-full relative overflow-hidden">
|
|
{blockRender({ ...block?.data })}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
|
|
<div className="absolute left-0 ml-[5px] mr-[5px] rounded-sm bg-brand-surface-1 px-2 py-0.5 text-xs font-medium">
|
|
{block?.target_date ? datePreview(block?.target_date, true) : "-"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ChartDraggable>
|
|
)}
|
|
</>
|
|
))}
|
|
</div>
|
|
|
|
{/* sidebar */}
|
|
{/* <div className="fixed top-0 bottom-0 w-[300px] flex-shrink-0 divide-y divide-brand-base border-r border-brand-base overflow-y-auto">
|
|
{blocks &&
|
|
blocks.length > 0 &&
|
|
blocks.map((block: any, _idx: number) => (
|
|
<div className="relative h-[36.5px] bg-brand-base" key={`sidebar-blocks-${_idx}`}>
|
|
{sidebarBlockRender(block?.data)}
|
|
</div>
|
|
))}
|
|
</div> */}
|
|
</div>
|
|
);
|
|
};
|