Skip to content

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

Merge branch 'rifka' into 'master' 

update draggable dan visualisasi

See merge request !75
parents 8b60a0ae d7c4689e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 281 additions and 145 deletions
package-lock.json
View file @ a8785517
......@@ -7281,6 +7281,11 @@
"resolved": "https://registry.npmjs.org/immer/-/immer-1.10.0.tgz",
"integrity": "sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg=="
},
"immutability-helper": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-3.1.1.tgz",
"integrity": "sha512-Q0QaXjPjwIju/28TsugCHNEASwoCcJSyJV3uO1sOIQGI0jKgm9f41Lvz0DZj3n46cNCyAZTsEYoY4C2bVRUzyQ=="
},
"import-cwd": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
......@@ -11906,6 +11911,18 @@
"scheduler": "^0.19.1"
}
},
"react-draggable-list": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/react-draggable-list/-/react-draggable-list-4.0.3.tgz",
"integrity": "sha512-+6v+5ZrkaSeGlEMyFnVoWt/n3ANhQstsfV3RnFUbEI5DS2q/YwRbEbVlgq9bUQ4kn06MJ1PBCPEJpqq/VobAqA==",
"requires": {
"@babel/runtime": "^7.0.0",
"immutability-helper": "^3.0.0",
"prop-types": "^15.6.0",
"react-motion": "^0.5.2",
"react-multi-ref": "^1.0.0"
}
},
"react-dropzone": {
"version": "11.0.2",
"resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.0.2.tgz",
......@@ -11941,6 +11958,31 @@
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"react-motion": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz",
"integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==",
"requires": {
"performance-now": "^0.2.0",
"prop-types": "^15.5.8",
"raf": "^3.1.0"
},
"dependencies": {
"performance-now": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
"integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU="
}
}
},
"react-multi-ref": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/react-multi-ref/-/react-multi-ref-1.0.0.tgz",
"integrity": "sha512-LJuQXEabnv8JLcvcWeJcTogxG4eXVFiPfQ9CECuwWUbfJdrVpPf13m9RxmImyJS0J99BWokGn7dlR1dR06XPDw==",
"requires": {
"@babel/runtime": "^7.1.2"
}
},
"react-number-format": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-4.4.1.tgz",
......
package.json
View file @ a8785517
......@@ -25,6 +25,7 @@
"react-bootstrap": "^1.3.0",
"react-d3-donut": "^1.1.2",
"react-dom": "^16.13.1",
"react-draggable-list": "^4.0.3",
"react-dropzone": "^11.0.2",
"react-excel-renderer": "^1.1.0",
"react-number-format": "^4.4.1",
......
src/container/ApprovalMatrix/ApprovalMatrix.js
View file @ a8785517
......@@ -73,6 +73,7 @@ export default class ApprovalMatrix extends Component {
componentDidMount() {
this.getData()
console.log(this.props.height)
}
getData() {
......@@ -330,6 +331,12 @@ export default class ApprovalMatrix extends Component {
</div>
</div>
:
this.state.visibleVisual == true ?
<VisualisasiAM
onClickClose={() => this.setState({ visibleVisual: false, visibleAM: true })}
height= {this.props.height}
/>
:
<div style={{ height: this.props.height }}>
<div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} />
<div>
......@@ -367,6 +374,7 @@ export default class ApprovalMatrix extends Component {
</div>
</div>
}
{this.state.visibleCreate && (
<CreateApprovalMatrix
onClickClose={() => this.setState({ visibleCreate: false })}
......@@ -381,11 +389,6 @@ export default class ApprovalMatrix extends Component {
data={this.state.listData[this.state.selectIndex]}
/>
)}
{this.state.visibleVisual && (
<VisualisasiAM
onClickClose={() => this.setState({ visibleVisual: false })}
/>
)}
{this.state.visibleUpload && (
<div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
......
src/container/ApprovalMatrix/CreateApprovalMatrix.js
View file @ a8785517
......@@ -51,9 +51,11 @@ export default class CreateApprovalMatrix extends Component {
super(props)
this.state = {
userId: null,
typeId: null,
// type: '',
order: '',
approvedBy: null,
types: null,
// operator: '',
startDate: '',
endDate: '',
......@@ -65,6 +67,7 @@ export default class CreateApprovalMatrix extends Component {
componentDidMount() {
this.getUserData()
this.getTypeData()
}
getUserData() {
......@@ -88,6 +91,50 @@ export default class CreateApprovalMatrix extends Component {
}
})
}
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
}
})
// console.log(userData)
let typeProps = {
options: typeData,
getOptionLabel: (option) => option.approval_type_name,
};
this.setState({ types: typeProps, typeData: response.data.data })
} else {
alert(response.data.message)
}
})
}
getOperatorData() {
api.create().getOperatorAM().then((response) => {
if (response.data.status == 'success') {
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
}
})
// console.log(userData)
let operatorProps = {
options: operatorData,
getOptionLabel: (option) => option.approval_type_name,
};
this.setState({ types: operatorProps, operatorData: response.data.data })
} else {
alert(response.data.message)
}
})
}
handleChange(e, type) {
......@@ -157,32 +204,19 @@ export default class CreateApprovalMatrix extends Component {
variant="filled"
label="ID"
disabled
// value={this.state.periode}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px" style={{ marginTop: 8 }}>
<TextField
style={{ width: '100%' }}
id="type"
select
label="Tipe Persetujuan"
value={this.state.type}
onChange={(e) => null}
>
{type.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
<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" />}
/>
</div>
</div>
</div>
......@@ -204,7 +238,7 @@ export default class CreateApprovalMatrix extends Component {
<Autocomplete
{...this.state.approvedBy}
id="debug"
onChange={(event, newInputValue) => this.setState({userId:newInputValue.user_id}, () => console.log(this.state.userId))}
onChange={(event, newInputValue) => this.setState({userId:newInputValue.user_id})}
debug
renderInput={(params) => <TextField {...params} label="debug" margin="normal" />}
value={this.state.value}
......
src/container/ApprovalMatrix/EditApprovalMatrix.js
View file @ a8785517
......@@ -4,6 +4,8 @@ import { DateTimePicker, KeyboardDatePicker, DatePicker} from "@material-ui/pick
import MenuItem from '@material-ui/core/MenuItem';
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 = [
{
......@@ -49,20 +51,53 @@ export default class EditApprovalMatrix extends Component {
this.state = {
startDate: null,
endDate: null,
date: new Date()
date: new Date(),
approvedBy: null,
getApprovedBy: null
}
}
componentDidMount() {
if (this.props.type === 'edit') {
let data = this.props.data
// let getApprovedBy = {
// user_id: data.user_id,
// fullname: data.fullname
// }
this.setState({
id: data.business_unit_id,
name: data.business_unit_name,
startDate: data.start_date,
endDate: data.end_date
})
endDate: data.end_date,
getUserId: data.user_id,
}, () => this.getUserData())
}
console.log(this.props.data)
// this.getUserData()
}
getUserData() {
api.create().getApprovedByAM().then((response) => {
console.log(response)
if (response.data.status == 'success') {
let data = response.data.data
let userData = data.map((item) => {
return {
user_id: item.user_id,
fullname: item.fullname
}
})
let index = userData.findIndex((val) => val.user_id == this.state.getUserId)
// console.log(userData)
let defaultProps = {
options: userData,
getOptionLabel: (option) => option.fullname,
};
this.setState({ approvedBy: defaultProps, userData: response.data.data, getApprovedBy: index == -1 ? userData[0]: userData[index] })
} else {
alert(response.data.message)
}
})
}
handleChange(e, type) {
......@@ -82,6 +117,25 @@ 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.");
console.log('masuk');
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
}
// this.props.createAM(payload)
console.log(payload)
}
handleDate(item) {
let value = format(item, 'dd MMMM yyyy')
return value
......@@ -189,31 +243,15 @@ export default class EditApprovalMatrix extends Component {
</div>
<div className="column-2">
<div className="margin-top-10px" style={{ paddingTop: 4, paddingRight: 10, paddingBottom: 10, paddingLeft: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="approve-by"
select
label="Pemberi Persetujuan"
value={this.props.data.fullname}
onChange={(e) => null}
selectProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
>
{approve_by.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
<Autocomplete
{...this.state.approvedBy}
option
id="debug"
onChange={(event, newInputValue) => this.setState({getApprovedBy: newInputValue})}
debug
renderInput={(params) => <TextField {...params} label="debug" margin="normal" />}
value={this.state.getApprovedBy}
/>
</div>
</div>
</div>
......@@ -363,7 +401,7 @@ export default class EditApprovalMatrix extends Component {
</div>
</div>
<div className="column-2" style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<div onClick={() => this.validasi()} style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</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