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