Skip to content

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

Merge branch 'rifka' into 'master' 

update layout dan validasi apprv matrix

See merge request !128
parents f45b37e1 3afa1d57
Hide whitespace changes
Inline Side-by-side
Showing with 168 additions and 109 deletions
src/api/index.js
View file @ ab6b1382
......@@ -109,6 +109,7 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
const getApprovedByAM = () => api.get('approval_matrix/get_all_approver')
const getTypeAM = () => api.get('approval_type/get_all_approval_type')
const getOperatorAM = () => api.get('operator_type/get_all_operator_type')
const getDetailAM = (id) => api.get(`approval_matrix/get_approval_matrix_by_id/${id}`)
const searchAM = (body) => api.post('/approval_matrix/search_approval_matrix', body)
const createAM = (body) => api.post('/approval_matrix/create_approval_matrix', body)
const updateAM = (body) => api.post('/approval_matrix/update_approval_matrix', body)
......@@ -195,6 +196,7 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
getApprovedByAM,
getTypeAM,
getOperatorAM,
getDetailAM,
searchAM,
createAM,
updateAM,
......
src/container/ApprovalMatrix/ApprovalMatrix.js
View file @ ab6b1382
......@@ -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} />
......@@ -518,7 +519,7 @@ export default class ApprovalMatrix extends Component {
}}
onClick={() => this.downloadFile()}
>
<img src={Images.template} />
<img src={Images.template} title="Download Template"/>
</button>
<button
style={{
......@@ -531,7 +532,7 @@ export default class ApprovalMatrix extends Component {
}}
onClick={() => this.setState({ visibleUpload: true })}
>
<img src={Images.upload} />
<img src={Images.upload} title="Upload File"/>
</button>
<button
style={{
......@@ -544,7 +545,7 @@ export default class ApprovalMatrix extends Component {
}}
onClick={() => this.downloadDataTable()}
>
<img src={Images.download} />
<img src={Images.download} title="Download File"/>
</button>
<button
style={{
......@@ -557,7 +558,7 @@ export default class ApprovalMatrix extends Component {
}}
onClick={() => this.setState({ visibleVisual: true, visibleAM: false })}
>
<img src={Images.visualisasi} />
<img src={Images.visualisasi} title="Visualisasi"/>
</button>
<button
style={{
......@@ -570,7 +571,7 @@ export default class ApprovalMatrix extends Component {
}}
onClick={() => this.setState({ visibleCreate: true })}
>
<img src={Images.add} />
<img src={Images.add} title="Tambah Approval Matrix"/>
</button>
</div >
</div>
......@@ -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 @ ab6b1382
......@@ -19,13 +19,19 @@ export default class CreateApprovalMatrix extends Component {
approvedBy: null,
types: null,
operators: null,
startDate: '',
endDate: '',
startDate: null,
endDate: null,
userData: [],
value: null,
date: new Date(),
errorOrder: false,
msgErrOrder: '',
errorType: false,
msgErrType: '',
errorStartDate: false,
errorEndDate: false,
msgErrorStartDate: "",
msgErrorEndDate: ""
}
}
......@@ -33,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() {
......@@ -102,64 +114,72 @@ export default class CreateApprovalMatrix extends Component {
}
})
}
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'),
errorOrder: false,
msgErrOrder: '',
// }, () => {
// console.log(this.state.startDate)
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'),
errorOrder: false,
msgErrOrder: '',
// }, () => {
// console.log(this.state.endDate)
this.setState({ endDate: format(e, 'yyyy-MM-dd')}, () => {
this.clearError()
console.log(this.state.endDate)
})
} else {
// this.setState({...data, tempData: {...this.state.tempData, [e.target.name] : e.target.value}})
this.setState({
errorOrder: false,
msgErrOrder: '',
})
}
}
clearError() {
this.setState({
errorOrder: false,
msgErrOrder: "",
errorType: false,
msgErrType: '',
errorStartDate: false,
errorEndDate: false,
msgErrorStartDate: "",
msgErrorEndDate: ""
})
}
validasi() {
if (R.isNil(this.state.typeId)) return alert("Tipe Persetujuan is Required.");
if (R.isEmpty(this.state.order)) {
this.setState({ errorOrder: true, msgErrOrder: 'Order is Required.'})
if (R.isNil(this.state.typeId)) {
return alert("Tipe Persetujuan tidak boleh kosong");
}
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": this.state.typeId.approval_type_id,
"orders": this.state.order,
"user_id": this.state.userId.user_id,
"operator_type_id": this.state.operatorId.operator_type_id,
"start_date": this.state.startDate,
"end_date": this.state.endDate
else if (R.isEmpty(this.state.order)) {
this.setState({ errorOrder: true, msgErrOrder: 'Order 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.startDate)) {
this.setState({ errorStartDate: true, msgErrorStartDate: 'Tanggal Mulai tidak boleh kosong' })
} else if (R.isNil(this.state.endDate)) {
this.setState({ errorEndDate: true, msgErrorEndDate: 'Tanggal Berakhir tidak boleh kosong' })
} else {
console.log('masuk');
let payload = {
"approval_type_id": this.state.typeId.approval_type_id,
"orders": this.state.order,
"user_id": this.state.userId.user_id,
"operator_type_id": this.state.operatorId.operator_type_id,
"start_date": this.state.startDate,
"end_date": this.state.endDate
}
this.props.createAM(payload)
// console.log(payload)
}
this.props.createAM(payload)
// console.log(payload)
}
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' }}>Tambah Data</span>
......@@ -206,7 +226,6 @@ export default class CreateApprovalMatrix extends Component {
{...this.state.types}
id="tipe"
onChange={(event, newInputValue) => this.setState({typeId:newInputValue})}
// disableClearable
debug
renderInput={(params) =>
<TextField
......@@ -222,6 +241,8 @@ export default class CreateApprovalMatrix extends Component {
/>
}
value={this.state.typeId}
error={this.state.errorType}
helperText={this.state.msgErrType}
// inputProps={{
// style: {
// fontSize: 11
......@@ -238,10 +259,11 @@ 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}
onChange={(e) => this.setState({ order: e.target.value })}
onChange={(e) => this.setState({ order: e.target.value }, () => this.clearError())}
inputProps={{
style: {
fontSize: 11
......@@ -345,6 +367,8 @@ export default class CreateApprovalMatrix extends Component {
color: '#7e8085'
}
}}
error={this.state.errorStartDate}
helperText={this.state.msgErrorStartDate}
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
......@@ -357,7 +381,10 @@ export default class CreateApprovalMatrix extends Component {
label="Berlaku Hingga"
format="dd MMMM yyyy"
value={this.state.endDate == "" ? null : this.state.endDate}
error={this.state.errorEndDate}
helperText={this.state.msgErrorEndDate}
onChange={(e) => this.handleChange(e, 'end_date')}
minDate={this.state.startDate}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
......
src/container/ApprovalMatrix/EditApprovalMatrix.js
View file @ ab6b1382
......@@ -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,29 +21,48 @@ 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
// }
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() {
......@@ -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,41 +151,54 @@ 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.");
console.log('masuk');
if (this.props.type == 'edit') {
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
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 = {
"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() {
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