github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: project views bugs related to store refactor. (#3391)

Browse Source 
* chore: remove debounce logic to fix create/ update view modal bugs.

* fix: bug in delete views not mutating the store.

* chore: replace `Project Empty State` with `Project Views Empty State`.

* chore: add issue peek overview.

* refactor: issue update, delete actions for project views layout.
fix: issue update and delete action throwing error bug.
fix: issue quick add throwing error bug.
This commit is contained in:
Prateek Shourya 2024-01-17 18:37:46 +05:30 committed by sriram veeraghanta
parent cce349b805
commit 5e2d93df52
9 changed files with 131 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
View File

@ -4,33 +4,28 @@ import { observer } from "mobx-react-lite";
import { useIssues } from "hooks/store";
// components
import { ProjectIssueQuickActions } from "components/issues";
import { BaseCalendarRoot } from "../base-calendar-root";
// types
import { TIssue } from "@plane/types";
import { EIssueActions } from "../../types";
import { BaseCalendarRoot } from "../base-calendar-root";
// constants
import { EIssuesStoreType } from "constants/issue";
import { useMemo } from "react";
export const ProjectViewCalendarLayout: React.FC = observer(() => {
export interface IViewCalendarLayout {
issueActions: {
[EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
[EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
[EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
};
}
export const ProjectViewCalendarLayout: React.FC<IViewCalendarLayout> = observer((props) => {
const { issueActions } = props;
// store
const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
// router
const router = useRouter();
const { workspaceSlug, projectId, viewId } = router.query;
const issueActions = useMemo(
() => ({
[EIssueActions.UPDATE]: async (issue: TIssue) => {
if (!workspaceSlug || !projectId) return;
await issues.updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, issue);
},
[EIssueActions.DELETE]: async (issue: TIssue) => {
if (!workspaceSlug || !projectId) return;
await issues.removeIssue(workspaceSlug.toString(), projectId.toString(), issue.id);
},
}),
[issues, workspaceSlug, projectId]
);
const { viewId } = router.query;
return (
<BaseCalendarRoot

38
web/components/issues/issue-layouts/gantt/project-view-root.tsx
View File

@ -4,28 +4,34 @@ import { observer } from "mobx-react-lite";
import { useIssues } from "hooks/store";
// components
import { BaseGanttRoot } from "./base-gantt-root";
// constants
import { EIssuesStoreType } from "constants/issue";
// types
import { EIssueActions } from "../types";
import { TIssue } from "@plane/types";
export const ProjectViewGanttLayout: React.FC = observer(() => {
export interface IViewGanttLayout {
issueActions: {
[EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
[EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
[EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
};
}
export const ProjectViewGanttLayout: React.FC<IViewGanttLayout> = observer((props) => {
const { issueActions } = props;
// store
const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
// router
const router = useRouter();
const { workspaceSlug } = router.query;
const { viewId } = router.query;
const issueActions = {
[EIssueActions.UPDATE]: async (issue: TIssue) => {
if (!workspaceSlug) return;
await issues.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, issue);
},
[EIssueActions.DELETE]: async (issue: TIssue) => {
if (!workspaceSlug) return;
await issues.removeIssue(workspaceSlug.toString(), issue.project_id, issue.id);
},
};
return <BaseGanttRoot issueFiltersStore={issuesFilter} issueStore={issues} issueActions={issueActions} />;
return (
<BaseGanttRoot
issueFiltersStore={issuesFilter}
issueStore={issues}
issueActions={issueActions}
viewId={viewId?.toString()}
/>
);
});

37
web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
View File

@ -1,38 +1,32 @@
import React, { useMemo } from "react";
import React from "react";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
// hooks
import { useIssues } from "hooks/store";
// constant
import { EIssuesStoreType } from "constants/issue";
// types
import { TIssue } from "@plane/types";
import { EIssueActions } from "../../types";
import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
// components
import { BaseKanBanRoot } from "../base-kanban-root";
import { EIssuesStoreType } from "constants/issue";
import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
export interface IViewKanBanLayout {}
export interface IViewKanBanLayout {
issueActions: {
[EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
[EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
[EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
};
}
export const ProjectViewKanBanLayout: React.FC = observer(() => {
export const ProjectViewKanBanLayout: React.FC<IViewKanBanLayout> = observer((props) => {
const { issueActions } = props;
// router
const router = useRouter();
const { workspaceSlug } = router.query as { workspaceSlug: string; projectId: string };
const { viewId } = router.query;
const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
const issueActions = useMemo(
() => ({
[EIssueActions.UPDATE]: async (issue: TIssue) => {
if (!workspaceSlug) return;
await issues.updateIssue(workspaceSlug, issue.project_id, issue.id, issue);
},
[EIssueActions.DELETE]: async (issue: TIssue) => {
if (!workspaceSlug) return;
await issues.removeIssue(workspaceSlug, issue.project_id, issue.id);
},
}),
[issues, workspaceSlug]
);
return (
<BaseKanBanRoot
@ -42,6 +36,7 @@ export const ProjectViewKanBanLayout: React.FC = observer(() => {
showLoader={true}
QuickActions={ProjectIssueQuickActions}
currentStore={EIssuesStoreType.PROJECT_VIEW}
viewId={viewId?.toString()}
/>
);
});

37
web/components/issues/issue-layouts/list/roots/project-view-root.tsx
View File

@ -1,43 +1,35 @@
import React, { useMemo } from "react";
import React from "react";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
// store
import { useIssues } from "hooks/store";
// constants
import { useRouter } from "next/router";
import { EIssuesStoreType } from "constants/issue";
// types
import { EIssueActions } from "../../types";
import { TIssue } from "@plane/types";
// components
import { BaseListRoot } from "../base-list-root";
import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
import { EIssuesStoreType } from "constants/issue";
export interface IViewListLayout {}
export interface IViewListLayout {
issueActions: {
[EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
[EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
[EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
};
}
export const ProjectViewListLayout: React.FC = observer(() => {
export const ProjectViewListLayout: React.FC<IViewListLayout> = observer((props) => {
const { issueActions } = props;
// store
const { issuesFilter, issues } = useIssues(EIssuesStoreType.PROJECT_VIEW);
const router = useRouter();
const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
const { workspaceSlug, projectId, viewId } = router.query;
if (!workspaceSlug || !projectId) return null;
const issueActions = useMemo(
() => ({
[EIssueActions.UPDATE]: async (issue: TIssue) => {
if (!workspaceSlug || !projectId) return;
await issues.updateIssue(workspaceSlug, projectId, issue.id, issue);
},
[EIssueActions.DELETE]: async (issue: TIssue) => {
if (!workspaceSlug || !projectId) return;
await issues.removeIssue(workspaceSlug, projectId, issue.id);
},
}),
[issues, workspaceSlug, projectId]
);
return (
<BaseListRoot
issuesFilter={issuesFilter}
@ -45,6 +37,7 @@ export const ProjectViewListLayout: React.FC = observer(() => {
QuickActions={ProjectIssueQuickActions}
issueActions={issueActions}
currentStore={EIssuesStoreType.PROJECT_VIEW}
viewId={viewId?.toString()}
/>
);
});

59
web/components/issues/issue-layouts/roots/project-view-layout-root.tsx
View File

@ -1,4 +1,4 @@
import React from "react";
import React, { useMemo } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
@ -6,16 +6,21 @@ import useSWR from "swr";
import { useIssues } from "hooks/store";
// components
import {
ProjectEmptyState,
IssuePeekOverview,
ProjectViewAppliedFiltersRoot,
ProjectViewCalendarLayout,
ProjectViewEmptyState,
ProjectViewGanttLayout,
ProjectViewKanBanLayout,
ProjectViewListLayout,
ProjectViewSpreadsheetLayout,
} from "components/issues";
import { Spinner } from "@plane/ui";
// constants
import { EIssuesStoreType } from "constants/issue";
// types
import { TIssue } from "@plane/types";
import { EIssueActions } from "../types";
export const ProjectViewLayoutRoot: React.FC = observer(() => {
// router
@ -39,6 +44,22 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
}
);
const issueActions = useMemo(
() => ({
[EIssueActions.UPDATE]: async (issue: TIssue) => {
if (!workspaceSlug || !projectId) return;
await issues.updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, issue, viewId?.toString());
},
[EIssueActions.DELETE]: async (issue: TIssue) => {
if (!workspaceSlug || !projectId) return;
await issues.removeIssue(workspaceSlug.toString(), projectId.toString(), issue.id, viewId?.toString());
},
}),
[issues, workspaceSlug, projectId, viewId]
);
const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
if (!workspaceSlug || !projectId || !viewId) return <></>;
@ -53,22 +74,26 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
) : (
<>
{!issues?.groupedIssueIds ? (
// TODO: Replace this with project view empty state
<ProjectEmptyState />
<ProjectViewEmptyState />
) : (
<div className="relative h-full w-full overflow-auto">
{activeLayout === "list" ? (
<ProjectViewListLayout />
) : activeLayout === "kanban" ? (
<ProjectViewKanBanLayout />
) : activeLayout === "calendar" ? (
<ProjectViewCalendarLayout />
) : activeLayout === "gantt_chart" ? (
<ProjectViewGanttLayout />
) : activeLayout === "spreadsheet" ? (
<ProjectViewSpreadsheetLayout />
) : null}
</div>
<>
<div className="relative h-full w-full overflow-auto">
{activeLayout === "list" ? (
<ProjectViewListLayout issueActions={issueActions} />
) : activeLayout === "kanban" ? (
<ProjectViewKanBanLayout issueActions={issueActions} />
) : activeLayout === "calendar" ? (
<ProjectViewCalendarLayout issueActions={issueActions} />
) : activeLayout === "gantt_chart" ? (
<ProjectViewGanttLayout issueActions={issueActions} />
) : activeLayout === "spreadsheet" ? (
<ProjectViewSpreadsheetLayout issueActions={issueActions} />
) : null}
</div>
{/* peek overview */}
<IssuePeekOverview />
</>
)}
</>
)}

37
web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
View File

@ -1,43 +1,40 @@
import React, { useMemo } from "react";
import React from "react";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
// mobx store
import { useIssues } from "hooks/store";
// components
import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
// types
import { EIssueActions } from "../../types";
import { TIssue } from "@plane/types";
import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
// constants
import { EIssuesStoreType } from "constants/issue";
export const ProjectViewSpreadsheetLayout: React.FC = observer(() => {
export interface IViewSpreadsheetLayout {
issueActions: {
[EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
[EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
[EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
};
}
export const ProjectViewSpreadsheetLayout: React.FC<IViewSpreadsheetLayout> = observer((props) => {
const { issueActions } = props;
// router
const router = useRouter();
const { workspaceSlug } = router.query as { workspaceSlug: string };
const { viewId } = router.query;
const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
const issueActions = useMemo(
() => ({
[EIssueActions.UPDATE]: async (issue: TIssue) => {
if (!workspaceSlug) return;
await issues.updateIssue(workspaceSlug, issue.project_id, issue.id, issue);
},
[EIssueActions.DELETE]: async (issue: TIssue) => {
if (!workspaceSlug) return;
await issues.removeIssue(workspaceSlug, issue.project_id, issue.id);
},
}),
[issues, workspaceSlug]
);
return (
<BaseSpreadsheetRoot
issueStore={issues}
issueFiltersStore={issuesFilter}
issueActions={issueActions}
QuickActions={ProjectIssueQuickActions}
viewId={viewId?.toString()}
/>
);
});

2
web/components/views/form.tsx
View File

@ -208,7 +208,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
<Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={4}>
Cancel
</Button>
<Button variant="primary" size="sm" type="submit" tabIndex={5}>
<Button variant="primary" size="sm" type="submit" tabIndex={5} disabled={isSubmitting}>
{data
? isSubmitting
? "Updating View..."

7
web/components/views/modal.tsx
View File

@ -1,7 +1,6 @@
import { FC, Fragment } from "react";
import { observer } from "mobx-react-lite";
import { Dialog, Transition } from "@headlessui/react";
import { debounce } from "lodash";
// hooks
import { useProjectView } from "hooks/store";
import useToast from "hooks/use-toast";
@ -33,9 +32,7 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
const handleCreateView = async (payload: IProjectView) => {
await createView(workspaceSlug, projectId, payload)
.then(() => {
// console.log("after calling store");
handleClose();
// console.log("after closing");
setToastAlert({
type: "success",
title: "Success!",
@ -68,8 +65,6 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
else await handleUpdateView(formData);
};
const debouncedFormSubmit = debounce(handleFormSubmit, 10, { leading: false, trailing: true });
return (
<Transition.Root show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
@ -100,7 +95,7 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
<ProjectViewForm
data={data}
handleClose={handleClose}
handleFormSubmit={debouncedFormSubmit as (formData: IProjectView) => Promise<void>}
handleFormSubmit={handleFormSubmit}
preLoadedData={preLoadedData}
/>
</Dialog.Panel>

4
web/store/project-view.store.ts
View File

@ -1,4 +1,4 @@
import { omit, set } from "lodash";
import { set } from "lodash";
import { observable, action, makeObservable, runInAction, computed } from "mobx";
// services
import { ViewService } from "services/view.service";
@ -163,7 +163,7 @@ export class ProjectViewStore implements IProjectViewStore {
deleteView = async (workspaceSlug: string, projectId: string, viewId: string): Promise<any> => {
await this.viewService.deleteView(workspaceSlug, projectId, viewId).then(() => {
runInAction(() => {
omit(this.viewMap, [viewId]);
delete this.viewMap[viewId];
});
});
};