Skip to content

T
Tia-dev
Commit fc565f8f authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

Merge branch 'rifka' into 'master' 

update managdoc

See merge request !306
parents cf5ba795 dbc4d681
Hide whitespace changes
Inline Side-by-side
Showing with 1086 additions and 79 deletions
src/api/index.js
View file @ fc565f8f
...@@ -205,6 +205,9 @@ const create = (type = "") => { ...@@ -205,6 +205,9 @@ const create = (type = "") => {
const uploadDocument = (body) => api.post('document/upload_document', body) const uploadDocument = (body) => api.post('document/upload_document', body)
const updateDocument = (body) => api.post('document/update_document', body) const updateDocument = (body) => api.post('document/update_document', body)
const downloadDocument = (body) => api.post('document/download_document', body) const downloadDocument = (body) => api.post('document/download_document', body)
const getPerusahaanUserActive = () => api.get('company/get_all_user_company_active')
const getDetailDocument = (id) => api.get(`document/get_document_by_id/${id}`)
const deleteDocument = (id) => api.post(`document/delete_document/${id}`)
// ------ // ------
// STEP 3 // STEP 3
...@@ -314,6 +317,9 @@ const create = (type = "") => { ...@@ -314,6 +317,9 @@ const create = (type = "") => {
uploadDocument, uploadDocument,
updateDocument, updateDocument,
downloadDocument, downloadDocument,
getPerusahaanUserActive,
getDetailDocument,
deleteDocument,
createSubmitReport, createSubmitReport,
getSubmission, getSubmission,
checkUploadMB, checkUploadMB,
......
src/container/DocumentManagement/AuditTahunan.js
View file @ fc565f8f
import React, { Component } from 'react' import React, { Component } from 'react'
import MUIDataTable from 'mui-datatables' import MUIDataTable from 'mui-datatables'
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core'; import { withStyles } from '@material-ui/core/styles';
import api from '../../api'; import { createMuiTheme, MuiThemeProvider, Snackbar } from '@material-ui/core';
import MuiAlert from '@material-ui/lab/Alert';
import Constant from '../../library/Constant';
import Images from '../../assets/Images'; import Images from '../../assets/Images';
import ReactTooltip from 'react-tooltip'; import ReactTooltip from 'react-tooltip';
import PopUpDelete from "./PopUpDelete";
import api from '../../api';
import CreateManagementDoc from './CreateManagementDoc'; import CreateManagementDoc from './CreateManagementDoc';
...@@ -11,13 +15,18 @@ var ct = require("../../library/CustomTable"); ...@@ -11,13 +15,18 @@ var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptionsManagementDocument(); const options = ct.customOptionsManagementDocument();
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
export default class AuditTahunan extends Component { export default class AuditTahunan extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
dataTable: [], dataTable: [],
visibleCreate: false, visibleCreate: false,
refresh: '' refresh: '',
alert: false,
popupDel: false,
} }
} }
...@@ -41,26 +50,51 @@ export default class AuditTahunan extends Component { ...@@ -41,26 +50,51 @@ export default class AuditTahunan extends Component {
api.create().getAllDocument(payload).then(response => { api.create().getAllDocument(payload).then(response => {
console.log(response) console.log(response)
let dataTable = response.data.data.map((item, index) => { if (response.data) {
return [ if (response.ok) {
index, if (response.data.status == 'success') {
item.document_name, let dataTable = response.data.data.map((item, index) => {
item.description, return [
item.company_name, index,
item.document_periode, item.document_name,
item.document_type, item.description,
String(Number(item.document_size) / 1000 + ' KB'), item.company_name,
item.created_by, item.document_periode,
item.created_at, item.document_type,
] String(Number(item.document_size) / 1000 + ' KB'),
}) item.created_by,
this.setState({ dataTable }) item.created_at,
let docPath = response.data.data.map((item) => { ]
return [ })
item.document_filepath this.setState({ dataTable })
] let docPath = response.data.data.map((item) => {
}) return [
this.setState({ docPath }) item.document_filepath
]
})
this.setState({ docPath })
let docId = response.data.data.map((item) => {
return [
item.document_id
]
})
this.setState({ docId })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
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', loading: false })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false })
}
}) })
} }
...@@ -80,6 +114,49 @@ export default class AuditTahunan extends Component { ...@@ -80,6 +114,49 @@ export default class AuditTahunan extends Component {
a.click(); a.click();
} }
} }
if (type === 'delete') {
this.setState({
id: this.state.docId[val],
rowData: index,
popupDel: true
})
}
if (type === 'edit') {
alert("edit")
}
}
deleteDoc = (payload) => {
this.setState({ popupDel: false })
api.create().deleteDocument(payload).then(response => {
console.log(response.data)
if (response.data) {
if (response.ok) {
if (response.data.status == 'success') {
this.getData()
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
} 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' })
}
})
}
closeAlert() {
this.setState({ alert: false })
} }
render() { render() {
...@@ -109,15 +186,53 @@ export default class AuditTahunan extends Component { ...@@ -109,15 +186,53 @@ export default class AuditTahunan extends Component {
</a> </a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" /> <ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
{/* </span>} */} {/* </span>} */}
{this.props.btnedit && <span>
<a data-tip={'Edit'} data-for="edit">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginRight: 15
}}
// onClick={() => console.log(tableMeta)}
onClick={() => this.openPopUp(tableMeta.rowData, val, 'edit')}
>
<img src={Images.editCopy} />
</button>
</a>
<ReactTooltip border={true} id="edit" place="bottom" type="light" effect="solid" />
</span>}
{this.props.btndelete && <span>
<a data-tip={'Delete'} data-for="delete">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
}}
// onClick={() => console.log(tableMeta)}
onClick={() => this.openPopUp(tableMeta.rowData, val, 'delete')}
>
<img src={Images.delete} />
</button>
</a>
<ReactTooltip border={true} id="delete" place="bottom" type="light" effect="solid" />
</span>}
</div > </div >
); );
} }
} }
}, "Nama File", "Keterangan", "Perusahaan", "Periode", "Tipe", "Ukuran", "Ditambahkan Oleh", "Ditambahkan Tanggal" }, "File Name", "Description", "Company Name", "Period", "Type", "File Size", "Created By", "Created Date"
] ]
return ( return (
<div style={{ width: '100%' }}> <div style={{ width: '100%' }}>
<div style={{ padding: 25 }}> <div style={{ padding: 25 }}>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
theme={getMuiTheme()} theme={getMuiTheme()}
...@@ -127,6 +242,16 @@ export default class AuditTahunan extends Component { ...@@ -127,6 +242,16 @@ export default class AuditTahunan extends Component {
/> />
</MuiThemeProvider> </MuiThemeProvider>
</div> </div>
{this.state.popupDel && (
<PopUpDelete
type={"delete"}
onClickClose={() => this.setState({ popupDel: false })}
data={this.state.rowData}
idoc={this.state.id}
// getList={() => this.getData.bind(this)}
deleteDoc={this.deleteDoc.bind(this)}
/>
)}
</div> </div>
) )
} }
......
src/container/DocumentManagement/BOD.js
View file @ fc565f8f
import React, { Component } from 'react' import React, { Component } from 'react'
import MUIDataTable from 'mui-datatables' import MUIDataTable from 'mui-datatables'
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core'; import { withStyles } from '@material-ui/core/styles';
import { createMuiTheme, MuiThemeProvider, Snackbar } from '@material-ui/core';
import MuiAlert from '@material-ui/lab/Alert';
import Constant from '../../library/Constant';
import api from '../../api'; import api from '../../api';
import Images from '../../assets/Images'; import Images from '../../assets/Images';
import ReactTooltip from 'react-tooltip'; import ReactTooltip from 'react-tooltip';
import PopUpDelete from "./PopUpDelete";
import CreateManagementDoc from './CreateManagementDoc'; import CreateManagementDoc from './CreateManagementDoc';
...@@ -11,13 +15,18 @@ var ct = require("../../library/CustomTable"); ...@@ -11,13 +15,18 @@ var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptionsManagementDocument(); const options = ct.customOptionsManagementDocument();
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
export default class BOD extends Component { export default class BOD extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
dataTable: [], dataTable: [],
visibleCreate: false, visibleCreate: false,
refresh: '' refresh: '',
alert: false,
popupDel: false,
} }
} }
...@@ -67,8 +76,27 @@ export default class BOD extends Component { ...@@ -67,8 +76,27 @@ export default class BOD extends Component {
] ]
}) })
this.setState({ docPath }) this.setState({ docPath })
let docId = response.data.data.map((item) => {
return [
item.document_id
]
})
this.setState({ docId })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
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', loading: false })
} }
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false })
} }
}) })
} }
...@@ -89,6 +117,48 @@ export default class BOD extends Component { ...@@ -89,6 +117,48 @@ export default class BOD extends Component {
a.click(); a.click();
} }
} }
if (type === 'delete') {
this.setState({
id: this.state.docId[val],
rowData: index,
popupDel: true
})
}
if (type === 'edit') {
alert("edit")
}
}
closeAlert() {
this.setState({ alert: false })
}
deleteDoc = (payload) => {
this.setState({ popupDel: false })
api.create().deleteDocument(payload).then(response => {
console.log(response.data)
if (response.data) {
if (response.ok) {
if (response.data.status == 'success') {
this.getData()
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
} 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' })
}
})
} }
render() { render() {
...@@ -119,15 +189,53 @@ export default class BOD extends Component { ...@@ -119,15 +189,53 @@ export default class BOD extends Component {
</a> </a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" /> <ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
{/* </span>} */} {/* </span>} */}
{this.props.btnedit && <span>
<a data-tip={'Edit'} data-for="edit">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginRight: 15
}}
// onClick={() => console.log(tableMeta)}
onClick={() => this.openPopUp(tableMeta.rowData, val, 'edit')}
>
<img src={Images.editCopy} />
</button>
</a>
<ReactTooltip border={true} id="edit" place="bottom" type="light" effect="solid" />
</span>}
{this.props.btndelete && <span>
<a data-tip={'Delete'} data-for="delete">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
}}
// onClick={() => console.log(tableMeta)}
onClick={() => this.openPopUp(tableMeta.rowData, val, 'delete')}
>
<img src={Images.delete} />
</button>
</a>
<ReactTooltip border={true} id="delete" place="bottom" type="light" effect="solid" />
</span>}
</div > </div >
); );
} }
} }
}, "Nama File", "Keterangan", "Perusahaan", "Periode", "Tipe", "Ukuran", "Ditambahkan Oleh", "Ditambahkan Tanggal" }, "File Name", "Description", "Company Name", "Period", "Type", "File Size", "Created By", "Created Date"
] ]
return ( return (
<div style={{ width: '100%' }}> <div style={{ width: '100%' }}>
<div style={{ padding: 25 }}> <div style={{ padding: 25 }}>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
theme={getMuiTheme()} theme={getMuiTheme()}
...@@ -137,6 +245,16 @@ export default class BOD extends Component { ...@@ -137,6 +245,16 @@ export default class BOD extends Component {
/> />
</MuiThemeProvider> </MuiThemeProvider>
</div> </div>
{this.state.popupDel && (
<PopUpDelete
type={"delete"}
onClickClose={() => this.setState({ popupDel: false })}
data={this.state.rowData}
idoc={this.state.id}
// getList={() => this.getData.bind(this)}
deleteDoc={this.deleteDoc.bind(this)}
/>
)}
</div> </div>
) )
} }
......
src/container/DocumentManagement/CreateManagementDoc.js
View file @ fc565f8f
import React, { Component } from 'react' import React, { Component } from 'react'
import Images from '../../assets/Images' import Images from '../../assets/Images'
import { TextField, withStyles, Snackbar } from '@material-ui/core' import { TextField, withStyles, Snackbar } from '@material-ui/core'
import MuiAlert from '@material-ui/lab/Alert';
import api from '../../api' import api from '../../api'
import Autocomplete from '@material-ui/lab/Autocomplete' import Autocomplete from '@material-ui/lab/Autocomplete'
import Constant from '../../library/Constant' import Constant from '../../library/Constant'
...@@ -9,6 +10,9 @@ import UploadFile from "../../library/Upload"; ...@@ -9,6 +10,9 @@ import UploadFile from "../../library/Upload";
import { ExcelRenderer } from 'react-excel-renderer'; import { ExcelRenderer } from 'react-excel-renderer';
import * as R from 'ramda' import * as R from 'ramda'
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
export default class CreateManagementDoc extends Component { export default class CreateManagementDoc extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
...@@ -45,7 +49,7 @@ export default class CreateManagementDoc extends Component { ...@@ -45,7 +49,7 @@ export default class CreateManagementDoc extends Component {
} }
getDataCompany() { getDataCompany() {
api.create().getPerusahaanActive().then((response) => { api.create().getPerusahaanUserActive().then((response) => {
if (response.data) { if (response.data) {
if (response.data.status == 'success') { if (response.data.status == 'success') {
let data = response.data.data let data = response.data.data
...@@ -55,10 +59,10 @@ export default class CreateManagementDoc extends Component { ...@@ -55,10 +59,10 @@ export default class CreateManagementDoc extends Component {
company_name: item.company_name company_name: item.company_name
} }
}) })
typeData.push({ // typeData.push({
company_id: 0, // company_id: 0,
company_name: 'Default' // company_name: 'Default'
}) // })
let typeProps = { let typeProps = {
options: typeData.sort((a, b) => a.company_id - b.company_id), options: typeData.sort((a, b) => a.company_id - b.company_id),
getOptionLabel: (option) => option.company_name, getOptionLabel: (option) => option.company_name,
...@@ -173,6 +177,7 @@ export default class CreateManagementDoc extends Component { ...@@ -173,6 +177,7 @@ export default class CreateManagementDoc extends Component {
this.setState({ errorDocument: true, msgErrorDocument: 'Category Cannot be Empty' }) this.setState({ errorDocument: true, msgErrorDocument: 'Category Cannot be Empty' })
} else if (R.isNil(this.state.file)) { } else if (R.isNil(this.state.file)) {
this.setState({ alert: true, messageAlert: 'File Cannot be Empty', tipeAlert: 'warning' }) this.setState({ alert: true, messageAlert: 'File Cannot be Empty', tipeAlert: 'warning' })
// this.setState({ errorDocument: true, msgErrorDocument: 'File Cannot be Empty' })
} else { } else {
const formData = new FormData(); const formData = new FormData();
formData.append("file", this.state.file); formData.append("file", this.state.file);
...@@ -191,6 +196,10 @@ export default class CreateManagementDoc extends Component { ...@@ -191,6 +196,10 @@ export default class CreateManagementDoc extends Component {
this.setState({ file: null}) this.setState({ file: null})
} }
closeAlert() {
this.setState({ alert: false })
}
render() { render() {
return ( return (
<div> <div>
...@@ -218,9 +227,10 @@ export default class CreateManagementDoc extends Component { ...@@ -218,9 +227,10 @@ export default class CreateManagementDoc extends Component {
<div style={{ padding: 10, borderRadius: 5 }}> <div style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete <Autocomplete
{...this.state.perusahaan} {...this.state.perusahaan}
debug // debug
clearOnEscape
id="tipe" id="tipe"
onChange={(event, newInputValue) => this.setState({ getPerusahaan: newInputValue }, () => this.clearMessage())} onChange={(event, newInputValue) => this.setState({ getPerusahaan: newInputValue }, () => this.clearMessage(), console.log(this.state.getPerusahaan))}
renderInput={(params) => renderInput={(params) =>
<TextField {...params} <TextField {...params}
error={this.state.errorPerusahaan} error={this.state.errorPerusahaan}
...@@ -235,15 +245,15 @@ export default class CreateManagementDoc extends Component { ...@@ -235,15 +245,15 @@ export default class CreateManagementDoc extends Component {
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete <Autocomplete
{...this.state.listPeriode} {...this.state.listPeriode}
// debug
clearOnEscape
id="periode" id="periode"
onChange={(event, newInputValue) => this.setState({ periode: newInputValue }, () => { onChange={(event, newInputValue) => this.setState({ periode: newInputValue }, () => {
this.clearMessage() this.clearMessage()
})} })}
debug
disableClearable
style={{ width: 250 }} style={{ width: 250 }}
renderInput={(params) => renderInput={(params) =>
<TextField {...params} label="Periode" margin="normal" style={{ marginTop: 7 }} <TextField {...params} label="Period" margin="normal" style={{ marginTop: 7 }}
InputProps={{ ...params.InputProps, style: { fontSize: 11 } }} InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }} InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
/>} />}
...@@ -255,7 +265,8 @@ export default class CreateManagementDoc extends Component { ...@@ -255,7 +265,8 @@ export default class CreateManagementDoc extends Component {
<div style={{ padding: 10, borderRadius: 5 }}> <div style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete <Autocomplete
{...this.state.document} {...this.state.document}
debug // debug
clearOnEscape
id="tipe" id="tipe"
onChange={(event, newInputValue) => this.setState({ getDocument: newInputValue }, () => this.clearMessage())} onChange={(event, newInputValue) => this.setState({ getDocument: newInputValue }, () => this.clearMessage())}
renderInput={(params) => renderInput={(params) =>
...@@ -341,6 +352,11 @@ export default class CreateManagementDoc extends Component { ...@@ -341,6 +352,11 @@ export default class CreateManagementDoc extends Component {
</div> </div>
</div> </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>
</div> </div>
) )
......
src/container/DocumentManagement/DocumentManagement.js
View file @ fc565f8f
...@@ -22,10 +22,39 @@ export default class DocumentManagement extends Component { ...@@ -22,10 +22,39 @@ export default class DocumentManagement extends Component {
this.state = { this.state = {
tab: 0, tab: 0,
listData: [], listData: [],
id: 0 id: 0,
btncreate: false,
btnedit: false,
btndelete: false,
load: false,
} }
} }
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) => { selectTab = (event, newEvent) => {
this.setState({ tab: newEvent }) this.setState({ tab: newEvent })
console.log(this.state.tab) console.log(this.state.tab)
...@@ -33,6 +62,7 @@ export default class DocumentManagement extends Component { ...@@ -33,6 +62,7 @@ export default class DocumentManagement extends Component {
componentDidMount() { componentDidMount() {
this.getDataDocument() this.getDataDocument()
this.getPermission()
} }
getDataDocument(id) { getDataDocument(id) {
...@@ -188,31 +218,43 @@ export default class DocumentManagement extends Component { ...@@ -188,31 +218,43 @@ export default class DocumentManagement extends Component {
<AuditTahunan <AuditTahunan
data={this.state.listData[this.state.tab]} data={this.state.listData[this.state.tab]}
refresh={this.state.refresh} refresh={this.state.refresh}
btnedit={this.state.btnedit}
btndelete={this.state.btndelete}
load={this.state.load}
/> />
: :
this.state.id === 68541 ? this.state.id === 68541 ?
<ManualBookTia <ManualBookTia
data={this.state.listData[this.state.tab]} data={this.state.listData[this.state.tab]}
refresh={this.state.refresh} refresh={this.state.refresh}
btnedit={this.state.btnedit}
btndelete={this.state.btndelete}
load={this.state.load}
/> />
: :
this.state.id === 68544 ? this.state.id === 68544 ?
<QReview <QReview
data={this.state.listData[this.state.tab]} data={this.state.listData[this.state.tab]}
refresh={this.state.refresh} refresh={this.state.refresh}
btnedit={this.state.btnedit}
btndelete={this.state.btndelete}
load={this.state.load}
/> />
: :
this.state.id === 68543 ? this.state.id === 68543 ?
<BOD <BOD
data={this.state.listData[this.state.tab]} data={this.state.listData[this.state.tab]}
refresh={this.state.refresh} refresh={this.state.refresh}
btnedit={this.state.btnedit}
btndelete={this.state.btndelete}
load={this.state.load}
/> />
: // :
this.state.id === 68545 ? // this.state.id === 68545 ?
<ManualBookETMS // <ManualBookETMS
data={this.state.listData[this.state.tab]} // data={this.state.listData[this.state.tab]}
refresh={this.state.refresh} // refresh={this.state.refresh}
/> // />
: :
<span>Coming Soon</span> <span>Coming Soon</span>
...@@ -233,6 +275,7 @@ export default class DocumentManagement extends Component { ...@@ -233,6 +275,7 @@ export default class DocumentManagement extends Component {
// getDataDocument={this.getDataDocument.bind(this)} // getDataDocument={this.getDataDocument.bind(this)}
createDocument={this.createDocument.bind(this)} createDocument={this.createDocument.bind(this)}
setting_id={this.state.id} setting_id={this.state.id}
btncreate={this.state.btncreate}
/> />
)} )}
</div> </div>
......
src/container/DocumentManagement/EditManagementDoc.js 0 → 100644
View file @ fc565f8f
import React, { Component } from 'react'
import Images from '../../assets/Images'
import { TextField, withStyles, Snackbar } 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,
description: '',
errorDesc: false,
msgErrorDesc: '',
file: null,
alert: false,
tipeAlert: '',
messageAlert: '',
fileType: '',
konfirmasi: false,
docId:''
}
}
componentDidMount() {
if (this.props.type === 'edit') {
this.getDetailDoc()
this.getDataCompany()
this.getDataDocument()
this.getPeriode()
}
}
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,
description: data.description
// id: data.approval_matrix_id,
// status: data.status,
// created: data.created,
// updated: data.updated === null ? "" : data.updated
}, () => this.getDataCompany(), this.getDataDocument(), this.getPeriode())
} 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
}
})
// typeData.push({
// company_id: 0,
// company_name: 'Default'
// })
let index = typeData.findIndex((val) => val.company_id == this.state.companyId)
let typeProps = {
options: typeData.sort((a, b) => a.company_id - b.company_id),
getOptionLabel: (option) => option.company_name,
};
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 {
alert(response.problem)
}
})
}
getDataDocument() {
let payload = {
"setting_group_id": 7,
"setting_type_id": 167,
"company_id": 0
}
api.create().getDocumentCategory(payload).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.sort((a, b) => a.document_category_id - b.document_category_id),
getOptionLabel: (option) => option.document_category_name,
};
this.setState({ document: typeProps, documentData: response.data.data })
} 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 {
alert(response.problem)
}
})
}
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] })
}
}
})
}
clearMessage() {
this.setState({
errorPerusahaan: false,
msgErrorPerusahaan: '',
errorDocument: false,
msgErrorDocument: '',
})
}
fileHandler = (event) => {
let fileObj = event
let length = event.name.split(".").length
let fileType = event.name.split(".")[length - 1]
ExcelRenderer(fileObj, (err, resp) => {
console.log(fileType)
if (err) {
console.log(err);
}
else {
this.setState({ file: event, fileType: String(fileType) })
}
})
}
validasi() {
if (R.isNil(this.state.getPerusahaan)) {
this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company Cannot be Empty' })
} else 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' })
// this.setState({ errorDocument: true, msgErrorDocument: 'File Cannot be Empty' })
} else {
const formData = new FormData();
formData.append("file", this.state.file);
formData.append("companyId", this.state.getPerusahaan.company_id);
formData.append("settingId", this.state.getDocument.document_category_id);
formData.append("documentPeriode", this.state.periode.periode);
formData.append("description", this.state.description);
formData.append("extension", this.state.fileType);
this.setState({ formData }, ()=> {
this.props.createDocument(this.state.formData, this.props.setting_id)
})
}
}
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 }}>
<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 className="margin-top-10px" 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" margin="normal" style={{ marginTop: 7 }}
InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
/>}
value={this.state.periode}
/>
</div>
</div>
<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 }, () => 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>
<div style={{ paddingLeft: 30, paddingRight: 30 }}>
<UploadFile
type={this.state.uploadStatus}
percentage={this.state.percentage}
result={this.state.result}
acceptedFiles={["xls", "xlsx", "pdf", "PDF"]}
intent={"management"}
onHandle={(dt) => {
this.fileHandler(dt)
this.setState({ uploadStatus: 'idle', percentage: '0' })
}}
onDelete={(e) => {
this.deleteFile(e)
}}
onUpload={() => alert('sukses')}
/>
</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="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.validasi()}
>
<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>
)
}
}
src/container/DocumentManagement/ManualBookTia.js
View file @ fc565f8f
import React, { Component } from 'react' import React, { Component } from 'react'
import ReactTooltip from 'react-tooltip';
import { createMuiTheme, MuiThemeProvider, Snackbar } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
import MuiAlert from '@material-ui/lab/Alert';
import MUIDataTable from 'mui-datatables' import MUIDataTable from 'mui-datatables'
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core'; import Constant from '../../library/Constant';
import api from '../../api';
import Images from '../../assets/Images'; import Images from '../../assets/Images';
import ReactTooltip from 'react-tooltip'; import EditManagementDoc from "./EditManagementDoc";
import PopUpDelete from "./PopUpDelete";
import api from '../../api';
var ct = require("../../library/CustomTable"); var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions(); const options = ct.customOptions();
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
export default class ManualBookTia extends Component { export default class ManualBookTia extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
dataTable: [], dataTable: [],
visibleCreate: false, visibleCreate: false,
visibleEdit: false,
refresh: '', refresh: '',
alert: false, alert: false,
popupDel: false,
} }
} }
...@@ -40,32 +50,60 @@ export default class ManualBookTia extends Component { ...@@ -40,32 +50,60 @@ export default class ManualBookTia extends Component {
api.create().getAllDocument(payload).then(response => { api.create().getAllDocument(payload).then(response => {
console.log(response) console.log(response)
let dataTable = response.data.data.map((item, index) => { if (response.data) {
return [ if (response.ok) {
index, if (response.data.status == 'success') {
item.document_name, let dataTable = response.data.data.map((item, index) => {
item.description, return [
item.company_name, index,
item.document_periode, item.document_name,
item.document_type, item.description,
String(Number(item.document_size) / 1000 + ' KB'), item.company_name,
item.created_by, item.document_periode,
item.created_at, item.document_type,
] String(Number(item.document_size) / 1000 + ' KB'),
}) item.created_by,
this.setState({ dataTable }) item.created_at,
let docPath = response.data.data.map((item) => { ]
return [ })
item.document_filepath this.setState({ dataTable })
] let docPath = response.data.data.map((item) => {
}) return [
this.setState({ docPath }) item.document_filepath
]
})
this.setState({ docPath })
let docId = response.data.data.map((item) => {
return [
item.document_id
]
})
this.setState({ docId })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
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', loading: false })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false })
}
}) })
} }
closeAlert() {
this.setState({ alert: false })
}
openPopUp = async (index, val, type) =>{ openPopUp = async (index, val, type) =>{
if (type === 'download') { if (type === 'download') {
console.log(this.state.docPath[val])
let res = await fetch( let res = await fetch(
"https://tia.eksad.com/tia-reporting-dev/public/document/download_document?documentName="+this.state.docPath[val]+"&&fileType="+index[5] "https://tia.eksad.com/tia-reporting-dev/public/document/download_document?documentName="+this.state.docPath[val]+"&&fileType="+index[5]
) )
...@@ -79,6 +117,48 @@ export default class ManualBookTia extends Component { ...@@ -79,6 +117,48 @@ export default class ManualBookTia extends Component {
a.click(); a.click();
} }
} }
if (type === 'delete') {
this.setState({
id: this.state.docId[val],
rowData: index,
popupDel: true
})
}
if (type === 'edit') {
this.setState({
id: this.state.docId[val],
rowData: index,
visibleEdit: true
})
}
}
deleteDoc = (payload) => {
this.setState({ popupDel: false })
api.create().deleteDocument(payload).then(response => {
console.log(response.data)
if (response.data) {
if (response.ok) {
if (response.data.status == 'success') {
this.getData()
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
} 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' })
}
})
} }
render() { render() {
...@@ -88,7 +168,7 @@ export default class ManualBookTia extends Component { ...@@ -88,7 +168,7 @@ export default class ManualBookTia extends Component {
filter: false, filter: false,
sort: false, sort: false,
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
console.log(tableMeta) // console.log(tableMeta)
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{/* {this.state.btnedit && <span> */} {/* {this.state.btnedit && <span> */}
...@@ -108,15 +188,53 @@ export default class ManualBookTia extends Component { ...@@ -108,15 +188,53 @@ export default class ManualBookTia extends Component {
</a> </a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" /> <ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
{/* </span>} */} {/* </span>} */}
{this.props.btnedit && <span>
<a data-tip={'Edit'} data-for="edit">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginRight: 15
}}
// onClick={() => console.log(tableMeta)}
onClick={() => this.openPopUp(tableMeta.rowData, val, 'edit')}
>
<img src={Images.editCopy} />
</button>
</a>
<ReactTooltip border={true} id="edit" place="bottom" type="light" effect="solid" />
</span>}
{this.props.btndelete && <span>
<a data-tip={'Delete'} data-for="delete">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
}}
// onClick={() => console.log(tableMeta)}
onClick={() => this.openPopUp(tableMeta.rowData, val, 'delete')}
>
<img src={Images.delete} />
</button>
</a>
<ReactTooltip border={true} id="delete" place="bottom" type="light" effect="solid" />
</span>}
</div > </div >
); );
} }
} }
}, "Nama File", "Keterangan", "Perusahaan", "Tipe", "Ukuran", "Ditambahkan Oleh", "Ditambahkan Tanggal" }, "File Name", "Description", "Company Name", "Type", "File Size", "Created By", "Created Date"
] ]
return ( return (
<div style={{ width: '100%' }}> <div style={{ width: '100%' }}>
<div style={{ padding: 25 }}> <div style={{ padding: 25 }}>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
theme={getMuiTheme()} theme={getMuiTheme()}
...@@ -126,6 +244,25 @@ export default class ManualBookTia extends Component { ...@@ -126,6 +244,25 @@ export default class ManualBookTia extends Component {
/> />
</MuiThemeProvider> </MuiThemeProvider>
</div> </div>
{this.state.popupDel && (
<PopUpDelete
type={"delete"}
onClickClose={() => this.setState({ popupDel: false })}
data={this.state.rowData}
idoc={this.state.id}
// getList={() => this.getData.bind(this)}
deleteDoc={this.deleteDoc.bind(this)}
/>
)}
{this.state.visibleEdit && (
<EditManagementDoc
type={"edit"}
onClickClose={() => this.setState({ visibleEdit: false })}
data={this.state.rowData}
idoc={this.state.id}
// updateAM={this.updateAM.bind(this)}
/>
)}
</div> </div>
) )
} }
......
src/container/DocumentManagement/PopUpDelete.js 0 → 100644
View file @ fc565f8f
import React, { Component } from 'react';
import Images from '../../assets/Images';
import { Typography } from '@material-ui/core';
import api from "../../api";
import Constant from '../../library/Constant';
export default class PopUpDelete extends Component {
constructor(props) {
super(props)
this.state = {
id: '',
getApprovedBy: null,
getTypes: null,
}
}
componentDidMount() {
if (this.props.type === 'delete') {
console.log(this.props.idoc)
console.log(this.props.data)
}
}
onClickDelete() {
if (this.props.type == 'delete') {
let payload = this.props.idoc
this.props.deleteDoc(payload)
}
}
render() {
return (
<div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
<div style={{ display: 'flex', justifyContent: 'center', paddingTop: 20 }}>
<img src={Images.failed} />
</div>
<div style={{ display: 'grid', justifyContent: 'center', marginTop: 20, paddingBottom: 20 }}>
<span style={{ textAlign: 'center', fontSize: 14, fontWeight: 'bold', fontFamily: 'Nunito Sans, sans-serif' }}>
Delete {this.props.data[1]} ?
</span>
</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.onClickDelete()}
>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Delete</span>
</div>
</button>
</div>
</div>
</div>
</div>
);
}
}
src/container/DocumentManagement/QReview.js
View file @ fc565f8f
...@@ -2,11 +2,12 @@ import React, { Component } from 'react' ...@@ -2,11 +2,12 @@ import React, { Component } from 'react'
import MUIDataTable from 'mui-datatables' import MUIDataTable from 'mui-datatables'
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import { createMuiTheme, MuiThemeProvider, Snackbar } from '@material-ui/core'; import { createMuiTheme, MuiThemeProvider, Snackbar } from '@material-ui/core';
import api from '../../api';
import MuiAlert from '@material-ui/lab/Alert'; import MuiAlert from '@material-ui/lab/Alert';
import Constant from '../../library/Constant'; import Constant from '../../library/Constant';
import Images from '../../assets/Images'; import Images from '../../assets/Images';
import ReactTooltip from 'react-tooltip'; import ReactTooltip from 'react-tooltip';
import api from '../../api';
import PopUpDelete from "./PopUpDelete";
import CreateManagementDoc from './CreateManagementDoc'; import CreateManagementDoc from './CreateManagementDoc';
...@@ -25,6 +26,7 @@ export default class QReview extends Component { ...@@ -25,6 +26,7 @@ export default class QReview extends Component {
visibleCreate: false, visibleCreate: false,
refresh: '', refresh: '',
alert: false, alert: false,
popupDel: false,
} }
} }
...@@ -71,6 +73,12 @@ export default class QReview extends Component { ...@@ -71,6 +73,12 @@ export default class QReview extends Component {
] ]
}) })
this.setState({ docPath }) this.setState({ docPath })
let docId = response.data.data.map((item) => {
return [
item.document_id
]
})
this.setState({ docId })
} else { } else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => { this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
if (response.data.message.includes("Someone Logged In")) { if (response.data.message.includes("Someone Logged In")) {
...@@ -105,12 +113,50 @@ export default class QReview extends Component { ...@@ -105,12 +113,50 @@ export default class QReview extends Component {
a.click(); a.click();
} }
} }
if (type === 'delete') {
this.setState({
id: this.state.docId[val],
rowData: index,
popupDel: true
})
}
if (type === 'edit') {
alert("edit")
}
} }
closeAlert() { closeAlert() {
this.setState({ alert: false }) this.setState({ alert: false })
} }
deleteDoc = (payload) => {
this.setState({ popupDel: false })
api.create().deleteDocument(payload).then(response => {
console.log(response.data)
if (response.data) {
if (response.ok) {
if (response.data.status == 'success') {
this.getData()
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
} 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' })
}
})
}
render() { render() {
let columns = [{ let columns = [{
name: "Action", name: "Action",
...@@ -120,8 +166,23 @@ export default class QReview extends Component { ...@@ -120,8 +166,23 @@ export default class QReview extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{/* {this.state.btnedit && <span> */} <a data-tip={'Download'} data-for="download">
<a data-tip={'Download'} data-for="download"> <button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginRight: 15
}}
// onClick={() => console.log(tableMeta)}
onClick={() => this.openPopUp(tableMeta.rowData, val, 'download')}
>
<img src={Images.download} />
</button>
</a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
{this.props.btnedit && <span>
<a data-tip={'Edit'} data-for="edit">
<button <button
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
...@@ -130,18 +191,34 @@ export default class QReview extends Component { ...@@ -130,18 +191,34 @@ export default class QReview extends Component {
marginRight: 15 marginRight: 15
}} }}
// onClick={() => console.log(tableMeta)} // onClick={() => console.log(tableMeta)}
onClick={() => this.openPopUp(tableMeta.rowData, val, 'download')} onClick={() => this.openPopUp(tableMeta.rowData, val, 'edit')}
>
<img src={Images.editCopy} />
</button>
</a>
<ReactTooltip border={true} id="edit" place="bottom" type="light" effect="solid" />
</span>}
{this.props.btndelete && <span>
<a data-tip={'Delete'} data-for="delete">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
}}
// onClick={() => console.log(tableMeta)}
onClick={() => this.openPopUp(tableMeta.rowData, val, 'delete')}
> >
<img src={Images.download} /> <img src={Images.delete} />
</button> </button>
</a> </a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" /> <ReactTooltip border={true} id="delete" place="bottom" type="light" effect="solid" />
{/* </span>} */} </span>}
</div > </div >
); );
} }
} }
}, "Nama File", "Keterangan", "Perusahaan", "Periode", "Tipe", "Ukuran", "Ditambahkan Oleh", "Ditambahkan Tanggal" }, "File Name", "Description", "Company Name", "Period", "Type", "File Size", "Created By", "Created Date"
] ]
return ( return (
<div style={{ width: '100%' }}> <div style={{ width: '100%' }}>
...@@ -160,6 +237,16 @@ export default class QReview extends Component { ...@@ -160,6 +237,16 @@ export default class QReview extends Component {
/> />
</MuiThemeProvider> </MuiThemeProvider>
</div> </div>
{this.state.popupDel && (
<PopUpDelete
type={"delete"}
onClickClose={() => this.setState({ popupDel: false })}
data={this.state.rowData}
idoc={this.state.id}
// getList={() => this.getData.bind(this)}
deleteDoc={this.deleteDoc.bind(this)}
/>
)}
</div> </div>
) )
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment