forked from github/plane
Merge branch 'develop' of https://github.com/makeplane/plane into style/issue_list_responsive
This commit is contained in:
commit
a5c18e37c1
@ -21,7 +21,7 @@ import { ChevronRightIcon, PlusIcon, XMarkIcon } from "@heroicons/react/24/outli
|
||||
// helpers
|
||||
import { orderArrayBy } from "helpers/array.helper";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
import { IIssue, ISubIssueResponse } from "types";
|
||||
// fetch-keys
|
||||
import { PROJECT_ISSUES_LIST, SUB_ISSUES } from "constants/fetch-keys";
|
||||
|
||||
@ -40,7 +40,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
|
||||
|
||||
const { memberRole } = useProjectMyMembership();
|
||||
|
||||
const { data: subIssues } = useSWR<IIssue[] | undefined>(
|
||||
const { data: subIssuesResponse } = useSWR<ISubIssueResponse>(
|
||||
workspaceSlug && projectId && issueId ? SUB_ISSUES(issueId as string) : null,
|
||||
workspaceSlug && projectId && issueId
|
||||
? () =>
|
||||
@ -57,6 +57,22 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
|
||||
: null
|
||||
);
|
||||
|
||||
const updateSubIssuesState = (data: IIssue[]) => {
|
||||
const backlogCount = data.filter((i) => i.state_detail.group === "backlog").length;
|
||||
const unstartedCount = data.filter((i) => i.state_detail.group === "unstarted").length;
|
||||
const startedCount = data.filter((i) => i.state_detail.group === "started").length;
|
||||
const completedCount = data.filter((i) => i.state_detail.group === "completed").length;
|
||||
const cancelledCount = data.filter((i) => i.state_detail.group === "cancelled").length;
|
||||
|
||||
return {
|
||||
backlog: backlogCount ?? 0,
|
||||
unstarted: unstartedCount ?? 0,
|
||||
started: startedCount ?? 0,
|
||||
completed: completedCount ?? 0,
|
||||
cancelled: cancelledCount ?? 0,
|
||||
};
|
||||
};
|
||||
|
||||
const addAsSubIssue = async (data: { issues: string[] }) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
@ -65,20 +81,20 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
|
||||
sub_issue_ids: data.issues,
|
||||
})
|
||||
.then((res) => {
|
||||
mutate<IIssue[]>(
|
||||
mutate<ISubIssueResponse>(
|
||||
SUB_ISSUES(parentIssue?.id ?? ""),
|
||||
(prevData) => {
|
||||
let newSubIssues = [...(prevData as IIssue[])];
|
||||
|
||||
if (!prevData) return prevData;
|
||||
let newSubIssues = prevData.sub_issues as IIssue[];
|
||||
data.issues.forEach((issueId: string) => {
|
||||
const issue = issues?.find((i) => i.id === issueId);
|
||||
|
||||
if (issue) newSubIssues.push(issue);
|
||||
});
|
||||
|
||||
newSubIssues = orderArrayBy(newSubIssues, "created_at", "descending");
|
||||
|
||||
return newSubIssues;
|
||||
return {
|
||||
state_distribution: updateSubIssuesState(newSubIssues),
|
||||
sub_issues: newSubIssues,
|
||||
};
|
||||
},
|
||||
false
|
||||
);
|
||||
@ -108,14 +124,21 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
|
||||
const handleSubIssueRemove = (issueId: string) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
mutate<IIssue[]>(
|
||||
mutate<ISubIssueResponse>(
|
||||
SUB_ISSUES(parentIssue.id ?? ""),
|
||||
(prevData) => prevData?.filter((i) => i.id !== issueId),
|
||||
(prevData) => {
|
||||
if (!prevData) return prevData;
|
||||
const updatedArray = (prevData.sub_issues ?? []).filter((i) => i.id !== issueId);
|
||||
return {
|
||||
state_distribution: updateSubIssuesState(updatedArray),
|
||||
sub_issues: updatedArray,
|
||||
};
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
issuesService
|
||||
.patchIssue(workspaceSlug as string, projectId as string, issueId, { parent: null })
|
||||
.patchIssue(workspaceSlug.toString(), projectId.toString(), issueId, { parent: null })
|
||||
.then((res) => {
|
||||
mutate(SUB_ISSUES(parentIssue.id ?? ""));
|
||||
|
||||
@ -146,6 +169,21 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
|
||||
});
|
||||
};
|
||||
|
||||
const completedSubIssues =
|
||||
subIssuesResponse && subIssuesResponse.state_distribution
|
||||
? (subIssuesResponse?.state_distribution.completed
|
||||
? subIssuesResponse?.state_distribution.completed
|
||||
: 0) +
|
||||
(subIssuesResponse?.state_distribution.cancelled
|
||||
? subIssuesResponse?.state_distribution.cancelled
|
||||
: 0)
|
||||
: 0;
|
||||
|
||||
const totalSubIssues =
|
||||
subIssuesResponse && subIssuesResponse.sub_issues ? subIssuesResponse?.sub_issues.length : 0;
|
||||
|
||||
const completionPercentage = (completedSubIssues / totalSubIssues) * 100;
|
||||
|
||||
const isNotAllowed = memberRole.isGuest || memberRole.isViewer;
|
||||
|
||||
return (
|
||||
@ -168,15 +206,49 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
|
||||
}
|
||||
handleOnSubmit={addAsSubIssue}
|
||||
/>
|
||||
{subIssues && subIssues.length > 0 ? (
|
||||
{subIssuesResponse &&
|
||||
subIssuesResponse.sub_issues &&
|
||||
subIssuesResponse.sub_issues.length > 0 ? (
|
||||
<Disclosure defaultOpen={true}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-brand-surface-1">
|
||||
<ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
|
||||
Sub-issues <span className="ml-1 text-gray-600">{subIssues.length}</span>
|
||||
</Disclosure.Button>
|
||||
<div className="flex items-center justify-start gap-3">
|
||||
<Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-brand-surface-1">
|
||||
<ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
|
||||
Sub-issues{" "}
|
||||
<span className="ml-1 text-gray-600">
|
||||
{subIssuesResponse.sub_issues.length}
|
||||
</span>
|
||||
</Disclosure.Button>
|
||||
{subIssuesResponse.state_distribution && (
|
||||
<div className="flex gap-2 w-60 items-center text-gray-800">
|
||||
<div className="bar relative h-1.5 w-full rounded bg-gray-300">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-1.5 rounded bg-green-500 duration-300"
|
||||
style={{
|
||||
width: `${
|
||||
isNaN(completionPercentage)
|
||||
? 0
|
||||
: completionPercentage > 100
|
||||
? 100
|
||||
: completionPercentage.toFixed(0)
|
||||
}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs whitespace-nowrap">
|
||||
{isNaN(completionPercentage)
|
||||
? 0
|
||||
: completionPercentage > 100
|
||||
? 100
|
||||
: completionPercentage.toFixed(0)}
|
||||
% Done
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{open && !isNotAllowed ? (
|
||||
<div className="flex items-center">
|
||||
<button
|
||||
@ -205,7 +277,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
|
||||
leaveTo="transform scale-95 opacity-0"
|
||||
>
|
||||
<Disclosure.Panel className="mt-3 flex flex-col gap-y-1">
|
||||
{subIssues.map((issue) => (
|
||||
{subIssuesResponse.sub_issues.map((issue) => (
|
||||
<Link
|
||||
key={issue.id}
|
||||
href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
|
||||
|
@ -45,7 +45,7 @@ export const InviteMembers: React.FC<Props> = ({ setStep, workspace }) => {
|
||||
>
|
||||
<div className="flex w-full max-w-xl flex-col gap-12">
|
||||
<div className="flex flex-col gap-6 rounded-[10px] bg-brand-surface-2 px-10 py-7 shadow-md">
|
||||
<h2 className="text-2xl font-medium ">Invite co-workers to your team</h2>
|
||||
<h2 className="text-2xl font-medium ">Invite your team to your workspace.</h2>
|
||||
<div className="flex flex-col items-start justify-center gap-2.5 ">
|
||||
<span>Email</span>
|
||||
<div className="w-full">
|
||||
|
@ -171,7 +171,7 @@ export const SingleSidebarProject: React.FC<Props> = ({
|
||||
<Link key={item.name} href={item.href}>
|
||||
<a
|
||||
className={`group flex items-center rounded-md p-2 text-xs font-medium outline-none ${
|
||||
item.href === router.asPath
|
||||
router.asPath.includes(item.href)
|
||||
? "bg-brand-base text-brand-secondary"
|
||||
: "text-brand-secondary hover:bg-brand-surface-1 hover:text-brand-secondary focus:bg-brand-base focus:text-brand-secondary"
|
||||
} ${sidebarCollapse ? "justify-center" : ""}`}
|
||||
@ -179,7 +179,7 @@ export const SingleSidebarProject: React.FC<Props> = ({
|
||||
<div className="grid place-items-center">
|
||||
<item.icon
|
||||
className={`h-5 w-5 flex-shrink-0 ${
|
||||
item.href === router.asPath
|
||||
router.asPath.includes(item.href)
|
||||
? "text-brand-secondary"
|
||||
: "text-brand-secondary group-hover:text-brand-base"
|
||||
} ${!sidebarCollapse ? "mr-3" : ""}`}
|
||||
|
@ -156,7 +156,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-start justify-center gap-2.5 border-t border-brand-base px-4 py-7">
|
||||
<span>How large is your company</span>
|
||||
<span>How large is your company?</span>
|
||||
<div className="w-full">
|
||||
<Controller
|
||||
name="company_size"
|
||||
|
@ -42,7 +42,11 @@ export const WorkspaceSidebarMenu: React.FC = () => {
|
||||
<Link key={index} href={link.href}>
|
||||
<a
|
||||
className={`${
|
||||
link.href === router.asPath
|
||||
(
|
||||
link.name === "Dashboard"
|
||||
? router.asPath === link.href
|
||||
: router.asPath.includes(link.href)
|
||||
)
|
||||
? "bg-brand-base text-brand-base"
|
||||
: "text-brand-secondary hover:bg-brand-base hover:text-brand-base focus:bg-brand-base"
|
||||
} group flex w-full items-center gap-3 rounded-md p-2 text-sm font-medium outline-none ${
|
||||
@ -52,7 +56,13 @@ export const WorkspaceSidebarMenu: React.FC = () => {
|
||||
<span className="grid h-5 w-5 flex-shrink-0 place-items-center">
|
||||
<link.icon
|
||||
className={`${
|
||||
link.href === router.asPath ? "text-brand-base" : "text-brand-secondary"
|
||||
(
|
||||
link.name === "Dashboard"
|
||||
? router.asPath === link.href
|
||||
: router.asPath.includes(link.href)
|
||||
)
|
||||
? "text-brand-base"
|
||||
: "text-brand-secondary"
|
||||
} group-hover:text-brand-base`}
|
||||
aria-hidden="true"
|
||||
height="20"
|
||||
|
@ -24,6 +24,7 @@ import useUser from "hooks/use-user";
|
||||
import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
|
||||
// components
|
||||
import { CreateUpdateBlockInline, SinglePageBlock } from "components/pages";
|
||||
import { CreateLabelModal } from "components/labels";
|
||||
// ui
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
import { CustomSearchSelect, Loader, PrimaryButton, TextArea, Tooltip } from "components/ui";
|
||||
@ -55,6 +56,7 @@ import {
|
||||
|
||||
const SinglePage: NextPage = () => {
|
||||
const [createBlockForm, setCreateBlockForm] = useState(false);
|
||||
const [labelModal, setLabelModal] = useState(false);
|
||||
|
||||
const scrollToRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
@ -383,6 +385,20 @@ const SinglePage: NextPage = () => {
|
||||
}
|
||||
value={pageDetails.labels}
|
||||
onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
|
||||
footerOption={
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
|
||||
onClick={() => {
|
||||
setLabelModal(true);
|
||||
}}
|
||||
>
|
||||
<span className="flex items-center justify-start gap-1 text-brand-secondary">
|
||||
<PlusIcon className="h-4 w-4" aria-hidden="true" />
|
||||
<span>Create New Label</span>
|
||||
</span>
|
||||
</button>
|
||||
}
|
||||
options={options}
|
||||
multiple
|
||||
noChevron
|
||||
@ -531,6 +547,13 @@ const SinglePage: NextPage = () => {
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{labelModal && typeof projectId === "string" && (
|
||||
<CreateLabelModal
|
||||
isOpen={labelModal}
|
||||
handleClose={() => setLabelModal(false)}
|
||||
projectId={projectId}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Loader>
|
||||
|
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 36 KiB |
13
apps/app/types/issues.d.ts
vendored
13
apps/app/types/issues.d.ts
vendored
@ -127,6 +127,19 @@ export interface IIssue {
|
||||
labels_list: string[];
|
||||
}
|
||||
|
||||
export interface ISubIssuesState {
|
||||
backlog: number;
|
||||
unstarted: number;
|
||||
started: number;
|
||||
completed: number;
|
||||
cancelled: number;
|
||||
}
|
||||
|
||||
export interface ISubIssueResponse {
|
||||
state_distribution: ISubIssuesState;
|
||||
sub_issues: IIssue[];
|
||||
}
|
||||
|
||||
export interface BlockeIssue {
|
||||
id: string;
|
||||
blocked_issue_detail?: BlockeIssueDetail;
|
||||
|
Loading…
Reference in New Issue
Block a user