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

fix: kanban board block's menu & drop delete. (#2987)

Browse Source 
* fix: kanban board block menu click

* fix: menu active/disable

* fix: drag n drop delete modal

* fix: quick action button in all the layouts

* chore: toast for drag & drop api
This commit is contained in:
Lakhan Baheti 2023-12-06 19:21:24 +05:30 committed by GitHub
parent 567c3fadc0
commit 0d762d74dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 225 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
View File

@ -81,8 +81,9 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
groupedIssueIds={groupedIssueIds}
layout={displayFilters?.calendar?.layout}
showWeekends={displayFilters?.calendar?.show_weekends ?? false}
quickActions={(issue) => (
quickActions={(issue, customActionButton) => (
<QuickActions
customActionButton={customActionButton}
issue={issue}
handleDelete={async () => handleIssues(issue.target_date ?? "", issue, EIssueActions.DELETE)}
handleUpdate={

2
web/components/issues/issue-layouts/calendar/calendar.tsx
View File

@ -16,7 +16,7 @@ type Props = {
groupedIssueIds: IGroupedIssues;
layout: "month" | "week" | undefined;
showWeekends: boolean;
quickActions: (issue: IIssue) => React.ReactNode;
quickActions: (issue: IIssue, customActionButton?: React.ReactElement) => React.ReactNode;
quickAddCallback?: (
workspaceSlug: string,
projectId: string,

2
web/components/issues/issue-layouts/calendar/day-tile.tsx
View File

@ -16,7 +16,7 @@ type Props = {
date: ICalendarDate;
issues: IIssueResponse | undefined;
groupedIssueIds: IGroupedIssues;
quickActions: (issue: IIssue) => React.ReactNode;
quickActions: (issue: IIssue, customActionButton?: React.ReactElement) => React.ReactNode;
enableQuickIssueCreate?: boolean;
quickAddCallback?: (
workspaceSlug: string,

29
web/components/issues/issue-layouts/calendar/issue-blocks.tsx
View File

@ -1,8 +1,12 @@
import { useState, useRef } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { Draggable } from "@hello-pangea/dnd";
import { MoreHorizontal } from "lucide-react";
// components
import { Tooltip } from "@plane/ui";
// hooks
import useOutsideClickDetector from "hooks/use-outside-click-detector";
// types
import { IIssue } from "types";
import { IIssueResponse } from "store/issues/types";
@ -10,7 +14,7 @@ import { IIssueResponse } from "store/issues/types";
type Props = {
issues: IIssueResponse | undefined;
issueIdList: string[] | null;
quickActions: (issue: IIssue) => React.ReactNode;
quickActions: (issue: IIssue, customActionButton?: React.ReactElement) => React.ReactNode;
};
export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
@ -18,6 +22,11 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
// router
const router = useRouter();
// states
const [isMenuActive, setIsMenuActive] = useState(false);
const menuActionRef = useRef<HTMLDivElement | null>(null);
const handleIssuePeekOverview = (issue: IIssue) => {
const { query } = router;
@ -27,6 +36,20 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
});
};
useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
const customActionButton = (
<div
ref={menuActionRef}
className={`w-full cursor-pointer text-custom-sidebar-text-400 rounded p-1 hover:bg-custom-background-80 ${
isMenuActive ? "bg-custom-background-80 text-custom-text-100" : "text-custom-text-200"
}`}
onClick={() => setIsMenuActive(!isMenuActive)}
>
<MoreHorizontal className="h-3.5 w-3.5" />
</div>
);
return (
<>
{issueIdList?.map((issueId, index) => {
@ -69,13 +92,13 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
</Tooltip>
</div>
<div
className="hidden group-hover/calendar-block:block"
className={`h-5 w-5 hidden group-hover/calendar-block:block ${isMenuActive ? "!block" : ""}`}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
}}
>
{quickActions(issue)}
{quickActions(issue, customActionButton)}
</div>
</div>
</div>

2
web/components/issues/issue-layouts/calendar/week-days.tsx
View File

@ -15,7 +15,7 @@ type Props = {
issues: IIssueResponse | undefined;
groupedIssueIds: IGroupedIssues;
week: ICalendarWeek | undefined;
quickActions: (issue: IIssue) => React.ReactNode;
quickActions: (issue: IIssue, customActionButton?: React.ReactElement) => React.ReactNode;
enableQuickIssueCreate?: boolean;
quickAddCallback?: (
workspaceSlug: string,

75
web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
View File

@ -1,5 +1,5 @@
import { FC, useCallback, useState } from "react";
import { DragDropContext, DropResult, Droppable } from "@hello-pangea/dnd";
import { DragDropContext, DragStart, DraggableLocation, DropResult, Droppable } from "@hello-pangea/dnd";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// mobx store
@ -24,13 +24,15 @@ import {
} from "store/issues";
import { IQuickActionProps } from "../list/list-view-types";
import { IIssueKanBanViewStore } from "store/issue";
// hooks
import useToast from "hooks/use-toast";
// constants
import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
//components
import { KanBan } from "./default";
import { KanBanSwimLanes } from "./swimlanes";
import { EProjectStore } from "store/command-palette.store";
import { IssuePeekOverview } from "components/issues";
import { DeleteIssueModal, IssuePeekOverview } from "components/issues";
import { EUserWorkspaceRoles } from "constants/workspace";
export interface IBaseKanBanLayout {
@ -64,10 +66,16 @@ export interface IBaseKanBanLayout {
groupBy: string | null,
issues: any,
issueWithIds: any
) => void;
) => Promise<IIssue | undefined>;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
type KanbanDragState = {
draggedIssueId?: string | null;
source?: DraggableLocation | null;
destination?: DraggableLocation | null;
};
export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBaseKanBanLayout) => {
const {
issueStore,
@ -93,6 +101,9 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
user: userStore,
} = useMobxStore();
// hooks
const { setToastAlert } = useToast();
const { currentProjectRole } = userStore;
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
@ -114,8 +125,15 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
const { enableInlineEditing, enableQuickAdd, enableIssueCreation } = issueStore?.viewFlags || {};
// states
const [isDragStarted, setIsDragStarted] = useState<boolean>(false);
const onDragStart = () => {
const [dragState, setDragState] = useState<KanbanDragState>({});
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
const onDragStart = (dragStart: DragStart) => {
setDragState({
draggedIssueId: dragStart.draggableId.split("__")[0],
});
setIsDragStarted(true);
};
@ -134,7 +152,18 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
)
return;
if (handleDragDrop) handleDragDrop(result.source, result.destination, sub_group_by, group_by, issues, issueIds);
if (handleDragDrop) {
if (result.destination?.droppableId && result.destination?.droppableId.split("__")[0] === "issue-trash-box") {
setDragState({
...dragState,
source: result.source,
destination: result.destination,
});
setDeleteIssueModal(true);
} else {
handleDragDrop(result.source, result.destination, sub_group_by, group_by, issues, issueIds);
}
}
};
const handleIssues = useCallback(
@ -146,6 +175,29 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
[issueActions]
);
const handleDeleteIssue = async () => {
if (!handleDragDrop) return;
await handleDragDrop(dragState.source, dragState.destination, sub_group_by, group_by, issues, issueIds)
.then(() => {
setToastAlert({
title: "Success",
type: "success",
message: "Issue deleted successfully",
});
})
.catch(() => {
setToastAlert({
title: "Error",
type: "error",
message: "Failed to delete issue",
});
})
.finally(() => {
setDeleteIssueModal(false);
setDragState({});
});
};
const handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
kanbanViewStore.handleKanBanToggle(toggle, value);
};
@ -156,6 +208,13 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
return (
<>
<DeleteIssueModal
data={dragState.draggedIssueId ? issues[dragState.draggedIssueId] : ({} as IIssue)}
isOpen={deleteIssueModal}
handleClose={() => setDeleteIssueModal(false)}
onSubmit={handleDeleteIssue}
/>
{showLoader && issueStore?.loader === "init-loader" && (
<div className="fixed top-16 right-2 z-30 bg-custom-background-80 shadow-custom-shadow-sm w-10 h-10 rounded flex justify-center items-center">
<Spinner className="w-5 h-5" />
@ -194,8 +253,9 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
group_by={group_by}
order_by={order_by}
handleIssues={handleIssues}
quickActions={(sub_group_by, group_by, issue) => (
quickActions={(sub_group_by, group_by, issue, customActionButton) => (
<QuickActions
customActionButton={customActionButton}
issue={issue}
handleDelete={async () => handleIssues(sub_group_by, group_by, issue, EIssueActions.DELETE)}
handleUpdate={
@ -237,8 +297,9 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
group_by={group_by}
order_by={order_by}
handleIssues={handleIssues}
quickActions={(sub_group_by, group_by, issue) => (
quickActions={(sub_group_by, group_by, issue, customActionButton) => (
<QuickActions
customActionButton={customActionButton}
issue={issue}
handleDelete={async () => handleIssues(sub_group_by, group_by, issue, EIssueActions.DELETE)}
handleUpdate={

41
web/components/issues/issue-layouts/kanban/block.tsx
View File

@ -1,14 +1,16 @@
import { memo } from "react";
import { memo, useRef, useState } from "react";
import { Draggable } from "@hello-pangea/dnd";
import isEqual from "lodash/isEqual";
// components
import { KanBanProperties } from "./properties";
// ui
import { Tooltip } from "@plane/ui";
// hooks
import useOutsideClickDetector from "hooks/use-outside-click-detector";
// types
import { IIssueDisplayProperties, IIssue } from "types";
import { EIssueActions } from "../types";
import { useRouter } from "next/router";
import { MoreHorizontal } from "lucide-react";
interface IssueBlockProps {
sub_group_id: string;
@ -18,7 +20,12 @@ interface IssueBlockProps {
isDragDisabled: boolean;
showEmptyGroup: boolean;
handleIssues: (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: EIssueActions) => void;
quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
quickActions: (
sub_group_by: string | null,
group_by: string | null,
issue: IIssue,
customActionButton?: React.ReactElement
) => React.ReactNode;
displayProperties: IIssueDisplayProperties | null;
isReadOnly: boolean;
}
@ -39,6 +46,11 @@ export const KanBanIssueMemoBlock: React.FC<IssueBlockProps> = (props) => {
// router
const router = useRouter();
// states
const [isMenuActive, setIsMenuActive] = useState(false);
const menuActionRef = useRef<HTMLDivElement | null>(null);
const updateIssue = (sub_group_by: string | null, group_by: string | null, issueToUpdate: IIssue) => {
if (issueToUpdate) handleIssues(sub_group_by, group_by, issueToUpdate, EIssueActions.UPDATE);
};
@ -56,6 +68,20 @@ export const KanBanIssueMemoBlock: React.FC<IssueBlockProps> = (props) => {
if (columnId) draggableId = `${draggableId}__${columnId}`;
if (sub_group_id) draggableId = `${draggableId}__${sub_group_id}`;
useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
const customActionButton = (
<div
ref={menuActionRef}
className={`w-full cursor-pointer text-custom-sidebar-text-400 rounded p-1 hover:bg-custom-background-80 ${
isMenuActive ? "bg-custom-background-80 text-custom-text-100" : "text-custom-text-200"
}`}
onClick={() => setIsMenuActive(!isMenuActive)}
>
<MoreHorizontal className="h-3.5 w-3.5" />
</div>
);
return (
<>
<Draggable draggableId={draggableId} index={index}>
@ -79,11 +105,16 @@ export const KanBanIssueMemoBlock: React.FC<IssueBlockProps> = (props) => {
<div className="text-xs line-clamp-1 text-custom-text-300">
{issue.project_detail.identifier}-{issue.sequence_id}
</div>
<div className="absolute -top-1 right-0 hidden group-hover/kanban-block:block">
<div
className={`absolute -top-1 right-0 hidden group-hover/kanban-block:block ${
isMenuActive ? "!block" : ""
}`}
>
{quickActions(
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
!columnId && columnId === "null" ? null : columnId,
issue
issue,
customActionButton
)}
</div>
</div>

7
web/components/issues/issue-layouts/kanban/blocks-list.tsx
View File

@ -12,7 +12,12 @@ interface IssueBlocksListProps {
isDragDisabled: boolean;
showEmptyGroup: boolean;
handleIssues: (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: EIssueActions) => void;
quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
quickActions: (
sub_group_by: string | null,
group_by: string | null,
issue: IIssue,
customActionButton?: React.ReactElement
) => React.ReactNode;
displayProperties: IIssueDisplayProperties | null;
isReadOnly: boolean;
}

14
web/components/issues/issue-layouts/kanban/default.tsx
View File

@ -27,7 +27,12 @@ export interface IGroupByKanBan {
isDragDisabled: boolean;
handleIssues: (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: EIssueActions) => void;
showEmptyGroup: boolean;
quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
quickActions: (
sub_group_by: string | null,
group_by: string | null,
issue: IIssue,
customActionButton?: React.ReactElement
) => React.ReactNode;
displayProperties: IIssueDisplayProperties | null;
kanBanToggle: any;
handleKanBanToggle: any;
@ -181,7 +186,12 @@ export interface IKanBan {
order_by: string | null;
sub_group_id?: string;
handleIssues: (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: EIssueActions) => void;
quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
quickActions: (
sub_group_by: string | null,
group_by: string | null,
issue: IIssue,
customActionButton?: React.ReactElement
) => React.ReactNode;
displayProperties: IIssueDisplayProperties | null;
kanBanToggle: any;
handleKanBanToggle: any;

4
web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
View File

@ -47,7 +47,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
},
};
const handleDragDrop = (
const handleDragDrop = async (
source: any,
destination: any,
subGroupBy: string | null,
@ -56,7 +56,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
issueWithIds: IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues | undefined
) => {
if (kanBanHelperStore.handleDragDrop)
kanBanHelperStore.handleDragDrop(
return await kanBanHelperStore.handleDragDrop(
source,
destination,
workspaceSlug,

4
web/components/issues/issue-layouts/kanban/roots/module-root.tsx
View File

@ -47,7 +47,7 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
},
};
const handleDragDrop = (
const handleDragDrop = async (
source: any,
destination: any,
subGroupBy: string | null,
@ -56,7 +56,7 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
issueWithIds: IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues | undefined
) => {
if (kanBanHelperStore.handleDragDrop)
kanBanHelperStore.handleDragDrop(
return await kanBanHelperStore.handleDragDrop(
source,
destination,
workspaceSlug,

4
web/components/issues/issue-layouts/kanban/roots/project-root.tsx
View File

@ -38,7 +38,7 @@ export const KanBanLayout: React.FC = observer(() => {
},
};
const handleDragDrop = (
const handleDragDrop = async (
source: any,
destination: any,
subGroupBy: string | null,
@ -47,7 +47,7 @@ export const KanBanLayout: React.FC = observer(() => {
issueWithIds: IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues | undefined
) => {
if (kanBanHelperStore.handleDragDrop)
kanBanHelperStore.handleDragDrop(
return await kanBanHelperStore.handleDragDrop(
source,
destination,
workspaceSlug,

4
web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
View File

@ -38,7 +38,7 @@ export const ProjectViewKanBanLayout: React.FC = observer(() => {
},
};
const handleDragDrop = (
const handleDragDrop = async (
source: any,
destination: any,
subGroupBy: string | null,
@ -47,7 +47,7 @@ export const ProjectViewKanBanLayout: React.FC = observer(() => {
issueWithIds: IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues | undefined
) => {
if (kanBanHelperStore.handleDragDrop)
kanBanHelperStore.handleDragDrop(
return await kanBanHelperStore.handleDragDrop(
source,
destination,
workspaceSlug,

14
web/components/issues/issue-layouts/kanban/swimlanes.tsx
View File

@ -82,7 +82,12 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
members: IUserLite[] | null;
projects: IProject[] | null;
handleIssues: (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: EIssueActions) => void;
quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
quickActions: (
sub_group_by: string | null,
group_by: string | null,
issue: IIssue,
customActionButton?: React.ReactElement
) => React.ReactNode;
displayProperties: IIssueDisplayProperties | null;
kanBanToggle: any;
handleKanBanToggle: any;
@ -200,7 +205,12 @@ export interface IKanBanSwimLanes {
group_by: string | null;
order_by: string | null;
handleIssues: (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: EIssueActions) => void;
quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
quickActions: (
sub_group_by: string | null,
group_by: string | null,
issue: IIssue,
customActionButton?: React.ReactElement
) => React.ReactNode;
displayProperties: IIssueDisplayProperties | null;
kanBanToggle: any;
handleKanBanToggle: any;

1
web/components/issues/issue-layouts/list/list-view-types.d.ts vendored
View File

@ -3,4 +3,5 @@ export interface IQuickActionProps {
handleDelete: () => Promise<void>;
handleUpdate?: (data: IIssue) => Promise<void>;
handleRemoveFromView?: () => Promise<void>;
customActionButton?: React.ReactElement;
}

4
web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
View File

@ -14,7 +14,7 @@ import { IQuickActionProps } from "../list/list-view-types";
import { EProjectStore } from "store/command-palette.store";
export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
const { issue, handleDelete, handleUpdate } = props;
const { issue, handleDelete, handleUpdate, customActionButton } = props;
const router = useRouter();
const { workspaceSlug } = router.query;
@ -58,7 +58,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
}}
currentStore={EProjectStore.PROJECT}
/>
<CustomMenu placement="bottom-start" ellipsis>
<CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();

4
web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
View File

@ -12,7 +12,7 @@ import { copyUrlToClipboard } from "helpers/string.helper";
import { IQuickActionProps } from "../list/list-view-types";
export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
const { issue, handleDelete } = props;
const { issue, handleDelete, customActionButton } = props;
const router = useRouter();
const { workspaceSlug } = router.query;
@ -40,7 +40,7 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
handleClose={() => setDeleteIssueModal(false)}
onSubmit={handleDelete}
/>
<CustomMenu placement="bottom-start" ellipsis>
<CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();

4
web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
View File

@ -14,7 +14,7 @@ import { IQuickActionProps } from "../list/list-view-types";
import { EProjectStore } from "store/command-palette.store";
export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
const { issue, handleDelete, handleUpdate, handleRemoveFromView } = props;
const { issue, handleDelete, handleUpdate, handleRemoveFromView, customActionButton } = props;
const router = useRouter();
const { workspaceSlug } = router.query;
@ -58,7 +58,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
}}
currentStore={EProjectStore.CYCLE}
/>
<CustomMenu placement="bottom-start" ellipsis>
<CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();

4
web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
View File

@ -14,7 +14,7 @@ import { IQuickActionProps } from "../list/list-view-types";
import { EProjectStore } from "store/command-palette.store";
export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
const { issue, handleDelete, handleUpdate, handleRemoveFromView } = props;
const { issue, handleDelete, handleUpdate, handleRemoveFromView, customActionButton } = props;
const router = useRouter();
const { workspaceSlug } = router.query;
@ -58,7 +58,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
}}
currentStore={EProjectStore.MODULE}
/>
<CustomMenu placement="bottom-start" ellipsis>
<CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();

4
web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
View File

@ -14,7 +14,7 @@ import { IQuickActionProps } from "../list/list-view-types";
import { EProjectStore } from "store/command-palette.store";
export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
const { issue, handleDelete, handleUpdate } = props;
const { issue, handleDelete, handleUpdate, customActionButton } = props;
const router = useRouter();
const { workspaceSlug } = router.query;
@ -58,7 +58,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
}}
currentStore={EProjectStore.PROJECT}
/>
<CustomMenu placement="bottom-start" ellipsis>
<CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();

3
web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
View File

@ -89,8 +89,9 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
displayFilters={issueFiltersStore.issueFilters?.displayFilters ?? {}}
handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
issues={issues as IIssueUnGroupedStructure}
quickActions={(issue) => (
quickActions={(issue, customActionButton) => (
<QuickActions
customActionButton={customActionButton}
issue={issue}
handleDelete={async () => handleIssues(issue, EIssueActions.DELETE)}
handleUpdate={

36
web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
View File

@ -1,8 +1,10 @@
import React from "react";
import React, { useRef, useState } from "react";
import { useRouter } from "next/router";
import { ChevronRight } from "lucide-react";
import { ChevronRight, MoreHorizontal } from "lucide-react";
// components
import { Tooltip } from "@plane/ui";
// hooks
import useOutsideClickDetector from "hooks/use-outside-click-detector";
// types
import { IIssue, IIssueDisplayProperties } from "types";
@ -11,7 +13,7 @@ type Props = {
expanded: boolean;
handleToggleExpand: (issueId: string) => void;
properties: IIssueDisplayProperties;
quickActions: (issue: IIssue) => React.ReactNode;
quickActions: (issue: IIssue, customActionButton?: React.ReactElement) => React.ReactNode;
disableUserActions: boolean;
nestingLevel: number;
};
@ -27,6 +29,10 @@ export const IssueColumn: React.FC<Props> = ({
}) => {
// router
const router = useRouter();
// states
const [isMenuActive, setIsMenuActive] = useState(false);
const menuActionRef = useRef<HTMLDivElement | null>(null);
const handleIssuePeekOverview = (issue: IIssue) => {
const { query } = router;
@ -39,6 +45,20 @@ export const IssueColumn: React.FC<Props> = ({
const paddingLeft = `${nestingLevel * 54}px`;
useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
const customActionButton = (
<div
ref={menuActionRef}
className={`w-full cursor-pointer text-custom-sidebar-text-400 rounded p-1 hover:bg-custom-background-80 ${
isMenuActive ? "bg-custom-background-80 text-custom-text-100" : "text-custom-text-200"
}`}
onClick={() => setIsMenuActive(!isMenuActive)}
>
<MoreHorizontal className="h-3.5 w-3.5" />
</div>
);
return (
<>
<div className="group flex items-center w-[28rem] text-sm h-11 top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
@ -48,12 +68,18 @@ export const IssueColumn: React.FC<Props> = ({
style={issue.parent && nestingLevel !== 0 ? { paddingLeft } : {}}
>
<div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100">
<span className="flex items-center justify-center font-medium opacity-100 group-hover:opacity-0 ">
<span
className={`flex items-center justify-center font-medium opacity-100 group-hover:opacity-0 ${
isMenuActive ? "!opacity-0" : ""
} `}
>
{issue.project_detail?.identifier}-{issue.sequence_id}
</span>
{!disableUserActions && (
<div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">{quickActions(issue)}</div>
<div className={`absolute top-0 left-2.5 hidden group-hover:block ${isMenuActive ? "!block" : ""}`}>
{quickActions(issue, customActionButton)}
</div>
)}
</div>

2
web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx
View File

@ -12,7 +12,7 @@ type Props = {
expandedIssues: string[];
setExpandedIssues: React.Dispatch<React.SetStateAction<string[]>>;
properties: IIssueDisplayProperties;
quickActions: (issue: IIssue) => React.ReactNode;
quickActions: (issue: IIssue,customActionButton?: React.ReactElement) => React.ReactNode;
disableUserActions: boolean;
nestingLevel?: number;
};

2
web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
View File

@ -21,7 +21,7 @@ type Props = {
members?: IUserLite[] | undefined;
labels?: IIssueLabel[] | undefined;
states?: IState[] | undefined;
quickActions: (issue: IIssue) => React.ReactNode;
quickActions: (issue: IIssue,customActionButton?: React.ReactElement) => React.ReactNode;
handleIssues: (issue: IIssue, action: EIssueActions) => void;
openIssuesListModal?: (() => void) | null;
quickAddCallback?: (

11
web/store/issues/base-issue-kanban-helper.store.ts
View File

@ -6,6 +6,7 @@ import { IViewIssuesStore } from "./project-issues/project-view/issue.store";
import { IProjectDraftIssuesStore } from "./project-issues/draft/issue.store";
import { IProfileIssuesStore } from "./profile/issue.store";
import { IGroupedIssues, IIssueResponse, ISubGroupedIssues, TUnGroupedIssues } from "./types";
import { IIssue } from "types";
export interface IKanBanHelpers {
// actions
@ -26,7 +27,7 @@ export interface IKanBanHelpers {
issues: IIssueResponse | undefined,
issueWithIds: IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues | undefined,
viewId?: string | null
) => void;
) => Promise<IIssue | undefined>;
}
export class KanBanHelpers implements IKanBanHelpers {
@ -119,8 +120,8 @@ export class KanBanHelpers implements IKanBanHelpers {
const [removed] = sourceIssues.splice(source.index, 1);
if (removed) {
if (viewId) store?.removeIssue(workspaceSlug, projectId, removed, viewId);
else store?.removeIssue(workspaceSlug, projectId, removed);
if (viewId) return await store?.removeIssue(workspaceSlug, projectId, removed, viewId);
else return await store?.removeIssue(workspaceSlug, projectId, removed);
}
} else {
const sourceIssues = subGroupBy
@ -182,8 +183,8 @@ export class KanBanHelpers implements IKanBanHelpers {
}
if (updateIssue && updateIssue?.id) {
if (viewId) store?.updateIssue(workspaceSlug, projectId, updateIssue.id, updateIssue, viewId);
else store?.updateIssue(workspaceSlug, projectId, updateIssue.id, updateIssue);
if (viewId) return await store?.updateIssue(workspaceSlug, projectId, updateIssue.id, updateIssue, viewId);
else return await store?.updateIssue(workspaceSlug, projectId, updateIssue.id, updateIssue);
}
}
};