Skip to content

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

update validasi dan css layout apprv matrix

parent 1b1ff58e
Hide whitespace changes
Inline Side-by-side
Showing with 107 additions and 72 deletions
src/container/ApprovalMatrix/ApprovalMatrix.js
View file @ 02873894
...@@ -282,12 +282,11 @@ export default class ApprovalMatrix extends Component { ...@@ -282,12 +282,11 @@ export default class ApprovalMatrix extends Component {
openPopUp(index, type) { openPopUp(index, type) {
if (type === 'edit') { if (type === 'edit') {
this.setState({ this.setState({
selectIndex: index, rowData: index,
visibleEdit: true visibleEdit: true
}) })
} else { } else {
this.setState({ this.setState({
data: this.state.listData[index],
visibleCreate: true visibleCreate: true
}) })
} }
...@@ -316,6 +315,7 @@ export default class ApprovalMatrix extends Component { ...@@ -316,6 +315,7 @@ export default class ApprovalMatrix extends Component {
this.setState({ visibleCreate: false }) this.setState({ visibleCreate: false })
api.create().createAM(payload).then(response => { api.create().createAM(payload).then(response => {
if (response.data.status == 'success') { if (response.data.status == 'success') {
alert(response.data.message)
this.getData() this.getData()
} else { } else {
alert(response.data.message) alert(response.data.message)
...@@ -327,6 +327,7 @@ export default class ApprovalMatrix extends Component { ...@@ -327,6 +327,7 @@ export default class ApprovalMatrix extends Component {
this.setState({ visibleEdit: false }) this.setState({ visibleEdit: false })
api.create().updateAM(payload).then(response => { api.create().updateAM(payload).then(response => {
if (response.data.status == 'success') { if (response.data.status == 'success') {
alert(response.data.message)
this.getData() this.getData()
} else { } else {
alert(response.data.message) alert(response.data.message)
...@@ -337,8 +338,8 @@ export default class ApprovalMatrix extends Component { ...@@ -337,8 +338,8 @@ export default class ApprovalMatrix extends Component {
updateVAM = (payload) => { updateVAM = (payload) => {
this.setState({ visibleVisual: false, visibleAM: true }) this.setState({ visibleVisual: false, visibleAM: true })
api.create().updateVAM(payload).then(response => { api.create().updateVAM(payload).then(response => {
// console.log(response.data)
if (response.data.status == 'success') { if (response.data.status == 'success') {
alert(response.data.message)
this.getData() this.getData()
} else { } else {
alert(response.data.message) alert(response.data.message)
...@@ -399,7 +400,7 @@ export default class ApprovalMatrix extends Component { ...@@ -399,7 +400,7 @@ export default class ApprovalMatrix extends Component {
cursor: 'pointer', cursor: 'pointer',
borderColor: 'transparent' borderColor: 'transparent'
}} }}
onClick={() => this.openPopUp(tableMeta.rowIndex, 'edit')} onClick={() => this.openPopUp(tableMeta.rowData, 'edit')}
// onClick={() => this.setState({ visibleEdit: true })} // onClick={() => this.setState({ visibleEdit: true })}
> >
<img src={Images.editCopy} /> <img src={Images.editCopy} />
...@@ -649,7 +650,7 @@ export default class ApprovalMatrix extends Component { ...@@ -649,7 +650,7 @@ export default class ApprovalMatrix extends Component {
<EditApprovalMatrix <EditApprovalMatrix
type={"edit"} type={"edit"}
onClickClose={() => this.setState({ visibleEdit: false })} onClickClose={() => this.setState({ visibleEdit: false })}
data={this.state.listData[this.state.selectIndex]} data={this.state.rowData}
updateAM={this.updateAM.bind(this)} updateAM={this.updateAM.bind(this)}
/> />
)} )}
......
src/container/ApprovalMatrix/CreateApprovalMatrix.js
View file @ 02873894
...@@ -19,8 +19,8 @@ export default class CreateApprovalMatrix extends Component { ...@@ -19,8 +19,8 @@ export default class CreateApprovalMatrix extends Component {
approvedBy: null, approvedBy: null,
types: null, types: null,
operators: null, operators: null,
startDate: '', startDate: null,
endDate: '', endDate: null,
userData: [], userData: [],
value: null, value: null,
date: new Date(), date: new Date(),
...@@ -39,6 +39,12 @@ export default class CreateApprovalMatrix extends Component { ...@@ -39,6 +39,12 @@ export default class CreateApprovalMatrix extends Component {
this.getUserData() this.getUserData()
this.getTypeData() this.getTypeData()
this.getOperatorData() this.getOperatorData()
let date = format(new Date, 'yyyy-MM-dd')
console.log(date);
this.setState({
startDate: date,
endDate: date
})
} }
getUserData() { getUserData() {
...@@ -108,7 +114,6 @@ export default class CreateApprovalMatrix extends Component { ...@@ -108,7 +114,6 @@ export default class CreateApprovalMatrix extends Component {
} }
}) })
} }
handleChange(e, type) { handleChange(e, type) {
let data = this.state let data = this.state
...@@ -151,10 +156,9 @@ export default class CreateApprovalMatrix extends Component { ...@@ -151,10 +156,9 @@ export default class CreateApprovalMatrix extends Component {
} }
else if (R.isNil(this.state.userId)) return alert("Pemberi Persetujuan tidak boleh kosong"); else if (R.isNil(this.state.userId)) return alert("Pemberi Persetujuan tidak boleh kosong");
else if (R.isNil(this.state.operatorId)) return alert("Operator tidak boleh kosong"); else if (R.isNil(this.state.operatorId)) return alert("Operator tidak boleh kosong");
else 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"); else if (R.isNil(this.state.startDate)) {
else if (R.isEmpty(this.state.startDate)) {
this.setState({ errorStartDate: true, msgErrorStartDate: 'Tanggal Mulai tidak boleh kosong' }) this.setState({ errorStartDate: true, msgErrorStartDate: 'Tanggal Mulai tidak boleh kosong' })
} else if (R.isEmpty(this.state.endDate)) { } else if (R.isNil(this.state.endDate)) {
this.setState({ errorEndDate: true, msgErrorEndDate: 'Tanggal Berakhir tidak boleh kosong' }) this.setState({ errorEndDate: true, msgErrorEndDate: 'Tanggal Berakhir tidak boleh kosong' })
} else { } else {
console.log('masuk'); console.log('masuk');
...@@ -175,7 +179,7 @@ export default class CreateApprovalMatrix extends Component { ...@@ -175,7 +179,7 @@ export default class CreateApprovalMatrix extends Component {
return ( return (
<div className="test app-popup-show" style={{ paddingTop: 100 }}> <div className="test app-popup-show" style={{ paddingTop: 100 }}>
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}> <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
<div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}> <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}> <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title"> <div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Tambah Data</span> <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Tambah Data</span>
...@@ -255,6 +259,7 @@ export default class CreateApprovalMatrix extends Component { ...@@ -255,6 +259,7 @@ export default class CreateApprovalMatrix extends Component {
style={{ width: '100%' }} style={{ width: '100%' }}
id="order" id="order"
label="Order" label="Order"
type={"number"}
value={this.state.order} value={this.state.order}
error={this.state.errorOrder} error={this.state.errorOrder}
helperText={this.state.msgErrOrder} helperText={this.state.msgErrOrder}
......
src/container/ApprovalMatrix/EditApprovalMatrix.js
View file @ 02873894
...@@ -7,20 +7,6 @@ import format from "date-fns/format"; ...@@ -7,20 +7,6 @@ import format from "date-fns/format";
import api from "../../api"; import api from "../../api";
import Images from '../../assets/Images'; import Images from '../../assets/Images';
const operator = [
{
value: '-',
label: '-',
},
{
value: 'AND',
label: 'AND',
},
{
value: 'OR',
label: 'OR',
},
];
export default class EditApprovalMatrix extends Component { export default class EditApprovalMatrix extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
...@@ -35,29 +21,48 @@ export default class EditApprovalMatrix extends Component { ...@@ -35,29 +21,48 @@ export default class EditApprovalMatrix extends Component {
types: null, types: null,
getTypes: null, getTypes: null,
operators: null, operators: null,
getOperators: null getOperators: null,
errorOrder: false,
msgErrOrder: '',
errorStartDate: false,
errorEndDate: false,
msgErrorStartDate: "",
msgErrorEndDate: ""
} }
} }
componentDidMount() { componentDidMount() {
if (this.props.type === 'edit') { if (this.props.type === 'edit') {
let data = this.props.data this.getDetailAM()
console.log(this.state.startDate);
// let getApprovedBy = { // let getApprovedBy = {
// user_id: data.user_id, // user_id: data.user_id,
// fullname: data.fullname // fullname: data.fullname
// } // })
this.setState({
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.getTypeData(), this.getOperatorData())
} }
// console.log(this.props.data) }
getDetailAM() {
api.create().getDetailAM(this.props.data[1]).then(response => {
// console.log(response)
if (response.data) {
if (response.data.status === "success") {
let data = response.data.data
this.setState({
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,
status: data.status,
created: data.created,
updated: data.updated === null ? "" : data.updated
}, () => this.getUserData(), this.getTypeData(), this.getOperatorData())
}
}
})
} }
getUserData() { getUserData() {
...@@ -131,11 +136,13 @@ export default class EditApprovalMatrix extends Component { ...@@ -131,11 +136,13 @@ export default class EditApprovalMatrix extends Component {
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'), endDate: null }, () => {
this.clearError()
// 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') }, () => {
this.clearError()
// console.log(this.state.endDate) // console.log(this.state.endDate)
}) })
} else { } else {
...@@ -144,41 +151,54 @@ export default class EditApprovalMatrix extends Component { ...@@ -144,41 +151,54 @@ export default class EditApprovalMatrix extends Component {
} }
clearError() {
this.setState({
errorOrder: false,
msgErrOrder: "",
errorStartDate: false,
errorEndDate: false,
msgErrorStartDate: "",
msgErrorEndDate: ""
})
}
validasi() { validasi() {
if (R.isNil(this.state.getTypes)) return alert("Tipe Persetujuan is Required."); if (R.isNil(this.state.getTypes)) {
if (R.isEmpty(this.state.order)) return alert("Order is Required."); return alert("Tipe Persetujuan tidak boleh kosong");
if (R.isNil(this.state.getApprovedBy)) return alert("Pemberi Persetujuan is Required."); }
if (R.isNil(this.state.getOperators)) return alert("Operator is Required."); else if (R.isEmpty(this.state.order)) {
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"); this.setState({ errorOrder: true, msgErrOrder: 'Order tidak boleh kosong'})
if (R.isEmpty(this.state.startDate)) return alert("Tanggal Mulai is Required."); }
if (R.isEmpty(this.state.endDate)) return alert("Tanggal Berakhir is Required."); else if (R.isNil(this.state.getApprovedBy)) return alert("Pemberi Persetujuan tidak boleh kosong");
console.log('masuk'); else if (R.isNil(this.state.getOperators)) return alert("Operator tidak boleh kosong");
if (this.props.type == 'edit') { else 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");
let payload = { else if (R.isEmpty(this.state.startDate)) {
"approval_matrix_id": this.state.id, this.setState({ errorStartDate: true, msgErrorStartDate: 'Tanggal Mulai tidak boleh kosong' })
"approval_type_id": this.state.getTypes.approval_type_id, } else if (R.isEmpty(this.state.endDate)) {
"orders": this.state.order, this.setState({ errorEndDate: true, msgErrorEndDate: 'Tanggal Berakhir tidak boleh kosong' })
"user_id": this.state.getApprovedBy.user_id, } else {
"operator_type_id": this.state.getOperators.operator_type_id, console.log('masuk');
"start_date": this.state.startDate, if (this.props.type == 'edit') {
"end_date": this.state.endDate let payload = {
"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)
// console.log(payload)
} }
this.props.updateAM(payload)
} }
// console.log(payload)
}
handleDate(item) {
let value = format(item, 'dd MMMM yyyy')
return value
} }
render() { render() {
return ( return (
<div className="test app-popup-show" style={{ paddingTop: 100 }}> <div className="test app-popup-show" style={{ paddingTop: 100 }}>
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}> <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
<div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}> <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}> <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title"> <div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Edit Data</span> <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Edit Data</span>
...@@ -203,7 +223,7 @@ export default class EditApprovalMatrix extends Component { ...@@ -203,7 +223,7 @@ export default class EditApprovalMatrix extends Component {
style={{ width: '100%' }} style={{ width: '100%' }}
id="id" id="id"
label="ID" label="ID"
value={this.props.data.approval_matrix_id} value={this.state.id}
disabled disabled
inputProps={{ inputProps={{
style: { style: {
...@@ -250,8 +270,11 @@ export default class EditApprovalMatrix extends Component { ...@@ -250,8 +270,11 @@ export default class EditApprovalMatrix extends Component {
style={{ width: '100%' }} style={{ width: '100%' }}
id="order" id="order"
label="Order" label="Order"
type={"number"}
value={this.state.order} value={this.state.order}
onChange={(e) => this.setState({ order: e.target.value })} error={this.state.errorOrder}
helperText={this.state.msgErrOrder}
onChange={(e) => this.setState({ order: e.target.value }, () => this.clearError())}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11 fontSize: 11
...@@ -263,6 +286,7 @@ export default class EditApprovalMatrix extends Component { ...@@ -263,6 +286,7 @@ export default class EditApprovalMatrix extends Component {
color: '#7e8085' color: '#7e8085'
} }
}} }}
// name="order"
> >
</TextField> </TextField>
</div> </div>
...@@ -343,6 +367,8 @@ export default class EditApprovalMatrix extends Component { ...@@ -343,6 +367,8 @@ export default class EditApprovalMatrix extends Component {
color: '#7e8085' color: '#7e8085'
} }
}} }}
error={this.state.errorStartDate}
helperText={this.state.msgErrorStartDate}
style={{padding: 0, margin: 0, width: '100%'}} style={{padding: 0, margin: 0, width: '100%'}}
/> />
</div> </div>
...@@ -354,6 +380,9 @@ export default class EditApprovalMatrix extends Component { ...@@ -354,6 +380,9 @@ export default class EditApprovalMatrix extends Component {
id="endDate" id="endDate"
label="Berlaku Hingga" label="Berlaku Hingga"
format="dd MMMM yyyy" format="dd MMMM yyyy"
error={this.state.errorEndDate}
helperText={this.state.msgErrorEndDate}
minDate={this.state.startDate}
value={this.state.endDate} value={this.state.endDate}
onChange={(e) => this.handleChange(e, 'end_date')} onChange={(e) => this.handleChange(e, 'end_date')}
KeyboardButtonProps={{ KeyboardButtonProps={{
...@@ -380,9 +409,9 @@ export default class EditApprovalMatrix extends Component { ...@@ -380,9 +409,9 @@ export default class EditApprovalMatrix extends Component {
<div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
value={this.state.status}
id="status" id="status"
label="Status" label="Status"
value={this.props.data.status}
disabled disabled
inputProps={{ inputProps={{
style: { style: {
...@@ -426,11 +455,11 @@ export default class EditApprovalMatrix extends Component { ...@@ -426,11 +455,11 @@ export default class EditApprovalMatrix extends Component {
<div className="margin-top-10px" style={{ padding: 10, paddingLeft: 0, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, paddingLeft: 0, borderRadius: 5 }}>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '20%' }}>Dibuat</Typography> <Typography style={{ fontSize: 11, width: '20%' }}>Dibuat</Typography>
<Typography style={{ fontSize: 11 }}>: {this.props.data.created}</Typography> <Typography style={{ fontSize: 11 }}>: {this.state.created}</Typography>
</div> </div>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '20%' }}>Diubah</Typography> <Typography style={{ fontSize: 11, width: '20%' }}>Diubah</Typography>
<Typography style={{ fontSize: 11 }}>: {this.props.data.updated == - null ? "" : this.props.data.updated}</Typography> <Typography style={{ fontSize: 11 }}>: {this.state.updated == - null ? "" : this.state.updated}</Typography>
</div> </div>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment