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