Skip to content

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

Merge branch 'rifka' into 'master' 

update upload dan edit approval matrix

See merge request !58
parents 6ca48237 de407da8
Hide whitespace changes
Inline Side-by-side
Showing with 518 additions and 163 deletions
src/api/index.js
View file @ 0a5c464e
...@@ -83,6 +83,9 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/') ...@@ -83,6 +83,9 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/')
const updateUnitBisnis = (body) => api.post('/business_unit/update_business_unit', body) const updateUnitBisnis = (body) => api.post('/business_unit/update_business_unit', body)
const searchUnitBisnis = (body) => api.post('/business_unit/search_business_unit', body) const searchUnitBisnis = (body) => api.post('/business_unit/search_business_unit', body)
// APPROVAL MATRIX
const getAM = () => api.get('approval_matrix/get_all_approval_matrix')
// ------ // ------
// STEP 3 // STEP 3
// ------ // ------
...@@ -111,7 +114,8 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/') ...@@ -111,7 +114,8 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/')
getUnitBisnis, getUnitBisnis,
createUnitBisnis, createUnitBisnis,
updateUnitBisnis, updateUnitBisnis,
searchUnitBisnis searchUnitBisnis,
getAM
} }
} }
......
src/container/ApprovalMatrix/ApprovalMatrix.js
View file @ 0a5c464e
...@@ -2,16 +2,20 @@ import React, { Component } from 'react'; ...@@ -2,16 +2,20 @@ import React, { Component } from 'react';
import { Container, Row, Col } from "react-bootstrap"; import { Container, Row, Col } from "react-bootstrap";
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'; import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import { TextField, InputBase } from "@material-ui/core"; import { TextField, InputBase } from "@material-ui/core";
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 UploadFile from "../../library/Upload";
import CreateApprovalMatrix from "./CreateApprovalMatrix"; import CreateApprovalMatrix from "./CreateApprovalMatrix";
import EditApprovalMatrix from "./EditApprovalMatrix"; import EditApprovalMatrix from "./EditApprovalMatrix";
import PreviewAM from "./PreviewAM"; import PreviewAM from "./PreviewAM";
import VisualisasiAM from "./VisualisasiAM"; import VisualisasiAM from "./VisualisasiAM";
import api from "../../api";
var ct = require("../../library/CustomTable"); var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions(); const options = ct.customOptions();
const options2 = ct.customOptions2();
const type = [ const type = [
{ {
...@@ -32,11 +36,81 @@ export default class ApprovalMatrix extends Component { ...@@ -32,11 +36,81 @@ export default class ApprovalMatrix extends Component {
visibleCreate: false, visibleCreate: false,
visibleEdit: false, visibleEdit: false,
visibleVisual: false, visibleVisual: false,
dataTable: [],
listData: [],
data: [],
search: "", search: "",
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() { componentDidMount() {
this.getData()
}
getData() {
api.create().getAM().then((response) => {
// console.log(response)
let datas = response.data.data
let listData = datas.map((item, index) => {
return [item.fullname ]
})
console.log(listData)
if(response.status == null){
alert(response.problem)
}
else if (response.data.status == 'success') {
let data = response.data.data
let listData = data.map((item, index) => {
return [index, item.approval_matrix_id, item.approval_type_name, item.orders, item.fullname, item.operator_type_name, 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) => { handleInputChange = (e) => {
...@@ -66,15 +140,88 @@ export default class ApprovalMatrix extends Component { ...@@ -66,15 +140,88 @@ export default class ApprovalMatrix extends Component {
cursor: 'pointer', cursor: 'pointer',
borderColor: 'transparent' borderColor: 'transparent'
}} }}
onClick={() => null} onClick={() => this.openPopUp(tableMeta.rowIndex, 'edit')}
// onClick={() => this.setState({ visibleEdit: true })}
> >
<img src={Images.editCopy} onClick={() => this.setState({ visibleEdit: true })} /> <img src={Images.editCopy} />
</button> </button>
</div > </div >
); );
} }
} }
}, "ID", "Tipe Persetujuan", "Order", "Nama Pemberi Persetujuan", "Operator", "Status"] },
{
name: "ID",
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 >
);
}
}
},
{
name: "Tipe Persetujuan",
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 >
);
}
}
},
{
name: "Order",
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 >
);
}
}
},
{
name: "Nama Pemberi Persetujuan",
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 >
);
}
}
},
{
name: "Operator",
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 >
);
}
}
},
{
name: "Status",
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 >
);
}
}
}]
const data = [ const data = [
["", "1", "Yearly", "1", "John Doe", "-", "Aktif"], ["", "1", "Yearly", "1", "John Doe", "-", "Aktif"],
["", "2", "Yearly", "2", "John Doe", "-", "Aktif"], ["", "2", "Yearly", "2", "John Doe", "-", "Aktif"],
...@@ -85,114 +232,187 @@ export default class ApprovalMatrix extends Component { ...@@ -85,114 +232,187 @@ export default class ApprovalMatrix extends Component {
return ( return (
<div> <div>
{this.state.visibleAM === true ? {this.state.visibleAM === true ?
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
<div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} /> <div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} />
<div> <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', fontSize: 16, alignSelf: 'center', paddingTop: 8 }}>Master Data - Approval Matrix</label> <label style={{ color: 'white', fontSize: 16, alignSelf: 'center', paddingTop: 8 }}>Master Data - Approval Matrix</label>
{/* <form style={{ }}> {/* <form style={{ }}>
<TextField id="" label="" variant="outlined" size="small" placeholder="Search" style={{ width: 423, backgroundColor: 'white', borderRadius: 6 }}/> <TextField id="" label="" variant="outlined" size="small" placeholder="Search" style={{ width: 423, backgroundColor: 'white', borderRadius: 6 }}/>
</form> */} </form> */}
<div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5 }}> <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 }} /> <img src={Images.searchBlack} style={{ marginRight: 10 }} />
<InputBase <InputBase
style={{ width: '100%' }} style={{ width: '100%' }}
placeholder="Search" placeholder="Search"
value={this.state.search} value={this.state.search}
onChange={(e) => this.handleInputChange(e)} onChange={(e) => this.handleInputChange(e)}
inputProps={{ 'aria-label': 'naked' }} inputProps={{ 'aria-label': 'naked' }}
/> />
</div>
<div style={{ display: 'flex' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
padding: 0
}}
onClick={() => null}
>
<img src={Images.template} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0
}}
onClick={() => null}
>
<img src={Images.upload} onClick={() => this.setState({ visibleUpload: true })}/>
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0
}}
onClick={() => null}
>
<img src={Images.download} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0
}}
onClick={() => null}
>
<img src={Images.visualisasi} onClick={() => this.setState({ visibleVisual: true, visibleAM: false })} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0
}}
>
<img src={Images.add} onClick={() => this.setState({ visibleCreate: true })} />
</button>
</div >
</div> </div>
<div style={{ display: 'flex' }}> <div style={{ padding: 25, width: '100%' }}>
<button <MuiThemeProvider theme={getMuiTheme()}>
style={{ <MUIDataTable
backgroundColor: 'transparent', theme={getMuiTheme()}
cursor: 'pointer', data={this.state.dataTable}
borderColor: 'transparent', columns={columns}
padding: 0 options={options}
}} />
onClick={() => null} </MuiThemeProvider>
> </div>
<img src={Images.template} /> </div>
</button> </div>
<button :
style={{ <div style={{ height: this.props.height }}>
backgroundColor: 'transparent', <div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} />
cursor: 'pointer', <div>
borderColor: 'transparent', <div>
marginLeft: 16, <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
padding:0 <label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Preview Data</label>
}} </div>
onClick={() => null} <div style={{ padding: 25 }}>
> {this.state.dataLoaded && (
<img src={Images.upload} /> <MuiThemeProvider theme={getMuiTheme()}>
</button> <MUIDataTable
<button theme={getMuiTheme()}
style={{ data={this.state.rows}
backgroundColor: 'transparent', columns={this.state.cols}
cursor: 'pointer', options={options}
borderColor: 'transparent', />
marginLeft: 16, </MuiThemeProvider>
padding:0 )}
}} </div>
onClick={() => null} <div style={{ display: 'flex', width: '100%', placeContent: 'flex-end', padding: 20 }}>
> <button
<img src={Images.download} /> type="button"
</button> onClick={() => this.setState({ visibleAM: true })}
<button style={{ marginRight: 20}}
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0
}}
onClick={() => null}
> >
<img src={Images.visualisasi} onClick={() => this.setState({ visibleVisual: true, visibleAM: false })} /> <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>
<button <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
style={{ <span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
backgroundColor: 'transparent', </div>
cursor: 'pointer', </div>
borderColor: 'transparent', </div>
marginLeft: 16, </div>
padding:0 </div>
}} }
{this.state.visibleCreate && (
<CreateApprovalMatrix
onClickClose={() => this.setState({ visibleCreate: false })}
data={this.state.listData}
/>
)}
{this.state.visibleEdit && (
<EditApprovalMatrix
type={"edit"}
onClickClose={() => this.setState({ visibleEdit: false })}
data={this.state.listData[this.state.selectIndex]}
/>
)}
{this.state.visibleVisual && (
<VisualisasiAM
onClickClose={() => this.setState({ visibleVisual: false })}
/>
)}
{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 })}
> >
<img src={Images.add} onClick={() => this.setState({ visibleCreate: true })} /> <i className="fa fa-lg fa-times" style={{ color: 'white' }} />
</button> </button>
</div > </div>
</div> </div>
<div style={{ padding: 25, width: '100%' }}> <UploadFile
<MuiThemeProvider theme={getMuiTheme()}> type={this.state.uploadStatus}
<MUIDataTable percentage={this.state.percentage}
data={data} result={this.state.result}
columns={columns} acceptedFiles={["pdf"]}
options={options} onHandle={(dt) => {
/> this.fileHandler(dt)
</MuiThemeProvider> this.setState({ uploadStatus: 'idle', percentage: '0' })
}}
onUpload={() => this.setState({ visibleUpload: false, visibleAM: false })}
/>
</div> </div>
</div> </div>
</div> )}
: false
}
{this.state.visibleCreate && (
<CreateApprovalMatrix
onClickClose={() => this.setState({ visibleCreate: false })}
/>
)}
{this.state.visibleEdit && (
<EditApprovalMatrix
onClickClose={() => this.setState({ visibleEdit: false })}
/>
)}
{this.state.visibleVisual && (
<VisualisasiAM
onClickClose={() => this.setState({ visibleVisual: false })}
/>
)}
</div> </div>
); );
} }
......
src/container/ApprovalMatrix/EditApprovalMatrix.js
View file @ 0a5c464e
import React, { Component } from 'react'; import React, { Component } from 'react';
import { TextField } from '@material-ui/core'; import { TextField, Typography } from '@material-ui/core';
import { DateTimePicker, KeyboardDatePicker, DatePicker} from "@material-ui/pickers";
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@material-ui/core/MenuItem';
import format from "date-fns/format";
import localeID from "date-fns/locale/id"
const type = [ const type = [
{ {
value: 'KPI', value: 'YEARLY',
label: 'KPI', label: 'YEARLY',
}, },
{ {
value: 'Gatau', value: 'MONTHLY',
label: 'Gatau', label: 'MONTHLY',
},
{
value: 'DAILY',
label: 'DAILY',
}, },
]; ];
const approve_by = [ const approve_by = [
...@@ -24,20 +31,56 @@ const approve_by = [ ...@@ -24,20 +31,56 @@ const approve_by = [
]; ];
const operator = [ const operator = [
{ {
value: '1', value: '-',
label: '-', label: '-',
}, },
{ {
value: '2', value: 'AND',
label: 'AND', label: 'AND',
}, },
{ {
value: '3', value: 'OR',
label: 'OR', label: 'OR',
}, },
]; ];
export default class EditApprovalMatrix extends Component { export default class EditApprovalMatrix extends Component {
constructor(props) {
super(props)
this.state = {
startDate: null,
endDate: null,
date: new Date()
}
}
render() { render() {
let { type } = this.props
return type === 'edit' ? this.renderEdit() : false
}
componentDidMount() {
console.log(this.props.data);
}
handleChange(e, type) {
let data = this.state
let isDate = type !== ''? true : false
if (isDate && type == 'start_date') {
this.setState({...data, startDate : format(e, 'yyyy-MM-dd')})
} else if (isDate && type == 'end_date') {
this.setState({...data, endDate : format(e, 'yyyy-MM-dd')})
} else {
this.setState({...data, [e.target.name] : e.target.value})
}
}
handleDate(item) {
let value = format(item, 'dd MMMM yyyy')
return value
}
renderEdit() {
return ( return (
<div className="test app-popup-show" style={{ paddingTop: 100 }}> <div className="test app-popup-show" style={{ paddingTop: 100 }}>
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}> <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
...@@ -61,26 +104,47 @@ export default class EditApprovalMatrix extends Component { ...@@ -61,26 +104,47 @@ export default class EditApprovalMatrix extends Component {
<div className="border-bottom" style={{ padding: 20 }}> <div className="border-bottom" style={{ padding: 20 }}>
<div className="grid grid-2x grid-mobile-none gap-15px"> <div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1"> <div className="column-1">
<div className="margin-bottom-20px"> <div style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%', height: '90%' }} style={{ width: '100%' }}
id="id" id="id"
variant="filled"
label="ID" label="ID"
value="1" value={this.props.data.approval_matrix_id}
> disabled
</TextField> inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
/>
</div> </div>
</div> </div>
<div className="column-2"> <div className="column-2">
<div className="margin-bottom-20px" style={{ marginTop: 8 }}> <div className="" style={{ paddingTop: 4, paddingRight: 10, paddingBottom: 10, paddingLeft: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="type" id="type"
select select
label="Tipe Persetujuan" label="Tipe Persetujuan"
value="KPI" value={this.props.data.approval_type_name}
onChange={(e) => null} onChange={(e) => null}
selectProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
> >
{type.map((option) => ( {type.map((option) => (
<MenuItem key={option.value} value={option.value}> <MenuItem key={option.value} value={option.value}>
...@@ -93,26 +157,48 @@ export default class EditApprovalMatrix extends Component { ...@@ -93,26 +157,48 @@ export default class EditApprovalMatrix extends Component {
</div> </div>
<div className="grid grid-2x grid-mobile-none gap-15px"> <div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1"> <div className="column-1">
<div className="margin-bottom-20px"> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="order" id="order"
variant="standard"
label="Order" label="Order"
value="1" value={this.props.data.orders}
onChange={(e) => this.handleChange(e, '')}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
> >
</TextField> </TextField>
</div> </div>
</div> </div>
<div className="column-2"> <div className="column-2">
<div className="margin-bottom-20px"> <div className="margin-top-10px" style={{ paddingTop: 4, paddingRight: 10, paddingBottom: 10, paddingLeft: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="approve-by" id="approve-by"
select select
label="Pemberi Persetujuan" label="Pemberi Persetujuan"
value="1" value={this.props.data.fullname}
onChange={(e) => null} onChange={(e) => null}
selectProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
> >
{approve_by.map((option) => ( {approve_by.map((option) => (
<MenuItem key={option.value} value={option.value}> <MenuItem key={option.value} value={option.value}>
...@@ -125,14 +211,25 @@ export default class EditApprovalMatrix extends Component { ...@@ -125,14 +211,25 @@ export default class EditApprovalMatrix extends Component {
</div> </div>
<div className="grid grid-2x grid-mobile-none gap-15px"> <div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1"> <div className="column-1">
<div className="margin-bottom-20px"> <div className="margin-top-10px" style={{ paddingTop: 4, paddingRight: 10, paddingBottom: 10, paddingLeft: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="operator" id="operator"
select select
label="Operator" label="Operator"
value="1" value={this.props.data.operator_type_name}
onChange={(e) => null} onChange={(e) => null}
selectProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
> >
{operator.map((option) => ( {operator.map((option) => (
<MenuItem key={option.value} value={option.value}> <MenuItem key={option.value} value={option.value}>
...@@ -148,73 +245,107 @@ export default class EditApprovalMatrix extends Component { ...@@ -148,73 +245,107 @@ export default class EditApprovalMatrix extends Component {
</div> </div>
<div className="grid grid-2x grid-mobile-none gap-15px"> <div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1"> <div className="column-1">
<div className="margin-bottom-20px"> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <DatePicker
style={{ width: '100%' }} margin="normal"
id="start-period" id="startDate"
label="Berlaku Mulai" label="Berlaku Mulai"
value="31 Desember 2020" format="dd MMMM yyyy"
> value={this.state.startDate}
{/* {periode.map((option) => ( onChange={(e) => this.handleChange(e, 'start_date')}
<MenuItem key={option.value} value={option.value}> KeyboardButtonProps={{
{option.label} 'aria-label': 'change date',
</MenuItem> }}
))} */} style={{padding: 0, margin: 0, width: '100%'}}
</TextField> InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
/>
</div> </div>
</div> </div>
<div className="column-2"> <div className="column-2">
<div className="margin-bottom-20px"> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <DatePicker
style={{ width: '100%' }} margin="normal"
id="end-period" id="endDate"
label="Berlaku Hingga" label="Berlaku Hingga"
value="31 Desember 2020" format="dd MMMM yyyy"
> value={this.state.endDate}
{/* {periode.map((option) => ( onChange={(e) => this.handleChange(e, 'end_date')}
<MenuItem key={option.value} value={option.value}> KeyboardButtonProps={{
{option.label} 'aria-label': 'change date',
</MenuItem> }}
))} */} style={{padding: 0, margin: 0, width: '100%'}}
</TextField> InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
/>
</div> </div>
</div> </div>
</div> </div>
<div className="grid grid-2x grid-mobile-none gap-15px"> <div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1"> <div className="column-1">
<div className="margin-bottom-20px"> <div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="status" id="status"
variant="filled" label="Status"
label="Aktif" value={this.props.data.status}
value="Aktif" disabled
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
> >
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField> </TextField>
</div> </div>
</div> </div>
<div className="column-2"> <div className="column-2">
<div className="margin-bottom-20px" style={{ marginTop: 8 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="max-value" id="max-value"
label="Max Value" label="Max Value"
value="10" value="10"
onChange={(e) => this.handleChange(e, '')}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
> >
</TextField> </TextField>
</div> </div>
</div> </div>
</div> </div>
<div className=""> {/* <div className="">
<span style={{ fontSize: 11, fontWeight: 600 }}>Dibuat<span style={{ marginLeft: 20}}> : Admin - 21 Jul 2020, 18:45</span></span> <span style={{ fontSize: 11, fontWeight: 600 }}>Dibuat<span style={{ marginLeft: 20}}> : Admin - 21 Jul 2020, 18:45</span></span>
</div> </div>
<div className=""> <div className="">
<span style={{ fontSize: 11, fontWeight: 'bold' }}>Diubah<span style={{ marginLeft: 17}}> : Admin - 21 Jul 2020, 18:45</span></span> <span style={{ fontSize: 11, fontWeight: 'bold' }}>Diubah<span style={{ marginLeft: 17}}> : Admin - 21 Jul 2020, 18:45</span></span>
</div> */}
<div style={{flexDirection:'column', display: 'flex', padding: 10 }}>
<Typography style={{fontSize: 12}}>{`Dibuat : ${format(this.state.date, 'dd MMMM yyyy', {locale: localeID})}`}</Typography>
{/* <Typography style={{fontSize: 12}}>{`Diubah: ${this.state.tempData == null? '' : this.state.tempData.updated}`}</Typography> */}
</div> </div>
</div> </div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}> <div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
......
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