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
Show 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/') =>
const searchAM = (body) => api.post('/approval_matrix/search_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 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
const getUser = () => api.get('user/get_all_user')
......@@ -189,6 +192,9 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
searchAM,
createAM,
updateAM,
updateVAM,
checkUploadAM,
uploadAM,
getUser,
getDetailUser,
searchUser,
......
src/container/ApprovalMatrix/ApprovalMatrix.js
View file @ 645fbaab
......@@ -5,10 +5,12 @@ import { TextField, InputBase } from "@material-ui/core";
import { ExcelRenderer } from 'react-excel-renderer';
import Images from '../../assets/Images';
import MUIDataTable from "mui-datatables";
import ReactTooltip from 'react-tooltip';
import UploadFile from "../../library/Upload";
import CreateApprovalMatrix from "./CreateApprovalMatrix";
import EditApprovalMatrix from "./EditApprovalMatrix";
import VisualisasiAM from "./VisualisasiAM";
import PopUpFailedSave from "../../library/PopUpFailedSave";
import api from "../../api";
var ct = require("../../library/CustomTable");
......@@ -30,7 +32,8 @@ export default class ApprovalMatrix extends Component {
search: "",
cols: null,
rows: null,
dataLoaded: false
dataLoaded: false,
popupError: false
}
this.fileHandler = this.fileHandler.bind(this);
}
......@@ -39,29 +42,223 @@ export default class ApprovalMatrix extends Component {
let fileObj = event
ExcelRenderer(fileObj, (err, resp) => {
if (err) {
// console.log(err);
console.log(err);
}
else {
let judul = resp.rows[0]
let isi = resp.rows.slice(1)
// let body = isi.map((item) => {
// return {
// item
// ]
// })
// console.log(JSON.stringify(isi));
let judul = resp.rows[2]
let isi = resp.rows.slice(3)
let payload = []
isi.map((item, index) => {
if (item.length > 0) {
payload.push({
// id: index + 1,
approval_type_name: item[0],
orders: item[1],
fullname: item[2],
operator_type_name: item[3],
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: judul,
rows: isi
cols: columns,
rows: dataRow
});
}
// console.log(response);
})
}
});
}
componentDidMount() {
this.getData()
console.log(this.props.height)
}
getData() {
......@@ -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 () => {
let res = await fetch(
"https://tia.eksad.com/tia-reporting-dev/public/attachment/download_file?fileName=ApprovalMatrixTemplate&&fileType=xlsx"
)
res = await res.blob()
console.log(res)
// console.log(res)
if (res.size > 0) {
let url = window.URL.createObjectURL(res);
let a = document.createElement('a');
......@@ -153,19 +362,28 @@ export default class ApprovalMatrix extends Component {
}
downloadDataTable = async () => {
alert('link belum ada')
// let res = await fetch(
// "https://tia.eksad.com/tia-reporting-dev/public/business_unit/export_business_unit"
// )
// res = await res.blob()
// alert('link belum ada')
let res = await fetch(
"https://tia.eksad.com/tia-reporting-dev/public/approval_matrix/export_approval_matrix"
)
res = await res.blob()
// console.log(res)
// if (res.size > 0) {
// let url = window.URL.createObjectURL(res);
// let a = document.createElement('a');
// a.href = url;
// a.download = 'Business Unit.xlsx';
// a.click();
// }
if (res.size > 0) {
let url = window.URL.createObjectURL(res);
let a = document.createElement('a');
a.href = url;
a.download = 'Approval Matrix.xlsx';
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() {
......@@ -373,6 +591,7 @@ export default class ApprovalMatrix extends Component {
<VisualisasiAM
onClickClose={() => this.setState({ visibleVisual: false, visibleAM: true })}
height= {this.props.height}
updateVAM={this.updateVAM.bind(this)}
/>
:
<div style={{ height: this.props.height }}>
......@@ -398,15 +617,21 @@ export default class ApprovalMatrix extends Component {
<button
type="button"
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' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
</button>
<button
type="button"
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>
......@@ -428,6 +653,9 @@ export default class ApprovalMatrix extends Component {
updateAM={this.updateAM.bind(this)}
/>
)}
{this.state.popupError && (
<PopUpFailedSave onClickClose={()=> this.setState({ popupError: false })} />
)}
{this.state.visibleUpload && (
<div className="test app-popup-show">
<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 {
endDate: '',
userData: [],
value: null,
date: new Date()
date: new Date(),
errorOrder: false,
msgErrOrder: '',
}
}
......@@ -105,22 +107,34 @@ export default class CreateApprovalMatrix extends Component {
let data = this.state
let isDate = type !== '' ? true : false
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)
})
} 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)
})
} else {
// this.setState({...data, tempData: {...this.state.tempData, [e.target.name] : e.target.value}})
this.setState({
errorOrder: false,
msgErrOrder: '',
})
}
}
validasi() {
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.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");
......@@ -224,6 +238,8 @@ export default class CreateApprovalMatrix extends Component {
id="order"
label="Order"
value={this.state.order}
error={this.state.errorOrder}
helperText={this.state.msgErrOrder}
onChange={(e) => this.setState({ order: e.target.value })}
inputProps={{
style: {
......
src/container/ApprovalMatrix/VisualisasiAM.js
View file @ 645fbaab
......@@ -47,13 +47,13 @@ export default class VisualisasiAM extends Component {
api.create().getTypeAM().then((response) => {
if (response.data.status == 'success') {
let data = response.data.data
// console.log(data)
let typeData = data.map((item) => {
return {
approval_type_id: item.approval_type_id,
approval_type_name: item.approval_type_name
}
})
// console.log(userData)
let typeProps = {
options: typeData,
getOptionLabel: (option) => option.approval_type_name,
......@@ -73,7 +73,7 @@ export default class VisualisasiAM extends Component {
api.create().searchAM(body).then(response => {
if (response.data.status == 'success') {
let data = response.data.data
console.log(data)
// console.log(data)
let listVisual = []
data.map((item, index) => {
let indexId = listVisual.findIndex((val) => val.orderId == item.orders)
......@@ -82,13 +82,15 @@ export default class VisualisasiAM extends Component {
orderId: item.orders,
data: [item]
})
console.log(listVisual);
// console.log(listVisual);
} else {
listVisual[indexId].data.push(item)
// console.log('listVisual');
// console.log(listVisual);
}
})
this.setState({ listApproval: listVisual})
console.log(listVisual);
// console.log(listVisual);
} else {
alert(response.data.message)
}
......@@ -100,33 +102,43 @@ export default class VisualisasiAM extends Component {
let orderIdFrom = listApproval[fromIndex].orderId
listApproval[fromIndex].orderId = listApproval[toIndex].orderId
listApproval[toIndex].orderId = orderIdFrom
that.setState({listEdit: listApproval})
that.setState({listEdit: listApproval}, () => console.log(this.state.listEdit))
}
handleSave() {
let data = []
if (this.state.listEdit.length == 0) {
this.state.listApproval.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
})
})
})
} 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,
approval_type_name: items.approval_type_name,
created: items.created,
end_date: items.end_date,
fullname: items.fullname,
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
})
})
})
}
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);
}
......
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