Skip to content

chore: issues grouped kanban and swimlanes UI and functionality #2294

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sriramveeraghanta merged 9 commits into from
Sep 29, 2023
Merged

chore: issues grouped kanban and swimlanes UI and functionality #2294

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6da484d
chore: updated the all the group_by and sub_group_by UI and functiona…
gurusainath Sep 27, 2023
247ebcf
chore: kanban sorting in mobx and ui updates
gurusainath Sep 27, 2023
3523981
Merge branch 'fix/issues-layout-mobx' of gurusainath:makeplane/plane …
gurusainath Sep 27, 2023
ecb9da1
chore: ui changes and drag and drop functionality changes in kanban
gurusainath Sep 28, 2023
90f3019
Merge branch 'fix/issues-layout-mobx' of gurusainath:makeplane/plane …
gurusainath Sep 28, 2023
9b6c3d0
conflict: merge conflict resolved and updated the count of an issues …
gurusainath Sep 28, 2023
7c861af
chore: issues count render in kanban default and swimlanes
gurusainath Sep 28, 2023
f0c8f8c
chore: Added icons to the group_by and sub_group_by in kanban and swi…
gurusainath Sep 28, 2023
d1082a9
Merge branch 'fix/issues-layout-mobx' of gurusainath:makeplane/plane …
gurusainath Sep 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 2 additions & 7 deletions web/components/gantt-chart/contexts/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,7 @@ import { allViewsWithData, currentViewDataWithView } from "../data";

export const ChartContext = createContext<ChartContextReducer | undefined>(undefined);

const chartReducer = (
state: ChartContextData,
action: ChartContextActionPayload
): ChartContextData => {
const chartReducer = (state: ChartContextData, action: ChartContextActionPayload): ChartContextData => {
switch (action.type) {
case "CURRENT_VIEW":
return { ...state, currentView: action.payload };
Expand Down Expand Up @@ -50,9 +47,7 @@ export const ChartContextProvider: React.FC<{ children: React.ReactNode }> = ({
};

return (
<ChartContext.Provider
value={{ ...state, scrollLeft, updateScrollLeft, dispatch: handleDispatch }}
>
<ChartContext.Provider value={{ ...state, scrollLeft, updateScrollLeft, dispatch: handleDispatch }}>
{children}
</ChartContext.Provider>
);
Expand Down
80 changes: 43 additions & 37 deletions web/components/issues/issue-layouts/kanban/block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,56 @@
// react beautiful dnd
import { Draggable } from "@hello-pangea/dnd";
// components
import { KanBanProperties } from "./properties";

interface IssueBlockProps {
sub_group_id: string;
columnId: string;
issues: any;
isDragDisabled: boolean;
}

export const IssueBlock = ({ sub_group_id, columnId, issues }: IssueBlockProps) => {
console.log();

return (
<>
{issues && issues.length > 0 ? (
<>
{issues.map((issue: any, index: any) => (
<Draggable
draggableId={`${sub_group_id}-${columnId}-${issue.id}`}
index={index}
key={`issue-blocks-${sub_group_id}-${columnId}-${issue.id}`}
>
{(provided: any, snapshot: any) => (
export const IssueBlock = ({ sub_group_id, columnId, issues, isDragDisabled }: IssueBlockProps) => (
<>
{issues && issues.length > 0 ? (
<>
{issues.map((issue: any, index: any) => (
<Draggable
key={`issue-blocks-${sub_group_id}-${columnId}-${issue.id}`}
draggableId={`${issue.id}`}
index={index}
isDragDisabled={isDragDisabled}
>
{(provided: any, snapshot: any) => (
<div
key={issue.id}
className="p-1.5 hover:cursor-default"
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
>
<div
key={issue.id}
className="p-1.5 hover:cursor-default"
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
className={`min-h-[106px] text-sm rounded p-2 px-3 shadow-custom-shadow-2xs space-y-[8px] border transition-all bg-custom-background-100 hover:cursor-grab ${
snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`
}`}
>
<div
className={`min-h-[106px] text-sm rounded p-2 px-3 shadow-custom-shadow-2xs space-y-[4px] border transition-all bg-custom-background-100 hover:cursor-grab ${
snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`
}`}
>
<div className="text-xs line-clamp-1 text-custom-text-300">ONE-{issue.sequence_id}</div>
<div className="line-clamp-2 h-[40px] text-sm font-medium text-custom-text-100">{issue.name}</div>
<div className="h-[22px]">Footer</div>
<div className="text-xs line-clamp-1 text-custom-text-300">ONE-{issue.sequence_id}</div>
<div className="line-clamp-2 h-[40px] text-sm font-medium text-custom-text-100">{issue.name}</div>
<div className="min-h-[22px]">
<KanBanProperties />
</div>
</div>
)}
</Draggable>
))}
</>
) : (
<div>No issues are available.</div>
)}
</>
);
};
</div>
)}
</Draggable>
))}
</>
) : (
!isDragDisabled && (
<div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
{/* <div className="text-custom-text-300 text-sm">Drop here</div> */}
</div>
)
)}
</>
);
222 changes: 123 additions & 99 deletions web/components/issues/issue-layouts/kanban/default.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,42 +5,51 @@ import { Droppable } from "@hello-pangea/dnd";
import { KanBanGroupByHeaderRoot } from "./headers/group-by-root";
import { IssueBlock } from "./block";
// constants
import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES, getValueFromObject } from "constants/issue";
// mobx
import { observer } from "mobx-react-lite";
// mobx
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";

export interface IKanBan {
issues?: any;
export interface IGroupByKanBan {
issues: any;
sub_group_by: string | null;
group_by: string | null;
sub_group_id: string;
list: any;
listKey: string;
handleIssues?: () => void;
handleDragDrop?: (result: any) => void | undefined;
sub_group_id?: string;
isDragDisabled: boolean;
}

export const KanBan: React.FC<IKanBan> = observer(({ issues, sub_group_id = "null" }) => {
const { project: projectStore, issueFilter: issueFilterStore }: RootStore = useMobxStore();
const GroupByKanBan: React.FC<IGroupByKanBan> = observer(
({ issues, sub_group_by, group_by, sub_group_id = "null", list, listKey, isDragDisabled }) => {
const { issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();

const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
const sub_group_by: string | null = issueFilterStore?.userDisplayFilters?.sub_group_by || null;
const verticalAlignPosition = (_list: any) =>
issueKanBanViewStore.kanBanToggle?.groupByHeaderMinMax.includes(getValueFromObject(_list, listKey) as string);

return (
<div className="relative w-full h-full">
{group_by && group_by === "state" && (
<div className="relative w-full h-full flex">
{projectStore?.projectStates &&
projectStore?.projectStates.length > 0 &&
projectStore?.projectStates.map((state) => (
<div className="flex-shrink-0 flex flex-col w-[340px]">
{sub_group_by === null && (
<div className="flex-shrink-0 w-full bg-custom-background-90 py-1 sticky top-0 z-[2]">
<KanBanGroupByHeaderRoot column_id={state?.id} />
</div>
)}
return (
<div className="relative w-full h-full flex">
{list &&
list.length > 0 &&
list.map((_list: any) => (
<div className={`flex-shrink-0 flex flex-col ${!verticalAlignPosition(_list) ? `w-[340px]` : ``}`}>
{sub_group_by === null && (
<div className="flex-shrink-0 w-full bg-custom-background-90 py-1 sticky top-0 z-[2]">
<KanBanGroupByHeaderRoot
column_id={getValueFromObject(_list, listKey) as string}
sub_group_by={sub_group_by}
group_by={group_by}
issues_count={issues?.[getValueFromObject(_list, listKey) as string].length || 0}
/>
</div>
)}

<div className="w-full h-full">
<Droppable droppableId={`${sub_group_id}-${state?.id}`}>
{!verticalAlignPosition(_list) && (
<div className="w-full min-h-[150px] h-full">
<Droppable droppableId={`${getValueFromObject(_list, listKey) as string}__${sub_group_id}`}>
{(provided: any, snapshot: any) => (
<div
className={`w-full h-full relative transition-all ${
Expand All @@ -49,102 +58,117 @@ export const KanBan: React.FC<IKanBan> = observer(({ issues, sub_group_id = "nul
{...provided.droppableProps}
ref={provided.innerRef}
>
{issues && (
<IssueBlock sub_group_id={sub_group_id} columnId={state?.id} issues={issues[state?.id]} />
{issues ? (
<IssueBlock
sub_group_id={sub_group_id}
columnId={getValueFromObject(_list, listKey) as string}
issues={issues[getValueFromObject(_list, listKey) as string]}
isDragDisabled={isDragDisabled}
/>
) : (
isDragDisabled && (
<div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
{/* <div className="text-custom-text-300 text-sm">Drop here</div> */}
</div>
)
)}
{provided.placeholder}
</div>
)}
</Droppable>
</div>
</div>
))}
</div>
)}
</div>
))}
</div>
);
}
);

export interface IKanBan {
issues: any;
sub_group_by: string | null;
group_by: string | null;
sub_group_id?: string;
handleIssues?: () => void;
handleDragDrop?: (result: any) => void | undefined;
}

export const KanBan: React.FC<IKanBan> = observer(({ issues, sub_group_by, group_by, sub_group_id = "null" }) => {
const { project: projectStore, issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();

return (
<div className="relative w-full h-full">
{group_by && group_by === "state" && (
<GroupByKanBan
issues={issues}
group_by={group_by}
sub_group_by={sub_group_by}
sub_group_id={sub_group_id}
list={projectStore?.projectStates}
listKey={`id`}
isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
/>
)}

{group_by && group_by === "state_detail.group" && (
<div className="relative w-full h-full flex">
{ISSUE_STATE_GROUPS &&
ISSUE_STATE_GROUPS.length > 0 &&
ISSUE_STATE_GROUPS.map((stateGroup) => (
<div className="flex-shrink-0 flex flex-col w-[300px] h-full">
{sub_group_by === null && (
<div className="flex-shrink-0 w-full">
<KanBanGroupByHeaderRoot column_id={stateGroup?.key} />
</div>
)}
<div className="w-full h-full">content</div>
</div>
))}
</div>
<GroupByKanBan
issues={issues}
group_by={group_by}
sub_group_by={sub_group_by}
sub_group_id={sub_group_id}
list={ISSUE_STATE_GROUPS}
listKey={`key`}
isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
/>
)}

{group_by && group_by === "priority" && (
<div className="relative w-full h-full flex">
{ISSUE_PRIORITIES &&
ISSUE_PRIORITIES.length > 0 &&
ISSUE_PRIORITIES.map((priority) => (
<div className="flex-shrink-0 flex flex-col w-[300px] h-full">
{sub_group_by === null && (
<div className="flex-shrink-0 w-full">
<KanBanGroupByHeaderRoot column_id={priority?.key} />
</div>
)}
<div className="w-full h-full">content</div>
</div>
))}
</div>
<GroupByKanBan
issues={issues}
group_by={group_by}
sub_group_by={sub_group_by}
sub_group_id={sub_group_id}
list={ISSUE_PRIORITIES}
listKey={`key`}
isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
/>
)}

{group_by && group_by === "labels" && (
<div className="relative w-full h-full flex">
{projectStore?.projectLabels &&
projectStore?.projectLabels.length > 0 &&
projectStore?.projectLabels.map((label) => (
<div className="flex-shrink-0 flex flex-col w-[300px] h-full">
{sub_group_by === null && (
<div className="flex-shrink-0 w-full">
<KanBanGroupByHeaderRoot column_id={label?.id} />
</div>
)}
<div className="w-full h-full">content</div>
</div>
))}
</div>
<GroupByKanBan
issues={issues}
group_by={group_by}
sub_group_by={sub_group_by}
sub_group_id={sub_group_id}
list={projectStore?.projectLabels}
listKey={`id`}
isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
/>
)}

{group_by && group_by === "assignees" && (
<div className="relative w-full h-full flex">
{projectStore?.projectMembers &&
projectStore?.projectMembers.length > 0 &&
projectStore?.projectMembers.map((member) => (
<div className="flex-shrink-0 flex flex-col w-[300px] h-full">
{sub_group_by === null && (
<div className="flex-shrink-0 w-full">
<KanBanGroupByHeaderRoot column_id={member?.id} />
</div>
)}
<div className="w-full h-full">content</div>
</div>
))}
</div>
<GroupByKanBan
issues={issues}
group_by={group_by}
sub_group_by={sub_group_by}
sub_group_id={sub_group_id}
list={projectStore?.projectMembers}
listKey={`member.id`}
isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
/>
)}

{group_by && group_by === "created_by" && (
<div className="relative w-full h-full flex">
{projectStore?.projectMembers &&
projectStore?.projectMembers.length > 0 &&
projectStore?.projectMembers.map((member) => (
<div className="flex-shrink-0 flex flex-col w-[300px] h-full">
{sub_group_by === null && (
<div className="flex-shrink-0 w-full">
<KanBanGroupByHeaderRoot column_id={member?.id} />
</div>
)}
<div className="w-full h-full">content</div>
</div>
))}
</div>
<GroupByKanBan
issues={issues}
group_by={group_by}
sub_group_by={sub_group_by}
sub_group_id={sub_group_id}
list={projectStore?.projectMembers}
listKey={`member.id`}
isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
/>
)}
</div>
);
Expand Down
Loading