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.
80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
// ui
|
|
import { CustomDatePicker } from "components/ui";
|
|
import { Tooltip } from "@plane/ui";
|
|
import { CalendarClock } from "lucide-react";
|
|
// helpers
|
|
import { 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 ViewStartDateSelect: React.FC<Props> = ({
|
|
issue,
|
|
onChange,
|
|
handleOnOpen,
|
|
handleOnClose,
|
|
tooltipPosition = "top",
|
|
className = "",
|
|
noBorder = false,
|
|
disabled,
|
|
}) => {
|
|
const maxDate = issue.target_date ? new Date(issue.target_date) : null;
|
|
maxDate?.setDate(maxDate.getDate());
|
|
const today = new Date();
|
|
const startDate = new Date(issue.start_date ?? "");
|
|
const areYearsEqual = startDate.getFullYear() === today.getFullYear();
|
|
|
|
return (
|
|
<Tooltip
|
|
tooltipHeading="Start date"
|
|
tooltipContent={issue.start_date ? renderShortDateWithYearFormat(issue.start_date) ?? "N/A" : "N/A"}
|
|
position={tooltipPosition}
|
|
>
|
|
<div className={`group max-w-[6.5rem] flex-shrink-0 ${className}`}>
|
|
<CustomDatePicker
|
|
value={issue?.start_date}
|
|
onChange={onChange}
|
|
maxDate={maxDate ?? undefined}
|
|
noBorder={noBorder}
|
|
handleOnOpen={handleOnOpen}
|
|
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?.start_date ? "pr-6 text-custom-text-300" : "text-custom-text-400"
|
|
} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
|
|
>
|
|
{issue?.start_date ? (
|
|
<>
|
|
<CalendarClock className="h-3.5 w-3.5 flex-shrink-0" />
|
|
<span>
|
|
{areYearsEqual
|
|
? renderShortDate(issue?.start_date, "_ _")
|
|
: renderShortMonthDate(issue?.start_date, "_ _")}
|
|
</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<CalendarClock className="h-3.5 w-3.5 flex-shrink-0" />
|
|
<span>Start Date</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
}
|
|
handleOnClose={handleOnClose}
|
|
disabled={disabled}
|
|
/>
|
|
</div>
|
|
</Tooltip>
|
|
);
|
|
};
|