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 sriram veeraghanta
parent 7a96e12523
commit c4602951c9
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);
}
}
};