github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: sidebar stats mutation (#635)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-03-31 02:20:44 +05:30 committed by GitHub
parent 66d07e340b
commit e2921539d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 68 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
apps/app/components/core/board-view/single-issue.tsx
View File

@ -32,6 +32,7 @@ import {
LinkIcon,
PencilIcon,
TrashIcon,
XMarkIcon,
} from "@heroicons/react/24/outline";
// helpers
import { handleIssuesMutation } from "constants/issue";
@ -40,7 +41,9 @@ import { copyTextToClipboard, truncateText } from "helpers/string.helper";
import { IIssue, Properties, TIssueGroupByOptions, UserAuth } from "types";
// fetch-keys
import {
CYCLE_DETAILS,
CYCLE_ISSUES_WITH_PARAMS,
MODULE_DETAILS,
MODULE_ISSUES_WITH_PARAMS,
PROJECT_ISSUES_LIST_WITH_PARAMS,
} from "constants/fetch-keys";
@ -135,10 +138,14 @@ export const SingleBoardIssue: React.FC<Props> = ({
issuesService
.patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
.then((res) => {
if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
if (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
.then(() => {
if (cycleId) {
mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
mutate(CYCLE_DETAILS(cycleId as string));
} else if (moduleId) {
mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
mutate(MODULE_DETAILS(moduleId as string));
} else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
})
.catch((error) => {
console.log(error);
@ -226,27 +233,30 @@ export const SingleBoardIssue: React.FC<Props> = ({
{type && !isNotAllowed && (
<CustomMenu width="auto" ellipsis>
<CustomMenu.MenuItem onClick={editIssue}>
<span className="flex items-center justify-start gap-2">
<div className="flex items-center justify-start gap-2">
<PencilIcon className="h-4 w-4" />
<span>Edit issue</span>
</span>
</div>
</CustomMenu.MenuItem>
{type !== "issue" && removeIssue && (
<CustomMenu.MenuItem onClick={removeIssue}>
<>Remove from {type}</>
<div className="flex items-center justify-start gap-2">
<XMarkIcon className="h-4 w-4" />
<span>Remove from {type}</span>
</div>
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
<span className="flex items-center justify-start gap-2">
<div className="flex items-center justify-start gap-2">
<TrashIcon className="h-4 w-4" />
<span>Delete issue</span>
</span>
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2">
<div className="flex items-center justify-start gap-2">
<LinkIcon className="h-4 w-4" />
<span>Copy issue Link</span>
</span>
</div>
</CustomMenu.MenuItem>
</CustomMenu>
)}

14
apps/app/components/core/list-view/single-issue.tsx
View File

@ -35,7 +35,9 @@ import { handleIssuesMutation } from "constants/issue";
import { IIssue, Properties, UserAuth } from "types";
// fetch-keys
import {
CYCLE_DETAILS,
CYCLE_ISSUES_WITH_PARAMS,
MODULE_DETAILS,
MODULE_ISSUES_WITH_PARAMS,
PROJECT_ISSUES_LIST_WITH_PARAMS,
} from "constants/fetch-keys";
@ -123,10 +125,14 @@ export const SingleListIssue: React.FC<Props> = ({
issuesService
.patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
.then((res) => {
if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
if (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
.then(() => {
if (cycleId) {
mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
mutate(CYCLE_DETAILS(cycleId as string));
} else if (moduleId) {
mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
mutate(MODULE_DETAILS(moduleId as string));
} else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
});
},
[workspaceSlug, projectId, cycleId, moduleId, issue, groupTitle, index, selectedGroup, params]

2
apps/app/components/core/sidebar/sidebar-progress-stats.tsx
View File

@ -240,7 +240,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
<span className="text-xs capitalize">{group}</span>
</div>
}
completed={groupedIssues[group].length}
completed={groupedIssues[group]}
total={issues.length}
/>
))}

46
apps/app/components/cycles/sidebar.tsx
View File

@ -34,7 +34,6 @@ import { DeleteCycleModal } from "components/cycles";
import { ExclamationIcon } from "components/icons";
// helpers
import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
import { groupBy } from "helpers/array.helper";
import { isDateRangeValid, renderDateFormat, renderShortDate } from "helpers/date-time.helper";
// types
import { ICycle, IIssue } from "types";
@ -78,15 +77,6 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
: null
);
const groupedIssues = {
backlog: [],
unstarted: [],
started: [],
cancelled: [],
completed: [],
...groupBy(issues ?? [], "state_detail.group"),
};
const { reset, watch } = useForm({
defaultValues,
});
@ -140,8 +130,8 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
const isStartValid = new Date(`${cycle?.start_date}`) <= new Date();
const isEndValid = new Date(`${cycle?.end_date}`) >= new Date(`${cycle?.start_date}`);
const progressPercentage = issues
? Math.round((groupedIssues.completed.length / issues?.length) * 100)
const progressPercentage = cycle
? Math.round((cycle.completed_issues / cycle.total_issues) * 100)
: null;
return (
@ -205,7 +195,8 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
setToastAlert({
type: "error",
title: "Error!",
message: "The date you have entered is invalid. Please check and enter a valid date.",
message:
"The date you have entered is invalid. Please check and enter a valid date.",
});
}
}
@ -268,7 +259,8 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
setToastAlert({
type: "error",
title: "Error!",
message: "The date you have entered is invalid. Please check and enter a valid date.",
message:
"The date you have entered is invalid. Please check and enter a valid date.",
});
}
}
@ -348,12 +340,9 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
<div className="flex items-center gap-2.5 text-gray-800">
<span className="h-4 w-4">
<ProgressBar
value={groupedIssues.completed.length}
maxValue={issues?.length}
/>
<ProgressBar value={cycle.completed_issues} maxValue={cycle.total_issues} />
</span>
{groupedIssues.completed.length}/{issues?.length}
{cycle.completed_issues}/{cycle.total_issues}
</div>
</div>
</div>
@ -369,7 +358,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
<div className="flex w-full items-center justify-between gap-2 ">
<div className="flex items-center justify-start gap-2 text-sm">
<span className="font-medium text-gray-500">Progress</span>
{!open && issues && progressPercentage ? (
{!open && progressPercentage ? (
<span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
{progressPercentage ? `${progressPercentage}%` : ""}
</span>
@ -404,9 +393,8 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
</span>
<span>
Pending Issues -{" "}
{issues &&
groupedIssues &&
issues?.length - groupedIssues.completed.length}
{cycle.total_issues -
(cycle.completed_issues + cycle.cancelled_issues)}
</span>
</div>
@ -450,7 +438,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
<span className="font-medium text-gray-500">Other Information</span>
</div>
{(issues?.length ?? 0) > 0 ? (
{cycle.total_issues > 0 ? (
<Disclosure.Button>
<ChevronDownIcon
className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
@ -468,11 +456,17 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
</div>
<Transition show={open}>
<Disclosure.Panel>
{(issues?.length ?? 0) > 0 ? (
{cycle.total_issues > 0 ? (
<div className=" h-full w-full py-4">
<SidebarProgressStats
issues={issues ?? []}
groupedIssues={groupedIssues}
groupedIssues={{
backlog: cycle.backlog_issues,
unstarted: cycle.unstarted_issues,
started: cycle.started_issues,
completed: cycle.completed_issues,
cancelled: cycle.cancelled_issues,
}}
/>
</div>
) : (

34
apps/app/components/modules/sidebar.tsx
View File

@ -77,15 +77,6 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
defaultValues,
});
const groupedIssues = {
backlog: [],
unstarted: [],
started: [],
cancelled: [],
completed: [],
...groupBy(moduleIssues ?? [], "issue_detail.state_detail.group"),
};
const submitChanges = (data: Partial<IModule>) => {
if (!workspaceSlug || !projectId || !moduleId) return;
@ -179,8 +170,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
const isStartValid = new Date(`${module?.start_date}`) <= new Date();
const isEndValid = new Date(`${module?.target_date}`) >= new Date(`${module?.start_date}`);
const progressPercentage = moduleIssues
? Math.round((groupedIssues.completed.length / moduleIssues?.length) * 100)
const progressPercentage = module
? Math.round((module.completed_issues / module.total_issues) * 100)
: null;
return (
@ -389,11 +380,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
<div className="flex items-center gap-2.5 text-gray-800">
<span className="h-4 w-4">
<ProgressBar
value={groupedIssues.completed.length}
maxValue={moduleIssues?.length}
value={module.completed_issues}
maxValue={module.total_issues}
/>
</span>
{groupedIssues.completed.length}/{moduleIssues?.length}
{module.completed_issues}/{module.total_issues}
</div>
</div>
</div>
@ -445,7 +436,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
</span>
<span>
Pending Issues -{" "}
{moduleIssues?.length - groupedIssues.completed.length}{" "}
{module.total_issues -
(module.completed_issues + module.cancelled_issues)}{" "}
</span>
</div>
@ -489,7 +481,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
<span className="font-medium text-gray-500">Other Information</span>
</div>
{issues.length > 0 ? (
{module.total_issues > 0 ? (
<Disclosure.Button className="p-1">
<ChevronDownIcon
className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
@ -507,12 +499,18 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
</div>
<Transition show={open}>
<Disclosure.Panel>
{issues.length > 0 ? (
{module.total_issues > 0 ? (
<>
<div className=" h-full w-full py-4">
<SidebarProgressStats
issues={issues}
groupedIssues={groupedIssues}
groupedIssues={{
backlog: module.backlog_issues,
unstarted: module.unstarted_issues,
started: module.started_issues,
completed: module.completed_issues,
cancelled: module.cancelled_issues,
}}
userAuth={userAuth}
module={module}
/>