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

change alert notification & data table

pull/2/head
wahyuun 1 year ago
parent
c7c535df76
commit
0ccbef29aa
1 changed files with 459 additions and 459 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. 918
      src/views/Master/MasterRoles/index.js

918
src/views/Master/MasterRoles/index.js
Unescape View File

@ -1,459 +1,459 @@
import * as XLSX from 'xlsx';
import DialogForm from './DialogForm';
import DialogMenuRoles from './DialogMenuRoles';
import React, { Component, useMemo } 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 { Pagination, Tooltip, Table } from 'antd';
import { ROLE_ADD, ROLE_SEARCH, ROLE_EDIT, ROLE_DELETE, ROLEMENU_ADD, ROLEMENU_SEARCH, ROLEMENU_DELETE_ROLE } from '../../../const/ApiConst.js';
import { withTranslation } from 'react-i18next';
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 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',
}
this.columns = [
{
title: this.props.t('action'),
dataIndex: '',
key: 'x',
className: 'nowrap',
render: (text, record) => <>
<Tooltip title={this.props.t('menuRoles')}>
<i className="cil-menu" style={{ color: 'green', marginRight: 10, cursor: "pointer" }} onClick={() => this.handleMenuRoles(text.id)}></i>
</Tooltip>
<Tooltip title={this.props.t('delete')}>
<i className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => this.handleDelete(text.id)}></i>
</Tooltip>
<Tooltip title={this.props.t('edit')}>
<i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(text)}></i>
</Tooltip>
</>,
},
{ title: this.props.t('nameRole'), dataIndex: 'name', key: 'name', className: "nowrap" },
{ title: this.props.t('description'), dataIndex: 'description', key: 'description' },
]
}
async componentDidMount() {
this.getDataRoles();
}
async componentDidUpdate(prevProps, prevState) {
const { search } = this.state
if (search !== prevState.search) this.getDataRoles()
if (prevProps.dataExport !== this.props.dataExport && this.props.dataExport.length > 0) {
this.handleExportExcel();
}
}
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(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 = 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.deleteCurrentRoleMenu(idDelete)
this.getDataRoles()
this.setState({ idDelete: 0, alertDelete: false })
NotificationManager.success(`Data role berhasil dihapus`, 'Success!!');
} else {
this.setState({ idDelete: 0, alertDelete: false })
NotificationManager.error(`Data role gagal dihapus`, 'Failed!!');
}
}
saveRole = async (data) => {
const formData = {
name: data.name,
description: data.description
}
const result = await axios.post(ROLE_ADD, formData, config)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
this.getDataRoles();
NotificationManager.success(`Data role berhasil ditambah`, 'Success!!');
} else {
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
}
editRole = async (data) => {
const formData = {
name: data.name,
description: data.description
}
const url = 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 role berhasil diedit`, 'Success!!');
} else {
NotificationManager.error(`Data 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">{this.props.t('noData')}</td>
</tr>
)
}
}
handleMenuRoles = async (id) => {
const formData = {
"paging": { "start": 0, "length": -1 },
"columns": [
{ "name": "role_id", "logic_operator": "=", "value": `${id}`, "operator": "AND" }
],
"joins": [],
"orders": { "columns": ["id"], "ascending": false }
}
const result = await axios
.post(ROLEMENU_SEARCH, formData, config)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code == 200) {
this.setState({ menuRoles: result.data.data, idRoles: id }, () => {
this.handleOpenDialogMr();
});
} else {
}
}
saveMenuRoles = async (dataArray) => {
let payloadArray = dataArray || []
if (payloadArray.length > 0) {
await this.deleteCurrentRoleMenu(payloadArray[0].roles_id)
}
let promises = []
let result = []
dataArray.map((val, index) => {
if (val.checked === true) {
const formData = {
menu_id: val.menu_id,
role_id: val.roles_id
}
promises.push(axios.post(ROLEMENU_ADD, formData, config)
.then(res => result.push(res)))
}
})
await Promise.all(promises);
if (result) {
if (result.length > 0) {
if (result[0].data.code === 200) {
this.getDataRoles();
NotificationManager.success('Data roles berhasil ditambahkan!!', 'Success!!');
} else {
NotificationManager.error(`${result[0].data.message}`, 'Failed!!');
}
}
}
}
deleteCurrentRoleMenu = async (id) => {
let urlDel = ROLEMENU_DELETE_ROLE(id)
const result = await axios.delete(urlDel, config)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
return true
} else {
return false
}
}
handleExportExcel = async () => {
let start = 0;
let end = "ALL";
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(ROLE_SEARCH, formData, 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 = {
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 Roles.xlsx";
const ws = XLSX.utils.json_to_sheet(dataExcel);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Data Roles');
XLSX.writeFile(wb, fileName);
}
render() {
const { t } = this.props;
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={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 tipe roles 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}
/>
<DialogMenuRoles
openDialog={dialogMenuForm}
closeDialog={this.handleCloseDialogMr}
idRoles={this.state.idRoles}
showDialog={showDialog => this.showMenuRolesDialog = showDialog}
menuRoles={this.state.menuRoles}
/>
<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('searchRoles')} />
</Col>
<Col>
<Tooltip title={this.props.t('rolesAdd')}>
<Button id="TooltipTambah" color="success" onClick={() => this.handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
</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);
import * as XLSX from 'xlsx';
import DialogForm from './DialogForm';
import DialogMenuRoles from './DialogMenuRoles';
import React, { Component, useMemo } 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 { Pagination, Tooltip, Table } from 'antd';
import { ROLE_ADD, ROLE_SEARCH, ROLE_EDIT, ROLE_DELETE, ROLEMENU_ADD, ROLEMENU_SEARCH, ROLEMENU_DELETE_ROLE } from '../../../const/ApiConst.js';
import { withTranslation } from 'react-i18next';
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 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',
}
this.columns = [
{
title: this.props.t('action'),
dataIndex: '',
key: 'x',
className: 'nowrap',
render: (text, record) => <>
<Tooltip title={this.props.t('menuRoles')}>
<i className="cil-menu" style={{ color: 'green', marginRight: 10, cursor: "pointer" }} onClick={() => this.handleMenuRoles(text.id)}></i>
</Tooltip>
<Tooltip title={this.props.t('delete')}>
<i className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => this.handleDelete(text.id)}></i>
</Tooltip>
<Tooltip title={this.props.t('edit')}>
<i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(text)}></i>
</Tooltip>
</>,
},
{ title: this.props.t('nameRole'), dataIndex: 'name', key: 'name', className: "nowrap" },
{ title: this.props.t('description'), dataIndex: 'description', key: 'description' },
]
}
async componentDidMount() {
this.getDataRoles();
}
async componentDidUpdate(prevProps, prevState) {
const { search } = this.state
if (search !== prevState.search) this.getDataRoles()
if (prevProps.dataExport !== this.props.dataExport && this.props.dataExport.length > 0) {
this.handleExportExcel();
}
}
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(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 = 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) {
await this.deleteCurrentRoleMenu(idDelete);
this.getDataRoles();
this.setState({ idDelete: 0, alertDelete: false })
NotificationManager.success(`Data role berhasil dihapus`, 'Success!!');
} else {
this.setState({ idDelete: 0, alertDelete: false })
NotificationManager.error(`Data role gagal dihapus`, 'Failed!!');
}
}
saveRole = async (data) => {
const formData = {
name: data.name,
description: data.description
}
const result = await axios.post(ROLE_ADD, formData, config)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
this.getDataRoles();
NotificationManager.success(`Data role berhasil ditambahkan`, 'Success!!');
} else {
NotificationManager.error(`Data role gagal ditambahkan`, 'Failed!!');
}
}
editRole = async (data) => {
const formData = {
name: data.name,
description: data.description
}
const url = 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 role berhasil diubah`, 'Success!!');
} else {
NotificationManager.error(`Data role gagal diubah`, `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">{this.props.t('noData')}</td>
</tr>
)
}
}
handleMenuRoles = async (id) => {
const formData = {
"paging": { "start": 0, "length": -1 },
"columns": [
{ "name": "role_id", "logic_operator": "=", "value": `${id}`, "operator": "AND" }
],
"joins": [],
"orders": { "columns": ["id"], "ascending": false }
}
const result = await axios
.post(ROLEMENU_SEARCH, formData, config)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code == 200) {
this.setState({ menuRoles: result.data.data, idRoles: id }, () => {
this.handleOpenDialogMr();
});
} else {
}
}
saveMenuRoles = async (dataArray) => {
let payloadArray = dataArray || []
if (payloadArray.length > 0) {
await this.deleteCurrentRoleMenu(payloadArray[0].roles_id)
}
let promises = []
let result = []
dataArray.map((val, index) => {
if (val.checked === true) {
const formData = {
menu_id: val.menu_id,
role_id: val.roles_id
}
promises.push(axios.post(ROLEMENU_ADD, formData, config)
.then(res => result.push(res)))
}
})
await Promise.all(promises);
if (result) {
if (result.length > 0) {
if (result[0].data.code === 200) {
this.getDataRoles();
NotificationManager.success('Data roles berhasil ditambahkan!!', 'Success!!');
} else {
NotificationManager.error(`${result[0].data.message}`, 'Failed!!');
}
}
}
}
deleteCurrentRoleMenu = async (id) => {
let urlDel = ROLEMENU_DELETE_ROLE(id)
const result = await axios.delete(urlDel, config)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
return true
} else {
return false
}
}
handleExportExcel = async () => {
let start = 0;
let end = "ALL";
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(ROLE_SEARCH, formData, 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 = {
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 Roles.xlsx";
const ws = XLSX.utils.json_to_sheet(dataExcel);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Data Roles');
XLSX.writeFile(wb, fileName);
}
render() {
const { t } = this.props;
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={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 tipe roles 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}
/>
<DialogMenuRoles
openDialog={dialogMenuForm}
closeDialog={this.handleCloseDialogMr}
idRoles={this.state.idRoles}
showDialog={showDialog => this.showMenuRolesDialog = showDialog}
menuRoles={this.state.menuRoles}
/>
<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('searchRoles')} />
</Col>
<Col>
<Tooltip title={this.props.t('rolesAdd')}>
<Button id="TooltipTambah" color="success" onClick={() => this.handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
</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);

Write Preview
Loading…
Cancel
Save