style : module sidebar (#385)
* style: new cycle sidebar * style: other information section * style: progress bar bg fix * fix: cycle card bug fix * style: progress chart * style: chart tooltip * style: module link tab added in sidebar stats * style: lead and member select
This commit is contained in:
Anmol Singh Bhatia
GitHub
parent
0246e0585b
commit
09eab9e6bf
4 changed files with 418 additions and 264 deletions
|
|
@ -13,19 +13,24 @@ import projectService from "services/project.service";
|
|||
// hooks
|
||||
import useLocalStorage from "hooks/use-local-storage";
|
||||
// components
|
||||
import { SingleProgressStats } from "components/core";
|
||||
import { LinksList, SingleProgressStats } from "components/core";
|
||||
// ui
|
||||
import { Avatar } from "components/ui";
|
||||
// icons
|
||||
import User from "public/user.png";
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import { IIssue, IIssueLabels } from "types";
|
||||
import { IIssue, IIssueLabels, IModule, UserAuth } from "types";
|
||||
// fetch-keys
|
||||
import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||
// types
|
||||
type Props = {
|
||||
groupedIssues: any;
|
||||
issues: IIssue[];
|
||||
module?: IModule;
|
||||
setModuleLinkModal?: any;
|
||||
handleDeleteLink?: any;
|
||||
userAuth?: UserAuth;
|
||||
};
|
||||
|
||||
const stateGroupColours: {
|
||||
|
|
@ -38,7 +43,14 @@ const stateGroupColours: {
|
|||
completed: "#096e8d",
|
||||
};
|
||||
|
||||
export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues }) => {
|
||||
export const SidebarProgressStats: React.FC<Props> = ({
|
||||
groupedIssues,
|
||||
issues,
|
||||
module,
|
||||
setModuleLinkModal,
|
||||
handleDeleteLink,
|
||||
userAuth,
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
|
|
@ -60,14 +72,17 @@ export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues })
|
|||
|
||||
const currentValue = (tab: string | null) => {
|
||||
switch (tab) {
|
||||
case "Links":
|
||||
return 0;
|
||||
case "Assignees":
|
||||
return 0;
|
||||
case "Labels":
|
||||
return 1;
|
||||
case "States":
|
||||
case "Labels":
|
||||
return 2;
|
||||
case "States":
|
||||
return 3;
|
||||
|
||||
default:
|
||||
return 0;
|
||||
return 3;
|
||||
}
|
||||
};
|
||||
return (
|
||||
|
|
@ -76,57 +91,91 @@ export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues })
|
|||
onChange={(i) => {
|
||||
switch (i) {
|
||||
case 0:
|
||||
return setTab("Assignees");
|
||||
return setTab("Links");
|
||||
case 1:
|
||||
return setTab("Labels");
|
||||
return setTab("Assignees");
|
||||
case 2:
|
||||
return setTab("Labels");
|
||||
case 3:
|
||||
return setTab("States");
|
||||
|
||||
default:
|
||||
return setTab("Assignees");
|
||||
return setTab("States");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Tab.List
|
||||
as="div"
|
||||
className="flex items-center justify-between px-1 py-1.5 w-full rounded-md bg-gray-100 text-xs"
|
||||
className={`flex w-full items-center justify-between rounded-md bg-gray-100 px-1 py-1.5
|
||||
${module ? "text-xs" : "text-sm"} `}
|
||||
>
|
||||
{module ? (
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-full rounded px-3 py-1 text-gray-900 ${
|
||||
selected ? " bg-theme text-white" : " hover:bg-hover-gray"
|
||||
}`
|
||||
}
|
||||
>
|
||||
Links
|
||||
</Tab>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`rounded w-1/3 p-1 text-sm text-gray-900 ${
|
||||
selected
|
||||
? " bg-theme text-white"
|
||||
: " hover:bg-hover-gray"
|
||||
}`
|
||||
}
|
||||
className={({ selected }) =>
|
||||
`w-full rounded px-3 py-1 text-gray-900 ${
|
||||
selected ? " bg-theme text-white" : " hover:bg-hover-gray"
|
||||
}`
|
||||
}
|
||||
>
|
||||
Assignees
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`rounded w-1/3 p-1 text-sm text-gray-900 ${
|
||||
selected
|
||||
? " bg-theme text-white"
|
||||
: " hover:bg-hover-gray"
|
||||
}`
|
||||
}
|
||||
className={({ selected }) =>
|
||||
`w-full rounded px-3 py-1 text-gray-900 ${
|
||||
selected ? " bg-theme text-white" : " hover:bg-hover-gray"
|
||||
}`
|
||||
}
|
||||
>
|
||||
Labels
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`rounded w-1/3 p-1 text-sm text-gray-900 ${
|
||||
selected
|
||||
? " bg-theme text-white"
|
||||
: " hover:bg-hover-gray"
|
||||
}`
|
||||
}
|
||||
`w-full rounded px-3 py-1 text-gray-900 ${
|
||||
selected ? " bg-theme text-white" : " hover:bg-hover-gray"
|
||||
}`
|
||||
}
|
||||
>
|
||||
States
|
||||
</Tab>
|
||||
</Tab.List>
|
||||
<Tab.Panels className="flex items-center justify-between p-1 w-full">
|
||||
<Tab.Panel as="div" className="w-full flex flex-col text-xs ">
|
||||
<Tab.Panels className="flex w-full items-center justify-between p-1">
|
||||
{module ? (
|
||||
<Tab.Panel as="div" className="flex w-full flex-col text-xs ">
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center justify-start gap-2 rounded px-4 py-2 hover:bg-theme/5"
|
||||
onClick={() => setModuleLinkModal(true)}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" /> <span>Add Link</span>
|
||||
</button>
|
||||
<div className="mt-2 space-y-2 hover:bg-theme/5">
|
||||
{userAuth && module.link_module && module.link_module.length > 0 ? (
|
||||
<LinksList
|
||||
links={module.link_module}
|
||||
handleDeleteLink={handleDeleteLink}
|
||||
userAuth={userAuth}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
<Tab.Panel as="div" className="flex w-full flex-col text-xs ">
|
||||
{members?.map((member, index) => {
|
||||
const totalArray = issues?.filter((i) => i.assignees?.includes(member.member.id));
|
||||
const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");
|
||||
|
|
@ -173,7 +222,7 @@ export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues })
|
|||
""
|
||||
)}
|
||||
</Tab.Panel>
|
||||
<Tab.Panel as="div" className="w-full flex flex-col ">
|
||||
<Tab.Panel as="div" className="flex w-full flex-col ">
|
||||
{issueLabels?.map((issue, index) => {
|
||||
const totalArray = issues?.filter((i) => i.labels?.includes(issue.id));
|
||||
const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");
|
||||
|
|
@ -199,7 +248,7 @@ export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues })
|
|||
}
|
||||
})}
|
||||
</Tab.Panel>
|
||||
<Tab.Panel as="div" className="w-full flex flex-col ">
|
||||
<Tab.Panel as="div" className="flex w-full flex-col ">
|
||||
{Object.keys(groupedIssues).map((group, index) => (
|
||||
<SingleProgressStats
|
||||
key={index}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue