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
Split 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 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, 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';
const token = window.localStorage.getItem('token');
const BASE_URL = "http://siopas.co.id/custom-php/api/geohr/";
const config = {
headers:
{
Authorization : `Bearer ${token}`,
"Content-type" : `application/json`
}
};
const columns = [
{
title: 'Action',
dataIndex: '',
key: 'x',
className:'nowrap',
render: (text, record) => <>
<Tooltip title="Hapus">
<i className="cil-trash fa-lg" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => this.handleDelete(text.id)}></i>
</Tooltip>
<Tooltip title="Edit">
<i className="fa fa-edit fa-lg" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(text)}></i>
</Tooltip>
</>,
},
{ title: 'Nama Role', dataIndex: 'name', key: 'name', className:"nowrap" },
{ title: 'Description', dataIndex: 'description', key: 'description' },
];
const momentFormat = 'HH:mm';
const column = [
{ name: "Nama" },
{ name: "Deskripsi" },
]
const LENGTH_DATA = 10
export default 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',
}
}
async componentDidMount() {
this.getDataRoles();
}
async componentDidUpdate(prevProps, prevState) {
const { search } = this.state
if (search !== prevState.search) this.getDataRoles()
}
handleSearch = e => {
const value = e.target.value
this.setState({ search: value, currentPage: 1 })
};
getDataRoles = 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": [
{"name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND"}
],
"joins": [],
"orders": {"columns": ["id"], "ascending": false}
}
const result = await axios
.post(PROJECT_ROLE_SEARCH, formData, 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, config)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
this.getDataRoles()
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
}
const result = await axios.post(PROJECT_ROLE_ADD, formData, config)
.then(res => res)
.catch((error) => error.response);
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
}
const url = PROJECT_ROLE_EDIT(data.id)
const result = await axios.put(url, formData, config)
.then(res => res)
.catch((error) => error.response);
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');
}
handleDelete = (id) => {
this.setState({ alertDelete: true, idDelete: id });
}
onShowSizeChange = (current, pageSize) => {
this.setState({ rowsPerPage: pageSize }, () => {
this.getDataRoles();
})
}
onPagination = (current, pageSize) => {
this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => {
this.getDataRoles();
})
}
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">Tidak ada data project role</td>
</tr>
)
}
}
handleExportExcel = async () => {
const payload = {
"paging": {"start": 0, "length": -1},
"columns": [
{"name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND"}
],
"joins": [],
"orders": {"columns": ["id"], "ascending": false}
}
const result = await axios
.post(PROJECT_ROLE_SEARCH, payload)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.statusText == "OK") {
const dataRes = result.data.data|| [];
console.log("data result", dataRes);
const dataExport = [];
dataRes.map((val,index)=> {
let row = {
Nama:val.name,
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 { tooltipTambah,tooltipExport,dialogMenuForm, 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="Are you sure?"
onConfirm={this.onConfirmDelete}
onCancel={() => this.setState({ alertDelete: false, idDelete: 0 })}
focusCancelBtn
>
Data project role akan terhapus!!
</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}
/>
<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="Cari Nama Project Role" />
</Col>
<Col>
<Tooltip title="Tambah Roles">
<Button id="TooltipTambah" color="success" onClick={() => this.handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
</Tooltip>
<Tooltip title="Export Excel">
<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={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>
)
}
}
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, 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';
const token = window.localStorage.getItem('token');
const BASE_URL = "http://siopas.co.id/custom-php/api/geohr/";
const config = {
headers:
{
Authorization: `Bearer ${token}`,
"Content-type": `application/json`
}
};
const momentFormat = 'HH:mm';
const column = [
{ name: "Nama" },
{ name: "Deskripsi" },
]
const LENGTH_DATA = 10
export default 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',
}
this.columns = [
{
title: 'Action',
dataIndex: '',
key: 'x',
className: 'nowrap',
render: (text, record) => <>
<Tooltip title="Hapus">
<i className="cil-trash fa-lg" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => this.handleDelete(text.id)}></i>
</Tooltip>
<Tooltip title="Edit">
<i className="fa fa-edit fa-lg" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(text)}></i>
</Tooltip>
</>,
},
{ title: 'Nama Role', dataIndex: 'name', key: 'name', className: "nowrap" },
{ title: 'Description', dataIndex: 'description', key: 'description' },
];
}
async componentDidMount() {
this.getDataRoles();
}
async componentDidUpdate(prevProps, prevState) {
const { search } = this.state
if (search !== prevState.search) this.getDataRoles()
}
handleSearch = e => {
const value = e.target.value
this.setState({ search: value, currentPage: 1 })
};
getDataRoles = 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": [
{ "name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND" }
],
"joins": [],
"orders": { "columns": ["id"], "ascending": false }
}
const result = await axios
.post(PROJECT_ROLE_SEARCH, formData, 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, config)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
this.getDataRoles()
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
}
const result = await axios.post(PROJECT_ROLE_ADD, formData, config)
.then(res => res)
.catch((error) => error.response);
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
}
const url = PROJECT_ROLE_EDIT(data.id)
const result = await axios.put(url, formData, config)
.then(res => res)
.catch((error) => error.response);
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');
}
handleDelete = (id) => {
id == '1' ? this.setState({ alertNotDelete: true }) :
this.setState({ alertDelete: true, idDelete: id });
}
onShowSizeChange = (current, pageSize) => {
this.setState({ rowsPerPage: pageSize }, () => {
this.getDataRoles();
})
}
onPagination = (current, pageSize) => {
this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => {
this.getDataRoles();
})
}
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">Tidak ada data project role</td>
</tr>
)
}
}
handleExportExcel = async () => {
const payload = {
"paging": { "start": 0, "length": -1 },
"columns": [
{ "name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND" }
],
"joins": [],
"orders": { "columns": ["id"], "ascending": false }
}
const result = await axios
.post(PROJECT_ROLE_SEARCH, payload)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.statusText == "OK") {
const dataRes = result.data.data || [];
console.log("data result", dataRes);
const dataExport = [];
dataRes.map((val, index) => {
let row = {
Nama: val.name,
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 { tooltipTambah, tooltipExport, dialogMenuForm, 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="Are you sure?"
onConfirm={this.onConfirmDelete}
onCancel={() => this.setState({ alertDelete: false, idDelete: 0 })}
focusCancelBtn
>
Data project role akan terhapus!!
</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}
/>
<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="Cari Nama Project Role" />
</Col>
<Col>
<Tooltip title="Tambah Roles">
<Button id="TooltipTambah" color="success" onClick={() => this.handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
</Tooltip>
<Tooltip title="Export Excel">
<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>
)
}
}

Write Preview
Loading…
Cancel
Save