From 0b377d11c641fc845546be8b1f14cb2e67772254 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A4=D1=80=D0=BE=D0=BB=D0=BE=D0=B2?=
 <nikita.grigorevich@gmail.com>
Date: Fri, 3 Sep 2021 14:27:00 +0500
Subject: [PATCH] Add component \ Private for routing by roles

---
 src/App.js                                    |  2 +-
 src/components/Private/PrivateContent.jsx     | 24 ++++++++++++
 src/components/Private/PrivateMenuItem.jsx    | 11 ++++++
 src/components/{ => Private}/PrivateRoute.jsx |  0
 src/components/Private/index.ts               |  3 ++
 src/pages/Documents/menuItems.jsx             |  9 +++--
 src/pages/Measure/index.jsx                   |  4 +-
 src/pages/Well.jsx                            | 37 +++++++++----------
 8 files changed, 63 insertions(+), 27 deletions(-)
 create mode 100644 src/components/Private/PrivateContent.jsx
 create mode 100644 src/components/Private/PrivateMenuItem.jsx
 rename src/components/{ => Private}/PrivateRoute.jsx (100%)
 create mode 100644 src/components/Private/index.ts

diff --git a/src/App.js b/src/App.js
index 92c83ef..49ee5eb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,7 +8,7 @@ import locale from "antd/lib/locale/ru_RU"
 import Login from './pages/Login'
 import Main from './pages/Main'
 import { OpenAPI } from './services/api'
-import { PrivateRoute } from './components/PrivateRoute'
+import { PrivateRoute } from './components/Private'
 
 //OpenAPI.BASE = 'http://localhost:3000'
 OpenAPI.TOKEN = localStorage['token']
diff --git a/src/components/Private/PrivateContent.jsx b/src/components/Private/PrivateContent.jsx
new file mode 100644
index 0000000..878644f
--- /dev/null
+++ b/src/components/Private/PrivateContent.jsx
@@ -0,0 +1,24 @@
+const admins = ['администратор', 'админ', 'admin']
+
+export const isInRole = (roles) => {
+  if(!roles?.length)
+    return true
+  const role = localStorage['roleName']?.toLowerCase()
+  if(admins.indexOf(role) > -1)
+    return true
+  for(const r of roles)
+    if(r.toLowerCase() === role)
+      return true
+  return false
+}
+
+export const privateContent = (roles, children) => {
+  if(isInRole(roles))
+    return children
+  else
+    return null
+}
+
+export const PrivateContent = ({roles, children}) => {
+  return privateContent(roles, children)
+}
\ No newline at end of file
diff --git a/src/components/Private/PrivateMenuItem.jsx b/src/components/Private/PrivateMenuItem.jsx
new file mode 100644
index 0000000..070866f
--- /dev/null
+++ b/src/components/Private/PrivateMenuItem.jsx
@@ -0,0 +1,11 @@
+import { Menu } from "antd";
+import { isInRole } from './PrivateContent'
+
+export const PrivateMenuItem = ({ children, roles, ...other }) => {
+  if(!isInRole(roles))
+    return null
+
+  return <Menu.Item {...other}>
+      {children}
+    </Menu.Item>;
+}
diff --git a/src/components/PrivateRoute.jsx b/src/components/Private/PrivateRoute.jsx
similarity index 100%
rename from src/components/PrivateRoute.jsx
rename to src/components/Private/PrivateRoute.jsx
diff --git a/src/components/Private/index.ts b/src/components/Private/index.ts
new file mode 100644
index 0000000..c813da3
--- /dev/null
+++ b/src/components/Private/index.ts
@@ -0,0 +1,3 @@
+export {PrivateRoute} from './PrivateRoute'
+export {privateContent, PrivateContent} from './PrivateContent'
+export {PrivateMenuItem} from './PrivateMenuItem'
\ No newline at end of file
diff --git a/src/pages/Documents/menuItems.jsx b/src/pages/Documents/menuItems.jsx
index 59068a9..7abf3c7 100644
--- a/src/pages/Documents/menuItems.jsx
+++ b/src/pages/Documents/menuItems.jsx
@@ -1,10 +1,11 @@
-import { Menu } from "antd";
+//import { Menu } from "antd";
 import { FolderOutlined } from "@ant-design/icons";
 import { Link, Route} from "react-router-dom";
 import DocumentsTemplate from './DocumentsTemplate'
+import {PrivateMenuItem} from '../../components/Private'
 
 export const documentCategories = [
-  {id:1, key:'fluidService', title:'Растворный сервис'},
+  {id:1, key:'fluidService', title:'Растворный сервис'/*, roles:['ff']*/},
   {id:2, key:'cementing', title:'Цементирование'},
   {id:3, key:'nnb', title:'ННБ'},
   {id:4, key:'gti', title:'ГТИ'},
@@ -14,11 +15,11 @@ export const documentCategories = [
 ]
 
 const makeMenuItem = (keyValue, rootPath, title, other) => (
-  <Menu.Item className="ant-menu-item" 
+  <PrivateMenuItem className="ant-menu-item" 
     key={`${keyValue}`} 
     {...other}>
     <Link to={{pathname: `${rootPath}/${keyValue}`}}>{title}</Link>
-  </Menu.Item>)
+  </PrivateMenuItem>)
 
 const makeRouteItem = (keyValue, rootPath, other) => (
   <Route 
diff --git a/src/pages/Measure/index.jsx b/src/pages/Measure/index.jsx
index a0cb302..dcf4fb7 100644
--- a/src/pages/Measure/index.jsx
+++ b/src/pages/Measure/index.jsx
@@ -2,11 +2,11 @@ import { columnsMudDiagram} from './columnsMudDiagram'
 import { columnsDrillingFluid} from './columnsDrillingFluid'
 import { columnsNnb } from './columnsNnb'
 import { MeasureTable } from './MeasureTable'
-import { MeasureTable2 } from './MeasureTable2'
+//import { MeasureTable2 } from './MeasureTable2'
 
 export default function Measure({idWell}){
   return <>  
-    <MeasureTable2
+    <MeasureTable
       idWell={idWell}
       idCategory={1} 
       title='Замер бурового раствора'
diff --git a/src/pages/Well.jsx b/src/pages/Well.jsx
index a8f6e3e..2d7752d 100644
--- a/src/pages/Well.jsx
+++ b/src/pages/Well.jsx
@@ -17,6 +17,7 @@ import Measure from "./Measure";
 import { makeMenuItems } from "./Documents/menuItems";
 import WellOperations from "./WellOperations";
 import DrillingProgram from "./Documents/DrillingProgram";
+import {PrivateMenuItem} from '../components/Private'
 
 const { Content } = Layout;
 
@@ -26,30 +27,28 @@ export default function Well() {
 
   const { SubMenu } = Menu;
 
-  return (
-    <>
-      <Layout>
+  return <Layout>
         <Menu
           mode="horizontal"
           selectable={true}
           selectedKeys={[tab]}
           className="well_menu"
         >
-          <Menu.Item key="telemetry" icon={<FundViewOutlined />}>
+          <PrivateMenuItem key="telemetry" icon={<FundViewOutlined />}>
             <Link to={`${rootPath}/telemetry`}>Мониторинг</Link>
-          </Menu.Item>
-          <Menu.Item key="message" icon={<AlertOutlined />}>
-            <Link to={`${rootPath}/message`}>Сообщения</Link>
-          </Menu.Item>
-          <Menu.Item key="report" icon={<FilePdfOutlined />}>
+          </PrivateMenuItem>
+          <PrivateMenuItem key="message" icon={<AlertOutlined/>} roles={[]}>
+              <Link to={`${rootPath}/message`}>Сообщения</Link>
+          </PrivateMenuItem>
+          <PrivateMenuItem key="report" icon={<FilePdfOutlined />}>
             <Link to={`${rootPath}/report`}>Рапорт</Link>
-          </Menu.Item>
-          <Menu.Item key="operations" icon={<FolderOutlined />}>
+          </PrivateMenuItem>
+          <PrivateMenuItem key="operations" icon={<FolderOutlined />}>
             <Link to={`${rootPath}/operations/plan`}>Операции по скважине</Link>
-          </Menu.Item>
-          <Menu.Item key="archive" icon={<DatabaseOutlined />}>
+          </PrivateMenuItem>
+          <PrivateMenuItem key="archive" icon={<DatabaseOutlined />}>
             <Link to={`${rootPath}/archive`}>Архив</Link>
-          </Menu.Item>
+          </PrivateMenuItem>
           <SubMenu
             key="document"
             title={
@@ -65,12 +64,12 @@ export default function Well() {
           >
             {makeMenuItems(rootPath)}
           </SubMenu>
-          <Menu.Item key="measure" icon={<ExperimentOutlined />}>
+          <PrivateMenuItem key="measure" icon={<ExperimentOutlined />}>
             <Link to={`${rootPath}/measure`}>Измерения</Link>
-          </Menu.Item>
-          <Menu.Item key="drillingProgram" icon={<FolderOutlined />}>
+          </PrivateMenuItem>
+          <PrivateMenuItem key="drillingProgram" icon={<FolderOutlined />}>
             <Link to={`${rootPath}/drillingProgram`}>Программа бурения</Link>
-          </Menu.Item>
+          </PrivateMenuItem>
         </Menu>
 
         <Layout>
@@ -107,6 +106,4 @@ export default function Well() {
           </Content>
         </Layout>
       </Layout>
-    </>
-  );
 }