dungnh/Face_Classify_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update [2] check role

Browse Source
This commit is contained in:
huyt 2022-01-14 22:02:12 +07:00
parent ad13ef2753
commit e52aac5bd4
14 changed files with 311 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/src/App.js
View File

@ -14,6 +14,7 @@ import 'antd/dist/antd.css';
import "./App.css";
import { Provider } from 'react-redux';
import store from './store';
import ReactRouter from './router/ReactRouter';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
@ -23,21 +24,7 @@ function App() {
<Router>
<Switch>
<Route path="/login" exact render={() => <Login />} />
<div className="m-grid m-grid--hor m-grid--root m-page">
<Header />
<MenuBar />
<div>
<Route exact path='/' component={SearchImage} />
<Route path='/import-image' component={ImportImage} />
<Route path='/user' component={User} />
<Route path='/role' component={Role} />
<Route path='/search-image' component={SearchImage} />
<Route path='/label-image' component={LabelImage} />
<Route path='/test' component={Test} />
<Route path="/list-famous" component={ListItem} />
</div>
{/* <Footer/> */}
</div>
<ReactRouter />
</Switch>
</Router>
</Provider>

21
app/src/components/ImportImg/ImportImage.js
View File

@ -12,6 +12,7 @@ import { Avatar, Tooltip, Image } from 'antd';
import {UserOutlined} from '@ant-design/icons';
import momment from 'moment';
import Select from "react-select";
import Store from '../../store';
class ImportImage extends Component {
constructor(props) {
super(props);
@ -32,7 +33,15 @@ class ImportImage extends Component {
dataSearch: "",
optionSelect: [{value: 1, label:"Facebook"}, {value: 2, label: "Tải lên"}],
valueSelected: {value: 2, label:"Tải lên"},
dataRole: Store.getState().role.role,
}
Store.subscribe(() => {
this.setState({
dataRole: Store.getState().role.role,
}, () => {
});
});
this.itemsPerPage = 5;
}
@ -187,14 +196,17 @@ class ImportImage extends Component {
<td>{value.origin_name}</td>
<td>{value.import_type === 1 ? "Facebook" : "Tải lên"}</td>
<td>{momment(value.created_time).format("DD-MM-YYYY")}</td>
{this.state.dataRole?.indexOf('import:edit') === -1 && this.state.dataRole?.indexOf('import:delete') === -1 ? "" :
<td>
{this.state.dataRole?.indexOf('import:edit') !== -1 ?
<Tooltip placement="top" title={"Sửa"}>
<button
onClick={() => this.onClickEdit(value)}
className="m-portlet__nav-link btn m-btn m-btn--hover-warning m-btn--icon m-btn--icon-only m-btn--pill" data-tip data-for="Edit" >
<i className="la la-edit" />
</button>
</Tooltip>
</Tooltip> : ""}
{this.state.dataRole?.indexOf('import:delete') !== -1 ?
<Tooltip placement="top" title={"Xoá"}>
<button
onClick={f => {
@ -216,7 +228,8 @@ class ImportImage extends Component {
<i className="la la-trash" />
</button>
</Tooltip>
</td>
: ""}
</td>}
</tr>
)
});
@ -285,6 +298,7 @@ class ImportImage extends Component {
</button>
</div>
</div>
{this.state.dataRole?.indexOf('import:upload') !== -1 ?
<div className="m-portlet__head-tools col-xl-1 d-flex align-items-center">
<button
onClick={(e) => {
@ -299,6 +313,7 @@ class ImportImage extends Component {
</span>
</button>
</div>
: "" }
</div>
{/*begin: Datatable */}
<table className="table table-striped- table-bordered table-hover table-checkable" id="m_table_1">
@ -309,7 +324,7 @@ class ImportImage extends Component {
<th>Tên ảnh</th>
<th>Loại ảnh</th>
<th>Ngày tải lên</th>
<th>Thao tác</th>
{this.state.dataRole?.indexOf('import:edit') === -1 && this.state.dataRole?.indexOf('import:delete') === -1 ? "" : <th>Thao tác</th>}
</tr>
</thead>
<tbody>{bulletedListImg}</tbody>

12
app/src/components/LabelImg/LabelImage.js
View File

@ -27,8 +27,7 @@ export default function LabelImage() {
const [loading, setLoading] = useState(true)
const token = useSelector(state => state.isLogin.access_token);
const role = useSelector(state => state.role);
const idCompany = useSelector(state => state.boxai);
const dataRole = useSelector(state => state.role.role);
console.log(token)
@ -170,7 +169,9 @@ export default function LabelImage() {
<td>{value.id}</td>
<td>{gender}</td>
<td>{value.birthday !== "" ? momment(value.birthday).format("DD-MM-YYYY") : ""}</td>
{(dataRole?.indexOf('person:edit') === -1 && dataRole?.indexOf('person:delete') === -1) ? "" :
<td>
{dataRole?.indexOf('person:edit') !== -1 ?
<Tooltip placement="top" title={"Sửa"}>
<button
onClick={() => onClickEdit(value)}
@ -178,6 +179,8 @@ export default function LabelImage() {
<i className="la la-edit" />
</button>
</Tooltip>
: ""}
{dataRole?.indexOf('person:delete') !== -1 ?
<Tooltip placement="top" title={"Xoá"}>
<button
onClick={f => {
@ -199,7 +202,8 @@ export default function LabelImage() {
<i className="la la-trash" />
</button>
</Tooltip>
</td>
: ""}
</td>}
</tr>
)
})
@ -309,7 +313,7 @@ export default function LabelImage() {
<th>FacebookID</th>
<th>Giới tính</th>
<th>Ngày sinh</th>
<th>Thao tác</th>
{(dataRole?.indexOf('person:edit') === -1 && dataRole?.indexOf('person:delete') === -1) ? "" : <th>Thao tác</th>}
</tr>
</thead>
<tbody>{data && tableRows(data)}</tbody>

11
app/src/components/List/ListItem.js
View File

@ -29,7 +29,7 @@ export default function ListItem() {
const [activePage, setActivePage] = useState(1)
const [totalItems, setTotalItems] = useState(0)
const token = useSelector(state => state.isLogin.access_token);
const dataRole = useSelector(state => state.role.role);
const [dataPost, setDataPost] = useState(initialDataPost)
const itemsPerPage = 5
@ -165,7 +165,9 @@ export default function ListItem() {
<td>{value.name}</td>
<td>{gender}</td>
<td>{value.birthday !== "" ? momment(value.birthday).format("DD-MM-YYYY") : ""}</td>
{(dataRole?.indexOf('famous:delete') === -1 && dataRole?.indexOf('famous:edit')) === -1 ? "" :
<td>
{dataRole?.indexOf('famous:edit') !== -1 ?
<Tooltip placement="top" title={"Sửa"}>
<button
onClick={() => onClickEdit(value)}
@ -173,6 +175,8 @@ export default function ListItem() {
<i className="la la-edit" />
</button>
</Tooltip>
: ""}
{dataRole?.indexOf('famous:delete') !== -1 ?
<Tooltip placement="top" title={"Xoá"}>
<button
onClick={f => {
@ -194,7 +198,8 @@ export default function ListItem() {
<i className="la la-trash" />
</button>
</Tooltip>
</td>
: ""}
</td>}
</tr>
)
})
@ -301,7 +306,7 @@ export default function ListItem() {
<th>Họ tên</th>
<th>Giới tính</th>
<th>Ngày sinh</th>
<th>Thao tác</th>
{(dataRole?.indexOf('famous:delete') === -1 && dataRole?.indexOf('famous:edit') === -1) ? "" : <th>Thao tác</th>}
</tr>
</thead>
<tbody>{data && tableRows(data)}</tbody>

2
app/src/components/Login/Login.js
View File

@ -64,11 +64,9 @@ class Login extends Component {
error: 0,
loadingbtn: false
}, () => {
Store.dispatch(role(data.data.roles));
})
localStorage.setItem("access_token", "Bearer " + data.access_token);
Store.dispatch(login("Bearer " + data.access_token));
Store.dispatch(setbox(data.data.company_id));
localStorage.setItem("username", data.data.username);
localStorage.setItem("obj_id", data.data._id);
window.location.href = "/";

2
app/src/components/Modal/ModaEditLabel.js
View File

@ -350,7 +350,7 @@ const ModalEditLabel = (props) => {
<Upload
customRequest = {uploadImage}
accept="image/*"
multiple={true}
// multiple={true}
beforeUpload={checkLength}
showUploadList={false}
disabled={disableBtn}

26
app/src/components/Modal/ModalRole.js
View File

@ -277,10 +277,18 @@ class ModalRole extends Component {
const dataModule = this.state.listLicense.map((value, index) => {
var lengthChecked = 0
console.log(this.state.listCheckOperation)
if (value !== null) {
var checkboxOperation = value.operations.map((val, i) => {
let codeOperation = val.split(':')
if (codeOperation[1] === "view") {
codeOperation[1] = "Xem"
} else if (codeOperation[1] === "edit"){
codeOperation[1] = "Sửa"
} else if (codeOperation[1] === "delete"){
codeOperation[1] = "Xóa"
} else if (codeOperation[1] === "upload"){
codeOperation[1] = "Tải lên"
}
if (this.state.listCheckOperation.indexOf(val) !== -1) {
lengthChecked++
}
@ -292,10 +300,24 @@ class ModalRole extends Component {
)
})
var nameTablee = ""
if (value.name === "user") {
nameTablee = "Quản lí người dùng"
} else if (value.name === "import") {
nameTablee = "Kho ảnh"
} else if (value.name === "search") {
nameTablee = "Tìm kiếm ảnh"
} else if (value.name === "famous") {
nameTablee = "Quản lí người nổi tiếng"
} else if (value.name === "person") {
nameTablee = "Gán nhãn"
} else if (value.name === "level") {
nameTablee = "Thiết lập quyền"
}
return (
<div className="m-accordion__item" key={index}>
<div className="m-accordion__item-head">
<span className="m-accordion__item-title">{value.name}</span>
<span className="m-accordion__item-title">{nameTablee}</span>
{/* <span className="m-accordion__item-title">{value.module.code} --- {lengthChecked} / {value.module.operation.length}</span> */}
{/* <span className="m-accordion__item-mode" /> */}
</div>

27
app/src/components/Role/Role.js
View File

@ -6,6 +6,7 @@ import { PulseLoader } from 'react-spinners';
import Pagination from "react-js-pagination";
import $ from 'jquery';
import { HOST } from '../../config/index';
import Store from '../../store';
class Role extends Component {
@ -22,7 +23,15 @@ class Role extends Component {
name: "",
description: ""
},
dataRole: Store.getState().role.role,
};
Store.subscribe(() => {
this.setState({
dataRole: Store.getState().role.role,
}, () => {
});
});
this.itemsPerPage = 10;
}
@ -131,7 +140,7 @@ class Role extends Component {
<tr key={(i + 1)}>
<td>{(i + this.state.offset + 1)}</td>
<td>{e.name}</td>
<td>
{/* <td>
{
e.active === 0
?
@ -140,8 +149,10 @@ class Role extends Component {
<span className="m-badge m-badge--accent m-badge--wide">Active {is_default}</span>
}
</td>
</td> */}
{(this.state.dataRole?.indexOf('level:edit') === -1 && this.state.dataRole?.indexOf('level:delete') === -1) ? "" :
<td>
{this.state.dataRole?.indexOf('level:edit') !== -1 ?
<button onClick={(e) => {
var data = this.state.crrDatas
var dataRole = {
@ -159,11 +170,12 @@ class Role extends Component {
}} className="m-portlet__nav-link btn m-btn m-btn--hover-warning m-btn--icon m-btn--icon-only m-btn--pill" data-tip data-for='Edit'>
<i className="la la-edit" />
</button>
: "" }
{/* <ReactTooltip id='Edit' type='dark' effect='solid'>
<span>{language[this.props.indexLanguage].tooltip.open_edit}</span>
</ReactTooltip> */}
{this.state.dataRole?.indexOf('level:delete') !== -1 ?
<button className="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" data-tip data-for='Delete'
onClick={v => {
v.preventDefault();
@ -182,10 +194,11 @@ class Role extends Component {
}}
><i className="la la-trash"></i></button>
: "" }
{/* <ReactTooltip id='Delete' type='dark' effect='solid'>
<span>{language[this.props.indexLanguage].tooltip.open_delete}</span>
</ReactTooltip> */}
</td>
</td>}
</tr>
)
});
@ -205,7 +218,7 @@ class Role extends Component {
<div className="m-portlet__head-caption pl-3">
<div className="m-portlet__head-title">
<h3 className="m-portlet__head-text">
Quyền
Thiết lập quyền
</h3>
</div>
</div>
@ -244,8 +257,8 @@ class Role extends Component {
<tr>
<th style={{ 'verticalAlign': 'middle', 'width': '100px' }}>STT</th>
<th style={{ 'verticalAlign': 'middle' }}>Tên</th>
<th style={{ 'verticalAlign': 'middle', 'width': '200px' }}>Trạng thái</th>
<th style={{ 'verticalAlign': 'middle', 'width': '150px' }}>Thao tác</th>
{/* <th style={{ 'verticalAlign': 'middle', 'width': '200px' }}>Trạng thái</th> */}
{(this.state.dataRole?.indexOf('level:edit') === -1 && this.state.dataRole?.indexOf('level:delete') === -1) ? "" : <th style={{ 'verticalAlign': 'middle', 'width': '150px' }}>Thao tác</th>}
</tr>
</thead>
<tbody>

18
app/src/components/SearchImg/SearchImage.js
View File

@ -8,8 +8,7 @@ import Pagination from "react-js-pagination";
import { PulseLoader } from 'react-spinners';
import swal from 'sweetalert';
import { HOST } from '../../config/index';
import Store from '../../store';
class SearchImage extends Component {
constructor(props) {
super(props);
@ -39,7 +38,17 @@ class SearchImage extends Component {
showFirst: 0,
showLast: 0,
totalLength: 0,
dataRole: Store.getState().role.role,
isLogin: Store.getState().isLogin.isLogin,
};
Store.subscribe(() => {
this.setState({
isLogin: Store.getState().isLogin.isLogin,
dataRole: Store.getState().role.role,
}, () => {
});
});
this.onchange = this.onchange.bind(this);
this.closeModal = this.closeModal.bind(this);
@ -338,11 +347,6 @@ class SearchImage extends Component {
render() {
// if (this.state.isLogin === false) {
// return (
// <Redirect to={'/login'} />
// )
// }
let rsImages = this.state.nimages.map((value, index) => {
var item_active = ""
if (index === 0) {

2
app/src/components/Test/Test.js
View File

@ -46,7 +46,7 @@ export default function Test() {
<div className="m-portlet__head-caption">
<div className="m-portlet__head-title">
<h3 className="m-portlet__head-text">
Test
Độ chính xác
</h3>
</div>
</div>

26
app/src/components/User/User.js
View File

@ -28,7 +28,7 @@ export default function User() {
const [showModalPassword, setShowModalPassword] = useState(false)
const [dataEdit, setDataEdit] = useState(null)
const token = useSelector(state => state.isLogin.access_token);
const dataRole = useSelector(state => state.role.role);
@ -200,21 +200,25 @@ export default function User() {
<span className="m-badge m-badge--accent m-badge--wide">Hoạt động</span>
}
</td>
{(dataRole?.indexOf('user:edit') === -1 && dataRole?.indexOf('user:delete') === -1) ? "" :
<td>
{dataRole?.indexOf('user:edit') !== -1 ?
<Tooltip placement="top" title={"Sửa"}>
<button
onClick={() => onClickEdit(value)}
className="m-portlet__nav-link btn m-btn m-btn--hover-warning m-btn--icon m-btn--icon-only m-btn--pill" data-tip data-for="Edit" >
<i className="la la-edit" />
</button>
</Tooltip>
</Tooltip> : "" }
{dataRole?.indexOf('user:edit') !== -1 ?
<Tooltip placement="top" title={"Đổi mật khẩu"}>
<button
onClick={() => onClickPassword(value)}
className="m-portlet__nav-link btn m-btn m-btn--hover-warning m-btn--icon m-btn--icon-only m-btn--pill" data-tip data-for="Edit" >
<i className="fa flaticon-lock" />
</button>
</Tooltip>
</Tooltip> : "" }
{dataRole?.indexOf('user:delete') !== -1 ?
<Tooltip placement="top" title={"Xoá"}>
<button
onClick={f => {
@ -235,8 +239,8 @@ export default function User() {
className="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" data-tip data-for="Edit" >
<i className="la la-trash" />
</button>
</Tooltip>
</td>
</Tooltip> : "" }
</td> }
</tr>
)
})
@ -380,17 +384,7 @@ export default function User() {
<th style={{ 'verticalAlign': 'middle' }}>Ngày sinh</th>
<th style={{ 'verticalAlign': 'middle' }}>Số điện thoại</th>
<th style={{ 'verticalAlign': 'middle' }}>Trạng thái</th>
<th style={{ 'verticalAlign': 'middle', 'width': '150px' }}>Thao tác</th>
{/* {
this.state.dataRole.indexOf(this.state.type + '/' + nameTab + ':insert_or_update') !== -1
||
this.state.dataRole.indexOf(this.state.type + '/' + nameTab + ':delete') !== -1
?
<th style={{ 'verticalAlign': 'middle', 'width': '150px' }}>{language[this.props.indexLanguage].textTable.action}</th>
:
""
} */}
{(dataRole?.indexOf('user:edit') === -1 && dataRole?.indexOf('user:delete') === -1) ? "" : <th style={{ 'verticalAlign': 'middle', 'width': '150px' }}>Thao tác</th>}
</tr>
</thead>
<tbody>

18
app/src/components/layouts/Header.js
View File

@ -3,6 +3,9 @@ import React, { Component } from 'react';
import { withRouter } from 'react-router';
import Store from '../../store';
import { HOST } from '../../config';
import { role } from '../../actions/role';
import { setbox } from '../../actions/boxai';
import { Redirect } from 'react-router-dom';
class Header extends Component {
constructor(props) {
super(props);
@ -11,6 +14,7 @@ class Header extends Component {
obj_id : localStorage.getItem('obj_id'),
isLogin: Store.getState().isLogin.isLogin,
access_token: Store.getState().isLogin.access_token,
full_name: ""
};
}
@ -31,8 +35,11 @@ class Header extends Component {
return response.json()
}).then(data => {
if (data.status === 10000) {
// Store.dispatch(setbox(data.data.company_id));
console.log(data)
Store.dispatch(setbox(data.data.company_id));
Store.dispatch(role(data.data.roles));
this.setState({
full_name: data.data.full_name
})
}
}).catch((error) => {
console.log(error)
@ -63,6 +70,13 @@ class Header extends Component {
render() {
if (this.state.isLogin === false) {
return (
<Redirect to={'/login'} />
)
}
return (
<header id="m_header" className="m-grid__item m-header" m-minimize="minimize" m-minimize-mobile="minimize" m-minimize-offset={200} m-minimize-mobile-offset={200}>
<div className="m-container m-container--fluid m-container--full-height pr-4 pl-4">

135
app/src/components/layouts/MenuBar.js
View File

@ -8,18 +8,18 @@ class MenuBar extends Component {
super(props);
this.state = {
type: '',
dataRole: Store.getState().role,
dataRole: Store.getState().role.role,
}
Store.subscribe(() => {
this.setState({
isLogin: Store.getState().isLogin.isLogin,
dataRole: Store.getState().role,
dataRole: Store.getState().role.role,
}, () => {
});
});
}
@ -33,7 +33,7 @@ class MenuBar extends Component {
render() {
var active = '';
console.log(this.state.dataRole)
return (
@ -45,78 +45,91 @@ class MenuBar extends Component {
{/* <h4 className="m-menu__section-text">Departments</h4> */}
<i className="m-menu__section-icon flaticon-more-v3" />
</li>
<li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
<NavLink to="/search-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<i className="m-menu__link-icon flaticon-search-1"/>
<span className="m-menu__link-title">
<span className="m-menu__link-wrap">
<span className="m-menu__link-text">Tìm kiếm</span>
{this.state.dataRole?.indexOf('search:view') !== -1 ?
<li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
<NavLink to="/search-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<i className="m-menu__link-icon flaticon-search-1" />
<span className="m-menu__link-title">
<span className="m-menu__link-wrap">
<span className="m-menu__link-text">Tìm kiếm</span>
</span>
</span>
</span>
</NavLink>
</li>
</NavLink>
</li>
: ""}
<li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
<NavLink to="/import-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<i className="m-menu__link-icon flaticon-tabs" />
<span className="m-menu__link-title">
<span className="m-menu__link-wrap">
<span className="m-menu__link-text">Kho ảnh</span>
{this.state.dataRole?.indexOf('import:view') !== -1 ?
<li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
<NavLink to="/import-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<i className="m-menu__link-icon flaticon-tabs" />
<span className="m-menu__link-title">
<span className="m-menu__link-wrap">
<span className="m-menu__link-text">Kho ảnh</span>
</span>
</span>
</span>
</NavLink>
</li>
<li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
<NavLink to="/list-famous" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<i className="m-menu__link-icon flaticon-avatar" />
<span className="m-menu__link-title">
<span className="m-menu__link-wrap">
<span className="m-menu__link-text">Người nổi tiếng</span>
</span>
</span>
</NavLink>
</li>
</NavLink>
</li>
: ""}
<li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
<NavLink to="/label-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<i className="m-menu__link-icon flaticon-delete" />
<span className="m-menu__link-title">
<span className="m-menu__link-wrap">
<span className="m-menu__link-text">Gán nhãn</span>
{this.state.dataRole?.indexOf('famous:view') !== -1 ?
<li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
<NavLink to="/list-famous" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<i className="m-menu__link-icon flaticon-avatar" />
<span className="m-menu__link-title">
<span className="m-menu__link-wrap">
<span className="m-menu__link-text">Người nổi tiếng</span>
</span>
</span>
</span>
</NavLink>
</li>
</NavLink>
</li>
: ""}
<li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
<NavLink to="/user" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<i className="m-menu__link-icon flaticon-users" />
<span className="m-menu__link-title">
<span className="m-menu__link-wrap">
<span className="m-menu__link-text">Quản lí người dùng</span>
{this.state.dataRole?.indexOf('person:view') !== -1 ?
<li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
<NavLink to="/label-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<i className="m-menu__link-icon flaticon-delete" />
<span className="m-menu__link-title">
<span className="m-menu__link-wrap">
<span className="m-menu__link-text">Gán nhãn</span>
</span>
</span>
</span>
</NavLink>
</li>
</NavLink>
</li>
: ""}
<li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
<NavLink to="/role" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<i className="m-menu__link-icon flaticon-map" />
<span className="m-menu__link-title">
<span className="m-menu__link-wrap">
<span className="m-menu__link-text">Quyền</span>
{this.state.dataRole?.indexOf('user:view') !== -1 ?
<li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
<NavLink to="/user" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<i className="m-menu__link-icon flaticon-users" />
<span className="m-menu__link-title">
<span className="m-menu__link-wrap">
<span className="m-menu__link-text">Quản lí người dùng</span>
</span>
</span>
</span>
</NavLink>
</li>
</NavLink>
</li>
: ""}
{this.state.dataRole?.indexOf('level:view') !== -1 ?
<li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
<NavLink to="/role" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<i className="m-menu__link-icon flaticon-map" />
<span className="m-menu__link-title">
<span className="m-menu__link-wrap">
<span className="m-menu__link-text">Thiết lập quyền</span>
</span>
</span>
</NavLink>
</li>
: ""}
<li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
<NavLink to="/test" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<i className="m-menu__link-icon flaticon-edit" />
<span className="m-menu__link-title">
<span className="m-menu__link-wrap">
<span className="m-menu__link-text">Test</span>
<span className="m-menu__link-text">Độ chính xác</span>
</span>
</span>
</NavLink>

118
app/src/router/ReactRouter.js Normal file
View File

@ -0,0 +1,118 @@
import React, { Component } from 'react';
import { withRouter } from 'react-router';
import { Route } from "react-router-dom";
import { logout } from '../actions/isLogin';
import Footer from '../components/layouts/Footer';
import Header from '../components/layouts/Header';
//Layout
import { HOST_CLOUD } from '../config';
import Store from '../store';
import ImportImage from '../components/ImportImg/ImportImage';
import LabelImage from '../components/LabelImg/LabelImage';
import SearchImage from '../components/SearchImg/SearchImage';
import Role from '../components/Role/Role';
import User from '../components/User/User';
import Test from '../components/Test/Test';
import MenuBar from '../components/layouts/MenuBar'
import ListItem from '../components/List/ListItem';
class ReactRouter extends Component {
constructor(props) {
super(props);
this.state = {
dataRole: Store.getState().role.role,
}
Store.subscribe(() => {
this.setState({
dataRole: Store.getState().role.role,
}, () => {
});
});
}
render() {
return (
<div className="m-grid m-grid--hor m-grid--root m-page">
<Header />
<MenuBar />
{
this.state.dataRole?.indexOf('search:view') !== -1
?
<>
<Route exact path='/' component={SearchImage} />
</>
:
''
}
{
this.state.dataRole?.indexOf('search:view') !== -1
?
<>
<Route path='/search-image' component={SearchImage} />
</>
:
''
}
{
this.state.dataRole?.indexOf('import:view') !== -1
?
<>
<Route path='/import-image' component={ImportImage} />
</>
:
''
}
{
this.state.dataRole?.indexOf('person:view') !== -1
?
<>
<Route path='/label-image' component={LabelImage} />
</>
:
''
}
{
this.state.dataRole?.indexOf('level:view') !== -1
?
<>
<Route path='/role' component={Role} />
</>
:
''
}
{
this.state.dataRole?.indexOf('user:view') !== -1
?
<>
<Route path='/user' component={User} />
</>
:
''
}
{/* {
this.state.dataRole?.indexOf('test:view') !== -1
?
<>
<Route path='/test' component={Test} />
</>
:
''
} */}
<Route path='/test' component={Test} />
{
this.state.dataRole?.indexOf('famous:view') !== -1
?
<>
<Route path='/list-famous' component={ListItem} />
</>
:
''
}
{/* <Footer /> */}
</div>
);
}
}
export default withRouter(ReactRouter);