Skip to content

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

checkbox

parent cafd8bd4
Hide whitespace changes
Inline Side-by-side
Showing with 239 additions and 154 deletions
src/container/Otorisasi/User/AddUser.js
View file @ 92e9e0de
......@@ -13,16 +13,26 @@ import Images from '../../../assets/Images';
const CustomCheckbox = withStyles({
root: {
color: '#51c6ea',
'&$checked': {
color: '#51c6ea',
},
'&$checked': {
color: '#51c6ea',
},
},
checked: {},
})((props) => <Checkbox color="default" {...props} />);
})((props) => <Checkbox color="default" {...props} />);
const CustomCheckboxDisabled = withStyles({
root: {
color: '#d5d5d5',
'&$checked': {
color: '#d5d5d5',
},
},
checked: {},
})((props) => <Checkbox color="default" {...props} />);
export default class AddUser extends Component {
constructor(props) {
super(props)
this.state = {
......@@ -54,9 +64,9 @@ export default class AddUser extends Component {
}
handleChecked() {
this.setState({checked: !this.state.checked})
this.setState({ checked: !this.state.checked })
}
componentDidMount() {
this.getRole()
this.getPerusahaan()
......@@ -66,7 +76,8 @@ export default class AddUser extends Component {
let data = this.state
let isDate = type !== '' ? true : false
if (isDate && type === 'start_date') {
this.setState({ ...data, startDate: format(e, 'yyyy-MM-dd'), endDate: null,
this.setState({
...data, startDate: format(e, 'yyyy-MM-dd'), endDate: null,
errorRoleName: false,
errorStartDate: false,
errorEndDate: false,
......@@ -75,7 +86,8 @@ export default class AddUser extends Component {
msgErrorED: '',
})
} else if (isDate && type === 'end_date') {
this.setState({ ...data, endDate: format(e, 'yyyy-MM-dd') ,
this.setState({
...data, endDate: format(e, 'yyyy-MM-dd'),
errorRoleName: false,
errorStartDate: false,
errorEndDate: false,
......@@ -84,13 +96,14 @@ export default class AddUser extends Component {
msgErrorED: '',
})
} else {
this.setState({ ...data, [e.target.name]: e.target.value,
this.setState({
...data, [e.target.name]: e.target.value,
errorRoleName: false,
errorStartDate: false,
errorEndDate: false,
msgErrorRN: '',
msgErrorSD: '',
msgErrorED: '',
msgErrorED: '',
})
}
}
......@@ -112,10 +125,10 @@ export default class AddUser extends Component {
api.create().createUser(payload).then((response) => {
// console.log(response)
// if (String(response.data.status).toLocaleUpperCase === 'Success' || String(response.data.status).toLocaleUpperCase === 'success') {
this.props.onClickClose()
this.props.refresh()
this.props.onClickClose()
this.props.refresh()
// } else {
// alert(response.data.message)
// alert(response.data.message)
// this.props.onClickClose()
// this.props.refresh()
// }
......@@ -124,7 +137,7 @@ export default class AddUser extends Component {
getRole() {
api.create().getRoleActive().then((response) => {
if(response.data.status === 'success') {
if (response.data.status === 'success') {
let data = response.data.data
let roleData = data.map((item) => {
return {
......@@ -135,8 +148,8 @@ export default class AddUser extends Component {
let defaultProps = {
options: roleData,
getOptionLabel: (option) => titleCase(option.role_name),
};
this.setState({listRole: defaultProps})
};
this.setState({ listRole: defaultProps })
} else {
alert(response.data.message)
}
......@@ -145,8 +158,8 @@ export default class AddUser extends Component {
getPerusahaan() {
api.create().getPerusahaanHierarki().then((response) => {
if(response.data.status === 'success') {
this.setState({listCompany: response.data.data})
if (response.data.status === 'success') {
this.setState({ listCompany: response.data.data })
console.log(response.data.data)
}
})
......@@ -180,28 +193,39 @@ export default class AddUser extends Component {
{item.children.map((data, index) => {
return (
// <li>
<Collapse key={index} timeout="auto" unmountOnExit in={item.collapse}>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: R.isNil(data.children) ? (padding + 20) : padding }}>
{R.isNil(data.children)?
null
:
data.children.length < 1?
<Collapse key={index} timeout="auto" unmountOnExit in={item.collapse}>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: R.isNil(data.children) ? (padding + 20) : padding }}>
{R.isNil(data.children) ?
null
:
data.children.length < 1 ?
null
:
<span onClick={() => this.handleCollapse(data)} style={{ marginLeft: 7, marginRight: 2 }}>
{data.collapse? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>
}
<span>
{data.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>
}
<span>
{this.state.role ? this.state.role.role_id === 1 ?
<CustomCheckboxDisabled
disabled={true}
checked={true}
// onChange={() => this.handleItemClick(item)}
/> :
<CustomCheckbox
checked={this.handleItemChecked(data)}
onChange={() => this.handleItemClick(data)}
/> :
<CustomCheckbox
checked={this.handleItemChecked(data)}
onChange={() => this.handleItemClick(data)}
/>
</span>
<Typography style={{ fontSize: 12 }}>{titleCase(data.company_name)}</Typography>
</div>
{!R.isNil(data.children) && this.renderChildren(data, padding + 20)}
</Collapse>
}
</span>
<Typography style={{ fontSize: 12 }}>{titleCase(data.company_name)}</Typography>
</div>
{!R.isNil(data.children) && this.renderChildren(data, padding + 20)}
</Collapse>
// </li>
)
})}
......@@ -210,51 +234,51 @@ export default class AddUser extends Component {
}
handleCollapse(item) {
let path = this.searchIt({children: this.state.listCompany}, item.id)
let path = this.searchIt({ children: this.state.listCompany }, item.id)
let listCompany = this.state.listCompany
let arrayPath = []
if (path.length > 1) {
arrayPath = path.split('-');
arrayPath = arrayPath.map((item) => {return item})
arrayPath = arrayPath.map((item) => { return item })
} else {
arrayPath.push(path)
}
let pathSelect = null
if (arrayPath.length == 1) {
pathSelect= listCompany[arrayPath[0]]
pathSelect = listCompany[arrayPath[0]]
} else if (arrayPath.length == 2) {
pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]]
pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]]
} else if (arrayPath.length == 3) {
pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]]
pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]]
} else if (arrayPath.length == 4) {
pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]]
pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]]
} else if (arrayPath.length == 5) {
pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]]
pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]]
} else if (arrayPath.length == 6) {
pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]].children[arrayPath[5]]
pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]].children[arrayPath[5]]
} else if (arrayPath.length == 7) {
pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]].children[arrayPath[5]].children[arrayPath[6]]
pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]].children[arrayPath[5]].children[arrayPath[6]]
}
pathSelect.collapse = !pathSelect.collapse
// console.log(pathSelect.collapse)
this.setState({listCompany}, () => console.log(pathSelect))
this.setState({ listCompany }, () => console.log(pathSelect))
}
searchIt = (node, search, path = '', position = 0) => {
if (node.id && node.id === search) {return path !== '' ? `${path}-${position}` : position;}
if (!node.children) {return false}
if (node.id && node.id === search) { return path !== '' ? `${path}-${position}` : position; }
if (!node.children) { return false }
const index = node.children.findIndex((x) => x.id && x.id === search);
if (index >= 0) {
return path !== '' ? `${path}-${index}` : index;
return path !== '' ? `${path}-${index}` : index;
}
for (let i = 0; i < node.children.length; i++) {
const result = this.searchIt(node.children[i], search, path !== '' ? `${path}-${i}` : i , i);
if (result){
return result;
}
const result = this.searchIt(node.children[i], search, path !== '' ? `${path}-${i}` : i, i);
if (result) {
return result;
}
}
return false;
};
......@@ -275,7 +299,7 @@ export default class AddUser extends Component {
className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()}
>
<img src={Images.close}/>
<img src={Images.close} />
</button>
</div>
</div>
......@@ -305,12 +329,12 @@ export default class AddUser extends Component {
<div className="column-2">
<div className="">
<TextField
style={{ width: '100%' , marginTop: 7}}
id="fullname"
name="fullname"
label="Nama Lengkap"
value={this.state.fullname}
onChange={(e) => this.handleChange(e, '')}
style={{ width: '100%', marginTop: 7 }}
id="fullname"
name="fullname"
label="Nama Lengkap"
value={this.state.fullname}
onChange={(e) => this.handleChange(e, '')}
// defaultValue="Default Value"
// helperText="Some important text"
/>
......@@ -322,12 +346,12 @@ export default class AddUser extends Component {
<div className="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' , marginTop: 7}}
id="email"
name="email"
label="Email"
value={this.state.email}
onChange={(e) => this.handleChange(e, '')}
style={{ width: '100%', marginTop: 7 }}
id="email"
name="email"
label="Email"
value={this.state.email}
onChange={(e) => this.handleChange(e, '')}
// defaultValue="Default Value"
// helperText="Some important text"
/>
......@@ -339,9 +363,9 @@ export default class AddUser extends Component {
<Autocomplete
{...this.state.listRole}
id="role"
onChange={(event, newInputValue) => this.setState({role: newInputValue})}
onChange={(event, newInputValue) => this.setState({ role: newInputValue })}
debug
renderInput={(params) => <TextField {...params} label="Role" margin="normal" style={{marginTop: 7}}/>}
renderInput={(params) => <TextField {...params} label="Role" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.role}
/>
</div>
......@@ -349,7 +373,7 @@ export default class AddUser extends Component {
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="column-1">
<div className="margin-bottom-20px">
<DatePicker
margin="normal"
......@@ -433,33 +457,44 @@ export default class AddUser extends Component {
</div>
</div>
</div>
<div style={{flexDirection:'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}>
<Typography style={{fontSize: 12}}>{`Dibuat : ${format(this.state.date, 'dd MMMM yyyy', {locale: localeID})}`}</Typography>
<div style={{ flexDirection: 'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}>
<Typography style={{ fontSize: 12 }}>{`Dibuat : ${format(this.state.date, 'dd MMMM yyyy', { locale: localeID })}`}</Typography>
{/* <Typography style={{fontSize: 12}}>{`Diubah: ${this.state.tempData === null? '' : this.state.tempData.updated}`}</Typography> */}
</div>
<Divider style={{margin: 20}}/>
<div style={{paddingLeft: 20, paddingRight: 20}}>
<Divider style={{ margin: 20 }} />
<div style={{ paddingLeft: 20, paddingRight: 20 }}>
<h5>Otorisasi Perusahaan</h5>
<div style={{paddingLeft: 10, overflow:'scroll', height: '25vh'}}>
{this.state.listCompany.map((item,index) => {
return(
<div style={{ paddingLeft: 10, overflow: 'scroll', height: '25vh' }}>
{this.state.listCompany.map((item, index) => {
return (
<div>
{/* <ul>
<li> */}
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
{item.children.length > 0 && <span onClick={() => this.handleCollapse(item)} style={{ marginLeft: 7, marginRight: 2 }}>
{item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>}
<span>
<CustomCheckbox
checked={this.handleItemChecked(item)}
onChange={() => this.handleItemClick(item)}
/>
</span>
<Typography style={{ fontSize: 12 }}>{titleCase(item.company_name)}</Typography>
</div>
{!R.isNil(item.children) && this.renderChildren(item)}
{/* </li>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
{item.children.length > 0 && <span onClick={() => this.handleCollapse(item)} style={{ marginLeft: 7, marginRight: 2 }}>
{item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>}
<span>
{this.state.role ? this.state.role.role_id === 1 ?
<CustomCheckboxDisabled
disabled={true}
checked={true}
// onChange={() => this.handleItemClick(item)}
/> :
<CustomCheckbox
checked={this.handleItemChecked(item)}
onChange={() => this.handleItemClick(item)}
/> :
<CustomCheckbox
checked={this.handleItemChecked(item)}
onChange={() => this.handleItemClick(item)}
/>
}
</span>
<Typography style={{ fontSize: 12 }}>{titleCase(item.company_name)}</Typography>
</div>
{!R.isNil(item.children) && this.renderChildren(item)}
{/* </li>
</ul> */}
</div>
)
......@@ -474,7 +509,7 @@ export default class AddUser extends Component {
</div>
</button>
</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' }}>
<button onClick={() => this.validasi()}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
......
src/container/Otorisasi/User/EditUser.js
View file @ 92e9e0de
......@@ -20,6 +20,16 @@ const CustomCheckbox = withStyles({
checked: {},
})((props) => <Checkbox color="default" {...props} />);
const CustomCheckboxDisabled = withStyles({
root: {
color: '#d5d5d5',
'&$checked': {
color: '#d5d5d5',
},
},
checked: {},
})((props) => <Checkbox color="default" {...props} />);
export default class EditUser extends Component {
constructor(props) {
......@@ -216,28 +226,39 @@ export default class EditUser extends Component {
{item.children.map((data, index) => {
return (
// <li>
<Collapse key={index} timeout="auto" unmountOnExit in={item.collapse}>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: R.isNil(data.children) ? (padding + 20) : padding }}>
{R.isNil(data.children)?
null
:
data.children.length < 1?
null
:
<span onClick={() => this.handleCollapse(data)} style={{ marginLeft: 7, marginRight: 2 }}>
{data.collapse? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>
}
<span>
<Collapse key={index} timeout="auto" unmountOnExit in={item.collapse}>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: R.isNil(data.children) ? (padding + 20) : padding }}>
{R.isNil(data.children) ?
null
:
data.children.length < 1 ?
null
:
<span onClick={() => this.handleCollapse(data)} style={{ marginLeft: 7, marginRight: 2 }}>
{data.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>
}
<span>
{this.state.role ? this.state.role.role_id === 1 ?
<CustomCheckboxDisabled
disabled={true}
checked={true}
// onChange={() => this.handleItemClick(item)}
/> :
<CustomCheckbox
checked={this.handleItemChecked(data)}
onChange={() => this.handleItemClick(data)}
/> :
<CustomCheckbox
checked={this.handleItemChecked(data)}
onChange={() => this.handleItemClick(data)}
/>
</span>
<Typography style={{ fontSize: 12 }}>{titleCase(data.company_name)}</Typography>
</div>
{!R.isNil(data.children) && this.renderChildren(data, padding + 20)}
</Collapse>
}
</span>
<Typography style={{ fontSize: 12 }}>{titleCase(data.company_name)}</Typography>
</div>
{!R.isNil(data.children) && this.renderChildren(data, padding + 20)}
</Collapse>
// </li>
)
})}
......@@ -246,51 +267,51 @@ export default class EditUser extends Component {
}
handleCollapse(item) {
let path = this.searchIt({children: this.state.listCompany}, item.id)
let path = this.searchIt({ children: this.state.listCompany }, item.id)
let listCompany = this.state.listCompany
let arrayPath = []
if (path.length > 1) {
arrayPath = path.split('-');
arrayPath = arrayPath.map((item) => {return item})
arrayPath = arrayPath.map((item) => { return item })
} else {
arrayPath.push(path)
}
let pathSelect = null
if (arrayPath.length == 1) {
pathSelect= listCompany[arrayPath[0]]
pathSelect = listCompany[arrayPath[0]]
} else if (arrayPath.length == 2) {
pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]]
pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]]
} else if (arrayPath.length == 3) {
pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]]
pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]]
} else if (arrayPath.length == 4) {
pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]]
pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]]
} else if (arrayPath.length == 5) {
pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]]
pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]]
} else if (arrayPath.length == 6) {
pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]].children[arrayPath[5]]
pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]].children[arrayPath[5]]
} else if (arrayPath.length == 7) {
pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]].children[arrayPath[5]].children[arrayPath[6]]
pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]].children[arrayPath[5]].children[arrayPath[6]]
}
pathSelect.collapse = !pathSelect.collapse
// console.log(pathSelect.collapse)
this.setState({listCompany}, () => console.log(pathSelect))
this.setState({ listCompany }, () => console.log(pathSelect))
}
searchIt = (node, search, path = '', position = 0) => {
if (node.id && node.id === search) {return path !== '' ? `${path}-${position}` : position;}
if (!node.children) {return false}
if (node.id && node.id === search) { return path !== '' ? `${path}-${position}` : position; }
if (!node.children) { return false }
const index = node.children.findIndex((x) => x.id && x.id === search);
if (index >= 0) {
return path !== '' ? `${path}-${index}` : index;
return path !== '' ? `${path}-${index}` : index;
}
for (let i = 0; i < node.children.length; i++) {
const result = this.searchIt(node.children[i], search, path !== '' ? `${path}-${i}` : i , i);
if (result){
return result;
}
const result = this.searchIt(node.children[i], search, path !== '' ? `${path}-${i}` : i, i);
if (result) {
return result;
}
}
return false;
};
......@@ -311,7 +332,7 @@ export default class EditUser extends Component {
className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()}
>
<img src={Images.close}/>
<img src={Images.close} />
</button>
</div>
</div>
......@@ -483,20 +504,31 @@ export default class EditUser extends Component {
<div>
{/* <ul>
<li> */}
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
{item.children.length > 0 && <span onClick={() => this.handleCollapse(item)} style={{ marginLeft: 7, marginRight: 2 }}>
{item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>}
<span>
<CustomCheckbox
checked={this.handleItemChecked(item)}
onChange={() => this.handleItemClick(item)}
/>
</span>
<Typography style={{ fontSize: 12 }}>{titleCase(item.company_name)}</Typography>
</div>
{!R.isNil(item.children) && this.renderChildren(item)}
{/* </li>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
{item.children.length > 0 && <span onClick={() => this.handleCollapse(item)} style={{ marginLeft: 7, marginRight: 2 }}>
{item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>}
<span>
{this.state.role ? this.state.role.role_id === 1 ?
<CustomCheckboxDisabled
disabled={true}
checked={true}
// onChange={() => this.handleItemClick(item)}
/> :
<CustomCheckbox
checked={this.handleItemChecked(item)}
onChange={() => this.handleItemClick(item)}
/> :
<CustomCheckbox
checked={this.handleItemChecked(item)}
onChange={() => this.handleItemClick(item)}
/>
}
</span>
<Typography style={{ fontSize: 12 }}>{titleCase(item.company_name)}</Typography>
</div>
{!R.isNil(item.children) && this.renderChildren(item)}
{/* </li>
</ul> */}
</div>
)
......
src/container/Otorisasi/UserRole.js
View file @ 92e9e0de
......@@ -100,6 +100,7 @@ class UserRole extends Component {
name: "Action",
options: {
customBodyRender: (val, tableMeta) => {
console.log(tableMeta);
return (
<div style={{ display: 'flex' }}>
<button
......@@ -112,7 +113,7 @@ class UserRole extends Component {
onClick={() => this.setState({ edit: true, indexData: tableMeta.rowData[1] })}
>
<div style={{ display: 'flex' }}>
{tableMeta.rowData[4] === "Aktif" ?
{tableMeta.rowData[2] !== "superadmin" && tableMeta.rowData[4] === "Aktif" ?
<img src={Images.editCopy} /> :
null
}
......
src/container/Profile.js
View file @ 92e9e0de
......@@ -253,18 +253,8 @@ export default class Profile extends Component {
};
async onDrop(pictureFiles) {
let formData = new FormData()
formData.append('file', pictureFiles[0])
let response = await api.create().uploadFoto(formData)
if (response.data) {
if (response.data.status === "success") {
this.setState({ uploadVisible: false }, () => {
alert(response.data.message)
this.getUser()
window.location.reload()
})
}
}
console.log(pictureFiles);
this.setState({ pictures: pictureFiles })
// console.log(response);
// console.log(pictureFiles);
// console.log(pictureDataURLs);
......@@ -273,6 +263,23 @@ export default class Profile extends Component {
// });
}
async uploadFoto(){
let formData = new FormData()
formData.append('file', this.state.pictures[0])
api.create().uploadFoto(formData).then(response => {
console.log(response)
if (response.data) {
if (response.data.status === "success") {
this.setState({ uploadVisible: false }, () => {
alert(response.data.message)
this.getUser()
window.location.reload()
})
}
}
})
}
render() {
return (
<div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
......@@ -487,11 +494,21 @@ export default class Profile extends Component {
</div>
<ImageUploader
withIcon={true}
buttonText='Choose images'
withPreview
buttonText='Pilih Gambar'
onChange={this.onDrop}
imgExtension={['.jpg', '.gif', '.png', '.gif', '.jpeg']}
maxFileSize={5242880}
maxFileSize={1000000}
label={"Max file size: 1 Mb, accepted: jpg or png"}
/>
{this.state.pictures.length > 0 ?
<div style={{ display: 'grid', margin: 20 }}>
<div style={{ justifySelf: 'center' }}>
<span className="main-color" style={{ color: '#fff', padding: 20, paddingBottom: 10, paddingTop: 10, borderRadius: 15, cursor: 'pointer' }} onClick={() => this.uploadFoto()}>Upload Foto</span>
</div>
</div> : null
}
</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