304 lines
13 KiB
JavaScript
304 lines
13 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { Redirect } from 'react-router-dom';
|
|
import swal from 'sweetalert';
|
|
import ModalRole from "../Modal/ModalRole";
|
|
import { PulseLoader } from 'react-spinners';
|
|
import Pagination from "react-js-pagination";
|
|
import $ from 'jquery';
|
|
import { HOST } from '../../config/index';
|
|
import Store from '../../store';
|
|
|
|
|
|
class Role extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
modalRole: false,
|
|
listRole: [],
|
|
listStaff: [],
|
|
crrDatas: [],
|
|
activePage: 1,
|
|
offset: 0,
|
|
crrRole: {
|
|
name: "",
|
|
description: ""
|
|
},
|
|
dataRole: Store.getState().role.role,
|
|
};
|
|
Store.subscribe(() => {
|
|
this.setState({
|
|
dataRole: Store.getState().role.role,
|
|
}, () => {
|
|
|
|
});
|
|
});
|
|
this.itemsPerPage = 10;
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.getData();
|
|
}
|
|
|
|
|
|
getData = () => {
|
|
this.getRole()
|
|
}
|
|
|
|
getRole = () => {
|
|
fetch(`${HOST}/api/levels/company/1`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
// 'Authorization': token
|
|
'Authorization': Store.getState().isLogin.access_token,
|
|
},
|
|
}).then((response) => {
|
|
return response.json()
|
|
}).then((data) => {
|
|
if (data.status === 10000) {
|
|
this.setState({
|
|
listRole: data.data
|
|
});
|
|
this.FilterRole(this.state.activePage)
|
|
}
|
|
})
|
|
}
|
|
|
|
FilterRole(activePage) {
|
|
const { listRole } = this.state;
|
|
const offset = (activePage - 1) * this.itemsPerPage;
|
|
const crrDatas = listRole.slice(offset, offset + this.itemsPerPage);
|
|
console.log(crrDatas)
|
|
this.setState({
|
|
crrDatas,
|
|
offset: offset
|
|
})
|
|
}
|
|
|
|
handlePageChange = (pageNumber) => {
|
|
this.setState({
|
|
...this.state,
|
|
activePage: pageNumber
|
|
})
|
|
this.FilterRole(pageNumber);
|
|
|
|
}
|
|
|
|
|
|
|
|
DeleteRole = async (Role) => {
|
|
let data = await fetch(`${HOST}/api/levels/${Role._id}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': Store.getState().isLogin.access_token,
|
|
// 'Authorization': token,
|
|
},
|
|
}).then((response) => {
|
|
return response.json()
|
|
});
|
|
if (data.status === 10000) {
|
|
swal("Thành công", "Bạn đã xóa thành công!", "success", {
|
|
buttons: false,
|
|
timer: 1500,
|
|
});
|
|
this.getRole();
|
|
}
|
|
else {
|
|
swal("Lỗi", "Xóa thất bại!", "error");
|
|
}
|
|
|
|
}
|
|
|
|
modalClose = () => {
|
|
this.setState({
|
|
modalRole: false,
|
|
});
|
|
this.getRole();
|
|
}
|
|
|
|
render() {
|
|
if (this.state.isLogin === false) {
|
|
return (
|
|
<Redirect to={'/login'} />
|
|
)
|
|
}
|
|
|
|
let bulletedRole = this.state.crrDatas.map((e, i) => {
|
|
console.log(e)
|
|
var is_default = ""
|
|
if (e.is_default === 1) {
|
|
is_default = " (Default)"
|
|
}
|
|
return (
|
|
<tr key={(i + 1)}>
|
|
<td>{(i + this.state.offset + 1)}</td>
|
|
<td>{e.name}</td>
|
|
{/* <td>
|
|
{
|
|
e.active === 0
|
|
?
|
|
<span className="m-badge m-badge--secondary m-badge--wide">Inactive {is_default}</span>
|
|
:
|
|
<span className="m-badge m-badge--accent m-badge--wide">Active {is_default}</span>
|
|
}
|
|
|
|
</td> */}
|
|
{(this.state.dataRole?.indexOf('level:edit') === -1 && this.state.dataRole?.indexOf('level:delete') === -1) ? "" :
|
|
<td>
|
|
{this.state.dataRole?.indexOf('level:edit') !== -1 ?
|
|
<button onClick={(e) => {
|
|
var data = this.state.crrDatas
|
|
var dataRole = {
|
|
id: data[i]._id,
|
|
name: data[i].name,
|
|
roles: data[i].roles,
|
|
is_default: data[i].is_default,
|
|
};
|
|
this.setState({
|
|
crrRole: dataRole,
|
|
modalRole: true,
|
|
});
|
|
|
|
|
|
}} className="m-portlet__nav-link btn m-btn m-btn--hover-warning m-btn--icon m-btn--icon-only m-btn--pill" data-tip data-for='Edit'>
|
|
<i className="la la-edit" />
|
|
</button>
|
|
: "" }
|
|
{/* <ReactTooltip id='Edit' type='dark' effect='solid'>
|
|
<span>{language[this.props.indexLanguage].tooltip.open_edit}</span>
|
|
</ReactTooltip> */}
|
|
|
|
{this.state.dataRole?.indexOf('level:delete') !== -1 ?
|
|
<button className="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" data-tip data-for='Delete'
|
|
onClick={v => {
|
|
v.preventDefault();
|
|
swal({
|
|
title: "Bạn có chắc chắn?",
|
|
text: "Bạn có chắc chắn muốn xóa quyền " + e.name,
|
|
icon: "warning",
|
|
buttons: true,
|
|
dangerMode: true,
|
|
})
|
|
.then(willDelete => {
|
|
if (willDelete) {
|
|
this.DeleteRole(e);
|
|
}
|
|
});
|
|
|
|
}}
|
|
><i className="la la-trash"></i></button>
|
|
: "" }
|
|
{/* <ReactTooltip id='Delete' type='dark' effect='solid'>
|
|
<span>{language[this.props.indexLanguage].tooltip.open_delete}</span>
|
|
</ReactTooltip> */}
|
|
</td>}
|
|
</tr>
|
|
)
|
|
});
|
|
|
|
var pageRangeDisplayed = 1;
|
|
if ($(window).width() < 768) {
|
|
pageRangeDisplayed = 3
|
|
} else {
|
|
pageRangeDisplayed = 5
|
|
}
|
|
|
|
return (
|
|
<div className="m-grid__item m-grid__item--fluid m-wrapper">
|
|
<div className="m-content p-2">
|
|
<div className="m-portlet m-portlet--tab mb-0">
|
|
<div className="m-portlet__head p-3">
|
|
<div className="m-portlet__head-caption pl-3">
|
|
<div className="m-portlet__head-title">
|
|
<h3 className="font-family-text">
|
|
Thiết lập quyền
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
{this.state.dataRole?.indexOf('level:edit') !== -1 ?
|
|
<div className="m-portlet__head-tools pr-3">
|
|
<ul className="m-portlet__nav">
|
|
<li className="m-portlet__nav-item">
|
|
<button onClick={(e) => {
|
|
this.setState({
|
|
crrRole: {
|
|
name: "",
|
|
active: 1,
|
|
// id_company: this.state.box_engine_cf.idCompany,
|
|
roles: [],
|
|
is_default: 0,
|
|
HOST: this.state.crrApi2
|
|
},
|
|
modalRole: true,
|
|
});
|
|
}} className="btn btn-accent m-btn m-btn--custom m-btn--icon m-btn--pill m-btn--air">
|
|
<span>
|
|
<i className="la la-plus" />
|
|
<span className='font-family-text'>Thêm mới</span>
|
|
</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div> : "" }
|
|
</div>
|
|
<div className="m-portlet__body m-portlet__body--no-padding">
|
|
<div className="row m-row--no-padding m-row--col-separator-xl">
|
|
<div className="col-xl-12">
|
|
<div className="m-widget1 col-xl-8 mx-auto">
|
|
<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">
|
|
<thead>
|
|
<tr>
|
|
<th style={{ 'verticalAlign': 'middle', 'width': '100px' }}>STT</th>
|
|
<th style={{ 'verticalAlign': 'middle' }}>Tên</th>
|
|
{/* <th style={{ 'verticalAlign': 'middle', 'width': '200px' }}>Trạng thái</th> */}
|
|
{(this.state.dataRole?.indexOf('level:edit') === -1 && this.state.dataRole?.indexOf('level:delete') === -1) ? "" : <th style={{ 'verticalAlign': 'middle', 'width': '150px' }}>Thao tác</th>}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{bulletedRole}
|
|
</tbody>
|
|
</table>
|
|
{/* <PulseLoader
|
|
css={override}
|
|
sizeUnit={"px"}
|
|
size={12}
|
|
margin={'2px'}
|
|
color={'#36D7B7'}
|
|
loading={this.state.loading}
|
|
/> */}
|
|
|
|
<ModalRole
|
|
data={this.state.crrRole}
|
|
show={this.state.modalRole}
|
|
onHide={this.modalClose}
|
|
/>
|
|
</div>
|
|
{/* <span>
|
|
Showing {this.state.showFirst} to {this.state.showLast} of {this.state.totalLength} entries
|
|
</span> */}
|
|
<Pagination
|
|
prevPageText='Trang trước'
|
|
nextPageText='Trang sau'
|
|
firstPageText='Trang đầu'
|
|
lastPageText='Trang cuối'
|
|
activePage={this.state.activePage}
|
|
itemsCountPerPage={this.itemsPerPage}
|
|
totalItemsCount={this.state.listRole.length}
|
|
pageRangeDisplayed={pageRangeDisplayed}
|
|
onChange={this.handlePageChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Role; |