mirror of
https://github.com/makeplane/plane.git
synced 2026-07-12 05:21:14 +02:00
[WEB-3681]feat: added user timezone dates for cycle (#2807)
* feat: added user timezone dates for cycle * *chore: added translations *chore: refactored user timezone functions --------- Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com>
This commit is contained in:
@@ -18,7 +18,7 @@ const ProgressDonut = (props: Props) => {
|
||||
onMouseEnter={() => setIsHovering(true)}
|
||||
onMouseLeave={() => setIsHovering(false)}
|
||||
>
|
||||
<CircularProgressIndicator size={82} percentage={percentage} strokeWidth={3}>
|
||||
<CircularProgressIndicator size={65} percentage={percentage} strokeWidth={3}>
|
||||
<span className="text-[20px] text-custom-primary-200 font-bold block text-center">
|
||||
{progress ? (isHovering ? days_left : `${percentage ? percentage.toFixed(0) : 0}%`) : "0%"}
|
||||
</span>
|
||||
|
||||
@@ -1,17 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import React, { FC, useRef } from "react";
|
||||
import { format, parseISO, startOfToday } from "date-fns";
|
||||
import { format, startOfToday } from "date-fns";
|
||||
// types
|
||||
import { ArrowRight, CalendarDays } from "lucide-react";
|
||||
// icons
|
||||
import { ICycle, TCycleProgress } from "@plane/types";
|
||||
import { ControlLink, Loader, Tooltip } from "@plane/ui";
|
||||
import { CycleListItemAction } from "@/components/cycles";
|
||||
// helpers
|
||||
import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
|
||||
import { findHowManyDaysLeft } from "@/helpers/date-time.helper";
|
||||
import { useMember } from "@/hooks/store";
|
||||
import { useAppRouter } from "@/hooks/use-app-router";
|
||||
import ProgressDonut from "./progress-donut";
|
||||
|
||||
@@ -26,12 +23,10 @@ type Props = {
|
||||
|
||||
export const CycleProgressHeader: FC<Props> = (props: Props) => {
|
||||
const { workspaceSlug, projectId, cycleId, progress, cycleDetails } = props;
|
||||
const { getUserDetails } = useMember();
|
||||
|
||||
// router
|
||||
const router = useAppRouter();
|
||||
const parentRef = useRef(null);
|
||||
const createdByDetails = cycleDetails.created_by ? getUserDetails(cycleDetails.created_by) : undefined;
|
||||
const progressToday = progress && progress.find((d) => d.date === format(startOfToday(), "yyyy-MM-dd"));
|
||||
// handlers
|
||||
const handleControlLinkClick = () => {
|
||||
@@ -50,7 +45,7 @@ export const CycleProgressHeader: FC<Props> = (props: Props) => {
|
||||
>
|
||||
<div className="px-page-x flex items-center justify-between py-4 bg-custom-sidebar-background-100 w-full">
|
||||
<div className="flex gap-6 h-full truncate">
|
||||
{progress === null && <Loader.Item width="82px" height="82px" className="flex-shrink-0 rounded-full" />}
|
||||
{progress === null && <Loader.Item width="65px" height="65px" className="flex-shrink-0 rounded-full" />}
|
||||
{progress && (
|
||||
<ProgressDonut progress={progressToday} days_left={findHowManyDaysLeft(cycleDetails.end_date) ?? 0} />
|
||||
)}
|
||||
@@ -61,17 +56,6 @@ export const CycleProgressHeader: FC<Props> = (props: Props) => {
|
||||
{cycleDetails.name}
|
||||
</div>
|
||||
</Tooltip>
|
||||
<div className="flex gap-2">
|
||||
{/* Duration */}
|
||||
<div className="flex gap-1 text-xs text-custom-text-300 font-medium items-center">
|
||||
<CalendarDays className="h-3 w-3 flex-shrink-0 my-auto" />
|
||||
{cycleDetails.start_date && <span>{format(parseISO(cycleDetails.start_date), "MMM dd, yyyy")}</span>}
|
||||
<ArrowRight className="h-3 w-3 flex-shrink-0 my-auto" />
|
||||
{cycleDetails.end_date && <span>{format(parseISO(cycleDetails.end_date), "MMM dd, yyyy")}</span>}
|
||||
</div>
|
||||
{/* created by */}
|
||||
{createdByDetails && <ButtonAvatars showTooltip={false} userIds={createdByDetails?.id} />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 gap-4 items-center" onClick={handleEventPropagation}>
|
||||
|
||||
Reference in New Issue
Block a user