Skip to content

T
Tia-dev
Commit 645fbaab authored by Dida Adams Arizona's avatar Dida Adams Arizona
Browse files
Options

Merge branch 'rifka' into 'master' 

add index api, update export, visualisasi, preview

See merge request !115
parents 88df61c0 20058379
Hide whitespace changes
Inline Side-by-side
Showing with 323 additions and 61 deletions
src/api/index.js
View file @ 645fbaab
...@@ -110,6 +110,9 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -110,6 +110,9 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
const searchAM = (body) => api.post('/approval_matrix/search_approval_matrix', body) const searchAM = (body) => api.post('/approval_matrix/search_approval_matrix', body)
const createAM = (body) => api.post('/approval_matrix/create_approval_matrix', body) const createAM = (body) => api.post('/approval_matrix/create_approval_matrix', body)
const updateAM = (body) => api.post('/approval_matrix/update_approval_matrix', body) const updateAM = (body) => api.post('/approval_matrix/update_approval_matrix', body)
const updateVAM = (body) => api.post('/approval_matrix/visual_approval_matrix', body)
const checkUploadAM = (body) => api.post('/approval_matrix/check_import_approval_matrix', body)
const uploadAM = (body) => api.post('/approval_matrix/check_import_approval_matrix', body)
//User //User
const getUser = () => api.get('user/get_all_user') const getUser = () => api.get('user/get_all_user')
...@@ -189,6 +192,9 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -189,6 +192,9 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
searchAM, searchAM,
createAM, createAM,
updateAM, updateAM,
updateVAM,
checkUploadAM,
uploadAM,
getUser, getUser,
getDetailUser, getDetailUser,
searchUser, searchUser,
......
src/container/ApprovalMatrix/ApprovalMatrix.js
View file @ 645fbaab
...@@ -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 @ 645fbaab
...@@ -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 @ 645fbaab
...@@ -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);
} }
......
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