Skip to content

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

Merge branch 'faisal' into 'master' 

company

See merge request !61
parents 2821fd69 353230fa
Hide whitespace changes
Inline Side-by-side
Showing with 463 additions and 103 deletions
src/api/index.js
View file @ 22820550
......@@ -84,6 +84,11 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/')
const updateUnitBisnis = (body) => api.post('/business_unit/update_business_unit', body)
const searchUnitBisnis = (body) => api.post('/business_unit/search_business_unit', body)
// Perusahaan
const getPerusahaan = () => api.get('company/get_all_company')
const createPerusahaan = (body) => api.post('/company/create_company', body)
const updatePerusahaan = (body) => api.post('/company/update_company', body)
// APPROVAL MATRIX
const getAM = () => api.get('approval_matrix/get_all_approval_matrix')
const getApprovedByAM = () => api.get('approval_matrix/get_all_approver')
......@@ -122,6 +127,9 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/')
updateUnitBisnis,
searchUnitBisnis,
getAM,
getPerusahaan,
createPerusahaan,
updatePerusahaan
getApprovedByAM,
createAM,
updateAM
......
src/container/MasterData/Perusahaan/CreatePerusahaan.js
View file @ 22820550
import React, { Component } from 'react';
import { TextField, Typography } from '@material-ui/core';
import * as R from 'ramda';
import { DateTimePicker, KeyboardDatePicker, DatePicker } from "@material-ui/pickers";
import format from "date-fns/format";
export default class CreatePerusahaan extends Component {
constructor(props) {
super(props)
this.state = {
id: '',
company: '',
parentCompany: '',
unitBisnis: '',
startDate: '',
endDate: ''
}
}
render() {
let { type } = this.props
return type === 'edit' ? this.renderEdit() : this.renderCreate()
}
componentDidMount() {
if (this.props.type === 'edit') {
let data = this.props.data
this.setState({
id: data.company_id,
company: data.company_name,
parentCompany: data.parent,
unitBisnis: data.businessUnitId,
startDate: data.start_date,
endDate: data.end_date
})
}
}
handleChange(e, type) {
let data = this.state
let isDate = type !== '' ? true : false
if (isDate && type == 'start_date') {
this.setState({ startDate: format(e, 'yyyy-MM-dd') }, () => {
console.log(this.state.startDate)
})
} else if (isDate && type == 'end_date') {
this.setState({ endDate: format(e, 'yyyy-MM-dd') }, () => {
console.log(this.state.endDate)
})
} else {
// this.setState({...data, tempData: {...this.state.tempData, [e.target.name] : e.target.value}})
}
}
validasi() {
if (R.isEmpty(this.state.company)) return alert("Nama Perusahaan is Required.");
if (R.isEmpty(this.state.parentCompany)) return alert("Nama Perusahaan is Required.");
if (R.isEmpty(this.state.unitBisnis)) return alert("Unit Bisnis is Required.");
if (R.isEmpty(this.state.totalReport)) return alert("Total Report 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)) return alert("Tanggal Mulai is Required.");
if (R.isEmpty(this.state.endDate)) return alert("Tanggal Berakhir is Required.");
console.log('masuk');
if (this.props.type == 'edit') {
let payload = {
"company_id": this.state.id,
"company_name": this.state.company,
"parent": this.state.parentCompany,
"business_unit_id": this.state.unitBisnis,
"start_date": this.state.startDate,
"end_date": this.state.endDate
}
this.props.updatePerusahaan(payload)
} else if (this.props.type == 'create') {
let payload = {
"company_name": this.state.company,
"parent": this.state.parentCompany,
"business_unit_id": this.state.unitBisnis,
"total_report": this.state.totalReport,
"start_date": this.state.startDate,
"end_date": this.state.endDate
}
this.props.createPerusahaan(payload)
}
}
renderEdit() {
return (
<div className="test app-popup-show" style={{ paddingTop: 100 }}>
<div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
<div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
......@@ -34,7 +113,7 @@ export default class CreatePerusahaan extends Component {
<div style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
value={this.props.data[1]}
value={this.props.data.company_id}
id="id"
label="ID"
disabled
......@@ -56,7 +135,7 @@ export default class CreatePerusahaan extends Component {
style={{ width: '100%' }}
id="unit"
label="Unit Bisnis"
value={this.props.data[4]}
value={this.state.unitBisnis}
inputProps={{
style: {
fontSize: 11
......@@ -72,12 +151,16 @@ export default class CreatePerusahaan extends Component {
</TextField>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="periode"
value={"1 Januari 2020"}
<DatePicker
margin="normal"
id="startDate"
label="Berlaku Mulai"
onChange={(e) => null}
format="dd MMMM yyyy"
value={this.state.startDate}
onChange={(e) => this.handleChange(e, 'start_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
inputProps={{
style: {
fontSize: 11
......@@ -89,13 +172,14 @@ export default class CreatePerusahaan extends Component {
color: '#7e8085'
}
}}
>
</TextField>
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
<div style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
value={this.props.data[5]}
value={this.props.data.status}
id="status"
label="Status"
disabled
......@@ -114,8 +198,14 @@ export default class CreatePerusahaan extends Component {
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Typography style={{ fontSize: 11 }}>Dibuat : Admin - 21 Jul 2020, 18:45</Typography>
<Typography style={{ fontSize: 11 }}>Diubah : Admin - 21 Jul 2020, 18:45</Typography>
<div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '20%' }}>Dibuat</Typography>
<Typography style={{ fontSize: 11 }}>: {this.props.data.created}</Typography>
</div>
<div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '20%' }}>Diubah</Typography>
<Typography style={{ fontSize: 11 }}>: {this.props.data.updated == - null ? "" : this.props.data.updated}</Typography>
</div>
</div>
</div>
......@@ -125,7 +215,7 @@ export default class CreatePerusahaan extends Component {
style={{ width: '100%' }}
id="perusahaan"
label="Nama Perusahaan"
value={this.props.data[2]}
value={this.state.company}
inputProps={{
style: {
fontSize: 11
......@@ -137,6 +227,7 @@ export default class CreatePerusahaan extends Component {
color: '#7e8085'
}
}}
onChange={(e) => this.setState({ company: e.target.value })}
>
</TextField>
</div>
......@@ -145,7 +236,7 @@ export default class CreatePerusahaan extends Component {
style={{ width: '100%' }}
id="parent"
label="Parent Company"
value={this.props.data[3]}
value={this.state.parentCompany}
inputProps={{
style: {
fontSize: 11
......@@ -161,11 +252,16 @@ export default class CreatePerusahaan extends Component {
</TextField>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="unit"
<DatePicker
margin="normal"
id="endDate"
label="Berlaku Hingga"
defaultValue={"31 Desember 2020"}
format="dd MMMM yyyy"
value={this.state.endDate}
onChange={(e) => this.handleChange(e, 'end_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
inputProps={{
style: {
fontSize: 11
......@@ -177,22 +273,33 @@ export default class CreatePerusahaan extends Component {
color: '#7e8085'
}
}}
>
</TextField>
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
</div>
</div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: '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>
</div>
<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 }}>Batal</span>
</div>
</button>
</div>
<div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: '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>
</div>
<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 }}>Simpan</span>
</div>
</button>
</div>
</div>
</div>
......@@ -229,7 +336,7 @@ export default class CreatePerusahaan extends Component {
style={{ width: '100%' }}
id="unit"
label="Unit Bisnis"
defaultValue={"Agrobisnis"}
value={this.state.unitBisnis}
inputProps={{
style: {
fontSize: 11
......@@ -241,16 +348,16 @@ export default class CreatePerusahaan extends Component {
color: '#7e8085'
}
}}
onChange={(e) => this.setState({ unitBisnis: e.target.value })}
>
</TextField>
</div>
<div style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="periode"
value={"1 Januari 2020"}
label="Berlaku Mulai"
onChange={(e) => null}
id="report"
label="Jumlah Laporan"
value={this.state.totalReport}
inputProps={{
style: {
fontSize: 11
......@@ -262,9 +369,36 @@ export default class CreatePerusahaan extends Component {
color: '#7e8085'
}
}}
onChange={(e) => this.setState({ totalReport: e.target.value })}
>
</TextField>
</div>
<div style={{ padding: 10, borderRadius: 5 }}>
<DatePicker
margin="normal"
id="startDate"
label="Berlaku Mulai"
format="dd MMMM yyyy"
value={this.state.startDate == "" ? null : this.state.startDate}
onChange={(e) => this.handleChange(e, 'start_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5, backgroundColor: '#e8e8e8', }}>
<TextField
style={{ width: '100%' }}
......@@ -298,7 +432,7 @@ export default class CreatePerusahaan extends Component {
style={{ width: '100%' }}
id="perusahaan"
label="Nama Perusahaan"
defaultValue={"Puninar Infininte Raya"}
value={this.state.company}
inputProps={{
style: {
fontSize: 11
......@@ -310,6 +444,7 @@ export default class CreatePerusahaan extends Component {
color: '#7e8085'
}
}}
onChange={(e) => this.setState({ company: e.target.value })}
>
</TextField>
</div>
......@@ -318,7 +453,7 @@ export default class CreatePerusahaan extends Component {
style={{ width: '100%' }}
id="parentCompany"
label="Parent Company"
defaultValue={"Puninar Group"}
value={this.state.parentCompany}
inputProps={{
style: {
fontSize: 11
......@@ -330,15 +465,21 @@ export default class CreatePerusahaan extends Component {
color: '#7e8085'
}
}}
onChange={(e) => this.setState({ parentCompany: e.target.value })}
>
</TextField>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="unit"
<DatePicker
margin="normal"
id="endDate"
label="Berlaku Hingga"
defaultValue={"31 Desember 2100"}
format="dd MMMM yyyy"
value={this.state.endDate == "" ? null : this.state.endDate}
onChange={(e) => this.handleChange(e, 'end_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
inputProps={{
style: {
fontSize: 11
......@@ -350,8 +491,9 @@ export default class CreatePerusahaan extends Component {
color: '#7e8085'
}
}}
>
</TextField>
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
</div>
......@@ -359,14 +501,24 @@ export default class CreatePerusahaan extends Component {
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: '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>
</div>
<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 }}>Batal</span>
</div>
</button>
</div>
<div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: '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>
</div>
<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 }}>Simpan</span>
</div>
</button>
</div>
</div>
</div>
......
src/container/MasterData/Perusahaan/Perusahaan.js
View file @ 22820550
......@@ -3,14 +3,18 @@ import { Container, Row, Col } from "react-bootstrap";
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';
import Images from '../../../assets/Images';
import UploadFile from "../../../library/Upload";
import MUIDataTable from "mui-datatables";
import { render } from '@testing-library/react';
import { TextField, InputBase } from "@material-ui/core";
import { ExcelRenderer } from 'react-excel-renderer';
import CreatePerusahaan from "../Perusahaan/CreatePerusahaan";
import api from "../../../api";
var ct = require("../../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions();
const options2 = ct.customOptions2();
export default class Perusahaan extends Component {
constructor(props) {
......@@ -18,16 +22,117 @@ export default class Perusahaan extends Component {
this.state = {
visibleCreate: false,
visibleEdit: false,
data: []
dataTable: [],
listData: [],
data: [],
search: "",
visiblePerusahaan: true,
cols: null,
rows: null,
dataLoaded: false
}
this.fileHandler = this.fileHandler.bind(this);
}
fileHandler = (event) => {
let fileObj = event
ExcelRenderer(fileObj, (err, resp) => {
if (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));
this.setState({
dataLoaded: true,
cols: judul,
rows: isi
});
}
});
}
componentDidMount() {
this.getData()
}
getData() {
api.create().getPerusahaan().then((response) => {
console.log(response)
if (response.data.status == 'success') {
let data = response.data.data
let listData = data.map((item, index) => {
return [index, item.company_id, item.company_name, item.parent, item.businessUnitId, item.total_report, item.status]
})
this.setState({ dataTable: listData, listData: response.data.data })
} else {
alert(response.data.message)
}
})
}
openPopUp(index, type) {
if (type === 'edit') {
this.setState({
selectIndex: index,
visibleEdit: true
})
} else {
this.setState({
data: this.state.listData[index],
visibleCreate: true
})
}
}
handleInputChange(e) {
this.setState({ search: e })
let body = {
"keyword": e
}
api.create().searchPerusahaan(body).then(response => {
// console.log(response.data);
if (response.data.status == 'success') {
let data = response.data.data
let listData = data.map((item, index) => {
// return [index, item.business_unit_id, item.business_unit_name, item.status]
})
this.setState({ dataTable: listData, listData: response.data.data })
} else {
alert(response.data.message)
}
})
}
updatePerusahaan = (payload) => {
this.setState({ visibleEdit: false })
api.create().updatePerusahaan(payload).then(response => {
if (response.data.status == 'success') {
this.getData()
} else {
alert(response.data.message)
}
})
}
createPerusahaan = (payload) => {
this.setState({ visibleCreate: false })
api.create().createPerusahaan(payload).then(response => {
if (response.data.status == 'success') {
this.getData()
} else {
alert(response.data.message)
}
})
}
render() {
console.log(this.props.height)
const columns = [{
name: "Action",
options: {
......@@ -40,7 +145,8 @@ export default class Perusahaan extends Component {
cursor: 'pointer',
borderColor: 'transparent'
}}
onClick={() => this.setState({ visibleEdit: true, data: tableMeta.rowData })}
// onClick={() => this.setState({ visibleEdit: true, data: tableMeta.rowData })}
onClick={() => this.openPopUp(tableMeta.rowIndex, 'edit')}
>
<img src={Images.editCopy} />
</button>
......@@ -54,7 +160,7 @@ export default class Perusahaan extends Component {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[5] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
......@@ -65,7 +171,7 @@ export default class Perusahaan extends Component {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[5] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
......@@ -76,7 +182,7 @@ export default class Perusahaan extends Component {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[5] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
......@@ -87,7 +193,18 @@ export default class Perusahaan extends Component {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[5] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
}
}, {
name: "Jumlah Laporan",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
......@@ -98,75 +215,123 @@ export default class Perusahaan extends Component {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[5] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
}
}]
const data = [
["", "1", "Triputra Agro Persada Group", "Triputra Investindo Arya", "Agrobisnis", "Aktif"],
["", "2", "Gawi Bahandep Sawit Mekar", "Triputra Agro Persada Group", "Agrobisnis", "Aktif"],
["", "3", "Puninar Group", "Triputra Investindo Arya", "Service", "Aktif"],
["", "4", "Puninar Infinite Raya", "Puninar Group", "Service", "Non Aktif"],
["", "1", "Triputra Agro Persada Group", "Triputra Investindo Arya", "Agrobisnis", "5", "Aktif"],
["", "2", "Gawi Bahandep Sawit Mekar", "Triputra Agro Persada Group", "Agrobisnis", "2", "Aktif"],
["", "3", "Puninar Group", "Triputra Investindo Arya", "Service", "5", "Aktif"],
["", "4", "Puninar Infinite Raya", "Puninar Group", "Service", "5", "Non Aktif"],
["", "-", "-", "-", "-","-"],
]
return (
<div style={{ height: this.props.height }}>
{/* <Row> */}
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Master Data - Perusahaan</label>
<div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5 }}>
<img src={Images.searchBlack} style={{ marginRight: 10 }} />
<InputBase
style={{ width: '100%' }}
placeholder="Search"
inputProps={{ 'aria-label': 'naked' }}
/>
{this.state.visiblePerusahaan === true ?
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '20%' }}>Master Data - Perusahaan</label>
<div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5, alignSelf: 'center' }}>
<img src={Images.searchBlack} style={{ marginRight: 10 }} />
<InputBase
style={{ width: '100%' }}
placeholder="Search"
value={this.state.search}
onChange={(e) => this.handleInputChange(e.target.value)}
inputProps={{ 'aria-label': 'naked' }}
/>
</div>
<div style={{ width: '20%', justifyContent: 'space-around', display: 'flex', flexFlow: 'wrap' }}>
<img src={Images.template} />
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent'
}}
onClick={() => this.setState({ visibleUpload: true })}
>
<img src={Images.upload} />
</button>
<img src={Images.download} />
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent'
}}
onClick={() => null}
>
<img src={Images.visualisasi} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent'
}}
onClick={() => this.setState({ visibleCreate: true })}
>
<img src={Images.add} />
</button>
</div>
</div>
<div style={{ width: '20%', justifyContent: 'space-around', display: 'flex' }}>
<img src={Images.template} />
<img src={Images.upload} />
<img src={Images.download} />
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent'
}}
onClick={() => null}
>
<img src={Images.visualisasi} />
</button>
<div style={{ padding: 25 }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
theme={getMuiTheme()}
data={this.state.dataTable}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
</div>
:
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Preview Data</label>
</div>
<div style={{ padding: 25 }}>
{this.state.dataLoaded && (
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
theme={getMuiTheme()}
data={this.state.rows}
columns={this.state.cols}
options={options2}
/>
</MuiThemeProvider>
)}
</div>
<div style={{ display: 'flex', width: '100%', placeContent: 'flex-end', padding: 20 }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent'
}}
onClick={() => this.setState({ visibleCreate: true })}
type="button"
onClick={() => this.setState({ visiblePerusahaan: true })}
style={{ marginRight: 20 }}
>
<img src={Images.add} />
<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>
<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>
</div>
</div>
<div style={{ padding: 25 }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
theme={getMuiTheme()}
data={data}
columns={columns}
options={options}
/>
</MuiThemeProvider>
}
</div>
</div>
{this.state.visibleCreate && (
<CreatePerusahaan
onClickClose={() => this.setState({ visibleCreate: false })}
type={"create"}
createPerusahaan={this.createPerusahaan.bind(this)}
/>
)}
......@@ -174,9 +339,44 @@ export default class Perusahaan extends Component {
<CreatePerusahaan
type={"edit"}
onClickClose={() => this.setState({ visibleEdit: false })}
data={this.state.data}
data={this.state.listData[this.state.selectIndex]}
updatePerusahaan={this.updatePerusahaan.bind(this)}
/>
)}
{this.state.visibleUpload && (
<div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
<div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', 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' }}>Upload File</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.setState({ visibleUpload: false })}
>
<i className="fa fa-lg fa-times" style={{ color: 'white' }} />
</button>
</div>
</div>
<UploadFile
type={this.state.uploadStatus}
percentage={this.state.percentage}
result={this.state.result}
acceptedFiles={["pdf"]}
onHandle={(dt) => {
this.fileHandler(dt)
this.setState({ uploadStatus: 'idle', percentage: '0' })
}}
onUpload={() => this.setState({ visibleUpload: false, visiblePerusahaan: false })}
/>
</div>
</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