From 202096500e19ce874b6085cd3c69cd03d5222da7 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Mon, 20 Feb 2023 19:00:40 +0530 Subject: [PATCH] fix: ui changes (#306) * fix: sidebar date range * fix: renamed key with id in filters * fix: replace progress bar * chore: react progress bar package removed * fix: progress chart legends position * fix: progress chart legends alignment fix --- .../components/core/issues-view-filter.tsx | 2 +- .../core/sidebar/progress-chart.tsx | 20 +-- .../core/sidebar/single-progress-stats.tsx | 4 +- apps/app/components/cycles/sidebar.tsx | 148 ++++++++++------- apps/app/components/modules/sidebar.tsx | 150 +++++++++++------- apps/app/package.json | 1 - pnpm-lock.yaml | 10 -- 7 files changed, 190 insertions(+), 145 deletions(-) diff --git a/apps/app/components/core/issues-view-filter.tsx b/apps/app/components/core/issues-view-filter.tsx index dc29d714b..3ee207727 100644 --- a/apps/app/components/core/issues-view-filter.tsx +++ b/apps/app/components/core/issues-view-filter.tsx @@ -197,7 +197,7 @@ export const IssuesFilterView: React.FC = ({ issues }) => { }`} onClick={() => setProperties(key as keyof Properties)} > - {replaceUnderscoreIfSnakeCase(key)} + {key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)} ); })} diff --git a/apps/app/components/core/sidebar/progress-chart.tsx b/apps/app/components/core/sidebar/progress-chart.tsx index d787e7077..b0d5bb394 100644 --- a/apps/app/components/core/sidebar/progress-chart.tsx +++ b/apps/app/components/core/sidebar/progress-chart.tsx @@ -46,6 +46,16 @@ const ProgressChart: React.FC = ({ issues, start, end }) => { const ChartData = getChartData(); return (
+
+
+ + Ideal +
+
+ + Current +
+
= ({ issues, start, end }) => {
-
-
- - Ideal -
-
- - Current -
-
); }; diff --git a/apps/app/components/core/sidebar/single-progress-stats.tsx b/apps/app/components/core/sidebar/single-progress-stats.tsx index 4b3de9c9f..bb56e1545 100644 --- a/apps/app/components/core/sidebar/single-progress-stats.tsx +++ b/apps/app/components/core/sidebar/single-progress-stats.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { CircularProgressbar } from "react-circular-progressbar"; +import { ProgressBar } from "components/ui"; type TSingleProgressStatsProps = { title: any; @@ -18,7 +18,7 @@ export const SingleProgressStats: React.FC = ({
- + {Math.floor((completed / total) * 100)}%
diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx index a4f794f64..c61102fb1 100644 --- a/apps/app/components/cycles/sidebar.tsx +++ b/apps/app/components/cycles/sidebar.tsx @@ -7,9 +7,6 @@ import { mutate } from "swr"; // react-hook-form import { Controller, useForm } from "react-hook-form"; -// react-circular-progressbar -import { CircularProgressbar } from "react-circular-progressbar"; -import "react-circular-progressbar/dist/styles.css"; import { Popover, Transition } from "@headlessui/react"; import DatePicker from "react-datepicker"; // icons @@ -22,7 +19,7 @@ import { UserIcon, } from "@heroicons/react/24/outline"; // ui -import { CustomSelect, Loader } from "components/ui"; +import { CustomSelect, Loader, ProgressBar } from "components/ui"; // hooks import useToast from "hooks/use-toast"; // services @@ -148,61 +145,93 @@ export const CycleDetailsSidebar: React.FC = ({ issues, cycle, isOpen, cy )} />
- - {({ open }) => ( - <> - - - - {renderShortNumericDateFormat(`${cycle.start_date}`) - ? renderShortNumericDateFormat(`${cycle.start_date}`) - : "N/A"}{" "} - -{" "} - {renderShortNumericDateFormat(`${cycle.end_date}`) - ? renderShortNumericDateFormat(`${cycle.end_date}`) - : "N/A"} - - +
+ + {({ open }) => ( + <> + + + + {renderShortNumericDateFormat(`${cycle.start_date}`) + ? renderShortNumericDateFormat(`${cycle.start_date}`) + : "N/A"} + + - - - { - const [start, end] = dates; - submitChanges({ - start_date: renderDateFormat(start), - end_date: renderDateFormat(end), - }); - if (setStartDateRange) { - setStartDateRange(start); - } - if (setEndDateRange) { - setEndDateRange(end); - } - }} - startDate={startDateRange} - endDate={endDateRange} - selectsRange - inline - /> - - - - )} - + + + { + submitChanges({ + start_date: renderDateFormat(date), + }); + setStartDateRange(date); + }} + selectsStart + startDate={startDateRange} + endDate={endDateRange} + inline + /> + + + + )} + + + {({ open }) => ( + <> + + + -{" "} + {renderShortNumericDateFormat(`${cycle.end_date}`) + ? renderShortNumericDateFormat(`${cycle.end_date}`) + : "N/A"} + + + + + + { + submitChanges({ + end_date: renderDateFormat(date), + }); + setEndDateRange(date); + }} + selectsEnd + startDate={startDateRange} + endDate={endDateRange} + minDate={startDateRange} + inline + /> + + + + )} + +

{cycle.name}

@@ -278,10 +307,9 @@ export const CycleDetailsSidebar: React.FC = ({ issues, cycle, isOpen, cy
-
diff --git a/apps/app/components/modules/sidebar.tsx b/apps/app/components/modules/sidebar.tsx index 8e9f4aec7..f51c11a0b 100644 --- a/apps/app/components/modules/sidebar.tsx +++ b/apps/app/components/modules/sidebar.tsx @@ -16,8 +16,6 @@ import { Squares2X2Icon, TrashIcon, } from "@heroicons/react/24/outline"; -// progress-bar -import { CircularProgressbar } from "react-circular-progressbar"; import { Popover, Transition } from "@headlessui/react"; import DatePicker from "react-datepicker"; @@ -31,12 +29,11 @@ import { LinkModal, SidebarProgressStats } from "components/core"; import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules"; import ProgressChart from "components/core/sidebar/progress-chart"; -import "react-circular-progressbar/dist/styles.css"; // components // ui -import { CustomSelect, Loader } from "components/ui"; +import { CustomSelect, Loader, ProgressBar } from "components/ui"; // helpers -import { renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper"; +import { renderDateFormat, renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper"; import { copyTextToClipboard } from "helpers/string.helper"; import { groupBy } from "helpers/array.helper"; // types @@ -190,61 +187,93 @@ export const ModuleDetailsSidebar: React.FC = ({ issues, module, isOpen, )} />
- - {({ open }) => ( - <> - - - - {renderShortNumericDateFormat(`${module?.start_date}`) - ? renderShortNumericDateFormat(`${module?.start_date}`) - : "N/A"}{" "} - -{" "} - {renderShortNumericDateFormat(`${module?.target_date}`) - ? renderShortNumericDateFormat(`${module?.target_date}`) - : "N/A"} - - +
+ + {({ open }) => ( + <> + + + + {renderShortNumericDateFormat(`${module?.start_date}`) + ? renderShortNumericDateFormat(`${module?.start_date}`) + : "N/A"} + + - - - { - const [start, end] = dates; - submitChanges({ - start_date: start?.toISOString(), - target_date: end?.toISOString(), - }); - if (setStartDateRange) { - setStartDateRange(start); - } - if (setEndDateRange) { - setEndDateRange(end); - } - }} - startDate={startDateRange} - endDate={endDateRange} - selectsRange - inline - /> - - - - )} - + + + { + 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({ + target_date: renderDateFormat(date), + }); + setEndDateRange(date); + }} + selectsEnd + startDate={startDateRange} + endDate={endDateRange} + minDate={startDateRange} + inline + /> + + + + )} + +

{module.name}

@@ -297,10 +326,9 @@ export const ModuleDetailsSidebar: React.FC = ({ issues, module, isOpen,
-
diff --git a/apps/app/package.json b/apps/app/package.json index 5b0cccdcb..40e34182e 100644 --- a/apps/app/package.json +++ b/apps/app/package.json @@ -25,7 +25,6 @@ "next-pwa": "^5.6.0", "react": "18.2.0", "react-beautiful-dnd": "^13.1.1", - "react-circular-progressbar": "^2.1.0", "react-color": "^2.19.3", "react-datepicker": "^4.8.0", "react-dom": "18.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c67aca649..4668fa8b3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -44,7 +44,6 @@ importers: postcss: ^8.4.14 react: 18.2.0 react-beautiful-dnd: ^13.1.1 - react-circular-progressbar: ^2.1.0 react-color: ^2.19.3 react-datepicker: ^4.8.0 react-dom: 18.2.0 @@ -74,7 +73,6 @@ importers: next-pwa: 5.6.0_next@12.3.2 react: 18.2.0 react-beautiful-dnd: 13.1.1_biqbaboplfbrettd7655fr4n2y - react-circular-progressbar: 2.1.0_react@18.2.0 react-color: 2.19.3_react@18.2.0 react-datepicker: 4.8.0_biqbaboplfbrettd7655fr4n2y react-dom: 18.2.0_react@18.2.0 @@ -8866,14 +8864,6 @@ packages: - react-native dev: false - /react-circular-progressbar/2.1.0_react@18.2.0: - resolution: {integrity: sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==} - peerDependencies: - react: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 - dependencies: - react: 18.2.0 - dev: false - /react-color/2.19.3_react@18.2.0: resolution: {integrity: sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==} peerDependencies: