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

Compare commits

base: dungnh:d87ed2c096fb964ccafe83c94c529ef4963d8603
Branches Tags
dungnh:main
dungnh:dev
...
compare: dungnh:f40c3eca9ff111a88ae3f388670bb6d94d2fe5d9
Branches Tags
dungnh:dev
dungnh:main

10 Commits
d87ed2c096 ... f40c3eca9f

Author SHA1 Message Date
Nguyễn Hải Dũng
f40c3eca9f fix socket 2022-12-23 11:21:51 +07:00
Nguyễn Hải Dũng
c8481e50ec socket 2022-12-23 11:05:40 +07:00
Nguyễn Hải Dũng
3c714fc8c5 fix avatar show 2022-12-22 18:31:09 +07:00
Nguyễn Hải Dũng
208a6b4e26 fix avatar 2022-12-21 16:03:45 +07:00
Nguyễn Hải Dũng
58ebf27cf1 fix link token 2022-12-21 14:26:16 +07:00
Nguyễn Hải Dũng
12daa7b687 fix token 2022-12-20 17:37:58 +07:00
Nguyễn Hải Dũng
ea6f927f87 menu 3 2022-12-20 17:25:21 +07:00
Nguyễn Hải Dũng
c8cae04cfc fix menu 2022-12-20 17:07:48 +07:00
Nguyễn Hải Dũng
061f3da142 fix ui 2022-12-20 17:00:23 +07:00
Nguyễn Hải Dũng
038e12820b style 2022-12-20 11:21:31 +07:00
15 changed files with 244 additions and 198 deletions
Show Stats Expand all files Collapse all files

3
app/.env
View File

@ -1,2 +1,3 @@
REACT_APP_HOST='http://api.face-classify.beetai.com' REACT_APP_HOST='http://api.face-classify.beetai.com'
REACT_APP_SOURCE_IMG=0 REACT_APP_SOURCE_IMG=1
WDS_SOCKET_PORT=0

6
app/src/App.css
View File

@ -39,9 +39,9 @@
.text-navbar { .text-navbar {
/* font-family: inherit; */ /* font-family: inherit; */
font-family: 'Roboto Condensed', sans-serif; font-family: 'Roboto Condensed', ;
font-weight: 900; font-weight: 400;
font-size: 15; font-size: 23;
color: #fff; color: #fff;
} }

24
app/src/components/AutoLogin/AutoLogin.js
View File

@ -3,6 +3,7 @@ import React, { Component } from 'react';
import "react-datepicker/dist/react-datepicker.css"; import "react-datepicker/dist/react-datepicker.css";
import { HOST } from '../../config/index'; import { HOST } from '../../config/index';
import Store from '../../store'; import Store from '../../store';
import { role } from '../../actions/role';
class AutoLogin extends Component { class AutoLogin extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -24,11 +25,30 @@ class AutoLogin extends Component {
if(this.props.match.params.token){ if(this.props.match.params.token){
localStorage.setItem("access_token", "Bearer " + this.props.match.params.token); localStorage.setItem("access_token", "Bearer " + this.props.match.params.token);
Store.dispatch(login("Bearer " + this.props.match.params.token)); Store.dispatch(login("Bearer " + this.props.match.params.token));
window.location.href = "/"; let data = fetch(`${HOST}/api/get_info`, {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': "Bearer " + this.props.match.params.token,
// 'Authorization': token,
},
}).then((response) => {
return response.json()
}).then((data) => {
if(data.status === 10000){
localStorage.setItem("roles", JSON.stringify(data.roles));
Store.dispatch(role(data.roles));
window.location.href = "/";
}else{
alert('Sai token!!!');
window.location.href = "/login";
}
})
} }
} }
render() { render() {
console.log('oke',this.props.match) console.log('oke',Store.getState().role.role)
return( return(
<div></div> <div></div>
) )

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

@ -241,7 +241,7 @@ class ImportImage extends Component {
<div className="m-portlet__head"> <div className="m-portlet__head">
<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="font-family-text">
Kho ảnh Kho ảnh
</h3> </h3>
</div> </div>
@ -259,7 +259,7 @@ class ImportImage extends Component {
}) })
}} }}
value={this.state.dataSearch} value={this.state.dataSearch}
id="inputSearch" className="form-control m-input" id="inputSearch" className="form-control m-input font-family-text"
placeholder="Tên ảnh..." placeholder="Tên ảnh..."
data-col-index={0} data-col-index={0}
/> />
@ -267,6 +267,7 @@ class ImportImage extends Component {
<div className="form-group m-form__group col-xl-2"> <div className="form-group m-form__group col-xl-2">
{process.env.REACT_APP_SOURCE_IMG === "1" ? {process.env.REACT_APP_SOURCE_IMG === "1" ?
<Select <Select
className="font-family-text"
placeholder={'Loại ảnh'} placeholder={'Loại ảnh'}
value={this.state.valueSelected} value={this.state.valueSelected}
onChange={this.changeHandleFilter} onChange={this.changeHandleFilter}
@ -282,10 +283,10 @@ class ImportImage extends Component {
activePage: 1 activePage: 1
}) })
}} }}
className="btn btn-accent m-btn m-btn--icon" id="m_search"> className="btn btn-primary m-btn m-btn--icon" style={{backgroundColor: '#2673b4'}} id="m_search">
<span> <span>
<i className="la la-search" /> <i className="la la-search" />
<span>Tìm kiếm</span> <span className="font-family-text">Tìm kiếm</span>
</span> </span>
</button> </button>
</div> </div>
@ -297,7 +298,7 @@ class ImportImage extends Component {
className="btn btn-secondary m-btn m-btn--icon" id="m_reset"> className="btn btn-secondary m-btn m-btn--icon" id="m_reset">
<span> <span>
<i className="la la-rotate-left" /> <i className="la la-rotate-left" />
<span>Tải lại</span> <span className="font-family-text">Tải lại</span>
</span> </span>
</button> </button>
</div> </div>
@ -310,19 +311,21 @@ class ImportImage extends Component {
modalUploadShow: true, modalUploadShow: true,
}) })
}} }}
className="btn btn-accent m-btn m-btn--custom m-btn--icon m-btn--pill m-btn--air"> style={{backgroundColor: '#2673b4'}}
className="btn btn-primary m-btn m-btn--custom m-btn--icon m-btn--pill m-btn--air">
<span> <span>
<i className="la la-plus" /> <i className="la la-plus" />
<span>Tải ảnh lên</span> <span className="font-family-text">Tải ảnh lên</span>
</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 font-family-text" id="m_table_1">
<thead>
<tr> <thead className='k-grid-header' role='rowgroup' style={{backgroundColor: '#2673b4'}}>
<tr className='font-family-text color' style={{color: 'white', fontWeight: 600, fontSize: 16,}}>
<th style={{width: "50px"}}>STT</th> <th style={{width: "50px"}}>STT</th>
<th>Ảnh</th> <th>Ảnh</th>
<th>Tên ảnh</th> <th>Tên ảnh</th>
@ -331,7 +334,7 @@ class ImportImage extends Component {
{this.state.dataRole?.indexOf('import:edit') === -1 && this.state.dataRole?.indexOf('import:delete') === -1 ? "" : <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 className="font-family-text">{bulletedListImg}</tbody>
</table> </table>
<Modalupload <Modalupload
show={this.state.modalUploadShow} show={this.state.modalUploadShow}

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

@ -264,7 +264,7 @@ export default function LabelImage() {
setActivePage(1) setActivePage(1)
getData(dataPost) getData(dataPost)
}} }}
className="btn btn-accent m-btn m-btn--icon" id="m_search"> className="btn btn-primary m-btn m-btn--icon" id="m_search" style={{backgroundColor: '#2673b4'}}>
<span> <span>
<i className="la la-search" /> <i className="la la-search" />
<span className='font-family-text'>Tìm kiếm</span> <span className='font-family-text'>Tìm kiếm</span>
@ -300,7 +300,7 @@ export default function LabelImage() {
setDataEdit(dataEdit) setDataEdit(dataEdit)
setShowModal(true) setShowModal(true)
}} }}
className="btn btn-accent m-btn m-btn--custom m-btn--icon m-btn--pill m-btn--air"> className="btn btn-primary m-btn m-btn--custom m-btn--icon m-btn--pill m-btn--air" style={{backgroundColor: '#2673b4'}}>
<span> <span>
<i className="la la-plus" /> <i className="la la-plus" />
<span>Thêm mới</span> <span>Thêm mới</span>
@ -310,8 +310,9 @@ export default function LabelImage() {
</div> </div>
{/*begin: Datatable */} {/*begin: Datatable */}
<table className="table table-striped- font-family-text color table-bordered table-hover table-checkable" id="m_table_1"> <table className="table table-striped- font-family-text color table-bordered table-hover table-checkable" id="m_table_1">
<thead>
<tr> <thead className='k-grid-header' role='rowgroup' style={{backgroundColor: '#2673b4'}}>
<tr className='font-family-text color' style={{color: 'white', fontWeight: 600, fontSize: 16,}}>
<th>Ảnh</th> <th>Ảnh</th>
<th>Họ tên</th> <th>Họ tên</th>
<th>FacebookID</th> <th>FacebookID</th>

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

@ -258,7 +258,7 @@ export default function ListItem() {
setActivePage(1) setActivePage(1)
getData(dataPost) getData(dataPost)
}} }}
className="btn btn-accent m-btn m-btn--icon" id="m_search"> className="btn btn-primary m-btn m-btn--icon" id="m_search" style={{backgroundColor: '#2673b4'}}>
<span> <span>
<i className="la la-search" /> <i className="la la-search" />
<span className='font-family-text'>Tìm kiếm</span> <span className='font-family-text'>Tìm kiếm</span>
@ -294,7 +294,8 @@ export default function ListItem() {
setDataEdit(dataEdit) setDataEdit(dataEdit)
setShowModal(true) setShowModal(true)
}} }}
className="btn btn-accent m-btn m-btn--custom m-btn--icon m-btn--pill m-btn--air"> style={{backgroundColor: '#2673b4'}}
className="btn btn-primary m-btn m-btn--custom m-btn--icon m-btn--pill m-btn--air">
<span> <span>
<i className="la la-plus" /> <i className="la la-plus" />
<span className='font-family-text'>Thêm mới</span> <span className='font-family-text'>Thêm mới</span>
@ -304,8 +305,8 @@ export default function ListItem() {
</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">
<thead> <thead className='k-grid-header' role='rowgroup' style={{backgroundColor: '#2673b4'}}>
<tr className='font-family-text color'> <tr className='font-family-text color' style={{color: 'white', fontWeight: 600, fontSize: 16,}}>
<th >Ảnh</th> <th >Ảnh</th>
<th>Họ tên</th> <th>Họ tên</th>
<th>Giới tính</th> <th>Giới tính</th>

7
app/src/components/Modal/ModalPassword.js
View File

@ -5,6 +5,7 @@ import React from 'react';
import { Button, Modal } from 'react-bootstrap'; import { Button, Modal } from 'react-bootstrap';
import swal from 'sweetalert'; import swal from 'sweetalert';
import { HOST } from '../../config/index'; import { HOST } from '../../config/index';
import Store from '../../store';
const ModalPassword = (props) => { const ModalPassword = (props) => {
const { show, onHide, obj_id } = props; const { show, onHide, obj_id } = props;
@ -14,7 +15,11 @@ const ModalPassword = (props) => {
const click_handle = async () => { const click_handle = async () => {
let dataPost = {password: form.getFieldValue('password')} let dataPost = {password: form.getFieldValue('password')}
console.log(dataPost, obj_id) console.log(dataPost, obj_id)
const result = await axios.patch(`${HOST}/api/users/${obj_id}/password`, { password: form.getFieldValue('password') }) const headers = {
'Content-Type': 'application/json',
'Authorization': Store.getState().isLogin.access_token,
}
const result = await axios.patch(`${HOST}/api/users/${obj_id}/password`,{headers} ,{ password: form.getFieldValue('password') })
if (result.data.status === 10000) { if (result.data.status === 10000) {
swal({ swal({
icon: 'success', icon: 'success',

6
app/src/components/Modal/ModalUser.js
View File

@ -53,7 +53,11 @@ const ModalUser = (props) => {
const getLevel = async () => { const getLevel = async () => {
let result = await axios.get(`${HOST}/api/levels/company/1`) const headers = {
'Content-Type': 'application/json',
'Authorization': Store.getState().isLogin.access_token,
}
let result = await axios.get(`${HOST}/api/levels/company/1`, {headers} )
if (result.data.status === 10000) { if (result.data.status === 10000) {
var listOptions = [] var listOptions = []
for (let i = 0; i < result.data.data.length; i++) { for (let i = 0; i < result.data.data.length; i++) {

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

@ -233,7 +233,7 @@ class Role extends Component {
}, },
modalRole: true, modalRole: true,
}); });
}} className="btn btn-accent m-btn m-btn--custom m-btn--icon m-btn--pill m-btn--air"> }} className="btn btn-primary m-btn--custom m-btn--icon" style={{backgroundColor:'#2673b4'}}>
<span> <span>
<i className="la la-plus" /> <i className="la la-plus" />
<span className='font-family-text'>Thêm mới</span> <span className='font-family-text'>Thêm mới</span>
@ -249,12 +249,12 @@ class Role extends Component {
<div className="m-widget1 col-xl-8 mx-auto"> <div className="m-widget1 col-xl-8 mx-auto">
<div className="table-responsive text-nowrap"> <div className="table-responsive text-nowrap">
<table className="table table-bordered font-family-text color table-hover table-checkable dataTable no-footer dtr-inline collapsed"> <table className="table table-bordered font-family-text color table-hover table-checkable dataTable no-footer dtr-inline collapsed">
<thead> <thead className='k-grid-header' role='rowgroup' style={{color: 'white', fontWeight: 600, fontSize: 16, backgroundColor: '#2673b4'}}>
<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> */}
{(this.state.dataRole?.indexOf('level:edit') === -1 && this.state.dataRole?.indexOf('level:delete') === -1) ? "" : <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>

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

@ -1,4 +1,5 @@
import { Card, Image as ImageAntd } from 'antd'; import { Card, Image as ImageAntd } from 'antd';
import Header from 'components/layouts/Header';
import Parser from 'html-react-parser'; import Parser from 'html-react-parser';
import $ from 'jquery'; import $ from 'jquery';
import React, { Component } from 'react'; import React, { Component } from 'react';
@ -407,130 +408,130 @@ class SearchImage extends Component {
return ( return (
<div className="m-portlet m-portlet--mobile pb-3"> <div className="m-portlet m-portlet--mobile pb-3">
<div className="m-portlet__head"> <div className="m-portlet__head">
<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="font-family-text color"> <h3 className="font-family-text color">
Tìm kiếm ảnh Tìm kiếm ảnh
</h3> </h3>
</div>
</div> </div>
</div> </div>
</div> <div className="m-portlet__body pt-2">
<div className="m-portlet__body pt-2"> <div className="m-grid__item m-grid__item--fluid m-wrapper" style={{ backgroundColor: 'white' }}>
<div className="m-grid__item m-grid__item--fluid m-wrapper" style={{ backgroundColor: 'white' }}> <div className="m-content mt-3-phone pd_phone_0 p-3">
<div className="m-content mt-3-phone pd_phone_0 p-3"> <div className="m-form m-form--fit m-form--label-align-right">
<div className="m-form m-form--fit m-form--label-align-right"> <div className="row m-0">
<div className="row m-0"> <div className="col-md-2 px-0">
<div className="col-md-2 px-0"> <img src="./img/photo-placeholder.png" id="previewImagePerson" className="text-center" style={{width: '100%', height: 'auto'}} alt="" />
<img src="./img/photo-placeholder.png" id="previewImagePerson" className="text-center" style={{width: '100%', height: 'auto'}} alt="" /> <div className="text-center p-8">
<div className="text-center p-8"> <ReactFileReader fileTypes={['image/png', 'image/jpg', 'image/jpeg']} base64={true} multipleFiles={false} handleFiles={this.onFilesChangeImagePerson} >
<ReactFileReader fileTypes={['image/png', 'image/jpg', 'image/jpeg']} base64={true} multipleFiles={false} handleFiles={this.onFilesChangeImagePerson} > <button style={{ marginTop: '10px' }} className={'btn m-btn--icon m-btn btn-default m-loader--success m-loader--right'}>
<button style={{ marginTop: '10px' }} className={'btn m-btn--icon m-btn btn-default m-loader--success m-loader--right'}> <span >
<span > <i className="la la-cloud-upload"></i>
<i className="la la-cloud-upload"></i> <span>Chọn ảnh</span>
<span>Chọn ảnh</span> </span>
</span> </button>
</button> </ReactFileReader>
</ReactFileReader>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" data-interval="false"> <div class="carousel-inner" data-interval="false">
{rsImages} {rsImages}
</div>
<a className={`carousel-control-prev ${rsImages.length <= 1 ? "d-none" : ""}`} href="#carouselExampleControls" role="button" data-slide="prev" onClick={() => this.handlePrevChange()}>
<span class="carousel-control-prev-icon fa fa-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a className={`carousel-control-next ${rsImages.length <= 1 ? "d-none" : ""}`} href="#carouselExampleControls" role="button" data-slide="next" onClick={() => this.handleNextChange()}>
<span class="carousel-control-next-icon fa fa-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> </div>
<a className={`carousel-control-prev ${rsImages.length <= 1 ? "d-none" : ""}`} href="#carouselExampleControls" role="button" data-slide="prev" onClick={() => this.handlePrevChange()}> <div style={{ marginTop: '10px', textAlign: 'left' }}>
<span class="carousel-control-prev-icon fa fa-chevron-left" aria-hidden="true"></span> <table>
<span class="sr-only">Previous</span> <tbody className='font-family-text'>
</a> <tr>
<a className={`carousel-control-next ${rsImages.length <= 1 ? "d-none" : ""}`} href="#carouselExampleControls" role="button" data-slide="next" onClick={() => this.handleNextChange()}> <td>
<span class="carousel-control-next-icon fa fa-chevron-right" aria-hidden="true"></span> <span>Số kết quả: </span>
<span class="sr-only">Next</span> </td>
</a> <td>
</div> <input className="form-control form-control-sm" type="number" step="1" min="1" name="m_table_1_length" value={this.state.valueRes} onChange={(event) => this.isChangeRes(event)} aria-controls="m_table_1" />
<div style={{ marginTop: '10px', textAlign: 'left' }}>
<table>
<tbody className='font-family-text'>
<tr>
<td>
<span>Số kết quả: </span>
</td>
<td>
<input className="form-control form-control-sm" type="number" step="1" min="1" name="m_table_1_length" value={this.state.valueRes} onChange={(event) => this.isChangeRes(event)} aria-controls="m_table_1" />
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<span>Tỷ lệ giống:</span> <span>Tỷ lệ giống:</span>
</td> </td>
<td> <td>
<label className="percent-simular" data-input="%"> <label className="percent-simular" data-input="%">
<input className="input-percent form-control form-control-sm" type="number" min="1" max="100" step="1" name="m_table_1_length" value={this.state.threshold} onChange={(event) => this.isChangeThreshold(event)} aria-controls="m_table_1" /> <input className="input-percent form-control form-control-sm" type="number" min="1" max="100" step="1" name="m_table_1_length" value={this.state.threshold} onChange={(event) => this.isChangeThreshold(event)} aria-controls="m_table_1" />
</label> </label>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<div style={{ marginTop: '10px' }} className="ml-2 mb-mobile-10">
<button
onClick={() => {
this.setState({
page_num: 1,
listHistory: []
}, () => {
this.getPerson();
})
}}
className="btn btn-sm btn-primary m-btn--icon" style={{backgroundColor: '#2673b4'}}>
<span>
<i className="la la-search" />
<span className='font-family-text'>Tìm kiếm</span>
</span>
</button>
</div>
</div>
<div style={{ marginTop: '10px' }} className="ml-2 mb-mobile-10">
<button
onClick={() => {
this.setState({
page_num: 1,
listHistory: []
}, () => {
this.getPerson();
})
}}
className="btn btn-accent m-btn m-btn--icon">
<span>
<i className="la la-search" />
<span>Tìm kiếm</span>
</span>
</button>
</div> </div>
</div> </div>
<div className="col-md-10">
</div> <div className="pl-2 row d-flex justify-content-between">
<div className="col-md-10"> <div>
<div className="pl-2 row d-flex justify-content-between"> <Pagination
<div> prevPageText='Trang trước'
<Pagination nextPageText='Trang sau'
prevPageText='Trang trước' firstPageText='Trang đầu'
nextPageText='Trang sau' lastPageText='Trang cuối'
firstPageText='Trang đầu' activePage={this.state.page_num}
lastPageText='Trang cuối' itemsCountPerPage={this.itemsPerPage}
activePage={this.state.page_num} totalItemsCount={this.state.totalLength}
itemsCountPerPage={this.itemsPerPage} pageRangeDisplayed={5}
totalItemsCount={this.state.totalLength} onChange={this.handlePageChange}
pageRangeDisplayed={5} />
onChange={this.handlePageChange} </div>
/> <div className="pull-right">
<div className='font-family-text'>Tổng kết quả <b>{this.state.totalLength}</b></div>
</div>
</div> </div>
<div className="pull-right">
<div className='font-family-text'>Tổng kết quả <b>{this.state.totalLength}</b></div> <div className='row-sm row pl-3 pr-3 pb-3'>
{bulletedImg}
<PulseLoader
// css={override}
sizeUnit={"px"}
size={12}
margin={'2px'}
color={'#36D7B7'}
loading={this.state.loading}
/>
</div> </div>
</div>
<div className='row-sm row pl-3 pr-3 pb-3'>
{bulletedImg}
<PulseLoader
// css={override}
sizeUnit={"px"}
size={12}
margin={'2px'}
color={'#36D7B7'}
loading={this.state.loading}
/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
); );
} }

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

@ -53,7 +53,7 @@ export default function Test() {
</div> </div>
<div className="m-portlet__body pt-2"> <div className="m-portlet__body pt-2">
<div className="pb-4 pt-4"> <div className="pb-4 pt-4">
<button type="button" onClick={() => test()} className="btn font-family-text btn-success">Test</button> <button type="button" onClick={() => test()} className="btn font-family-text btn-primary" style={{backgroundColor: '#2673b4'}}>Test</button>
</div> </div>
<PulseLoader <PulseLoader
// css={override} // css={override}

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

@ -354,7 +354,7 @@ export default function User() {
setActivePage(1) setActivePage(1)
getData(dataPost) getData(dataPost)
}} }}
className="btn btn-accent m-btn m-btn--icon" id="m_search"> className="btn btn-primary m-btn m-btn--icon" style={{backgroundColor: '#2673b4'}} id="m_search">
<span> <span>
<i className="la la-search" /> <i className="la la-search" />
<span className='font-family-text'>Tìm kiếm</span> <span className='font-family-text'>Tìm kiếm</span>
@ -377,8 +377,8 @@ export default function User() {
</div> </div>
<div className="table-responsive text-nowrap"> <div className="table-responsive text-nowrap">
<table className="table table-bordered font-family-text color table-hover table-checkable dataTable no-footer dtr-inline collapsed"> <table className="table table-bordered font-family-text color table-hover table-checkable dataTable no-footer dtr-inline collapsed">
<thead> <thead className='k-grid-header' role='rowgroup' style={{backgroundColor: '#2673b4'}}>
<tr> <tr className='font-family-text color' style={{color: 'white', fontWeight: 600, fontSize: 16,}}>
<th style={{ 'verticalAlign': 'middle', 'width': '80px' }}>STT</th> <th style={{ 'verticalAlign': 'middle', 'width': '80px' }}>STT</th>
<th style={{ 'verticalAlign': 'middle', 'width': '240px' }}>Tên đăng nhập</th> <th style={{ 'verticalAlign': 'middle', 'width': '240px' }}>Tên đăng nhập</th>
<th style={{ 'verticalAlign': 'middle', 'width': '280px' }}>Họ tên</th> <th style={{ 'verticalAlign': 'middle', 'width': '280px' }}>Họ tên</th>

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

@ -13,6 +13,7 @@ class Header extends Component {
username : localStorage.getItem('username'), username : localStorage.getItem('username'),
obj_id : localStorage.getItem('obj_id'), obj_id : localStorage.getItem('obj_id'),
isLogin: Store.getState().isLogin.isLogin, isLogin: Store.getState().isLogin.isLogin,
role: JSON.parse(localStorage.getItem('roles')),
access_token: Store.getState().isLogin.access_token, access_token: Store.getState().isLogin.access_token,
full_name: "" full_name: ""
}; };
@ -37,8 +38,11 @@ class Header extends Component {
}).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));
localStorage.setItem("roles", JSON.stringify(data.data.roles));
Store.dispatch(role(data.data.roles)); Store.dispatch(role(data.data.roles));
this.setState({ this.setState({
role: data.data.roles,
full_name: data.data.full_name full_name: data.data.full_name
}) })
} }
@ -130,51 +134,55 @@ class Header extends Component {
</div> </div>
</div> </div>
</li> </li>
<li className="m-nav__item m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light icon_logout" m-dropdown-toggle="click"> {
<a href="#" className="m-nav__link m-dropdown__toggle"> this.state.role?.indexOf('avatar:hidden') === -1 ? (
<span className="m-topbar__userpic"> <li className="m-nav__item m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light icon_logout" m-dropdown-toggle="click">
<img src="/img/photo-placeholder.png" className="m--img-rounded m--marginless m--img-centered" alt="" /> <a href="#" className="m-nav__link m-dropdown__toggle">
</span> <span className="m-topbar__userpic">
<span className="m-nav__link-icon m-topbar__usericon m--hide"> <img src="/img/photo-placeholder.png" className="m--img-rounded m--marginless m--img-centered" alt="" />
<span className="m-nav__link-icon-wrapper"><i className="flaticon-user-ok" /></span> </span>
</span> <span className="m-nav__link-icon m-topbar__usericon m--hide">
</a> <span className="m-nav__link-icon-wrapper"><i className="flaticon-user-ok" /></span>
<div className="m-dropdown__wrapper"> </span>
<span className="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust" /> </a>
<div className="m-dropdown__inner"> <div className="m-dropdown__wrapper">
<div className="m-dropdown__header m--align-center"> <span className="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust" />
<div className="m-card-user m-card-user--skin-light"> <div className="m-dropdown__inner">
<div className="m-card-user__pic"> <div className="m-dropdown__header m--align-center">
<img src="/img/photo-placeholder.png" className="m--img-rounded m--marginless" alt="" /> <div className="m-card-user m-card-user--skin-light">
</div> <div className="m-card-user__pic">
<div className="m-card-user__details"> <img src="/img/photo-placeholder.png" className="m--img-rounded m--marginless" alt="" />
<span className="font-family-text m-card-user__name m--font-weight-500">{this.state.username}</span> </div>
<div href="#/" className="m-card-user__email m--font-weight-300 m-link"><span className='font-family-text'>{this.state.full_name}</span></div> <div className="m-card-user__details">
<span className="font-family-text m-card-user__name m--font-weight-500">{this.state.username}</span>
<div href="#/" className="m-card-user__email m--font-weight-300 m-link"><span className='font-family-text'>{this.state.full_name}</span></div>
</div>
</div> </div>
</div>
<div className="m-dropdown__body">
<div className="m-dropdown__content">
<ul className="m-nav m-nav--skin-light">
<li className="m-nav__separator m-nav__separator--fit">
</li>
<li className="m-nav__item">
<a className="btn m-btn--pill btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder"
onClick={() => {
localStorage.removeItem("access_token");
window.location.href = "/login";
}}
><span className='font-family-text'>
Đăng Xuất
</span>
</a>
</li>
</ul>
</div>
</div>
</div> </div>
</div> </div>
<div className="m-dropdown__body"> </li>
<div className="m-dropdown__content"> ) : null
<ul className="m-nav m-nav--skin-light"> }
<li className="m-nav__separator m-nav__separator--fit">
</li>
<li className="m-nav__item">
<a className="btn m-btn--pill btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder"
onClick={() => {
localStorage.removeItem("access_token");
window.location.href = "/login";
}}
><span className='font-family-text'>
Đăng Xuất
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul> </ul>
</div> </div>
</div> </div>

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

@ -48,10 +48,10 @@ class MenuBar extends Component {
{this.state.dataRole?.indexOf('search:view') !== -1 ? {this.state.dataRole?.indexOf('search:view') !== -1 ?
<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="/search-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}> <NavLink to="/search-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<i className="text-navbar m-menu__link-icon flaticon-search-1" /> <i className="m-menu__link-icon fa fa-search" style={{color: 'white'}} />
<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="text-navbar m-menu__link-text">Tìm kiếm</span> <span className="text-navbar" style={{fontSize: 20, fontFamily: 'Roboto'}}>Tìm kiếm</span>
</span> </span>
</span> </span>
</NavLink> </NavLink>
@ -61,10 +61,10 @@ class MenuBar extends Component {
{this.state.dataRole?.indexOf('import:view') !== -1 ? {this.state.dataRole?.indexOf('import:view') !== -1 ?
<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="/import-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}> <NavLink to="/import-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<i className="text-navbar m-menu__link-icon flaticon-tabs" /> <i className="m-menu__link-icon fa fa-file-image" style={{color: 'white'}} />
<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="text-navbar m-menu__link-text text-navbar">Kho ảnh</span> <span className="text-navbar" style={{fontSize: 20, fontFamily: 'Roboto'}}>Kho ảnh</span>
</span> </span>
</span> </span>
</NavLink> </NavLink>
@ -74,10 +74,10 @@ class MenuBar extends Component {
{this.state.dataRole?.indexOf('famous:view') !== -1 ? {this.state.dataRole?.indexOf('famous:view') !== -1 ?
<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="/list-famous" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}> <NavLink to="/list-famous" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<i className="text-navbar m-menu__link-icon flaticon-avatar" /> <i className="m-menu__link-icon fa fa-user-tie mr-2" style={{color: 'white'}} />
<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="text-navbar m-menu__link-text">Người nổi tiếng</span> <span className="text-navbar" style={{fontSize: 20, fontFamily: 'Roboto'}}>Người nổi tiếng</span>
</span> </span>
</span> </span>
</NavLink> </NavLink>
@ -87,10 +87,10 @@ class MenuBar extends Component {
{this.state.dataRole?.indexOf('person:view') !== -1 ? {this.state.dataRole?.indexOf('person:view') !== -1 ?
<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="/label-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}> <NavLink to="/label-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<i className="text-navbar m-menu__link-icon flaticon-delete" /> <i className="m-menu__link-icon fa fa-tags" style={{color: 'white'}} />
<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="text-navbar m-menu__link-text">Gán nhãn</span> <span className="text-navbar" style={{fontSize: 20, fontFamily: 'Roboto'}}>Gán nhãn</span>
</span> </span>
</span> </span>
</NavLink> </NavLink>
@ -100,10 +100,10 @@ class MenuBar extends Component {
{this.state.dataRole?.indexOf('user:view') !== -1 ? {this.state.dataRole?.indexOf('user:view') !== -1 ?
<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="/user" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}> <NavLink to="/user" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<i className="text-navbar m-menu__link-icon flaticon-users" /> <i className="m-menu__link-icon fas fa-user-cog mr-2" style={{color: 'white'}} />
<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="text-navbar m-menu__link-text">Quản lý người dùng</span> <span className="text-navbar" style={{fontSize: 20, fontFamily: 'Roboto'}}>Quản lý người dùng</span>
</span> </span>
</span> </span>
</NavLink> </NavLink>
@ -113,10 +113,10 @@ class MenuBar extends Component {
{this.state.dataRole?.indexOf('level:view') !== -1 ? {this.state.dataRole?.indexOf('level:view') !== -1 ?
<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="/role" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}> <NavLink to="/role" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<i className="text-navbar m-menu__link-icon flaticon-map" /> <i className="m-menu__link-icon fa fa-sitemap" style={{color: 'white'}} />
<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="text-navbar m-menu__link-text">Thiết lập quyền</span> <span className="text-navbar" style={{fontSize: 20, fontFamily: 'Roboto'}}>Thiết lập quyền</span>
</span> </span>
</span> </span>
</NavLink> </NavLink>
@ -126,10 +126,10 @@ class MenuBar extends Component {
{this.state.dataRole?.indexOf('level:view') !== -1 ? {this.state.dataRole?.indexOf('level:view') !== -1 ?
<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="text-navbar m-menu__link-icon flaticon-edit" /> <i className="m-menu__link-icon fa fa-user-check" style={{color: 'white'}} />
<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="text-navbar m-menu__link-text">Độ chính xác</span> <span className="text-navbar" style={{fontSize: 20, fontFamily: 'Roboto'}}>Độ chính xác</span>
</span> </span>
</span> </span>
</NavLink> </NavLink>

4
app/src/reducers/role/index.js
View File

@ -1,7 +1,9 @@
import {ROLE} from '../../actions/role'; import {ROLE} from '../../actions/role';
let roles = JSON.parse(localStorage.getItem('roles'));
const initialState = { const initialState = {
role: null role: roles
}; };
export default function role(state = initialState, action) { export default function role(state = initialState, action) {
switch(action.type){ switch(action.type){