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
Show 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 {
openPopUp(index, type) {
if (type === 'edit') {
this.setState({
selectIndex: index,
rowData: index,
visibleEdit: true
})
} else {
this.setState({
data: this.state.listData[index],
visibleCreate: true
})
}
......@@ -316,6 +315,7 @@ export default class ApprovalMatrix extends Component {
this.setState({ visibleCreate: false })
api.create().createAM(payload).then(response => {
if (response.data.status == 'success') {
alert(response.data.message)
this.getData()
} else {
alert(response.data.message)
......@@ -327,6 +327,7 @@ export default class ApprovalMatrix extends Component {
this.setState({ visibleEdit: false })
api.create().updateAM(payload).then(response => {
if (response.data.status == 'success') {
alert(response.data.message)
this.getData()
} else {
alert(response.data.message)
......@@ -337,8 +338,8 @@ export default class ApprovalMatrix extends Component {
updateVAM = (payload) => {
this.setState({ visibleVisual: false, visibleAM: true })
api.create().updateVAM(payload).then(response => {
// console.log(response.data)
if (response.data.status == 'success') {
alert(response.data.message)
this.getData()
} else {
alert(response.data.message)
......@@ -399,7 +400,7 @@ export default class ApprovalMatrix extends Component {
cursor: 'pointer',
borderColor: 'transparent'
}}
onClick={() => this.openPopUp(tableMeta.rowIndex, 'edit')}
onClick={() => this.openPopUp(tableMeta.rowData, 'edit')}
// onClick={() => this.setState({ visibleEdit: true })}
>
<img src={Images.editCopy} />
......@@ -649,7 +650,7 @@ export default class ApprovalMatrix extends Component {
<EditApprovalMatrix
type={"edit"}
onClickClose={() => this.setState({ visibleEdit: false })}
data={this.state.listData[this.state.selectIndex]}
data={this.state.rowData}
updateAM={this.updateAM.bind(this)}
/>
)}
......
src/container/ApprovalMatrix/CreateApprovalMatrix.js
View file @ 02873894
......@@ -19,8 +19,8 @@ export default class CreateApprovalMatrix extends Component {
approvedBy: null,
types: null,
operators: null,
startDate: '',
endDate: '',
startDate: null,
endDate: null,
userData: [],
value: null,
date: new Date(),
......@@ -39,6 +39,12 @@ export default class CreateApprovalMatrix extends Component {
this.getUserData()
this.getTypeData()
this.getOperatorData()
let date = format(new Date, 'yyyy-MM-dd')
console.log(date);
this.setState({
startDate: date,
endDate: date
})
}
getUserData() {
......@@ -109,7 +115,6 @@ export default class CreateApprovalMatrix extends Component {
})
}
handleChange(e, type) {
let data = this.state
let isDate = type !== '' ? true : false
......@@ -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.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.isEmpty(this.state.startDate)) {
else if (R.isNil(this.state.startDate)) {
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' })
} else {
console.log('masuk');
......@@ -175,7 +179,7 @@ export default class CreateApprovalMatrix extends Component {
return (
<div className="test app-popup-show" style={{ paddingTop: 100 }}>
<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="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Tambah Data</span>
......@@ -255,6 +259,7 @@ export default class CreateApprovalMatrix extends Component {
style={{ width: '100%' }}
id="order"
label="Order"
type={"number"}
value={this.state.order}
error={this.state.errorOrder}
helperText={this.state.msgErrOrder}
......
src/container/ApprovalMatrix/EditApprovalMatrix.js
View file @ 02873894
......@@ -7,20 +7,6 @@ import format from "date-fns/format";
import api from "../../api";
import Images from '../../assets/Images';
const operator = [
{
value: '-',
label: '-',
},
{
value: 'AND',
label: 'AND',
},
{
value: 'OR',
label: 'OR',
},
];
export default class EditApprovalMatrix extends Component {
constructor(props) {
super(props)
......@@ -35,17 +21,33 @@ export default class EditApprovalMatrix extends Component {
types: null,
getTypes: null,
operators: null,
getOperators: null
getOperators: null,
errorOrder: false,
msgErrOrder: '',
errorStartDate: false,
errorEndDate: false,
msgErrorStartDate: "",
msgErrorEndDate: ""
}
}
componentDidMount() {
if (this.props.type === 'edit') {
let data = this.props.data
this.getDetailAM()
console.log(this.state.startDate);
// let getApprovedBy = {
// user_id: data.user_id,
// fullname: data.fullname
// }
// })
}
}
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,
......@@ -54,10 +56,13 @@ export default class EditApprovalMatrix extends Component {
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())
}
// console.log(this.props.data)
}
})
}
getUserData() {
......@@ -131,11 +136,13 @@ export default class EditApprovalMatrix extends Component {
let data = this.state
let isDate = type !== '' ? true : false
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)
})
} else if (isDate && type == 'end_date') {
this.setState({ endDate: format(e, 'yyyy-MM-dd') }, () => {
this.clearError()
// console.log(this.state.endDate)
})
} else {
......@@ -144,14 +151,32 @@ export default class EditApprovalMatrix extends Component {
}
clearError() {
this.setState({
errorOrder: false,
msgErrOrder: "",
errorStartDate: false,
errorEndDate: false,
msgErrorStartDate: "",
msgErrorEndDate: ""
})
}
validasi() {
if (R.isNil(this.state.getTypes)) return alert("Tipe Persetujuan is Required.");
if (R.isEmpty(this.state.order)) return alert("Order is Required.");
if (R.isNil(this.state.getApprovedBy)) return alert("Pemberi Persetujuan is Required.");
if (R.isNil(this.state.getOperators)) 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.");
if (R.isNil(this.state.getTypes)) {
return alert("Tipe Persetujuan tidak boleh kosong");
}
else if (R.isEmpty(this.state.order)) {
this.setState({ errorOrder: true, msgErrOrder: 'Order tidak boleh kosong'})
}
else if (R.isNil(this.state.getApprovedBy)) return alert("Pemberi Persetujuan tidak boleh kosong");
else if (R.isNil(this.state.getOperators)) 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.isEmpty(this.state.startDate)) {
this.setState({ errorStartDate: true, msgErrorStartDate: 'Tanggal Mulai tidak boleh kosong' })
} else if (R.isEmpty(this.state.endDate)) {
this.setState({ errorEndDate: true, msgErrorEndDate: 'Tanggal Berakhir tidak boleh kosong' })
} else {
console.log('masuk');
if (this.props.type == 'edit') {
let payload = {
......@@ -164,21 +189,16 @@ export default class EditApprovalMatrix extends Component {
"end_date": this.state.endDate
}
this.props.updateAM(payload)
}
// console.log(payload)
}
handleDate(item) {
let value = format(item, 'dd MMMM yyyy')
return value
}
}
render() {
return (
<div className="test app-popup-show" style={{ paddingTop: 100 }}>
<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="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Edit Data</span>
......@@ -203,7 +223,7 @@ export default class EditApprovalMatrix extends Component {
style={{ width: '100%' }}
id="id"
label="ID"
value={this.props.data.approval_matrix_id}
value={this.state.id}
disabled
inputProps={{
style: {
......@@ -250,8 +270,11 @@ export default class EditApprovalMatrix extends Component {
style={{ width: '100%' }}
id="order"
label="Order"
type={"number"}
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={{
style: {
fontSize: 11
......@@ -263,6 +286,7 @@ export default class EditApprovalMatrix extends Component {
color: '#7e8085'
}
}}
// name="order"
>
</TextField>
</div>
......@@ -343,6 +367,8 @@ export default class EditApprovalMatrix extends Component {
color: '#7e8085'
}
}}
error={this.state.errorStartDate}
helperText={this.state.msgErrorStartDate}
style={{padding: 0, margin: 0, width: '100%'}}
/>
</div>
......@@ -354,6 +380,9 @@ export default class EditApprovalMatrix extends Component {
id="endDate"
label="Berlaku Hingga"
format="dd MMMM yyyy"
error={this.state.errorEndDate}
helperText={this.state.msgErrorEndDate}
minDate={this.state.startDate}
value={this.state.endDate}
onChange={(e) => this.handleChange(e, 'end_date')}
KeyboardButtonProps={{
......@@ -380,9 +409,9 @@ export default class EditApprovalMatrix extends Component {
<div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
value={this.state.status}
id="status"
label="Status"
value={this.props.data.status}
disabled
inputProps={{
style: {
......@@ -426,11 +455,11 @@ export default class EditApprovalMatrix extends Component {
<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>
<Typography style={{ fontSize: 11 }}>: {this.state.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>
<Typography style={{ fontSize: 11 }}>: {this.state.updated == - null ? "" : this.state.updated}</Typography>
</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