thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

feat: global component for links list (#307)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-02-21 11:23:50 +05:30 committed by GitHub
parent 818fe3ecf7
commit 33e2986062
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 180 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/app/components/core/issues-view-filter.tsx
View File

@ -131,7 +131,6 @@ export const IssuesFilterView: React.FC<Props> = ({ issues }) => {
<CustomMenu.MenuItem
key={option.key}
onClick={() => {
console.log(option.key);
setOrderBy(option.key);
}}
>

16
apps/app/components/core/issues-view.tsx
View File

@ -114,8 +114,14 @@ export const IssuesView: React.FC<Props> = ({
if (orderBy === "sort_order") {
const destinationGroupArray = groupedByIssues[destination.droppableId];
if (destinationGroupArray.length !== 0) {
if (destination.index === 0) newSortOrder = destinationGroupArray[0].sort_order - 10000;
else if (destination.index === destinationGroupArray.length)
else if (
(source.droppableId !== destination.droppableId &&
destination.index === destinationGroupArray.length) ||
(source.droppableId === destination.droppableId &&
destination.index === destinationGroupArray.length - 1)
)
newSortOrder =
destinationGroupArray[destinationGroupArray.length - 1].sort_order + 10000;
else
@ -124,17 +130,15 @@ export const IssuesView: React.FC<Props> = ({
destinationGroupArray[destination.index].sort_order) /
2;
}
}
if (source.droppableId !== destination.droppableId) {
if (orderBy === "sort_order" || source.droppableId !== destination.droppableId) {
const sourceGroup = source.droppableId; // source group id
const destinationGroup = destination.droppableId; // destination group id
if (!sourceGroup || !destinationGroup) return;
if (selectedGroup === "priority") {
// update the removed item for mutation
draggedItem.priority = destinationGroup;
if (cycleId)
mutate<CycleIssueResponse[]>(
CYCLE_ISSUES(cycleId as string),
@ -220,8 +224,6 @@ export const IssuesView: React.FC<Props> = ({
// update the removed item for mutation
if (!destinationStateId || !destinationState) return;
draggedItem.state = destinationStateId;
draggedItem.state_detail = destinationState;
if (cycleId)
mutate<CycleIssueResponse[]>(

1
apps/app/components/core/sidebar/index.ts
View File

@ -1,2 +1,3 @@
export * from "./links-list";
export * from "./sidebar-progress-stats";
export * from "./single-progress-stats";

58
apps/app/components/core/sidebar/links-list.tsx Normal file
View File

@ -0,0 +1,58 @@
import Link from "next/link";
// icons
import { LinkIcon, TrashIcon } from "@heroicons/react/24/outline";
// helpers
import { timeAgo } from "helpers/date-time.helper";
// types
import { IUserLite, UserAuth } from "types";
type Props = {
links: {
id: string;
created_at: Date;
created_by: string;
created_by_detail: IUserLite;
title: string;
url: string;
}[];
handleDeleteLink: (linkId: string) => void;
userAuth: UserAuth;
};
export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }) => {
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return (
<>
{links.map((link) => (
<div key={link.id} className="group relative">
{!isNotAllowed && (
<div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover:opacity-100">
<button
type="button"
className="grid h-7 w-7 place-items-center rounded bg-gray-100 p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
onClick={() => handleDeleteLink(link.id)}
>
<TrashIcon className="h-4 w-4" />
</button>
</div>
)}
<Link href={link.url} target="_blank">
<a className="group relative flex gap-2 rounded-md border bg-gray-100 p-2">
<div className="mt-0.5">
<LinkIcon className="h-3.5 w-3.5" />
</div>
<div>
<h5>{link.title}</h5>
{/* <p className="mt-0.5 text-gray-500">
Added {timeAgo(link.created_at)} ago by {link.created_by_detail.email}
</p> */}
</div>
</a>
</Link>
</div>
))}
</>
);
};

1
apps/app/components/issues/index.ts
View File

@ -4,7 +4,6 @@ export * from "./activity";
export * from "./delete-issue-modal";
export * from "./description-form";
export * from "./form";
export * from "./links-list";
export * from "./modal";
export * from "./my-issues-list-item";
export * from "./parent-issues-list-modal";

179
apps/app/components/issues/links-list.tsx
View File

@ -1,179 +0,0 @@
import { FC, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import { mutate } from "swr";
// headless ui
import { Disclosure, Transition } from "@headlessui/react";
// services
import issuesService from "services/issues.service";
// hooks
import useToast from "hooks/use-toast";
// components
import { LinkModal } from "components/core";
// ui
import { CustomMenu } from "components/ui";
// icons
import { ChevronRightIcon, LinkIcon, PlusIcon } from "@heroicons/react/24/outline";
// helpers
import { copyTextToClipboard } from "helpers/string.helper";
import { timeAgo } from "helpers/date-time.helper";
// types
import { IIssue, IIssueLink, UserAuth } from "types";
// fetch-keys
import { ISSUE_DETAILS } from "constants/fetch-keys";
type Props = {
parentIssue: IIssue;
userAuth: UserAuth;
};
export const LinksList: FC<Props> = ({ parentIssue, userAuth }) => {
const [linkModal, setLinkModal] = useState(false);
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { setToastAlert } = useToast();
const handleCreateLink = async (formData: IIssueLink) => {
if (!workspaceSlug || !projectId || !parentIssue) return;
const previousLinks = parentIssue?.issue_link.map((l) => ({ title: l.title, url: l.url }));
const payload: Partial<IIssue> = {
links_list: [...(previousLinks ?? []), formData],
};
await issuesService
.patchIssue(workspaceSlug as string, projectId as string, parentIssue.id, payload)
.then((res) => {
mutate(ISSUE_DETAILS(parentIssue.id as string));
})
.catch((err) => {
console.log(err);
});
};
const handleDeleteLink = async (linkId: string) => {
if (!workspaceSlug || !projectId || !parentIssue) return;
const updatedLinks = parentIssue.issue_link.filter((l) => l.id !== linkId);
mutate<IIssue>(
ISSUE_DETAILS(parentIssue.id as string),
(prevData) => ({ ...(prevData as IIssue), issue_link: updatedLinks }),
false
);
await issuesService
.patchIssue(workspaceSlug as string, projectId as string, parentIssue.id, {
links_list: updatedLinks,
})
.then((res) => {
mutate(ISSUE_DETAILS(parentIssue.id as string));
})
.catch((err) => {
console.log(err);
});
};
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return (
<>
<LinkModal
isOpen={linkModal}
handleClose={() => setLinkModal(false)}
onFormSubmit={handleCreateLink}
/>
{parentIssue.issue_link && parentIssue.issue_link.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-gray-100">
<ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
Links <span className="ml-1 text-gray-600">{parentIssue.issue_link.length}</span>
</Disclosure.Button>
{open && !isNotAllowed ? (
<div className="flex items-center">
<button
type="button"
className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100"
onClick={() => setLinkModal(true)}
>
<PlusIcon className="h-3 w-3" />
Create new
</button>
</div>
) : null}
</div>
<Transition
enter="transition duration-100 ease-out"
enterFrom="transform scale-95 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<Disclosure.Panel className="mt-3 flex flex-col gap-y-1">
{parentIssue.issue_link.map((link) => (
<div
key={link.id}
className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-gray-100"
>
<Link href={link.url}>
<a className="flex items-center gap-2 rounded text-xs">
<LinkIcon className="h-3 w-3" />
<span className="max-w-sm break-all font-medium">{link.title}</span>
<span className="text-gray-400 text-[0.65rem]">
{timeAgo(link.created_at)}
</span>
</a>
</Link>
{!isNotAllowed && (
<div className="opacity-0 group-hover:opacity-100">
<CustomMenu ellipsis>
<CustomMenu.MenuItem
onClick={() =>
copyTextToClipboard(link.url).then(() => {
setToastAlert({
type: "success",
title: "Link copied to clipboard",
});
})
}
>
Copy link
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => handleDeleteLink(link.id)}>
Remove link
</CustomMenu.MenuItem>
</CustomMenu>
</div>
)}
</div>
))}
</Disclosure.Panel>
</Transition>
</>
)}
</Disclosure>
) : (
!isNotAllowed && (
<button
type="button"
className="flex cursor-pointer items-center justify-between gap-1 px-2 py-1 text-xs rounded duration-300 hover:bg-gray-100"
onClick={() => setLinkModal(true)}
>
<PlusIcon className="h-3 w-3" />
Add new link
</button>
)
)}
</>
);
};

86
apps/app/components/issues/sidebar.tsx
View File

@ -13,9 +13,10 @@ import { Popover, Listbox, Transition } from "@headlessui/react";
// hooks
import useToast from "hooks/use-toast";
// services
import issuesServices from "services/issues.service";
import issuesService from "services/issues.service";
import modulesService from "services/modules.service";
// components
import { LinkModal, LinksList } from "components/core";
import {
DeleteIssueModal,
SidebarAssigneeSelect,
@ -43,7 +44,7 @@ import {
// helpers
import { copyTextToClipboard } from "helpers/string.helper";
// types
import type { ICycle, IIssue, IIssueLabels, IModule, UserAuth } from "types";
import type { ICycle, IIssue, IIssueLabels, IIssueLink, IModule, UserAuth } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS, PROJECT_ISSUES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
@ -69,6 +70,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
}) => {
const [createLabelForm, setCreateLabelForm] = useState(false);
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
const [linkModal, setLinkModal] = useState(false);
const router = useRouter();
const { workspaceSlug, projectId, issueId } = router.query;
@ -80,14 +82,14 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
: null,
workspaceSlug && projectId
? () => issuesServices.getIssues(workspaceSlug as string, projectId as string)
? () => issuesService.getIssues(workspaceSlug as string, projectId as string)
: null
);
const { data: issueLabels, mutate: issueLabelMutate } = useSWR<IIssueLabels[]>(
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
workspaceSlug && projectId
? () => issuesServices.getIssueLabels(workspaceSlug as string, projectId as string)
? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
: null
);
@ -104,7 +106,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
const handleNewLabel = (formData: any) => {
if (!workspaceSlug || !projectId || isSubmitting) return;
issuesServices
issuesService
.createIssueLabel(workspaceSlug as string, projectId as string, formData)
.then((res) => {
reset(defaultValues);
@ -118,7 +120,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
(cycleDetail: ICycle) => {
if (!workspaceSlug || !projectId || !issueDetail) return;
issuesServices
issuesService
.addIssueToCycle(workspaceSlug as string, projectId as string, cycleDetail.id, {
issues: [issueDetail.id],
})
@ -144,6 +146,48 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
[workspaceSlug, projectId, issueId, issueDetail]
);
const handleCreateLink = async (formData: IIssueLink) => {
if (!workspaceSlug || !projectId || !issueDetail) return;
const previousLinks = issueDetail?.issue_link.map((l) => ({ title: l.title, url: l.url }));
const payload: Partial<IIssue> = {
links_list: [...(previousLinks ?? []), formData],
};
await issuesService
.patchIssue(workspaceSlug as string, projectId as string, issueDetail.id, payload)
.then((res) => {
mutate(ISSUE_DETAILS(issueDetail.id as string));
})
.catch((err) => {
console.log(err);
});
};
const handleDeleteLink = async (linkId: string) => {
if (!workspaceSlug || !projectId || !issueDetail) return;
const updatedLinks = issueDetail.issue_link.filter((l) => l.id !== linkId);
mutate<IIssue>(
ISSUE_DETAILS(issueDetail.id as string),
(prevData) => ({ ...(prevData as IIssue), issue_link: updatedLinks }),
false
);
await issuesService
.patchIssue(workspaceSlug as string, projectId as string, issueDetail.id, {
links_list: updatedLinks,
})
.then((res) => {
mutate(ISSUE_DETAILS(issueDetail.id as string));
})
.catch((err) => {
console.log(err);
});
};
useEffect(() => {
if (!createLabelForm) return;
@ -154,6 +198,11 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
return (
<>
<LinkModal
isOpen={linkModal}
handleClose={() => setLinkModal(false)}
onFormSubmit={handleCreateLink}
/>
<DeleteIssueModal
handleClose={() => setDeleteIssueModal(false)}
isOpen={deleteIssueModal}
@ -297,7 +346,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
/>
</div>
</div>
<div className="space-y-3 pt-3">
<div className="space-y-3 py-3">
<div className="flex items-start justify-between">
<div className="flex basis-1/2 items-center gap-x-2 text-sm">
<TagIcon className="h-4 w-4" />
@ -527,6 +576,29 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
</form>
)}
</div>
<div className="py-1 text-xs">
<div className="flex items-center justify-between gap-2">
<h4>Links</h4>
{!isNotAllowed && (
<button
type="button"
className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-100"
onClick={() => setLinkModal(true)}
>
<PlusIcon className="h-4 w-4" />
</button>
)}
</div>
<div className="mt-2 space-y-2">
{issueDetail?.issue_link && issueDetail.issue_link.length > 0 ? (
<LinksList
links={issueDetail.issue_link}
handleDeleteLink={handleDeleteLink}
userAuth={userAuth}
/>
) : null}
</div>
</div>
</div>
</>
);

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

@ -25,7 +25,7 @@ import modulesService from "services/modules.service";
// hooks
import useToast from "hooks/use-toast";
// components
import { LinkModal, SidebarProgressStats } from "components/core";
import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules";
import ProgressChart from "components/core/sidebar/progress-chart";
@ -37,7 +37,7 @@ import { renderDateFormat, renderShortNumericDateFormat, timeAgo } from "helpers
import { copyTextToClipboard } from "helpers/string.helper";
import { groupBy } from "helpers/array.helper";
// types
import { IIssue, IModule, ModuleIssueResponse, ModuleLink } from "types";
import { IIssue, IModule, ModuleIssueResponse, ModuleLink, UserAuth } from "types";
// fetch-keys
import { MODULE_DETAILS } from "constants/fetch-keys";
// constant
@ -56,9 +56,16 @@ type Props = {
module?: IModule;
isOpen: boolean;
moduleIssues: ModuleIssueResponse[] | undefined;
userAuth: UserAuth;
};
export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen, moduleIssues }) => {
export const ModuleDetailsSidebar: React.FC<Props> = ({
issues,
module,
isOpen,
moduleIssues,
userAuth,
}) => {
const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
const [moduleLinkModal, setModuleLinkModal] = useState(false);
const [startDateRange, setStartDateRange] = useState<Date | null>(new Date());
@ -128,6 +135,13 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
});
};
const handleDeleteLink = (linkId: string) => {
if (!module) return;
const updatedLinks = module.link_module.filter((l) => l.id !== linkId);
submitChanges({ links_list: updatedLinks });
};
useEffect(() => {
if (module)
reset({
@ -348,40 +362,13 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
</button>
</div>
<div className="mt-2 space-y-2">
{module.link_module && module.link_module.length > 0
? module.link_module.map((link) => (
<div key={link.id} className="group relative">
<div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover:opacity-100">
<button
type="button"
className="grid h-7 w-7 place-items-center rounded bg-gray-100 p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
onClick={() => {
const updatedLinks = module.link_module.filter(
(l) => l.id !== link.id
);
submitChanges({ links_list: updatedLinks });
}}
>
<TrashIcon className="h-4 w-4" />
</button>
</div>
<Link href={link.url} target="_blank">
<a className="group relative flex gap-2 rounded-md border bg-gray-100 p-2">
<div className="mt-0.5">
<LinkIcon className="h-3.5 w-3.5" />
</div>
<div>
<h5>{link.title}</h5>
<p className="mt-0.5 text-gray-500">
Added {timeAgo(link.created_at)} ago by{" "}
{link.created_by_detail.email}
</p>
</div>
</a>
</Link>
</div>
))
: null}
{module.link_module && module.link_module.length > 0 ? (
<LinksList
links={module.link_module}
handleDeleteLink={handleDeleteLink}
userAuth={userAuth}
/>
) : null}
</div>
</div>
</div>

2
apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
View File

@ -20,7 +20,6 @@ import {
IssueDetailsSidebar,
IssueActivitySection,
AddComment,
LinksList,
} from "components/issues";
// ui
import { Loader, CustomMenu } from "components/ui";
@ -196,7 +195,6 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
/>
<div className="mt-2 space-y-2">
<SubIssuesList parentIssue={issueDetails} userAuth={props} />
<LinksList parentIssue={issueDetails} userAuth={props} />
</div>
</div>
<div className="space-y-5 bg-secondary pt-3">

1
apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
View File

@ -215,6 +215,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
module={moduleDetails}
isOpen={moduleSidebar}
moduleIssues={moduleIssues}
userAuth={props}
/>
</AppLayout>
</IssueViewContextProvider>