mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
5b0066140f
* chore: format all files in the project * fix: removing @types/react from dependencies * fix: adding prettier and eslint config * chore: format files * fix: upgrading turbo version * chore: ignoring warnings and adding todos * fix: updated the type of bubble menu item in the document editor * chore: format files --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
108 lines
4.6 KiB
TypeScript
108 lines
4.6 KiB
TypeScript
import { useRouter } from "next/router";
|
|
import { observer } from "mobx-react-lite";
|
|
|
|
// mobx store
|
|
import { useMobxStore } from "lib/mobx/store-provider";
|
|
// helpers
|
|
import { renderEmoji } from "helpers/emoji.helper";
|
|
import { renderShortDate } from "helpers/date-time.helper";
|
|
// constants
|
|
import { NETWORK_CHOICES } from "constants/project";
|
|
|
|
export const CustomAnalyticsSidebarHeader = observer(() => {
|
|
const router = useRouter();
|
|
const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
|
|
|
|
const { cycle: cycleStore, module: moduleStore, project: projectStore } = useMobxStore();
|
|
|
|
const cycleDetails = cycleId ? cycleStore.getCycleById(cycleId.toString()) : undefined;
|
|
const moduleDetails = moduleId ? moduleStore.getModuleById(moduleId.toString()) : undefined;
|
|
const projectDetails =
|
|
workspaceSlug && projectId
|
|
? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
|
|
: undefined;
|
|
|
|
return (
|
|
<>
|
|
{projectId ? (
|
|
cycleDetails ? (
|
|
<div className="hidden h-full overflow-y-auto md:block">
|
|
<h4 className="break-words font-medium">Analytics for {cycleDetails.name}</h4>
|
|
<div className="mt-4 space-y-4">
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<h6 className="text-custom-text-200">Lead</h6>
|
|
<span>{cycleDetails.owned_by?.display_name}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<h6 className="text-custom-text-200">Start Date</h6>
|
|
<span>
|
|
{cycleDetails.start_date && cycleDetails.start_date !== ""
|
|
? renderShortDate(cycleDetails.start_date)
|
|
: "No start date"}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<h6 className="text-custom-text-200">Target Date</h6>
|
|
<span>
|
|
{cycleDetails.end_date && cycleDetails.end_date !== ""
|
|
? renderShortDate(cycleDetails.end_date)
|
|
: "No end date"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : moduleDetails ? (
|
|
<div className="hidden h-full overflow-y-auto md:block">
|
|
<h4 className="break-words font-medium">Analytics for {moduleDetails.name}</h4>
|
|
<div className="mt-4 space-y-4">
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<h6 className="text-custom-text-200">Lead</h6>
|
|
<span>{moduleDetails.lead_detail?.display_name}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<h6 className="text-custom-text-200">Start Date</h6>
|
|
<span>
|
|
{moduleDetails.start_date && moduleDetails.start_date !== ""
|
|
? renderShortDate(moduleDetails.start_date)
|
|
: "No start date"}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<h6 className="text-custom-text-200">Target Date</h6>
|
|
<span>
|
|
{moduleDetails.target_date && moduleDetails.target_date !== ""
|
|
? renderShortDate(moduleDetails.target_date)
|
|
: "No end date"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="hidden h-full overflow-y-auto md:flex md:flex-col">
|
|
<div className="flex items-center gap-1">
|
|
{projectDetails?.emoji ? (
|
|
<div className="grid h-6 w-6 flex-shrink-0 place-items-center">{renderEmoji(projectDetails.emoji)}</div>
|
|
) : projectDetails?.icon_prop ? (
|
|
<div className="grid h-6 w-6 flex-shrink-0 place-items-center">
|
|
{renderEmoji(projectDetails.icon_prop)}
|
|
</div>
|
|
) : (
|
|
<span className="mr-1 grid h-6 w-6 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
|
{projectDetails?.name.charAt(0)}
|
|
</span>
|
|
)}
|
|
<h4 className="break-words font-medium">{projectDetails?.name}</h4>
|
|
</div>
|
|
<div className="mt-4 space-y-4">
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<h6 className="text-custom-text-200">Network</h6>
|
|
<span>{NETWORK_CHOICES.find((n) => n.key === projectDetails?.network)?.label ?? ""}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
) : null}
|
|
</>
|
|
);
|
|
});
|