forked from github/plane
f132fe59ae
* chore: remove `Save View` option for guest/ viewer from project issues header. * chore: allow guest/ viewer to clear applied filters in project issues. * chore: disable `date`, `label` property access for guests/ viewer in all project issue views. * chore: update `Workspace Issues` -> `All Issues` header. * chore: refactor apply/ clear filter implementation in All Issues. * Revert "chore: refactor apply/ clear filter implementation in All Issues." This reverts commit 024822d54f4061eb2686d811a2b87cd0789b6b90. * Revert "chore: allow guest/ viewer to clear applied filters in project issues." This reverts commit 3dae871d23424d55abac95e16522696ad3c2a5c4. * Revert "chore: update `Workspace Issues` -> `All Issues` header." This reverts commit 03f90be188bc6b2f98a780ae22e0a29d9c59268d. * chore: remove `cursor-pointer` style from non actionable issue properties.
95 lines
2.9 KiB
TypeScript
95 lines
2.9 KiB
TypeScript
// ui
|
|
import { CustomDatePicker } from "components/ui";
|
|
import { Tooltip } from "@plane/ui";
|
|
import { CalendarCheck } from "lucide-react";
|
|
// helpers
|
|
import {
|
|
findHowManyDaysLeft,
|
|
renderShortDate,
|
|
renderShortDateWithYearFormat,
|
|
renderShortMonthDate,
|
|
} from "helpers/date-time.helper";
|
|
// types
|
|
import { IIssue } from "types";
|
|
|
|
type Props = {
|
|
issue: IIssue;
|
|
onChange: (date: string | null) => void;
|
|
handleOnOpen?: () => void;
|
|
handleOnClose?: () => void;
|
|
tooltipPosition?: "top" | "bottom";
|
|
className?: string;
|
|
noBorder?: boolean;
|
|
disabled: boolean;
|
|
};
|
|
|
|
export const ViewDueDateSelect: React.FC<Props> = ({
|
|
issue,
|
|
onChange,
|
|
handleOnOpen,
|
|
handleOnClose,
|
|
tooltipPosition = "top",
|
|
className = "",
|
|
noBorder = false,
|
|
disabled,
|
|
}) => {
|
|
const minDate = issue.start_date ? new Date(issue.start_date) : null;
|
|
minDate?.setDate(minDate.getDate());
|
|
|
|
const today = new Date();
|
|
const endDate = new Date(issue.target_date ?? "");
|
|
const areYearsEqual = endDate.getFullYear() === today.getFullYear();
|
|
|
|
return (
|
|
<Tooltip
|
|
tooltipHeading="Due date"
|
|
tooltipContent={issue.target_date ? renderShortDateWithYearFormat(issue.target_date) ?? "N/A" : "N/A"}
|
|
position={tooltipPosition}
|
|
>
|
|
<div
|
|
className={`group max-w-[6.5rem] flex-shrink-0 ${className} ${
|
|
issue.target_date === null
|
|
? ""
|
|
: issue.target_date < new Date().toISOString()
|
|
? "text-red-600"
|
|
: findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
|
|
}`}
|
|
>
|
|
<CustomDatePicker
|
|
value={issue?.target_date}
|
|
onChange={onChange}
|
|
className={`bg-transparent ${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"}`}
|
|
customInput={
|
|
<div
|
|
className={`flex items-center justify-center gap-2 rounded border border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-200 hover:bg-custom-background-80 ${
|
|
issue.target_date ? "pr-6 text-custom-text-300" : "text-custom-text-400"
|
|
} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
|
|
>
|
|
{issue.target_date ? (
|
|
<>
|
|
<CalendarCheck className="h-3.5 w-3.5 flex-shrink-0" />
|
|
<span>
|
|
{areYearsEqual
|
|
? renderShortDate(issue.target_date ?? "", "_ _")
|
|
: renderShortMonthDate(issue.target_date ?? "", "_ _")}
|
|
</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<CalendarCheck className="h-3.5 w-3.5 flex-shrink-0" />
|
|
<span>Due Date</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
}
|
|
minDate={minDate ?? undefined}
|
|
noBorder={noBorder}
|
|
handleOnOpen={handleOnOpen}
|
|
handleOnClose={handleOnClose}
|
|
disabled={disabled}
|
|
/>
|
|
</div>
|
|
</Tooltip>
|
|
);
|
|
};
|