From e6a1f3471361c1874dfaaa06f8c79427c72b2cb5 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Wed, 22 Nov 2023 15:34:39 +0530 Subject: [PATCH] fix: module and cycle sidebar loading state (#2831) --- web/components/cycles/sidebar.tsx | 407 ++++++++++++------------ web/components/modules/sidebar.tsx | 479 ++++++++++++++--------------- 2 files changed, 441 insertions(+), 445 deletions(-) diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx index 17e3c0d19..cecdae5ec 100644 --- a/web/components/cycles/sidebar.tsx +++ b/web/components/cycles/sidebar.tsx @@ -270,7 +270,20 @@ export const CycleDetailsSidebar: React.FC = observer((props) => { ? Math.round((cycleDetails.completed_issues / cycleDetails.total_issues) * 100) : null; - if (!cycleDetails) return null; + if (!cycleDetails) + return ( + +
+ + +
+
+ + + +
+ + ); const endDate = new Date(cycleDetails.end_date ?? ""); const startDate = new Date(cycleDetails.start_date ?? ""); @@ -300,57 +313,91 @@ export const CycleDetailsSidebar: React.FC = observer((props) => { /> )} - {cycleDetails ? ( - <> -
-
- -
-
- - {!isCompleted && ( - - setCycleDeleteModal(true)}> - - - Delete cycle - - - - )} -
+ <> +
+
+
+
+ + {!isCompleted && ( + + setCycleDeleteModal(true)}> + + + Delete cycle + + + + )} +
+
-
-

{cycleDetails.name}

-
- {currentCycle && ( - +

{cycleDetails.name}

+
+ {currentCycle && ( + + {currentCycle.value === "current" + ? `${findHowManyDaysLeft(cycleDetails.end_date ?? new Date())} ${currentCycle.label}` + : `${currentCycle.label}`} + + )} +
+ + - {currentCycle.value === "current" - ? `${findHowManyDaysLeft(cycleDetails.end_date ?? new Date())} ${currentCycle.label}` - : `${currentCycle.label}`} - - )} -
- + {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} + + + + + { + if (val) { + handleStartDateChange(val); + } + }} + startDate={watch("start_date") ? `${watch("start_date")}` : null} + endDate={watch("end_date") ? `${watch("end_date")}` : null} + maxDate={new Date(`${watch("end_date")}`)} + selectsStart + /> + + + + + + <> - {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} + {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")} = observer((props) => { leaveFrom="opacity-100 translate-y-0" leaveTo="opacity-0 translate-y-1" > - + { if (val) { - handleStartDateChange(val); + handleEndDateChange(val); } }} startDate={watch("start_date") ? `${watch("start_date")}` : null} endDate={watch("end_date") ? `${watch("end_date")}` : null} - maxDate={new Date(`${watch("end_date")}`)} - selectsStart + minDate={new Date(`${watch("start_date")}`)} + selectsEnd /> - - - - <> - - {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")} - + + +
+
+
- - - { - if (val) { - handleEndDateChange(val); - } - }} - startDate={watch("start_date") ? `${watch("start_date")}` : null} - endDate={watch("end_date") ? `${watch("end_date")}` : null} - minDate={new Date(`${watch("start_date")}`)} - selectsEnd - /> - - - - + {cycleDetails.description && ( + + {cycleDetails.description} + + )} + +
+
+
+ + Lead +
+
+
+ + {cycleDetails.owned_by.display_name}
- {cycleDetails.description && ( - - {cycleDetails.description} - - )} - -
-
-
- - Lead -
-
-
- - {cycleDetails.owned_by.display_name} -
-
+
+
+ + Issues
- -
-
- - Issues -
-
- {issueCount} -
+
+ {issueCount}
+
-
-
- - {({ open }) => ( -
- -
- Progress -
+
+
+ + {({ open }) => ( +
+ +
+ Progress +
-
- {progressPercentage ? ( - - {progressPercentage ? `${progressPercentage}%` : ""} +
+ {progressPercentage ? ( + + {progressPercentage ? `${progressPercentage}%` : ""} + + ) : ( + "" + )} + {isStartValid && isEndValid ? ( +
+ + + +
+ {isStartValid && isEndValid ? ( +
+
+
+
+ + Ideal +
+
+ + Current +
+
+
+
+ +
+
) : ( "" )} - {isStartValid && isEndValid ? ( -
- )} - -
+ + +
+ )} +
- - ) : ( - -
- - -
-
- - - -
- - )} +
+ ); }); diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx index df42fc0e4..4cc449534 100644 --- a/web/components/modules/sidebar.tsx +++ b/web/components/modules/sidebar.tsx @@ -198,7 +198,20 @@ export const ModuleDetailsSidebar: React.FC = observer((props) => { setModuleLinkModal(true); }; - if (!moduleDetails) return null; + if (!moduleDetails) + return ( + +
+ + +
+
+ + + +
+ + ); const startDate = new Date(moduleDetails.start_date ?? ""); const endDate = new Date(moduleDetails.target_date ?? ""); @@ -230,200 +243,200 @@ export const ModuleDetailsSidebar: React.FC = observer((props) => { updateIssueLink={handleUpdateLink} /> setModuleDeleteModal(false)} data={moduleDetails} /> - {module ? ( - <> -
-
- -
-
- - - setModuleDeleteModal(true)}> - - - Delete module - - - -
+ + <> +
+
+
- -
-

{moduleDetails.name}

-
- ( - - {moduleStatus?.label ?? "Backlog"} - - } - value={value} - onChange={(value: any) => { - submitChanges({ status: value }); - }} - > - {MODULE_STATUS.map((status) => ( - -
- - {status.label} -
- - ))} - - )} - /> - - - {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "} - {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")} - -
+
+ + + setModuleDeleteModal(true)}> + + + Delete module + + +
+
- {moduleDetails.description && ( - - {moduleDetails.description} - - )} - -
+
+

{moduleDetails.name}

+
( - { - submitChanges({ lead: val }); - }} - /> - )} - /> - ( - { - submitChanges({ members: val }); - }} - /> - )} - /> - -
-
- - Issues -
-
- {issueCount} -
-
-
- -
-
- - {({ open }) => ( -
- -
- Progress + {moduleStatus?.label ?? "Backlog"} + + } + value={value} + onChange={(value: any) => { + submitChanges({ status: value }); + }} + > + {MODULE_STATUS.map((status) => ( + +
+ + {status.label}
+ + ))} + + )} + /> -
- {progressPercentage ? ( - - {progressPercentage ? `${progressPercentage}%` : ""} + + {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "} + {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")} + +
+
+ + {moduleDetails.description && ( + + {moduleDetails.description} + + )} + +
+ ( + { + submitChanges({ lead: val }); + }} + /> + )} + /> + ( + { + submitChanges({ members: val }); + }} + /> + )} + /> + +
+
+ + Issues +
+
+ {issueCount} +
+
+
+ +
+
+ + {({ open }) => ( +
+ +
+ Progress +
+ +
+ {progressPercentage ? ( + + {progressPercentage ? `${progressPercentage}%` : ""} + + ) : ( + "" + )} + {isStartValid && isEndValid ? ( +
+ + + +
+ {isStartValid && isEndValid ? ( +
+
+
+
+ + Ideal +
+
+ + Current +
+
+
+
+ +
+
) : ( "" )} - {isStartValid && isEndValid ? ( -
- )} - -
+ + +
+ )} + +
@@ -434,46 +447,16 @@ export const ModuleDetailsSidebar: React.FC = observer((props) => { Links
-
-
- - - -
- {userRole && moduleDetails.link_module && moduleDetails.link_module.length > 0 ? ( - <> -
- -
- - - - ) : ( -
-
- - No links added yet -
+
+
+ + + +
+ {userRole && moduleDetails.link_module && moduleDetails.link_module.length > 0 ? ( + <> +
- )} -
- - -
- )} - -
+ + + + ) : ( +
+
+ + No links added yet +
+ +
+ )} +
+ + +
+ )} +
- - ) : ( - -
- - -
-
- - - -
- - )} +
+ ); });