1 changed files with 394 additions and 0 deletions
@ -0,0 +1,394 @@
|
||||
import * as XLSX from 'xlsx'; |
||||
import React, { Component } from 'react'; |
||||
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||
import axios from 'axios'; |
||||
import { Button } from 'reactstrap'; |
||||
import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap'; |
||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||
import { PROJECT_ROLE_ADD, PROJECT_ROLE_SEARCH, PROJECT_ROLE_EDIT, PROJECT_ROLE_DELETE } from '../../../const/ApiConst.js'; |
||||
import { Pagination, Tooltip, Table } from 'antd'; |
||||
import { withTranslation } from 'react-i18next'; |
||||
const LENGTH_DATA = 10 |
||||
class index extends Component { |
||||
constructor(props) { |
||||
super(props); |
||||
this.state = { |
||||
alertDelete: false, |
||||
alertNotDelete: false, |
||||
currentPage: 1, |
||||
dataEdit: null, |
||||
dataExport: [], |
||||
dataGs: [], |
||||
dataIdHo: [], |
||||
dataTable: [], |
||||
idDelete: 0, |
||||
idRoles: 0, |
||||
menuRoles: [], |
||||
page: 0, |
||||
rowsPerPage: LENGTH_DATA, |
||||
search: "", |
||||
tooltipDelete: false, |
||||
tooltipEdit: false, |
||||
tooltipExport: false, |
||||
tooltipImport: false, |
||||
tooltipMenu: false, |
||||
tooltipTambah: false, |
||||
totalPage: 0, |
||||
company_id: props.company_id || 0, |
||||
role_name: props.role_name || '', |
||||
role_id: props.role_id || 0, |
||||
user_id: props.user_id || 0, |
||||
isLogin: props.isLogin || false, |
||||
token: props.token || '', |
||||
all_project: props.all_project || null, |
||||
hierarchy: props.hierarchy || [], |
||||
user_name: props.user_name || '', |
||||
config: { |
||||
headers: { |
||||
Authorization: `Bearer ${props.token || ''}`, |
||||
"Content-type": "application/json", |
||||
} |
||||
} |
||||
}; |
||||
|
||||
this.columns = [ |
||||
{ |
||||
title: this.props.t('action'), |
||||
dataIndex: '', |
||||
key: 'x', |
||||
className: 'nowrap', |
||||
render: (text, record) => <> |
||||
<Tooltip title={this.props.t('delete')}> |
||||
<i className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => this.handleDelete(text.id)}></i> |
||||
</Tooltip> |
||||
<Tooltip title={this.props.t('edit')}> |
||||
<i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(text)}></i> |
||||
</Tooltip> |
||||
</>, |
||||
}, |
||||
{ |
||||
title: this.state.role_name === 'Super Admin' ? "Company Name" : null, |
||||
dataIndex: "join_first_company_name", |
||||
key: "join_first_company_name", |
||||
render: (text, record) => { |
||||
return this.state.role_name === 'Super Admin' ? ( |
||||
<span>{record.join_first_company_name}</span> |
||||
) : null; |
||||
} |
||||
}, |
||||
{ title: this.props.t('name'), dataIndex: 'name', key: 'name', className: "nowrap" }, |
||||
{ title: this.props.t('Alias Name'), dataIndex: 'aliasname', key: 'aliasname' }, |
||||
{ title: this.props.t('Type Layout'), dataIndex: 'aliasname', key: 'aliasname' }, |
||||
{ title: this.props.t('Master Data'), dataIndex: 'aliasname', key: 'aliasname' }, |
||||
]; |
||||
} |
||||
|
||||
async componentDidMount() { |
||||
this.getDataRoles(); |
||||
} |
||||
|
||||
async componentDidUpdate(prevProps, prevState) { |
||||
const { search } = this.state |
||||
if (search !== prevState.search) this.getDataRoles() |
||||
} |
||||
|
||||
handleSearch = e => { |
||||
const value = e.target.value |
||||
this.setState({ search: value, currentPage: 1 }) |
||||
}; |
||||
|
||||
getDataRoles = async () => { |
||||
let start = 0; |
||||
if (this.state.currentPage !== 1 && this.state.currentPage > 1) { |
||||
start = (this.state.currentPage * this.state.rowsPerPage) - this.state.rowsPerPage |
||||
} |
||||
|
||||
const formData = { |
||||
"paging": { "start": start, "length": this.state.rowsPerPage }, |
||||
"columns": [], |
||||
group_column: { |
||||
"operator": "AND", |
||||
"group_operator": "OR", |
||||
"where": [ |
||||
{ |
||||
"name": "name", |
||||
"logic_operator": "~*", |
||||
"value": this.state.search, |
||||
} |
||||
] |
||||
}, |
||||
"joins": [], |
||||
"orders": { "columns": ["id"], "ascending": false } |
||||
} |
||||
if (this.state.role_name !== "Super Admin") { |
||||
formData.columns.push( |
||||
{ "name": "company_id", "logic_operator": "=", "value": this.state.company_id, "operator": "AND" }, |
||||
) |
||||
} else { |
||||
formData.columns.push( |
||||
{ "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" }, |
||||
) |
||||
formData.joins.push( |
||||
{ "name": "m_company", "column_join": "company_id", "column_results": ["company_name"] } |
||||
) |
||||
formData.group_column.where.push( |
||||
{ name: "company_name", logic_operator: "~*", value: this.state.search, table_name: "m_company" } |
||||
) |
||||
} |
||||
const result = await axios |
||||
.post(PROJECT_ROLE_SEARCH, formData, this.state.config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code == 200) { |
||||
this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord }); |
||||
} else { |
||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
onConfirmDelete = async () => { |
||||
const { idDelete } = this.state |
||||
const url = PROJECT_ROLE_DELETE(idDelete) |
||||
|
||||
const result = await axios.delete(url, this.state.config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
this.getDataRoles() |
||||
this.setState({ idDelete: 0, alertDelete: false }) |
||||
NotificationManager.success(`Data project role berhasil dihapus`, 'Success!!'); |
||||
} else { |
||||
this.setState({ idDelete: 0, alertDelete: false }) |
||||
NotificationManager.error(`Data project role gagal dihapus`, 'Failed!!'); |
||||
} |
||||
} |
||||
|
||||
saveRole = async (data) => { |
||||
|
||||
const formData = { |
||||
name: data.name, |
||||
description: data.description, |
||||
company_id: data.company_id |
||||
} |
||||
|
||||
const result = await axios.post(PROJECT_ROLE_ADD, formData, this.state.config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
this.getDataRoles(); |
||||
NotificationManager.success(`Data project role berhasil ditambah`, 'Success!!'); |
||||
} else { |
||||
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
||||
} |
||||
|
||||
} |
||||
|
||||
editRole = async (data) => { |
||||
|
||||
const formData = { |
||||
name: data.name, |
||||
description: data.description, |
||||
company_id : data.company_id |
||||
} |
||||
const url = PROJECT_ROLE_EDIT(data.id) |
||||
const result = await axios.put(url, formData, this.state.config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
this.getDataRoles(); |
||||
NotificationManager.success(`Data project role berhasil diedit`, 'Success!!'); |
||||
} else { |
||||
NotificationManager.error(`Data project role gagal di edit`, `Failed!!`); |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
handleEdit = (data) => { |
||||
this.setState({ dataEdit: data }); |
||||
} |
||||
|
||||
handleDelete = (id) => { |
||||
id == '1' ? this.setState({ alertNotDelete: true }) : |
||||
this.setState({ alertDelete: true, idDelete: id }); |
||||
} |
||||
|
||||
onShowSizeChange = (current, pageSize) => { |
||||
this.setState({ rowsPerPage: pageSize }, () => { |
||||
this.getDataRoles(); |
||||
}) |
||||
} |
||||
|
||||
onPagination = (current, pageSize) => { |
||||
this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => { |
||||
this.getDataRoles(); |
||||
}) |
||||
} |
||||
|
||||
toggle = (param) => { |
||||
if (param === "edit") { |
||||
this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit })) |
||||
} else if (param === "delete") { |
||||
this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete })) |
||||
} else if (param === "menu") { |
||||
this.setState(prevState => ({ tooltipMenu: !prevState.tooltipMenu })) |
||||
} else if (param === "tambah") { |
||||
this.setState(prevState => ({ tooltipTambah: !prevState.tooltipTambah })) |
||||
} else if (param === "export") { |
||||
this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport })) |
||||
} |
||||
} |
||||
|
||||
dataNotAvailable = () => { |
||||
if (this.state.dataTable.length === 0) { |
||||
return ( |
||||
<tr> |
||||
<td align="center" colSpan="3">{this.props.t('noData')}</td> |
||||
</tr> |
||||
) |
||||
} |
||||
} |
||||
|
||||
handleExportExcel = async () => { |
||||
const payload = { |
||||
"paging": { "start": 0, "length": -1 }, |
||||
"columns": [], |
||||
"group_column": { |
||||
"operator": "AND", |
||||
"group_operator": "OR", |
||||
"where": [ |
||||
{ |
||||
"name": "name", |
||||
"logic_operator": "~*", |
||||
"value": this.state.search, |
||||
} |
||||
] |
||||
}, |
||||
"joins": [], |
||||
"orders": { "columns": ["id"], "ascending": false } |
||||
} |
||||
if (this.state.role_name !== "Super Admin") { |
||||
payload.columns.push( |
||||
{ "name": "company_id", "logic_operator": "=", "value": this.state.company_id, "operator": "AND" }, |
||||
) |
||||
} else { |
||||
payload.columns.push( |
||||
{ "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" }, |
||||
) |
||||
payload.joins.push( |
||||
{ "name": "m_company", "column_join": "company_id", "column_results": ["company_name"] } |
||||
) |
||||
payload.group_column.where.push( |
||||
{ name: "company_name", logic_operator: "~*", value: this.state.search, table_name: "m_company" } |
||||
) |
||||
} |
||||
const result = await axios |
||||
.post(PROJECT_ROLE_SEARCH, payload, this.state.config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
if (result && result.data && result.statusText == "OK") { |
||||
const dataRes = result.data.data || []; |
||||
const dataExport = []; |
||||
dataRes.map((val, index) => { |
||||
let row = {}; |
||||
if (this.state.role_name === 'Super Admin') { |
||||
row.Company = val.join_first_company_name; |
||||
} |
||||
row.Nama = val.name; |
||||
row.Deskripsi = val.description; |
||||
dataExport.push(row); |
||||
}) |
||||
this.setState({ dataExport: dataExport }, () => { |
||||
this.exportExcel(); |
||||
}); |
||||
} else { |
||||
NotificationManager.error('Failed retreiving data!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
exportExcel = () => { |
||||
const dataExcel = this.state.dataExport || []; |
||||
const fileName = "Data Project Role.xlsx"; |
||||
const ws = XLSX.utils.json_to_sheet(dataExcel); |
||||
const wb = XLSX.utils.book_new(); |
||||
XLSX.utils.book_append_sheet(wb, ws, 'Data Project Role'); |
||||
XLSX.writeFile(wb, fileName); |
||||
} |
||||
|
||||
render() { |
||||
const { t } = this.props; |
||||
const { tooltipTambah, tooltipExport, dialogMenuForm, dataTable, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipEdit, tooltipDelete, tooltipMenu } = this.state |
||||
let noSeq = 0; |
||||
return ( |
||||
<div> |
||||
<NotificationContainer /> |
||||
<SweetAlert |
||||
show={this.state.alertDelete} |
||||
warning |
||||
showCancel |
||||
confirmBtnText="Delete" |
||||
confirmBtnBsStyle="danger" |
||||
title={this.props.t('deleteConfirm')} |
||||
onConfirm={this.onConfirmDelete} |
||||
onCancel={() => this.setState({ alertDelete: false, idDelete: 0 })} |
||||
focusCancelBtn |
||||
> |
||||
{this.props.t('deleteMsg')} |
||||
</SweetAlert> |
||||
<SweetAlert |
||||
show={this.state.alertNotDelete} |
||||
warning |
||||
confirmBtnText="Can't Delete" |
||||
confirmBtnBsStyle="danger" |
||||
title="Data can't be delete!" |
||||
onConfirm={() => this.setState({ alertNotDelete: false })} |
||||
> |
||||
Data project role tidak dapat di hapus!! |
||||
</SweetAlert> |
||||
<Card> |
||||
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
||||
<h4>{this.props.params.name}</h4> |
||||
<Row> |
||||
<Col> |
||||
<Input onChange={this.handleSearch} value={search} type="text" name="search" id="search" placeholder={this.props.t('search')} /> |
||||
</Col> |
||||
<Col> |
||||
|
||||
<Tooltip title={this.props.t('exportExcel')}> |
||||
<Button style={{ marginLeft: "5px" }} id="TooltipExport" color="primary" onClick={() => this.handleExportExcel()}><i className="fa fa-print"></i></Button> |
||||
</Tooltip> |
||||
</Col> |
||||
</Row> |
||||
</CardHeader> |
||||
<CardBody> |
||||
<Table |
||||
rowKey="id" |
||||
size="small" |
||||
columns={this.columns} |
||||
dataSource={dataTable} |
||||
pagination={false} |
||||
bordered={false} |
||||
/> |
||||
<Pagination |
||||
style={{ marginTop: "25px" }} |
||||
showSizeChanger |
||||
onShowSizeChange={this.onShowSizeChange} |
||||
onChange={this.onPagination} |
||||
defaultCurrent={currentPage} |
||||
pageSize={rowsPerPage} |
||||
total={totalPage} |
||||
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]} |
||||
/> |
||||
</CardBody> |
||||
</Card> |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
export default withTranslation()(index); |
||||
Loading…
Reference in new issue