Skip to content

T
Tia-dev
Commit 536cda47 authored by EKSAD's avatar EKSAD
Browse files
Options

upload & download item report

parent 1e63bc7b
Show whitespace changes
Inline Side-by-side
Showing with 455 additions and 13 deletions
src/api/index.js
View file @ 536cda47
...@@ -120,6 +120,8 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -120,6 +120,8 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
const getReportType = () => api.get('report/get_all_report') const getReportType = () => api.get('report/get_all_report')
const searchReportItems = (body) => api.post('/item_report/search_item_report', body) const searchReportItems = (body) => api.post('/item_report/search_item_report', body)
const createReportItems = (body) => api.post('/item_report/create_item_report', body) const createReportItems = (body) => api.post('/item_report/create_item_report', body)
const checkUploadReportItems = (body) => api.post('/item_report/check_import', body)
const uploadReportItems = (body) => api.post('/item_report/import_item_report', body)
//PARAMETER //PARAMETER
const getAllParameter = () => api.get('/setting/get_all_setting') const getAllParameter = () => api.get('/setting/get_all_setting')
...@@ -191,6 +193,8 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -191,6 +193,8 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
createReportItems, createReportItems,
getInputType, getInputType,
getReportType, getReportType,
checkUploadReportItems,
uploadReportItems,
getAllParameter, getAllParameter,
getAllGroup, getAllGroup,
getParameterByGroup, getParameterByGroup,
......
src/container/MasterData/ReportItems.js
View file @ 536cda47
...@@ -9,6 +9,8 @@ import CreateReportItems from "./formReportItems/CreateReportItems"; ...@@ -9,6 +9,8 @@ import CreateReportItems from "./formReportItems/CreateReportItems";
import EditReportItems from "./formReportItems/EditReportItems"; import EditReportItems from "./formReportItems/EditReportItems";
import VisualReportItems from "./formReportItems/VisualReportItems"; import VisualReportItems from "./formReportItems/VisualReportItems";
import api from "../../api"; import api from "../../api";
import ReactTooltip from "react-tooltip";
import PopUpFailedSave from "../../library/PopUpFailedSave";
var ct = require("../../library/CustomTable"); var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
...@@ -29,7 +31,8 @@ export default class ReportItems extends Component { ...@@ -29,7 +31,8 @@ export default class ReportItems extends Component {
edit: false, edit: false,
dataLoaded: false, dataLoaded: false,
cols: null, cols: null,
rows: null rows: null,
popupError: false
} }
this.fileHandler = this.fileHandler.bind(this); this.fileHandler = this.fileHandler.bind(this);
...@@ -39,16 +42,404 @@ export default class ReportItems extends Component { ...@@ -39,16 +42,404 @@ export default class ReportItems extends Component {
let fileObj = event let fileObj = event
ExcelRenderer(fileObj, (err, resp) => { ExcelRenderer(fileObj, (err, resp) => {
if (err) { if (err) {
console.log(err);
} }
else { else {
let judul = resp.rows[0] let judul = resp.rows[0]
let isi = resp.rows.slice(1) let isi = resp.rows.slice(3)
let payload = []
isi.map((item, index) => {
if(item.length > 0) {
payload.push({
id: index + 1,
report: item[0],
company: item[1],
orders: item[2],
description: item[3],
parent: item[4],
uom: item[5],
weight: item[6],
type_report: item[7],
formula: item[8],
condition_it_should_be: item[9],
condition_if_wrong: item[10],
start_date: item[11],
end_date: item[12],
})
}
})
let body = {
item_report: payload
}
this.setState({ payload: body })
api.create().checkUploadReportItems(body).then(response => {
if (response.data.status === "success") {
console.log(response)
let dataRow = response.data.data.map((item, index) => {
return [
index + 1,
item.report,
item.company,
item.orders,
item.description,
item.parent,
item.uom,
item.weight,
item.type_report,
item.formula,
item.condition_it_should_be,
item.condition_if_wrong,
item.start_date,
item.end_date,
item.error
]
})
let columns = [
"Data Ke-",
{
name: "Jenis Laporan",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[14] != null) {
check = tableMeta.rowData[14].findIndex((val) => val.field.includes('report'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[14] != null && check > -1 ?
<a data-tip={tableMeta.rowData[14][check].message} data-for="reportname">
<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="reportname" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Perusahaan",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[14] != null) {
check = tableMeta.rowData[14].findIndex((val) => val.field.includes('company'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[14] != null && check > -1 ?
<a data-tip={tableMeta.rowData[14][check].message} data-for="companyname">
<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="companyname" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Order",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[14] != null) {
check = tableMeta.rowData[14].findIndex((val) => val.field.includes('orders'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[14] != null && check > -1 ?
<a data-tip={tableMeta.rowData[14][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: "Deskripsi",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[14] != null) {
check = tableMeta.rowData[14].findIndex((val) => val.field.includes('description'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[14] != null && check > -1 ?
<a data-tip={tableMeta.rowData[14][check].message} data-for="desc">
<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="desc" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Parent ID",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[14] != null) {
check = tableMeta.rowData[14].findIndex((val) => val.field.includes('parent'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[14] != null && check > -1 ?
<a data-tip={tableMeta.rowData[14][check].message} data-for="parents">
<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="parents" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "UOM",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[14] != null) {
check = tableMeta.rowData[14].findIndex((val) => val.field.includes('uom'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[14] != null && check > -1 ?
<a data-tip={tableMeta.rowData[14][check].message} data-for="uoms">
<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="uoms" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Weight",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[14] != null) {
check = tableMeta.rowData[14].findIndex((val) => val.field.includes('weight'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[14] != null && check > -1 ?
<a data-tip={tableMeta.rowData[14][check].message} data-for="weights">
<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="weights" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Tipe Data",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[14] != null) {
check = tableMeta.rowData[14].findIndex((val) => val.field.includes('type_report'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[14] != null && check > -1 ?
<a data-tip={tableMeta.rowData[14][check].message} data-for="datatype">
<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="datatype" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Formula",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[14] != null) {
check = tableMeta.rowData[14].findIndex((val) => val.field.includes('formula'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[14] != null && check > -1 ?
<a data-tip={tableMeta.rowData[14][check].message} data-for="formulas">
<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="formulas" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Nilai Seharusnya",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[14] != null) {
check = tableMeta.rowData[14].findIndex((val) => val.field.includes('condition_it_should_be'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[14] != null && check > -1 ?
<a data-tip={tableMeta.rowData[14][check].message} data-for="values">
<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="values" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Kondisi Jika Salah",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[14] != null) {
check = tableMeta.rowData[14].findIndex((val) => val.field.includes('condition_if_wrong'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[14] != null && check > -1 ?
<a data-tip={tableMeta.rowData[14][check].message} data-for="conditions">
<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="conditions" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Berlaku Mulai",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[14] != null) {
check = tableMeta.rowData[14].findIndex((val) => val.field.includes('start_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[14] != null && check > -1 ?
<a data-tip={tableMeta.rowData[14][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[14] != null) {
check = tableMeta.rowData[14].findIndex((val) => val.field.includes('end_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[14] != null && check > -1 ?
<a data-tip={tableMeta.rowData[14][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({ this.setState({
dataLoaded: true, dataLoaded: true,
cols: judul, cols: columns,
rows: isi rows: dataRow
}); });
} }
console.log(response);
})
}
}); });
} }
...@@ -115,6 +506,36 @@ export default class ReportItems extends Component { ...@@ -115,6 +506,36 @@ export default class ReportItems extends Component {
}) })
} }
downloadFile = async () => {
let res = await fetch(
"https://tia.eksad.com/tia-reporting-dev/public/attachment/download_file?fileName=ItemReportTemplate&&fileType=xlsx"
)
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 = 'Template Report Item.xlsx';
a.click();
}
}
downloadDataTable = async () => {
let res = await fetch(
"https://tia.eksad.com/tia-reporting-dev/public/item_report/export_item_report"
)
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 = 'Item Report.xlsx';
a.click();
}
}
updateReportItems = (payload) => { updateReportItems = (payload) => {
this.setState({ edit: false }) this.setState({ edit: false })
api.create().updateReportItems(payload).then(response => { api.create().updateReportItems(payload).then(response => {
...@@ -126,6 +547,14 @@ export default class ReportItems extends Component { ...@@ -126,6 +547,14 @@ export default class ReportItems extends Component {
}) })
} }
uploadReportItems() {
api.create().uploadReportItems(this.state.payload).then(response => {
console.log(response)
this.getData()
this.setState({ itemReport: true })
})
}
render() { render() {
const columns = [{ const columns = [{
name: "Action", name: "Action",
...@@ -305,7 +734,7 @@ export default class ReportItems extends Component { ...@@ -305,7 +734,7 @@ export default class ReportItems extends Component {
padding: 0, padding: 0,
margin: 5 margin: 5
}} }}
onClick={() => null} onClick={() => this.downloadFile()}
> >
<img src={Images.template} /> <img src={Images.template} />
</button> </button>
...@@ -327,7 +756,7 @@ export default class ReportItems extends Component { ...@@ -327,7 +756,7 @@ export default class ReportItems extends Component {
borderColor: 'transparent', borderColor: 'transparent',
margin: 5 margin: 5
}} }}
onClick={() => null} onClick={() => this.downloadDataTable()}
> >
<img src={Images.download} /> <img src={Images.download} />
</button> </button>
...@@ -402,9 +831,15 @@ export default class ReportItems extends Component { ...@@ -402,9 +831,15 @@ export default class ReportItems extends Component {
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span> <span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div> </div>
</button> </button>
<button
type="button"
onClick={() => this.state.buttonError ? this.setState({ popupError: true }) : this.uploadReportItems()}
style={{}}
>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span> <span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div> </div>
</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -426,6 +861,9 @@ export default class ReportItems extends Component { ...@@ -426,6 +861,9 @@ export default class ReportItems extends Component {
updateReportItems={this.updateReportItems.bind(this)} updateReportItems={this.updateReportItems.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 }}>
......
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