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

feat : sidebar progress improvement (#272)

Browse Source 
* feat: progress chart render validation

* fix: sidebar stats tab

* feat: sidebar active tab context
This commit is contained in:
Anmol Singh Bhatia 2023-02-13 13:14:23 +05:30 committed by GitHub
parent ebf294af55
commit 8fb34fe1e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 85 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,6 +20,7 @@ import User from "public/user.png";
import { IIssue, IIssueLabels } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
import useLocalStorage from "hooks/use-local-storage";
// types
type Props = {
groupedIssues: any;
@ -38,6 +39,7 @@ const stateGroupColours: {
export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues }) => {
const router = useRouter();
const [tab, setTab] = useLocalStorage("tab", "Assignees");
const { workspaceSlug, projectId } = router.query;
const { data: issueLabels } = useSWR<IIssueLabels[]>(
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
@ -52,8 +54,34 @@ export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues })
? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
: null
);
const currentValue = (tab: string) => {
switch (tab) {
case "Assignees":
return 0;
case "Labels":
return 1;
case "States":
return 2;
}
};
return (
<Tab.Group>
<Tab.Group
defaultIndex={currentValue(tab)}
onChange={(i) => {
switch (i) {
case 0:
return setTab("Assignees");
case 1:
return setTab("Labels");
case 2:
return setTab("States");
default:
return setTab("Assignees");
}
}}
>
<Tab.List
as="div"
className="flex items-center justify-between w-full rounded bg-gray-100 text-xs"

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

@ -118,6 +118,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
});
}, [module, reset]);
const isStartValid = new Date(`${module?.start_date}`) <= new Date();
const isEndValid = new Date(`${module?.target_date}`) >= new Date(`${module?.start_date}`);
return (
<>
<ModuleLinkModal
@ -297,13 +299,20 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
</div>
</div>
<div className="flex flex-col items-center justify-center w-full gap-2 ">
<ProgressChart
issues={issues}
start={module?.start_date ?? ""}
end={module?.target_date ?? ""}
/>
<SidebarProgressStats issues={issues} groupedIssues={groupedIssues} />
{isStartValid && isEndValid ? (
<ProgressChart
issues={issues}
start={module?.start_date ?? ""}
end={module?.target_date ?? ""}
/>
) : (
""
)}
{issues.length > 0 ? (
<SidebarProgressStats issues={issues} groupedIssues={groupedIssues} />
) : (
""
)}
</div>
</>
) : (

26
apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx
View File

@ -101,6 +101,8 @@ const CycleDetailSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cycleIssue
});
}, [cycle, reset]);
const isStartValid = new Date(`${cycle?.start_date}`) <= new Date();
const isEndValid = new Date(`${cycle?.end_date}`) >= new Date(`${cycle?.start_date}`);
return (
<div
className={`fixed top-0 ${
@ -275,14 +277,22 @@ const CycleDetailSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cycleIssue
<div className="py-1" />
</div>
<div className="flex flex-col items-center justify-center w-full gap-2 ">
<div className="relative h-[200px] w-full ">
<ProgressChart
issues={issues}
start={cycle?.start_date ?? ""}
end={cycle?.end_date ?? ""}
/>
</div>
<SidebarProgressStats issues={issues} groupedIssues={groupedIssues} />
{isStartValid && isEndValid ? (
<div className="relative h-[200px] w-full ">
<ProgressChart
issues={issues}
start={cycle?.start_date ?? ""}
end={cycle?.end_date ?? ""}
/>
</div>
) : (
""
)}
{issues.length > 0 ? (
<SidebarProgressStats issues={issues} groupedIssues={groupedIssues} />
) : (
""
)}
</div>
</>
) : (

22
apps/app/hooks/use-local-storage.tsx Normal file
View File

@ -0,0 +1,22 @@
import React, { useEffect, useState } from "react";
const getSavedValue = (key: any, value: any) => {
const savedValue = localStorage.getItem(key);
if (savedValue) {
return savedValue;
}
return value;
};
const useLocalStorage = (key: any, value: any) => {
const [updatedvalue, seUpdatedvalue] = useState(() => getSavedValue(key, value));
useEffect(() => {
localStorage.setItem(key, updatedvalue);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [updatedvalue]);
return [updatedvalue, seUpdatedvalue];
};
export default useLocalStorage;