7 changed files with 779 additions and 111 deletions
@ -0,0 +1,203 @@
|
||||
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, DatePicker } from 'antd'; |
||||
import moment from "moment"; |
||||
|
||||
const { Option } = Select |
||||
class DialogForm extends Component { |
||||
constructor(props) { |
||||
super(props) |
||||
this.state = { |
||||
id: 0, |
||||
name: "", |
||||
ExpiredDateOspro: moment(), |
||||
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"); |
||||
} |
||||
}; |
||||
|
||||
handleDatePicker = (date, dateString) => { |
||||
this.setState({ ExpiredDateOspro: date }) |
||||
}; |
||||
|
||||
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('Type Paket')}</Label> |
||||
<Input type="text" value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} placeholder={this.props.t('inputName')} /> |
||||
</FormGroup> |
||||
<FormGroup> |
||||
<Label className="capitalize" style={{ fontWeight: "bold" }}> |
||||
End Date<span style={{ color: "red" }}>*</span> |
||||
</Label> |
||||
{/* <DatePicker |
||||
// disabledDate={(current) => {
|
||||
// let currentDate = moment(current).format("YYYY-MM-DD");
|
||||
// let customDate = moment(this.state.ExpiredDateOspro)
|
||||
// .add(1, "days")
|
||||
// .format("YYYY-MM-DD");
|
||||
// return current && currentDate < customDate;
|
||||
// }}
|
||||
format={"DD-MM-YYYY"} |
||||
style={{ width: "100%" }} |
||||
value={this.state.ExpiredDateOspro} |
||||
onChange={this.handleDatePicker()} |
||||
/> */} |
||||
</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('Transaksi')}</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); |
||||
@ -0,0 +1,465 @@
|
||||
import * as XLSX from 'xlsx'; |
||||
import DialogForm from './DialogForm'; |
||||
import React, { Component } from 'react'; |
||||
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||
import axios from 'axios'; |
||||
import { Button } from 'reactstrap'; |
||||
import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap'; |
||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||
import { PROJECT_ROLE_ADD, TRANSACTION_SEARCH, PROJECT_ROLE_EDIT, PROJECT_ROLE_DELETE } from '../../../const/ApiConst.js'; |
||||
import { Pagination, Tooltip, Table } from 'antd'; |
||||
import { withTranslation } from 'react-i18next'; |
||||
import { checkActMenup } from '../../../const/CustomFunc'; |
||||
import moment from "moment"; |
||||
|
||||
const LENGTH_DATA = 10 |
||||
class index extends Component { |
||||
constructor(props) { |
||||
super(props); |
||||
this.state = { |
||||
alertDelete: false, |
||||
alertNotDelete: false, |
||||
currentPage: 1, |
||||
dataEdit: null, |
||||
dataExport: [], |
||||
dataGs: [], |
||||
dataIdHo: [], |
||||
dataTable: [], |
||||
dialogMenuForm: false, |
||||
idDelete: 0, |
||||
idRoles: 0, |
||||
menuRoles: [], |
||||
openDialog: false, |
||||
page: 0, |
||||
rowsPerPage: LENGTH_DATA, |
||||
search: "", |
||||
tooltipDelete: false, |
||||
tooltipEdit: false, |
||||
tooltipExport: false, |
||||
tooltipImport: false, |
||||
tooltipMenu: false, |
||||
tooltipTambah: false, |
||||
totalPage: 0, |
||||
typeDialog: 'Save', |
||||
company_id: props.company_id || 0, |
||||
role_name: props.role_name || '', |
||||
role_id: props.role_id || 0, |
||||
user_id: props.user_id || 0, |
||||
isLogin: props.isLogin || false, |
||||
token: props.token || '', |
||||
all_project: props.all_project || null, |
||||
hierarchy: props.hierarchy || [], |
||||
user_name: props.user_name || '', |
||||
config: { |
||||
headers: { |
||||
Authorization: `Bearer ${props.token || ''}`, |
||||
"Content-type": "application/json", |
||||
} |
||||
} |
||||
}; |
||||
|
||||
this.columns = [ |
||||
{ |
||||
title: this.props.t('action'), |
||||
dataIndex: '', |
||||
key: 'x', |
||||
className: 'nowrap', |
||||
render: (text, record) => <> |
||||
<Tooltip title={this.props.t('delete')}> |
||||
<i className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => this.handleDelete(text.id)}></i> |
||||
{/* { |
||||
checkActMenup('/product-transaction', 'delete') ? |
||||
<i className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => this.handleDelete(text.id)}></i> |
||||
: |
||||
null |
||||
} */} |
||||
</Tooltip> |
||||
<Tooltip title={this.props.t('edit')}> |
||||
<i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(text)}></i> |
||||
{/* { |
||||
checkActMenup('/product-transaction', 'update') ? |
||||
<i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(text)}></i> |
||||
: |
||||
null |
||||
} */} |
||||
</Tooltip> |
||||
</>, |
||||
}, |
||||
{ |
||||
title: this.state.role_name === 'Super Admin' ? "Company Name" : null, |
||||
dataIndex: "join_first_company_name", |
||||
key: "join_first_company_name", |
||||
render: (text, record) => { |
||||
return this.state.role_name === 'Super Admin' ? ( |
||||
<span>{record.join_first_company_name}</span> |
||||
) : null; |
||||
} |
||||
}, |
||||
{ title: 'Type Paket', dataIndex: 'type_paket', key: 'type_paket', className: "nowrap" }, |
||||
{ |
||||
title: this.props.t('Expired Date'), dataIndex: 'exp_ospro', key: 'exp_ospro', |
||||
render: (text,record) => { |
||||
return moment(record.exp_ospro).format('DD MMMM, YYYY'); |
||||
} |
||||
}, |
||||
]; |
||||
} |
||||
|
||||
async componentDidMount() { |
||||
this.getDataTransaction(); |
||||
} |
||||
|
||||
async componentDidUpdate(prevProps, prevState) { |
||||
const { search } = this.state |
||||
if (search !== prevState.search) this.getDataTransaction() |
||||
} |
||||
|
||||
handleSearch = e => { |
||||
const value = e.target.value |
||||
this.setState({ search: value, currentPage: 1 }) |
||||
}; |
||||
|
||||
getDataTransaction = async () => { |
||||
let start = 0; |
||||
if (this.state.currentPage !== 1 && this.state.currentPage > 1) { |
||||
start = (this.state.currentPage * this.state.rowsPerPage) - this.state.rowsPerPage |
||||
} |
||||
|
||||
const formData = { |
||||
"paging": { "start": start, "length": this.state.rowsPerPage }, |
||||
"columns": [], |
||||
group_column: { |
||||
"operator": "AND", |
||||
"group_operator": "OR", |
||||
"where": [ |
||||
{ |
||||
"name": "type_paket", |
||||
"logic_operator": "~*", |
||||
"value": this.state.search, |
||||
} |
||||
] |
||||
}, |
||||
"joins": [], |
||||
"orders": { "columns": ["id"], "ascending": false } |
||||
} |
||||
if (this.state.role_name !== "Super Admin") { |
||||
formData.columns.push( |
||||
{ "name": "company_id", "logic_operator": "=", "value": parseInt(this.state.company_id), "operator": "AND" }, |
||||
) |
||||
} else { |
||||
formData.columns.push( |
||||
{ "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" }, |
||||
) |
||||
formData.joins.push( |
||||
{ "name": "m_company", "column_join": "company_id", "column_results": ["company_name"] } |
||||
) |
||||
formData.group_column.where.push( |
||||
{ name: "company_name", logic_operator: "~*", value: this.state.search, table_name: "m_company" } |
||||
) |
||||
} |
||||
const result = await axios |
||||
.post(TRANSACTION_SEARCH, formData, this.state.config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code == 200) { |
||||
this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord }); |
||||
} else { |
||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
handleOpenDialog = (type) => { |
||||
this.setState({ openDialog: true, typeDialog: type }) |
||||
this.showChildDialog(); |
||||
} |
||||
|
||||
handleCloseDialog = (type, data) => { |
||||
if (type === "save") { |
||||
this.saveRole(data); |
||||
} else if (type === "edit") { |
||||
this.editRole(data); |
||||
} |
||||
this.setState({ openDialog: false }) |
||||
} |
||||
|
||||
|
||||
handleOpenDialogMr = () => { |
||||
this.setState({ dialogMenuForm: true }) |
||||
this.showMenuRolesDialog(); |
||||
} |
||||
handleCloseDialogMr = (type, data) => { |
||||
if (type === "save") { |
||||
this.saveMenuRoles(data) |
||||
} |
||||
this.setState({ dialogMenuForm: false }) |
||||
} |
||||
|
||||
toggleAddDialog = () => { |
||||
this.setState({ openDialog: !this.state.openDialog }) |
||||
} |
||||
|
||||
onConfirmDelete = async () => { |
||||
const { idDelete } = this.state |
||||
const url = PROJECT_ROLE_DELETE(idDelete) |
||||
|
||||
const result = await axios.delete(url, this.state.config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
this.getDataTransaction() |
||||
this.setState({ idDelete: 0, alertDelete: false }) |
||||
NotificationManager.success(`Data project role berhasil dihapus`, 'Success!!'); |
||||
} else { |
||||
this.setState({ idDelete: 0, alertDelete: false }) |
||||
NotificationManager.error(`Data project role gagal dihapus`, 'Failed!!'); |
||||
} |
||||
} |
||||
|
||||
saveRole = async (data) => { |
||||
|
||||
const formData = { |
||||
name: data.name, |
||||
description: data.description, |
||||
company_id: data.company_id |
||||
} |
||||
|
||||
const result = await axios.post(PROJECT_ROLE_ADD, formData, this.state.config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
this.getDataTransaction(); |
||||
NotificationManager.success(`Data project role berhasil ditambah`, 'Success!!'); |
||||
} else { |
||||
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
||||
} |
||||
|
||||
} |
||||
|
||||
editRole = async (data) => { |
||||
|
||||
const formData = { |
||||
name: data.name, |
||||
description: data.description, |
||||
company_id : data.company_id |
||||
} |
||||
const url = PROJECT_ROLE_EDIT(data.id) |
||||
const result = await axios.put(url, formData, this.state.config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
this.getDataTransaction(); |
||||
NotificationManager.success(`Data project role berhasil diedit`, 'Success!!'); |
||||
} else { |
||||
NotificationManager.error(`Data project role gagal di edit`, `Failed!!`); |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
handleEdit = (data) => { |
||||
this.setState({ dataEdit: data }); |
||||
this.handleOpenDialog('Edit'); |
||||
} |
||||
|
||||
handleDelete = (id) => { |
||||
id == '1' ? this.setState({ alertNotDelete: true }) : |
||||
this.setState({ alertDelete: true, idDelete: id }); |
||||
} |
||||
|
||||
onShowSizeChange = (current, pageSize) => { |
||||
this.setState({ rowsPerPage: pageSize }, () => { |
||||
this.getDataTransaction(); |
||||
}) |
||||
} |
||||
|
||||
onPagination = (current, pageSize) => { |
||||
this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => { |
||||
this.getDataTransaction(); |
||||
}) |
||||
} |
||||
|
||||
toggle = (param) => { |
||||
if (param === "edit") { |
||||
this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit })) |
||||
} else if (param === "delete") { |
||||
this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete })) |
||||
} else if (param === "menu") { |
||||
this.setState(prevState => ({ tooltipMenu: !prevState.tooltipMenu })) |
||||
} else if (param === "tambah") { |
||||
this.setState(prevState => ({ tooltipTambah: !prevState.tooltipTambah })) |
||||
} else if (param === "export") { |
||||
this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport })) |
||||
} |
||||
} |
||||
|
||||
dataNotAvailable = () => { |
||||
if (this.state.dataTable.length === 0) { |
||||
return ( |
||||
<tr> |
||||
<td align="center" colSpan="3">{this.props.t('noData')}</td> |
||||
</tr> |
||||
) |
||||
} |
||||
} |
||||
|
||||
handleExportExcel = async () => { |
||||
const payload = { |
||||
"paging": { "start": 0, "length": -1 }, |
||||
"columns": [], |
||||
"group_column": { |
||||
"operator": "AND", |
||||
"group_operator": "OR", |
||||
"where": [ |
||||
{ |
||||
"name": "name", |
||||
"logic_operator": "~*", |
||||
"value": this.state.search, |
||||
} |
||||
] |
||||
}, |
||||
"joins": [], |
||||
"orders": { "columns": ["id"], "ascending": false } |
||||
} |
||||
if (this.state.role_name !== "Super Admin") { |
||||
payload.columns.push( |
||||
{ "name": "company_id", "logic_operator": "=", "value": this.state.company_id, "operator": "AND" }, |
||||
) |
||||
} else { |
||||
payload.columns.push( |
||||
{ "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" }, |
||||
) |
||||
payload.joins.push( |
||||
{ "name": "m_company", "column_join": "company_id", "column_results": ["company_name"] } |
||||
) |
||||
payload.group_column.where.push( |
||||
{ name: "company_name", logic_operator: "~*", value: this.state.search, table_name: "m_company" } |
||||
) |
||||
} |
||||
const result = await axios |
||||
.post(TRANSACTION_SEARCH, payload, this.state.config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
if (result && result.data && result.statusText == "OK") { |
||||
const dataRes = result.data.data || []; |
||||
const dataExport = []; |
||||
dataRes.map((val, index) => { |
||||
let row = {}; |
||||
if (this.state.role_name === 'Super Admin') { |
||||
row.Company = val.join_first_company_name; |
||||
} |
||||
row.Nama = val.name; |
||||
row.Deskripsi = val.description; |
||||
dataExport.push(row); |
||||
}) |
||||
this.setState({ dataExport: dataExport }, () => { |
||||
this.exportExcel(); |
||||
}); |
||||
} else { |
||||
NotificationManager.error('Failed retreiving data!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
exportExcel = () => { |
||||
const dataExcel = this.state.dataExport || []; |
||||
const fileName = "Data Project Role.xlsx"; |
||||
const ws = XLSX.utils.json_to_sheet(dataExcel); |
||||
const wb = XLSX.utils.book_new(); |
||||
XLSX.utils.book_append_sheet(wb, ws, 'Data Project Role'); |
||||
XLSX.writeFile(wb, fileName); |
||||
} |
||||
|
||||
render() { |
||||
const { t } = this.props; |
||||
const { dataTable, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipEdit, tooltipDelete, tooltipMenu } = this.state |
||||
let noSeq = 0; |
||||
return ( |
||||
<div> |
||||
<NotificationContainer /> |
||||
<SweetAlert |
||||
show={this.state.alertDelete} |
||||
warning |
||||
showCancel |
||||
confirmBtnText="Delete" |
||||
confirmBtnBsStyle="danger" |
||||
title={this.props.t('deleteConfirm')} |
||||
onConfirm={this.onConfirmDelete} |
||||
onCancel={() => this.setState({ alertDelete: false, idDelete: 0 })} |
||||
focusCancelBtn |
||||
> |
||||
{this.props.t('deleteMsg')} |
||||
</SweetAlert> |
||||
<SweetAlert |
||||
show={this.state.alertNotDelete} |
||||
warning |
||||
confirmBtnText="Can't Delete" |
||||
confirmBtnBsStyle="danger" |
||||
title="Data can't be delete!" |
||||
onConfirm={() => this.setState({ alertNotDelete: false })} |
||||
> |
||||
Data project role tidak dapat di hapus!! |
||||
</SweetAlert> |
||||
<DialogForm |
||||
openDialog={openDialog} |
||||
closeDialog={this.handleCloseDialog} |
||||
toggleDialog={() => this.toggleAddDialog} |
||||
typeDialog={this.state.typeDialog} |
||||
dataEdit={this.state.dataEdit} |
||||
showDialog={showDialog => this.showChildDialog = showDialog} |
||||
dataHs={this.state.dataIdHo} |
||||
company_id={this.state.company_id} |
||||
role_name={this.state.role_name} |
||||
token={this.state.token} |
||||
/> |
||||
<Card> |
||||
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
||||
<h4>{this.props.params.name}</h4> |
||||
<Row> |
||||
<Col> |
||||
<Input onChange={this.handleSearch} value={search} type="text" name="search" id="search" placeholder={this.props.t('search')} /> |
||||
</Col> |
||||
<Col> |
||||
<Tooltip title={this.props.t('rolesAdd')}> |
||||
{ |
||||
checkActMenup('/roles', 'create') ? |
||||
<Button Button id="TooltipTambah" color="success" onClick={() => this.handleOpenDialog('Save')}><i className="fa fa-plus"></i> |
||||
</Button> |
||||
: |
||||
null |
||||
} |
||||
</Tooltip> |
||||
<Tooltip title={this.props.t('exportExcel')}> |
||||
<Button style={{ marginLeft: "5px" }} id="TooltipExport" color="primary" onClick={() => this.handleExportExcel()}><i className="fa fa-print"></i></Button> |
||||
</Tooltip> |
||||
</Col> |
||||
</Row> |
||||
</CardHeader> |
||||
<CardBody> |
||||
<Table |
||||
rowKey="id" |
||||
size="small" |
||||
columns={this.columns} |
||||
dataSource={dataTable} |
||||
pagination={false} |
||||
bordered={false} |
||||
/> |
||||
<Pagination |
||||
style={{ marginTop: "25px" }} |
||||
showSizeChanger |
||||
onShowSizeChange={this.onShowSizeChange} |
||||
onChange={this.onPagination} |
||||
defaultCurrent={currentPage} |
||||
pageSize={rowsPerPage} |
||||
total={totalPage} |
||||
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]} |
||||
/> |
||||
</CardBody> |
||||
</Card> |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
export default withTranslation()(index); |
||||
@ -1,96 +1,96 @@
|
||||
import React, { useEffect, useState } from 'react' |
||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
||||
import { Button, Form, FormGroup, Label, Input, Col, Row } from 'reactstrap'; |
||||
import axios from "../../../const/interceptorApi"; |
||||
import { DOCUMENT_ADD, FOLDER_DOCUMENT_PROYEK_ADD } from '../../../const/ApiConst'; |
||||
import 'antd/dist/antd.css'; |
||||
import { NotificationManager } from 'react-notifications'; |
||||
|
||||
const DialogRequestFolder = ({ openDialog, closeDialog, toggleDialog, idTask, parentIdNewFolder }) => { |
||||
const token = localStorage.getItem("token") |
||||
const HEADER = { |
||||
headers: { |
||||
"Content-Type": "application/json", |
||||
"Authorization": `Bearer ${token}` |
||||
} |
||||
} |
||||
const [id, setId] = useState(0) |
||||
const [folderName, setFolderName] = useState('') |
||||
|
||||
|
||||
const handleClearData = () => { |
||||
setId(0) |
||||
setFolderName('') |
||||
} |
||||
|
||||
useEffect(() => { |
||||
handleClearData() |
||||
}, [openDialog]) |
||||
|
||||
const handleSave = () => { |
||||
saveFolder() |
||||
handleClearData() |
||||
} |
||||
|
||||
const saveFolder = async () => { |
||||
|
||||
|
||||
|
||||
|
||||
let payload = { |
||||
"proyek_id": idTask, |
||||
"name_folder": folderName |
||||
} |
||||
|
||||
if (parentIdNewFolder > 0) { |
||||
payload.parent_id = parentIdNewFolder |
||||
} |
||||
|
||||
const result = await axios |
||||
.post(FOLDER_DOCUMENT_PROYEK_ADD, payload, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code == 200) { |
||||
NotificationManager.success('Success create folder!!', 'Success'); |
||||
closeDialog("upload"); |
||||
} else { |
||||
NotificationManager.error('Failed to create folder!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
const handleCancel = () => { |
||||
closeDialog('cancel') |
||||
handleClearData() |
||||
} |
||||
|
||||
const renderForm = () => { |
||||
return ( |
||||
<Form> |
||||
<FormGroup> |
||||
<Label className="capitalize">Folder Name</Label> |
||||
<Input type="text" onChange={(e) => setFolderName(e.target.value)} /> |
||||
</FormGroup> |
||||
</Form> |
||||
) |
||||
} |
||||
|
||||
|
||||
return ( |
||||
<> |
||||
<Modal isOpen={openDialog} toggle={toggleDialog}> |
||||
<ModalHeader className="capitalize" toggle={closeDialog}>Create New Folder</ModalHeader> |
||||
<ModalBody> |
||||
{renderForm()} |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color="primary" onClick={() => handleSave()}>Save</Button>{' '} |
||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Cancel</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
</> |
||||
) |
||||
|
||||
} |
||||
|
||||
export default DialogRequestFolder; |
||||
import React, { useEffect, useState } from 'react' |
||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
||||
import { Button, Form, FormGroup, Label, Input, Col, Row } from 'reactstrap'; |
||||
import axios from "../../../const/interceptorApi"; |
||||
import { FOLDER_DOCUMENT_PROYEK_ADD } from '../../../const/ApiConst'; |
||||
import 'antd/dist/antd.css'; |
||||
import { NotificationManager } from 'react-notifications'; |
||||
|
||||
const DialogRequestFolder = ({ openDialog, closeDialog, toggleDialog, idTask, parentIdNewFolder }) => { |
||||
const token = localStorage.getItem("token") |
||||
const HEADER = { |
||||
headers: { |
||||
"Content-Type": "application/json", |
||||
"Authorization": `Bearer ${token}` |
||||
} |
||||
} |
||||
const [id, setId] = useState(0) |
||||
const [folderName, setFolderName] = useState('') |
||||
|
||||
|
||||
const handleClearData = () => { |
||||
setId(0) |
||||
setFolderName('') |
||||
} |
||||
|
||||
useEffect(() => { |
||||
handleClearData() |
||||
}, [openDialog]) |
||||
|
||||
const handleSave = () => { |
||||
saveFolder() |
||||
handleClearData() |
||||
} |
||||
|
||||
const saveFolder = async () => { |
||||
|
||||
|
||||
|
||||
|
||||
let payload = { |
||||
"proyek_id": idTask, |
||||
"name_folder": folderName |
||||
} |
||||
|
||||
if (parentIdNewFolder > 0) { |
||||
payload.parent_id = parentIdNewFolder |
||||
} |
||||
|
||||
const result = await axios |
||||
.post(FOLDER_DOCUMENT_PROYEK_ADD, payload, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code == 200) { |
||||
NotificationManager.success('Success create folder!!', 'Success'); |
||||
closeDialog("upload"); |
||||
} else { |
||||
NotificationManager.error('Failed to create folder!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
const handleCancel = () => { |
||||
closeDialog('cancel') |
||||
handleClearData() |
||||
} |
||||
|
||||
const renderForm = () => { |
||||
return ( |
||||
<Form> |
||||
<FormGroup> |
||||
<Label className="capitalize">Folder Name</Label> |
||||
<Input type="text" onChange={(e) => setFolderName(e.target.value)} /> |
||||
</FormGroup> |
||||
</Form> |
||||
) |
||||
} |
||||
|
||||
|
||||
return ( |
||||
<> |
||||
<Modal isOpen={openDialog} toggle={toggleDialog}> |
||||
<ModalHeader className="capitalize" toggle={closeDialog}>Create New Folder</ModalHeader> |
||||
<ModalBody> |
||||
{renderForm()} |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color="primary" onClick={() => handleSave()}>Save</Button>{' '} |
||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Cancel</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
</> |
||||
) |
||||
|
||||
} |
||||
|
||||
export default DialogRequestFolder; |
||||
|
||||
Loading…
Reference in new issue