binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: archive issue (#2628)

Browse source 
* dev: archived issue store

* dev: archived issue layouts and store binding

* dev: archived issue detail store

* dev: is read only

* fix: archived issue delete

* fix: build error
This commit is contained in:
Dakshesh Jain 2023-11-03 20:20:05 +05:30 • committed by GitHub
parent ff258c60fd
commit ad558833af
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 1274 additions and 328 deletions
Download patch file Download diff file Expand all files Collapse all files

1
web/store/archived-issues/index.ts
View file

@ -1,2 +1,3 @@
export * from "./issue.store";
export * from "./issue_filters.store";
export * from "./issue_detail.store";

100
web/store/archived-issues/issue.store.ts
View file

@ -1,10 +1,10 @@
import { observable, action, computed, makeObservable, runInAction } from "mobx";
import { observable, action, computed, makeObservable, runInAction, autorun } from "mobx";
// store
import { RootStore } from "../root";
// types
import { IIssue } from "types";
// services
import { IssueService } from "services/issue";
import { IssueArchiveService } from "services/issue";
import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
import {
IIssueGroupWithSubGroupsStructure,
@ -24,12 +24,23 @@ export interface IArchivedIssueStore {
ungrouped: IIssueUnGroupedStructure;
};
};
issueDetail: {
[project_id: string]: {
[issue_id: string]: IIssue;
};
};
// services
archivedIssueService: IssueArchiveService;
// computed
getIssueType: IIssueType | null;
getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null;
// action
fetchIssues: (workspaceSlug: string, projectId: string) => Promise<any>;
updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
deleteArchivedIssue: (group: string | null, sub_group: string | null, issue: IIssue) => Promise<any>;
}
export class ArchivedIssueStore implements IArchivedIssueStore {
@ -48,8 +59,10 @@ export class ArchivedIssueStore implements IArchivedIssueStore {
ungrouped: IIssue[];
};
} = {};
issueDetail: IArchivedIssueStore["issueDetail"] = {};
// service
issueService;
archivedIssueService;
rootStore;
constructor(_rootStore: RootStore) {
@ -58,34 +71,36 @@ export class ArchivedIssueStore implements IArchivedIssueStore {
loader: observable.ref,
error: observable.ref,
issues: observable.ref,
// computed
getIssueType: computed,
getIssues: computed,
// actions
fetchIssues: action,
updateIssueStructure: action,
deleteArchivedIssue: action,
});
this.rootStore = _rootStore;
this.issueService = new IssueService();
this.archivedIssueService = new IssueArchiveService();
autorun(() => {
const workspaceSlug = this.rootStore.workspace.workspaceSlug;
const projectId = this.rootStore.project.projectId;
if (
workspaceSlug &&
projectId &&
this.rootStore.archivedIssueFilters.userDisplayFilters &&
this.rootStore.archivedIssueFilters.userFilters
)
this.fetchIssues(workspaceSlug, projectId);
});
}
get getIssueType() {
const groupedLayouts = ["kanban", "list", "calendar"];
const ungroupedLayouts = ["spreadsheet", "gantt_chart"];
const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
const issueSubGroup = this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by || null;
if (!issueLayout) return null;
const _issueState = groupedLayouts.includes(issueLayout)
? issueSubGroup
? "groupWithSubGroups"
: "grouped"
: ungroupedLayouts.includes(issueLayout)
? "ungrouped"
: null;
return _issueState || null;
const issueSubGroup = this.rootStore.archivedIssueFilters.userDisplayFilters?.sub_group_by || null;
return issueSubGroup ? "groupWithSubGroups" : "grouped";
}
get getIssues() {
@ -122,10 +137,6 @@ export class ArchivedIssueStore implements IArchivedIssueStore {
},
};
}
if (issueType === "ungrouped") {
issues = issues as IIssueUnGroupedStructure;
issues = issues.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i));
}
const orderBy = this.rootStore?.issueFilter?.userDisplayFilters?.order_by || "";
if (orderBy === "-created_at") {
@ -154,8 +165,8 @@ export class ArchivedIssueStore implements IArchivedIssueStore {
this.rootStore.workspace.setWorkspaceSlug(workspaceSlug);
this.rootStore.project.setProjectId(projectId);
const params = this.rootStore?.issueFilter?.appliedFilters;
const issueResponse = await this.issueService.getIssuesWithParams(workspaceSlug, projectId, params);
const params = this.rootStore.archivedIssueFilters.appliedFilters;
const issueResponse = await this.archivedIssueService.getArchivedIssues(workspaceSlug, projectId, params);
const issueType = this.getIssueType;
if (issueType != null) {
@ -178,7 +189,42 @@ export class ArchivedIssueStore implements IArchivedIssueStore {
console.error("Error: Fetching error in issues", error);
this.loader = false;
this.error = error;
return error;
throw error;
}
};
/**
* @description Function to delete issue from the store. NOTE: This function is not deleting issue from the backend.
*/
deleteArchivedIssue = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
const projectId: string | null = issue?.project;
const issueType = this.getIssueType;
if (!projectId || !issueType) return null;
let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
this.getIssues;
if (!issues) return null;
if (issueType === "grouped" && group_id) {
issues = issues as IIssueGroupedStructure;
issues = {
...issues,
[group_id]: issues?.[group_id]?.filter((i) => i?.id !== issue?.id),
};
}
if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
issues = issues as IIssueGroupWithSubGroupsStructure;
issues = {
...issues,
[sub_group_id]: {
...issues?.[sub_group_id],
[group_id]: issues?.[sub_group_id]?.[group_id]?.filter((i) => i?.id !== issue?.id),
},
};
}
runInAction(() => {
this.issues = { ...this.issues, [projectId]: { ...this.issues[projectId], [issueType]: issues } };
});
};
}

198
web/store/archived-issues/issue_detail.store.ts Normal file
View file

@ -0,0 +1,198 @@
import { observable, action, makeObservable, runInAction, computed } from "mobx";
// store
import { RootStore } from "../root";
// types
import { IIssue } from "types";
// services
import { IssueArchiveService } from "services/issue";
export interface IArchivedIssueDetailStore {
loader: boolean;
error: any | null;
// issues
issueDetail: {
[issue_id: string]: IIssue;
};
peekId: string | null;
// services
archivedIssueService: IssueArchiveService;
// computed
getIssue: IIssue | null;
// action
deleteArchivedIssue: (workspaceSlug: string, projectId: string, issuesId: string) => Promise<any>;
unarchiveIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<any>;
fetchIssueDetails: (workspaceSlug: string, projectId: string, issueId: string) => Promise<any>;
fetchPeekIssueDetails: (workspaceSlug: string, projectId: string, issueId: string) => Promise<any>;
}
export class ArchivedIssueDetailStore implements IArchivedIssueDetailStore {
loader: boolean = false;
error: any | null = null;
issueDetail: IArchivedIssueDetailStore["issueDetail"] = {};
peekId: string | null = null;
// service
archivedIssueService;
rootStore;
constructor(_rootStore: RootStore) {
makeObservable(this, {
// observable
loader: observable.ref,
error: observable.ref,
issueDetail: observable.ref,
peekId: observable.ref,
// computed
getIssue: computed,
// actions
deleteArchivedIssue: action,
unarchiveIssue: action,
fetchIssueDetails: action,
fetchPeekIssueDetails: action,
});
this.rootStore = _rootStore;
this.archivedIssueService = new IssueArchiveService();
}
get getIssue() {
if (!this.peekId) return null;
const _issue = this.issueDetail[this.peekId];
return _issue || null;
}
/**
* @description Function to delete archived issue from the detail store and backend.
*/
deleteArchivedIssue = async (workspaceSlug: string, projectId: string, issuesId: string) => {
const originalIssues = { ...this.issueDetail };
const _issues = { ...this.issueDetail };
delete _issues[issuesId];
// optimistically deleting item from store
runInAction(() => {
this.issueDetail = _issues;
});
try {
runInAction(() => {
this.loader = true;
this.error = null;
});
// deleting using api
const issueResponse = await this.archivedIssueService.deleteArchivedIssue(workspaceSlug, projectId, issuesId);
runInAction(() => {
this.loader = false;
this.error = null;
});
return issueResponse;
} catch (error) {
console.error("Error: Fetching error in issues", error);
runInAction(() => {
this.loader = false;
this.error = error;
// reverting back to original issues
this.issueDetail = originalIssues;
});
throw error;
}
};
fetchIssueDetails = async (workspaceSlug: string, projectId: string, issueId: string) => {
try {
runInAction(() => {
this.loader = true;
this.error = null;
});
const issueResponse = await this.archivedIssueService.retrieveArchivedIssue(workspaceSlug, projectId, issueId);
runInAction(() => {
this.loader = false;
this.error = null;
this.issueDetail = {
...this.issueDetail,
[issueId]: issueResponse,
};
});
return issueResponse;
} catch (error) {
console.error("Error: Fetching error in issues", error);
runInAction(() => {
this.loader = false;
this.error = error;
});
throw error;
}
};
unarchiveIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {
try {
runInAction(() => {
this.loader = true;
this.error = null;
});
const issueResponse = await this.archivedIssueService.unarchiveIssue(workspaceSlug, projectId, issueId);
this.rootStore.archivedIssues.fetchIssues(workspaceSlug, projectId);
// deleting from issue detail store
const _issues = { ...this.issueDetail };
delete _issues[issueId];
runInAction(() => {
this.issueDetail = _issues;
});
return issueResponse;
} catch (error) {
console.error("Error: Fetching error in issues", error);
runInAction(() => {
this.loader = false;
this.error = error;
});
throw error;
}
};
fetchPeekIssueDetails = async (workspaceSlug: string, projectId: string, issueId: string) => {
runInAction(() => {
this.loader = true;
this.error = null;
this.peekId = issueId;
});
try {
const issueResponse = await this.archivedIssueService.retrieveArchivedIssue(workspaceSlug, projectId, issueId);
await this.rootStore.issueDetail.fetchIssueReactions(workspaceSlug, projectId, issueId);
await this.rootStore.issueDetail.fetchIssueComments(workspaceSlug, projectId, issueId);
runInAction(() => {
this.loader = false;
this.error = null;
this.issueDetail = {
...this.issueDetail,
[issueId]: issueResponse,
};
});
return issueResponse;
} catch (error) {
console.error("Error: Fetching error in issues", error);
runInAction(() => {
this.loader = false;
this.error = error;
this.peekId = null;
});
throw error;
}
};
}

149
web/store/archived-issues/issue_filters.store.ts
View file

@ -1,20 +1,53 @@
import { observable, computed, makeObservable } from "mobx";
import { observable, computed, makeObservable, action, runInAction } from "mobx";
// helpers
import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
// services
import { IssueService } from "services/issue";
import { ProjectService } from "services/project";
// types
import { RootStore } from "../root";
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueParams } from "types";
import {
IIssueDisplayFilterOptions,
IIssueDisplayProperties,
IIssueFilterOptions,
TIssueParams,
IProjectViewProps,
} from "types";
export interface IArchivedIssueFilterStore {
loader: boolean;
error: any | null;
// observables
userDisplayProperties: IIssueDisplayProperties;
userDisplayFilters: IIssueDisplayFilterOptions;
userFilters: IIssueFilterOptions;
// services
projectService: ProjectService;
issueService: IssueService;
// computed
appliedFilters: TIssueParams[] | null;
// actions
fetchUserProjectFilters: (workspaceSlug: string, projectId: string) => Promise<void>;
updateUserFilters: (
workspaceSlug: string,
projectId: string,
properties: Partial<IProjectViewProps>
) => Promise<void>;
updateDisplayProperties: (
workspaceSlug: string,
projectId: string,
properties: Partial<IIssueDisplayProperties>
) => Promise<void>;
}
export class ArchivedIssueFilterStore implements IArchivedIssueFilterStore {
loader: boolean = false;
error: any | null = null;
// observables
userFilters: IIssueFilterOptions = {
priority: null,
@ -52,6 +85,10 @@ export class ArchivedIssueFilterStore implements IArchivedIssueFilterStore {
// root store
rootStore;
// services
projectService: ProjectService;
issueService: IssueService;
constructor(_rootStore: RootStore) {
makeObservable(this, {
// observables
@ -61,9 +98,19 @@ export class ArchivedIssueFilterStore implements IArchivedIssueFilterStore {
// computed
appliedFilters: computed,
// actions
fetchUserProjectFilters: action,
updateUserFilters: action,
updateDisplayProperties: action,
computedFilter: action,
});
this.rootStore = _rootStore;
// services
this.issueService = new IssueService();
this.projectService = new ProjectService();
}
computedFilter = (filters: any, filteredParams: any) => {
@ -89,7 +136,7 @@ export class ArchivedIssueFilterStore implements IArchivedIssueFilterStore {
labels: this.userFilters?.labels || undefined,
start_date: this.userFilters?.start_date || undefined,
target_date: this.userFilters?.target_date || undefined,
group_by: this.userDisplayFilters?.group_by || "state",
group_by: this.userDisplayFilters?.group_by,
order_by: this.userDisplayFilters?.order_by || "-created_at",
sub_group_by: this.userDisplayFilters?.sub_group_by || undefined,
type: this.userDisplayFilters?.type || undefined,
@ -98,12 +145,100 @@ export class ArchivedIssueFilterStore implements IArchivedIssueFilterStore {
start_target_date: this.userDisplayFilters?.start_target_date || true,
};
const filteredParams = handleIssueQueryParamsByLayout(this.userDisplayFilters.layout, "issues");
const filteredParams = handleIssueQueryParamsByLayout("list", "issues");
if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
if (this.userDisplayFilters.layout === "calendar") filteredRouteParams.group_by = "target_date";
if (this.userDisplayFilters.layout === "gantt_chart") filteredRouteParams.start_target_date = true;
return filteredRouteParams;
}
updateUserFilters = async (workspaceSlug: string, projectId: string, properties: Partial<IProjectViewProps>) => {
const newViewProps = {
display_filters: {
...this.userDisplayFilters,
...properties.display_filters,
},
filters: {
...this.userFilters,
...properties.filters,
},
};
// set sub_group_by to null if group_by is set to null
if (newViewProps.display_filters.group_by === null) newViewProps.display_filters.sub_group_by = null;
// set group_by to state if layout is switched to kanban and group_by is null
if (newViewProps.display_filters.layout === "kanban" && newViewProps.display_filters.group_by === null)
newViewProps.display_filters.group_by = "state";
try {
runInAction(() => {
this.userFilters = newViewProps.filters;
this.userDisplayFilters = {
...newViewProps.display_filters,
layout: "list",
};
});
this.projectService.setProjectView(workspaceSlug, projectId, {
view_props: newViewProps,
});
} catch (error) {
this.fetchUserProjectFilters(workspaceSlug, projectId);
runInAction(() => {
this.error = error;
});
console.log("Failed to update user filters in issue filter store", error);
}
};
updateDisplayProperties = async (
workspaceSlug: string,
projectId: string,
properties: Partial<IIssueDisplayProperties>
) => {
const newProperties: IIssueDisplayProperties = {
...this.userDisplayProperties,
...properties,
};
try {
runInAction(() => {
this.userDisplayProperties = newProperties;
});
await this.issueService.updateIssueDisplayProperties(workspaceSlug, projectId, newProperties);
} catch (error) {
this.fetchUserProjectFilters(workspaceSlug, projectId);
runInAction(() => {
this.error = error;
});
console.log("Failed to update user display properties in issue filter store", error);
}
};
fetchUserProjectFilters = async (workspaceSlug: string, projectId: string) => {
try {
const memberResponse = await this.projectService.projectMemberMe(workspaceSlug, projectId);
const issueProperties = await this.issueService.getIssueDisplayProperties(workspaceSlug, projectId);
runInAction(() => {
this.userFilters = memberResponse?.view_props?.filters;
this.userDisplayFilters = {
...(memberResponse?.view_props?.display_filters ?? {}),
layout: "list",
};
this.userDisplayProperties = issueProperties?.properties;
});
} catch (error) {
runInAction(() => {
this.error = error;
});
console.log("Failed to fetch user filters in issue filter store", error);
}
};
}

4
web/store/root.ts
View file

@ -85,6 +85,8 @@ import {
IArchivedIssueStore,
ArchivedIssueFilterStore,
IArchivedIssueFilterStore,
ArchivedIssueDetailStore,
IArchivedIssueDetailStore,
} from "store/archived-issues";
import { DraftIssueStore, IDraftIssueStore, DraftIssueFilterStore, IDraftIssueFilterStore } from "store/draft-issues";
import {
@ -151,6 +153,7 @@ export class RootStore {
profileIssueFilters: IProfileIssueFilterStore;
archivedIssues: IArchivedIssueStore;
archivedIssueDetail: IArchivedIssueDetailStore;
archivedIssueFilters: IArchivedIssueFilterStore;
draftIssues: IDraftIssueStore;
@ -212,6 +215,7 @@ export class RootStore {
this.profileIssueFilters = new ProfileIssueFilterStore(this);
this.archivedIssues = new ArchivedIssueStore(this);
this.archivedIssueDetail = new ArchivedIssueDetailStore(this);
this.archivedIssueFilters = new ArchivedIssueFilterStore(this);
this.draftIssues = new DraftIssueStore(this);