Skip to content

T
Tia-dev
Commit 1e92aec5 authored by Rifka Kurnia Irfiana's avatar Rifka Kurnia Irfiana
Browse files
Options

update download, visualisasi, preview

parent b249bf0a
Hide whitespace changes
Inline Side-by-side
Showing with 318 additions and 62 deletions
src/container/ApprovalMatrix/ApprovalMatrix.js
View file @ 1e92aec5
...@@ -5,10 +5,12 @@ import { TextField, InputBase } from "@material-ui/core"; ...@@ -5,10 +5,12 @@ import { TextField, InputBase } from "@material-ui/core";
import { ExcelRenderer } from 'react-excel-renderer'; import { ExcelRenderer } from 'react-excel-renderer';
import Images from '../../assets/Images'; import Images from '../../assets/Images';
import MUIDataTable from "mui-datatables"; import MUIDataTable from "mui-datatables";
import ReactTooltip from 'react-tooltip';
import UploadFile from "../../library/Upload"; import UploadFile from "../../library/Upload";
import CreateApprovalMatrix from "./CreateApprovalMatrix"; import CreateApprovalMatrix from "./CreateApprovalMatrix";
import EditApprovalMatrix from "./EditApprovalMatrix"; import EditApprovalMatrix from "./EditApprovalMatrix";
import VisualisasiAM from "./VisualisasiAM"; import VisualisasiAM from "./VisualisasiAM";
import PopUpFailedSave from "../../library/PopUpFailedSave";
import api from "../../api"; import api from "../../api";
var ct = require("../../library/CustomTable"); var ct = require("../../library/CustomTable");
...@@ -30,7 +32,8 @@ export default class ApprovalMatrix extends Component { ...@@ -30,7 +32,8 @@ export default class ApprovalMatrix extends Component {
search: "", search: "",
cols: null, cols: null,
rows: null, rows: null,
dataLoaded: false dataLoaded: false,
popupError: false
} }
this.fileHandler = this.fileHandler.bind(this); this.fileHandler = this.fileHandler.bind(this);
} }
...@@ -39,29 +42,223 @@ export default class ApprovalMatrix extends Component { ...@@ -39,29 +42,223 @@ export default class ApprovalMatrix extends Component {
let fileObj = event let fileObj = event
ExcelRenderer(fileObj, (err, resp) => { ExcelRenderer(fileObj, (err, resp) => {
if (err) { if (err) {
// console.log(err); console.log(err);
} }
else { else {
let judul = resp.rows[0] let judul = resp.rows[2]
let isi = resp.rows.slice(1) let isi = resp.rows.slice(3)
// let body = isi.map((item) => { let payload = []
// return { isi.map((item, index) => {
// item if (item.length > 0) {
// ] payload.push({
// }) // id: index + 1,
// console.log(JSON.stringify(isi)); approval_type_name: item[0],
this.setState({ orders: item[1],
dataLoaded: true, fullname: item[2],
cols: judul, operator_type_name: item[3],
rows: isi start_date: item[4],
}); end_date: item[5],
})
}
})
let body = {
approval_matrix: payload
}
this.setState({ payload: body, buttonError: false })
api.create().checkUploadAM(body).then(response => {
console.log(response.data)
if (response.data.status === "success") {
let dataRow = response.data.data.map((item, index) => {
return [
index + 1,
item.approval_type_name,
item.orders,
item.fullname,
item.operator_type_name,
item.start_date,
item.end_date,
item.error
]
})
let columns = [
"ID",
{
name: "Tipe Persetujuan",
options: {
customBodyRender: (val, tableMeta) => {
// console.log(tableMeta)
let check = null
if (tableMeta.rowData[7] != null) {
check = tableMeta.rowData[7].findIndex((val) => val.field.includes('approval_type_name'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[7] != null && check > -1 ?
<a data-tip={tableMeta.rowData[7][check].message} data-for="typename">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="typename" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Order",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[7] != null) {
check = tableMeta.rowData[7].findIndex((val) => val.field.includes('orders'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[7] != null && check > -1 ?
<a data-tip={tableMeta.rowData[7][check].message} data-for="order">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="order" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Nama Pemberi Persetujuan",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[7] != null) {
check = tableMeta.rowData[7].findIndex((val) => val.field.includes('fullname'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[7] != null && check > -1 ?
<a data-tip={tableMeta.rowData[7][check].message} data-for="fullname">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="fullname" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Operator",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[7] != null) {
check = tableMeta.rowData[7].findIndex((val) => val.field.includes('operator_type_name'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[7] != null && check > -1 ?
<a data-tip={tableMeta.rowData[7][check].message} data-for="operatorname">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="operatorname" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Berlaku Mulai",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[7] != null) {
check = tableMeta.rowData[7].findIndex((val) => val.field.includes('start_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[7] != null && check > -1 ?
<a data-tip={tableMeta.rowData[7][check].message} data-for="startdate">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="startdate" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Berakhir Hingga",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[7] != null) {
check = tableMeta.rowData[7].findIndex((val) => val.field.includes('end_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[7] != null && check > -1 ?
<a data-tip={tableMeta.rowData[7][check].message} data-for="enddate">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="enddate" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "",
options: {
display: false
}
}
]
// console.log(dataRow);
this.setState({
dataLoaded: true,
cols: columns,
rows: dataRow
});
}
// console.log(response);
})
} }
}); });
} }
componentDidMount() { componentDidMount() {
this.getData() this.getData()
console.log(this.props.height)
} }
getData() { getData() {
...@@ -137,12 +334,24 @@ export default class ApprovalMatrix extends Component { ...@@ -137,12 +334,24 @@ export default class ApprovalMatrix extends Component {
}) })
} }
updateVAM = (payload) => {
this.setState({ visibleVisual: false, visibleAM: true })
api.create().updateVAM(payload).then(response => {
// console.log(response.data)
if (response.data.status == 'success') {
this.getData()
} else {
alert(response.data.message)
}
})
}
downloadFile = async () => { downloadFile = async () => {
let res = await fetch( let res = await fetch(
"https://tia.eksad.com/tia-reporting-dev/public/attachment/download_file?fileName=ApprovalMatrixTemplate&&fileType=xlsx" "https://tia.eksad.com/tia-reporting-dev/public/attachment/download_file?fileName=ApprovalMatrixTemplate&&fileType=xlsx"
) )
res = await res.blob() res = await res.blob()
console.log(res) // console.log(res)
if (res.size > 0) { if (res.size > 0) {
let url = window.URL.createObjectURL(res); let url = window.URL.createObjectURL(res);
let a = document.createElement('a'); let a = document.createElement('a');
...@@ -153,19 +362,28 @@ export default class ApprovalMatrix extends Component { ...@@ -153,19 +362,28 @@ export default class ApprovalMatrix extends Component {
} }
downloadDataTable = async () => { downloadDataTable = async () => {
alert('link belum ada') // alert('link belum ada')
// let res = await fetch( let res = await fetch(
// "https://tia.eksad.com/tia-reporting-dev/public/business_unit/export_business_unit" "https://tia.eksad.com/tia-reporting-dev/public/approval_matrix/export_approval_matrix"
// ) )
// res = await res.blob() res = await res.blob()
// console.log(res) // console.log(res)
// if (res.size > 0) { if (res.size > 0) {
// let url = window.URL.createObjectURL(res); let url = window.URL.createObjectURL(res);
// let a = document.createElement('a'); let a = document.createElement('a');
// a.href = url; a.href = url;
// a.download = 'Business Unit.xlsx'; a.download = 'Approval Matrix.xlsx';
// a.click(); a.click();
// } }
}
uploadAM() {
api.create().uploadAM(this.state.payload).then(response => {
console.log(response.data)
// console.log(this.state.payload)
this.getData()
// this.setState({ visibleAM: true })
})
} }
render() { render() {
...@@ -373,6 +591,7 @@ export default class ApprovalMatrix extends Component { ...@@ -373,6 +591,7 @@ export default class ApprovalMatrix extends Component {
<VisualisasiAM <VisualisasiAM
onClickClose={() => this.setState({ visibleVisual: false, visibleAM: true })} onClickClose={() => this.setState({ visibleVisual: false, visibleAM: true })}
height= {this.props.height} height= {this.props.height}
updateVAM={this.updateVAM.bind(this)}
/> />
: :
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
...@@ -398,15 +617,21 @@ export default class ApprovalMatrix extends Component { ...@@ -398,15 +617,21 @@ export default class ApprovalMatrix extends Component {
<button <button
type="button" type="button"
onClick={() => this.setState({ visibleAM: true })} onClick={() => this.setState({ visibleAM: true })}
style={{ marginRight: 20}} style={{ marginRight: 20 }}
> >
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span> <span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div> </div>
</button> </button>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <button
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span> type="button"
</div> onClick={() => this.state.buttonError ? this.setState({ popupError: true }) : this.uploadAM()}
style={{}}
>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -428,6 +653,9 @@ export default class ApprovalMatrix extends Component { ...@@ -428,6 +653,9 @@ export default class ApprovalMatrix extends Component {
updateAM={this.updateAM.bind(this)} updateAM={this.updateAM.bind(this)}
/> />
)} )}
{this.state.popupError && (
<PopUpFailedSave onClickClose={()=> this.setState({ popupError: false })} />
)}
{this.state.visibleUpload && ( {this.state.visibleUpload && (
<div className="test app-popup-show"> <div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}> <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
......
src/container/ApprovalMatrix/CreateApprovalMatrix.js
View file @ 1e92aec5
...@@ -22,7 +22,9 @@ export default class CreateApprovalMatrix extends Component { ...@@ -22,7 +22,9 @@ export default class CreateApprovalMatrix extends Component {
endDate: '', endDate: '',
userData: [], userData: [],
value: null, value: null,
date: new Date() date: new Date(),
errorOrder: false,
msgErrOrder: '',
} }
} }
...@@ -105,22 +107,34 @@ export default class CreateApprovalMatrix extends Component { ...@@ -105,22 +107,34 @@ export default class CreateApprovalMatrix extends Component {
let data = this.state let data = this.state
let isDate = type !== '' ? true : false let isDate = type !== '' ? true : false
if (isDate && type == 'start_date') { if (isDate && type == 'start_date') {
this.setState({ startDate: format(e, 'yyyy-MM-dd') }, () => { this.setState({ startDate: format(e, 'yyyy-MM-dd'),
errorOrder: false,
msgErrOrder: '',
// }, () => {
// console.log(this.state.startDate) // console.log(this.state.startDate)
}) })
} else if (isDate && type == 'end_date') { } else if (isDate && type == 'end_date') {
this.setState({ endDate: format(e, 'yyyy-MM-dd') }, () => { this.setState({ endDate: format(e, 'yyyy-MM-dd'),
errorOrder: false,
msgErrOrder: '',
// }, () => {
// console.log(this.state.endDate) // console.log(this.state.endDate)
}) })
} else { } else {
// this.setState({...data, tempData: {...this.state.tempData, [e.target.name] : e.target.value}}) // this.setState({...data, tempData: {...this.state.tempData, [e.target.name] : e.target.value}})
this.setState({
errorOrder: false,
msgErrOrder: '',
})
} }
} }
validasi() { validasi() {
if (R.isNil(this.state.typeId)) return alert("Tipe Persetujuan is Required."); if (R.isNil(this.state.typeId)) return alert("Tipe Persetujuan is Required.");
if (R.isEmpty(this.state.order)) return alert("Order is Required."); if (R.isEmpty(this.state.order)) {
this.setState({ errorOrder: true, msgErrOrder: 'Order is Required.'})
}
if (R.isNil(this.state.userId)) return alert("Pemberi Persetujuan is Required."); if (R.isNil(this.state.userId)) return alert("Pemberi Persetujuan is Required.");
if (R.isNil(this.state.operatorId)) return alert("Operator is Required."); if (R.isNil(this.state.operatorId)) return alert("Operator is Required.");
if (!R.isEmpty(this.state.startDate) && !R.isEmpty(this.state.endDate) && (this.state.startDate > this.state.endDate)) return alert("Masa Berlaku Tidak Boleh Kurang Dari Tanggal Mulai"); if (!R.isEmpty(this.state.startDate) && !R.isEmpty(this.state.endDate) && (this.state.startDate > this.state.endDate)) return alert("Masa Berlaku Tidak Boleh Kurang Dari Tanggal Mulai");
...@@ -224,6 +238,8 @@ export default class CreateApprovalMatrix extends Component { ...@@ -224,6 +238,8 @@ export default class CreateApprovalMatrix extends Component {
id="order" id="order"
label="Order" label="Order"
value={this.state.order} value={this.state.order}
error={this.state.errorOrder}
helperText={this.state.msgErrOrder}
onChange={(e) => this.setState({ order: e.target.value })} onChange={(e) => this.setState({ order: e.target.value })}
inputProps={{ inputProps={{
style: { style: {
......
src/container/ApprovalMatrix/VisualisasiAM.js
View file @ 1e92aec5
...@@ -47,13 +47,13 @@ export default class VisualisasiAM extends Component { ...@@ -47,13 +47,13 @@ export default class VisualisasiAM extends Component {
api.create().getTypeAM().then((response) => { api.create().getTypeAM().then((response) => {
if (response.data.status == 'success') { if (response.data.status == 'success') {
let data = response.data.data let data = response.data.data
// console.log(data)
let typeData = data.map((item) => { let typeData = data.map((item) => {
return { return {
approval_type_id: item.approval_type_id, approval_type_id: item.approval_type_id,
approval_type_name: item.approval_type_name approval_type_name: item.approval_type_name
} }
}) })
// console.log(userData)
let typeProps = { let typeProps = {
options: typeData, options: typeData,
getOptionLabel: (option) => option.approval_type_name, getOptionLabel: (option) => option.approval_type_name,
...@@ -73,7 +73,7 @@ export default class VisualisasiAM extends Component { ...@@ -73,7 +73,7 @@ export default class VisualisasiAM extends Component {
api.create().searchAM(body).then(response => { api.create().searchAM(body).then(response => {
if (response.data.status == 'success') { if (response.data.status == 'success') {
let data = response.data.data let data = response.data.data
console.log(data) // console.log(data)
let listVisual = [] let listVisual = []
data.map((item, index) => { data.map((item, index) => {
let indexId = listVisual.findIndex((val) => val.orderId == item.orders) let indexId = listVisual.findIndex((val) => val.orderId == item.orders)
...@@ -82,13 +82,15 @@ export default class VisualisasiAM extends Component { ...@@ -82,13 +82,15 @@ export default class VisualisasiAM extends Component {
orderId: item.orders, orderId: item.orders,
data: [item] data: [item]
}) })
console.log(listVisual); // console.log(listVisual);
} else { } else {
listVisual[indexId].data.push(item) listVisual[indexId].data.push(item)
// console.log('listVisual');
// console.log(listVisual);
} }
}) })
this.setState({ listApproval: listVisual}) this.setState({ listApproval: listVisual})
console.log(listVisual); // console.log(listVisual);
} else { } else {
alert(response.data.message) alert(response.data.message)
} }
...@@ -100,33 +102,43 @@ export default class VisualisasiAM extends Component { ...@@ -100,33 +102,43 @@ export default class VisualisasiAM extends Component {
let orderIdFrom = listApproval[fromIndex].orderId let orderIdFrom = listApproval[fromIndex].orderId
listApproval[fromIndex].orderId = listApproval[toIndex].orderId listApproval[fromIndex].orderId = listApproval[toIndex].orderId
listApproval[toIndex].orderId = orderIdFrom listApproval[toIndex].orderId = orderIdFrom
that.setState({listEdit: listApproval}) that.setState({listEdit: listApproval}, () => console.log(this.state.listEdit))
} }
handleSave() { handleSave() {
let data = [] let data = []
this.state.listEdit.map((item,index) => { if (this.state.listEdit.length == 0) {
item.data.map((items,index) => { this.state.listApproval.map((item,index) => {
data.push({ item.data.map((items,index) => {
approval_matrix_id: items.approval_matrix_id, data.push({
approval_type_id: items.approval_type_id, approval_matrix_id: items.approval_matrix_id,
approval_type_name: items.approval_type_name, approval_type_id: items.approval_type_id,
created: items.created, operator_type_id: items.operator_type_id,
end_date: items.end_date, orders: item.orderId,
fullname: items.fullname, user_id: items.user_id
operator_type_id: items.operator_type_id, })
operator_type_name: items.operator_type_name,
orders: item.orderId,
start_date: items.start_date,
status: items.status,
updated: items.updated,
user_id: items.user_id
}) })
}) })
}) } else {
this.state.listEdit.map((item,index) => {
item.data.map((items,index) => {
data.push({
approval_matrix_id: items.approval_matrix_id,
approval_type_id: items.approval_type_id,
operator_type_id: items.operator_type_id,
orders: item.orderId,
user_id: items.user_id
})
})
})
}
setTimeout(() => { setTimeout(() => {
this.setState({listOriginal: data}) let payload = {
approval_type_id: data[0].approval_type_id,
approval_matrix_detail : data
}
this.setState({listOriginal: payload})
this.props.updateVAM(this.state.listOriginal)
}, 500); }, 500);
} }
...@@ -174,7 +186,7 @@ export default class VisualisasiAM extends Component { ...@@ -174,7 +186,7 @@ export default class VisualisasiAM extends Component {
</div> </div>
<ReactDragListView {...dragProps}> <ReactDragListView {...dragProps}>
<ol style={{paddingLeft: 15}}> <ol style={{paddingLeft: 15}}>
{this.state.listApproval.map((item, index) => ( {this.state.listApproval.sort((a,b) => a.orderId - b.orderId).map((item, index) => (
<li key={index} style={{color: '#4b4b4b', fontSize: 14}}> <li key={index} style={{color: '#4b4b4b', fontSize: 14}}>
<a href='#' style={{ color: '#4b4b4b', fontSize: '14px', cursor: 'auto', outline: 'none' }}> <a href='#' style={{ color: '#4b4b4b', fontSize: '14px', cursor: 'auto', outline: 'none' }}>
<div className="grid grid-3x grid-mobile-none gap-20px margin-bottom-20px" style={{width: '75%'}}> <div className="grid grid-3x grid-mobile-none gap-20px margin-bottom-20px" style={{width: '75%'}}>
......
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