From 1c2761000a9ab29410f6a6bc90627ba22dd12320 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Sat, 25 Nov 2023 21:18:16 +0530 Subject: [PATCH] fix: module sidebar date select fix and code refactor (#2872) --- web/components/cycles/sidebar.tsx | 16 +--- web/components/modules/sidebar.tsx | 149 +++++++++++++++++++++++++---- 2 files changed, 135 insertions(+), 30 deletions(-) diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx index cecdae5ec..c41825c73 100644 --- a/web/components/cycles/sidebar.tsx +++ b/web/components/cycles/sidebar.tsx @@ -112,13 +112,7 @@ export const CycleDetailsSidebar: React.FC = observer((props) => { const handleStartDateChange = async (date: string) => { setValue("start_date", date); - if ( - watch("start_date") && - watch("end_date") && - watch("start_date") !== "" && - watch("end_date") && - watch("start_date") !== "" - ) { + if (watch("start_date") && watch("end_date") && watch("start_date") !== "" && watch("start_date") !== "") { if (!isDateGreaterThanToday(`${watch("end_date")}`)) { setToastAlert({ type: "error", @@ -186,13 +180,7 @@ export const CycleDetailsSidebar: React.FC = observer((props) => { const handleEndDateChange = async (date: string) => { setValue("end_date", date); - if ( - watch("start_date") && - watch("end_date") && - watch("start_date") !== "" && - watch("end_date") && - watch("start_date") !== "" - ) { + if (watch("start_date") && watch("end_date") && watch("start_date") !== "" && watch("start_date") !== "") { if (!isDateGreaterThanToday(`${watch("end_date")}`)) { setToastAlert({ type: "error", diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx index 4cc449534..43ff0787b 100644 --- a/web/components/modules/sidebar.tsx +++ b/web/components/modules/sidebar.tsx @@ -3,7 +3,7 @@ import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { mutate } from "swr"; import { Controller, useForm } from "react-hook-form"; -import { Disclosure, Transition } from "@headlessui/react"; +import { Disclosure, Popover, Transition } from "@headlessui/react"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // services @@ -15,11 +15,17 @@ import { LinkModal, LinksList, SidebarProgressStats } from "components/core"; import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules"; import ProgressChart from "components/core/sidebar/progress-chart"; // ui +import { CustomRangeDatePicker } from "components/ui"; import { CustomMenu, Loader, LayersIcon, CustomSelect, ModuleStatusIcon } from "@plane/ui"; // icon -import { AlertCircle, ChevronDown, ChevronRight, Info, LinkIcon, Plus, Trash2 } from "lucide-react"; +import { AlertCircle, ChevronDown, ChevronRight, Info, LinkIcon, MoveRight, Plus, Trash2 } from "lucide-react"; // helpers -import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper"; +import { + isDateGreaterThanToday, + renderDateFormat, + renderShortDate, + renderShortMonthDate, +} from "helpers/date-time.helper"; import { copyUrlToClipboard } from "helpers/string.helper"; // types import { linkDetails, IModule, ModuleLink } from "types"; @@ -62,7 +68,7 @@ export const ModuleDetailsSidebar: React.FC = observer((props) => { const { setToastAlert } = useToast(); - const { reset, control } = useForm({ + const { setValue, watch, reset, control } = useForm({ defaultValues, }); @@ -178,6 +184,56 @@ export const ModuleDetailsSidebar: React.FC = observer((props) => { }); }; + const handleStartDateChange = async (date: string) => { + setValue("start_date", date); + + if (watch("start_date") && watch("target_date") && watch("start_date") !== "" && watch("start_date") !== "") { + if (!isDateGreaterThanToday(`${watch("target_date")}`)) { + setToastAlert({ + type: "error", + title: "Error!", + message: "Unable to create module in past date. Please enter a valid date.", + }); + return; + } + + submitChanges({ + start_date: renderDateFormat(`${watch("start_date")}`), + target_date: renderDateFormat(`${watch("target_date")}`), + }); + setToastAlert({ + type: "success", + title: "Success!", + message: "Module updated successfully.", + }); + } + }; + + const handleEndDateChange = async (date: string) => { + setValue("target_date", date); + + if (watch("start_date") && watch("target_date") && watch("start_date") !== "" && watch("start_date") !== "") { + if (!isDateGreaterThanToday(`${watch("target_date")}`)) { + setToastAlert({ + type: "error", + title: "Error!", + message: "Unable to create module in past date. Please enter a valid date.", + }); + return; + } + + submitChanges({ + start_date: renderDateFormat(`${watch("start_date")}`), + target_date: renderDateFormat(`${watch("target_date")}`), + }); + setToastAlert({ + type: "success", + title: "Success!", + message: "Module updated successfully.", + }); + } + }; + useEffect(() => { if (moduleDetails) reset({ @@ -301,10 +357,71 @@ export const ModuleDetailsSidebar: React.FC = observer((props) => { )} /> - - {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "} - {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")} - +
+ + + {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} + + + + + { + if (val) { + handleStartDateChange(val); + } + }} + startDate={watch("start_date") ? `${watch("start_date")}` : null} + endDate={watch("target_date") ? `${watch("target_date")}` : null} + maxDate={new Date(`${watch("target_date")}`)} + selectsStart + /> + + + + + + <> + + {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")} + + + + + { + if (val) { + handleEndDateChange(val); + } + }} + startDate={watch("start_date") ? `${watch("start_date")}` : null} + endDate={watch("target_date") ? `${watch("target_date")}` : null} + minDate={new Date(`${watch("start_date")}`)} + selectsEnd + /> + + + + +
@@ -438,14 +555,14 @@ export const ModuleDetailsSidebar: React.FC = observer((props) => { -
- - {({ open }) => ( -
- -
- Links -
+
+ + {({ open }) => ( +
+ +
+ Links +