plane/web/components/issues/issue-peek-overview/properties.tsx
deepsource-autofix[bot] 80e6d7e1ea
refactor: remove true from boolean attribute (#2579)
When using a boolean attribute in JSX, you can set the attribute value to true or omit the value. This helps to keep consistency in code.

Co-authored-by: deepsource-autofix[bot] <62050782+deepsource-autofix[bot]@users.noreply.github.com>
2023-11-01 12:30:21 +05:30

140 lines
4.9 KiB
TypeScript

import { FC } from "react";
// ui icons
import { DoubleCircleIcon, UserGroupIcon } from "@plane/ui";
import { CalendarDays, Signal } from "lucide-react";
// components
import { IssuePropertyState } from "components/issues/issue-layouts/properties/state";
import { IssuePropertyPriority } from "components/issues/issue-layouts/properties/priority";
import { IssuePropertyAssignee } from "components/issues/issue-layouts/properties/assignee";
import { IssuePropertyDate } from "components/issues/issue-layouts/properties/date";
// types
import { IIssue, IState, IUserLite, TIssuePriorities } from "types";
interface IPeekOverviewProperties {
issue: IIssue;
issueUpdate: (issue: Partial<IIssue>) => void;
states: IState[] | null;
members: IUserLite[] | null;
priorities: any;
}
export const PeekOverviewProperties: FC<IPeekOverviewProperties> = (props) => {
const { issue, issueUpdate, states, members, priorities } = props;
const handleState = (_state: IState) => {
issueUpdate({ ...issue, state: _state.id });
};
const handlePriority = (_priority: TIssuePriorities) => {
issueUpdate({ ...issue, priority: _priority });
};
const handleAssignee = (_assignees: string[]) => {
issueUpdate({ ...issue, assignees: _assignees });
};
const handleStartDate = (_startDate: string) => {
issueUpdate({ ...issue, start_date: _startDate });
};
const handleTargetDate = (_targetDate: string) => {
issueUpdate({ ...issue, target_date: _targetDate });
};
return (
<div className="space-y-4">
{/* state */}
<div className="flex items-center gap-2">
<div className="flex-shrink-0 flex items-center gap-2 w-48 whitespace-nowrap">
<div className="w-4 h-4 flex justify-center items-center overflow-hidden">
<DoubleCircleIcon className="h-3.5 w-3.5 flex-shrink-0" />
</div>
<div className="font-medium text-custom-text-200 line-clamp-1">State</div>
</div>
<div className="w-full">
<IssuePropertyState
value={issue?.state_detail || null}
onChange={handleState}
states={states}
disabled={false}
hideDropdownArrow
/>
</div>
</div>
{/* assignees */}
<div className="flex items-center gap-2">
<div className="flex-shrink-0 flex items-center gap-2 w-48 whitespace-nowrap">
<div className="w-4 h-4 flex justify-center items-center overflow-hidden">
<UserGroupIcon className="h-3.5 w-3.5" />
</div>
<div className="font-medium text-custom-text-200 line-clamp-1">Assignees</div>
</div>
<div className="w-full">
<IssuePropertyAssignee
value={issue?.assignees || null}
onChange={(ids: string[]) => handleAssignee(ids)}
disabled={false}
hideDropdownArrow
members={members}
/>
</div>
</div>
{/* priority */}
<div className="flex items-center gap-2">
<div className="flex-shrink-0 flex items-center gap-2 w-48 whitespace-nowrap">
<div className="w-4 h-4 flex justify-center items-center overflow-hidden">
<Signal className="h-3.5 w-3.5" />
</div>
<div className="font-medium text-custom-text-200 line-clamp-1">Priority</div>
</div>
<div className="w-full">
<IssuePropertyPriority
value={issue?.priority || null}
onChange={handlePriority}
disabled={false}
hideDropdownArrow
/>
</div>
</div>
{/* start_date */}
<div className="flex items-center gap-2">
<div className="flex-shrink-0 flex items-center gap-2 w-48 whitespace-nowrap">
<div className="w-4 h-4 flex justify-center items-center overflow-hidden">
<CalendarDays className="h-3.5 w-3.5" />
</div>
<div className="font-medium text-custom-text-200 line-clamp-1">Start date</div>
</div>
<div className="w-full">
<IssuePropertyDate
value={issue?.start_date || null}
onChange={(date: string) => handleStartDate(date)}
disabled={false}
placeHolder={`Start date`}
/>
</div>
</div>
{/* target_date */}
<div className="flex items-center gap-2">
<div className="flex-shrink-0 flex items-center gap-2 w-48 whitespace-nowrap">
<div className="w-4 h-4 flex justify-center items-center overflow-hidden">
<CalendarDays className="h-3.5 w-3.5" />
</div>
<div className="font-medium text-custom-text-200 line-clamp-1">Target date</div>
</div>
<div className="w-full">
<IssuePropertyDate
value={issue?.target_date || null}
onChange={(date: string) => handleTargetDate(date)}
disabled={false}
placeHolder={`Target date`}
/>
</div>
</div>
</div>
);
};