Merge branch 'preview' of github.com:makeplane/plane into develop
This commit is contained in:
sriram veeraghanta
commit
f9e187d8b9
20 changed files with 75 additions and 324 deletions
|
|
@ -1,6 +1,5 @@
|
|||
export * from "./attachment";
|
||||
export * from "./issue-modal";
|
||||
export * from "./view-select";
|
||||
export * from "./delete-issue-modal";
|
||||
export * from "./description-form";
|
||||
export * from "./issue-layouts";
|
||||
|
|
|
|||
|
|
@ -1,81 +0,0 @@
|
|||
// ui
|
||||
import { CustomDatePicker } from "components/ui";
|
||||
import { Tooltip } from "@plane/ui";
|
||||
import { CalendarCheck } from "lucide-react";
|
||||
// helpers
|
||||
import { findHowManyDaysLeft, renderFormattedDate } from "helpers/date-time.helper";
|
||||
// types
|
||||
import { TIssue } from "@plane/types";
|
||||
|
||||
type Props = {
|
||||
issue: TIssue;
|
||||
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());
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
tooltipHeading="Due date"
|
||||
tooltipContent={issue.target_date ? renderFormattedDate(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>{renderFormattedDate(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>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
import React from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Triangle } from "lucide-react";
|
||||
import sortBy from "lodash/sortBy";
|
||||
// store hooks
|
||||
import { useEstimate } from "hooks/store";
|
||||
// ui
|
||||
import { CustomSelect, Tooltip } from "@plane/ui";
|
||||
// types
|
||||
import { TIssue } from "@plane/types";
|
||||
|
||||
type Props = {
|
||||
issue: TIssue;
|
||||
onChange: (data: number) => void;
|
||||
tooltipPosition?: "top" | "bottom";
|
||||
customButton?: boolean;
|
||||
disabled: boolean;
|
||||
};
|
||||
|
||||
export const ViewEstimateSelect: React.FC<Props> = observer((props) => {
|
||||
const { issue, onChange, tooltipPosition = "top", customButton = false, disabled } = props;
|
||||
const { areEstimatesEnabledForCurrentProject, activeEstimateDetails, getEstimatePointValue } = useEstimate();
|
||||
|
||||
const estimateValue = getEstimatePointValue(issue.estimate_point, issue.project_id);
|
||||
|
||||
const estimateLabels = (
|
||||
<Tooltip tooltipHeading="Estimate" tooltipContent={estimateValue} position={tooltipPosition}>
|
||||
<div className="flex items-center gap-1 text-custom-text-200">
|
||||
<Triangle className="h-3 w-3" />
|
||||
{estimateValue ?? "None"}
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
if (!areEstimatesEnabledForCurrentProject) return null;
|
||||
|
||||
return (
|
||||
<CustomSelect
|
||||
value={issue.estimate_point}
|
||||
onChange={onChange}
|
||||
{...(customButton ? { customButton: estimateLabels } : { label: estimateLabels })}
|
||||
maxHeight="md"
|
||||
noChevron
|
||||
disabled={disabled}
|
||||
>
|
||||
<CustomSelect.Option value={null}>
|
||||
<>
|
||||
<span>
|
||||
<Triangle className="h-3 w-3" />
|
||||
</span>
|
||||
None
|
||||
</>
|
||||
</CustomSelect.Option>
|
||||
{sortBy(activeEstimateDetails?.points, "key")?.map((estimate) => (
|
||||
<CustomSelect.Option key={estimate.id} value={estimate.key}>
|
||||
<>
|
||||
<Triangle className="h-3 w-3" />
|
||||
{estimate.value}
|
||||
</>
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
);
|
||||
});
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
export * from "./due-date";
|
||||
export * from "./estimate";
|
||||
export * from "./start-date";
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
// ui
|
||||
import { CustomDatePicker } from "components/ui";
|
||||
import { Tooltip } from "@plane/ui";
|
||||
import { CalendarClock } from "lucide-react";
|
||||
// helpers
|
||||
import { renderFormattedDate } from "helpers/date-time.helper";
|
||||
// types
|
||||
import { TIssue } from "@plane/types";
|
||||
|
||||
type Props = {
|
||||
issue: TIssue;
|
||||
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());
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
tooltipHeading="Start date"
|
||||
tooltipContent={issue.start_date ? renderFormattedDate(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>{renderFormattedDate(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>
|
||||
);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue