fix: handled quick actions in the project draft issues (#4034)

This commit is contained in:
guru_sainath 2024-03-22 18:35:06 +05:30 committed by GitHub
parent d262eb4ffb
commit db8cf1fb24
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 126 additions and 4 deletions

View File

@ -1,11 +1,11 @@
import { observer } from "mobx-react-lite";
// components
import { ProjectIssueQuickActions } from "@/components/issues";
import { DraftIssueQuickActions } from "@/components/issues";
import { EIssuesStoreType } from "@/constants/issue";
import { BaseKanBanRoot } from "../base-kanban-root";
export interface IKanBanLayout {}
export const DraftKanBanLayout: React.FC = observer(() => (
<BaseKanBanRoot showLoader QuickActions={ProjectIssueQuickActions} storeType={EIssuesStoreType.DRAFT} />
<BaseKanBanRoot showLoader QuickActions={DraftIssueQuickActions} storeType={EIssuesStoreType.DRAFT} />
));

View File

@ -2,7 +2,7 @@ import { FC } from "react";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
// hooks
import { ProjectIssueQuickActions } from "@/components/issues";
import { DraftIssueQuickActions } from "@/components/issues";
import { EIssuesStoreType } from "@/constants/issue";
// components
// types
@ -15,5 +15,5 @@ export const DraftIssueListLayout: FC = observer(() => {
if (!workspaceSlug || !projectId) return null;
return <BaseListRoot QuickActions={ProjectIssueQuickActions} storeType={EIssuesStoreType.DRAFT} />;
return <BaseListRoot QuickActions={DraftIssueQuickActions} storeType={EIssuesStoreType.DRAFT} />;
});

View File

@ -0,0 +1,121 @@
import { useState } from "react";
import omit from "lodash/omit";
import { observer } from "mobx-react";
// hooks
import { Copy, Pencil, Trash2 } from "lucide-react";
import { TIssue } from "@plane/types";
import { CustomMenu } from "@plane/ui";
import { CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
import { EIssuesStoreType } from "@/constants/issue";
import { EUserProjectRoles } from "@/constants/project";
import { useEventTracker, useIssues, useUser } from "@/hooks/store";
// ui
// components
// helpers
// types
import { IQuickActionProps } from "../list/list-view-types";
// constant
export const DraftIssueQuickActions: React.FC<IQuickActionProps> = observer((props) => {
const { issue, handleDelete, handleUpdate, customActionButton, portalElement, readOnly = false } = props;
// states
const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
// store hooks
const {
membership: { currentProjectRole },
} = useUser();
const { setTrackElement } = useEventTracker();
const { issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
// derived values
const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
// auth
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER && !readOnly;
const isDeletingAllowed = isEditingAllowed;
const duplicateIssuePayload = omit(
{
...issue,
name: `${issue.name} (copy)`,
is_draft: true,
},
["id"]
);
return (
<>
<DeleteIssueModal
data={issue}
isOpen={deleteIssueModal}
handleClose={() => setDeleteIssueModal(false)}
onSubmit={handleDelete}
/>
<CreateUpdateIssueModal
isOpen={createUpdateIssueModal}
onClose={() => {
setCreateUpdateIssueModal(false);
setIssueToEdit(undefined);
}}
data={issueToEdit ?? duplicateIssuePayload}
onSubmit={async (data) => {
if (issueToEdit && handleUpdate) await handleUpdate(data);
}}
storeType={EIssuesStoreType.PROJECT}
isDraft
/>
<CustomMenu
menuItemsClassName="z-[14]"
placement="bottom-start"
customButton={customActionButton}
portalElement={portalElement}
maxHeight="lg"
closeOnSelect
ellipsis
>
{isEditingAllowed && (
<CustomMenu.MenuItem
onClick={() => {
setTrackElement(activeLayout);
setIssueToEdit(issue);
setCreateUpdateIssueModal(true);
}}
>
<div className="flex items-center gap-2">
<Pencil className="h-3 w-3" />
Edit
</div>
</CustomMenu.MenuItem>
)}
{isEditingAllowed && (
<CustomMenu.MenuItem
onClick={() => {
setTrackElement(activeLayout);
setCreateUpdateIssueModal(true);
}}
>
<div className="flex items-center gap-2">
<Copy className="h-3 w-3" />
Make a copy
</div>
</CustomMenu.MenuItem>
)}
{isDeletingAllowed && (
<CustomMenu.MenuItem
onClick={() => {
setTrackElement(activeLayout);
setDeleteIssueModal(true);
}}
>
<div className="flex items-center gap-2">
<Trash2 className="h-3 w-3" />
Delete
</div>
</CustomMenu.MenuItem>
)}
</CustomMenu>
</>
);
});

View File

@ -2,4 +2,5 @@ export * from "./cycle-issue";
export * from "./module-issue";
export * from "./project-issue";
export * from "./archived-issue";
export * from "./draft-issue";
export * from "./all-issue";