From 09eab9e6bfab7b1c79e84ddaa0faf35c3d4e1a4d Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Tue, 7 Mar 2023 15:04:02 +0530 Subject: [PATCH] style : module sidebar (#385) * style: new cycle sidebar * style: other information section * style: progress bar bg fix * fix: cycle card bug fix * style: progress chart * style: chart tooltip * style: module link tab added in sidebar stats * style: lead and member select --- .../core/sidebar/sidebar-progress-stats.tsx | 119 ++-- .../modules/sidebar-select/select-lead.tsx | 11 +- .../modules/sidebar-select/select-members.tsx | 8 +- apps/app/components/modules/sidebar.tsx | 544 +++++++++++------- 4 files changed, 418 insertions(+), 264 deletions(-) diff --git a/apps/app/components/core/sidebar/sidebar-progress-stats.tsx b/apps/app/components/core/sidebar/sidebar-progress-stats.tsx index 5cc2b2ed8..8c9c7028b 100644 --- a/apps/app/components/core/sidebar/sidebar-progress-stats.tsx +++ b/apps/app/components/core/sidebar/sidebar-progress-stats.tsx @@ -13,19 +13,24 @@ import projectService from "services/project.service"; // hooks import useLocalStorage from "hooks/use-local-storage"; // components -import { SingleProgressStats } from "components/core"; +import { LinksList, SingleProgressStats } from "components/core"; // ui import { Avatar } from "components/ui"; // icons import User from "public/user.png"; +import { PlusIcon } from "@heroicons/react/24/outline"; // types -import { IIssue, IIssueLabels } from "types"; +import { IIssue, IIssueLabels, IModule, UserAuth } from "types"; // fetch-keys import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys"; // types type Props = { groupedIssues: any; issues: IIssue[]; + module?: IModule; + setModuleLinkModal?: any; + handleDeleteLink?: any; + userAuth?: UserAuth; }; const stateGroupColours: { @@ -38,7 +43,14 @@ const stateGroupColours: { completed: "#096e8d", }; -export const SidebarProgressStats: React.FC = ({ groupedIssues, issues }) => { +export const SidebarProgressStats: React.FC = ({ + groupedIssues, + issues, + module, + setModuleLinkModal, + handleDeleteLink, + userAuth, +}) => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; @@ -60,14 +72,17 @@ export const SidebarProgressStats: React.FC = ({ groupedIssues, issues }) const currentValue = (tab: string | null) => { switch (tab) { + case "Links": + return 0; case "Assignees": - return 0; - case "Labels": return 1; - case "States": + case "Labels": return 2; + case "States": + return 3; + default: - return 0; + return 3; } }; return ( @@ -76,57 +91,91 @@ export const SidebarProgressStats: React.FC = ({ groupedIssues, issues }) onChange={(i) => { switch (i) { case 0: - return setTab("Assignees"); + return setTab("Links"); case 1: - return setTab("Labels"); + return setTab("Assignees"); case 2: + return setTab("Labels"); + case 3: return setTab("States"); default: - return setTab("Assignees"); + return setTab("States"); } }} > + {module ? ( + + `w-full rounded px-3 py-1 text-gray-900 ${ + selected ? " bg-theme text-white" : " hover:bg-hover-gray" + }` + } + > + Links + + ) : ( + "" + )} + - `rounded w-1/3 p-1 text-sm text-gray-900 ${ - selected - ? " bg-theme text-white" - : " hover:bg-hover-gray" - }` - } + className={({ selected }) => + `w-full rounded px-3 py-1 text-gray-900 ${ + selected ? " bg-theme text-white" : " hover:bg-hover-gray" + }` + } > Assignees - `rounded w-1/3 p-1 text-sm text-gray-900 ${ - selected - ? " bg-theme text-white" - : " hover:bg-hover-gray" - }` - } + className={({ selected }) => + `w-full rounded px-3 py-1 text-gray-900 ${ + selected ? " bg-theme text-white" : " hover:bg-hover-gray" + }` + } > Labels - `rounded w-1/3 p-1 text-sm text-gray-900 ${ - selected - ? " bg-theme text-white" - : " hover:bg-hover-gray" - }` - } + `w-full rounded px-3 py-1 text-gray-900 ${ + selected ? " bg-theme text-white" : " hover:bg-hover-gray" + }` + } > States - - + + {module ? ( + + +
+ {userAuth && module.link_module && module.link_module.length > 0 ? ( + + ) : null} +
+ + ) : ( + "" + )} + + {members?.map((member, index) => { const totalArray = issues?.filter((i) => i.assignees?.includes(member.member.id)); const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed"); @@ -173,7 +222,7 @@ export const SidebarProgressStats: React.FC = ({ groupedIssues, issues }) "" )} - + {issueLabels?.map((issue, index) => { const totalArray = issues?.filter((i) => i.labels?.includes(issue.id)); const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed"); @@ -199,7 +248,7 @@ export const SidebarProgressStats: React.FC = ({ groupedIssues, issues }) } })} - + {Object.keys(groupedIssues).map((group, index) => ( = ({ value, onChange }) => { const selectedOption = members?.find((m) => m.member.id === value)?.member; return ( -
-
- -

Lead

+
+ +
+ + Lead
= ({ value, onChange }) => { })) ?? []; return ( -
-
- -

Members

+
+
+ + Members
= ({ }); }; + const handleCopyText = () => { + const originURL = + typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; + + copyTextToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${module?.id}`) + .then(() => { + setToastAlert({ + type: "success", + title: "Module link copied to clipboard", + }); + }) + .catch(() => { + setToastAlert({ + type: "error", + title: "Some error occurred", + }); + }); + }; + useEffect(() => { if (module) reset({ @@ -178,243 +202,323 @@ export const ModuleDetailsSidebar: React.FC = ({
{module ? ( <> -
-
- ( - +
+
+ ( + + {capitalizeFirstLetter(`${watch("status")}`)} + + } + value={value} + onChange={(value: any) => { + submitChanges({ status: value }); + }} + > + {MODULE_STATUS.map((option) => ( + + {option.label} + + ))} + + )} + /> +
+
+ + {({ open }) => ( + <> + - - {watch("status")} - - } - value={value} - onChange={(value: any) => { - submitChanges({ status: value }); - }} - > - {MODULE_STATUS.map((option) => ( - - {option.label} - - ))} - - )} - /> -
-
- - {({ open }) => ( - <> - - - - {renderShortNumericDateFormat(`${module?.start_date}`) - ? renderShortNumericDateFormat(`${module?.start_date}`) - : "N/A"} - - + + + {renderShortNumericDateFormat(`${module.start_date}`) + ? renderShortNumericDateFormat(`${module.start_date}`) + : "N/A"} + + - - - { - submitChanges({ - start_date: renderDateFormat(date), - }); - setStartDateRange(date); - }} - selectsStart - startDate={startDateRange} - endDate={endDateRange} - inline - /> - - - - )} - - - {({ open }) => ( - <> - - - -{" "} - {renderShortNumericDateFormat(`${module?.target_date}`) - ? renderShortNumericDateFormat(`${module?.target_date}`) - : "N/A"} - - + + + { + submitChanges({ + start_date: renderDateFormat(date), + }); + setStartDateRange(date); + }} + selectsStart + startDate={startDateRange} + endDate={endDateRange} + maxDate={endDateRange} + shouldCloseOnSelect + inline + /> + + + + )} + + + + + + {({ open }) => ( + <> + + - - - { - submitChanges({ - target_date: renderDateFormat(date), - }); - setEndDateRange(date); - }} - selectsEnd - startDate={startDateRange} - endDate={endDateRange} - minDate={startDateRange} - inline - /> - - - - )} - + + {renderShortNumericDateFormat(`${module?.target_date}`) + ? renderShortNumericDateFormat(`${module?.target_date}`) + : "N/A"} + + + + + + { + submitChanges({ + target_date: renderDateFormat(date), + }); + setEndDateRange(date); + }} + selectsEnd + startDate={startDateRange} + endDate={endDateRange} + // minDate={startDateRange} + + inline + /> + + + + )} + +
-
-
-

{module.name}

-
- - -
-
-
-
- ( - { - submitChanges({ lead: val }); - }} - /> - )} - /> - ( - { - submitChanges({ members_list: val }); - }} - /> - )} - /> -
-
- -

Progress

+ +
+
+
+

{module.name}

+ + + + + Copy Link + + + setModuleDeleteModal(true)}> + + + Delete + + +
-
-
+ + + {module.description} + +
+ +
+ ( + { + submitChanges({ lead: value }); + }} + /> + )} + /> + ( + { + submitChanges({ members_list: val }); + }} + /> + )} + /> + +
+
+ + Progress +
+ +
+ {groupedIssues.completed.length}/{moduleIssues?.length}
- {groupedIssues.completed.length}/{moduleIssues?.length}
-
- {isStartValid && isEndValid ? ( - - ) : ( - "" - )} - {issues.length > 0 ? ( - - ) : ( - "" - )} + +
+ + {({ open }) => ( +
+
+
+ Progress + {!open && moduleIssues ? ( + + {Math.round( + (groupedIssues.completed.length / moduleIssues?.length) * 100 + )} + % + + ) : ( + "" + )} +
+ + + +
+ + + {isStartValid && isEndValid && moduleIssues ? ( +
+
+
+ + + + + Pending Issues -{" "} + {moduleIssues?.length - groupedIssues.completed.length}{" "} + +
+ +
+
+ + Ideal +
+
+ + Current +
+
+
+
+ +
+
+ ) : ( + "" + )} + + +
+ )} +
-
-
-

Links

- -
-
- {module.link_module && module.link_module.length > 0 ? ( - - ) : null} -
+ +
+ + {({ open }) => ( +
+
+
+ Other Information +
+ + + +
+ + + {issues.length > 0 ? ( + <> +
+ +
+ + ) : ( + "" + )} + + +
+ )} +
) : (