ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

bug fixing edit,delete role project

pull/2/head
nurkomalasari 2 years ago
parent
7359b986b3
commit
01e2b480be
1 changed files with 384 additions and 379 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 763
      src/views/Master/RoleProject/index.js

763
src/views/Master/RoleProject/index.js
Unescape View File

@ -1,379 +1,384 @@
import * as XLSX from 'xlsx'; import * as XLSX from 'xlsx';
import DialogForm from './DialogForm'; import DialogForm from './DialogForm';
import React, { Component } from 'react'; import React, { Component } from 'react';
import SweetAlert from 'react-bootstrap-sweetalert'; import SweetAlert from 'react-bootstrap-sweetalert';
import axios from 'axios'; import axios from 'axios';
import { Button } from 'reactstrap'; import { Button } from 'reactstrap';
import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap'; import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap';
import { NotificationContainer, NotificationManager } from 'react-notifications'; import { NotificationContainer, NotificationManager } from 'react-notifications';
import { PROJECT_ROLE_ADD, PROJECT_ROLE_SEARCH, PROJECT_ROLE_EDIT, PROJECT_ROLE_DELETE, ROLEMENU_ADD, ROLEMENU_SEARCH, ROLEMENU_DELETE_ROLE } from '../../../const/ApiConst.js'; import { PROJECT_ROLE_ADD, PROJECT_ROLE_SEARCH, PROJECT_ROLE_EDIT, PROJECT_ROLE_DELETE, ROLEMENU_ADD, ROLEMENU_SEARCH, ROLEMENU_DELETE_ROLE } from '../../../const/ApiConst.js';
import { Pagination, Tooltip, Table } from 'antd'; import { Pagination, Tooltip, Table } from 'antd';
const token = window.localStorage.getItem('token'); const token = window.localStorage.getItem('token');
const BASE_URL = "http://siopas.co.id/custom-php/api/geohr/"; const BASE_URL = "http://siopas.co.id/custom-php/api/geohr/";
const config = { const config = {
headers: headers:
{ {
Authorization : `Bearer ${token}`, Authorization: `Bearer ${token}`,
"Content-type" : `application/json` "Content-type": `application/json`
} }
}; };
const columns = [
{
title: 'Action', const momentFormat = 'HH:mm';
dataIndex: '',
key: 'x', const column = [
className:'nowrap', { name: "Nama" },
render: (text, record) => <> { name: "Deskripsi" },
<Tooltip title="Hapus"> ]
<i className="cil-trash fa-lg" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => this.handleDelete(text.id)}></i>
</Tooltip> const LENGTH_DATA = 10
<Tooltip title="Edit"> export default class index extends Component {
<i className="fa fa-edit fa-lg" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(text)}></i> constructor(props) {
</Tooltip> super(props)
</>, this.state = {
}, alertDelete: false,
{ title: 'Nama Role', dataIndex: 'name', key: 'name', className:"nowrap" }, alertNotDelete: false,
{ title: 'Description', dataIndex: 'description', key: 'description' }, currentPage: 1,
]; dataEdit: null,
dataExport: [],
const momentFormat = 'HH:mm'; dataGs: [],
dataIdHo: [],
const column = [ dataTable: [],
{ name: "Nama" }, dialogMenuForm: false,
{ name: "Deskripsi" }, idDelete: 0,
] idRoles: 0,
menuRoles: [],
const LENGTH_DATA = 10 openDialog: false,
page: 0,
export default class index extends Component { rowsPerPage: LENGTH_DATA,
constructor(props) { search: "",
super(props) tooltipDelete: false,
this.state = { tooltipEdit: false,
alertDelete: false, tooltipExport: false,
alertNotDelete: false, tooltipImport: false,
currentPage: 1, tooltipMenu: false,
dataEdit: null, tooltipTambah: false,
dataExport:[], totalPage: 0,
dataGs: [], typeDialog: 'Save',
dataIdHo: [], }
dataTable: [], this.columns = [
dialogMenuForm: false, {
idDelete: 0, title: 'Action',
idRoles:0, dataIndex: '',
menuRoles:[], key: 'x',
openDialog: false, className: 'nowrap',
page: 0, render: (text, record) => <>
rowsPerPage: LENGTH_DATA, <Tooltip title="Hapus">
search: "", <i className="cil-trash fa-lg" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => this.handleDelete(text.id)}></i>
tooltipDelete: false,
tooltipEdit: false, </Tooltip>
tooltipExport:false,
tooltipImport:false, <Tooltip title="Edit">
tooltipMenu: false, <i className="fa fa-edit fa-lg" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(text)}></i>
tooltipTambah:false, </Tooltip>
totalPage: 0, </>,
typeDialog: 'Save', },
} { title: 'Nama Role', dataIndex: 'name', key: 'name', className: "nowrap" },
} { title: 'Description', dataIndex: 'description', key: 'description' },
];
async componentDidMount() { }
this.getDataRoles();
}
async componentDidUpdate(prevProps, prevState) { async componentDidMount() {
const { search } = this.state this.getDataRoles();
if (search !== prevState.search) this.getDataRoles() }
}
async componentDidUpdate(prevProps, prevState) {
handleSearch = e => { const { search } = this.state
const value = e.target.value if (search !== prevState.search) this.getDataRoles()
this.setState({ search: value, currentPage: 1 }) }
};
handleSearch = e => {
getDataRoles = async () => { const value = e.target.value
let start = 0; this.setState({ search: value, currentPage: 1 })
if (this.state.currentPage !== 1 && this.state.currentPage > 1) { };
start = (this.state.currentPage * this.state.rowsPerPage) - this.state.rowsPerPage
} getDataRoles = async () => {
let start = 0;
const formData = { if (this.state.currentPage !== 1 && this.state.currentPage > 1) {
"paging": {"start": start, "length": this.state.rowsPerPage}, start = (this.state.currentPage * this.state.rowsPerPage) - this.state.rowsPerPage
"columns": [ }
{"name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND"}
], const formData = {
"joins": [], "paging": { "start": start, "length": this.state.rowsPerPage },
"orders": {"columns": ["id"], "ascending": false} "columns": [
} { "name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND" }
],
const result = await axios "joins": [],
.post(PROJECT_ROLE_SEARCH, formData, config) "orders": { "columns": ["id"], "ascending": false }
.then(res => res) }
.catch((error) => error.response);
const result = await axios
if(result && result.data && result.data.code == 200){ .post(PROJECT_ROLE_SEARCH, formData, config)
this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord }); .then(res => res)
}else{ .catch((error) => error.response);
NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
} if (result && result.data && result.data.code == 200) {
} this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord });
} else {
handleOpenDialog = (type) => { NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
this.setState({ openDialog: true, typeDialog: type }) }
this.showChildDialog(); }
}
handleOpenDialog = (type) => {
handleCloseDialog = (type, data) => { this.setState({ openDialog: true, typeDialog: type })
if (type === "save") { this.showChildDialog();
this.saveRole(data); }
} else if (type === "edit") {
this.editRole(data); handleCloseDialog = (type, data) => {
} if (type === "save") {
this.setState({ openDialog: false }) this.saveRole(data);
} } else if (type === "edit") {
this.editRole(data);
}
handleOpenDialogMr = () => { this.setState({ openDialog: false })
this.setState({ dialogMenuForm: true }) }
this.showMenuRolesDialog();
}
handleCloseDialogMr = (type, data) => { handleOpenDialogMr = () => {
if(type==="save"){ this.setState({ dialogMenuForm: true })
this.saveMenuRoles(data) this.showMenuRolesDialog();
} }
this.setState({ dialogMenuForm: false }) handleCloseDialogMr = (type, data) => {
} if (type === "save") {
this.saveMenuRoles(data)
toggleAddDialog = () => { }
this.setState({ openDialog: !this.state.openDialog }) this.setState({ dialogMenuForm: false })
} }
onConfirmDelete = async () => { toggleAddDialog = () => {
const { idDelete } = this.state this.setState({ openDialog: !this.state.openDialog })
const url = PROJECT_ROLE_DELETE(idDelete) }
const result = await axios.delete(url, config) onConfirmDelete = async () => {
.then(res => res) const { idDelete } = this.state
.catch((error) => error.response); const url = PROJECT_ROLE_DELETE(idDelete)
if (result && result.data && result.data.code === 200) { const result = await axios.delete(url, config)
this.getDataRoles() .then(res => res)
this.setState({ idDelete: 0, alertDelete: false }) .catch((error) => error.response);
NotificationManager.success(`Data project role berhasil dihapus`, 'Success!!');
} else { if (result && result.data && result.data.code === 200) {
this.setState({ idDelete: 0, alertDelete: false }) this.getDataRoles()
NotificationManager.error(`Data project role gagal dihapus`, 'Failed!!'); this.setState({ idDelete: 0, alertDelete: false })
} NotificationManager.success(`Data project role berhasil dihapus`, 'Success!!');
} } else {
this.setState({ idDelete: 0, alertDelete: false })
saveRole = async (data) => { NotificationManager.error(`Data project role gagal dihapus`, 'Failed!!');
}
const formData = { }
name:data.name,
description:data.description saveRole = async (data) => {
}
const formData = {
const result = await axios.post(PROJECT_ROLE_ADD, formData, config) name: data.name,
.then(res => res) description: data.description
.catch((error) => error.response); }
if(result && result.data && result.data.code===200){ const result = await axios.post(PROJECT_ROLE_ADD, formData, config)
this.getDataRoles(); .then(res => res)
NotificationManager.success(`Data project role berhasil ditambah`, 'Success!!'); .catch((error) => error.response);
} else {
NotificationManager.error(`${result.data.message}`, 'Failed!!'); if (result && result.data && result.data.code === 200) {
} this.getDataRoles();
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 editRole = async (data) => {
}
const url = PROJECT_ROLE_EDIT(data.id) const formData = {
const result = await axios.put(url, formData, config) name: data.name,
.then(res => res) description: data.description
.catch((error) => error.response); }
const url = PROJECT_ROLE_EDIT(data.id)
if(result && result.data && result.data.code===200){ const result = await axios.put(url, formData, config)
this.getDataRoles(); .then(res => res)
NotificationManager.success(`Data project role berhasil diedit`, 'Success!!'); .catch((error) => error.response);
} else {
NotificationManager.error(`Data project role gagal di edit`, `Failed!!`); if (result && result.data && result.data.code === 200) {
} this.getDataRoles();
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');
}
handleEdit = (data) => {
handleDelete = (id) => { this.setState({ dataEdit: data });
this.setState({ alertDelete: true, idDelete: id }); this.handleOpenDialog('Edit');
} }
onShowSizeChange = (current, pageSize) => { handleDelete = (id) => {
this.setState({ rowsPerPage: pageSize }, () => { id == '1' ? this.setState({ alertNotDelete: true }) :
this.getDataRoles(); this.setState({ alertDelete: true, idDelete: id });
}) }
}
onShowSizeChange = (current, pageSize) => {
onPagination = (current, pageSize) => { this.setState({ rowsPerPage: pageSize }, () => {
this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => { this.getDataRoles();
this.getDataRoles(); })
}) }
}
onPagination = (current, pageSize) => {
toggle = (param) => { this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => {
if (param === "edit") { this.getDataRoles();
this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit })) })
} else if (param === "delete") { }
this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete }))
} else if(param === "menu"){ toggle = (param) => {
this.setState(prevState => ({ tooltipMenu: !prevState.tooltipMenu })) if (param === "edit") {
} else if (param === "tambah") { this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit }))
this.setState(prevState => ({ tooltipTambah: !prevState.tooltipTambah })) } else if (param === "delete") {
} else if (param === "export") { this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete }))
this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport })) } else if (param === "menu") {
} this.setState(prevState => ({ tooltipMenu: !prevState.tooltipMenu }))
} } else if (param === "tambah") {
this.setState(prevState => ({ tooltipTambah: !prevState.tooltipTambah }))
dataNotAvailable = () => { } else if (param === "export") {
if(this.state.dataTable.length===0){ this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport }))
return ( }
<tr> }
<td align="center" colSpan="3">Tidak ada data project role</td>
</tr> dataNotAvailable = () => {
) if (this.state.dataTable.length === 0) {
} return (
} <tr>
<td align="center" colSpan="3">Tidak ada data project role</td>
handleExportExcel = async () => { </tr>
const payload = { )
"paging": {"start": 0, "length": -1}, }
"columns": [ }
{"name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND"}
], handleExportExcel = async () => {
"joins": [], const payload = {
"orders": {"columns": ["id"], "ascending": false} "paging": { "start": 0, "length": -1 },
} "columns": [
const result = await axios { "name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND" }
.post(PROJECT_ROLE_SEARCH, payload) ],
.then(res => res) "joins": [],
.catch((error) => error.response); "orders": { "columns": ["id"], "ascending": false }
if (result && result.data && result.statusText == "OK") { }
const dataRes = result.data.data|| []; const result = await axios
console.log("data result", dataRes); .post(PROJECT_ROLE_SEARCH, payload)
const dataExport = []; .then(res => res)
dataRes.map((val,index)=> { .catch((error) => error.response);
let row = { if (result && result.data && result.statusText == "OK") {
Nama:val.name, const dataRes = result.data.data || [];
Deskripsi:val.description console.log("data result", dataRes);
} const dataExport = [];
dataExport.push(row); dataRes.map((val, index) => {
}) let row = {
this.setState({ dataExport:dataExport },()=> { Nama: val.name,
this.exportExcel(); Deskripsi: val.description
}); }
} else { dataExport.push(row);
NotificationManager.error('Failed retreiving data!!', 'Failed'); })
} this.setState({ dataExport: dataExport }, () => {
} this.exportExcel();
});
exportExcel = () => { } else {
const dataExcel = this.state.dataExport || []; NotificationManager.error('Failed retreiving data!!', 'Failed');
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'); exportExcel = () => {
XLSX.writeFile(wb, fileName); const dataExcel = this.state.dataExport || [];
} const fileName = "Data Project Role.xlsx";
const ws = XLSX.utils.json_to_sheet(dataExcel);
render() { const wb = XLSX.utils.book_new();
const { tooltipTambah,tooltipExport,dialogMenuForm, dataTable, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipEdit, tooltipDelete,tooltipMenu } = this.state XLSX.utils.book_append_sheet(wb, ws, 'Data Project Role');
let noSeq = 0; XLSX.writeFile(wb, fileName);
return ( }
<div>
<NotificationContainer /> render() {
<SweetAlert const { tooltipTambah, tooltipExport, dialogMenuForm, dataTable, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipEdit, tooltipDelete, tooltipMenu } = this.state
show={this.state.alertDelete} let noSeq = 0;
warning return (
showCancel <div>
confirmBtnText="Delete" <NotificationContainer />
confirmBtnBsStyle="danger" <SweetAlert
title="Are you sure?" show={this.state.alertDelete}
onConfirm={this.onConfirmDelete} warning
onCancel={() => this.setState({ alertDelete: false, idDelete: 0 })} showCancel
focusCancelBtn confirmBtnText="Delete"
> confirmBtnBsStyle="danger"
Data project role akan terhapus!! title="Are you sure?"
</SweetAlert> onConfirm={this.onConfirmDelete}
<SweetAlert onCancel={() => this.setState({ alertDelete: false, idDelete: 0 })}
show={this.state.alertNotDelete} focusCancelBtn
warning >
confirmBtnText="Can't Delete" Data project role akan terhapus!!
confirmBtnBsStyle="danger" </SweetAlert>
title="Data can't be delete!" <SweetAlert
onConfirm={() => this.setState({ alertNotDelete: false})} show={this.state.alertNotDelete}
> warning
Data project role tidak dapat di hapus!! confirmBtnText="Can't Delete"
</SweetAlert> confirmBtnBsStyle="danger"
<DialogForm title="Data can't be delete!"
openDialog={openDialog} onConfirm={() => this.setState({ alertNotDelete: false })}
closeDialog={this.handleCloseDialog} >
toggleDialog={() => this.toggleAddDialog} Data project role tidak dapat di hapus!!
typeDialog={this.state.typeDialog} </SweetAlert>
dataEdit={this.state.dataEdit} <DialogForm
showDialog={showDialog => this.showChildDialog = showDialog} openDialog={openDialog}
dataHs={this.state.dataIdHo} closeDialog={this.handleCloseDialog}
/> toggleDialog={() => this.toggleAddDialog}
<Card> typeDialog={this.state.typeDialog}
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> dataEdit={this.state.dataEdit}
<h4>{this.props.params.name}</h4> showDialog={showDialog => this.showChildDialog = showDialog}
<Row> dataHs={this.state.dataIdHo}
<Col> />
<Input onChange={this.handleSearch} value={search} type="text" name="search" id="search" placeholder="Cari Nama Project Role" /> <Card>
</Col> <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
<Col> <h4>{this.props.params.name}</h4>
<Tooltip title="Tambah Roles"> <Row>
<Button id="TooltipTambah" color="success" onClick={() => this.handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button> <Col>
</Tooltip> <Input onChange={this.handleSearch} value={search} type="text" name="search" id="search" placeholder="Cari Nama Project Role" />
<Tooltip title="Export Excel"> </Col>
<Button style={{marginLeft:"5px"}} id="TooltipExport" color="primary" onClick={()=> this.handleExportExcel()}><i className="fa fa-print"></i></Button> <Col>
</Tooltip> <Tooltip title="Tambah Roles">
</Col> <Button id="TooltipTambah" color="success" onClick={() => this.handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
</Row> </Tooltip>
</CardHeader> <Tooltip title="Export Excel">
<CardBody> <Button style={{ marginLeft: "5px" }} id="TooltipExport" color="primary" onClick={() => this.handleExportExcel()}><i className="fa fa-print"></i></Button>
<Table </Tooltip>
rowKey="id" </Col>
size="small" </Row>
columns={columns} </CardHeader>
dataSource={dataTable} <CardBody>
pagination={false} <Table
bordered={false} rowKey="id"
/> size="small"
<Pagination columns={this.columns}
style={{marginTop:"25px"}} dataSource={dataTable}
showSizeChanger pagination={false}
onShowSizeChange={this.onShowSizeChange} bordered={false}
onChange={this.onPagination} />
defaultCurrent={currentPage} <Pagination
pageSize={rowsPerPage} style={{ marginTop: "25px" }}
total={totalPage} showSizeChanger
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]} onShowSizeChange={this.onShowSizeChange}
/> onChange={this.onPagination}
</CardBody> defaultCurrent={currentPage}
</Card> pageSize={rowsPerPage}
</div> total={totalPage}
) pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]}
} />
} </CardBody>
</Card>
</div>
)
}
}

Write Preview
Loading…
Cancel
Save