forked from github/plane
535731141f
* chore: implemented cycles list filters and ordering * chore: active cycle tab updated * refactor: cycles folder structure * fix: name search inout auto-focus * fix: cycles ordering * refactor: move cycle filters logic to mobx store from local storage * chore: show completed cycles in a disclosure * chore: added completed cycles count * refactor: cycles mapping logic --------- Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
import { FC } from "react";
|
|
import { observer } from "mobx-react-lite";
|
|
import { Disclosure } from "@headlessui/react";
|
|
import { ChevronRight } from "lucide-react";
|
|
// components
|
|
import { CyclePeekOverview, CyclesBoardMap } from "components/cycles";
|
|
// helpers
|
|
import { cn } from "helpers/common.helper";
|
|
|
|
export interface ICyclesBoard {
|
|
completedCycleIds: string[];
|
|
cycleIds: string[];
|
|
workspaceSlug: string;
|
|
projectId: string;
|
|
peekCycle: string | undefined;
|
|
}
|
|
|
|
export const CyclesBoard: FC<ICyclesBoard> = observer((props) => {
|
|
const { completedCycleIds, cycleIds, workspaceSlug, projectId, peekCycle } = props;
|
|
|
|
return (
|
|
<div className="h-full w-full">
|
|
<div className="flex h-full w-full justify-between">
|
|
<div className="h-full w-full flex flex-col p-8 space-y-8 vertical-scrollbar scrollbar-lg">
|
|
<CyclesBoardMap
|
|
cycleIds={cycleIds}
|
|
peekCycle={peekCycle}
|
|
projectId={projectId}
|
|
workspaceSlug={workspaceSlug}
|
|
/>
|
|
{completedCycleIds.length !== 0 && (
|
|
<Disclosure as="div" className="space-y-4">
|
|
<Disclosure.Button className="bg-custom-background-80 font-semibold text-sm py-1 px-2 rounded flex items-center gap-1">
|
|
{({ open }) => (
|
|
<>
|
|
Completed cycles ({completedCycleIds.length})
|
|
<ChevronRight
|
|
className={cn("h-3 w-3 transition-all", {
|
|
"rotate-90": open,
|
|
})}
|
|
/>
|
|
</>
|
|
)}
|
|
</Disclosure.Button>
|
|
<Disclosure.Panel>
|
|
<CyclesBoardMap
|
|
cycleIds={completedCycleIds}
|
|
peekCycle={peekCycle}
|
|
projectId={projectId}
|
|
workspaceSlug={workspaceSlug}
|
|
/>
|
|
</Disclosure.Panel>
|
|
</Disclosure>
|
|
)}
|
|
</div>
|
|
<CyclePeekOverview projectId={projectId} workspaceSlug={workspaceSlug} />
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|