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

Merge pull request 'feature/login-role' (#10) from feature/login-role into dev

Browse Source 
Reviewed-on: huyt/fsi_project#10
This commit is contained in:
huyt 2022-01-14 16:11:19 +00:00
commit 8916e9622d
11 changed files with 209 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -281,6 +281,7 @@ export default function LabelImage() {
</button> </button>
</div> </div>
</div> </div>
{dataRole?.indexOf('person:edit') !== -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) => {
@ -302,7 +303,7 @@ export default function LabelImage() {
<span>Thêm mới</span> <span>Thêm mới</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" id="m_table_1">

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

@ -275,6 +275,7 @@ export default function ListItem() {
</button> </button>
</div> </div>
</div> </div>
{dataRole?.indexOf('famous:edit') !== -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) => {
@ -296,7 +297,7 @@ export default function ListItem() {
<span>Thêm mới</span> <span>Thêm mới</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" id="m_table_1">

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

@ -154,7 +154,70 @@ const ModalEditLabel = (props) => {
// const uploadImage = async (options) => {
// const { file } = options;
// const base64 = await convertBase64(file)
// let dataUploadImg = {
// obj_id: crrData._id ? crrData._id : "",
// base64_image_list: [base64.split(',')[1]]
// }
// let promises = [];
// promises.push(
// axios
// .post(`${HOST}/api/face_images/famous_person`, dataUploadImg, {
// headers: {
// 'Accept': 'application/json',
// 'Content-Type': 'application/json',
// }
// })
// )
// await Promise.all(promises)
// .then((data) => {
// let success = false
// let manyFace = false
// let noFace = false
// for (let i = 0; i < data.length; i++) {
// const element = data[i];
// if (element.data.status === 10000) {
// let listImg = dataUpload
// setHostImg(element.data.image_host)
// listImg.unshift(element.data.data.toString())
// setDataUpload(...dataUpload)
// success = true
// } else if (element.data.status === 10003 && element.data.message === "Too many face in image") {
// manyFace = true
// } else if (element.data.status === 10003 && element.data.message === "No face in image") {
// noFace = true
// } else {
// success = false
// }
// }
// if (success) {
// let originData = crrImages
// originData.unshift(dataUpload[0].toString())
// let arrSet = [...new Set(originData)]
// setCrrImages(arrSet)
// setCheckDeleteMulti(false)
// } else if (manyFace) {
// swal("Thất bại", "Ảnh có nhiều khuôn mặt!", "error");
// } else if (noFace) {
// swal("Thất bại", "Ảnh không có khuôn mặt!", "error");
// } else {
// swal("Thất bại", "Lỗi hệ thống!", "error");
// }
// })
// .catch((err) => {
// console.log(err)
// });
// };
const uploadImage = async (options) => { const uploadImage = async (options) => {
if (crrImages.length >= 3) {
swal("Cảnh báo", "Bạn chỉ được tải lên tối đa 3 ảnh!", "warning");
return
} else {
const { file } = options; const { file } = options;
const base64 = await convertBase64(file) const base64 = await convertBase64(file)
@ -163,54 +226,32 @@ const ModalEditLabel = (props) => {
base64_image_list: [base64.split(',')[1]] base64_image_list: [base64.split(',')[1]]
} }
let promises = []; fetch(`${HOST}/api/face_images/famous_person`, {
promises.push( method: 'POST',
axios headers: {
.post(`${HOST}/api/face_images/famous_person`, dataUploadImg, { 'Accept': 'application/json',
headers: { 'Content-Type': 'application/json',
'Accept': 'application/json', // 'Authorization': token
'Content-Type': 'application/json', },
} body: JSON.stringify(dataUploadImg)
}) })
) .then(res => res.json())
await Promise.all(promises) .then(data => {
.then((data) => { if (data.status === 10000) {
let success = false setHostImg(data.image_host)
let manyFace = false let listImg = [...crrImages]
let noFace = false listImg.unshift(data.data.toString())
for (let i = 0; i < data.length; i++) { setCrrImages(listImg)
const element = data[i];
if (element.data.status === 10000) {
let listImg = dataUpload
setHostImg(element.data.image_host)
listImg.unshift(element.data.data.toString())
setDataUpload(...dataUpload)
success = true
} else if (element.data.status === 10003 && element.data.message === "Too many face in image") {
manyFace = true
} else if (element.data.status === 10003 && element.data.message === "No face in image") {
noFace = true
} else {
success = false
}
}
if (success) {
let originData = crrImages
originData.unshift(dataUpload[0].toString())
let arrSet = [...new Set(originData)]
setCrrImages(arrSet)
setCheckDeleteMulti(false) setCheckDeleteMulti(false)
} else if (manyFace) { } else if (data.status === 10003) {
swal("Thất bại", "Ảnh có nhiều khuôn mặt!", "error"); if (data.message === "Too many face in image") {
} else if (noFace) { swal("Thất bại", "Ảnh có nhiều khuôn mặt!", "error");
swal("Thất bại", "Ảnh không có khuôn mặt!", "error"); } else {
} else { swal("Thất bại", "Ảnh không hợp lệ", "error");
swal("Thất bại", "Lỗi hệ thống!", "error"); }
} }
}) })
.catch((err) => { }
console.log(err)
});
}; };
@ -351,7 +392,7 @@ const ModalEditLabel = (props) => {
customRequest = {uploadImage} customRequest = {uploadImage}
accept="image/*" accept="image/*"
// multiple={true} // multiple={true}
beforeUpload={checkLength} // beforeUpload={checkLength}
showUploadList={false} showUploadList={false}
disabled={disableBtn} disabled={disableBtn}
> >

137
app/src/components/Modal/ModalEdit.js
View File

@ -152,7 +152,70 @@ const Modaledit = (props) => {
} }
} }
// const uploadImage = async (options) => {
// const { file } = options;
// const base64 = await convertBase64(file)
// let dataUploadImg = {
// obj_id: crrData._id ? crrData._id : "",
// base64_image_list: [base64.split(',')[1]]
// }
// let promises = [];
// promises.push(
// axios
// .post(`${HOST}/api/face_images/famous_person`, dataUploadImg, {
// headers: {
// 'Accept': 'application/json',
// 'Content-Type': 'application/json',
// }
// })
// )
// await Promise.all(promises)
// .then((data) => {
// let success = false
// let manyFace = false
// let noFace = false
// for (let i = 0; i < data.length; i++) {
// const element = data[i];
// if (element.data.status === 10000) {
// let listImg = dataUpload
// setHostImg(element.data.image_host)
// listImg.unshift(element.data.data.toString())
// setDataUpload(...dataUpload)
// success = true
// } else if (element.data.status === 10003 && element.data.message === "Too many face in image") {
// manyFace = true
// } else if (element.data.status === 10003 && element.data.message === "No face in image") {
// noFace = true
// } else {
// success = false
// }
// }
// if (success) {
// let originData = crrImages
// originData.unshift(dataUpload[0].toString())
// let arrSet = [...new Set(originData)]
// setCrrImages(arrSet)
// setCheckDeleteMulti(false)
// } else if (manyFace) {
// swal("Thất bại", "Ảnh có nhiều khuôn mặt!", "error");
// } else if (noFace) {
// swal("Thất bại", "Ảnh không có khuôn mặt!", "error");
// } else {
// swal("Thất bại", "Lỗi hệ thống!", "error");
// }
// })
// .catch((err) => {
// console.log(err)
// });
// };
const uploadImage = async (options) => { const uploadImage = async (options) => {
if (crrImages.length >= 3) {
swal("Cảnh báo", "Bạn chỉ được tải lên tối đa 3 ảnh!", "warning");
return
} else {
const { file } = options; const { file } = options;
const base64 = await convertBase64(file) const base64 = await convertBase64(file)
@ -161,58 +224,34 @@ const Modaledit = (props) => {
base64_image_list: [base64.split(',')[1]] base64_image_list: [base64.split(',')[1]]
} }
let promises = []; fetch(`${HOST}/api/face_images/famous_person`, {
promises.push( method: 'POST',
axios headers: {
.post(`${HOST}/api/face_images/famous_person`, dataUploadImg, { 'Accept': 'application/json',
headers: { 'Content-Type': 'application/json',
'Accept': 'application/json', // 'Authorization': token
'Content-Type': 'application/json', },
} body: JSON.stringify(dataUploadImg)
}) })
) .then(res => res.json())
await Promise.all(promises) .then(data => {
.then((data) => { if (data.status === 10000) {
let success = false setHostImg(data.image_host)
let manyFace = false let listImg = [...crrImages]
let noFace = false listImg.unshift(data.data.toString())
for (let i = 0; i < data.length; i++) { setCrrImages(listImg)
const element = data[i];
if (element.data.status === 10000) {
let listImg = dataUpload
setHostImg(element.data.image_host)
listImg.unshift(element.data.data.toString())
setDataUpload(...dataUpload)
success = true
} else if (element.data.status === 10003 && element.data.message === "Too many face in image") {
manyFace = true
} else if (element.data.status === 10003 && element.data.message === "No face in image") {
noFace = true
} else {
success = false
}
}
if (success) {
let originData = crrImages
originData.unshift(dataUpload[0].toString())
let arrSet = [...new Set(originData)]
setCrrImages(arrSet)
setCheckDeleteMulti(false) setCheckDeleteMulti(false)
} else if (manyFace) { } else if (data.status === 10003) {
swal("Thất bại", "Ảnh có nhiều khuôn mặt!", "error"); if (data.message === "Too many face in image") {
} else if (noFace) { swal("Thất bại", "Ảnh có nhiều khuôn mặt!", "error");
swal("Thất bại", "Ảnh không có khuôn mặt!", "error"); } else {
} else { swal("Thất bại", "Ảnh không hợp lệ", "error");
swal("Thất bại", "Lỗi hệ thống!", "error"); }
} }
}) })
.catch((err) => { }
console.log(err)
});
}; };
const convertBase64 = (file) => { const convertBase64 = (file) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const fileReader = new FileReader(); const fileReader = new FileReader();
@ -348,8 +387,8 @@ const Modaledit = (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}
> >

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

@ -302,17 +302,19 @@ class ModalRole extends Component {
var nameTablee = "" var nameTablee = ""
if (value.name === "user") { if (value.name === "user") {
nameTablee = "Quản lí người dùng" nameTablee = "Quản lý người dùng"
} else if (value.name === "import") { } else if (value.name === "import") {
nameTablee = "Kho ảnh" nameTablee = "Kho ảnh"
} else if (value.name === "search") { } else if (value.name === "search") {
nameTablee = "Tìm kiếm ảnh" nameTablee = "Tìm kiếm ảnh"
} else if (value.name === "famous") { } else if (value.name === "famous") {
nameTablee = "Quản lí người nổi tiếng" nameTablee = "Quản lý người nổi tiếng"
} else if (value.name === "person") { } else if (value.name === "person") {
nameTablee = "Gán nhãn" nameTablee = "Gán nhãn"
} else if (value.name === "level") { } else if (value.name === "level") {
nameTablee = "Thiết lập quyền" nameTablee = "Thiết lập quyền"
} else {
nameTablee = value.name
} }
return ( return (
<div className="m-accordion__item" key={index}> <div className="m-accordion__item" key={index}>

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

@ -222,6 +222,7 @@ class Role extends Component {
</h3> </h3>
</div> </div>
</div> </div>
{this.state.dataRole?.indexOf('level:edit') !== -1 ?
<div className="m-portlet__head-tools pr-3"> <div className="m-portlet__head-tools pr-3">
<ul className="m-portlet__nav"> <ul className="m-portlet__nav">
<li className="m-portlet__nav-item"> <li className="m-portlet__nav-item">
@ -245,7 +246,7 @@ class Role extends Component {
</button> </button>
</li> </li>
</ul> </ul>
</div> </div> : "" }
</div> </div>
<div className="m-portlet__body m-portlet__body--no-padding"> <div className="m-portlet__body m-portlet__body--no-padding">
<div className="row m-row--no-padding m-row--col-separator-xl"> <div className="row m-row--no-padding m-row--col-separator-xl">

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

@ -16,9 +16,9 @@ import { useSelector } from 'react-redux';
const initialDataPost = { const initialDataPost = {
index: 1, index: 1,
item_per_page: 5, item_per_page: 10,
search_data: "", search_data: "",
is_deleted: -1, is_deleted: 0,
} }
export default function User() { export default function User() {
@ -48,7 +48,7 @@ export default function User() {
const [offset, setOffset] = useState(0) const [offset, setOffset] = useState(0)
const [dataPost, setDataPost] = useState(initialDataPost) const [dataPost, setDataPost] = useState(initialDataPost)
const itemsPerPage = 5 const itemsPerPage = 10
const location = useLocation(); const location = useLocation();
@ -191,7 +191,7 @@ export default function User() {
<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>
<td>{value.phone_number}</td> <td>{value.phone_number}</td>
<td> {/* <td>
{ {
value.is_deleted === 1 value.is_deleted === 1
? ?
@ -199,7 +199,7 @@ 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) ? "" : {(dataRole?.indexOf('user:edit') === -1 && dataRole?.indexOf('user:delete') === -1) ? "" :
<td> <td>
{dataRole?.indexOf('user:edit') !== -1 ? {dataRole?.indexOf('user:edit') !== -1 ?
@ -284,10 +284,11 @@ export default function User() {
<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">
Quản lí người dùng Quản lý người dùng
</h3> </h3>
</div> </div>
</div> </div>
{dataRole?.indexOf('user:edit') !== -1 ?
<div className="m-portlet__head-tools pr-3"> <div className="m-portlet__head-tools pr-3">
<ul className="m-portlet__nav"> <ul className="m-portlet__nav">
<li className="m-portlet__nav-item"> <li className="m-portlet__nav-item">
@ -320,7 +321,7 @@ export default function User() {
} */} } */}
</li> </li>
</ul> </ul>
</div> </div> : "" }
</div> </div>
<div className="m-portlet__body m-portlet__body--no-padding"> <div className="m-portlet__body m-portlet__body--no-padding">
<div className="row m-row--no-padding m-row--col-separator-xl"> <div className="row m-row--no-padding m-row--col-separator-xl">
@ -339,13 +340,13 @@ export default function User() {
placeholder="Tên đăng nhập/Họ tên..." placeholder="Tên đăng nhập/Họ tên..."
data-col-index={0} /> data-col-index={0} />
</div> </div>
<div className="form-group m-form__group col-xl-2"> {/* <div className="form-group m-form__group col-xl-2">
<Select <Select
value={valueSelected} value={valueSelected}
onChange={changeHandleFilter} onChange={changeHandleFilter}
options={optionSelect} options={optionSelect}
/> />
</div> </div> */}
<div className="pl-3"> <div className="pl-3">
<button <button
onClick={() => { onClick={() => {
@ -383,7 +384,7 @@ export default function User() {
<th style={{ 'verticalAlign': 'middle' }}>Giới tính</th> <th style={{ 'verticalAlign': 'middle' }}>Giới tính</th>
<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> */}
{(dataRole?.indexOf('user:edit') === -1 && dataRole?.indexOf('user:delete') === -1) ? "" : <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>}
</tr> </tr>
</thead> </thead>

14
app/src/components/layouts/Footer.js
View File

@ -21,20 +21,6 @@ class Footer extends Component {
2019 © BeetInnovators 2019 © BeetInnovators
</span> </span>
</div> </div>
<div className="m-stack__item m-stack__item--right m-stack__item--middle m-stack__item--first">
<ul className="m-footer__nav m-nav m-nav--inline m--pull-right">
<li className="m-nav__item">
<a href="http://reva.com.vn" target="blank" className="m-nav__link">
<span className="m-nav__link-text">Giới thiệu</span>
</a>
</li>
<li className="m-nav__item">
<a href="http://reva.com.vn#contact" target="blank" className="m-nav__link">
<span className="m-nav__link-text">Trung tâm hỗ trợ</span>
</a>
</li>
</ul>
</div>
</div> </div>
</div> </div>
</footer> </footer>

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

@ -111,9 +111,10 @@ class Header extends Component {
</div> </div>
</div> </div>
</div> </div>
<div className="m-stack__item m-stack__item--middle m-stack__item--center" style={{ 'width': '160px' }}> <div className="m-stack__item m-stack__item--middle m-stack__item--center" style={{ 'width': '460px' }}>
<a href="/" className="m-brand m-brand--desktop"> <a href="/" className="m-brand m-brand--desktop">
<img alt="" src="/img/logo.png" className="logo_img" /> <img style={{paddingBottom: "7px"}} alt="" src="/img/logo.png" className="logo_img" />
<div style={{fontSize: '10px', color: 'black', paddingLeft: "10px"}}><b> by Beet Innovators</b></div>
</a> </a>
</div> </div>
<div className="m-stack__item m-stack__item--right"> <div className="m-stack__item m-stack__item--right">

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

@ -103,7 +103,7 @@ class MenuBar extends Component {
<i className="m-menu__link-icon flaticon-users" /> <i className="m-menu__link-icon flaticon-users" />
<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">Quản lí người dùng</span> <span className="m-menu__link-text">Quản lý người dùng</span>
</span> </span>
</span> </span>
</NavLink> </NavLink>
@ -123,7 +123,7 @@ class MenuBar extends Component {
</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"> <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" />
@ -134,6 +134,7 @@ class MenuBar extends Component {
</span> </span>
</NavLink> </NavLink>
</li> </li>
: ""}
</ul> </ul>
</div> </div>
{/* END: Aside Menu */} {/* END: Aside Menu */}

7
app/src/router/ReactRouter.js
View File

@ -91,16 +91,15 @@ class ReactRouter extends Component {
: :
'' ''
} }
{/* { {
this.state.dataRole?.indexOf('test:view') !== -1 this.state.dataRole?.indexOf('level:view') !== -1
? ?
<> <>
<Route path='/test' component={Test} /> <Route path='/test' component={Test} />
</> </>
: :
'' ''
} */} }
<Route path='/test' component={Test} />
{ {
this.state.dataRole?.indexOf('famous:view') !== -1 this.state.dataRole?.indexOf('famous:view') !== -1
? ?