chore: store setup

This commit is contained in:
gurusainath 2023-09-15 20:07:38 +05:30
parent 12b6ec4b49
commit a25e5accd1
6 changed files with 127 additions and 56 deletions

View File

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

View File

@ -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>
</>
)}

View File

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

View File

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

View File

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

View File

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