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

Merge pull request 'update [2] check role' (#9) from feature/login-role into dev

Browse Source 
Reviewed-on: huyt/fsi_project#9
This commit is contained in:
huyt 2022-01-14 15:02:44 +00:00
commit 199611f7fa
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 "./App.css";
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import store from './store'; import store from './store';
import ReactRouter from './router/ReactRouter';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
@ -23,21 +24,7 @@ function App() {
<Router> <Router>
<Switch> <Switch>
<Route path="/login" exact render={() => <Login />} /> <Route path="/login" exact render={() => <Login />} />
<div className="m-grid m-grid--hor m-grid--root m-page"> <ReactRouter />
<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>
</Switch> </Switch>
</Router> </Router>
</Provider> </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 {UserOutlined} from '@ant-design/icons';
import momment from 'moment'; import momment from 'moment';
import Select from "react-select"; import Select from "react-select";
import Store from '../../store';
class ImportImage extends Component { class ImportImage extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -32,7 +33,15 @@ class ImportImage extends Component {
dataSearch: "", dataSearch: "",
optionSelect: [{value: 1, label:"Facebook"}, {value: 2, label: "Tải lên"}], optionSelect: [{value: 1, label:"Facebook"}, {value: 2, label: "Tải lên"}],
valueSelected: {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; this.itemsPerPage = 5;
} }
@ -187,14 +196,17 @@ class ImportImage extends Component {
<td>{value.origin_name}</td> <td>{value.origin_name}</td>
<td>{value.import_type === 1 ? "Facebook" : "Tải lên"}</td> <td>{value.import_type === 1 ? "Facebook" : "Tải lên"}</td>
<td>{momment(value.created_time).format("DD-MM-YYYY")}</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> <td>
{this.state.dataRole?.indexOf('import:edit') !== -1 ?
<Tooltip placement="top" title={"Sửa"}> <Tooltip placement="top" title={"Sửa"}>
<button <button
onClick={() => this.onClickEdit(value)} 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" > 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" /> <i className="la la-edit" />
</button> </button>
</Tooltip> </Tooltip> : ""}
{this.state.dataRole?.indexOf('import:delete') !== -1 ?
<Tooltip placement="top" title={"Xoá"}> <Tooltip placement="top" title={"Xoá"}>
<button <button
onClick={f => { onClick={f => {
@ -216,7 +228,8 @@ class ImportImage extends Component {
<i className="la la-trash" /> <i className="la la-trash" />
</button> </button>
</Tooltip> </Tooltip>
</td> : ""}
</td>}
</tr> </tr>
) )
}); });
@ -285,6 +298,7 @@ class ImportImage extends Component {
</button> </button>
</div> </div>
</div> </div>
{this.state.dataRole?.indexOf('import:upload') !== -1 ?
<div className="m-portlet__head-tools col-xl-1 d-flex align-items-center"> <div className="m-portlet__head-tools col-xl-1 d-flex align-items-center">
<button <button
onClick={(e) => { onClick={(e) => {
@ -299,6 +313,7 @@ class ImportImage extends Component {
</span> </span>
</button> </button>
</div> </div>
: "" }
</div> </div>
{/*begin: Datatable */} {/*begin: Datatable */}
<table className="table table-striped- table-bordered table-hover table-checkable" id="m_table_1"> <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>Tên ảnh</th>
<th>Loại ảnh</th> <th>Loại ảnh</th>
<th>Ngày tải lên</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> </tr>
</thead> </thead>
<tbody>{bulletedListImg}</tbody> <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 [loading, setLoading] = useState(true)
const token = useSelector(state => state.isLogin.access_token); const token = useSelector(state => state.isLogin.access_token);
const role = useSelector(state => state.role); const dataRole = useSelector(state => state.role.role);
const idCompany = useSelector(state => state.boxai);
console.log(token) console.log(token)
@ -170,7 +169,9 @@ export default function LabelImage() {
<td>{value.id}</td> <td>{value.id}</td>
<td>{gender}</td> <td>{gender}</td>
<td>{value.birthday !== "" ? momment(value.birthday).format("DD-MM-YYYY") : ""}</td> <td>{value.birthday !== "" ? momment(value.birthday).format("DD-MM-YYYY") : ""}</td>
{(dataRole?.indexOf('person:edit') === -1 && dataRole?.indexOf('person:delete') === -1) ? "" :
<td> <td>
{dataRole?.indexOf('person:edit') !== -1 ?
<Tooltip placement="top" title={"Sửa"}> <Tooltip placement="top" title={"Sửa"}>
<button <button
onClick={() => onClickEdit(value)} onClick={() => onClickEdit(value)}
@ -178,6 +179,8 @@ export default function LabelImage() {
<i className="la la-edit" /> <i className="la la-edit" />
</button> </button>
</Tooltip> </Tooltip>
: ""}
{dataRole?.indexOf('person:delete') !== -1 ?
<Tooltip placement="top" title={"Xoá"}> <Tooltip placement="top" title={"Xoá"}>
<button <button
onClick={f => { onClick={f => {
@ -199,7 +202,8 @@ export default function LabelImage() {
<i className="la la-trash" /> <i className="la la-trash" />
</button> </button>
</Tooltip> </Tooltip>
</td> : ""}
</td>}
</tr> </tr>
) )
}) })
@ -309,7 +313,7 @@ export default function LabelImage() {
<th>FacebookID</th> <th>FacebookID</th>
<th>Giới tính</th> <th>Giới tính</th>
<th>Ngày sinh</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> </tr>
</thead> </thead>
<tbody>{data && tableRows(data)}</tbody> <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 [activePage, setActivePage] = useState(1)
const [totalItems, setTotalItems] = useState(0) 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 [dataPost, setDataPost] = useState(initialDataPost)
const itemsPerPage = 5 const itemsPerPage = 5
@ -165,7 +165,9 @@ export default function ListItem() {
<td>{value.name}</td> <td>{value.name}</td>
<td>{gender}</td> <td>{gender}</td>
<td>{value.birthday !== "" ? momment(value.birthday).format("DD-MM-YYYY") : ""}</td> <td>{value.birthday !== "" ? momment(value.birthday).format("DD-MM-YYYY") : ""}</td>
{(dataRole?.indexOf('famous:delete') === -1 && dataRole?.indexOf('famous:edit')) === -1 ? "" :
<td> <td>
{dataRole?.indexOf('famous:edit') !== -1 ?
<Tooltip placement="top" title={"Sửa"}> <Tooltip placement="top" title={"Sửa"}>
<button <button
onClick={() => onClickEdit(value)} onClick={() => onClickEdit(value)}
@ -173,6 +175,8 @@ export default function ListItem() {
<i className="la la-edit" /> <i className="la la-edit" />
</button> </button>
</Tooltip> </Tooltip>
: ""}
{dataRole?.indexOf('famous:delete') !== -1 ?
<Tooltip placement="top" title={"Xoá"}> <Tooltip placement="top" title={"Xoá"}>
<button <button
onClick={f => { onClick={f => {
@ -194,7 +198,8 @@ export default function ListItem() {
<i className="la la-trash" /> <i className="la la-trash" />
</button> </button>
</Tooltip> </Tooltip>
</td> : ""}
</td>}
</tr> </tr>
) )
}) })
@ -301,7 +306,7 @@ export default function ListItem() {
<th>Họ tên</th> <th>Họ tên</th>
<th>Giới tính</th> <th>Giới tính</th>
<th>Ngày sinh</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> </tr>
</thead> </thead>
<tbody>{data && tableRows(data)}</tbody> <tbody>{data && tableRows(data)}</tbody>

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

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

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

@ -350,7 +350,7 @@ const ModalEditLabel = (props) => {
<Upload <Upload
customRequest = {uploadImage} customRequest = {uploadImage}
accept="image/*" accept="image/*"
multiple={true} // multiple={true}
beforeUpload={checkLength} beforeUpload={checkLength}
showUploadList={false} showUploadList={false}
disabled={disableBtn} 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) => { const dataModule = this.state.listLicense.map((value, index) => {
var lengthChecked = 0 var lengthChecked = 0
console.log(this.state.listCheckOperation)
if (value !== null) { if (value !== null) {
var checkboxOperation = value.operations.map((val, i) => { var checkboxOperation = value.operations.map((val, i) => {
let codeOperation = val.split(':') 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) { if (this.state.listCheckOperation.indexOf(val) !== -1) {
lengthChecked++ 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 ( return (
<div className="m-accordion__item" key={index}> <div className="m-accordion__item" key={index}>
<div className="m-accordion__item-head"> <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-title">{value.module.code} --- {lengthChecked} / {value.module.operation.length}</span> */}
{/* <span className="m-accordion__item-mode" /> */} {/* <span className="m-accordion__item-mode" /> */}
</div> </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 Pagination from "react-js-pagination";
import $ from 'jquery'; import $ from 'jquery';
import { HOST } from '../../config/index'; import { HOST } from '../../config/index';
import Store from '../../store';
class Role extends Component { class Role extends Component {
@ -22,7 +23,15 @@ class Role extends Component {
name: "", name: "",
description: "" description: ""
}, },
dataRole: Store.getState().role.role,
}; };
Store.subscribe(() => {
this.setState({
dataRole: Store.getState().role.role,
}, () => {
});
});
this.itemsPerPage = 10; this.itemsPerPage = 10;
} }
@ -131,7 +140,7 @@ class Role extends Component {
<tr key={(i + 1)}> <tr key={(i + 1)}>
<td>{(i + this.state.offset + 1)}</td> <td>{(i + this.state.offset + 1)}</td>
<td>{e.name}</td> <td>{e.name}</td>
<td> {/* <td>
{ {
e.active === 0 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> <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> <td>
{this.state.dataRole?.indexOf('level:edit') !== -1 ?
<button onClick={(e) => { <button onClick={(e) => {
var data = this.state.crrDatas var data = this.state.crrDatas
var dataRole = { 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'> }} 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" /> <i className="la la-edit" />
</button> </button>
: "" }
{/* <ReactTooltip id='Edit' type='dark' effect='solid'> {/* <ReactTooltip id='Edit' type='dark' effect='solid'>
<span>{language[this.props.indexLanguage].tooltip.open_edit}</span> <span>{language[this.props.indexLanguage].tooltip.open_edit}</span>
</ReactTooltip> */} </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' <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 => { onClick={v => {
v.preventDefault(); v.preventDefault();
@ -182,10 +194,11 @@ class Role extends Component {
}} }}
><i className="la la-trash"></i></button> ><i className="la la-trash"></i></button>
: "" }
{/* <ReactTooltip id='Delete' type='dark' effect='solid'> {/* <ReactTooltip id='Delete' type='dark' effect='solid'>
<span>{language[this.props.indexLanguage].tooltip.open_delete}</span> <span>{language[this.props.indexLanguage].tooltip.open_delete}</span>
</ReactTooltip> */} </ReactTooltip> */}
</td> </td>}
</tr> </tr>
) )
}); });
@ -205,7 +218,7 @@ class Role extends Component {
<div className="m-portlet__head-caption pl-3"> <div className="m-portlet__head-caption pl-3">
<div className="m-portlet__head-title"> <div className="m-portlet__head-title">
<h3 className="m-portlet__head-text"> <h3 className="m-portlet__head-text">
Quyền Thiết lập quyền
</h3> </h3>
</div> </div>
</div> </div>
@ -244,8 +257,8 @@ class Role extends Component {
<tr> <tr>
<th style={{ 'verticalAlign': 'middle', 'width': '100px' }}>STT</th> <th style={{ 'verticalAlign': 'middle', 'width': '100px' }}>STT</th>
<th style={{ 'verticalAlign': 'middle' }}>Tên</th> <th style={{ 'verticalAlign': 'middle' }}>Tên</th>
<th style={{ 'verticalAlign': 'middle', 'width': '200px' }}>Trạng thái</th> {/* <th style={{ 'verticalAlign': 'middle', 'width': '200px' }}>Trạng thái</th> */}
<th style={{ 'verticalAlign': 'middle', 'width': '150px' }}>Thao tác</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> </tr>
</thead> </thead>
<tbody> <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 { PulseLoader } from 'react-spinners';
import swal from 'sweetalert'; import swal from 'sweetalert';
import { HOST } from '../../config/index'; import { HOST } from '../../config/index';
import Store from '../../store';
class SearchImage extends Component { class SearchImage extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -39,7 +38,17 @@ class SearchImage extends Component {
showFirst: 0, showFirst: 0,
showLast: 0, showLast: 0,
totalLength: 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.onchange = this.onchange.bind(this);
this.closeModal = this.closeModal.bind(this); this.closeModal = this.closeModal.bind(this);
@ -338,11 +347,6 @@ class SearchImage extends Component {
render() { render() {
// if (this.state.isLogin === false) {
// return (
// <Redirect to={'/login'} />
// )
// }
let rsImages = this.state.nimages.map((value, index) => { let rsImages = this.state.nimages.map((value, index) => {
var item_active = "" var item_active = ""
if (index === 0) { 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-caption">
<div className="m-portlet__head-title"> <div className="m-portlet__head-title">
<h3 className="m-portlet__head-text"> <h3 className="m-portlet__head-text">
Test Độ chính xác
</h3> </h3>
</div> </div>
</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 [showModalPassword, setShowModalPassword] = useState(false)
const [dataEdit, setDataEdit] = useState(null) 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> <span className="m-badge m-badge--accent m-badge--wide">Hoạt động</span>
} }
</td> </td>
{(dataRole?.indexOf('user:edit') === -1 && dataRole?.indexOf('user:delete') === -1) ? "" :
<td> <td>
{dataRole?.indexOf('user:edit') !== -1 ?
<Tooltip placement="top" title={"Sửa"}> <Tooltip placement="top" title={"Sửa"}>
<button <button
onClick={() => onClickEdit(value)} 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" > 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" /> <i className="la la-edit" />
</button> </button>
</Tooltip> </Tooltip> : "" }
{dataRole?.indexOf('user:edit') !== -1 ?
<Tooltip placement="top" title={"Đổi mật khẩu"}> <Tooltip placement="top" title={"Đổi mật khẩu"}>
<button <button
onClick={() => onClickPassword(value)} 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" > 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" /> <i className="fa flaticon-lock" />
</button> </button>
</Tooltip> </Tooltip> : "" }
{dataRole?.indexOf('user:delete') !== -1 ?
<Tooltip placement="top" title={"Xoá"}> <Tooltip placement="top" title={"Xoá"}>
<button <button
onClick={f => { 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" > 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" /> <i className="la la-trash" />
</button> </button>
</Tooltip> </Tooltip> : "" }
</td> </td> }
</tr> </tr>
) )
}) })
@ -380,17 +384,7 @@ export default function User() {
<th style={{ 'verticalAlign': 'middle' }}>Ngày sinh</th> <th style={{ 'verticalAlign': 'middle' }}>Ngày sinh</th>
<th style={{ 'verticalAlign': 'middle' }}>Số điện thoại</th> <th style={{ 'verticalAlign': 'middle' }}>Số điện thoại</th>
<th style={{ 'verticalAlign': 'middle' }}>Trạng thái</th> <th style={{ 'verticalAlign': 'middle' }}>Trạng thái</th>
<th style={{ 'verticalAlign': 'middle', 'width': '150px' }}>Thao tác</th> {(dataRole?.indexOf('user:edit') === -1 && dataRole?.indexOf('user:delete') === -1) ? "" : <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>
:
""
} */}
</tr> </tr>
</thead> </thead>
<tbody> <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 { withRouter } from 'react-router';
import Store from '../../store'; import Store from '../../store';
import { HOST } from '../../config'; import { HOST } from '../../config';
import { role } from '../../actions/role';
import { setbox } from '../../actions/boxai';
import { Redirect } from 'react-router-dom';
class Header extends Component { class Header extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -11,6 +14,7 @@ class Header extends Component {
obj_id : localStorage.getItem('obj_id'), obj_id : localStorage.getItem('obj_id'),
isLogin: Store.getState().isLogin.isLogin, isLogin: Store.getState().isLogin.isLogin,
access_token: Store.getState().isLogin.access_token, access_token: Store.getState().isLogin.access_token,
full_name: ""
}; };
} }
@ -31,8 +35,11 @@ class Header extends Component {
return response.json() return response.json()
}).then(data => { }).then(data => {
if (data.status === 10000) { if (data.status === 10000) {
// Store.dispatch(setbox(data.data.company_id)); Store.dispatch(setbox(data.data.company_id));
console.log(data) Store.dispatch(role(data.data.roles));
this.setState({
full_name: data.data.full_name
})
} }
}).catch((error) => { }).catch((error) => {
console.log(error) console.log(error)
@ -63,6 +70,13 @@ class Header extends Component {
render() { render() {
if (this.state.isLogin === false) {
return (
<Redirect to={'/login'} />
)
}
return ( 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}> <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"> <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); super(props);
this.state = { this.state = {
type: '', type: '',
dataRole: Store.getState().role, dataRole: Store.getState().role.role,
} }
Store.subscribe(() => { Store.subscribe(() => {
this.setState({ this.setState({
isLogin: Store.getState().isLogin.isLogin, isLogin: Store.getState().isLogin.isLogin,
dataRole: Store.getState().role, dataRole: Store.getState().role.role,
}, () => { }, () => {
}); });
}); });
} }
@ -33,7 +33,7 @@ class MenuBar extends Component {
render() { render() {
var active = ''; var active = '';
console.log(this.state.dataRole) console.log(this.state.dataRole)
return ( return (
@ -45,78 +45,91 @@ class MenuBar extends Component {
{/* <h4 className="m-menu__section-text">Departments</h4> */} {/* <h4 className="m-menu__section-text">Departments</h4> */}
<i className="m-menu__section-icon flaticon-more-v3" /> <i className="m-menu__section-icon flaticon-more-v3" />
</li> </li>
<li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover"> {this.state.dataRole?.indexOf('search:view') !== -1 ?
<NavLink to="/search-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}> <li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
<i className="m-menu__link-icon flaticon-search-1"/> <NavLink to="/search-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<span className="m-menu__link-title"> <i className="m-menu__link-icon flaticon-search-1" />
<span className="m-menu__link-wrap"> <span className="m-menu__link-title">
<span className="m-menu__link-text">Tìm kiếm</span> <span className="m-menu__link-wrap">
<span className="m-menu__link-text">Tìm kiếm</span>
</span>
</span> </span>
</span> </NavLink>
</NavLink> </li>
</li> : ""}
<li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover"> {this.state.dataRole?.indexOf('import:view') !== -1 ?
<NavLink to="/import-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}> <li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
<i className="m-menu__link-icon flaticon-tabs" /> <NavLink to="/import-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<span className="m-menu__link-title"> <i className="m-menu__link-icon flaticon-tabs" />
<span className="m-menu__link-wrap"> <span className="m-menu__link-title">
<span className="m-menu__link-text">Kho ảnh</span> <span className="m-menu__link-wrap">
<span className="m-menu__link-text">Kho ảnh</span>
</span>
</span> </span>
</span> </NavLink>
</NavLink> </li>
</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>
<li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover"> {this.state.dataRole?.indexOf('famous:view') !== -1 ?
<NavLink to="/label-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}> <li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
<i className="m-menu__link-icon flaticon-delete" /> <NavLink to="/list-famous" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<span className="m-menu__link-title"> <i className="m-menu__link-icon flaticon-avatar" />
<span className="m-menu__link-wrap"> <span className="m-menu__link-title">
<span className="m-menu__link-text">Gán nhãn</span> <span className="m-menu__link-wrap">
<span className="m-menu__link-text">Người nổi tiếng</span>
</span>
</span> </span>
</span> </NavLink>
</NavLink> </li>
</li> : ""}
<li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover"> {this.state.dataRole?.indexOf('person:view') !== -1 ?
<NavLink to="/user" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}> <li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
<i className="m-menu__link-icon flaticon-users" /> <NavLink to="/label-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<span className="m-menu__link-title"> <i className="m-menu__link-icon flaticon-delete" />
<span className="m-menu__link-wrap"> <span className="m-menu__link-title">
<span className="m-menu__link-text">Quản lí người dùng</span> <span className="m-menu__link-wrap">
<span className="m-menu__link-text">Gán nhãn</span>
</span>
</span> </span>
</span> </NavLink>
</NavLink> </li>
</li> : ""}
<li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover"> {this.state.dataRole?.indexOf('user:view') !== -1 ?
<NavLink to="/role" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}> <li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
<i className="m-menu__link-icon flaticon-map" /> <NavLink to="/user" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<span className="m-menu__link-title"> <i className="m-menu__link-icon flaticon-users" />
<span className="m-menu__link-wrap"> <span className="m-menu__link-title">
<span className="m-menu__link-text">Quyền</span> <span className="m-menu__link-wrap">
<span className="m-menu__link-text">Quản lí người dùng</span>
</span>
</span> </span>
</span> </NavLink>
</NavLink> </li>
</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"> <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()}> <NavLink to="/test" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<i className="m-menu__link-icon flaticon-edit" /> <i className="m-menu__link-icon flaticon-edit" />
<span className="m-menu__link-title"> <span className="m-menu__link-title">
<span className="m-menu__link-wrap"> <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>
</span> </span>
</NavLink> </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);