Browse Source

Move pages const into a separate file

mantine
cracklesparkle 5 months ago
parent
commit
59dddfa02c
  1. 156
      client/src/App.tsx
  2. 160
      client/src/constants/app.tsx
  3. 2
      client/src/layouts/DashboardLayout.tsx

156
client/src/App.tsx

@ -1,165 +1,11 @@
import { BrowserRouter as Router, Route, Routes, Navigate } from "react-router-dom" import { BrowserRouter as Router, Route, Routes, Navigate } from "react-router-dom"
import Main from "./pages/Main"
import Users from "./pages/Users"
import Roles from "./pages/Roles"
import NotFound from "./pages/NotFound" import NotFound from "./pages/NotFound"
import MainLayout from "./layouts/MainLayout" import MainLayout from "./layouts/MainLayout"
import SignIn from "./pages/auth/SignIn"
import SignUp from "./pages/auth/SignUp"
import { initAuth, useAuthStore } from "./store/auth" import { initAuth, useAuthStore } from "./store/auth"
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import Documents from "./pages/Documents"
import Reports from "./pages/Reports"
import Boilers from "./pages/Boilers"
import Servers from "./pages/Servers"
import Settings from "./pages/Settings"
import PasswordReset from "./pages/auth/PasswordReset"
import MapTest from "./pages/MapTest"
import MonitorPage from "./pages/MonitorPage"
import DashboardLayout from "./layouts/DashboardLayout" import DashboardLayout from "./layouts/DashboardLayout"
import { IconBuildingFactory2, IconComponents, IconDeviceDesktopAnalytics, IconFiles, IconHome, IconLogin, IconLogin2, IconMap, IconPassword, IconReport, IconServer, IconSettings, IconShield, IconTable, IconUsers } from "@tabler/icons-react"
import { Box, Loader } from "@mantine/core" import { Box, Loader } from "@mantine/core"
import TableTest from "./pages/TableTest"
import ComponentTest from "./pages/ComponentTest"
// Определение страниц с путями и компонентом для рендера
export const pages = [
{
label: "",
path: "/auth/signin",
icon: <IconLogin2 />,
component: <SignIn />,
drawer: false,
dashboard: false,
enabled: true,
},
{
label: "",
path: "/auth/signup",
icon: <IconLogin />,
component: <SignUp />,
drawer: false,
dashboard: false,
enabled: false,
},
{
label: "",
path: "/auth/password-reset",
icon: <IconPassword />,
component: <PasswordReset />,
drawer: false,
dashboard: false,
enabled: true,
},
{
label: "Настройки",
path: "/settings",
icon: <IconSettings />,
component: <Settings />,
drawer: false,
dashboard: true,
enabled: true,
},
{
label: "Главная",
path: "/",
icon: <IconHome />,
component: <Main />,
drawer: true,
dashboard: true,
enabled: true,
},
{
label: "Пользователи",
path: "/user",
icon: <IconUsers />,
component: <Users />,
drawer: true,
dashboard: true,
enabled: true,
},
{
label: "Роли",
path: "/role",
icon: <IconShield />,
component: <Roles />,
drawer: true,
dashboard: true,
enabled: true,
},
{
label: "Документы",
path: "/documents",
icon: <IconFiles />,
component: <Documents />,
drawer: true,
dashboard: true,
enabled: true,
},
{
label: "Отчеты",
path: "/reports",
icon: <IconReport />,
component: <Reports />,
drawer: true,
dashboard: true,
enabled: true,
},
{
label: "Серверы",
path: "/servers",
icon: <IconServer />,
component: <Servers />,
drawer: true,
dashboard: true,
enabled: true,
},
{
label: "Котельные",
path: "/boilers",
icon: <IconBuildingFactory2 />,
component: <Boilers />,
drawer: true,
dashboard: true,
enabled: true,
},
{
label: "ИКС",
path: "/map-test",
icon: <IconMap />,
component: <MapTest />,
drawer: true,
dashboard: true,
enabled: true,
},
{
label: "Монитор",
path: "/monitor",
icon: <IconDeviceDesktopAnalytics />,
component: <MonitorPage />,
drawer: true,
dashboard: true,
enabled: true,
},
{
label: "Table test",
path: "/table-test",
icon: <IconTable />,
component: <TableTest />,
drawer: true,
dashboard: true,
enabled: true,
},
{
label: "Component test",
path: "/component-test",
icon: <IconComponents />,
component: <ComponentTest />,
drawer: true,
dashboard: true,
enabled: true,
},
]
import { pages } from "./constants/app"
function App() { function App() {
const auth = useAuthStore() const auth = useAuthStore()

160
client/src/constants/app.tsx

@ -0,0 +1,160 @@
import { IconBuildingFactory2, IconComponents, IconDeviceDesktopAnalytics, IconFiles, IconHome, IconLogin, IconLogin2, IconMap, IconPassword, IconReport, IconServer, IconSettings, IconShield, IconTable, IconUsers } from "@tabler/icons-react";
import SignIn from "../pages/auth/SignIn";
import SignUp from "../pages/auth/SignUp";
import PasswordReset from "../pages/auth/PasswordReset";
import TableTest from "../pages/TableTest";
import ComponentTest from "../pages/ComponentTest";
import MonitorPage from "../pages/MonitorPage";
import Settings from "../pages/Settings";
import Main from "../pages/Main";
import Users from "../pages/Users";
import Roles from "../pages/Roles";
import Documents from "../pages/Documents";
import Reports from "../pages/Reports";
import Servers from "../pages/Servers";
import Boilers from "../pages/Boilers";
import MapTest from "../pages/MapTest";
// Определение страниц с путями и компонентом для рендера
const pages = [
{
label: "",
path: "/auth/signin",
icon: <IconLogin2 />,
component: <SignIn />,
drawer: false,
dashboard: false,
enabled: true,
},
{
label: "",
path: "/auth/signup",
icon: <IconLogin />,
component: <SignUp />,
drawer: false,
dashboard: false,
enabled: false,
},
{
label: "",
path: "/auth/password-reset",
icon: <IconPassword />,
component: <PasswordReset />,
drawer: false,
dashboard: false,
enabled: true,
},
{
label: "Настройки",
path: "/settings",
icon: <IconSettings />,
component: <Settings />,
drawer: false,
dashboard: true,
enabled: true,
},
{
label: "Главная",
path: "/",
icon: <IconHome />,
component: <Main />,
drawer: true,
dashboard: true,
enabled: true,
},
{
label: "Пользователи",
path: "/user",
icon: <IconUsers />,
component: <Users />,
drawer: true,
dashboard: true,
enabled: true,
},
{
label: "Роли",
path: "/role",
icon: <IconShield />,
component: <Roles />,
drawer: true,
dashboard: true,
enabled: true,
},
{
label: "Документы",
path: "/documents",
icon: <IconFiles />,
component: <Documents />,
drawer: true,
dashboard: true,
enabled: true,
},
{
label: "Отчеты",
path: "/reports",
icon: <IconReport />,
component: <Reports />,
drawer: true,
dashboard: true,
enabled: true,
},
{
label: "Серверы",
path: "/servers",
icon: <IconServer />,
component: <Servers />,
drawer: true,
dashboard: true,
enabled: true,
},
{
label: "Котельные",
path: "/boilers",
icon: <IconBuildingFactory2 />,
component: <Boilers />,
drawer: true,
dashboard: true,
enabled: true,
},
{
label: "ИКС",
path: "/map-test",
icon: <IconMap />,
component: <MapTest />,
drawer: true,
dashboard: true,
enabled: true,
},
{
label: "Монитор",
path: "/monitor",
icon: <IconDeviceDesktopAnalytics />,
component: <MonitorPage />,
drawer: true,
dashboard: true,
enabled: true,
},
{
label: "Table test",
path: "/table-test",
icon: <IconTable />,
component: <TableTest />,
drawer: true,
dashboard: true,
enabled: true,
},
{
label: "Component test",
path: "/component-test",
icon: <IconComponents />,
component: <ComponentTest />,
drawer: true,
dashboard: true,
enabled: true,
},
]
export {
pages
}

2
client/src/layouts/DashboardLayout.tsx

@ -1,11 +1,11 @@
import { AppShell, Avatar, Burger, Button, Flex, Group, Image, Menu, NavLink, rem, Text, useMantineColorScheme } from '@mantine/core'; import { AppShell, Avatar, Burger, Button, Flex, Group, Image, Menu, NavLink, rem, Text, useMantineColorScheme } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks'; import { useDisclosure } from '@mantine/hooks';
import { Outlet, useNavigate } from 'react-router-dom'; import { Outlet, useNavigate } from 'react-router-dom';
import { pages } from '../App';
import { IconChevronDown, IconLogout, IconSettings, IconMoon, IconSun } from '@tabler/icons-react'; import { IconChevronDown, IconLogout, IconSettings, IconMoon, IconSun } from '@tabler/icons-react';
import { getUserData, logout, useAuthStore } from '../store/auth'; import { getUserData, logout, useAuthStore } from '../store/auth';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { UserData } from '../interfaces/auth'; import { UserData } from '../interfaces/auth';
import { pages } from '../constants/app';
function DashboardLayout() { function DashboardLayout() {
const [mobileOpened, { toggle: toggleMobile }] = useDisclosure() const [mobileOpened, { toggle: toggleMobile }] = useDisclosure()

Loading…
Cancel
Save