root
9 months ago
31 changed files with 1880 additions and 329 deletions
@ -0,0 +1,203 @@ |
|||||||
|
import React, { Component } from 'react' |
||||||
|
import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Form, FormGroup, Label, Input } from 'reactstrap'; |
||||||
|
import 'antd/dist/antd.css'; |
||||||
|
import axios from 'axios'; |
||||||
|
import { COMPANY_MANAGEMENT_LIST } from '../../../const/ApiConst.js'; |
||||||
|
import { withTranslation } from 'react-i18next'; |
||||||
|
import { NotificationManager } from 'react-notifications'; |
||||||
|
import { Select, DatePicker } from 'antd'; |
||||||
|
import moment from "moment"; |
||||||
|
|
||||||
|
const { Option } = Select |
||||||
|
class DialogForm extends Component { |
||||||
|
constructor(props) { |
||||||
|
super(props) |
||||||
|
this.state = { |
||||||
|
id: 0, |
||||||
|
name: "", |
||||||
|
ExpiredDateOspro: moment(), |
||||||
|
description: "", |
||||||
|
openDialog: false, |
||||||
|
companyList: [], |
||||||
|
scompany_id:null, |
||||||
|
isParentClick: false, |
||||||
|
company_id: props.company_id || null, |
||||||
|
role_name: props.role_name || '', |
||||||
|
token: props.token || '', |
||||||
|
config: { |
||||||
|
headers: { |
||||||
|
Authorization: `Bearer ${props.token || ''}`, |
||||||
|
"Content-type": "application/json", |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
async componentDidMount() { |
||||||
|
this.props.showDialog(this.showDialog); |
||||||
|
this.getDataProyekCompany(); |
||||||
|
} |
||||||
|
|
||||||
|
async componentDidUpdate() { |
||||||
|
if (this.state.isParentClick === true) { |
||||||
|
if (this.props.typeDialog === "Edit") { |
||||||
|
const { dataEdit } = this.props |
||||||
|
this.setState({ |
||||||
|
id: dataEdit.id, |
||||||
|
name: dataEdit.name, |
||||||
|
description: dataEdit.description, |
||||||
|
scompany_id : dataEdit.company_id |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.setState({ |
||||||
|
id: 0, |
||||||
|
name: "", |
||||||
|
description: "", |
||||||
|
scompany_id:null |
||||||
|
}) |
||||||
|
} |
||||||
|
this.setState({ isParentClick: false }); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
showDialog = () => { |
||||||
|
this.setState({ isParentClick: true }); |
||||||
|
} |
||||||
|
|
||||||
|
getDataProyekCompany = async () => { |
||||||
|
const result = await axios |
||||||
|
.get(COMPANY_MANAGEMENT_LIST, this.state.config) |
||||||
|
.then((res) => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code == 200) { |
||||||
|
let dataRes = result.data.data || []; |
||||||
|
this.setState({companyList: dataRes}) |
||||||
|
} else { |
||||||
|
NotificationManager.error("Gagal Mengambil Data!!", "Failed"); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
handleDatePicker = (date, dateString) => { |
||||||
|
this.setState({ ExpiredDateOspro: date }) |
||||||
|
}; |
||||||
|
|
||||||
|
validation = () => { |
||||||
|
if (this.state.role_name === 'Super Admin' && !this.state.scompany_id || this.state.scompany_id === "") { |
||||||
|
alert("Company data cannot be empty!"); |
||||||
|
return true; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
handleSave = () => { |
||||||
|
const { |
||||||
|
id, |
||||||
|
name, |
||||||
|
description, |
||||||
|
role_name, |
||||||
|
company_id, |
||||||
|
scompany_id |
||||||
|
} = this.state |
||||||
|
|
||||||
|
let data = ''; |
||||||
|
const err = this.validation(); |
||||||
|
if(!err) { |
||||||
|
if (this.props.typeDialog === "Save") { |
||||||
|
data = { |
||||||
|
id, |
||||||
|
name, |
||||||
|
description, |
||||||
|
company_id : role_name !== 'Super Admin' ? company_id : scompany_id, |
||||||
|
} |
||||||
|
this.props.closeDialog('save', data); |
||||||
|
} else { |
||||||
|
data = { |
||||||
|
id, |
||||||
|
name, |
||||||
|
description, |
||||||
|
company_id : role_name !== 'Super Admin' ? company_id : scompany_id, |
||||||
|
} |
||||||
|
this.props.closeDialog('edit', data); |
||||||
|
} |
||||||
|
} |
||||||
|
this.setState({ id: 0 }); |
||||||
|
} |
||||||
|
|
||||||
|
handleCancel = () => { |
||||||
|
this.props.closeDialog('cancel', 'none') |
||||||
|
} |
||||||
|
|
||||||
|
onChangeCompanyProject = (val) => { |
||||||
|
this.setState({scompany_id : val}); |
||||||
|
}; |
||||||
|
|
||||||
|
renderForm = () => { |
||||||
|
const { t } = this.props; |
||||||
|
return ( |
||||||
|
<Form> |
||||||
|
{ |
||||||
|
this.state.role_name === 'Super Admin' && ( |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">Assign Company Project<span style={{ color: "red" }}>*</span></Label> |
||||||
|
<Select |
||||||
|
showSearch |
||||||
|
filterOption={(inputValue, option) => |
||||||
|
option.children.toLowerCase().includes(inputValue.toLowerCase()) |
||||||
|
} |
||||||
|
value={this.state.scompany_id} |
||||||
|
defaultValue={this.state.scompany_id} |
||||||
|
onChange={this.onChangeCompanyProject} |
||||||
|
style={{ width: "100%" }} |
||||||
|
> |
||||||
|
{this.state.companyList.map((res) => ( |
||||||
|
<Option key={res.id} value={res.id}> |
||||||
|
{res.company_name} |
||||||
|
</Option> |
||||||
|
))} |
||||||
|
</Select> |
||||||
|
</FormGroup> |
||||||
|
) |
||||||
|
} |
||||||
|
<FormGroup> |
||||||
|
<Label>{this.props.t('Type Paket')}</Label> |
||||||
|
<Input type="text" value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} placeholder={this.props.t('inputName')} /> |
||||||
|
</FormGroup> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize" style={{ fontWeight: "bold" }}> |
||||||
|
Expired Date<span style={{ color: "red" }}>*</span> |
||||||
|
</Label> |
||||||
|
{/* <DatePicker |
||||||
|
// disabledDate={(current) => {
|
||||||
|
// let currentDate = moment(current).format("YYYY-MM-DD");
|
||||||
|
// let customDate = moment(this.state.ExpiredDateOspro)
|
||||||
|
// .add(1, "days")
|
||||||
|
// .format("YYYY-MM-DD");
|
||||||
|
// return current && currentDate < customDate;
|
||||||
|
// }}
|
||||||
|
format={"DD-MM-YYYY"} |
||||||
|
style={{ width: "100%" }} |
||||||
|
value={this.state.ExpiredDateOspro} |
||||||
|
onChange={this.handleDatePicker()} |
||||||
|
/> */} |
||||||
|
</FormGroup> |
||||||
|
</Form> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<Modal isOpen={this.props.openDialog} toggle={this.props.toggleDialog}> |
||||||
|
<ModalHeader toggle={this.props.closeDialog}>{this.props.typeDialog == "Save" ? "Tambah" : "Edit"} {this.props.t('Transaksi')}</ModalHeader> |
||||||
|
<ModalBody> |
||||||
|
{this.renderForm()} |
||||||
|
</ModalBody> |
||||||
|
<ModalFooter> |
||||||
|
<Button color="primary" onClick={() => this.handleSave()}>{this.props.typeDialog}</Button>{' '} |
||||||
|
<Button color="secondary" onClick={() => this.handleCancel()}>{this.props.t('cancel')}</Button> |
||||||
|
</ModalFooter> |
||||||
|
</Modal> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
export default withTranslation()(DialogForm); |
||||||
@ -0,0 +1,470 @@ |
|||||||
|
import * as XLSX from 'xlsx'; |
||||||
|
import DialogForm from './DialogForm'; |
||||||
|
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, TRANSACTION_SEARCH, PROJECT_ROLE_EDIT, PROJECT_ROLE_DELETE } from '../../../const/ApiConst.js'; |
||||||
|
import { Pagination, Tooltip, Table } from 'antd'; |
||||||
|
import { withTranslation } from 'react-i18next'; |
||||||
|
import { checkActMenup } from '../../../const/CustomFunc'; |
||||||
|
import moment from "moment"; |
||||||
|
|
||||||
|
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: [], |
||||||
|
dialogMenuForm: false, |
||||||
|
idDelete: 0, |
||||||
|
idRoles: 0, |
||||||
|
menuRoles: [], |
||||||
|
openDialog: false, |
||||||
|
page: 0, |
||||||
|
rowsPerPage: LENGTH_DATA, |
||||||
|
search: "", |
||||||
|
tooltipDelete: false, |
||||||
|
tooltipEdit: false, |
||||||
|
tooltipExport: false, |
||||||
|
tooltipImport: false, |
||||||
|
tooltipMenu: false, |
||||||
|
tooltipTambah: false, |
||||||
|
totalPage: 0, |
||||||
|
typeDialog: 'Save', |
||||||
|
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> |
||||||
|
{/* { |
||||||
|
checkActMenup('/product-transaction', 'delete') ? |
||||||
|
<i className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => this.handleDelete(text.id)}></i> |
||||||
|
: |
||||||
|
null |
||||||
|
} */} |
||||||
|
</Tooltip> |
||||||
|
<Tooltip title={this.props.t('edit')}> |
||||||
|
<i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(text)}></i> |
||||||
|
{/* { |
||||||
|
checkActMenup('/product-transaction', 'update') ? |
||||||
|
<i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(text)}></i> |
||||||
|
: |
||||||
|
null |
||||||
|
} */} |
||||||
|
</Tooltip> |
||||||
|
</>, |
||||||
|
}, |
||||||
|
...(this.state.role_name === 'Super Admin' ? [ |
||||||
|
{ |
||||||
|
title: "Company Name", |
||||||
|
dataIndex: "join_first_company_name", |
||||||
|
key: "join_first_company_name", |
||||||
|
render: (text, record) => { |
||||||
|
return <span>{ record.join_first_company_name }</span>; |
||||||
|
} |
||||||
|
}] : []) |
||||||
|
, |
||||||
|
{ title: 'Type Paket', dataIndex: 'type_paket', key: 'type_paket', className: "nowrap", |
||||||
|
render: (text,record) => { |
||||||
|
return <span>{ !["Basic","Free"].includes(record.type_paket) ? 'Enterprise' : record.type_paket}</span> |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: this.props.t('Expired Date'), dataIndex: 'exp_ospro', key: 'exp_ospro', |
||||||
|
render: (text,record) => { |
||||||
|
return <span>{ moment(record.exp_ospro).format('DD MMMM, YYYY') }</span>; |
||||||
|
} |
||||||
|
}, |
||||||
|
]; |
||||||
|
} |
||||||
|
|
||||||
|
async componentDidMount() { |
||||||
|
this.getDataTransaction(); |
||||||
|
} |
||||||
|
|
||||||
|
async componentDidUpdate(prevProps, prevState) { |
||||||
|
const { search } = this.state |
||||||
|
if (search !== prevState.search) this.getDataTransaction() |
||||||
|
} |
||||||
|
|
||||||
|
handleSearch = e => { |
||||||
|
const value = e.target.value |
||||||
|
this.setState({ search: value, currentPage: 1 }) |
||||||
|
}; |
||||||
|
|
||||||
|
getDataTransaction = 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": "type_paket", |
||||||
|
"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": parseInt(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(TRANSACTION_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'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
handleOpenDialog = (type) => { |
||||||
|
this.setState({ openDialog: true, typeDialog: type }) |
||||||
|
this.showChildDialog(); |
||||||
|
} |
||||||
|
|
||||||
|
handleCloseDialog = (type, data) => { |
||||||
|
if (type === "save") { |
||||||
|
this.saveRole(data); |
||||||
|
} else if (type === "edit") { |
||||||
|
this.editRole(data); |
||||||
|
} |
||||||
|
this.setState({ openDialog: false }) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
handleOpenDialogMr = () => { |
||||||
|
this.setState({ dialogMenuForm: true }) |
||||||
|
this.showMenuRolesDialog(); |
||||||
|
} |
||||||
|
handleCloseDialogMr = (type, data) => { |
||||||
|
if (type === "save") { |
||||||
|
this.saveMenuRoles(data) |
||||||
|
} |
||||||
|
this.setState({ dialogMenuForm: false }) |
||||||
|
} |
||||||
|
|
||||||
|
toggleAddDialog = () => { |
||||||
|
this.setState({ openDialog: !this.state.openDialog }) |
||||||
|
} |
||||||
|
|
||||||
|
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.getDataTransaction() |
||||||
|
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.getDataTransaction(); |
||||||
|
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.getDataTransaction(); |
||||||
|
NotificationManager.success(`Data project role berhasil diedit`, 'Success!!'); |
||||||
|
} else { |
||||||
|
NotificationManager.error(`Data project role gagal di edit`, `Failed!!`); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
handleEdit = (data) => { |
||||||
|
this.setState({ dataEdit: data }); |
||||||
|
this.handleOpenDialog('Edit'); |
||||||
|
} |
||||||
|
|
||||||
|
handleDelete = (id) => { |
||||||
|
id == '1' ? this.setState({ alertNotDelete: true }) : |
||||||
|
this.setState({ alertDelete: true, idDelete: id }); |
||||||
|
} |
||||||
|
|
||||||
|
onShowSizeChange = (current, pageSize) => { |
||||||
|
this.setState({ rowsPerPage: pageSize }, () => { |
||||||
|
this.getDataTransaction(); |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
onPagination = (current, pageSize) => { |
||||||
|
this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => { |
||||||
|
this.getDataTransaction(); |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
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(TRANSACTION_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 { 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> |
||||||
|
<DialogForm |
||||||
|
openDialog={openDialog} |
||||||
|
closeDialog={this.handleCloseDialog} |
||||||
|
toggleDialog={() => this.toggleAddDialog} |
||||||
|
typeDialog={this.state.typeDialog} |
||||||
|
dataEdit={this.state.dataEdit} |
||||||
|
showDialog={showDialog => this.showChildDialog = showDialog} |
||||||
|
dataHs={this.state.dataIdHo} |
||||||
|
company_id={this.state.company_id} |
||||||
|
role_name={this.state.role_name} |
||||||
|
token={this.state.token} |
||||||
|
/> |
||||||
|
<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('rolesAdd')}> |
||||||
|
{ |
||||||
|
checkActMenup('/roles', 'create') ? |
||||||
|
<Button Button id="TooltipTambah" color="success" onClick={() => this.handleOpenDialog('Save')}><i className="fa fa-plus"></i> |
||||||
|
</Button> |
||||||
|
: |
||||||
|
null |
||||||
|
} |
||||||
|
</Tooltip> |
||||||
|
<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); |
||||||
@ -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); |
||||||
@ -0,0 +1,352 @@ |
|||||||
|
import * as XLSX from 'xlsx'; |
||||||
|
import React, { Component } from 'react'; |
||||||
|
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||||
|
import axios from 'axios'; |
||||||
|
import moment from 'moment'; |
||||||
|
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, STORAGE_LIMIT_INFORMATION_ALL_COMPANY, 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.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('Company'), dataIndex: 'company_name', key: 'company_name', className: "nowrap" }, |
||||||
|
{ |
||||||
|
title: this.props.t('Expired'), |
||||||
|
dataIndex: 'exp_ospro', |
||||||
|
key: 'exp_ospro', |
||||||
|
render: (text, record) => { |
||||||
|
return text ? moment(text).format("D-M-YYYY HH:mm:ss") : '-'; |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: this.props.t('Storage'), dataIndex: 'size', key: 'size' }, |
||||||
|
{ title: this.props.t('Total Project'), dataIndex: 'project_total', key: 'project_total' }, |
||||||
|
]; |
||||||
|
} |
||||||
|
|
||||||
|
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 () => { |
||||||
|
const result = await axios |
||||||
|
.get(STORAGE_LIMIT_INFORMATION_ALL_COMPANY, this.state.config) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result) { |
||||||
|
this.setState({ dataTable: result.data}); |
||||||
|
} 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