Skip to content

Commit

Permalink
chore: Implemented list and kanban views in project modules (#2402)
Browse files Browse the repository at this point in the history 
* chore: updated kanban logic in project cycles and modules

* chore: updated list and kanban in module
  • Loading branch information
@gurusainath
gurusainath authored Oct 10, 2023
1 parent f444309 commit 57e2ed2
Show file tree
Hide file tree
Showing 7 changed files with 203 additions and 97 deletions.
20 changes: 14 additions & 6 deletions web/components/issues/issue-layouts/kanban/module-root.tsx
View file
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
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
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
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
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
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

0 comments on commit 57e2ed2

Please sign in to comment.