9 changed files with 459 additions and 244 deletions
@ -1,116 +1,182 @@
|
||||
import React, { Component } from 'react' |
||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
||||
import { Button, Form, FormGroup, Label, Input } from 'reactstrap'; |
||||
import 'antd/dist/antd.css'; |
||||
import { withTranslation } from 'react-i18next'; |
||||
const company_id = localStorage.getItem("company_id") |
||||
class DialogForm extends Component { |
||||
constructor(props) { |
||||
super(props) |
||||
this.state = { |
||||
id: 0, |
||||
name: "", |
||||
description: "", |
||||
openDialog: false, |
||||
isParentClick: false, |
||||
company_id |
||||
} |
||||
} |
||||
|
||||
async componentDidMount() { |
||||
this.props.showDialog(this.showDialog); |
||||
} |
||||
|
||||
async componentDidUpdate() { |
||||
if (this.state.isParentClick === true) { |
||||
if (this.props.typeDialog === "Edit") { |
||||
const { dataEdit } = this.props |
||||
this.setState({ |
||||
id: dataEdit.id, |
||||
name: dataEdit.name, |
||||
description: dataEdit.description, |
||||
company_id |
||||
}) |
||||
} else { |
||||
this.setState({ |
||||
id: 0, |
||||
name: "", |
||||
description: "" |
||||
}) |
||||
} |
||||
this.setState({ isParentClick: false }); |
||||
} |
||||
} |
||||
|
||||
|
||||
showDialog = () => { |
||||
this.setState({ isParentClick: true }); |
||||
} |
||||
|
||||
|
||||
handleSave = () => { |
||||
const { |
||||
id, |
||||
name, |
||||
description |
||||
} = this.state |
||||
|
||||
let data = ''; |
||||
if (this.props.typeDialog === "Save") { |
||||
data = { |
||||
id, |
||||
name, |
||||
description, |
||||
company_id |
||||
} |
||||
this.props.closeDialog('save', data); |
||||
} else { |
||||
data = { |
||||
id, |
||||
name, |
||||
description, |
||||
company_id |
||||
} |
||||
this.props.closeDialog('edit', data); |
||||
} |
||||
|
||||
this.setState({ id: 0 }); |
||||
|
||||
} |
||||
|
||||
handleCancel = () => { |
||||
this.props.closeDialog('cancel', 'none') |
||||
} |
||||
|
||||
renderForm = () => { |
||||
const { t } = this.props; |
||||
return ( |
||||
<Form> |
||||
<FormGroup> |
||||
<Label>{this.props.t('name')}</Label> |
||||
<Input type="text" value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} placeholder={this.props.t('inputName')} /> |
||||
</FormGroup> |
||||
<FormGroup> |
||||
<Label>{this.props.t('description')}</Label> |
||||
<Input type="text" value={this.state.description} onChange={(e) => this.setState({ description: e.target.value })} placeholder={this.props.t('inputDescription')} /> |
||||
</FormGroup> |
||||
</Form> |
||||
) |
||||
} |
||||
|
||||
render() { |
||||
return ( |
||||
<Modal isOpen={this.props.openDialog} toggle={this.props.toggleDialog}> |
||||
<ModalHeader toggle={this.props.closeDialog}>{this.props.typeDialog == "Save" ? "Tambah" : "Edit"} {this.props.t('nameProjectRole')}</ModalHeader> |
||||
<ModalBody> |
||||
{this.renderForm()} |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color="primary" onClick={() => this.handleSave()}>{this.props.typeDialog}</Button>{' '} |
||||
<Button color="secondary" onClick={() => this.handleCancel()}>{this.props.t('cancel')}</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
) |
||||
} |
||||
} |
||||
export default withTranslation()(DialogForm); |
||||
import React, { Component } from 'react' |
||||
import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Form, FormGroup, Label, Input } from 'reactstrap'; |
||||
import 'antd/dist/antd.css'; |
||||
import axios from 'axios'; |
||||
import { COMPANY_MANAGEMENT_LIST } from '../../../const/ApiConst.js'; |
||||
import { withTranslation } from 'react-i18next'; |
||||
import { NotificationManager } from 'react-notifications'; |
||||
import { Select } from 'antd'; |
||||
const { Option } = Select |
||||
class DialogForm extends Component { |
||||
constructor(props) { |
||||
super(props) |
||||
this.state = { |
||||
id: 0, |
||||
name: "", |
||||
description: "", |
||||
openDialog: false, |
||||
companyList: [], |
||||
scompany_id:null, |
||||
isParentClick: false, |
||||
company_id: props.company_id || null, |
||||
role_name: props.role_name || '', |
||||
token: props.token || '', |
||||
config: { |
||||
headers: { |
||||
Authorization: `Bearer ${props.token || ''}`, |
||||
"Content-type": "application/json", |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
async componentDidMount() { |
||||
this.props.showDialog(this.showDialog); |
||||
this.getDataProyekCompany(); |
||||
} |
||||
|
||||
async componentDidUpdate() { |
||||
if (this.state.isParentClick === true) { |
||||
if (this.props.typeDialog === "Edit") { |
||||
const { dataEdit } = this.props |
||||
this.setState({ |
||||
id: dataEdit.id, |
||||
name: dataEdit.name, |
||||
description: dataEdit.description, |
||||
scompany_id : dataEdit.company_id |
||||
}) |
||||
} else { |
||||
this.setState({ |
||||
id: 0, |
||||
name: "", |
||||
description: "", |
||||
scompany_id:null |
||||
}) |
||||
} |
||||
this.setState({ isParentClick: false }); |
||||
} |
||||
} |
||||
|
||||
|
||||
showDialog = () => { |
||||
this.setState({ isParentClick: true }); |
||||
} |
||||
|
||||
getDataProyekCompany = async () => { |
||||
const result = await axios |
||||
.get(COMPANY_MANAGEMENT_LIST, this.state.config) |
||||
.then((res) => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code == 200) { |
||||
let dataRes = result.data.data || []; |
||||
this.setState({companyList: dataRes}) |
||||
} else { |
||||
NotificationManager.error("Gagal Mengambil Data!!", "Failed"); |
||||
} |
||||
}; |
||||
|
||||
validation = () => { |
||||
if (this.state.role_name === 'Super Admin' && !this.state.scompany_id || this.state.scompany_id === "") { |
||||
alert("Company data cannot be empty!"); |
||||
return true; |
||||
} |
||||
} |
||||
|
||||
handleSave = () => { |
||||
const { |
||||
id, |
||||
name, |
||||
description, |
||||
role_name, |
||||
company_id, |
||||
scompany_id |
||||
} = this.state |
||||
|
||||
let data = ''; |
||||
const err = this.validation(); |
||||
if(!err) { |
||||
if (this.props.typeDialog === "Save") { |
||||
data = { |
||||
id, |
||||
name, |
||||
description, |
||||
company_id : role_name !== 'Super Admin' ? company_id : scompany_id, |
||||
} |
||||
this.props.closeDialog('save', data); |
||||
} else { |
||||
data = { |
||||
id, |
||||
name, |
||||
description, |
||||
company_id : role_name !== 'Super Admin' ? company_id : scompany_id, |
||||
} |
||||
this.props.closeDialog('edit', data); |
||||
} |
||||
} |
||||
this.setState({ id: 0 }); |
||||
} |
||||
|
||||
handleCancel = () => { |
||||
this.props.closeDialog('cancel', 'none') |
||||
} |
||||
|
||||
onChangeCompanyProject = (val) => { |
||||
this.setState({scompany_id : val}); |
||||
}; |
||||
|
||||
renderForm = () => { |
||||
const { t } = this.props; |
||||
return ( |
||||
<Form> |
||||
{ |
||||
this.state.role_name === 'Super Admin' && ( |
||||
<FormGroup> |
||||
<Label className="capitalize">Assign Company Project<span style={{ color: "red" }}>*</span></Label> |
||||
<Select |
||||
showSearch |
||||
filterOption={(inputValue, option) => |
||||
option.children.toLowerCase().includes(inputValue.toLowerCase()) |
||||
} |
||||
value={this.state.scompany_id} |
||||
defaultValue={this.state.scompany_id} |
||||
onChange={this.onChangeCompanyProject} |
||||
style={{ width: "100%" }} |
||||
> |
||||
{this.state.companyList.map((res) => ( |
||||
<Option key={res.id} value={res.id}> |
||||
{res.company_name} |
||||
</Option> |
||||
))} |
||||
</Select> |
||||
</FormGroup> |
||||
) |
||||
} |
||||
<FormGroup> |
||||
<Label>{this.props.t('name')}</Label> |
||||
<Input type="text" value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} placeholder={this.props.t('inputName')} /> |
||||
</FormGroup> |
||||
<FormGroup> |
||||
<Label>{this.props.t('description')}</Label> |
||||
<Input type="text" value={this.state.description} onChange={(e) => this.setState({ description: e.target.value })} placeholder={this.props.t('inputDescription')} /> |
||||
</FormGroup> |
||||
</Form> |
||||
) |
||||
} |
||||
|
||||
render() { |
||||
return ( |
||||
<Modal isOpen={this.props.openDialog} toggle={this.props.toggleDialog}> |
||||
<ModalHeader toggle={this.props.closeDialog}>{this.props.typeDialog == "Save" ? "Tambah" : "Edit"} {this.props.t('nameProjectRole')}</ModalHeader> |
||||
<ModalBody> |
||||
{this.renderForm()} |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color="primary" onClick={() => this.handleSave()}>{this.props.typeDialog}</Button>{' '} |
||||
<Button color="secondary" onClick={() => this.handleCancel()}>{this.props.t('cancel')}</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
) |
||||
} |
||||
} |
||||
export default withTranslation()(DialogForm); |
||||
|
||||
Loading…
Reference in new issue