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