Skip to content

chore: Implemented list and kanban views in project modules #2402

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 3 commits into from
Oct 10, 2023
Merged

chore: Implemented list and kanban views in project modules #2402

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ab02e97
chore: updated kanban logic in project cycles and modules
gurusainath Oct 9, 2023
e2b68c9
Merge branch 'fix/issues-layout-mobx' of gurusainath:makeplane/plane …
gurusainath Oct 9, 2023
1ef1c9a
chore: updated list and kanban in module
gurusainath Oct 10, 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
20 changes: 14 additions & 6 deletions web/components/issues/issue-layouts/kanban/module-root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ export interface IModuleKanBanLayout {}

export const ModuleKanBanLayout: React.FC = observer(() => {
const {
issue: issueStore,
moduleIssue: moduleIssueStore,
issueFilter: issueFilterStore,
issueKanBanView: issueKanBanViewStore,
moduleIssueKanBanView: moduleIssueKanBanViewStore,
}: RootStore = useMobxStore();

const issues = issueStore?.getIssues;
const issues = moduleIssueStore?.getIssues;

const sub_group_by: string | null = issueFilterStore?.userDisplayFilters?.sub_group_by || null;

Expand All @@ -43,12 +43,16 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
return;

currentKanBanView === "default"
? issueKanBanViewStore?.handleDragDrop(result.source, result.destination)
: issueKanBanViewStore?.handleSwimlaneDragDrop(result.source, result.destination);
? moduleIssueKanBanViewStore?.handleDragDrop(result.source, result.destination)
: moduleIssueKanBanViewStore?.handleSwimlaneDragDrop(result.source, result.destination);
};

const updateIssue = (sub_group_by: string | null, group_by: string | null, issue: any) => {
issueStore.updateIssueStructure(group_by, sub_group_by, issue);
moduleIssueStore.updateIssueStructure(group_by, sub_group_by, issue);
};

const handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
moduleIssueKanBanViewStore.handleKanBanToggle(toggle, value);
};

return (
Expand All @@ -61,6 +65,8 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
group_by={group_by}
handleIssues={updateIssue}
display_properties={display_properties}
kanBanToggle={moduleIssueKanBanViewStore?.kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
/>
) : (
<KanBanSwimLanes
Expand All @@ -69,6 +75,8 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
group_by={group_by}
handleIssues={updateIssue}
display_properties={display_properties}
kanBanToggle={moduleIssueKanBanViewStore?.kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
/>
)}
</DragDropContext>
Expand Down
6 changes: 3 additions & 3 deletions web/components/issues/issue-layouts/list/module-root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,16 @@ import { RootStore } from "store/root";
export interface IModuleListLayout {}

export const ModuleListLayout: React.FC = observer(() => {
const { issue: issueStore, issueFilter: issueFilterStore }: RootStore = useMobxStore();
const { issueFilter: issueFilterStore, moduleIssue: moduleIssueStore }: RootStore = useMobxStore();

const issues = issueStore?.getIssues;
const issues = moduleIssueStore?.getIssues;

const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;

const display_properties = issueFilterStore?.userDisplayProperties || null;

const updateIssue = (group_by: string | null, issue: any) => {
issueStore.updateIssueStructure(group_by, null, issue);
moduleIssueStore.updateIssueStructure(group_by, null, issue);
};

return (
Expand Down
37 changes: 24 additions & 13 deletions web/components/issues/issue-layouts/module-all-layouts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,34 +7,43 @@ import useSWR from "swr";
import { useMobxStore } from "lib/mobx/store-provider";
// components
import {
KanBanLayout,
ModuleAppliedFiltersRoot,
ModuleCalendarLayout,
ModuleGanttLayout,
ModuleSpreadsheetLayout,
} from "components/issues";
import { ModuleListLayout } from "components/issues/issue-layouts/list/module-root";
import { ModuleKanBanLayout } from "components/issues/issue-layouts/kanban/module-root";

export const ModuleAllLayouts: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId, moduleId } = router.query;
const { workspaceSlug, projectId, moduleId } = router.query as {
workspaceSlug: string;
projectId: string;
moduleId: string;
};

const {
module: moduleStore,
moduleFilter: moduleFilterStore,
project: projectStore,
issueFilter: issueFilterStore,
moduleIssue: moduleIssueStore,
moduleFilter: moduleIssueFilterStore,
} = useMobxStore();

useSWR(workspaceSlug && projectId && moduleId ? `MODULE_ISSUES_${moduleId.toString()}` : null, async () => {
useSWR(workspaceSlug && projectId && moduleId ? `CYCLE_ISSUES` : null, async () => {
if (workspaceSlug && projectId && moduleId) {
await issueFilterStore.fetchUserProjectFilters(workspaceSlug.toString(), projectId.toString());
// fetching the project display filters and display properties
await issueFilterStore.fetchUserProjectFilters(workspaceSlug, projectId);
// fetching the cycle filters
await moduleIssueFilterStore.fetchModuleFilters(workspaceSlug, projectId, moduleId);

await projectStore.fetchProjectStates(workspaceSlug.toString(), projectId.toString());
await projectStore.fetchProjectLabels(workspaceSlug.toString(), projectId.toString());
await projectStore.fetchProjectMembers(workspaceSlug.toString(), projectId.toString());
// fetching the project state, labels and members
await projectStore.fetchProjectStates(workspaceSlug, projectId);
await projectStore.fetchProjectLabels(workspaceSlug, projectId);
await projectStore.fetchProjectMembers(workspaceSlug, projectId);

await moduleStore.fetchModuleIssues(workspaceSlug.toString(), projectId.toString(), moduleId.toString());
await moduleFilterStore.fetchModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString());
// fetching the cycle issues
await moduleIssueStore.fetchIssues(workspaceSlug, projectId, moduleId);
}
});

Expand All @@ -44,8 +53,10 @@ export const ModuleAllLayouts: React.FC = observer(() => {
<div className="relative w-full h-full flex flex-col overflow-auto">
<ModuleAppliedFiltersRoot />
<div className="h-full w-full">
{activeLayout === "kanban" ? (
<KanBanLayout />
{activeLayout === "list" ? (
<ModuleListLayout />
) : activeLayout === "kanban" ? (
<ModuleKanBanLayout />
) : activeLayout === "calendar" ? (
<ModuleCalendarLayout />
) : activeLayout === "gantt_chart" ? (
Expand Down
6 changes: 3 additions & 3 deletions web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,9 +140,9 @@ const SingleModule: React.FC = () => {
<>
<AnalyticsProjectModal isOpen={analyticsModal} onClose={() => setAnalyticsModal(false)} />
<div
className={`relative overflow-y-auto h-full flex flex-col ${
moduleSidebar ? "mr-[24rem]" : ""
} ${analyticsModal ? "mr-[50%]" : ""} duration-300`}
className={`relative overflow-y-auto h-full flex flex-col ${moduleSidebar ? "mr-[24rem]" : ""} ${
analyticsModal ? "mr-[50%]" : ""
} duration-300`}
>
<ModuleAllLayouts />
</div>
Expand Down
9 changes: 1 addition & 8 deletions web/store/cycle_issue_filters.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,6 @@ class CycleIssueFilterStore implements ICycleIssueFilterStore {
get appliedFilters(): TIssueParams[] | null {
const userDisplayFilters = this.rootStore?.issueFilter?.userDisplayFilters;

console.log("userDisplayFilters", userDisplayFilters);
console.log("this.cycleFilters", this.cycleFilters);

if (!this.cycleFilters || !userDisplayFilters) return null;

let filteredRouteParams: any = {
Expand All @@ -89,11 +86,7 @@ class CycleIssueFilterStore implements ICycleIssueFilterStore {
start_target_date: userDisplayFilters?.start_target_date || true,
};

console.log("----");
console.log("filteredRouteParams", filteredRouteParams);
const filteredParams = handleIssueQueryParamsByLayout(userDisplayFilters.layout, "issues");
console.log("filteredParams", filteredParams);
console.log("----");

if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);

Expand Down Expand Up @@ -140,7 +133,7 @@ class CycleIssueFilterStore implements ICycleIssueFilterStore {
},
};

const response = await this.cycleService.updateCycle(workspaceSlug, projectId, cycleId, payload, undefined);
await this.cycleService.updateCycle(workspaceSlug, projectId, cycleId, payload, undefined);
} catch (error) {
this.fetchCycleFilters(workspaceSlug, projectId, cycleId);

Expand Down
105 changes: 76 additions & 29 deletions web/store/cycle_issue_kanban_view.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ class CycleIssueKanBanViewStore implements ICycleIssueKanBanViewStore {
const projectId = this.rootStore?.project?.projectId;
const issueType: IIssueType | null = this.rootStore?.issue?.getIssueType;
const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
const currentIssues: any = this.rootStore.cycleIssue?.getIssues;
const currentIssues: any = this.rootStore.cycleIssue.getIssues;

const sortOrderDefaultValue = 65535;

Expand Down Expand Up @@ -166,20 +166,30 @@ class CycleIssueKanBanViewStore implements ICycleIssueKanBanViewStore {
};
}

let issueStatePriority = {};
if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "state") {
updateIssue = { ...updateIssue, state: destination_group_id };
issueStatePriority = { ...issueStatePriority, state: destination_group_id };
}
if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "priority") {
updateIssue = { ...updateIssue, priority: destination_group_id };
issueStatePriority = { ...issueStatePriority, priority: destination_group_id };
}

const [removed] = _sourceIssues.splice(source.index, 1);
if (_destinationIssues && _destinationIssues.length > 0)
_destinationIssues.splice(destination.index, 0, {
...removed,
sort_order: updateIssue.sort_order,
...issueStatePriority,
});
else _destinationIssues = [..._destinationIssues, { ...removed, sort_order: updateIssue.sort_order }];
else
_destinationIssues = [
..._destinationIssues,
{ ...removed, sort_order: updateIssue.sort_order, ...issueStatePriority },
];
updateIssue = { ...updateIssue, issueId: removed?.id };

// if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "state")
// updateIssue = { ...updateIssue, state: destination_group_id };
// if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "priority")
// updateIssue = { ...updateIssue, priority: destination_group_id };

currentIssues[source_sub_group_id][source_group_id] = _sourceIssues;
currentIssues[destination_sub_group_id][destination_group_id] = _destinationIssues;
}
Expand Down Expand Up @@ -216,22 +226,51 @@ class CycleIssueKanBanViewStore implements ICycleIssueKanBanViewStore {
};
}

let issueStatePriority = {};
if (source_group_id === destination_group_id) {
if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "state") {
updateIssue = { ...updateIssue, state: destination_sub_group_id };
issueStatePriority = { ...issueStatePriority, state: destination_sub_group_id };
}
if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "priority") {
updateIssue = { ...updateIssue, priority: destination_sub_group_id };
issueStatePriority = { ...issueStatePriority, priority: destination_sub_group_id };
}
} else {
if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "state") {
updateIssue = { ...updateIssue, state: destination_sub_group_id, priority: destination_group_id };
issueStatePriority = {
...issueStatePriority,
state: destination_sub_group_id,
priority: destination_group_id,
};
}
if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "priority") {
updateIssue = { ...updateIssue, state: destination_group_id, priority: destination_sub_group_id };
issueStatePriority = {
...issueStatePriority,
state: destination_group_id,
priority: destination_sub_group_id,
};
}
}

const [removed] = _sourceIssues.splice(source.index, 1);
if (_destinationIssues && _destinationIssues.length > 0)
_destinationIssues.splice(destination.index, 0, {
...removed,
sort_order: updateIssue.sort_order,
...issueStatePriority,
});
else _destinationIssues = [..._destinationIssues, { ...removed, sort_order: updateIssue.sort_order }];
else
_destinationIssues = [
..._destinationIssues,
{ ...removed, sort_order: updateIssue.sort_order, ...issueStatePriority },
];

updateIssue = { ...updateIssue, issueId: removed?.id };
currentIssues[source_sub_group_id][source_group_id] = _sourceIssues;
currentIssues[destination_sub_group_id][destination_group_id] = _destinationIssues;

// if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "state")
// updateIssue = { ...updateIssue, state: destination_group_id };
// if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "priority")
// updateIssue = { ...updateIssue, priority: destination_group_id };
}

const reorderedIssues = {
Expand All @@ -249,15 +288,13 @@ class CycleIssueKanBanViewStore implements ICycleIssueKanBanViewStore {
this.rootStore.cycleIssue.issues = { ...reorderedIssues };
});

// console.log("updateIssue", updateIssue);

// this.rootStore.issueDetail?.updateIssue(
// updateIssue.workspaceSlug,
// updateIssue.projectId,
// updateIssue.issueId,
// updateIssue,
// undefined
// );
this.rootStore.issueDetail?.updateIssue(
updateIssue.workspaceSlug,
updateIssue.projectId,
updateIssue.issueId,
updateIssue,
undefined
);
}
};

Expand All @@ -266,7 +303,7 @@ class CycleIssueKanBanViewStore implements ICycleIssueKanBanViewStore {
const projectId = this.rootStore?.project?.projectId;
const issueType: IIssueType | null = this.rootStore?.issue?.getIssueType;
const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
const currentIssues: any = this.rootStore.cycleIssue?.getIssues;
const currentIssues: any = this.rootStore.cycleIssue.getIssues;

const sortOrderDefaultValue = 65535;

Expand Down Expand Up @@ -348,23 +385,33 @@ class CycleIssueKanBanViewStore implements ICycleIssueKanBanViewStore {
};
}

let issueStatePriority = {};
if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "state") {
updateIssue = { ...updateIssue, state: destination_group_id };
issueStatePriority = { ...issueStatePriority, state: destination_group_id };
}
if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "priority") {
updateIssue = { ...updateIssue, priority: destination_group_id };
issueStatePriority = { ...issueStatePriority, priority: destination_group_id };
}

const [removed] = _sourceIssues.splice(source.index, 1);
if (_destinationIssues && _destinationIssues.length > 0)
_destinationIssues.splice(destination.index, 0, {
...removed,
sort_order: updateIssue.sort_order,
...issueStatePriority,
});
else _destinationIssues = [..._destinationIssues, { ...removed, sort_order: updateIssue.sort_order }];
else
_destinationIssues = [
..._destinationIssues,
{ ...removed, sort_order: updateIssue.sort_order, ...issueStatePriority },
];
updateIssue = { ...updateIssue, issueId: removed?.id };

currentIssues[source_group_id] = _sourceIssues;
currentIssues[destination_group_id] = _destinationIssues;
}

if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "state")
updateIssue = { ...updateIssue, state: destination_group_id };
if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "priority")
updateIssue = { ...updateIssue, priority: destination_group_id };
}

// user can drag the issues only vertically
Expand Down
Loading