plane/web/components/issues/issue-layouts/roots/global-view-layout-root.tsx
Aaryan Khandelwal 3197dd484c
dev: implemented the new spreadsheet layout using MobX (#2463)
* refactor: spreadsheet layout components

* refactor: spreadsheet properties

* refactor: folder structure

* chore: issue property update

* chore: spreadsheet layout in the global views

* style: quick actions menu

* fix: build errors
2023-10-18 12:32:02 +05:30

103 lines
3.3 KiB
TypeScript

import React, { useCallback } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { GlobalViewsAppliedFiltersRoot, SpreadsheetView } from "components/issues";
// types
import { IIssue, IIssueDisplayFilterOptions, TStaticViewTypes } from "types";
// fetch-keys
import { GLOBAL_VIEW_ISSUES } from "constants/fetch-keys";
type Props = {
type?: TStaticViewTypes;
};
export const GlobalViewLayoutRoot: React.FC<Props> = observer((props) => {
const { type } = props;
const router = useRouter();
const { workspaceSlug, globalViewId } = router.query;
const {
globalViews: globalViewsStore,
globalViewIssues: globalViewIssuesStore,
globalViewFilters: globalViewFiltersStore,
workspaceFilter: workspaceFilterStore,
workspace: workspaceStore,
} = useMobxStore();
const viewDetails = globalViewId ? globalViewsStore.globalViewDetails[globalViewId.toString()] : undefined;
const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
useSWR(
workspaceSlug && globalViewId && viewDetails ? GLOBAL_VIEW_ISSUES(globalViewId.toString()) : null,
workspaceSlug && globalViewId && viewDetails
? () => {
globalViewIssuesStore.fetchViewIssues(workspaceSlug.toString(), globalViewId.toString(), storedFilters ?? {});
}
: null
);
useSWR(
workspaceSlug && type ? GLOBAL_VIEW_ISSUES(type) : null,
workspaceSlug && type
? () => {
globalViewIssuesStore.fetchStaticIssues(workspaceSlug.toString(), type);
}
: null
);
const handleDisplayFiltersUpdate = useCallback(
(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
if (!workspaceSlug) return;
workspaceFilterStore.updateWorkspaceFilters(workspaceSlug.toString(), {
display_filters: updatedDisplayFilter,
});
},
[workspaceFilterStore, workspaceSlug]
);
const handleUpdateIssue = useCallback(
(issue: IIssue, data: Partial<IIssue>) => {
if (!workspaceSlug) return;
console.log("issue", issue);
console.log("data", data);
// TODO: add update issue logic here
},
[workspaceSlug]
);
const issues = type
? globalViewIssuesStore.viewIssues?.[type]
: globalViewId
? globalViewIssuesStore.viewIssues?.[globalViewId.toString()]
: undefined;
return (
<div className="relative w-full h-full flex flex-col overflow-hidden">
<GlobalViewsAppliedFiltersRoot />
<div className="h-full w-full overflow-auto">
<SpreadsheetView
displayProperties={workspaceFilterStore.workspaceDisplayProperties}
displayFilters={workspaceFilterStore.workspaceDisplayFilters}
handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
issues={issues}
members={workspaceStore.workspaceMembers ? workspaceStore.workspaceMembers.map((m) => m.member) : undefined}
labels={workspaceStore.workspaceLabels ? workspaceStore.workspaceLabels : undefined}
handleIssueAction={() => {}}
handleUpdateIssue={handleUpdateIssue}
disableUserActions={false}
/>
</div>
</div>
);
});