Skip to content

T
Tia-dev
Commit 28757fdc authored by Rifka Kurnia Irfiana's avatar Rifka Kurnia Irfiana
Browse files
Options

update layout dan function approval matrix

parent 4f9bb316
Hide whitespace changes
Inline Side-by-side
Showing with 371 additions and 293 deletions
src/container/ApprovalMatrix/ApprovalMatrix.js
View file @ 28757fdc
......@@ -16,17 +16,6 @@ const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions();
const options2 = ct.customOptions2();
const type = [
{
value: 'KPI',
label: 'KPI',
},
{
value: 'Gatau',
label: 'Gatau',
},
];
export default class ApprovalMatrix extends Component {
constructor(props) {
super(props)
......@@ -107,18 +96,23 @@ export default class ApprovalMatrix extends Component {
}
}
handleInputChange = (e) => {
// Immediately update the state
this.setState({
search: e.target.value
handleInputChange(e) {
this.setState({ search: e })
let body = {
"keyword": e
}
api.create().searchAM(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.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)
}
})
// Execute the debounced onChange method
this.onChangeDebounced(e)
}
onChangeDebounced = (e) => {
// Delayed logic goes here
}
createAM = (payload) => {
......@@ -132,6 +126,32 @@ export default class ApprovalMatrix extends Component {
})
}
updateAM = (payload) => {
this.setState({ visibleEdit: false })
api.create().updateAM(payload).then(response => {
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)
if (res.size > 0) {
let url = window.URL.createObjectURL(res);
let a = document.createElement('a');
a.href = url;
a.download = 'Template Approval Matrix.xlsx';
a.click();
}
}
render() {
const columns = [{
name: "Action",
......@@ -242,79 +262,82 @@ export default class ApprovalMatrix extends Component {
<div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} />
<div>
<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>
{/* <form style={{ }}>
<TextField id="" label="" variant="outlined" size="small" placeholder="Search" style={{ width: 423, backgroundColor: 'white', borderRadius: 6 }}/>
</form> */}
<div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5 }}>
<label style={{ width: '20%', color: 'white', fontSize: 16, alignSelf: 'center', paddingTop: 8 }}>Master Data - Approval Matrix</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)}
onChange={(e) => this.handleInputChange(e.target.value)}
inputProps={{ 'aria-label': 'naked' }}
/>
</div>
<div style={{ display: 'flex' }}>
<div style={{ width: '30%', justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
padding: 0
}}
onClick={() => null}
>
<img src={Images.template} />
</button>
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
padding: 0,
margin: 5
}}
onClick={() => this.downloadFile()}
>
<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>
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0,
margin: 5
}}
onClick={() => this.setState({ visibleUpload: true })}
>
<img src={Images.upload} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0
}}
onClick={() => null}
>
<img src={Images.download} />
</button>
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0,
margin: 5
}}
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>
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0,
margin: 5
}}
onClick={() => this.setState({ visibleVisual: true, visibleAM: false })}
>
<img src={Images.visualisasi} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0
}}
>
<img src={Images.add} onClick={() => this.setState({ visibleCreate: true })} />
</button>
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0,
margin: 5
}}
onClick={() => this.setState({ visibleCreate: true })}
>
<img src={Images.add} />
</button>
</div >
</div>
<div style={{ padding: 25, width: '100%' }}>
......@@ -386,6 +409,7 @@ export default class ApprovalMatrix extends Component {
type={"edit"}
onClickClose={() => this.setState({ visibleEdit: false })}
data={this.state.listData[this.state.selectIndex]}
updateAM={this.updateAM.bind(this)}
/>
)}
{this.state.visibleUpload && (
......
src/container/ApprovalMatrix/CreateApprovalMatrix.js
View file @ 28757fdc
import React, { Component } from 'react';
import { TextField, Typography } from '@material-ui/core';
import { DateTimePicker, KeyboardDatePicker, DatePicker } from "@material-ui/pickers";
import MenuItem from '@material-ui/core/MenuItem';
import Autocomplete from '@material-ui/lab/Autocomplete';
import * as R from 'ramda'
import format from "date-fns/format";
import localeID from "date-fns/locale/id"
import api from "../../api";
import Autocomplete from '@material-ui/lab/Autocomplete';
const type = [
{
value: '1',
label: 'YEARLY',
},
{
value: '2',
label: 'MONTHLY',
},
{
value: '3',
label: 'DAILY',
},
];
const approve_by = [
{
user_id: '1',
fullname: 'John Doe',
},
{
user_id: '2',
fullname: 'John Doe lagi',
},
];
const operator = [
{
value: '1',
label: '-',
},
{
value: '2',
label: 'AND',
},
{
value: '3',
label: 'OR',
},
];
export default class CreateApprovalMatrix extends Component {
constructor(props) {
......@@ -52,22 +13,23 @@ export default class CreateApprovalMatrix extends Component {
this.state = {
userId: null,
typeId: null,
// type: '',
operatorId: null,
order: '',
approvedBy: null,
types: null,
// operator: '',
operators: null,
startDate: '',
endDate: '',
userData: [],
value: null
value: null,
date: new Date()
}
}
componentDidMount() {
this.getUserData()
this.getTypeData()
this.getOperatorData()
}
getUserData() {
......@@ -85,7 +47,7 @@ export default class CreateApprovalMatrix extends Component {
options: userData,
getOptionLabel: (option) => option.fullname,
};
this.setState({ approvedBy: defaultProps, userData: response.data.data, value: userData[0] })
this.setState({ approvedBy: defaultProps, userData: response.data.data})
} else {
alert(response.data.message)
}
......@@ -102,7 +64,6 @@ export default class CreateApprovalMatrix extends Component {
approval_type_name: item.approval_type_name
}
})
// console.log(userData)
let typeProps = {
options: typeData,
getOptionLabel: (option) => option.approval_type_name,
......@@ -120,16 +81,16 @@ export default class CreateApprovalMatrix extends Component {
let data = response.data.data
let operatorData = data.map((item) => {
return {
approval_type_id: item.approval_type_id,
approval_type_name: item.approval_type_name
operator_type_id: item.operator_type_id,
operator_type_name: item.operator_type_name
}
})
// console.log(userData)
let operatorProps = {
options: operatorData,
getOptionLabel: (option) => option.approval_type_name,
getOptionLabel: (option) => option.operator_type_name,
};
this.setState({ types: operatorProps, operatorData: response.data.data })
this.setState({ operators: operatorProps, operatorData: response.data.data })
} else {
alert(response.data.message)
}
......@@ -155,16 +116,19 @@ export default class CreateApprovalMatrix extends Component {
}
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.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");
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');
let payload = {
"approval_type_id": 2,
"approval_type_id": this.state.typeId,
"orders": this.state.order,
"user_id": this.state.userId,
"operator_type_id": 2,
"operator_type_id": this.state.operatorId,
"start_date": this.state.startDate,
"end_date": this.state.endDate
}
......@@ -197,72 +161,124 @@ export default class CreateApprovalMatrix extends Component {
<div className="border-bottom" style={{ padding: 20 }}>
<div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<div className="" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%', height: '90%' }}
id="id"
variant="filled"
label="ID"
disabled
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
>
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px" style={{ marginTop: 8 }}>
<div className="" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.types}
id="tipe"
onChange={(event, newInputValue) => this.setState({typeId:newInputValue.approval_type_id})}
debug
renderInput={(params) => <TextField {...params} label="Tipe" margin="normal" />}
disableClearable
renderInput={(params) => <TextField {...params} label="Tipe Persetujuan" />}
// inputProps={{
// style: {
// fontSize: 11
// }
// }}
// InputLabelProps={{
// style: {
// fontSize: 11,
// color: '#7e8085'
// }
// }}
/>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="order"
label="Order"
value={this.state.order}
onChange={(e) => this.setState({ order: e.target.value })}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
>
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
// margin="normal"
{...this.state.approvedBy}
id="debug"
id="approvedby"
onChange={(event, newInputValue) => this.setState({userId:newInputValue.user_id})}
debug
renderInput={(params) => <TextField {...params} label="debug" margin="normal" />}
value={this.state.value}
disableClearable
renderInput={(params) => <TextField {...params} label="Pemberi Persetujuan" />}
// value={this.state.value}
// inputProps={{
// style: {
// fontSize: 11
// }
// }}
// InputLabelProps={{
// style: {
// fontSize: 11,
// color: '#7e8085'
// }
// }}
// style={{ padding: 0, margin: 0, width: '100%'}}
/>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.operators}
// margin="normal"
id="operator"
select
label="Operator"
value={this.state.operator}
onChange={(e) => null}
>
{operator.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
disableClearable
onChange={(event, newInputValue) => this.setState({operatorId:newInputValue.operator_type_id})}
renderInput={(params) => <TextField {...params} label="Operator" />}
// value={this.state.value}
// inputProps={{
// style: {
// fontSize: 11
// }
// }}
// InputLabelProps={{
// style: {
// fontSize: 11,
// color: '#7e8085'
// }
// }}
// style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
</div>
<div className="column-2">
......@@ -271,7 +287,7 @@ export default class CreateApprovalMatrix extends Component {
</div>
<div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<DatePicker
margin="normal"
id="startDate"
......@@ -282,13 +298,23 @@ export default class CreateApprovalMatrix extends Component {
KeyboardButtonProps={{
'aria-label': 'change date',
}}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<DatePicker
margin="normal"
id="endDate"
......@@ -299,6 +325,17 @@ export default class CreateApprovalMatrix extends Component {
KeyboardButtonProps={{
'aria-label': 'change date',
}}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
......@@ -306,20 +343,30 @@ export default class CreateApprovalMatrix extends Component {
</div>
<div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
variant="filled"
id="status"
label="Status"
disabled
defaultValue={"Aktif"}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
>
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px" style={{ marginTop: 8 }}>
{/* <div className="column-2">
<div className="margin-top-10px" style={{ marginTop: 8 }}>
<TextField
style={{ width: '100%' }}
id="max-value"
......@@ -328,13 +375,11 @@ export default class CreateApprovalMatrix extends Component {
>
</TextField>
</div>
</div>
</div>
<div className="">
<span style={{ fontSize: 11, fontWeight: 600 }}>Dibuat<span style={{ marginLeft: 20}}> : Admin - 21 Jul 2020, 18:45</span></span>
</div> */}
</div>
<div className="">
<span style={{ fontSize: 11, fontWeight: 'bold' }}>Diubah<span style={{ marginLeft: 17}}> : Admin - 21 Jul 2020, 18:45</span></span>
<div className="margin-top-10px" style={{ padding: 10, paddingLeft: 0 }}>
<Typography style={{ fontSize: 11 }}>{`Dibuat : ${format(this.state.date, 'dd MMMM yyyy', {locale: localeID})}`}</Typography>
{/* <Typography style={{ fontSize: 11 }}>Diubah : Admin - 21 Jul 2020, 18:45</Typography> */}
</div>
</div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
......
src/container/ApprovalMatrix/EditApprovalMatrix.js
View file @ 28757fdc
import React, { Component } from 'react';
import { TextField, Typography } from '@material-ui/core';
import { DateTimePicker, KeyboardDatePicker, DatePicker} from "@material-ui/pickers";
import MenuItem from '@material-ui/core/MenuItem';
import Autocomplete from '@material-ui/lab/Autocomplete';
import * as R from 'ramda'
import format from "date-fns/format";
import localeID from "date-fns/locale/id"
import api from "../../api";
import Autocomplete from '@material-ui/lab/Autocomplete';
const type = [
{
value: 'YEARLY',
label: 'YEARLY',
},
{
value: 'MONTHLY',
label: 'MONTHLY',
},
{
value: 'DAILY',
label: 'DAILY',
},
];
const approve_by = [
{
value: '1',
label: 'John Doe',
},
{
value: '2',
label: 'John Doe lagi',
},
];
const operator = [
{
value: '-',
......@@ -49,11 +24,17 @@ export default class EditApprovalMatrix extends Component {
constructor(props) {
super(props)
this.state = {
id: '',
order: '',
startDate: null,
endDate: null,
date: new Date(),
approvedBy: null,
getApprovedBy: null
getApprovedBy: null,
types: null,
getTypes: null,
operators: null,
getOperators: null
}
}
......@@ -65,20 +46,21 @@ export default class EditApprovalMatrix extends Component {
// fullname: data.fullname
// }
this.setState({
id: data.business_unit_id,
id: data.approval_matrix_id,
startDate: data.start_date,
endDate: data.end_date,
order: data.orders,
getUserId: data.user_id,
getTypeId: data.approval_type_id,
getOperatorId: data.operator_type_id,
}, () => this.getUserData())
}, () => this.getUserData(), this.getTypeData(), this.getOperatorData())
}
console.log(this.props.data)
// this.getUserData()
// console.log(this.props.data)
}
getUserData() {
api.create().getApprovedByAM().then((response) => {
console.log(response)
if (response.data.status == 'success') {
let data = response.data.data
let userData = data.map((item) => {
......@@ -88,7 +70,6 @@ export default class EditApprovalMatrix extends Component {
}
})
let index = userData.findIndex((val) => val.user_id == this.state.getUserId)
// console.log(userData)
let defaultProps = {
options: userData,
getOptionLabel: (option) => option.fullname,
......@@ -100,16 +81,61 @@ export default class EditApprovalMatrix extends Component {
})
}
getOperatorData() {
api.create().getOperatorAM().then((response) => {
if (response.data.status == 'success') {
let data = response.data.data
let operatorData = data.map((item) => {
return {
operator_type_id: item.operator_type_id,
operator_type_name: item.operator_type_name
}
})
let index = operatorData.findIndex((val) => val.operator_type_id == this.state.getOperatorId)
let operatorProps = {
options: operatorData,
getOptionLabel: (option) => option.operator_type_name,
};
this.setState({ operators: operatorProps, operatorData: response.data.data, getOperators: index == -1 ? operatorData[0]: operatorData[index] })
} else {
alert(response.data.message)
}
})
}
getTypeData() {
api.create().getTypeAM().then((response) => {
if (response.data.status == 'success') {
let data = response.data.data
let typeData = data.map((item) => {
return {
approval_type_id: item.approval_type_id,
approval_type_name: item.approval_type_name
}
})
let index = typeData.findIndex((val) => val.approval_type_id == this.state.getTypeId)
let typeProps = {
options: typeData,
getOptionLabel: (option) => option.approval_type_name,
};
this.setState({ types: typeProps, typeData: response.data.data, getTypes: index == -1 ? typeData[0]: typeData[index] })
} else {
alert(response.data.message)
}
})
}
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)
// console.log(this.state.startDate)
})
} else if (isDate && type == 'end_date') {
this.setState({ endDate: format(e, 'yyyy-MM-dd') }, () => {
console.log(this.state.endDate)
// console.log(this.state.endDate)
})
} else {
// this.setState({...data, tempData: {...this.state.tempData, [e.target.name] : e.target.value}})
......@@ -118,21 +144,27 @@ export default class EditApprovalMatrix extends Component {
}
validasi() {
// if (R.isEmpty(this.state.order)) return alert("Order 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.");
if (R.isNil(this.state.getTypeId)) return alert("Tipe Persetujuan is Required.");
if (R.isEmpty(this.state.order)) return alert("Order is Required.");
if (R.isNil(this.state.getUserId)) return alert("Pemberi Persetujuan is Required.");
if (R.isNil(this.state.getOperatorId)) 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)) 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 = {
"approval_type_id": 2,
"orders": this.state.order,
"user_id": this.state.getApprovedBy.user_id,
"operator_type_id": 2,
"start_date": this.state.startDate,
"end_date": this.state.endDate
"approval_matrix_id": this.state.id,
"approval_type_id": this.state.getTypes.approval_type_id,
"orders": this.state.order,
"user_id": this.state.getApprovedBy.user_id,
"operator_type_id": this.state.getOperators.operator_type_id,
"start_date": this.state.startDate,
"end_date": this.state.endDate
}
this.props.updateAM(payload)
}
// this.props.createAM(payload)
console.log(payload)
// console.log(payload)
}
......@@ -187,33 +219,16 @@ export default class EditApprovalMatrix extends Component {
</div>
</div>
<div className="column-2">
<div className="" style={{ padding: 10, paddingLeft: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="type"
select
label="Tipe Persetujuan"
value={this.props.data.approval_type_name}
onChange={(e) => null}
SelectProps={{
// native: true,
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
>
{type.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
<div className="" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.types}
option
disableClearable
id="tipe"
onChange={(event, newInputValue) => this.setState({getTypes:newInputValue})}
renderInput={(params) => <TextField {...params} label="Tipe Persetujuan" />}
value={this.state.getTypes}
/>
</div>
</div>
</div>
......@@ -224,8 +239,8 @@ export default class EditApprovalMatrix extends Component {
style={{ width: '100%' }}
id="order"
label="Order"
value={this.props.data.orders}
onChange={(e) => this.handleChange(e, '')}
value={this.state.order}
onChange={(e) => this.setState({ order: e.target.value })}
inputProps={{
style: {
fontSize: 11
......@@ -242,14 +257,14 @@ export default class EditApprovalMatrix extends Component {
</div>
</div>
<div className="column-2">
<div className="margin-top-10px" style={{ paddingTop: 4, paddingRight: 10, paddingBottom: 10, paddingLeft: 10, borderRadius: 5 }}>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.approvedBy}
option
id="debug"
disableClearable
id="approvedby"
onChange={(event, newInputValue) => this.setState({getApprovedBy: newInputValue})}
debug
renderInput={(params) => <TextField {...params} label="debug" margin="normal" />}
renderInput={(params) => <TextField {...params} label="Pemberi Persetujuan" />}
value={this.state.getApprovedBy}
/>
</div>
......@@ -257,32 +272,16 @@ export default class EditApprovalMatrix extends Component {
</div>
<div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-top-10px" style={{ paddingTop: 4, paddingRight: 10, paddingBottom: 10, paddingLeft: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.operators}
option
disableClearable
id="operator"
select
label="Operator"
value={this.props.data.operator_type_name}
onChange={(e) => null}
selectProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
>
{operator.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
onChange={(event, newInputValue) => this.setState({getOperators: newInputValue})}
renderInput={(params) => <TextField {...params} label="Operator" />}
value={this.state.getOperators}
/>
</div>
</div>
<div className="column-2">
......@@ -302,13 +301,18 @@ export default class EditApprovalMatrix extends Component {
KeyboardButtonProps={{
'aria-label': 'change date',
}}
style={{padding: 0, margin: 0, width: '100%'}}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
style={{padding: 0, margin: 0, width: '100%'}}
/>
</div>
</div>
......@@ -324,14 +328,19 @@ export default class EditApprovalMatrix extends Component {
KeyboardButtonProps={{
'aria-label': 'change date',
}}
style={{padding: 0, margin: 0, width: '100%'}}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
/>
style={{padding: 0, margin: 0, width: '100%'}}
/>
</div>
</div>
</div>
......@@ -360,7 +369,7 @@ export default class EditApprovalMatrix extends Component {
</div>
</div>
<div className="column-2">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
{/* <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="max-value"
......@@ -380,18 +389,18 @@ export default class EditApprovalMatrix extends Component {
}}
>
</TextField>
</div>
</div> */}
</div>
</div>
{/* <div className="">
<span style={{ fontSize: 11, fontWeight: 600 }}>Dibuat<span style={{ marginLeft: 20}}> : Admin - 21 Jul 2020, 18:45</span></span>
</div>
<div className="">
<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 className="margin-top-10px" style={{ padding: 10, paddingLeft: 0, borderRadius: 5 }}>
<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>
<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