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. 707
      src/views/Master/RoleProject/index.js

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

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