forked from github/plane
chore: add tooltips to issue properties with no value (#3169)
* chore: add tolltips to properties with no value * chore: update property types
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
c9792da4a1
commit
81256d6373
@ -57,7 +57,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
|
||||
);
|
||||
};
|
||||
|
||||
const handleStartDate = (date: string) => {
|
||||
const handleStartDate = (date: string | null) => {
|
||||
handleIssues(
|
||||
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
|
||||
!group_id && group_id === "null" ? null : group_id,
|
||||
@ -65,7 +65,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
|
||||
);
|
||||
};
|
||||
|
||||
const handleTargetDate = (date: string) => {
|
||||
const handleTargetDate = (date: string | null) => {
|
||||
handleIssues(
|
||||
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
|
||||
!group_id && group_id === "null" ? null : group_id,
|
||||
@ -122,7 +122,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
|
||||
{displayProperties && displayProperties?.start_date && (
|
||||
<IssuePropertyDate
|
||||
value={issue?.start_date || null}
|
||||
onChange={(date: string) => handleStartDate(date)}
|
||||
onChange={(date) => handleStartDate(date)}
|
||||
disabled={isReadOnly}
|
||||
type="start_date"
|
||||
/>
|
||||
@ -132,7 +132,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
|
||||
{displayProperties && displayProperties?.due_date && (
|
||||
<IssuePropertyDate
|
||||
value={issue?.target_date || null}
|
||||
onChange={(date: string) => handleTargetDate(date)}
|
||||
onChange={(date) => handleTargetDate(date)}
|
||||
disabled={isReadOnly}
|
||||
type="target_date"
|
||||
/>
|
||||
|
||||
@ -40,11 +40,11 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
|
||||
handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, assignees: ids });
|
||||
};
|
||||
|
||||
const handleStartDate = (date: string) => {
|
||||
const handleStartDate = (date: string | null) => {
|
||||
handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, start_date: date });
|
||||
};
|
||||
|
||||
const handleTargetDate = (date: string) => {
|
||||
const handleTargetDate = (date: string | null) => {
|
||||
handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, target_date: date });
|
||||
};
|
||||
|
||||
@ -106,7 +106,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
|
||||
{displayProperties && displayProperties?.start_date && (
|
||||
<IssuePropertyDate
|
||||
value={issue?.start_date || null}
|
||||
onChange={(date: string) => handleStartDate(date)}
|
||||
onChange={(date) => handleStartDate(date)}
|
||||
disabled={isReadonly}
|
||||
type="start_date"
|
||||
/>
|
||||
@ -116,7 +116,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
|
||||
{displayProperties && displayProperties?.due_date && (
|
||||
<IssuePropertyDate
|
||||
value={issue?.target_date || null}
|
||||
onChange={(date: string) => handleTargetDate(date)}
|
||||
onChange={(date) => handleTargetDate(date)}
|
||||
disabled={isReadonly}
|
||||
type="target_date"
|
||||
/>
|
||||
|
||||
@ -12,11 +12,11 @@ import { Tooltip } from "@plane/ui";
|
||||
// hooks
|
||||
import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
|
||||
// helpers
|
||||
import { renderDateFormat } from "helpers/date-time.helper";
|
||||
import { renderDateFormat, renderFormattedDate } from "helpers/date-time.helper";
|
||||
|
||||
export interface IIssuePropertyDate {
|
||||
value: any;
|
||||
onChange: (date: any) => void;
|
||||
value: string | null;
|
||||
onChange: (date: string | null) => void;
|
||||
disabled?: boolean;
|
||||
type: "start_date" | "target_date";
|
||||
}
|
||||
@ -57,33 +57,40 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
|
||||
<>
|
||||
<Popover.Button
|
||||
as="button"
|
||||
type="button"
|
||||
ref={dropdownBtn}
|
||||
className={`flex h-5 w-full items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 outline-none duration-300 ${
|
||||
disabled
|
||||
? "pointer-events-none cursor-not-allowed text-custom-text-200"
|
||||
: "cursor-pointer hover:bg-custom-background-80"
|
||||
}`}
|
||||
className="border-none outline-none"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2 overflow-hidden">
|
||||
<dateOptionDetails.icon className="h-3 w-3" strokeWidth={2} />
|
||||
{value && (
|
||||
<>
|
||||
<Tooltip tooltipHeading={dateOptionDetails.placeholder} tooltipContent={value ?? "None"}>
|
||||
<div className="text-xs">{value}</div>
|
||||
</Tooltip>
|
||||
|
||||
<div
|
||||
className="flex flex-shrink-0 items-center justify-center"
|
||||
onClick={() => {
|
||||
if (onChange) onChange(null);
|
||||
}}
|
||||
>
|
||||
<X className="h-2.5 w-2.5" strokeWidth={2} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Tooltip
|
||||
tooltipHeading={dateOptionDetails.placeholder}
|
||||
tooltipContent={value ? renderFormattedDate(value) : "None"}
|
||||
>
|
||||
<div
|
||||
className={`flex h-5 w-full items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 outline-none duration-300 ${
|
||||
disabled
|
||||
? "pointer-events-none cursor-not-allowed text-custom-text-200"
|
||||
: "cursor-pointer hover:bg-custom-background-80"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2 overflow-hidden">
|
||||
<dateOptionDetails.icon className="h-3 w-3" strokeWidth={2} />
|
||||
{value && (
|
||||
<>
|
||||
<div className="text-xs">{value}</div>
|
||||
<div
|
||||
className="flex flex-shrink-0 items-center justify-center"
|
||||
onClick={() => {
|
||||
if (onChange) onChange(null);
|
||||
}}
|
||||
>
|
||||
<X className="h-2.5 w-2.5" strokeWidth={2} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</Popover.Button>
|
||||
|
||||
<div className={`${open ? "fixed left-0 top-0 z-20 h-full w-full cursor-auto" : ""}`}>
|
||||
@ -94,7 +101,7 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
|
||||
{({ close }) => (
|
||||
<DatePicker
|
||||
selected={value ? new Date(value) : new Date()}
|
||||
onChange={(val: any, e) => {
|
||||
onChange={(val, e) => {
|
||||
e?.stopPropagation();
|
||||
if (onChange && val) {
|
||||
onChange(renderDateFormat(val));
|
||||
|
||||
@ -107,7 +107,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
|
||||
{projectLabels
|
||||
?.filter((l) => value.includes(l.id))
|
||||
.map((label) => (
|
||||
<Tooltip position="top" tooltipHeading="Labels" tooltipContent={label.name ?? ""}>
|
||||
<Tooltip position="top" tooltipHeading="Label" tooltipContent={label.name ?? ""}>
|
||||
<div
|
||||
key={label.id}
|
||||
className={`flex overflow-hidden hover:bg-custom-background-80 ${
|
||||
@ -145,14 +145,16 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div
|
||||
className={`h-full flex items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
|
||||
noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
|
||||
}`}
|
||||
>
|
||||
<Tags className="h-3.5 w-3.5" strokeWidth={2} />
|
||||
{placeholderText}
|
||||
</div>
|
||||
<Tooltip position="top" tooltipHeading="Labels" tooltipContent="None">
|
||||
<div
|
||||
className={`h-full flex items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
|
||||
noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
|
||||
}`}
|
||||
>
|
||||
<Tags className="h-3.5 w-3.5" strokeWidth={2} />
|
||||
{placeholderText}
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user