forked from github/plane
chore: store setup
This commit is contained in:
parent
12b6ec4b49
commit
a25e5accd1
@ -1,13 +1,14 @@
|
||||
import React, { FC } from "react";
|
||||
import { IIssue } from "types";
|
||||
import { IssueListItem } from "./item";
|
||||
import { observer } from "mobx-react-lite";
|
||||
|
||||
export interface IIssueListView {
|
||||
issues: IIssue[];
|
||||
groupId: string;
|
||||
}
|
||||
|
||||
export const IssueListView: FC<IIssueListView> = (props) => {
|
||||
export const IssueListView: FC<IIssueListView> = observer((props) => {
|
||||
const { issues = [], groupId } = props;
|
||||
return (
|
||||
<div>
|
||||
@ -16,4 +17,4 @@ export const IssueListView: FC<IIssueListView> = (props) => {
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
@ -31,7 +31,7 @@ export const IssueListViewRoot = observer(() => {
|
||||
/>
|
||||
</Disclosure.Button>
|
||||
<Disclosure.Panel className="px-4 pt-4 pb-2">
|
||||
<IssueListView issues={issueViewStore?.getIssues?.[groupId]} groupId={groupId}></IssueListView>
|
||||
<IssueListView issues={issueViewStore?.getIssues?.[groupId]} groupId={groupId} />
|
||||
</Disclosure.Panel>
|
||||
</>
|
||||
)}
|
||||
|
@ -3,22 +3,23 @@ import { Listbox, Transition } from "@headlessui/react";
|
||||
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
import { IIssue } from "types";
|
||||
import { observer } from "mobx-react-lite";
|
||||
|
||||
export interface IIssuePrioritySelect {
|
||||
issue: IIssue;
|
||||
groupId: string;
|
||||
}
|
||||
|
||||
export const IssuePrioritySelect: FC<IIssuePrioritySelect> = (props) => {
|
||||
export const IssuePrioritySelect: FC<IIssuePrioritySelect> = observer((props) => {
|
||||
const { issue, groupId } = props;
|
||||
|
||||
const { issueFilters: issueFilterStore } = useMobxStore();
|
||||
const { issueView: issueViewStore, issueFilters: issueFilterStore } = useMobxStore();
|
||||
const priorityList = issueFilterStore.issueRenderFilters.priority;
|
||||
|
||||
const selected = priorityList.find((p) => p.key === issue.priority);
|
||||
|
||||
const changePriority = (selectedPriority: any) => {
|
||||
console.log("selectedPriority", selectedPriority);
|
||||
issueViewStore.updateIssues(groupId, issue.id, { priority: selectedPriority.key });
|
||||
};
|
||||
|
||||
return (
|
||||
@ -58,4 +59,4 @@ export const IssuePrioritySelect: FC<IIssuePrioritySelect> = (props) => {
|
||||
</div>
|
||||
</Listbox>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
@ -94,6 +94,7 @@ class IssueViewStore implements IIssueViewStore {
|
||||
getIssuesForModulesAsync: action,
|
||||
getIssuesForCyclesAsync: action,
|
||||
getIssuesForViewsAsync: action,
|
||||
updateIssues: action,
|
||||
// computed
|
||||
getIssues: computed,
|
||||
});
|
||||
@ -142,6 +143,97 @@ class IssueViewStore implements IIssueViewStore {
|
||||
return null;
|
||||
}
|
||||
|
||||
updateIssues = (group_id: string | null, issue_id: string | null, data: any) => {
|
||||
const currentWorkspaceId: string | null = this.rootStore.issueFilters.workspaceId;
|
||||
const currentProjectId: string | null = this.rootStore.issueFilters.projectId;
|
||||
const currentModuleId: string | null = this.rootStore.issueFilters.moduleId;
|
||||
const currentCycleId: string | null = this.rootStore.issueFilters.cycleId;
|
||||
const currentViewId: string | null = this.rootStore.issueFilters.viewId;
|
||||
const currentView: TIssueViews | null = this.rootStore.issueFilters.issueView;
|
||||
const currentLayout: TIssueLayouts | null | undefined = this.rootStore.issueFilters.issueLayout;
|
||||
|
||||
if (!currentView || !currentWorkspaceId || !currentLayout || !issue_id) return null;
|
||||
|
||||
if (currentView === "my_issues") {
|
||||
if (group_id) {
|
||||
this.issues = {
|
||||
...this.issues,
|
||||
[currentWorkspaceId]: {
|
||||
...this?.issues?.[currentWorkspaceId],
|
||||
my_issues: {
|
||||
...this?.issues?.[currentWorkspaceId]?.my_issues,
|
||||
[currentLayout]: {
|
||||
...this?.issues?.[currentWorkspaceId]?.my_issues?.[currentLayout],
|
||||
[group_id]: this?.issues?.[currentWorkspaceId]?.my_issues?.[currentLayout]?.[group_id].map(
|
||||
(item: any) => (item.id === issue_id ? { ...item, ...data } : { ...item })
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
} else {
|
||||
this.issues = {
|
||||
...this.issues,
|
||||
[currentWorkspaceId]: {
|
||||
...this?.issues?.[currentWorkspaceId],
|
||||
my_issues: {
|
||||
...this?.issues?.[currentWorkspaceId]?.my_issues,
|
||||
[currentLayout]: this?.issues?.[currentWorkspaceId]?.my_issues?.[currentLayout].map((item: any) =>
|
||||
item.id === issue_id ? { ...item, ...data } : { ...item }
|
||||
),
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if (!currentProjectId) return null;
|
||||
if (currentView) {
|
||||
if (group_id) {
|
||||
this.issues = {
|
||||
...this.issues,
|
||||
[currentWorkspaceId]: {
|
||||
...this?.issues?.[currentWorkspaceId],
|
||||
project_issues: {
|
||||
...this?.issues?.[currentWorkspaceId]?.project_issues,
|
||||
[currentProjectId]: {
|
||||
...this?.issues?.[currentWorkspaceId]?.project_issues?.[currentProjectId],
|
||||
[currentView]: {
|
||||
...this?.issues?.[currentWorkspaceId]?.project_issues?.[currentProjectId]?.issues,
|
||||
[currentLayout]: {
|
||||
...this?.issues?.[currentWorkspaceId]?.project_issues?.[currentProjectId]?.issues?.[currentLayout],
|
||||
[group_id]: this?.issues?.[currentWorkspaceId]?.project_issues?.[currentProjectId]?.issues?.[
|
||||
currentLayout
|
||||
]?.[group_id].map((item: any) => (item.id === issue_id ? { ...item, ...data } : { ...item })),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
} else {
|
||||
this.issues = {
|
||||
...this.issues,
|
||||
[currentWorkspaceId]: {
|
||||
...this?.issues?.[currentWorkspaceId],
|
||||
project_issues: {
|
||||
...this?.issues?.[currentWorkspaceId]?.project_issues,
|
||||
[currentProjectId]: {
|
||||
...this?.issues?.[currentWorkspaceId]?.project_issues?.[currentProjectId],
|
||||
[currentView]: {
|
||||
...this?.issues?.[currentWorkspaceId]?.project_issues?.[currentProjectId]?.issues,
|
||||
[currentLayout]: this?.issues?.[currentWorkspaceId]?.project_issues?.[currentProjectId]?.issues?.[
|
||||
currentLayout
|
||||
].map((item: any) => (item.id === issue_id ? { ...item, ...data } : { ...item })),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// fetching my issues
|
||||
getMyIssuesAsync = async (workspaceId: string, fetchFilterToggle: boolean = true) => {
|
||||
try {
|
||||
|
@ -1,15 +1,8 @@
|
||||
import { renderDateFormat } from "helpers/date-time.helper";
|
||||
|
||||
export type TStateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled";
|
||||
export const issueStateGroupKeys: TStateGroup[] = [
|
||||
"backlog",
|
||||
"unstarted",
|
||||
"started",
|
||||
"completed",
|
||||
"cancelled",
|
||||
];
|
||||
|
||||
export const filtersPriority: { key: string; title: string }[] = [
|
||||
export const priorities: { key: string; title: string }[] = [
|
||||
{ key: "urgent", title: "Urgent" },
|
||||
{ key: "high", title: "High" },
|
||||
{ key: "medium", title: "Medium" },
|
||||
@ -17,7 +10,7 @@ export const filtersPriority: { key: string; title: string }[] = [
|
||||
{ key: "none", title: "None" },
|
||||
];
|
||||
|
||||
export const filterStateGroup: { key: TStateGroup; title: string }[] = [
|
||||
export const stateGroups: { key: TStateGroup; title: string }[] = [
|
||||
{ key: "backlog", title: "Backlog" },
|
||||
{ key: "unstarted", title: "Unstarted" },
|
||||
{ key: "started", title: "Started" },
|
||||
@ -25,7 +18,7 @@ export const filterStateGroup: { key: TStateGroup; title: string }[] = [
|
||||
{ key: "cancelled", title: "Cancelled" },
|
||||
];
|
||||
|
||||
export const filtersStartDate: { key: string; title: string }[] = [
|
||||
export const startDateOptions: { key: string; title: string }[] = [
|
||||
{ key: "last_week", title: "Last Week" },
|
||||
{ key: "2_weeks_from_now", title: "2 weeks from now" },
|
||||
{ key: "1_month_from_now", title: "1 month from now" },
|
||||
@ -33,7 +26,7 @@ export const filtersStartDate: { key: string; title: string }[] = [
|
||||
{ key: "custom", title: "Custom" },
|
||||
];
|
||||
|
||||
export const filtersDueDate: { key: string; title: string }[] = [
|
||||
export const dueDateOptions: { key: string; title: string }[] = [
|
||||
{ key: "last_week", title: "Last Week" },
|
||||
{ key: "2_weeks_from_now", title: "2 weeks from now" },
|
||||
{ key: "1_month_from_now", title: "1 month from now" },
|
||||
@ -41,7 +34,7 @@ export const filtersDueDate: { key: string; title: string }[] = [
|
||||
{ key: "custom", title: "Custom" },
|
||||
];
|
||||
|
||||
export const displayPropertyGroupBy: { key: string; title: string }[] = [
|
||||
export const groupByOptions: { key: string; title: string }[] = [
|
||||
{ key: "state", title: "States" },
|
||||
{ key: "state_detail.group", title: "State Groups" },
|
||||
{ key: "priority", title: "Priority" },
|
||||
@ -51,7 +44,7 @@ export const displayPropertyGroupBy: { key: string; title: string }[] = [
|
||||
{ key: "created_by", title: "Created By" },
|
||||
];
|
||||
|
||||
export const displayPropertyOrderBy: { key: string; title: string }[] = [
|
||||
export const orderByOptions: { key: string; title: string }[] = [
|
||||
{ key: "sort_order", title: "Manual" },
|
||||
{ key: "created_at", title: "Last Created" },
|
||||
{ key: "updated_at", title: "Last Updated" },
|
||||
@ -59,7 +52,7 @@ export const displayPropertyOrderBy: { key: string; title: string }[] = [
|
||||
{ key: "priority", title: "Priority" },
|
||||
];
|
||||
|
||||
export const displayPropertyIssueType: { key: string; title: string }[] = [
|
||||
export const issueTypes: { key: string; title: string }[] = [
|
||||
{ key: "all", title: "All" },
|
||||
{ key: "active", title: "Active Issues" },
|
||||
{ key: "backlog", title: "Backlog Issues" },
|
||||
@ -112,30 +105,14 @@ export const issueFilterVisibilityData: any = {
|
||||
},
|
||||
},
|
||||
},
|
||||
others: {
|
||||
issues: {
|
||||
layout: ["list", "kanban", "calendar", "spreadsheet", "gantt_chart"],
|
||||
filters: {
|
||||
list: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
|
||||
kanban: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
|
||||
calendar: ["priority", "state", "assignees", "created_by", "labels"],
|
||||
spreadsheet: [
|
||||
"priority",
|
||||
"state",
|
||||
"assignees",
|
||||
"created_by",
|
||||
"labels",
|
||||
"start_date",
|
||||
"due_date",
|
||||
],
|
||||
gantt_chart: [
|
||||
"priority",
|
||||
"state",
|
||||
"assignees",
|
||||
"created_by",
|
||||
"labels",
|
||||
"start_date",
|
||||
"due_date",
|
||||
],
|
||||
spreadsheet: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
|
||||
gantt_chart: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
|
||||
},
|
||||
display_properties: {
|
||||
list: true,
|
||||
@ -176,15 +153,11 @@ export const issueFilterVisibilityData: any = {
|
||||
},
|
||||
};
|
||||
|
||||
export const handleIssueParamsDateFormat = (
|
||||
key: string,
|
||||
start_date: any | null,
|
||||
target_date: any | null
|
||||
) => {
|
||||
export const handleIssueParamsDateFormat = (key: string, start_date: any | null, target_date: any | null) => {
|
||||
if (key === "last_week")
|
||||
return `${renderDateFormat(
|
||||
new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)
|
||||
)};after,${renderDateFormat(new Date())};before`;
|
||||
return `${renderDateFormat(new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000))};after,${renderDateFormat(
|
||||
new Date()
|
||||
)};before`;
|
||||
|
||||
if (key === "2_weeks_from_now")
|
||||
return `${renderDateFormat(new Date())};after,
|
||||
|
@ -196,7 +196,6 @@ class IssueFilterStore implements IIssueFilterStore {
|
||||
loader: boolean = false;
|
||||
error: any | null = null;
|
||||
|
||||
myUserId: string | null = null;
|
||||
workspaceId: string | null = null;
|
||||
projectId: string | null = null;
|
||||
moduleId: string | null = null;
|
||||
@ -305,25 +304,30 @@ class IssueFilterStore implements IIssueFilterStore {
|
||||
// computed
|
||||
get issueLayout() {
|
||||
if (!this.workspaceId) return null;
|
||||
if (!this.projectId) return this.issueFilters?.[this.workspaceId]?.my_issue_properties?.display_filters?.layout;
|
||||
if (!this.projectId)
|
||||
return this.issueFilters?.[this.workspaceId]?.my_issue_properties?.display_filters?.layout || null;
|
||||
if (this.projectId)
|
||||
return this.issueFilters?.[this.workspaceId]?.project_issue_properties?.[this.projectId]?.issues?.display_filters
|
||||
?.layout;
|
||||
return (
|
||||
this.issueFilters?.[this.workspaceId]?.project_issue_properties?.[this.projectId]?.issues?.display_filters
|
||||
?.layout || null
|
||||
);
|
||||
}
|
||||
|
||||
get workspaceProjects() {
|
||||
if (!this.workspaceId) return null;
|
||||
return this.issueRenderFilters?.workspace_properties?.[this.workspaceId]?.projects;
|
||||
return this.issueRenderFilters?.workspace_properties?.[this.workspaceId]?.projects || null;
|
||||
}
|
||||
get workspaceLabels() {
|
||||
if (!this.workspaceId) return null;
|
||||
return this.issueRenderFilters?.workspace_properties?.[this.workspaceId]?.labels;
|
||||
return this.issueRenderFilters?.workspace_properties?.[this.workspaceId]?.labels || null;
|
||||
}
|
||||
|
||||
get projectStates() {
|
||||
if (!this.workspaceId || !this.projectId) return null;
|
||||
return this.issueRenderFilters?.workspace_properties?.[this.workspaceId]?.project_properties?.[this.projectId]
|
||||
?.states;
|
||||
return (
|
||||
this.issueRenderFilters?.workspace_properties?.[this.workspaceId]?.project_properties?.[this.projectId]?.states ||
|
||||
null
|
||||
);
|
||||
}
|
||||
|
||||
getProjectStateById = (stateId: string) => {
|
||||
|
Loading…
Reference in New Issue
Block a user