import React, { Component } from 'react'
import Images from '../../assets/Images'
import { TextField, withStyles, Snackbar, Typography } from '@material-ui/core'
import MuiAlert from '@material-ui/lab/Alert';
import api from '../../api'
import Autocomplete from '@material-ui/lab/Autocomplete'
import Constant from '../../library/Constant'
import { format } from 'date-fns';
import UploadFile from "../../library/Upload";
import { ExcelRenderer } from 'react-excel-renderer';
import * as R from 'ramda'
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
export default class EditManagementDoc extends Component {
constructor(props) {
super(props)
this.state = {
perusahaan: null,
perusahaanData: null,
getPerusahaan: null,
errorPerusahaan: false,
msgErrorPerusahaan: '',
document: null,
documentData: null,
getDocument: null,
errorDocument: false,
msgErrorDocument: '',
listPeriode: null,
periode: null,
listMonth: null,
monthId: null,
description: '',
errorDesc: false,
msgErrorDesc: '',
errorMonth: false,
msgErrorMonth: '',
errorPeriode: false,
msgErrorPeriode: '',
file: null,
alert: false,
tipeAlert: '',
messageAlert: '',
fileType: '',
konfirmasi: false,
docId: '',
document_name: "",
document_size: 0,
loadUpload: false,
sizeUpload: "1",
name: '',
disabledPeriode: false
}
}
componentDidMount() {
this.getFileSize()
if (this.props.type === 'edit') {
this.getDetailDoc()
}
}
getFileSize(){
let body = {
group: 'MAX_FILE_SIZE',
company_id: 0,
type: 'MAX_FILE_SIZE'
}
api.create().getAllSettingByType(body).then(response => {
// console.log(response);
if (response.data) {
if (response.data.status === "success") {
this.setState({
sizeUpload: response.data.data[0] ? response.data.data[0].value === undefined ? "1" : response.data.data[0].value : "1"
})
}
}
})
}
getDetailDoc() {
api.create().getDetailDocument(this.props.idoc).then(response => {
// console.log(response)
if (response.data) {
if (response.ok) {
if (response.data.status === "success") {
let data = response.data.data
this.setState({
companyId: data.company_id,
companyName: data.company_name,
categoryId: data.setting_id,
categoryName: data.values,
period: data.document_periode,
getMonthName: data.document_month,
description: data.description,
filePath: data.document_filepath,
file: data.document_filepath,
document_name: data.document_name,
document_size: data.document_size,
// id: data.approval_matrix_id,
// status: data.status,
fileType: data.document_type,
created: data.created,
updated: data.updated === null ? "" : data.updated,
loadUpload: true,
name: data.values,
disabledPeriode: data.values === 'Manual Book TIA 4.0' ? true : false
}, () => {
this.getDataCompany()
this.getDataDocument()
this.getPeriode()
this.getMonth()
})
} 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.problem, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
getDataCompany() {
api.create().getPerusahaanUserActive().then((response) => {
if (response.data) {
if (response.data.status == 'success') {
let data = response.data.data
let typeData = data.map((item) => {
return {
company_id: item.company_id,
company_name: item.company_name
}
})
let typeProps = {
options: typeData,
getOptionLabel: (option) => option.company_name,
};
let index = typeData.findIndex((val) => val.company_id == this.state.companyId)
this.setState({ perusahaan: typeProps, perusahaanData: response.data.data, getPerusahaan: index === -1 ? typeData[0] : typeData[index] })
} 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.problem, tipeAlert: 'error' })
}
})
}
getDataDocument() {
// let payload = {
// "setting_group_id": 7,
// "setting_type_id": 167,
// "company_id": 0
// }
api.create().getDocumentCategory().then(response => {
// console.log(response);
if (response.data) {
if (response.data.status == 'success') {
let data = response.data.data
let typeData = data.map((item) => {
return {
document_category_id: item.setting_id,
document_category_name: item.value
}
})
let typeProps = {
options: typeData,
getOptionLabel: (option) => option.document_category_name,
};
let index = typeData.findIndex((val) => val.document_category_id == this.state.categoryId)
this.setState({ document: typeProps, documentData: response.data.data, getDocument: index === -1 ? typeData[0] : typeData[index] })
} 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.problem, tipeAlert: 'error' })
}
})
}
getPeriode() {
api.create().getPeriodeTransaction().then(response => {
let dateNow = new Date
let year = format(dateNow, 'yyyy')
if (response.data) {
if (response.data.status === "success") {
let data = response.data.data
let periodeData = data.map((item) => {
return {
periode: item,
}
})
let defaultProps = {
options: periodeData,
getOptionLabel: (option) => option.periode,
};
let index = data.sort((a, b) => a - b).findIndex((val) => val == this.state.period)
this.setState({ listPeriode: defaultProps, periode: index == -1 ? periodeData[0] : periodeData[index] })
}
}
})
}
getMonth() {
api.create().getMonthTransaction().then(response => {
let dateNow = new Date
// let bulan = format(dateNow, 'MMMM')
if (response.data) {
if (response.data.status === "success") {
let data = response.data.data
let monthData = data.map((item) => {
return {
month_name: item.month_name,
month_id: item.month_id
}
})
let index = monthData.findIndex((val) => val.month_name == this.state.getMonthName)
let defaultProps = {
options: monthData,
getOptionLabel: (option) => option.month_name,
};
// let index = data.sort((a, b) => a - b).findIndex((val) => val.month_name == this.state.getMonth)
this.setState({ listMonth: defaultProps, monthId: index == -1 ? monthData[0] : monthData[index] })
}
}
})
}
clearMessage() {
this.setState({
errorPerusahaan: false,
msgErrorPerusahaan: '',
errorDocument: false,
msgErrorDocument: '',
errorMonth: false,
msgErrorMonth: '',
errorPeriode: false,
msgErrorPeriode: '',
})
}
fileHandler = (event) => {
let fileObj = event
let length = event.name.split(".").length
let fileType = event.name.split(".")[length - 1]
if (fileType === 'zip' || 'rar') {
this.setState({ file: event, fileType: String(fileType) })
} else {
ExcelRenderer(fileObj, (err, resp) => {
// console.log(fileType)
if (err) {
// console.log(err);
}
else {
this.setState({ file: event, fileType: String(fileType) })
}
})
}
}
validasi() {
if (String(this.props.name).includes('Manual Book TIA')){
} else {
if (R.isNil(this.state.periode)) {
this.setState({ errorPeriode: true, msgErrorPeriode: 'Period Cannot be Empty' })
} else if (R.isNil(this.state.monthId)) {
this.setState({ errorMonth: true, msgErrorMonth: 'Month Cannot be Empty' })
} else if (R.isNil(this.state.getPerusahaan)) {
this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company Cannot be Empty' })
}
}
if (R.isNil(this.state.getDocument)) {
this.setState({ errorDocument: true, msgErrorDocument: 'Category Cannot be Empty' })
} else if (R.isNil(this.state.file)) {
this.setState({ alert: true, messageAlert: 'File Cannot be Empty', tipeAlert: 'warning' })
}
else {
const formData = new FormData();
if (this.state.file == this.state.filePath){
formData.append("updated", 0);
formData.append("file", null);
} else {
formData.append("updated", 1);
formData.append("file", this.state.file);
}
if (String(this.props.name).includes('Manual Book TIA')){
formData.append("documentMonth", null);
formData.append("documentPeriode", null);
formData.append("companyId", 1);
} else {
formData.append("documentMonth", this.state.monthId.month_id);
formData.append("documentPeriode", this.state.periode.periode);
formData.append("companyId", this.state.getPerusahaan.company_id);
}
formData.append("settingId", this.state.getDocument.document_category_id);
formData.append("description", this.state.description);
formData.append("extension", this.state.fileType);
formData.append("documentId", this.props.idoc);
this.setState({ formData }, () => {
this.props.updateDocument(this.state.formData)
})
}
}
deleteFile(e) {
this.setState({ file: null })
}
closeAlert() {
this.setState({ alert: false })
}
render() {
return (
<div>
<div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
<div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Edit</span>
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
<button
type="button"
className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()}
>
<img src={Images.close} />
</button>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20, paddingTop: 20 }}>
{this.state.disabledPeriode === false ?
<div className="column-1">
<div style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.perusahaan}
debug
// clearOnEscape
id="tipe"
onChange={(event, newInputValue) => this.setState({ getPerusahaan: newInputValue }, () => this.clearMessage())}
renderInput={(params) =>
<TextField {...params}
error={this.state.errorPerusahaan}
helperText={this.state.msgErrorPerusahaan}
InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
label="Company Name" />}
value={this.state.getPerusahaan}
/>
</div>
</div>
:true}
{this.state.disabledPeriode === false ?
<div className="column-2">
<div style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.document}
// debug
clearOnEscape
id="tipe"
onChange={(event, newInputValue) => this.setState({ getDocument: newInputValue },
() => newInputValue === null ? this.setState({ disabledPeriode: false })
: newInputValue.document_category_name === 'Manual Book TIA 4.0' ?
this.setState({ disabledPeriode: true }, () => this.clearMessage())
: this.setState({ disabledPeriode: false }, () => this.clearMessage())
)}
renderInput={(params) =>
<TextField {...params}
error={this.state.errorDocument}
helperText={this.state.msgErrorDocument}
InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
label="Category" />}
value={this.state.getDocument}
/>
</div>
</div>
:
<div className="column-1">
<div style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.document}
// debug
clearOnEscape
id="tipe"
onChange={(event, newInputValue) => this.setState({ getDocument: newInputValue },
() => newInputValue === null ? this.setState({ disabledPeriode: false })
: newInputValue.document_category_name === 'Manual Book TIA 4.0' ?
this.setState({ disabledPeriode: true }, () => this.clearMessage())
: this.setState({ disabledPeriode: false }, () => this.clearMessage())
)}
renderInput={(params) =>
<TextField {...params}
error={this.state.errorDocument}
helperText={this.state.msgErrorDocument}
InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
label="Category" />}
value={this.state.getDocument}
/>
</div>
</div>
}
{this.state.disabledPeriode === false ?
<div className="column-1">
<div style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.listMonth}
// debug
clearOnEscape
id="month"
onChange={(event, newInputValue) => this.setState({ monthId: newInputValue }, () => this.clearMessage())}
style={{ width: 250 }}
renderInput={(params) =>
<TextField {...params} label="Period Month" margin="normal" style={{ marginTop: 7 }}
InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
error={this.state.errorMonth}
helperText={this.state.msgErrorMonth}
/>}
value={this.state.monthId}
/>
</div>
</div>
: true }
{this.state.disabledPeriode === false ?
<div className="column-2">
<div style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.listPeriode}
// debug
clearOnEscape
id="periode"
onChange={(event, newInputValue) => this.setState({ periode: newInputValue }, () => this.clearMessage())}
style={{ width: 250 }}
renderInput={(params) =>
<TextField {...params} label="Period Year" margin="normal" style={{ marginTop: 7 }}
InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
error={this.state.errorPeriode}
helperText={this.state.msgErrorPeriode}
/>}
value={this.state.periode}
/>
</div>
</div>
: true}
</div>
<div style={{ paddingLeft: 30, paddingRight: 30, paddingTop: 10 }}>
{this.state.loadUpload && (
<UploadFile
type={this.state.uploadStatus}
percentage={this.state.percentage}
result={this.state.result}
acceptedFiles={["xls", "xlsx", "pdf", "PDF", "docx", "doc", "pptx", "ppt", "ods", "odf" ]}
intent={"management"}
onHandle={(dt) => {
this.fileHandler(dt)
this.setState({ uploadStatus: 'idle', percentage: '0' })
}}
onDelete={(e) => {
this.deleteFile(e)
}}
onUpload={() => alert('sukses')}
value={this.state.file}
docSize={this.state.document_size}
docName={this.state.document_name}
sizeUpload={Number(this.state.sizeUpload)}
/>
)}
</div>
<div className="margin-top-10px" style={{ paddingLeft: 30, paddingRight: 30, borderRadius: 5, paddingBottom: 20 }}>
<TextField
style={{ width: '100%' }}
id="description"
label="Description"
value={this.state.description}
inputProps={{
min: 0,
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
name="Description"
onChange={(e) => {
this.setState({
description: e.target.value
})
this.clearMessage()
}}
error={this.state.errorDesc}
helperText={this.state.msgErrorDesc}
>
</TextField>
</div>
<div className="margin-top-10px" style={{ paddingLeft: 30, paddingRight: 30, borderRadius: 5, paddingBottom: 20 }}>
<div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '12%' }}>Created By</Typography>
<Typography style={{ fontSize: 11 }}>: {this.state.created}</Typography>
</div>
<div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '12%' }}>Updated By</Typography>
<Typography style={{ fontSize: 11 }}>: {this.state.updated == - null ? "" : this.state.updated}</Typography>
</div>
</div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}>
<button
type="button"
onClick={() => this.props.onClickClose()}
>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Cancel</span>
</div>
</button>
</div>
<div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
<button
type="button"
onClick={() =>
this.setState({ loading: true }, () => {
setTimeout(() => {
this.validasi()
}, 100);
})
}
>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Save</span>
</div>
</button>
</div>
</div>
</div>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
</div>
</div>
)
}
}