github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'refactor/mobx-store' of https://github.com/makeplane/plane into refactor/mobx-store

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-12-14 17:26:22 +05:30
commit 9b86afd089
7 changed files with 253 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -123,12 +123,15 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER; const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
const canEditProperties = (projectId: string | undefined) => { const canEditProperties = useCallback(
const isEditingAllowedBasedOnProject = (projectId: string | undefined) => {
canEditPropertiesBasedOnProject && projectId ? canEditPropertiesBasedOnProject(projectId) : isEditingAllowed; const isEditingAllowedBasedOnProject =
canEditPropertiesBasedOnProject && projectId ? canEditPropertiesBasedOnProject(projectId) : isEditingAllowed;
return enableInlineEditing && isEditingAllowedBasedOnProject; return enableInlineEditing && isEditingAllowedBasedOnProject;
}; },
[canEditPropertiesBasedOnProject, enableInlineEditing, isEditingAllowed]
);
const onDragStart = (dragStart: DragStart) => { const onDragStart = (dragStart: DragStart) => {
setDragState({ setDragState({
@ -183,18 +186,21 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
[issueActions] [issueActions]
); );
const renderQuickActions = (issue: IIssue, customActionButton?: React.ReactElement) => ( const renderQuickActions = useCallback(
<QuickActions (issue: IIssue, customActionButton?: React.ReactElement) => (
customActionButton={customActionButton} <QuickActions
issue={issue} customActionButton={customActionButton}
handleDelete={async () => handleIssues(issue, EIssueActions.DELETE)} issue={issue}
handleUpdate={ handleDelete={async () => handleIssues(issue, EIssueActions.DELETE)}
issueActions[EIssueActions.UPDATE] ? async (data) => handleIssues(data, EIssueActions.UPDATE) : undefined handleUpdate={
} issueActions[EIssueActions.UPDATE] ? async (data) => handleIssues(data, EIssueActions.UPDATE) : undefined
handleRemoveFromView={ }
issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined handleRemoveFromView={
} issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined
/> }
/>
),
[issueActions, handleIssues]
); );
const handleDeleteIssue = async () => { const handleDeleteIssue = async () => {

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

@ -1,8 +1,10 @@
// components import { memo } from "react";
import { KanbanIssueBlock } from "components/issues"; //types
import { IIssueDisplayProperties, IIssue } from "types"; import { IIssueDisplayProperties, IIssue } from "types";
import { EIssueActions } from "../types"; import { EIssueActions } from "../types";
import { IIssueResponse } from "store_legacy/issues/types"; import { IIssueResponse } from "store_legacy/issues/types";
// components
import { KanbanIssueBlock } from "components/issues";
interface IssueBlocksListProps { interface IssueBlocksListProps {
sub_group_id: string; sub_group_id: string;
@ -17,7 +19,7 @@ interface IssueBlocksListProps {
canEditProperties: (projectId: string | undefined) => boolean; canEditProperties: (projectId: string | undefined) => boolean;
} }
export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = (props) => { const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
const { const {
sub_group_id, sub_group_id,
columnId, columnId,
@ -61,3 +63,5 @@ export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = (props) =>
</> </>
); );
}; };
export const KanbanIssueBlocksList = memo(KanbanIssueBlocksListMemo);

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

@ -1,11 +1,10 @@
import React from "react"; import React from "react";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { Droppable } from "@hello-pangea/dnd";
// mobx store // mobx store
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
// components // components
import { KanbanIssueBlocksList, KanBanQuickAddIssueForm } from "components/issues";
import { HeaderGroupByCard } from "./headers/group-by-card"; import { HeaderGroupByCard } from "./headers/group-by-card";
import { KanbanGroup } from "./kanban-group";
// types // types
import { IIssueDisplayProperties, IIssue } from "types"; import { IIssueDisplayProperties, IIssue } from "types";
// constants // constants
@ -76,81 +75,51 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
<div className="relative flex h-full w-full gap-3"> <div className="relative flex h-full w-full gap-3">
{list && {list &&
list.length > 0 && list.length > 0 &&
list.map((_list: IKanbanColumn) => ( list.map((_list: IKanbanColumn) => {
<div const verticalPosition = verticalAlignPosition(_list);
className={`relative flex flex-shrink-0 flex-col ${!verticalAlignPosition(_list) ? `w-[340px]` : ``} group`}
>
{sub_group_by === null && (
<div className="sticky top-0 z-[2] w-full flex-shrink-0 bg-custom-background-90 py-1">
<HeaderGroupByCard
sub_group_by={sub_group_by}
group_by={group_by}
column_id={_list.id}
icon={_list.Icon}
title={_list.name}
count={issueIds?.[_list.id]?.length || 0}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
issuePayload={_list.payload}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
</div>
)}
<div return (
className={`${ <div className={`relative flex flex-shrink-0 flex-col ${!verticalPosition ? `w-[340px]` : ``} group`}>
verticalAlignPosition(_list) ? `min-h-[150px] w-[0px] overflow-hidden` : `w-full transition-all` {sub_group_by === null && (
}`} <div className="sticky top-0 z-[2] w-full flex-shrink-0 bg-custom-background-90 py-1">
> <HeaderGroupByCard
<Droppable droppableId={`${_list.id}__${sub_group_id}`}> sub_group_by={sub_group_by}
{(provided: any, snapshot: any) => ( group_by={group_by}
<div column_id={_list.id}
className={`relative h-full w-full transition-all ${ icon={_list.Icon}
snapshot.isDraggingOver ? `bg-custom-background-80` : `` title={_list.name}
}`} count={issueIds?.[_list.id]?.length || 0}
{...provided.droppableProps} kanBanToggle={kanBanToggle}
ref={provided.innerRef} handleKanBanToggle={handleKanBanToggle}
> issuePayload={_list.payload}
{issues && !verticalAlignPosition(_list) ? ( disableIssueCreation={disableIssueCreation}
<KanbanIssueBlocksList currentStore={currentStore}
sub_group_id={sub_group_id} addIssuesToView={addIssuesToView}
columnId={_list.id}
issues={issues}
issueIds={issueIds?.[_list.id] || []}
isDragDisabled={isDragDisabled}
showEmptyGroup={showEmptyGroup}
handleIssues={handleIssues}
quickActions={quickActions}
displayProperties={displayProperties}
canEditProperties={canEditProperties}
/>
) : null}
{provided.placeholder}
</div>
)}
</Droppable>
<div className="sticky bottom-0 z-[0] w-full flex-shrink-0 bg-custom-background-90 py-1">
{enableQuickIssueCreate && !disableIssueCreation && (
<KanBanQuickAddIssueForm
formKey="name"
groupId={_list.id}
subGroupId={sub_group_id}
prePopulatedData={{
...(group_by && { [group_by]: _list.id }),
...(sub_group_by && sub_group_id !== "null" && { [sub_group_by]: sub_group_id }),
}}
quickAddCallback={quickAddCallback}
viewId={viewId}
/> />
)} </div>
</div> )}
<KanbanGroup
groupId={_list.id}
issues={issues}
issueIds={issueIds}
sub_group_by={sub_group_by}
group_by={group_by}
sub_group_id={sub_group_id}
isDragDisabled={isDragDisabled}
handleIssues={handleIssues}
showEmptyGroup={showEmptyGroup}
quickActions={quickActions}
displayProperties={displayProperties}
enableQuickIssueCreate={enableQuickIssueCreate}
quickAddCallback={quickAddCallback}
viewId={viewId}
disableIssueCreation={disableIssueCreation}
canEditProperties={canEditProperties}
verticalPosition={verticalPosition}
/>
</div> </div>
</div> );
))} })}
</div> </div>
); );
}); });

102
web/components/issues/issue-layouts/kanban/kanban-group.tsx Normal file
View File

@ -0,0 +1,102 @@
import { Droppable } from "@hello-pangea/dnd";
//types
import { IIssue, IIssueDisplayProperties, IIssueResponse } from "types";
import { EIssueActions } from "../types";
//components
import { KanBanQuickAddIssueForm, KanbanIssueBlocksList } from ".";
interface IKanbanGroup {
groupId: string;
issues: IIssueResponse;
issueIds: any;
sub_group_by: string | null;
group_by: string | null;
sub_group_id: string;
isDragDisabled: boolean;
handleIssues: (issue: IIssue, action: EIssueActions) => void;
showEmptyGroup: boolean;
quickActions: (issue: IIssue, customActionButton?: React.ReactElement) => React.ReactNode;
displayProperties: IIssueDisplayProperties | null;
enableQuickIssueCreate?: boolean;
quickAddCallback?: (
workspaceSlug: string,
projectId: string,
data: IIssue,
viewId?: string
) => Promise<IIssue | undefined>;
viewId?: string;
disableIssueCreation?: boolean;
canEditProperties: (projectId: string | undefined) => boolean;
verticalPosition: any;
}
export const KanbanGroup = (props: IKanbanGroup) => {
const {
groupId,
sub_group_id,
group_by,
sub_group_by,
issues,
verticalPosition,
issueIds,
isDragDisabled,
showEmptyGroup,
handleIssues,
quickActions,
displayProperties,
canEditProperties,
enableQuickIssueCreate,
disableIssueCreation,
quickAddCallback,
viewId,
} = props;
return (
<div className={`${verticalPosition ? `min-h-[150px] w-[0px] overflow-hidden` : `w-full transition-all`}`}>
<Droppable droppableId={`${groupId}__${sub_group_id}`}>
{(provided: any, snapshot: any) => (
<div
className={`relative h-full w-full transition-all ${
snapshot.isDraggingOver ? `bg-custom-background-80` : ``
}`}
{...provided.droppableProps}
ref={provided.innerRef}
>
{issues && !verticalPosition ? (
<KanbanIssueBlocksList
sub_group_id={sub_group_id}
columnId={groupId}
issues={issues}
issueIds={issueIds?.[groupId] || []}
isDragDisabled={isDragDisabled}
showEmptyGroup={showEmptyGroup}
handleIssues={handleIssues}
quickActions={quickActions}
displayProperties={displayProperties}
canEditProperties={canEditProperties}
/>
) : null}
{provided.placeholder}
</div>
)}
</Droppable>
<div className="sticky bottom-0 z-[0] w-full flex-shrink-0 bg-custom-background-90 py-1">
{enableQuickIssueCreate && !disableIssueCreation && (
<KanBanQuickAddIssueForm
formKey="name"
groupId={groupId}
subGroupId={sub_group_id}
prePopulatedData={{
...(group_by && { [group_by]: groupId }),
...(sub_group_by && sub_group_id !== "null" && { [sub_group_by]: sub_group_id }),
}}
quickAddCallback={quickAddCallback}
viewId={viewId}
/>
)}
</div>
</div>
);
};

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

@ -1,14 +1,15 @@
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { useMemo } from "react";
// mobx store // mobx store
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
// components // components
import { ProjectIssueQuickActions } from "components/issues"; import { ProjectIssueQuickActions } from "components/issues";
import { BaseKanBanRoot } from "../base-kanban-root";
// types // types
import { IIssue } from "types"; import { IIssue } from "types";
// constants // constants
import { EIssueActions } from "../../types"; import { EIssueActions } from "../../types";
import { BaseKanBanRoot } from "../base-kanban-root";
import { EProjectStore } from "store_legacy/command-palette.store"; import { EProjectStore } from "store_legacy/command-palette.store";
import { IGroupedIssues, IIssueResponse, ISubGroupedIssues, TUnGroupedIssues } from "store_legacy/issues/types"; import { IGroupedIssues, IIssueResponse, ISubGroupedIssues, TUnGroupedIssues } from "store_legacy/issues/types";
@ -25,18 +26,21 @@ export const KanBanLayout: React.FC = observer(() => {
kanBanHelpers: kanBanHelperStore, kanBanHelpers: kanBanHelperStore,
} = useMobxStore(); } = useMobxStore();
const issueActions = { const issueActions = useMemo(
[EIssueActions.UPDATE]: async (issue: IIssue) => { () => ({
if (!workspaceSlug) return; [EIssueActions.UPDATE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
await issueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue); await issueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue);
}, },
[EIssueActions.DELETE]: async (issue: IIssue) => { [EIssueActions.DELETE]: async (issue: IIssue) => {
if (!workspaceSlug) return; if (!workspaceSlug) return;
await issueStore.removeIssue(workspaceSlug, issue.project, issue.id); await issueStore.removeIssue(workspaceSlug, issue.project, issue.id);
}, },
}; }),
[issueStore]
);
const handleDragDrop = async ( const handleDragDrop = async (
source: any, source: any,

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

@ -1,5 +1,7 @@
import React from "react"; import React from "react";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
//mobx
import { useMobxStore } from "lib/mobx/store-provider";
// components // components
import { KanBan } from "./default"; import { KanBan } from "./default";
import { HeaderSubGroupByCard } from "./headers/sub-group-by-card"; import { HeaderSubGroupByCard } from "./headers/sub-group-by-card";
@ -11,7 +13,6 @@ import { IIssueResponse, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues } f
import { EIssueActions } from "../types"; import { EIssueActions } from "../types";
import { EProjectStore } from "store_legacy/command-palette.store"; import { EProjectStore } from "store_legacy/command-palette.store";
import { IKanbanColumn, columnTypes, getKanbanColumns } from "./utils"; import { IKanbanColumn, columnTypes, getKanbanColumns } from "./utils";
import { useMobxStore } from "lib/mobx/store-provider";
interface ISubGroupSwimlaneHeader { interface ISubGroupSwimlaneHeader {
issueIds: any; issueIds: any;
@ -28,29 +29,27 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
list, list,
kanBanToggle, kanBanToggle,
handleKanBanToggle, handleKanBanToggle,
}) => { }) => (
return ( <div className="relative flex h-max min-h-full w-full items-center">
<div className="relative flex h-max min-h-full w-full items-center"> {list &&
{list && list.length > 0 &&
list.length > 0 && list.map((_list: IKanbanColumn) => (
list.map((_list: IKanbanColumn) => ( <div key={`${sub_group_by}_${_list.id}`} className="flex w-[340px] flex-shrink-0 flex-col">
<div key={`${sub_group_by}_${_list.id}`} className="flex w-[340px] flex-shrink-0 flex-col"> <HeaderGroupByCard
<HeaderGroupByCard sub_group_by={sub_group_by}
sub_group_by={sub_group_by} group_by={group_by}
group_by={group_by} column_id={_list.id}
column_id={_list.id} icon={_list.Icon}
icon={_list.Icon} title={_list.name}
title={_list.name} count={issueIds?.[_list.id]?.length || 0}
count={issueIds?.[_list.id]?.length || 0} kanBanToggle={kanBanToggle}
kanBanToggle={kanBanToggle} handleKanBanToggle={handleKanBanToggle}
handleKanBanToggle={handleKanBanToggle} issuePayload={_list.payload}
issuePayload={_list.payload} />
/> </div>
</div> ))}
))} </div>
</div> );
);
};
interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader { interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
issues: IIssueResponse; issues: IIssueResponse;

93
web/components/issues/issue-layouts/kanban/utils.tsx
View File

@ -51,62 +51,54 @@ const getProjectColumns = (project: IProjectStore): IKanbanColumn[] | undefined
if (!projects) return; if (!projects) return;
return projects.map((project) => { return projects.map((project) => ({
return { id: project.id,
id: project.id, name: project.name,
name: project.name, Icon: <div className="w-6 h-6">{renderEmoji(project.emoji || "")}</div>,
Icon: <div className="w-6 h-6">{renderEmoji(project.emoji || "")}</div>, payload: { project: project.id },
payload: { project: project.id }, }));
};
});
}; };
const getStateColumns = (projectState: IProjectStateStore): IKanbanColumn[] | undefined => { const getStateColumns = (projectState: IProjectStateStore): IKanbanColumn[] | undefined => {
const { projectStates } = projectState; const { projectStates } = projectState;
if (!projectStates) return; if (!projectStates) return;
return projectStates.map((state) => { return projectStates.map((state) => ({
return { id: state.id,
id: state.id, name: state.name,
name: state.name, Icon: (
Icon: ( <div className="w-3.5 h-3.5 rounded-full">
<div className="w-3.5 h-3.5 rounded-full"> <StateGroupIcon stateGroup={state.group} color={state.color} width="14" height="14" />
<StateGroupIcon stateGroup={state.group} color={state.color} width="14" height="14" /> </div>
</div> ),
), payload: { state: state.id },
payload: { state: state.id }, }));
};
});
}; };
const getStateGroupColumns = () => { const getStateGroupColumns = () => {
const stateGroups = ISSUE_STATE_GROUPS; const stateGroups = ISSUE_STATE_GROUPS;
return stateGroups.map((stateGroup) => { return stateGroups.map((stateGroup) => ({
return { id: stateGroup.key,
id: stateGroup.key, name: stateGroup.title,
name: stateGroup.title, Icon: (
Icon: ( <div className="w-3.5 h-3.5 rounded-full">
<div className="w-3.5 h-3.5 rounded-full"> <StateGroupIcon stateGroup={stateGroup.key} width="14" height="14" />
<StateGroupIcon stateGroup={stateGroup.key} width="14" height="14" /> </div>
</div> ),
), payload: {},
payload: {}, }));
};
});
}; };
const getPriorityColumns = () => { const getPriorityColumns = () => {
const priorities = ISSUE_PRIORITIES; const priorities = ISSUE_PRIORITIES;
return priorities.map((priority) => { return priorities.map((priority) => ({
return { id: priority.key,
id: priority.key, name: priority.title,
name: priority.title, Icon: <PriorityIcon priority={priority?.key} />,
Icon: <PriorityIcon priority={priority?.key} />, payload: { priority: priority.key },
payload: { priority: priority.key }, }));
};
});
}; };
const getLabelsColumns = (projectLabel: IProjectLabelStore) => { const getLabelsColumns = (projectLabel: IProjectLabelStore) => {
@ -116,19 +108,14 @@ const getLabelsColumns = (projectLabel: IProjectLabelStore) => {
const labels = [...projectLabels, { id: "None", name: "None", color: "#666" }]; const labels = [...projectLabels, { id: "None", name: "None", color: "#666" }];
return labels.map((label) => { return labels.map((label) => ({
return { id: label.id,
id: label.id, name: label.name,
name: label.name, Icon: (
Icon: ( <div className="w-[12px] h-[12px] rounded-full" style={{ backgroundColor: label.color ? label.color : "#666" }} />
<div ),
className="w-[12px] h-[12px] rounded-full" payload: { labels: [label.id] },
style={{ backgroundColor: label.color ? label.color : "#666" }} }));
/>
),
payload: { labels: [label.id] },
};
});
}; };
const getAssigneeColumns = (projectMember: IProjectMemberStore) => { const getAssigneeColumns = (projectMember: IProjectMemberStore) => {