binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: render proper icons for due dates (#2114)

Browse source
This commit is contained in:
Aaryan Khandelwal 2023-09-07 12:53:49 +05:30 • committed by GitHub
parent b47c7d363f
commit d26aa1b2da
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 49 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

38
space/components/issues/peek-overview/issue-properties.tsx
View file

@ -2,9 +2,10 @@
import useToast from "hooks/use-toast";
// icons
import { Icon } from "components/ui";
import { copyTextToClipboard, addSpaceIfCamelCase } from "helpers/string.helper";
// helpers
import { renderDateFormat } from "constants/helpers";
import { copyTextToClipboard, addSpaceIfCamelCase } from "helpers/string.helper";
import { renderFullDate } from "helpers/date-time.helper";
import { dueDateIconDetails } from "../board-views/block-due-date";
// types
import { IIssue } from "types/issue";
import { IPeekMode } from "store/issue_details";
@ -16,35 +17,16 @@ type Props = {
mode?: IPeekMode;
};
const validDate = (date: any, state: string): string => {
if (date === null || ["backlog", "unstarted", "cancelled"].includes(state))
return `bg-gray-500/10 text-gray-500 border-gray-500/50`;
else {
const today = new Date();
const dueDate = new Date(date);
if (dueDate < today) return `bg-red-500/10 text-red-500 border-red-500/50`;
else return `bg-green-500/10 text-green-500 border-green-500/50`;
}
};
export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mode }) => {
const { setToastAlert } = useToast();
const startDate = issueDetails.start_date;
const targetDate = issueDetails.target_date;
const minDate = startDate ? new Date(startDate) : null;
minDate?.setDate(minDate.getDate());
const maxDate = targetDate ? new Date(targetDate) : null;
maxDate?.setDate(maxDate.getDate());
const state = issueDetails.state_detail;
const stateGroup = issueGroupFilter(state.group);
const priority = issueDetails.priority ? issuePriorityFilter(issueDetails.priority) : null;
const dueDateIcon = dueDateIconDetails(issueDetails.target_date, state.group);
const handleCopyLink = () => {
const urlToCopy = window.location.href;
@ -125,11 +107,11 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
</div>
<div>
{issueDetails.target_date ? (
<div
className={`h-[24px] rounded-md flex px-2.5 py-1 items-center border border-custom-border-100 gap-1 text-custom-text-100 text-xs font-medium
${validDate(issueDetails.target_date, state)}`}
>
{renderDateFormat(issueDetails.target_date)}
<div className="h-6 rounded flex items-center gap-1 px-2.5 py-1 border border-custom-border-100 text-custom-text-100 text-xs bg-custom-background-80">
<span className={`material-symbols-rounded text-sm -my-0.5 ${dueDateIcon.className}`}>
{dueDateIcon.iconName}
</span>
{renderFullDate(issueDetails.target_date)}
</div>
) : (
<span className="text-custom-text-200">Empty</span>