mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
fix: ui improvement (#395)
* fix: current cycle date updation * fix: sidebar overflow fix , date helper fn added
This commit is contained in:
Anmol Singh Bhatia
GitHub
parent
30a91a6b91
commit
afe2b029c0
@ -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}
|
||||
|
||||
@ -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>;
|
||||
@ -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)
|
||||
@ -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"),
|
||||
@ -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,
|
||||
|
||||
@ -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<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> = {
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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 ?? ""}
|
||||
|
||||
@ -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";
|
||||
@ -28,7 +24,7 @@ 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";
|
||||
|
||||
@ -36,7 +32,7 @@ import ProgressChart from "components/core/sidebar/progress-chart";
|
||||
// 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
|
||||
@ -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;
|
||||
|
||||
@ -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 (
|
||||
<>
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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 ?? ""}
|
||||
|
||||
@ -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}`;
|
||||
};
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user