diff --git a/web/components/issue-layouts/list/list.tsx b/web/components/issue-layouts/list/list.tsx index 2d2e31ef9..8a858ee6a 100644 --- a/web/components/issue-layouts/list/list.tsx +++ b/web/components/issue-layouts/list/list.tsx @@ -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 = (props) => { +export const IssueListView: FC = observer((props) => { const { issues = [], groupId } = props; return (
@@ -16,4 +17,4 @@ export const IssueListView: FC = (props) => { ))}
); -}; +}); diff --git a/web/components/issue-layouts/list/root.tsx b/web/components/issue-layouts/list/root.tsx index 19ebf641a..5649a522b 100644 --- a/web/components/issue-layouts/list/root.tsx +++ b/web/components/issue-layouts/list/root.tsx @@ -31,7 +31,7 @@ export const IssueListViewRoot = observer(() => { /> - + )} diff --git a/web/components/issue-layouts/properties/priority-select.tsx b/web/components/issue-layouts/properties/priority-select.tsx index 835adb8a9..a914ed38a 100644 --- a/web/components/issue-layouts/properties/priority-select.tsx +++ b/web/components/issue-layouts/properties/priority-select.tsx @@ -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 = (props) => { +export const IssuePrioritySelect: FC = 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 = (props) => { ); -}; +}); diff --git a/web/store/issue-views/Issues.ts b/web/store/issue-views/Issues.ts index d8dacc1f5..b7aede2a9 100644 --- a/web/store/issue-views/Issues.ts +++ b/web/store/issue-views/Issues.ts @@ -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 { diff --git a/web/store/issue-views/issue_data.ts b/web/store/issue-views/issue_data.ts index d6d12743a..11edc4e0b 100644 --- a/web/store/issue-views/issue_data.ts +++ b/web/store/issue-views/issue_data.ts @@ -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, diff --git a/web/store/issue-views/issue_filters.ts b/web/store/issue-views/issue_filters.ts index 2239ef0f8..17beb0108 100644 --- a/web/store/issue-views/issue_filters.ts +++ b/web/store/issue-views/issue_filters.ts @@ -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) => {