import { useRouter } from "next/router"; 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 import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "components/modules"; // ui import { Loader } from "@plane/ui"; // constants import { EUserWorkspaceRoles } from "constants/workspace"; // assets import emptyModule from "public/empty-state/empty_modules.webp"; import { NewEmptyState } from "components/common/new-empty-state"; export const ModulesListView: React.FC = observer(() => { const router = useRouter(); const { workspaceSlug, projectId, peekModule } = router.query; const { module: moduleStore, commandPalette: commandPaletteStore, user: { currentProjectRole }, } = useMobxStore(); const { storedValue: modulesView } = useLocalStorage("modules_view", "grid"); const modulesList = moduleStore.projectModules; const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER; if (!modulesList) return ( ); return ( <> {modulesList.length > 0 ? ( <> {modulesView === "list" && (
{modulesList.map((module) => ( ))}
)} {modulesView === "grid" && (
{modulesList.map((module) => ( ))}
)} {modulesView === "gantt_chart" && } ) : ( , text: "Build your first module", onClick: () => commandPaletteStore.toggleCreateModuleModal(true), } : null } disabled={!isEditingAllowed} /> )} ); });