binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: due date highlight logic (#3763)

Browse source
This commit is contained in:
Aaryan Khandelwal 2024-02-23 19:15:59 +05:30 • committed by GitHub
parent ba6479674c
commit 33c99ded77
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 56 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

10
web/components/issues/peek-overview/properties.tsx
View file

@ -1,9 +1,8 @@
import { FC } from "react";
import { observer } from "mobx-react-lite";
import { differenceInCalendarDays } from "date-fns";
import { Signal, Tag, Triangle, LayoutPanelTop, CircleDot, CopyPlus, XCircle, CalendarDays } from "lucide-react";
// hooks
import { useIssueDetail, useProject } from "hooks/store";
import { useIssueDetail, useProject, useProjectState } from "hooks/store";
// ui icons
import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon, RelatedIcon } from "@plane/ui";
import {
@ -26,6 +25,7 @@ import {
import { renderFormattedPayloadDate } from "helpers/date-time.helper";
// helpers
import { cn } from "helpers/common.helper";
import { shouldHighlightIssueDueDate } from "helpers/issue.helper";
interface IPeekOverviewProperties {
workspaceSlug: string;
@ -42,11 +42,13 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
const {
issue: { getIssueById },
} = useIssueDetail();
const { getStateById } = useProjectState();
// derived values
const issue = getIssueById(issueId);
if (!issue) return <></>;
const projectDetails = getProjectById(issue.project_id);
const isEstimateEnabled = projectDetails?.estimate;
const stateDetails = getStateById(issue.state_id);
const minDate = issue.start_date ? new Date(issue.start_date) : null;
minDate?.setDate(minDate.getDate());
@ -54,8 +56,6 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
const maxDate = issue.target_date ? new Date(issue.target_date) : null;
maxDate?.setDate(maxDate.getDate());
const targetDateDistance = issue.target_date ? differenceInCalendarDays(new Date(issue.target_date), new Date()) : 1;
return (
<div className="mt-1">
<h6 className="text-sm font-medium">Properties</h6>
@ -169,7 +169,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
buttonContainerClassName="w-full text-left"
buttonClassName={cn("text-sm", {
"text-custom-text-400": !issue.target_date,
"text-red-500": targetDateDistance <= 0,
"text-red-500": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
})}
hideIcon
clearIconClassName="h-3 w-3 hidden group-hover:inline !text-custom-text-100"