Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: ui improvement #395

Merged
merged 2 commits into from
Mar 7, 2023
Merged

fix: ui improvement #395

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1b63efc
fix: current cycle date updation
anmolsinghbhatia Mar 7, 2023
43cc1a9
fix: sidebar overflow fix , date helper fn added
anmolsinghbhatia Mar 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/app/components/core/sidebar/progress-chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const ProgressChart: React.FC<Props> = ({ issues, start, end }) => {
};
const ChartData = getChartData();
return (
<div className="absolute -left-12 flex h-full w-full items-center justify-center text-xs">
<div className="absolute -left-4 flex h-full w-full items-center justify-center text-xs">
<AreaChart
width={360}
height={160}
Expand Down
10 changes: 8 additions & 2 deletions apps/app/components/cycles/form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import { Button, CustomDatePicker, CustomSelect, Input, TextArea } from "compone
import { ICycle } from "types";
// services
import cyclesService from "services/cycles.service";
// helper
import { getDateRangeStatus } from "helpers/date-time.helper";

type Props = {
handleFormSubmit: (values: Partial<ICycle>) => Promise<void>;
Expand Down Expand Up @@ -53,6 +55,10 @@ export const CycleForm: React.FC<Props> = ({ 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)
Expand Down Expand Up @@ -135,7 +141,7 @@ export const CycleForm: React.FC<Props> = ({ 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"),
Expand Down Expand Up @@ -163,7 +169,7 @@ export const CycleForm: React.FC<Props> = ({ 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,
Expand Down
21 changes: 6 additions & 15 deletions apps/app/components/cycles/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -55,13 +55,12 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
cycleStatus,
}) => {
const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
const [startDateRange, setStartDateRange] = useState<Date | null>(new Date());
const [endDateRange, setEndDateRange] = useState<Date | null>(null);

const router = useRouter();
const { workspaceSlug, projectId, cycleId } = router.query;

const [startDateRange, setStartDateRange] = useState<Date | null>(new Date());
const [endDateRange, setEndDateRange] = useState<Date | null>(null);

const { setToastAlert } = useToast();

const defaultValues: Partial<ICycle> = {
Expand Down Expand Up @@ -163,11 +162,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
}`}
>
<CalendarDaysIcon className="h-3 w-3" />
<span>
{renderShortNumericDateFormat(`${cycle.start_date}`)
? renderShortNumericDateFormat(`${cycle.start_date}`)
: "N/A"}
</span>
<span>{renderShortDate(new Date(`${cycle?.start_date}`))}</span>
</Popover.Button>

<Transition
Expand Down Expand Up @@ -213,11 +208,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
>
<CalendarDaysIcon className="h-3 w-3 " />

<span>
{renderShortNumericDateFormat(`${cycle.end_date}`)
? renderShortNumericDateFormat(`${cycle.end_date}`)
: "N/A"}
</span>
<span>{renderShortDate(new Date(`${cycle?.end_date}`))}</span>
</Popover.Button>

<Transition
Expand Down Expand Up @@ -374,7 +365,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
</div>
</div>
</div>
<div className="relative h-40 w-96">
<div className="relative h-40 w-80">
<ProgressChart
issues={issues}
start={cycle?.start_date ?? ""}
Expand Down
28 changes: 7 additions & 21 deletions apps/app/components/modules/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,7 @@ import {
ChevronDownIcon,
DocumentDuplicateIcon,
DocumentIcon,
LinkIcon,
PlusIcon,
Squares2X2Icon,
TrashIcon,
UserCircleIcon,
} from "@heroicons/react/24/outline";

import { Disclosure, Popover, Transition } from "@headlessui/react";
Expand All @@ -28,15 +24,15 @@ import modulesService from "services/modules.service";
// hooks
import useToast from "hooks/use-toast";
// components
import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
import { LinkModal, SidebarProgressStats } from "components/core";
import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules";
import ProgressChart from "components/core/sidebar/progress-chart";

// components
// ui
import { CustomMenu, CustomSelect, Loader, ProgressBar } from "components/ui";
// helpers
import { renderDateFormat, renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper";
import { renderDateFormat, renderShortDate, timeAgo } from "helpers/date-time.helper";
import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
import { groupBy } from "helpers/array.helper";
// types
Expand Down Expand Up @@ -74,8 +70,6 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
const [startDateRange, setStartDateRange] = useState<Date | null>(new Date());
const [endDateRange, setEndDateRange] = useState<Date | null>(null);

console.log("module details: ", module);

const router = useRouter();
const { workspaceSlug, projectId, moduleId } = router.query;

Expand Down Expand Up @@ -188,8 +182,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
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 (
<>
Expand Down Expand Up @@ -249,11 +243,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
}`}
>
<CalendarDaysIcon className="h-3 w-3" />
<span>
{renderShortNumericDateFormat(`${module.start_date}`)
? renderShortNumericDateFormat(`${module.start_date}`)
: "N/A"}
</span>
<span>{renderShortDate(new Date(`${module.start_date}`))}</span>
</Popover.Button>

<Transition
Expand Down Expand Up @@ -299,11 +289,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
>
<CalendarDaysIcon className="h-3 w-3 " />

<span>
{renderShortNumericDateFormat(`${module?.target_date}`)
? renderShortNumericDateFormat(`${module?.target_date}`)
: "N/A"}
</span>
<span>{renderShortDate(new Date(`${module?.target_date}`))}</span>
</Popover.Button>

<Transition
Expand Down Expand Up @@ -461,7 +447,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
</div>
</div>
</div>
<div className="relative h-40 w-96">
<div className="relative h-40 w-80">
<ProgressChart
issues={issues}
start={module?.start_date ?? ""}
Expand Down
20 changes: 20 additions & 0 deletions apps/app/helpers/date-time.helper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,3 +125,23 @@ export const renderShortDateWithYearFormat = (date: 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}`;
};
3 changes: 1 addition & 2 deletions apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,7 @@ const SingleCycle: React.FC<UserAuth> = (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<CycleIssueResponse[]>(
workspaceSlug && projectId && cycleId ? CYCLE_ISSUES(cycleId as string) : null,
Expand Down