thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

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

Browse Source 
* chore: updated kanban logic in project cycles and modules

* chore: updated list and kanban in module
This commit is contained in:
guru_sainath 2023-10-10 13:03:28 +05:30 committed by GitHub
parent f444309cae
commit 57e2ed24ad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 203 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/components/issues/issue-layouts/kanban/module-root.tsx
View File

@ -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;
@ -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 (
@ -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
@ -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>

6
web/components/issues/issue-layouts/list/module-root.tsx
View File

@ -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 (

37
web/components/issues/issue-layouts/module-all-layouts.tsx
View File

@ -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);
}
});
@ -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" ? (

6
web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
View File

@ -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>

9
web/store/cycle_issue_filters.ts
View File

@ -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 = {
@ -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);
@ -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);

105
web/store/cycle_issue_kanban_view.ts
View File

@ -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;
@ -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;
}
@ -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 = {
@ -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
);
}
};
@ -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;
@ -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

117
web/store/module_issue_kanban_view.ts
View File

@ -82,7 +82,7 @@ class ModuleIssueKanBanViewStore implements IModuleIssueKanBanViewStore {
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.moduleIssue?.getIssues;
const currentIssues: any = this.rootStore.moduleIssue.getIssues;
const sortOrderDefaultValue = 65535;
@ -166,20 +166,30 @@ class ModuleIssueKanBanViewStore implements IModuleIssueKanBanViewStore {
};
}
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;
}
@ -216,30 +226,59 @@ class ModuleIssueKanBanViewStore implements IModuleIssueKanBanViewStore {
};
}
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 = {
...this.rootStore?.cycleIssue.issues,
...this.rootStore?.moduleIssue.issues,
[projectId]: {
...this.rootStore?.cycleIssue.issues?.[projectId],
...this.rootStore?.moduleIssue.issues?.[projectId],
[issueType]: {
...this.rootStore?.cycleIssue.issues?.[projectId]?.[issueType],
...this.rootStore?.moduleIssue.issues?.[projectId]?.[issueType],
[issueType]: currentIssues,
},
},
@ -249,15 +288,13 @@ class ModuleIssueKanBanViewStore implements IModuleIssueKanBanViewStore {
this.rootStore.moduleIssue.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
);
}
};
@ -266,7 +303,7 @@ class ModuleIssueKanBanViewStore implements IModuleIssueKanBanViewStore {
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.moduleIssue?.getIssues;
const currentIssues: any = this.rootStore.moduleIssue.getIssues;
const sortOrderDefaultValue = 65535;
@ -348,23 +385,33 @@ class ModuleIssueKanBanViewStore implements IModuleIssueKanBanViewStore {
};
}
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
@ -376,11 +423,11 @@ class ModuleIssueKanBanViewStore implements IModuleIssueKanBanViewStore {
}
const reorderedIssues = {
...this.rootStore?.cycleIssue.issues,
...this.rootStore?.moduleIssue.issues,
[projectId]: {
...this.rootStore?.cycleIssue.issues?.[projectId],
...this.rootStore?.moduleIssue.issues?.[projectId],
[issueType]: {
...this.rootStore?.cycleIssue.issues?.[projectId]?.[issueType],
...this.rootStore?.moduleIssue.issues?.[projectId]?.[issueType],
[issueType]: currentIssues,
},
},