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

dev: store for draft issue

Browse Source
This commit is contained in:
dakshesh14 2023-10-26 20:37:28 +05:30
parent d95ea463b2
commit b85c93b0e5
5 changed files with 217 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/components/issues/modal.tsx
View File

@ -61,6 +61,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
cycleIssue: cycleIssueStore,
moduleIssue: moduleIssueStore,
user: userStore,
draftIssues: draftIssuesStore,
} = useMobxStore();
const user = userStore.currentUser;
@ -215,9 +216,12 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
...formDirtyState,
};
await issueDraftService
.createDraftIssue(workspaceSlug as string, activeProject ?? "", payload)
.then(() => {
await draftIssuesStore
.createDraftIssue(workspaceSlug.toString(), activeProject, payload)
.then((response) => {
// TODO: replace with actual group id and sub group id
draftIssuesStore.updateIssueStructure(null, null, response);
setToastAlert({
type: "success",
title: "Success!",
@ -228,11 +232,6 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
setActiveProject(null);
setFormDirtyState(null);
setShowConfirmDiscard(false);
if (payload.assignees_list?.some((assignee) => assignee === user?.id))
mutate(USER_ISSUE(workspaceSlug as string));
if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
})
.catch(() => {
setToastAlert({

0
web/services/issue/issue_draft.service.tsx → web/services/issue/issue_draft.service.ts
View File

259
web/store/draft-issues/issue.store.ts
View File

@ -4,7 +4,7 @@ import { RootStore } from "../root";
// types
import { IIssue } from "types";
// services
import { IssueService } from "services/issue";
import { IssueDraftService } from "services/issue";
import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
export type IIssueType = "grouped" | "groupWithSubGroups" | "ungrouped";
@ -16,29 +16,11 @@ export type IIssueGroupWithSubGroupsStructure = {
};
export type IIssueUnGroupedStructure = IIssue[];
export interface IDraftIssueStore {
export interface IIssueDraftStore {
loader: boolean;
error: any | null;
// issues
issues: {
[project_id: string]: {
grouped: IIssueGroupedStructure;
groupWithSubGroups: IIssueGroupWithSubGroupsStructure;
ungrouped: IIssueUnGroupedStructure;
};
};
// 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;
}
export class DraftIssueStore implements IDraftIssueStore {
loader: boolean = false;
error: any | null = null;
issues: {
draftIssues: {
[project_id: string]: {
grouped: {
[group_id: string]: IIssue[];
@ -50,9 +32,31 @@ export class DraftIssueStore implements IDraftIssueStore {
};
ungrouped: IIssue[];
};
} = {};
};
rootStore: RootStore;
// computed
getIssueType: IIssueType | null;
getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null;
// actions
fetchIssues: (workspaceSlug: string, projectId: string) => Promise<any>;
createDraftIssue: (workspaceSlug: string, projectId: string, issueForm: Partial<IIssue>) => Promise<any>;
updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
deleteDraftIssue: (workspaceSlug: string, projectId: string, issueId: string) => void;
updateDraftIssue: (workspaceSlug: string, projectId: string, issueForm: Partial<IIssue>) => void;
convertDraftIssueToIssue: (workspaceSlug: string, projectId: string, issueId: string) => void;
// service
issueService;
draftIssueService: IssueDraftService;
}
export class IssueDraftStore implements IIssueDraftStore {
loader: boolean = false;
error: any | null = null;
draftIssues: IIssueDraftStore["draftIssues"] = {};
// service
draftIssueService: IssueDraftService;
rootStore;
constructor(_rootStore: RootStore) {
@ -60,19 +64,26 @@ export class DraftIssueStore implements IDraftIssueStore {
// observable
loader: observable.ref,
error: observable.ref,
issues: observable.ref,
draftIssues: observable.ref,
// computed
getIssueType: computed,
getIssues: computed,
// actions
fetchIssues: action,
createDraftIssue: action,
updateIssueStructure: action,
deleteDraftIssue: action,
updateDraftIssue: action,
convertDraftIssueToIssue: action,
});
this.rootStore = _rootStore;
this.issueService = new IssueService();
this.draftIssueService = new IssueDraftService();
}
get getIssueType() {
// FIXME: this is temporary for development
return "ungrouped";
const groupedLayouts = ["kanban", "list", "calendar"];
const ungroupedLayouts = ["spreadsheet", "gantt_chart"];
@ -91,21 +102,94 @@ export class DraftIssueStore implements IDraftIssueStore {
return _issueState || null;
}
get getDraftIssues() {
const issueType = this.getIssueType;
const projectId = this.rootStore?.project?.projectId;
if (!projectId || !issueType) return null;
return this.draftIssues?.[projectId]?.[issueType] || null;
}
get getIssues() {
const projectId: string | null = this.rootStore?.project?.projectId;
const issueType = this.getIssueType;
if (!projectId || !issueType) return null;
return this.issues?.[projectId]?.[issueType] || null;
return this.draftIssues?.[projectId]?.[issueType] || null;
}
fetchIssues = async (workspaceSlug: string, projectId: string) => {
try {
this.loader = true;
this.error = null;
this.rootStore.workspace.setWorkspaceSlug(workspaceSlug);
this.rootStore.project.setProjectId(projectId);
// const params = this.rootStore?.issueFilter?.appliedFilters;
// TODO: use actual params using applied filters
const params = {};
const issueResponse = await this.draftIssueService.getDraftIssues(workspaceSlug, projectId, params);
const issueType = this.getIssueType;
if (issueType != null) {
const _issues = {
...this.draftIssues,
[projectId]: {
...this.draftIssues[projectId],
[issueType]: issueResponse,
},
};
runInAction(() => {
this.draftIssues = _issues;
this.loader = false;
this.error = null;
});
}
return issueResponse;
} catch (error) {
console.error("Error: Fetching error in issues", error);
this.loader = false;
this.error = error;
return error;
}
};
createDraftIssue = async (workspaceSlug: string, projectId: string, issueForm: Partial<IIssue>) => {
const originalIssues = { ...this.draftIssues };
runInAction(() => {
this.loader = true;
this.error = null;
});
try {
const response = await this.draftIssueService.createDraftIssue(workspaceSlug, projectId, issueForm);
runInAction(() => {
this.loader = false;
this.error = null;
});
return response;
} catch (error) {
console.error("Creating issue error", error);
// reverting back to original issues in case of error
runInAction(() => {
this.loader = false;
this.error = error;
this.draftIssues = originalIssues;
});
}
};
updateIssueStructure = 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;
this.getDraftIssues;
if (!issues) return null;
if (issueType === "grouped" && group_id) {
@ -145,43 +229,114 @@ export class DraftIssueStore implements IDraftIssueStore {
}
runInAction(() => {
this.issues = { ...this.issues, [projectId]: { ...this.issues[projectId], [issueType]: issues } };
this.draftIssues = { ...this.draftIssues, [projectId]: { ...this.draftIssues[projectId], [issueType]: issues } };
});
};
fetchIssues = async (workspaceSlug: string, projectId: string) => {
try {
updateDraftIssue = async (workspaceSlug: string, projectId: string, issueForm: Partial<IIssue>) => {
const originalIssues = { ...this.draftIssues };
// FIXME: use real group_id and sub_group_id from filters
const group_id = "1";
const sub_group_id = "1";
runInAction(() => {
this.loader = true;
this.error = null;
});
this.rootStore.workspace.setWorkspaceSlug(workspaceSlug);
this.rootStore.project.setProjectId(projectId);
// optimistic updating draft issue
this.updateIssueStructure(group_id, sub_group_id, issueForm as IIssue);
const params = this.rootStore?.issueFilter?.appliedFilters;
const issueResponse = await this.issueService.getIssuesWithParams(workspaceSlug, projectId, params);
try {
await this.draftIssueService.updateDraftIssue(workspaceSlug, projectId, issueForm?.id!, issueForm);
runInAction(() => {
this.loader = false;
this.error = null;
});
} catch (error) {
console.error("Updating issue error", error);
// reverting back to original issues in case of error
runInAction(() => {
this.loader = false;
this.error = error;
this.draftIssues = originalIssues;
});
}
};
const issueType = this.getIssueType;
if (issueType != null) {
const _issues = {
...this.issues,
[projectId]: {
...this.issues[projectId],
[issueType]: issueResponse,
},
convertDraftIssueToIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {
// update draft issue with is_draft being false
this.updateDraftIssue(workspaceSlug, projectId, { id: issueId, is_draft: false });
};
deleteDraftIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {
const originalIssues = { ...this.draftIssues };
const issueType = this.getIssueType;
runInAction(() => {
this.loader = true;
this.error = null;
});
// FIXME: use real group_id and sub_group_id from filters
const group_id = "1";
const sub_group_id = "1";
if (issueType) {
let issues = originalIssues?.[projectId]?.[issueType] || null;
if (!issues) return null;
if (issueType === "grouped") {
issues = issues as IIssueGroupedStructure;
issues = {
...issues,
[group_id]: issues[group_id].filter((i) => i?.id !== issueId),
};
runInAction(() => {
this.issues = _issues;
this.loader = false;
this.error = null;
});
}
return issueResponse;
if (issueType === "groupWithSubGroups") {
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 !== issueId),
},
};
}
if (issueType === "ungrouped") {
issues = issues as IIssueUnGroupedStructure;
issues = issues.filter((i) => i?.id !== issueId);
}
// optimistic removing draft issue
runInAction(() => {
this.draftIssues = {
...this.draftIssues,
[projectId]: { ...this.draftIssues[projectId], [issueType]: issues },
};
});
}
try {
// deleting using api
await this.draftIssueService.deleteDraftIssue(workspaceSlug, projectId, issueId);
runInAction(() => {
this.loader = false;
this.error = null;
});
} catch (error) {
console.error("Error: Fetching error in issues", error);
this.loader = false;
this.error = error;
return error;
console.error("Deleting issue error", error);
// reverting back to original issues in case of error
runInAction(() => {
this.loader = false;
this.error = error;
this.draftIssues = originalIssues;
});
}
};
}

170
web/store/issue/issue_draft.store.ts
View File

@ -1,170 +0,0 @@
// mobx
import { action, observable, runInAction, makeAutoObservable } from "mobx";
// services
import { IssueDraftService } from "services/issue";
// types
import type { IIssue, IUser } from "types";
export class DraftIssuesStore {
issues: { [key: string]: IIssue } = {};
isIssuesLoading: boolean = false;
rootStore: any | null = null;
issueDraftService;
constructor(_rootStore: any | null = null) {
makeAutoObservable(this, {
issues: observable.ref,
isIssuesLoading: observable.ref,
rootStore: observable.ref,
loadDraftIssues: action,
getIssueById: action,
createDraftIssue: action,
updateDraftIssue: action,
deleteDraftIssue: action,
});
this.rootStore = _rootStore;
this.issueDraftService = new IssueDraftService();
}
/**
* @description Fetch all draft issues of a project and hydrate issues field
*/
loadDraftIssues = async (workspaceSlug: string, projectId: string, params?: any) => {
this.isIssuesLoading = true;
try {
const issuesResponse = await this.issueDraftService.getDraftIssues(workspaceSlug, projectId, params);
const issues = Array.isArray(issuesResponse) ? { allIssues: issuesResponse } : issuesResponse;
runInAction(() => {
this.issues = issues;
this.isIssuesLoading = false;
});
} catch (error) {
this.isIssuesLoading = false;
console.error("Fetching issues error", error);
}
};
/**
* @description Fetch a single draft issue by id and hydrate issues field
* @param workspaceSlug
* @param projectId
* @param issueId
* @returns {IIssue}
*/
getIssueById = async (workspaceSlug: string, projectId: string, issueId: string): Promise<IIssue> => {
if (this.issues[issueId]) return this.issues[issueId];
try {
const issueResponse: IIssue = await this.issueDraftService.getDraftIssueById(workspaceSlug, projectId, issueId);
const issues = {
...this.issues,
[issueId]: { ...issueResponse },
};
runInAction(() => {
this.issues = issues;
});
return issueResponse;
} catch (error) {
throw error;
}
};
/**
* @description Create a new draft issue and hydrate issues field
* @param workspaceSlug
* @param projectId
* @param issueForm
* @param user
* @returns {IIssue}
*/
createDraftIssue = async (
workspaceSlug: string,
projectId: string,
issueForm: IIssue,
user: IUser
): Promise<IIssue> => {
try {
const issueResponse = await this.issueDraftService.createDraftIssue(workspaceSlug, projectId, issueForm);
const issues = {
...this.issues,
[issueResponse.id]: { ...issueResponse },
};
runInAction(() => {
this.issues = issues;
});
return issueResponse;
} catch (error) {
console.error("Creating issue error", error);
throw error;
}
};
updateDraftIssue = async (
workspaceSlug: string,
projectId: string,
issueId: string,
issueForm: Partial<IIssue>,
user: IUser
) => {
// keep a copy of the issue in the store
const originalIssue = { ...this.issues[issueId] };
// immediately update the issue in the store
const updatedIssue = { ...this.issues[issueId], ...issueForm };
if (updatedIssue.assignees_list) updatedIssue.assignees = updatedIssue.assignees_list;
try {
runInAction(() => {
this.issues[issueId] = { ...updatedIssue };
});
// make a patch request to update the issue
const issueResponse: IIssue = await this.issueDraftService.updateDraftIssue(
workspaceSlug,
projectId,
issueId,
issueForm
);
const updatedIssues = { ...this.issues };
updatedIssues[issueId] = { ...issueResponse };
runInAction(() => {
this.issues = updatedIssues;
});
} catch (error) {
// if there is an error, revert the changes
runInAction(() => {
this.issues[issueId] = originalIssue;
});
return error;
}
};
deleteDraftIssue = async (workspaceSlug: string, projectId: string, issueId: string, user: IUser) => {
const issues = { ...this.issues };
delete issues[issueId];
try {
runInAction(() => {
this.issues = issues;
});
this.issueDraftService.deleteDraftIssue(workspaceSlug, projectId, issueId);
} catch (error) {
console.error("Deleting issue error", error);
}
};
}

9
web/store/root.ts
View File

@ -4,7 +4,6 @@ import CommandPaletteStore, { ICommandPaletteStore } from "./command-palette.sto
import UserStore, { IUserStore } from "store/user.store";
import ThemeStore, { IThemeStore } from "store/theme.store";
import {
DraftIssuesStore,
IIssueDetailStore,
IIssueFilterStore,
IIssueKanBanViewStore,
@ -73,7 +72,7 @@ import {
ArchivedIssueFilterStore,
IArchivedIssueFilterStore,
} from "store/archived-issues";
import { DraftIssueStore, IDraftIssueStore, DraftIssueFilterStore, IDraftIssueFilterStore } from "store/draft-issues";
import { DraftIssueFilterStore, IDraftIssueFilterStore, IssueDraftStore, IIssueDraftStore } from "store/draft-issues";
import {
IInboxFiltersStore,
IInboxIssueDetailsStore,
@ -120,7 +119,6 @@ export class RootStore {
issueDetail: IIssueDetailStore;
issueKanBanView: IIssueKanBanViewStore;
issueCalendarView: IIssueCalendarViewStore;
draftIssuesStore: DraftIssuesStore;
calendar: ICalendarStore;
@ -134,7 +132,7 @@ export class RootStore {
archivedIssues: IArchivedIssueStore;
archivedIssueFilters: IArchivedIssueFilterStore;
draftIssues: IDraftIssueStore;
draftIssues: IIssueDraftStore;
draftIssueFilters: IDraftIssueFilterStore;
inbox: IInboxStore;
@ -175,7 +173,6 @@ export class RootStore {
this.issueDetail = new IssueDetailStore(this);
this.issueKanBanView = new IssueKanBanViewStore(this);
this.issueCalendarView = new IssueCalendarViewStore(this);
this.draftIssuesStore = new DraftIssuesStore(this);
this.calendar = new CalendarStore(this);
@ -189,7 +186,7 @@ export class RootStore {
this.archivedIssues = new ArchivedIssueStore(this);
this.archivedIssueFilters = new ArchivedIssueFilterStore(this);
this.draftIssues = new DraftIssueStore(this);
this.draftIssues = new IssueDraftStore(this);
this.draftIssueFilters = new DraftIssueFilterStore(this);
this.inbox = new InboxStore(this);