From afe2b029c022239e8be1bf5bdb6eb7720fe05bcf Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Tue, 7 Mar 2023 22:38:49 +0530 Subject: [PATCH] fix: ui improvement (#395) * fix: current cycle date updation * fix: sidebar overflow fix , date helper fn added --- .../core/sidebar/progress-chart.tsx | 2 +- apps/app/components/cycles/form.tsx | 10 +++++-- apps/app/components/cycles/sidebar.tsx | 21 ++++---------- apps/app/components/modules/sidebar.tsx | 28 +++++-------------- apps/app/helpers/date-time.helper.ts | 20 +++++++++++++ .../projects/[projectId]/cycles/[cycleId].tsx | 3 +- 6 files changed, 43 insertions(+), 41 deletions(-) diff --git a/apps/app/components/core/sidebar/progress-chart.tsx b/apps/app/components/core/sidebar/progress-chart.tsx index 2f48c0f9f..7ff6f3f1f 100644 --- a/apps/app/components/core/sidebar/progress-chart.tsx +++ b/apps/app/components/core/sidebar/progress-chart.tsx @@ -50,7 +50,7 @@ const ProgressChart: React.FC = ({ issues, start, end }) => { }; const ChartData = getChartData(); return ( -
+
) => Promise; @@ -53,6 +55,10 @@ export const CycleForm: React.FC = ({ handleFormSubmit, handleClose, stat }); }; + const cycleStatus = + data?.start_date && data?.end_date + ? getDateRangeStatus(data?.start_date, data?.end_date) : ""; + const dateChecker = async (payload: any) => { await cyclesService .cycleDateCheck(workspaceSlug as string, projectId as string, payload) @@ -135,7 +141,7 @@ export const CycleForm: React.FC = ({ handleFormSubmit, handleClose, stat value={value} onChange={(val) => { onChange(val); - watch("end_date") + watch("end_date") && cycleStatus != "current" ? dateChecker({ start_date: val, end_date: watch("end_date"), @@ -163,7 +169,7 @@ export const CycleForm: React.FC = ({ handleFormSubmit, handleClose, stat value={value} onChange={(val) => { onChange(val); - watch("start_date") + watch("start_date") && cycleStatus != "current" ? dateChecker({ start_date: watch("start_date"), end_date: val, diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx index a0c0e4a40..51b3e6c71 100644 --- a/apps/app/components/cycles/sidebar.tsx +++ b/apps/app/components/cycles/sidebar.tsx @@ -33,7 +33,7 @@ import { DeleteCycleModal } from "components/cycles"; // helpers import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper"; import { groupBy } from "helpers/array.helper"; -import { renderDateFormat, renderShortNumericDateFormat } from "helpers/date-time.helper"; +import { renderDateFormat, renderShortDate } from "helpers/date-time.helper"; // types import { CycleIssueResponse, ICycle, IIssue } from "types"; // fetch-keys @@ -55,13 +55,12 @@ export const CycleDetailsSidebar: React.FC = ({ cycleStatus, }) => { const [cycleDeleteModal, setCycleDeleteModal] = useState(false); + const [startDateRange, setStartDateRange] = useState(new Date()); + const [endDateRange, setEndDateRange] = useState(null); const router = useRouter(); const { workspaceSlug, projectId, cycleId } = router.query; - const [startDateRange, setStartDateRange] = useState(new Date()); - const [endDateRange, setEndDateRange] = useState(null); - const { setToastAlert } = useToast(); const defaultValues: Partial = { @@ -163,11 +162,7 @@ export const CycleDetailsSidebar: React.FC = ({ }`} > - - {renderShortNumericDateFormat(`${cycle.start_date}`) - ? renderShortNumericDateFormat(`${cycle.start_date}`) - : "N/A"} - + {renderShortDate(new Date(`${cycle?.start_date}`))} = ({ > - - {renderShortNumericDateFormat(`${cycle.end_date}`) - ? renderShortNumericDateFormat(`${cycle.end_date}`) - : "N/A"} - + {renderShortDate(new Date(`${cycle?.end_date}`))} = ({
-
+
= ({ const [startDateRange, setStartDateRange] = useState(new Date()); const [endDateRange, setEndDateRange] = useState(null); - console.log("module details: ", module); - const router = useRouter(); const { workspaceSlug, projectId, moduleId } = router.query; @@ -188,8 +182,8 @@ export const ModuleDetailsSidebar: React.FC = ({ const isEndValid = new Date(`${module?.target_date}`) >= new Date(`${module?.start_date}`); const progressPercentage = moduleIssues - ? Math.round((groupedIssues.completed.length / moduleIssues?.length) * 100) - : null; + ? Math.round((groupedIssues.completed.length / moduleIssues?.length) * 100) + : null; return ( <> @@ -249,11 +243,7 @@ export const ModuleDetailsSidebar: React.FC = ({ }`} > - - {renderShortNumericDateFormat(`${module.start_date}`) - ? renderShortNumericDateFormat(`${module.start_date}`) - : "N/A"} - + {renderShortDate(new Date(`${module.start_date}`))} = ({ > - - {renderShortNumericDateFormat(`${module?.target_date}`) - ? renderShortNumericDateFormat(`${module?.target_date}`) - : "N/A"} - + {renderShortDate(new Date(`${module?.target_date}`))} = ({
-
+
{ const year = date.getFullYear(); return isNaN(date.getTime()) ? "N/A" : ` ${month} ${day}, ${year}`; }; + +export const renderShortDate = (date: Date) => { + const months = [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ]; + const day = date.getDate(); + const month = months[date.getMonth()]; + return isNaN(date.getTime()) ? "N/A" : `${day} ${month}`; +}; \ No newline at end of file diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx index efafd3ce3..986b2ac5f 100644 --- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx +++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx @@ -81,8 +81,7 @@ const SingleCycle: React.FC = (props) => { const cycleStatus = cycleDetails?.start_date && cycleDetails?.end_date - ? getDateRangeStatus(cycleDetails?.start_date, cycleDetails?.end_date) - : "draft"; + ? getDateRangeStatus(cycleDetails?.start_date, cycleDetails?.end_date) : ""; const { data: cycleIssues } = useSWR( workspaceSlug && projectId && cycleId ? CYCLE_ISSUES(cycleId as string) : null,