import React, { Component } from 'react'
import { Tabs, Tab, Typography, Paper, withStyles, Snackbar } from '@material-ui/core'
import ReactTooltip from 'react-tooltip'
import Images from '../../assets/Images'
import ManualBookTia from './ManualBookTia'
import api from '../../api'
import AuditTahunan from './AuditTahunan'
import CreateManagementDoc from './CreateManagementDoc'
import AllDocument from './AllDocument'
import QReview from './QReview'
import BOD from './BOD'
import ManualBookETMS from './ManualBookETMS'
import PopUpKonfirmasi from "./PopUpKonfirmasi";
import Constant from '../../library/Constant'
import MuiAlert from '@material-ui/lab/Alert';
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
export default class DocumentManagement extends Component {
constructor(props) {
super(props)
this.state = {
tab: 0,
listData: [],
id: 0,
btncreate: false,
btnedit: false,
btndelete: false,
load: false,
name: ''
}
}
getPermission() {
let payload = {
menu: "document management"
}
api.create().getPermission(payload).then(response => {
console.log(response)
if (response.data) {
if (response.data.status === "success") {
this.setState({
btncreate: response.data.data.create,
btnedit: response.data.data.edit,
btndelete: response.data.data.delete,
load: true
})
} else {
this.setState({
load: true
})
}
} else {
this.setState({ load: true })
}
})
}
selectTab = (event, newEvent) => {
this.setState({ tab: newEvent })
// console.log(this.state.tab)
}
componentDidMount() {
this.getDataDocument()
this.getPermission()
}
getDataDocument(id, name) {
// let payload = {
// "setting_group_id": 7,
// "setting_type_id": 167,
// "company_id": 0
// }
api.create().getDocumentCategory().then(response => {
console.log(response);
if (response) {
if (response.data.status === "success") {
this.setState({
listData: response.data.data,
id: id === undefined ? response.data.data[0].setting_id : id,
name: name === undefined ? response.data.data[0].value : name,
loadTable: true,
refresh: id === undefined ? '' : 'create'
})
// console.log(this.state.listData)
} else {
}
} else {
}
})
}
createDocument(payload, settingID) {
api.create().uploadDocument(payload).then(response => {
console.log(response)
if (response.data) {
if (response.ok) {
if (response.data.message === "The Document Already Exists in The System, Do You Want to Overwrite It?") {
this.setState({ formData: payload, docId: response.data.data.document_id }, () => {
this.setState({ konfirmasi: true })
})
}
else if (response.data.message === "Upload Document Success") {
this.getDataDocument(settingID)
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success', settingID, visibleCreate: false })
}
else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
createUploadDocument() {
const formData = this.state.formData
formData.append("documentId", this.state.docId)
// const docuID = Object.values(payload)
// const formDatas = new FormData();
// formDatas.append("file", this.state.file);
// formDatas.append("companyId", this.state.getPerusahaan.company_id);
// formDatas.append("settingId", this.state.getDocument.document_category_id);
// formDatas.append("documentPeriode", this.state.periode.periode);
// formDatas.append("description", this.state.description);
// formDatas.append("extension", this.state.fileType);
// // formDatas.append("documentId", docuID[0]);
// console.log(payload);
api.create().updateDocument(formData).then(response => {
console.log(response)
if (response.data) {
if (response.ok) {
if (response.data.status === "success") {
this.getDataDocument(this.state.settingID)
this.setState({ konfirmasi: false, alert: true, messageAlert: response.data.message, tipeAlert: 'success', visibleCreate: false })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
getID(id) {
console.log(id);
this.setState({ id })
}
closeAlert() {
this.setState({ alert: false })
}
render() {
return (
<div style={{ height: this.props.height, backgroundColor: '#f8f8f8' }}>
{/* {this.props.load && ()} */}
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
<div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Document Management</Typography>
</div>
<div style={{ padding: 20 }}>
<Paper style={{ padding: 20 }}>
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
{this.state.btncreate && <span>
<a data-tip={'Add'} data-for="add">
<div style={{ display: 'grid', justifyContent: 'flex-end' }}>
<button
type="button"
onClick={() => this.setState({ visibleCreate: true, refresh: '' })}
style={{ marginRight: 25, background: 'transparent' }}
>
<img src={Images.add} />
</button>
</div>
</a>
<ReactTooltip border={true} id="add" place="bottom" type="light" effect="solid" />
</span>}
</div>
<div style={{ display: 'flex' }}>
<Tabs
orientation="vertical"
variant="scrollable"
value={this.state.tab}
onChange={this.selectTab}
aria-label="simple tabs example"
style={{ width: 350 }}
>
{this.state.listData.map((item, index) => {
return (
<Tab
onClick={() => this.setState({ name: item.value, id: item.setting_id, refresh: '', loadTable : false }, () => this.setState({loadTable: true}))}
label={item.value}
/>
)
})}
</Tabs>
{this.state.loadTable && (
<AllDocument
data={this.state.listData[this.state.tab]}
refresh={this.state.refresh}
btnedit={this.state.btnedit}
btndelete={this.state.btndelete}
load={this.state.load}
setId={this.state.id}
/>
// this.state.id === 68542 ?
// <AuditTahunan
// data={this.state.listData[this.state.tab]}
// refresh={this.state.refresh}
// btnedit={this.state.btnedit}
// btndelete={this.state.btndelete}
// load={this.state.load}
// />
// :
// this.state.id === 68541 ?
// <ManualBookTia
// data={this.state.listData[this.state.tab]}
// refresh={this.state.refresh}
// btnedit={this.state.btnedit}
// btndelete={this.state.btndelete}
// load={this.state.load}
// />
// :
// this.state.id === 68544 ?
// <QReview
// data={this.state.listData[this.state.tab]}
// refresh={this.state.refresh}
// btnedit={this.state.btnedit}
// btndelete={this.state.btndelete}
// load={this.state.load}
// />
// :
// this.state.id === 68543 ?
// <BOD
// data={this.state.listData[this.state.tab]}
// refresh={this.state.refresh}
// btnedit={this.state.btnedit}
// btndelete={this.state.btndelete}
// load={this.state.load}
// />
// // :
// // this.state.id === 68545 ?
// // <ManualBookETMS
// // data={this.state.listData[this.state.tab]}
// // refresh={this.state.refresh}
// // />
// :
// <span>Coming Soon</span>
)}
</div>
</Paper>
</div>
{this.state.konfirmasi && (
<PopUpKonfirmasi
onClickClosePopUp={() => this.setState({ konfirmasi: false })}
uploadDocId={this.createUploadDocument.bind(this)}
/>
)}
{this.state.visibleCreate && (
<CreateManagementDoc
onClickClose={() => this.setState({ visibleCreate: false })}
// getDataDocument={this.getDataDocument.bind(this)}
createDocument={this.createDocument.bind(this)}
setting_id={this.state.id}
name={this.state.name}
/>
)}
</div>
)
}
}