chore: date and time standardization all across the platform. (#3283)
* chore: date and time standardization all across the platform. * chore: update `renderFormattedTime` function. * remove unwanted code. * fix: build errors * chore: update `renderFormattedTime` function params.
This commit is contained in:
Prateek Shourya
GitHub
parent
d9ee692ce9
commit
1539340113
65 changed files with 366 additions and 723 deletions
|
|
@ -1,9 +1,8 @@
|
|||
import { useRouter } from "next/router";
|
||||
|
||||
// ui
|
||||
import { Tooltip, ModuleStatusIcon } from "@plane/ui";
|
||||
// helpers
|
||||
import { renderShortDate } from "helpers/date-time.helper";
|
||||
import { renderFormattedDate } from "helpers/date-time.helper";
|
||||
// types
|
||||
import { IModule } from "types";
|
||||
// constants
|
||||
|
|
@ -25,7 +24,7 @@ export const ModuleGanttBlock = ({ data }: { data: IModule }) => {
|
|||
<div className="space-y-1">
|
||||
<h5>{data?.name}</h5>
|
||||
<div>
|
||||
{renderShortDate(data?.start_date ?? "")} to {renderShortDate(data?.target_date ?? "")}
|
||||
{renderFormattedDate(data?.start_date ?? "")} to {renderFormattedDate(data?.target_date ?? "")}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import { Avatar, AvatarGroup, CustomMenu, LayersIcon, Tooltip } from "@plane/ui"
|
|||
import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
|
||||
// helpers
|
||||
import { copyUrlToClipboard } from "helpers/string.helper";
|
||||
import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper";
|
||||
import { renderFormattedDate } from "helpers/date-time.helper";
|
||||
// types
|
||||
import { IModule } from "types";
|
||||
// constants
|
||||
|
|
@ -56,8 +56,6 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
|
|||
|
||||
const isDateValid = module.target_date || module.start_date;
|
||||
|
||||
const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
|
||||
|
||||
const moduleStatus = MODULE_STATUS.find((status) => status.value === module.status);
|
||||
|
||||
const issueCount = module
|
||||
|
|
@ -213,8 +211,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
|
|||
{isDateValid ? (
|
||||
<>
|
||||
<span className="text-xs text-custom-text-300">
|
||||
{areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
|
||||
{areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
|
||||
{renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import { Avatar, AvatarGroup, CircularProgressIndicator, CustomMenu, Tooltip } f
|
|||
import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
|
||||
// helpers
|
||||
import { copyUrlToClipboard } from "helpers/string.helper";
|
||||
import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper";
|
||||
import { renderFormattedDate } from "helpers/date-time.helper";
|
||||
// types
|
||||
import { IModule } from "types";
|
||||
// constants
|
||||
|
|
@ -49,8 +49,6 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
|
|||
|
||||
const renderDate = module.start_date || module.target_date;
|
||||
|
||||
const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
|
||||
|
||||
const moduleStatus = MODULE_STATUS.find((status) => status.value === module.status);
|
||||
|
||||
const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);
|
||||
|
|
@ -176,10 +174,8 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
|
|||
</div>
|
||||
|
||||
{renderDate && (
|
||||
<span className="flex w-28 items-center justify-center gap-2 text-xs text-custom-text-300">
|
||||
{areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
|
||||
{" - "}
|
||||
{areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
|
||||
<span className="flex w-40 items-center justify-center gap-2 text-xs text-custom-text-300">
|
||||
{renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
|
||||
</span>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,12 +27,7 @@ import {
|
|||
Trash2,
|
||||
} from "lucide-react";
|
||||
// helpers
|
||||
import {
|
||||
isDateGreaterThanToday,
|
||||
renderDateFormat,
|
||||
renderShortDate,
|
||||
renderShortMonthDate,
|
||||
} from "helpers/date-time.helper";
|
||||
import { isDateGreaterThanToday, renderFormattedPayloadDate, renderFormattedDate } from "helpers/date-time.helper";
|
||||
import { copyUrlToClipboard } from "helpers/string.helper";
|
||||
// types
|
||||
import { IIssueFilterOptions, ILinkDetails, IModule, ModuleLink } from "types";
|
||||
|
|
@ -187,8 +182,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
}
|
||||
|
||||
submitChanges({
|
||||
start_date: renderDateFormat(`${watch("start_date")}`),
|
||||
target_date: renderDateFormat(`${watch("target_date")}`),
|
||||
start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
|
||||
target_date: renderFormattedPayloadDate(`${watch("target_date")}`),
|
||||
});
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
|
|
@ -212,8 +207,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
}
|
||||
|
||||
submitChanges({
|
||||
start_date: renderDateFormat(`${watch("start_date")}`),
|
||||
target_date: renderDateFormat(`${watch("target_date")}`),
|
||||
start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
|
||||
target_date: renderFormattedPayloadDate(`${watch("target_date")}`),
|
||||
});
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
|
|
@ -285,9 +280,6 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
const startDate = new Date(watch("start_date") ?? moduleDetails.start_date ?? "");
|
||||
const endDate = new Date(watch("target_date") ?? moduleDetails.target_date ?? "");
|
||||
|
||||
const areYearsEqual =
|
||||
startDate.getFullYear() === endDate.getFullYear() || isNaN(startDate.getFullYear()) || isNaN(endDate.getFullYear());
|
||||
|
||||
const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
|
||||
|
||||
const issueCount =
|
||||
|
|
@ -400,19 +392,17 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
<div className="relative flex w-1/2 items-center rounded-sm">
|
||||
<Popover className="flex h-full w-full items-center justify-center rounded-lg">
|
||||
<Popover.Button
|
||||
className={`text-sm font-medium text-custom-text-300 w-full rounded-sm cursor-pointer hover:bg-custom-background-80 ${
|
||||
className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
|
||||
isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
|
||||
}`}
|
||||
disabled={!isEditingAllowed}
|
||||
>
|
||||
<span
|
||||
className={`group flex w-full items-center justify-between gap-2 py-1 px-1.5 text-sm ${
|
||||
className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
|
||||
watch("start_date") ? "" : "text-custom-text-400"
|
||||
}`}
|
||||
>
|
||||
{areYearsEqual
|
||||
? renderShortDate(startDate, "No date selected")
|
||||
: renderShortMonthDate(startDate, "No date selected")}
|
||||
{renderFormattedDate(startDate) ?? "No date selected"}
|
||||
</span>
|
||||
</Popover.Button>
|
||||
|
||||
|
|
@ -453,19 +443,17 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
<Popover className="flex h-full w-full items-center justify-center rounded-lg">
|
||||
<>
|
||||
<Popover.Button
|
||||
className={`text-sm font-medium text-custom-text-300 w-full rounded-sm cursor-pointer hover:bg-custom-background-80 ${
|
||||
className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
|
||||
isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
|
||||
}`}
|
||||
disabled={!isEditingAllowed}
|
||||
>
|
||||
<span
|
||||
className={`group flex w-full items-center justify-between gap-2 py-1 px-1.5 text-sm ${
|
||||
className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
|
||||
watch("target_date") ? "" : "text-custom-text-400"
|
||||
}`}
|
||||
>
|
||||
{areYearsEqual
|
||||
? renderShortDate(endDate, "No date selected")
|
||||
: renderShortMonthDate(endDate, "No date selected")}
|
||||
{renderFormattedDate(endDate) ?? "No date selected"}
|
||||
</span>
|
||||
</Popover.Button>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue