2023-10-27 13:15:10 +00:00
import { useRouter } from "next/router" ;
2023-10-23 13:47:42 +00:00
import { observer } from "mobx-react-lite" ;
import { Plus } from "lucide-react" ;
// mobx store
import { useMobxStore } from "lib/mobx/store-provider" ;
// hooks
import useLocalStorage from "hooks/use-local-storage" ;
// components
2023-10-27 13:15:10 +00:00
import { ModuleCardItem , ModuleListItem , ModulePeekOverview , ModulesListGanttChartView } from "components/modules" ;
2023-10-23 13:47:42 +00:00
// ui
import { Loader } from "@plane/ui" ;
// assets
2023-11-28 13:17:52 +00:00
import emptyModule from "public/empty-state/empty_modules.webp" ;
import { NewEmptyState } from "components/common/new-empty-state" ;
2023-10-23 13:47:42 +00:00
export const ModulesListView : React.FC = observer ( ( ) = > {
2023-10-27 13:15:10 +00:00
const router = useRouter ( ) ;
const { workspaceSlug , projectId , peekModule } = router . query ;
2023-11-08 08:21:55 +00:00
const { module : moduleStore , commandPalette : commandPaletteStore } = useMobxStore ( ) ;
2023-10-23 13:47:42 +00:00
const { storedValue : modulesView } = useLocalStorage ( "modules_view" , "grid" ) ;
const modulesList = moduleStore . projectModules ;
if ( ! modulesList )
return (
< Loader className = "grid grid-cols-3 gap-4 p-8" >
2023-10-27 13:15:10 +00:00
< Loader.Item height = "176px" / >
< Loader.Item height = "176px" / >
< Loader.Item height = "176px" / >
< Loader.Item height = "176px" / >
< Loader.Item height = "176px" / >
< Loader.Item height = "176px" / >
2023-10-23 13:47:42 +00:00
< / Loader >
) ;
return (
< >
{ modulesList . length > 0 ? (
< >
2023-10-27 13:15:10 +00:00
{ modulesView === "list" && (
< div className = "h-full overflow-y-auto" >
2023-12-10 10:18:10 +00:00
< div className = "flex h-full w-full justify-between" >
< div className = "flex h-full w-full flex-col overflow-y-auto" >
2023-10-27 13:15:10 +00:00
{ modulesList . map ( ( module ) = > (
< ModuleListItem key = { module . id } module = { module } / >
) ) }
< / div >
< ModulePeekOverview
projectId = { projectId ? . toString ( ) ? ? "" }
workspaceSlug = { workspaceSlug ? . toString ( ) ? ? "" }
/ >
< / div >
< / div >
) }
2023-10-23 13:47:42 +00:00
{ modulesView === "grid" && (
2023-10-27 13:15:10 +00:00
< div className = "h-full w-full" >
2023-12-10 10:18:10 +00:00
< div className = "flex h-full w-full justify-between" >
2023-10-27 13:15:10 +00:00
< div
2023-12-10 10:18:10 +00:00
className = { ` grid h-full w-full grid-cols-1 gap-6 overflow-y-auto p-8 ${
2023-10-27 13:15:10 +00:00
peekModule
? "lg:grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3"
: "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
} auto - rows - max transition - all ` }
>
{ modulesList . map ( ( module ) = > (
< ModuleCardItem key = { module . id } module = { module } / >
) ) }
< / div >
< ModulePeekOverview
projectId = { projectId ? . toString ( ) ? ? "" }
workspaceSlug = { workspaceSlug ? . toString ( ) ? ? "" }
/ >
2023-10-23 13:47:42 +00:00
< / div >
< / div >
) }
{ modulesView === "gantt_chart" && < ModulesListGanttChartView / > }
< / >
) : (
2023-11-28 13:17:52 +00:00
< NewEmptyState
title = "Map your project milestones to Modules and track aggregated work easily."
description = "A group of issues that belong to a logical, hierarchical parent form a module. Think of them as a way to track work by project milestones. They have their own periods and deadlines as well as analytics to help you see how close or far you are from a milestone."
2023-10-23 13:47:42 +00:00
image = { emptyModule }
2023-11-28 13:17:52 +00:00
comicBox = { {
title : "Modules help group work by hierarchy." ,
direction : "right" ,
description :
"A cart module, a chassis module, and a warehouse module are all good example of this grouping." ,
} }
2023-10-23 13:47:42 +00:00
primaryButton = { {
icon : < Plus className = "h-4 w-4" / > ,
2023-11-28 13:17:52 +00:00
text : "Build your first module" ,
2023-11-08 08:21:55 +00:00
onClick : ( ) = > commandPaletteStore . toggleCreateModuleModal ( true ) ,
2023-10-23 13:47:42 +00:00
} }
/ >
) }
< / >
) ;
} ) ;