thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: update time in real-time in dashboard and profile sidebar (#3489)

Browse Source 
* chore: update dashboard and profile time in realtime

* chore: remove seconds

* fix: cycle and module sidebar datepicker
This commit is contained in:
Aaryan Khandelwal 2024-01-29 15:42:57 +05:30 committed by GitHub
parent b3393f5c48
commit 3c9679dff9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 280 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

203
web/components/cycles/sidebar.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
@ -46,6 +46,11 @@ type Props = {
handleClose: () => void; handleClose: () => void;
}; };
const defaultValues: Partial<ICycle> = {
start_date: null,
end_date: null,
};
// services // services
const cycleService = new CycleService(); const cycleService = new CycleService();
@ -54,6 +59,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
const { cycleId, handleClose } = props; const { cycleId, handleClose } = props;
// states // states
const [cycleDeleteModal, setCycleDeleteModal] = useState(false); const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
// refs
const startDateButtonRef = useRef<HTMLButtonElement | null>(null);
const endDateButtonRef = useRef<HTMLButtonElement | null>(null);
// router // router
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId, peekCycle } = router.query; const { workspaceSlug, projectId, peekCycle } = router.query;
@ -70,11 +78,6 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
const defaultValues: Partial<ICycle> = {
start_date: new Date().toString(),
end_date: new Date().toString(),
};
const { setValue, reset, watch } = useForm({ const { setValue, reset, watch } = useForm({
defaultValues, defaultValues,
}); });
@ -120,6 +123,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
const handleStartDateChange = async (date: string) => { const handleStartDateChange = async (date: string) => {
setValue("start_date", date); setValue("start_date", date);
if (!watch("end_date") || watch("end_date") === "") endDateButtonRef.current?.click();
if (watch("start_date") && watch("end_date") && watch("start_date") !== "" && watch("start_date") !== "") { if (watch("start_date") && watch("end_date") && watch("start_date") !== "" && watch("start_date") !== "") {
if (!isDateGreaterThanToday(`${watch("end_date")}`)) { if (!isDateGreaterThanToday(`${watch("end_date")}`)) {
setToastAlert({ setToastAlert({
@ -127,6 +133,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
title: "Error!", title: "Error!",
message: "Unable to create cycle in past date. Please enter a valid date.", message: "Unable to create cycle in past date. Please enter a valid date.",
}); });
reset({ ...cycleDetails });
return; return;
} }
@ -147,7 +154,6 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
title: "Success!", title: "Success!",
message: "Cycle updated successfully.", message: "Cycle updated successfully.",
}); });
return;
} else { } else {
setToastAlert({ setToastAlert({
type: "error", type: "error",
@ -155,8 +161,10 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
message: message:
"You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates", "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
}); });
return;
} }
reset({ ...cycleDetails });
return;
} }
const isDateValid = await dateChecker({ const isDateValid = await dateChecker({
@ -181,6 +189,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
message: message:
"You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates", "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
}); });
reset({ ...cycleDetails });
} }
} }
}; };
@ -188,6 +197,8 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
const handleEndDateChange = async (date: string) => { const handleEndDateChange = async (date: string) => {
setValue("end_date", date); setValue("end_date", date);
if (!watch("start_date") || watch("start_date") === "") startDateButtonRef.current?.click();
if (watch("start_date") && watch("end_date") && watch("start_date") !== "" && watch("start_date") !== "") { if (watch("start_date") && watch("end_date") && watch("start_date") !== "" && watch("start_date") !== "") {
if (!isDateGreaterThanToday(`${watch("end_date")}`)) { if (!isDateGreaterThanToday(`${watch("end_date")}`)) {
setToastAlert({ setToastAlert({
@ -195,6 +206,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
title: "Error!", title: "Error!",
message: "Unable to create cycle in past date. Please enter a valid date.", message: "Unable to create cycle in past date. Please enter a valid date.",
}); });
reset({ ...cycleDetails });
return; return;
} }
@ -215,7 +227,6 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
title: "Success!", title: "Success!",
message: "Cycle updated successfully.", message: "Cycle updated successfully.",
}); });
return;
} else { } else {
setToastAlert({ setToastAlert({
type: "error", type: "error",
@ -223,8 +234,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
message: message:
"You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates", "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
}); });
return;
} }
reset({ ...cycleDetails });
return;
} }
const isDateValid = await dateChecker({ const isDateValid = await dateChecker({
@ -249,6 +261,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
message: message:
"You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates", "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
}); });
reset({ ...cycleDetails });
} }
} }
}; };
@ -387,50 +400,56 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex items-center justify-start gap-1"> <div className="flex items-center justify-start gap-1">
<div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300"> <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
<CalendarClock className="h-4 w-4" /> <CalendarClock className="h-4 w-4" />
<span className="text-base">Start Date</span> <span className="text-base">Start date</span>
</div> </div>
<div className="relative flex w-1/2 items-center rounded-sm"> <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 className="flex h-full w-full items-center justify-center rounded-lg">
<Popover.Button {({ close }) => (
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" <Popover.Button
}`} ref={startDateButtonRef}
disabled={isCompleted || !isEditingAllowed} 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"
<span }`}
className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${ disabled={isCompleted || !isEditingAllowed}
watch("start_date") ? "" : "text-custom-text-400" >
}`} <span
> className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
{renderFormattedDate(startDate) ?? "No date selected"} watch("start_date") ? "" : "text-custom-text-400"
</span> }`}
</Popover.Button> >
{renderFormattedDate(startDate) ?? "No date selected"}
</span>
</Popover.Button>
<Transition <Transition
as={React.Fragment} as={React.Fragment}
enter="transition ease-out duration-200" enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1" enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0" enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150" leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1" leaveTo="opacity-0 translate-y-1"
> >
<Popover.Panel className="absolute right-0 top-10 z-20 transform overflow-hidden"> <Popover.Panel className="absolute right-0 top-10 z-20 transform overflow-hidden">
<CustomRangeDatePicker <CustomRangeDatePicker
value={watch("start_date") ? watch("start_date") : cycleDetails?.start_date} value={watch("start_date") ? watch("start_date") : cycleDetails?.start_date}
onChange={(val) => { onChange={(val) => {
if (val) { if (val) {
setTrackElement("CYCLE_PAGE_SIDEBAR_START_DATE_BUTTON"); setTrackElement("CYCLE_PAGE_SIDEBAR_START_DATE_BUTTON");
handleStartDateChange(val); handleStartDateChange(val);
} close();
}} }
startDate={watch("start_date") ?? watch("end_date") ?? null} }}
endDate={watch("end_date") ?? watch("start_date") ?? null} startDate={watch("start_date") ?? watch("end_date") ?? null}
maxDate={new Date(`${watch("end_date")}`)} endDate={watch("end_date") ?? watch("start_date") ?? null}
selectsStart={watch("end_date") ? true : false} maxDate={new Date(`${watch("end_date")}`)}
/> selectsStart={watch("end_date") ? true : false}
</Popover.Panel> />
</Transition> </Popover.Panel>
</Transition>
</>
)}
</Popover> </Popover>
</div> </div>
</div> </div>
@ -438,52 +457,56 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex items-center justify-start gap-1"> <div className="flex items-center justify-start gap-1">
<div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300"> <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
<CalendarCheck2 className="h-4 w-4" /> <CalendarCheck2 className="h-4 w-4" />
<span className="text-base">Target Date</span> <span className="text-base">Target date</span>
</div> </div>
<div className="relative flex w-1/2 items-center rounded-sm"> <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 className="flex h-full w-full items-center justify-center rounded-lg">
<> {({ close }) => (
<Popover.Button <>
className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${ <Popover.Button
isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed" ref={endDateButtonRef}
}`} className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
disabled={isCompleted || !isEditingAllowed} isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
>
<span
className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
watch("end_date") ? "" : "text-custom-text-400"
}`} }`}
disabled={isCompleted || !isEditingAllowed}
> >
{renderFormattedDate(endDate) ?? "No date selected"} <span
</span> className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
</Popover.Button> watch("end_date") ? "" : "text-custom-text-400"
}`}
>
{renderFormattedDate(endDate) ?? "No date selected"}
</span>
</Popover.Button>
<Transition <Transition
as={React.Fragment} as={React.Fragment}
enter="transition ease-out duration-200" enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1" enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0" enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150" leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1" leaveTo="opacity-0 translate-y-1"
> >
<Popover.Panel className="absolute right-0 top-10 z-20 transform overflow-hidden"> <Popover.Panel className="absolute right-0 top-10 z-20 transform overflow-hidden">
<CustomRangeDatePicker <CustomRangeDatePicker
value={watch("end_date") ? watch("end_date") : cycleDetails?.end_date} value={watch("end_date") ? watch("end_date") : cycleDetails?.end_date}
onChange={(val) => { onChange={(val) => {
if (val) { if (val) {
setTrackElement("CYCLE_PAGE_SIDEBAR_END_DATE_BUTTON"); setTrackElement("CYCLE_PAGE_SIDEBAR_END_DATE_BUTTON");
handleEndDateChange(val); handleEndDateChange(val);
} close();
}} }
startDate={watch("start_date") ?? watch("end_date") ?? null} }}
endDate={watch("end_date") ?? watch("start_date") ?? null} startDate={watch("start_date") ?? watch("end_date") ?? null}
minDate={new Date(`${watch("start_date")}`)} endDate={watch("end_date") ?? watch("start_date") ?? null}
selectsEnd={watch("start_date") ? true : false} minDate={new Date(`${watch("start_date")}`)}
/> selectsEnd={watch("start_date") ? true : false}
</Popover.Panel> />
</Transition> </Popover.Panel>
</> </Transition>
</>
)}
</Popover> </Popover>
</div> </div>
</div> </div>

205
web/components/modules/sidebar.tsx
View File

@ -1,20 +1,8 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import { Disclosure, Popover, Transition } from "@headlessui/react"; import { Disclosure, Popover, Transition } from "@headlessui/react";
// hooks
import { useModule, useUser } from "hooks/store";
// hooks
import useToast from "hooks/use-toast";
// components
import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
import { DeleteModuleModal } from "components/modules";
import ProgressChart from "components/core/sidebar/progress-chart";
// ui
import { CustomRangeDatePicker } from "components/ui";
import { CustomMenu, Loader, LayersIcon, CustomSelect, ModuleStatusIcon, UserGroupIcon } from "@plane/ui";
// icon
import { import {
AlertCircle, AlertCircle,
CalendarCheck2, CalendarCheck2,
@ -27,6 +15,17 @@ import {
Trash2, Trash2,
UserCircle2, UserCircle2,
} from "lucide-react"; } from "lucide-react";
// hooks
import { useModule, useUser } from "hooks/store";
import useToast from "hooks/use-toast";
// components
import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
import { DeleteModuleModal } from "components/modules";
import ProgressChart from "components/core/sidebar/progress-chart";
import { ProjectMemberDropdown } from "components/dropdowns";
// ui
import { CustomRangeDatePicker } from "components/ui";
import { CustomMenu, Loader, LayersIcon, CustomSelect, ModuleStatusIcon, UserGroupIcon } from "@plane/ui";
// helpers // helpers
import { isDateGreaterThanToday, renderFormattedPayloadDate, renderFormattedDate } from "helpers/date-time.helper"; import { isDateGreaterThanToday, renderFormattedPayloadDate, renderFormattedDate } from "helpers/date-time.helper";
import { copyUrlToClipboard } from "helpers/string.helper"; import { copyUrlToClipboard } from "helpers/string.helper";
@ -35,7 +34,6 @@ import { ILinkDetails, IModule, ModuleLink } from "@plane/types";
// constant // constant
import { MODULE_STATUS } from "constants/module"; import { MODULE_STATUS } from "constants/module";
import { EUserProjectRoles } from "constants/project"; import { EUserProjectRoles } from "constants/project";
import { ProjectMemberDropdown } from "components/dropdowns";
const defaultValues: Partial<IModule> = { const defaultValues: Partial<IModule> = {
lead: "", lead: "",
@ -57,6 +55,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
const [moduleDeleteModal, setModuleDeleteModal] = useState(false); const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
const [moduleLinkModal, setModuleLinkModal] = useState(false); const [moduleLinkModal, setModuleLinkModal] = useState(false);
const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<ILinkDetails | null>(null); const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<ILinkDetails | null>(null);
// refs
const startDateButtonRef = useRef<HTMLButtonElement | null>(null);
const endDateButtonRef = useRef<HTMLButtonElement | null>(null);
// router // router
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId, peekModule } = router.query; const { workspaceSlug, projectId, peekModule } = router.query;
@ -164,6 +165,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
const handleStartDateChange = async (date: string) => { const handleStartDateChange = async (date: string) => {
setValue("start_date", date); setValue("start_date", date);
if (!watch("target_date") || watch("target_date") === "") endDateButtonRef.current?.click();
if (watch("start_date") && watch("target_date") && watch("start_date") !== "" && watch("start_date") !== "") { if (watch("start_date") && watch("target_date") && watch("start_date") !== "" && watch("start_date") !== "") {
if (!isDateGreaterThanToday(`${watch("target_date")}`)) { if (!isDateGreaterThanToday(`${watch("target_date")}`)) {
setToastAlert({ setToastAlert({
@ -171,6 +174,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
title: "Error!", title: "Error!",
message: "Unable to create module in past date. Please enter a valid date.", message: "Unable to create module in past date. Please enter a valid date.",
}); });
reset({
...moduleDetails,
});
return; return;
} }
@ -189,6 +195,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
const handleEndDateChange = async (date: string) => { const handleEndDateChange = async (date: string) => {
setValue("target_date", date); setValue("target_date", date);
if (!watch("start_date") || watch("start_date") === "") endDateButtonRef.current?.click();
if (watch("start_date") && watch("target_date") && watch("start_date") !== "" && watch("start_date") !== "") { if (watch("start_date") && watch("target_date") && watch("start_date") !== "" && watch("start_date") !== "") {
if (!isDateGreaterThanToday(`${watch("target_date")}`)) { if (!isDateGreaterThanToday(`${watch("target_date")}`)) {
setToastAlert({ setToastAlert({
@ -196,6 +204,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
title: "Error!", title: "Error!",
message: "Unable to create module in past date. Please enter a valid date.", message: "Unable to create module in past date. Please enter a valid date.",
}); });
reset({
...moduleDetails,
});
return; return;
} }
@ -355,49 +366,55 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300"> <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
<CalendarClock className="h-4 w-4" /> <CalendarClock className="h-4 w-4" />
<span className="text-base">Start Date</span> <span className="text-base">Start date</span>
</div> </div>
<div className="relative flex w-1/2 items-center rounded-sm"> <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 className="flex h-full w-full items-center justify-center rounded-lg">
<Popover.Button {({ close }) => (
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" <Popover.Button
}`} ref={startDateButtonRef}
disabled={!isEditingAllowed} 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"
<span }`}
className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${ disabled={!isEditingAllowed}
watch("start_date") ? "" : "text-custom-text-400" >
}`} <span
> className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
{renderFormattedDate(startDate) ?? "No date selected"} watch("start_date") ? "" : "text-custom-text-400"
</span> }`}
</Popover.Button> >
{renderFormattedDate(startDate) ?? "No date selected"}
</span>
</Popover.Button>
<Transition <Transition
as={React.Fragment} as={React.Fragment}
enter="transition ease-out duration-200" enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1" enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0" enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150" leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1" leaveTo="opacity-0 translate-y-1"
> >
<Popover.Panel className="absolute right-0 top-10 z-20 transform overflow-hidden"> <Popover.Panel className="absolute right-0 top-10 z-20 transform overflow-hidden">
<CustomRangeDatePicker <CustomRangeDatePicker
value={watch("start_date") ? watch("start_date") : moduleDetails?.start_date} value={watch("start_date") ? watch("start_date") : moduleDetails?.start_date}
onChange={(val) => { onChange={(val) => {
if (val) { if (val) {
handleStartDateChange(val); handleStartDateChange(val);
} close();
}} }
startDate={watch("start_date") ?? watch("target_date") ?? null} }}
endDate={watch("target_date") ?? watch("start_date") ?? null} startDate={watch("start_date") ?? watch("target_date") ?? null}
maxDate={new Date(`${watch("target_date")}`)} endDate={watch("target_date") ?? watch("start_date") ?? null}
selectsStart={watch("target_date") ? true : false} maxDate={new Date(`${watch("target_date")}`)}
/> selectsStart={watch("target_date") ? true : false}
</Popover.Panel> />
</Transition> </Popover.Panel>
</Transition>
</>
)}
</Popover> </Popover>
</div> </div>
</div> </div>
@ -405,51 +422,55 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex items-center justify-start gap-1"> <div className="flex items-center justify-start gap-1">
<div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300"> <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
<CalendarCheck2 className="h-4 w-4" /> <CalendarCheck2 className="h-4 w-4" />
<span className="text-base">Target Date</span> <span className="text-base">Target date</span>
</div> </div>
<div className="relative flex w-1/2 items-center rounded-sm"> <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 className="flex h-full w-full items-center justify-center rounded-lg">
<> {({ close }) => (
<Popover.Button <>
className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${ <Popover.Button
isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed" ref={endDateButtonRef}
}`} className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
disabled={!isEditingAllowed} isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
>
<span
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"
}`} }`}
disabled={!isEditingAllowed}
> >
{renderFormattedDate(endDate) ?? "No date selected"} <span
</span> className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
</Popover.Button> watch("target_date") ? "" : "text-custom-text-400"
}`}
>
{renderFormattedDate(endDate) ?? "No date selected"}
</span>
</Popover.Button>
<Transition <Transition
as={React.Fragment} as={React.Fragment}
enter="transition ease-out duration-200" enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1" enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0" enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150" leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1" leaveTo="opacity-0 translate-y-1"
> >
<Popover.Panel className="absolute right-0 top-10 z-20 transform overflow-hidden"> <Popover.Panel className="absolute right-0 top-10 z-20 transform overflow-hidden">
<CustomRangeDatePicker <CustomRangeDatePicker
value={watch("target_date") ? watch("target_date") : moduleDetails?.target_date} value={watch("target_date") ? watch("target_date") : moduleDetails?.target_date}
onChange={(val) => { onChange={(val) => {
if (val) { if (val) {
handleEndDateChange(val); handleEndDateChange(val);
} close();
}} }
startDate={watch("start_date") ?? watch("target_date") ?? null} }}
endDate={watch("target_date") ?? watch("start_date") ?? null} startDate={watch("start_date") ?? watch("target_date") ?? null}
minDate={new Date(`${watch("start_date")}`)} endDate={watch("target_date") ?? watch("start_date") ?? null}
selectsEnd={watch("start_date") ? true : false} minDate={new Date(`${watch("start_date")}`)}
/> selectsEnd={watch("start_date") ? true : false}
</Popover.Panel> />
</Transition> </Popover.Panel>
</> </Transition>
</>
)}
</Popover> </Popover>
</div> </div>
</div> </div>

4
web/components/profile/index.ts
View File

@ -1,5 +1,5 @@
export * from "./overview"; export * from "./overview";
export * from "./navbar"; export * from "./navbar";
export * from "./sidebar";
export * from "./profile-issues-filter"; export * from "./profile-issues-filter";
export * from "./sidebar";
export * from "./time";

18
web/components/profile/sidebar.tsx
View File

@ -7,6 +7,8 @@ import { observer } from "mobx-react-lite";
import { useUser } from "hooks/store"; import { useUser } from "hooks/store";
// services // services
import { UserService } from "services/user.service"; import { UserService } from "services/user.service";
// components
import { ProfileSidebarTime } from "./time";
// ui // ui
import { Loader, Tooltip } from "@plane/ui"; import { Loader, Tooltip } from "@plane/ui";
// icons // icons
@ -34,16 +36,6 @@ export const ProfileSidebar = observer(() => {
: null : null
); );
// Create a date object for the current time in the specified timezone
const currentTime = new Date();
const formatter = new Intl.DateTimeFormat("en-US", {
timeZone: userProjectsData?.user_data.user_timezone,
hour12: false, // Use 24-hour format
hour: "2-digit",
minute: "2-digit",
});
const timeString = formatter.format(currentTime);
const userDetails = [ const userDetails = [
{ {
label: "Joined on", label: "Joined on",
@ -51,11 +43,7 @@ export const ProfileSidebar = observer(() => {
}, },
{ {
label: "Timezone", label: "Timezone",
value: ( value: <ProfileSidebarTime timeZone={userProjectsData?.user_data.user_timezone} />,
<span>
{timeString} <span className="text-custom-text-200">{userProjectsData?.user_data.user_timezone}</span>
</span>
),
}, },
]; ];

27
web/components/profile/time.tsx Normal file
View File

@ -0,0 +1,27 @@
// hooks
import { useCurrentTime } from "hooks/use-current-time";
type Props = {
timeZone: string | undefined;
};
export const ProfileSidebarTime: React.FC<Props> = (props) => {
const { timeZone } = props;
// current time hook
const { currentTime } = useCurrentTime();
// Create a date object for the current time in the specified timezone
const formatter = new Intl.DateTimeFormat("en-US", {
timeZone: timeZone,
hour12: false, // Use 24-hour format
hour: "2-digit",
minute: "2-digit",
});
const timeString = formatter.format(currentTime);
return (
<span>
{timeString} <span className="text-custom-text-200">{timeZone}</span>
</span>
);
};

7
web/components/user/user-greetings.tsx
View File

@ -1,4 +1,7 @@
import { FC } from "react"; import { FC } from "react";
// hooks
import { useCurrentTime } from "hooks/use-current-time";
// types
import { IUser } from "@plane/types"; import { IUser } from "@plane/types";
export interface IUserGreetingsView { export interface IUserGreetingsView {
@ -7,8 +10,8 @@ export interface IUserGreetingsView {
export const UserGreetingsView: FC<IUserGreetingsView> = (props) => { export const UserGreetingsView: FC<IUserGreetingsView> = (props) => {
const { user } = props; const { user } = props;
// current time hook
const currentTime = new Date(); const { currentTime } = useCurrentTime();
const hour = new Intl.DateTimeFormat("en-US", { const hour = new Intl.DateTimeFormat("en-US", {
hour12: false, hour12: false,

17
web/hooks/use-current-time.tsx Normal file
View File

@ -0,0 +1,17 @@
import { useEffect, useState } from "react";
export const useCurrentTime = () => {
const [currentTime, setCurrentTime] = useState(new Date());
// update the current time every second
useEffect(() => {
const intervalId = setInterval(() => {
setCurrentTime(new Date());
}, 1000);
return () => clearInterval(intervalId);
}, []);
return {
currentTime,
};
};