Skip to content

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

Merge branch 'master' of http://103.44.149.204/d.arizona/tia-dev into deni-dev(pc)

parents c61dfcaf d9de9576
Hide whitespace changes
Inline Side-by-side
Showing with 794 additions and 177 deletions
package-lock.json
View file @ c8cfb27d
...@@ -7281,6 +7281,11 @@ ...@@ -7281,6 +7281,11 @@
"resolved": "https://registry.npmjs.org/immer/-/immer-1.10.0.tgz", "resolved": "https://registry.npmjs.org/immer/-/immer-1.10.0.tgz",
"integrity": "sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==" "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": { "import-cwd": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz", "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
...@@ -11906,6 +11911,18 @@ ...@@ -11906,6 +11911,18 @@
"scheduler": "^0.19.1" "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": { "react-dropzone": {
"version": "11.0.2", "version": "11.0.2",
"resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.0.2.tgz", "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.0.2.tgz",
...@@ -11941,6 +11958,31 @@ ...@@ -11941,6 +11958,31 @@
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" "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": { "react-number-format": {
"version": "4.4.1", "version": "4.4.1",
"resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-4.4.1.tgz", "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-4.4.1.tgz",
......
package.json
View file @ c8cfb27d
...@@ -26,6 +26,7 @@ ...@@ -26,6 +26,7 @@
"react-d3-donut": "^1.1.2", "react-d3-donut": "^1.1.2",
"react-d3-speedometer": "^0.12.0", "react-d3-speedometer": "^0.12.0",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-draggable-list": "^4.0.3",
"react-dropzone": "^11.0.2", "react-dropzone": "^11.0.2",
"react-excel-renderer": "^1.1.0", "react-excel-renderer": "^1.1.0",
"react-number-format": "^4.4.1", "react-number-format": "^4.4.1",
......
src/container/ApprovalMatrix/ApprovalMatrix.js
View file @ c8cfb27d
...@@ -73,6 +73,7 @@ export default class ApprovalMatrix extends Component { ...@@ -73,6 +73,7 @@ export default class ApprovalMatrix extends Component {
componentDidMount() { componentDidMount() {
this.getData() this.getData()
console.log(this.props.height)
} }
getData() { getData() {
...@@ -330,6 +331,12 @@ export default class ApprovalMatrix extends Component { ...@@ -330,6 +331,12 @@ export default class ApprovalMatrix extends Component {
</div> </div>
</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: this.props.height }}>
<div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} /> <div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} />
<div> <div>
...@@ -367,6 +374,7 @@ export default class ApprovalMatrix extends Component { ...@@ -367,6 +374,7 @@ export default class ApprovalMatrix extends Component {
</div> </div>
</div> </div>
} }
{this.state.visibleCreate && ( {this.state.visibleCreate && (
<CreateApprovalMatrix <CreateApprovalMatrix
onClickClose={() => this.setState({ visibleCreate: false })} onClickClose={() => this.setState({ visibleCreate: false })}
...@@ -381,11 +389,6 @@ export default class ApprovalMatrix extends Component { ...@@ -381,11 +389,6 @@ export default class ApprovalMatrix extends Component {
data={this.state.listData[this.state.selectIndex]} data={this.state.listData[this.state.selectIndex]}
/> />
)} )}
{this.state.visibleVisual && (
<VisualisasiAM
onClickClose={() => this.setState({ visibleVisual: false })}
/>
)}
{this.state.visibleUpload && ( {this.state.visibleUpload && (
<div className="test app-popup-show"> <div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}> <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
......
src/container/ApprovalMatrix/CreateApprovalMatrix.js
View file @ c8cfb27d
...@@ -51,9 +51,11 @@ export default class CreateApprovalMatrix extends Component { ...@@ -51,9 +51,11 @@ export default class CreateApprovalMatrix extends Component {
super(props) super(props)
this.state = { this.state = {
userId: null, userId: null,
typeId: null,
// type: '', // type: '',
order: '', order: '',
approvedBy: null, approvedBy: null,
types: null,
// operator: '', // operator: '',
startDate: '', startDate: '',
endDate: '', endDate: '',
...@@ -65,6 +67,7 @@ export default class CreateApprovalMatrix extends Component { ...@@ -65,6 +67,7 @@ export default class CreateApprovalMatrix extends Component {
componentDidMount() { componentDidMount() {
this.getUserData() this.getUserData()
this.getTypeData()
} }
getUserData() { getUserData() {
...@@ -88,6 +91,50 @@ export default class CreateApprovalMatrix extends Component { ...@@ -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) { handleChange(e, type) {
...@@ -157,32 +204,19 @@ export default class CreateApprovalMatrix extends Component { ...@@ -157,32 +204,19 @@ export default class CreateApprovalMatrix extends Component {
variant="filled" variant="filled"
label="ID" label="ID"
disabled disabled
// value={this.state.periode}
> >
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</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-bottom-20px" style={{ marginTop: 8 }}>
<TextField <Autocomplete
style={{ width: '100%' }} {...this.state.types}
id="type" id="tipe"
select onChange={(event, newInputValue) => this.setState({typeId:newInputValue.approval_type_id})}
label="Tipe Persetujuan" debug
value={this.state.type} renderInput={(params) => <TextField {...params} label="Tipe" margin="normal" />}
onChange={(e) => null} />
>
{type.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</div> </div>
</div> </div>
</div> </div>
...@@ -204,7 +238,7 @@ export default class CreateApprovalMatrix extends Component { ...@@ -204,7 +238,7 @@ export default class CreateApprovalMatrix extends Component {
<Autocomplete <Autocomplete
{...this.state.approvedBy} {...this.state.approvedBy}
id="debug" 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 debug
renderInput={(params) => <TextField {...params} label="debug" margin="normal" />} renderInput={(params) => <TextField {...params} label="debug" margin="normal" />}
value={this.state.value} value={this.state.value}
......
src/container/ApprovalMatrix/EditApprovalMatrix.js
View file @ c8cfb27d
...@@ -4,6 +4,8 @@ import { DateTimePicker, KeyboardDatePicker, DatePicker} from "@material-ui/pick ...@@ -4,6 +4,8 @@ import { DateTimePicker, KeyboardDatePicker, DatePicker} from "@material-ui/pick
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@material-ui/core/MenuItem';
import format from "date-fns/format"; import format from "date-fns/format";
import localeID from "date-fns/locale/id" import localeID from "date-fns/locale/id"
import api from "../../api";
import Autocomplete from '@material-ui/lab/Autocomplete';
const type = [ const type = [
{ {
...@@ -49,20 +51,53 @@ export default class EditApprovalMatrix extends Component { ...@@ -49,20 +51,53 @@ export default class EditApprovalMatrix extends Component {
this.state = { this.state = {
startDate: null, startDate: null,
endDate: null, endDate: null,
date: new Date() date: new Date(),
approvedBy: null,
getApprovedBy: null
} }
} }
componentDidMount() { componentDidMount() {
if (this.props.type === 'edit') { if (this.props.type === 'edit') {
let data = this.props.data let data = this.props.data
// let getApprovedBy = {
// user_id: data.user_id,
// fullname: data.fullname
// }
this.setState({ this.setState({
id: data.business_unit_id, id: data.business_unit_id,
name: data.business_unit_name,
startDate: data.start_date, 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) { handleChange(e, type) {
...@@ -82,6 +117,25 @@ export default class EditApprovalMatrix extends Component { ...@@ -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) { handleDate(item) {
let value = format(item, 'dd MMMM yyyy') let value = format(item, 'dd MMMM yyyy')
return value return value
...@@ -189,31 +243,15 @@ export default class EditApprovalMatrix extends Component { ...@@ -189,31 +243,15 @@ export default class EditApprovalMatrix extends Component {
</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={{ paddingTop: 4, paddingRight: 10, paddingBottom: 10, paddingLeft: 10, borderRadius: 5 }}>
<TextField <Autocomplete
style={{ width: '100%' }} {...this.state.approvedBy}
id="approve-by" option
select id="debug"
label="Pemberi Persetujuan" onChange={(event, newInputValue) => this.setState({getApprovedBy: newInputValue})}
value={this.props.data.fullname} debug
onChange={(e) => null} renderInput={(params) => <TextField {...params} label="debug" margin="normal" />}
selectProps={{ value={this.state.getApprovedBy}
style: { />
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
>
{approve_by.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</div> </div>
</div> </div>
</div> </div>
...@@ -363,7 +401,7 @@ export default class EditApprovalMatrix extends Component { ...@@ -363,7 +401,7 @@ export default class EditApprovalMatrix extends Component {
</div> </div>
</div> </div>
<div className="column-2" style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}> <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> <span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div> </div>
</div> </div>
......
src/container/ApprovalMatrix/VisualisasiAM.js
View file @ c8cfb27d
...@@ -26,120 +26,138 @@ export default class PreviewAM extends Component { ...@@ -26,120 +26,138 @@ export default class PreviewAM extends Component {
} }
} }
state = {
tasks: [
{name:"Angular",type:"lvl1"},
{name:"Typescript",type:"lvl1"},
{name:"React", type:"lvl2"},
{name:"Vue", type:"lvl3"}
]
}
componentDidMount() { componentDidMount() {
console.log(this.props.height)
} }
render() { render() {
// var tasks = {
// lvl1: [],
// lvl2: [],
// lvl3: []
// }
// this.state.tasks.forEach ((task) => {
// tasks[task.type].push(
// <div key={task.taskName}
// className="draggable"
// style = {{backgroundColor: task.bgcolor}}>
// {task.taskName}
// </div>
// );
// });
return ( return (
<div> <div>
{this.state.visibleVisual === true ? <div style={{ height: this.props.height }}>
<div style={{ height: this.props.height }}> <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', width: '20%', fontSize: 16, paddingTop: 8 }}>Visualisasi Data</label>
<label style={{ color: 'white', width: '20%', fontSize: 16, paddingTop: 8 }}>Visualisasi Data</label> </div>
</div> <div style={{ padding: 25, width: '100%' }}>
<div style={{ padding: 25, width: '100%' }}> <div style={{ width: '100%', padding: 25, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4'}}>
<div style={{ width: '100%', padding: 25, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4'}}> <label style={{ color: '#4b4b4b', fontSize: '16px', fontWeight: 'bold' }}>Hirarki Persetujuan</label>
<label style={{ color: '#4b4b4b', fontSize: '16px', fontWeight: 'bold' }}>Hirarki Persetujuan</label> <div className="" style={{ width: 250, marginTop: 8, marginBottom: 28 }}>
<div className="" style={{ width: 250, marginTop: 8, marginBottom: 28 }}> <TextField
<TextField style={{ width: '100%' }}
style={{ width: '100%' }} id="type"
id="type" select
select label="Tipe Persetujuan"
label="Tipe Persetujuan" // value={this.state.periode}
// value={this.state.periode} onChange={(e) => null}
onChange={(e) => null} >
> {type.map((option) => (
{type.map((option) => ( <MenuItem key={option.value} value={option.value}>
<MenuItem key={option.value} value={option.value}> {option.label}
{option.label} </MenuItem>
</MenuItem> ))}
))} </TextField>
</TextField>
</div>
<div className="grid grid-4x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>1. John Doe</label>
</div>
</div>
<div className="column-2">
</div>
<div className="column-3">
</div>
<div className="column-4">
</div> </div>
</div> <div className="grid grid-4x grid-mobile-none gap-15px">
<div className="grid grid-4x grid-mobile-none gap-15px"> <div className="column-1">
<div className="column-1"> <div className="margin-bottom-20px">
<div className="margin-bottom-20px"> <label style={{ color: '#4b4b4b', fontSize: '14px' }}>1. John Doe</label>
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>2. Barbara Rosa</label> </div>
</div> </div>
</div> <div className="column-2">
<div className="column-2">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>Aneesa Hassan</label>
</div> </div>
</div> <div className="column-3">
<div className="column-3">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>AND</label>
</div> </div>
</div> <div className="column-4">
</div>
<div className="grid grid-4x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>3. Cole Park</label>
</div> </div>
</div> </div>
<div className="column-2"> <div className="grid grid-4x grid-mobile-none gap-15px">
<div className="margin-bottom-20px"> <div className="column-1">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>Levison Robin</label> <div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>2. Barbara Rosa</label>
</div>
</div> </div>
</div> <div className="column-2">
<div className="column-3"> <div className="margin-bottom-20px">
<div className="margin-bottom-20px"> <label style={{ color: '#4b4b4b', fontSize: '14px' }}>Aneesa Hassan</label>
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>OR</label> </div>
</div> </div>
</div> <div className="column-3">
</div> <div className="margin-bottom-20px">
<div className="grid grid-4x grid-mobile-none gap-15px"> <label style={{ color: '#4b4b4b', fontSize: '14px' }}>AND</label>
<div className="column-1"> </div>
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>4. Madison Price</label>
</div> </div>
</div> </div>
<div className="column-2"> <div className="grid grid-4x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>3. Cole Park</label>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>Levison Robin</label>
</div>
</div>
<div className="column-3">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>OR</label>
</div>
</div>
</div> </div>
<div className="column-3"> <div className="grid grid-4x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>4. Madison Price</label>
</div>
</div>
<div className="column-2">
</div>
<div className="column-3">
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}>
<div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}> <div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: 'dodgerblue', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<div onClick={() => this.setState({ visibleVisual: false, visibleAM: true })} style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: 'dodgerblue', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}> <span style={{ color: '#fff', fontSize: 11 }}>Kembali</span>
<span style={{ color: '#fff', fontSize: 11 }}>Kembali</span>
</div>
<div className="row" style={{ float: 'right', marginRight: 25 }}>
<div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<span style={{ color: '#354960', fontSize: 11 }} >Batal</span>
</div> </div>
<div style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}> <div className="row" style={{ float: 'right', marginRight: 25 }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span> <div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<span style={{ color: '#354960', fontSize: 11 }} >Batal</span>
</div>
<div style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
: false
}
{this.state.visibleAM && (
<ApprovalMatrix
onClickClose={() => this.setState({ visibleAM: false })}
/>
)}
</div> </div>
); );
......
src/container/MasterData/Perusahaan/CreatePerusahaan.js
View file @ c8cfb27d
...@@ -29,8 +29,8 @@ export default class CreatePerusahaan extends Component { ...@@ -29,8 +29,8 @@ export default class CreatePerusahaan extends Component {
this.setState({ this.setState({
id: data.company_id, id: data.company_id,
company: data.company_name, company: data.company_name,
parentCompany: data.parent, parentCompany: data.parentName,
unitBisnis: data.businessUnitId, unitBisnis: data.businessUnitName,
totalReport: data.total_report, totalReport: data.total_report,
startDate: data.start_date, startDate: data.start_date,
endDate: data.end_date endDate: data.end_date
...@@ -56,9 +56,9 @@ export default class CreatePerusahaan extends Component { ...@@ -56,9 +56,9 @@ export default class CreatePerusahaan extends Component {
} }
validasi() { validasi() {
if (R.isEmpty(this.state.company)) return alert("Nama Perusahaan is Required."); if (R.isEmpty(this.state.company)) return alert("Nama perusahaan harus diisi.");
if (R.isEmpty(this.state.parentCompany)) return alert("Nama Perusahaan is Required.");
if (R.isEmpty(this.state.unitBisnis)) return alert("Unit Bisnis is Required."); if (R.isEmpty(this.state.unitBisnis)) return alert("Unit Bisnis is Required.");
if (R.isEmpty(this.state.parentCompany)) return alert("Parent Company is Required.");
if (R.isEmpty(this.state.totalReport)) return alert("Total Report is Required."); if (R.isEmpty(this.state.totalReport)) return alert("Total Report 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.");
...@@ -355,6 +355,25 @@ export default class CreatePerusahaan extends Component { ...@@ -355,6 +355,25 @@ export default class CreatePerusahaan extends Component {
<div className="border-bottom grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}> <div className="border-bottom grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
<div className="column-1"> <div className="column-1">
<div style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="id"
label="ID"
disabled
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
/>
</div>
<div style={{ padding: 10, borderRadius: 5 }}> <div style={{ padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
......
src/container/MasterData/Perusahaan/Perusahaan.js
View file @ c8cfb27d
...@@ -68,7 +68,7 @@ export default class Perusahaan extends Component { ...@@ -68,7 +68,7 @@ export default class Perusahaan extends Component {
if (response.data.status == 'success') { if (response.data.status == 'success') {
let data = response.data.data let data = response.data.data
let listData = data.map((item, index) => { let listData = data.map((item, index) => {
return [index, item.company_id, item.company_name, item.parent, item.businessUnitId, item.total_report, item.status] return [index, item.company_id, item.company_name, item.parentName, item.businessUnitName, item.total_report, item.status]
}) })
this.setState({ dataTable: listData, listData: response.data.data }) this.setState({ dataTable: listData, listData: response.data.data })
} else { } else {
...@@ -132,6 +132,36 @@ export default class Perusahaan extends Component { ...@@ -132,6 +132,36 @@ export default class Perusahaan extends Component {
}) })
} }
downloadFile = async () => {
let res = await fetch(
"https://tia.eksad.com/tia-reporting-dev/public/attachment/download_file?fileName=CompanyTemplate&&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 Perusahaan.xlsx';
a.click();
}
}
downloadDataTable = async () => {
let res = await fetch(
"https://tia.eksad.com/tia-reporting-dev/public/company/export_company"
)
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 = 'Perusahaan.xlsx';
a.click();
}
}
render() { render() {
const columns = [{ const columns = [{
name: "Action", name: "Action",
...@@ -247,23 +277,45 @@ export default class Perusahaan extends Component { ...@@ -247,23 +277,45 @@ export default class Perusahaan extends Component {
/> />
</div> </div>
<div style={{ width: '20%', justifyContent: 'space-around', display: 'flex', flexFlow: 'wrap' }}> <div style={{ width: '20%', justifyContent: 'space-around', display: 'flex', flexFlow: 'wrap' }}>
<img src={Images.template} />
<button <button
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
cursor: 'pointer', cursor: 'pointer',
borderColor: 'transparent' borderColor: 'transparent',
margin: 5
}}
onClick={() => this.downloadFile()}
>
<img src={Images.template} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}} }}
onClick={() => this.setState({ visibleUpload: true })} onClick={() => this.setState({ visibleUpload: true })}
> >
<img src={Images.upload} /> <img src={Images.upload} />
</button> </button>
<img src={Images.download} />
<button <button
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
cursor: 'pointer', cursor: 'pointer',
borderColor: 'transparent' borderColor: 'transparent',
margin: 5
}}
onClick={() => this.downloadDataTable()}
>
<img src={Images.download} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}} }}
onClick={() => null} onClick={() => null}
> >
...@@ -273,7 +325,8 @@ export default class Perusahaan extends Component { ...@@ -273,7 +325,8 @@ export default class Perusahaan extends Component {
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
cursor: 'pointer', cursor: 'pointer',
borderColor: 'transparent' borderColor: 'transparent',
margin: 5
}} }}
onClick={() => this.setState({ visibleCreate: true })} onClick={() => this.setState({ visibleCreate: true })}
> >
......
src/container/MasterData/formItemLaporan/CreateItemLaporan.js
View file @ c8cfb27d
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 { DatePicker } from '@material-ui/pickers';
const companies = [ const companies = [
{ {
...@@ -7,26 +8,89 @@ const companies = [ ...@@ -7,26 +8,89 @@ const companies = [
label: '', label: '',
}, },
{ {
value: 'TIA1', value: '1',
label: 'TIA', label: 'TIA',
}, },
{ {
value: 'TIA2', value: '2',
label: 'TIA', label: 'TIA',
}, },
];
const dataTypes = [
{ {
value: 'TIA3', value: '',
label: 'TIA', label: '',
},
{
value: '1',
label: 'Formula',
},
{
value: '2',
label: 'Formula',
},
];
const reportTypes = [
{
value: '',
label: '',
},
{
value: '1',
label: 'KPI',
},
{
value: '2',
label: 'KPI',
},
];
const parents = [
{
value: '-',
label: '-',
},
{
value: '1',
label: '1',
},
{
value: '2',
label: '2',
}, },
]; ];
export default class CreateItemLaporan extends Component { export default class CreateItemLaporan extends Component {
constructor(props) {
super(props)
this.state = {
startDate: new Date(),
endDate: new Date(),
}
}
handleStartDate = (date) => {
this.setState({
startDate: date
});
};
handleEndDate = (date) => {
this.setState({
endDate: date
});
};
componentDidMount() { componentDidMount() {
console.log(this.props.data); console.log(this.props.data);
} }
render() { render() {
const { startDate, endDate } = this.state;
return ( return (
<div className="test app-popup-show"> <div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}> <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
...@@ -54,32 +118,56 @@ export default class CreateItemLaporan extends Component { ...@@ -54,32 +118,56 @@ export default class CreateItemLaporan extends Component {
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
value={1} value={1}
id="status" id="ID"
label="ID" label="ID"
disabled disabled
inputProps={{ inputProps={{
style: { style: {
fontSize: 11 fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
} }
}} }}
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
color: '#7e8085' fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
paddingLeft: 10
} }
}} }}
/> />
</div> </div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <TextField
id="standard-select-currency-native" id="company"
style={{ width: '100%' }}
select select
label="Native select" label="Perusahaan"
// onChange={handleChange} // onChange={handleChange}
helperText=""
SelectProps={{ SelectProps={{
native: true, native: true,
}} }}
helperText="Please select your currency" InputLabelProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
paddingLeft: 10
}
}}
inputProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}}
> >
{companies.map((option) => ( {companies.map((option) => (
<option key={option.value} value={option.value}> <option key={option.value} value={option.value}>
...@@ -88,23 +176,176 @@ export default class CreateItemLaporan extends Component { ...@@ -88,23 +176,176 @@ export default class CreateItemLaporan extends Component {
))} ))}
</TextField> </TextField>
</div> </div>
<div style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="description"
label="Deskripsi"
// value={this.props.data.business_unit_name}
inputProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}}
InputLabelProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
paddingLeft: 10
}
}}
>
</TextField>
</div>
<div style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="uom"
label="UOM"
// value={this.props.data.business_unit_name}
inputProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}}
InputLabelProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
paddingLeft: 10
}
}}
>
</TextField>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
id="dataType"
style={{ width: '100%' }}
select
label="Tipe Data"
// onChange={handleChange}
helperText=""
SelectProps={{
native: true,
}}
InputLabelProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
paddingLeft: 10
}
}}
inputProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}}
>
{dataTypes.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</TextField>
</div>
<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.props.data.status} // value={this.props.data.status}
id="realValue"
label="Nilai Seharusnya"
value="-"
disabled
inputProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}}
InputLabelProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
paddingLeft: 10
}
}}
/>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<DatePicker
margin="normal"
id="startDate"
value={startDate}
onChange={this.handleStartDate}
label="Berlaku Mulai"
format="dd MMMM yyyy"
KeyboardButtonProps={{
'aria-label': 'change date',
}}
inputProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085',
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}}
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
<div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
value="Aktif"
id="status" id="status"
label="Status" label="Status"
disabled disabled
inputProps={{ inputProps={{
style: { style: {
fontSize: 11 fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
} }
}} }}
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
color: '#7e8085' fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
paddingLeft: 10
} }
}} }}
/> />
...@@ -124,20 +365,124 @@ export default class CreateItemLaporan extends Component { ...@@ -124,20 +365,124 @@ export default class CreateItemLaporan extends Component {
<div className="column-2"> <div className="column-2">
<div style={{ padding: 10, borderRadius: 5 }}> <div style={{ padding: 10, borderRadius: 5 }}>
<TextField
id="reportType"
style={{ width: '100%' }}
select
label="Jenis Laporan"
// onChange={handleChange}
helperText=""
SelectProps={{
native: true,
}}
InputLabelProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
paddingLeft: 10
}
}}
inputProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}}
>
{reportTypes.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</TextField>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="unit" id="order"
label="Unit Bisnis" label="Order"
// value={this.props.data.business_unit_name} value="1"
inputProps={{ inputProps={{
style: { style: {
fontSize: 11 fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
} }
}} }}
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
color: '#7e8085' fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
paddingLeft: 10
}
}}
>
</TextField>
</div>
<div style={{ padding: 10, borderRadius: 5 }}>
<TextField
id="parent"
style={{ width: '100%' }}
select
label="Parent"
// onChange={handleChange}
helperText=""
SelectProps={{
native: true,
}}
InputLabelProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
paddingLeft: 10
}
}}
inputProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}}
>
{parents.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</TextField>
</div>
<div style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="weight"
label="Weight"
value="1"
inputProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}}
InputLabelProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
paddingLeft: 10
} }
}} }}
> >
...@@ -146,23 +491,87 @@ export default class CreateItemLaporan extends Component { ...@@ -146,23 +491,87 @@ export default class CreateItemLaporan extends Component {
<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="unit" id="formula"
label="Berlaku Hingga" label="Formula"
defaultValue={"31 Desember 2100"} value="1"
inputProps={{ inputProps={{
style: { style: {
fontSize: 11 fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
} }
}} }}
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
color: '#7e8085' fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
paddingLeft: 10
} }
}} }}
> >
</TextField> </TextField>
</div> </div>
<div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
value="-"
id="isWrongCondition"
label="Kondisi Jika Salah"
disabled
inputProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}}
InputLabelProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
paddingLeft: 10
}
}}
/>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<DatePicker
margin="normal"
id="endDate"
value={endDate}
onChange={this.handleEndDate}
label="Berlaku Hingga"
format="dd MMMM yyyy"
KeyboardButtonProps={{
'aria-label': 'change date',
}}
inputProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085',
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}}
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</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