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

fix: Kanban related issues (#3436)

Browse Source 
* fix for drag and drop issues

* add horizontal scroll for kanban

* fix all issues quick action overlap

---------

Co-authored-by: Rahul R <rahul.ramesha@plane.so>
This commit is contained in:
rahulramesha 2024-01-23 16:09:37 +05:30 committed by GitHub
parent c6b756d918
commit e36b7a5ab9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 80 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -236,6 +236,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
</div>
)}
<div className="horizontal-scroll-enable relative h-full w-full overflow-auto bg-custom-background-90">
<div className="relative h-full w-max min-w-full bg-custom-background-90 px-2">
<DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
{/* drag and delete component */}
@ -282,6 +283,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
/>
</DragDropContext>
</div>
</div>
</>
);
});

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

@ -4,7 +4,7 @@ import { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types";
import { EIssueActions } from "../types";
// components
import { KanbanIssueBlock } from "components/issues";
import { Draggable } from "@hello-pangea/dnd";
import { Draggable, DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
interface IssueBlocksListProps {
sub_group_id: string;
@ -43,8 +43,8 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
if (sub_group_id) draggableId = `${draggableId}__${sub_group_id}`;
return (
<Draggable key={draggableId} draggableId={draggableId} index={index}>
{(provided, snapshot) => (
<Draggable key={draggableId} draggableId={draggableId} index={index} isDragDisabled={isDragDisabled}>
{(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
<KanbanIssueBlock
key={`kanban-issue-block-${issueId}`}
issueId={issueId}

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

@ -199,7 +199,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
group_by={group_by}
sub_group_by={sub_group_by}
sub_group_id={sub_group_id}
isDragDisabled={!issueKanBanView?.canUserDragDrop}
isDragDisabled={!issueKanBanView?.getCanUserDragDrop(group_by, sub_group_by)}
handleIssues={handleIssues}
quickActions={quickActions}
kanbanFilters={kanbanFilters}

21
web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
View File

@ -100,6 +100,19 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
[updateFilters, workspaceSlug]
);
const renderQuickActions = useCallback(
(issue: TIssue, customActionButton?: React.ReactElement, portalElement?: HTMLDivElement | null) => (
<AllIssueQuickActions
customActionButton={customActionButton}
issue={issue}
handleUpdate={async () => handleIssues({ ...issue }, EIssueActions.UPDATE)}
handleDelete={async () => handleIssues(issue, EIssueActions.DELETE)}
portalElement={portalElement}
/>
),
[handleIssues]
);
return (
<div className="relative flex h-full w-full flex-col overflow-hidden">
{!globalViewId || globalViewId !== dataViewId || loader === "init-loader" || !issueIds ? (
@ -119,13 +132,7 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
displayFilters={issueFilters?.displayFilters ?? {}}
handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
issueIds={issueIds}
quickActions={(issue) => (
<AllIssueQuickActions
issue={issue}
handleUpdate={async () => handleIssues({ ...issue }, EIssueActions.UPDATE)}
handleDelete={async () => handleIssues(issue, EIssueActions.DELETE)}
/>
)}
quickActions={renderQuickActions}
handleIssues={handleIssues}
canEditProperties={canEditProperties}
viewId={globalViewId}

2
web/helpers/state.helper.ts
View File

@ -8,7 +8,7 @@ export const orderStateGroups = (unorderedStateGroups: IStateResponse | undefine
};
export const sortStates = (states: IState[]) => {
if (!states || states.length === 0) return null;
if (!states || states.length === 0) return;
return states.sort((stateA, stateB) => {
if (stateA.group === stateB.group) {

2
web/store/issue/helpers/issue-helper.store.ts
View File

@ -167,7 +167,7 @@ export class IssueHelperStore implements TIssueHelperStore {
array = reverse(sortBy(array, "created_at"));
switch (key) {
case "sort_order":
return reverse(sortBy(array, "sort_order"));
return sortBy(array, "sort_order");
case "state__name":
return reverse(sortBy(array, "state"));

30
web/store/issue/issue_kanban_view.store.ts
View File

@ -1,4 +1,5 @@
import { action, computed, makeObservable, observable, runInAction } from "mobx";
import { action, computed, makeObservable, observable } from "mobx";
import { computedFn } from "mobx-utils";
import { IssueRootStore } from "./root.store";
// types
@ -8,7 +9,7 @@ export interface IIssueKanBanViewStore {
subgroupByIssuesVisibility: string[];
};
// computed
canUserDragDrop: boolean;
getCanUserDragDrop: (order_by: string | null, group_by: string | null, sub_group_by?: string | null) => boolean;
canUserDragDropVertically: boolean;
canUserDragDropHorizontally: boolean;
// actions
@ -27,7 +28,6 @@ export class IssueKanBanViewStore implements IIssueKanBanViewStore {
makeObservable(this, {
kanBanToggle: observable,
// computed
canUserDragDrop: computed,
canUserDragDropVertically: computed,
canUserDragDropHorizontally: computed,
@ -38,25 +38,13 @@ export class IssueKanBanViewStore implements IIssueKanBanViewStore {
this.rootStore = _rootStore;
}
get canUserDragDrop() {
return true;
if (this.rootStore.issueDetail.peekIssue?.issueId) return false;
// FIXME: uncomment and fix
// if (
// this.rootStore?.issueFilter?.userDisplayFilters?.order_by &&
// this.rootStore?.issueFilter?.userDisplayFilters?.order_by === "sort_order" &&
// this.rootStore?.issueFilter?.userDisplayFilters?.group_by &&
// ["state", "priority"].includes(this.rootStore?.issueFilter?.userDisplayFilters?.group_by)
// ) {
// if (!this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by) return true;
// if (
// this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by &&
// ["state", "priority"].includes(this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by)
// )
// return true;
// }
// return false;
getCanUserDragDrop = computedFn((group_by: string | null, sub_group_by?: string | null) => {
if (group_by && ["state", "priority"].includes(group_by)) {
if (!sub_group_by) return true;
if (sub_group_by && ["state", "priority"].includes(sub_group_by)) return true;
}
return false;
});
get canUserDragDropVertically() {
return false;

6
web/store/state.store.ts
View File

@ -8,6 +8,8 @@ import { RootStore } from "./root.store";
import { IState } from "@plane/types";
// services
import { ProjectStateService } from "services/project";
// helpers
import { sortStates } from "helpers/state.helper";
export interface IStateStore {
//Loaders
@ -78,7 +80,7 @@ export class StateStore implements IStateStore {
const projectId = this.router.projectId;
const worksapceSlug = this.router.workspaceSlug || "";
if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[worksapceSlug])) return;
return Object.values(this.stateMap).filter((state) => state.project_id === projectId);
return sortStates(Object.values(this.stateMap).filter((state) => state.project_id === projectId));
}
/**
@ -106,7 +108,7 @@ export class StateStore implements IStateStore {
getProjectStates = computedFn((projectId: string) => {
const worksapceSlug = this.router.workspaceSlug || "";
if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[worksapceSlug])) return;
return Object.values(this.stateMap).filter((state) => state.project_id === projectId);
return sortStates(Object.values(this.stateMap).filter((state) => state.project_id === projectId));
});
/**