Skip to content

T
Tia-dev
Commit f666c1cd authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

Merge branch 'rifka' into 'master' 

update layout dan function approval matrix

See merge request !84
parents 31cb80cc a919d0f9
Hide whitespace changes
Inline Side-by-side
Showing with 387 additions and 293 deletions
src/container/ApprovalMatrix/ApprovalMatrix.js
View file @ f666c1cd
......@@ -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,48 @@ 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();
}
}
downloadDataTable = async () => {
alert('link belum ada')
// let res = await fetch(
// "https://tia.eksad.com/tia-reporting-dev/public/business_unit/export_business_unit"
// )
// res = await res.blob()
// console.log(res)
// if (res.size > 0) {
// let url = window.URL.createObjectURL(res);
// let a = document.createElement('a');
// a.href = url;
// a.download = 'Business Unit.xlsx';
// a.click();
// }
}
render() {
const columns = [{
name: "Action",
......@@ -242,79 +278,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={() => this.downloadDataTable()}
>
<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 +425,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 @ f666c1cd
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 @ f666c1cd
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