Merge branch 'develop' of https://github.com/makeplane/plane into style/issue_list_responsive

This commit is contained in:
Dakshesh Jain 2023-04-25 18:36:24 +05:30
commit a5c18e37c1
8 changed files with 163 additions and 45 deletions

View File

@ -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}`}

View File

@ -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">

View File

@ -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" : ""}`}

View File

@ -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"

View File

@ -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"

View File

@ -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

View File

@ -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;