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

endline fix

pull/1/head
wahyu 1 year ago
parent
ed92d12deb
commit
078924802a
3 changed files with 730 additions and 730 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. 198
      src/views/Master/ConfigAlert/DialogForm.js
  2. 344
      src/views/Master/ConfigAlert/index.js
  3. 918
      src/views/Master/MasterRoles/index.js

198
src/views/Master/ConfigAlert/DialogForm.js
Unescape View File

@ -1,99 +1,99 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import { Button, Form, FormGroup, Label, Input, Col, Row } from 'reactstrap'; import { Button, Form, FormGroup, Label, Input, Col, Row } from 'reactstrap';
import { Select } from 'antd'; import { Select } from 'antd';
import moment from 'moment'; import moment from 'moment';
import 'antd/dist/antd.css'; import 'antd/dist/antd.css';
const { Option } = Select const { Option } = Select
const DialogForm = ({openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, dataMenu}) => { const DialogForm = ({openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, dataMenu}) => {
const [id, setId] = useState(0) const [id, setId] = useState(0)
const [name, setName] = useState('') const [name, setName] = useState('')
const [descripton, setDescription] = useState('') const [descripton, setDescription] = useState('')
const [status, setStatus] = useState('') const [status, setStatus] = useState('')
useEffect(()=> { useEffect(()=> {
if(typeDialog==="Edit"){ if(typeDialog==="Edit"){
console.log("data edit", dataEdit) console.log("data edit", dataEdit)
setId(dataEdit.id) setId(dataEdit.id)
setName(dataEdit.nama) setName(dataEdit.nama)
setDescription(dataEdit.keterangan) setDescription(dataEdit.keterangan)
setStatus(dataEdit.status) setStatus(dataEdit.status)
}else{ }else{
setId(0) setId(0)
setName('') setName('')
setDescription('') setDescription('')
setStatus('') setStatus('')
} }
},[dataEdit,openDialog]) },[dataEdit,openDialog])
const handleSave = () => { const handleSave = () => {
let data = ''; let data = '';
if(typeDialog==="Save"){ if(typeDialog==="Save"){
data = { data = {
nama:name, nama:name,
keterangan:descripton, keterangan:descripton,
status status
} }
closeDialog('save', data); closeDialog('save', data);
}else{ }else{
data = { data = {
id, id,
nama:name, nama:name,
keterangan:descripton, keterangan:descripton,
status status
} }
closeDialog('edit', data); closeDialog('edit', data);
} }
} }
const handleCancel = () => { const handleCancel = () => {
closeDialog('cancel', 'none') closeDialog('cancel', 'none')
setId(0) setId(0)
setName('') setName('')
setDescription('') setDescription('')
setStatus('') setStatus('')
} }
const renderForm = () => { const renderForm = () => {
return( return(
<Form> <Form>
<FormGroup> <FormGroup>
<Label className="capitalize">Nama Alert</Label> <Label className="capitalize">Nama Alert</Label>
<Input type="text" value={name} onChange={(e)=> setName(e.target.value)} placeholder={`Waspang tidak sesuai target..`}/> <Input type="text" value={name} onChange={(e)=> setName(e.target.value)} placeholder={`Waspang tidak sesuai target..`}/>
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<Label className="capitalize">Keterangan</Label> <Label className="capitalize">Keterangan</Label>
<Input type="text" value={descripton} onChange={(e)=> setDescription(e.target.value)} placeholder={`Rencana vs actual tidak sesuai..`} /> <Input type="text" value={descripton} onChange={(e)=> setDescription(e.target.value)} placeholder={`Rencana vs actual tidak sesuai..`} />
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<Label className="capitalize">Status</Label> <Label className="capitalize">Status</Label>
<Input type="text" value={status} onChange={(e)=> setStatus(e.target.value)} placeholder={`Warning..`} /> <Input type="text" value={status} onChange={(e)=> setStatus(e.target.value)} placeholder={`Warning..`} />
</FormGroup> </FormGroup>
</Form> </Form>
) )
} }
return ( return (
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> <Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog=="Save" ? `Tambah` : "Edit"} Config Alert</ModalHeader> <ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog=="Save" ? `Tambah` : "Edit"} Config Alert</ModalHeader>
<ModalBody> <ModalBody>
{renderForm()} {renderForm()}
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} <Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '}
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button> <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>
</ModalFooter> </ModalFooter>
</Modal> </Modal>
) )
} }
export default DialogForm; export default DialogForm;

344
src/views/Master/ConfigAlert/index.js
Unescape View File

@ -1,172 +1,172 @@
import Bell from '@iconify/icons-ion/notifications-outline'; import Bell from '@iconify/icons-ion/notifications-outline';
import BellOff from '@iconify/icons-ion/notifications-off-outline'; import BellOff from '@iconify/icons-ion/notifications-off-outline';
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
import { CALERTUSER_SEARCH,CONFIGALERT_SEARCH,CALERTUSER_DELETE, CALERTUSER_ADD } from '../../../const/ApiConst.js'; import { CALERTUSER_SEARCH,CONFIGALERT_SEARCH,CALERTUSER_DELETE, CALERTUSER_ADD } from '../../../const/ApiConst.js';
import { Card as ACard,Row, Col, Switch } from 'antd'; import { Card as ACard,Row, Col, Switch } from 'antd';
import { Card, CardBody, CardHeader, Input } from 'reactstrap'; import { Card, CardBody, CardHeader, Input } from 'reactstrap';
import { Icon } from '@iconify/react'; import { Icon } from '@iconify/react';
import { NotificationContainer, NotificationManager } from 'react-notifications'; import { NotificationContainer, NotificationManager } from 'react-notifications';
const token = window.localStorage.getItem('token'); const token = window.localStorage.getItem('token');
const userID = window.localStorage.getItem('user_id'); const userID = window.localStorage.getItem('user_id');
const Index = ({params}) => { const Index = ({params}) => {
const [alertUser, setAlertUser] = useState([]) const [alertUser, setAlertUser] = useState([])
const [checked, setChecked] = useState({}) const [checked, setChecked] = useState({})
const [dataTable, setDatatable] = useState([]) const [dataTable, setDatatable] = useState([])
const [onSetSwitch, setOnSetSwitch] = useState(false) const [onSetSwitch, setOnSetSwitch] = useState(false)
const pageName = params.name; const pageName = params.name;
const config = { const config = {
headers: headers:
{ {
Authorization : `Bearer ${token}`, Authorization : `Bearer ${token}`,
"Content-type" : `application/json` "Content-type" : `application/json`
} }
}; };
useEffect(()=> { useEffect(()=> {
getDataConfigAlert(); getDataConfigAlert();
},[]) },[])
useEffect(() => { useEffect(() => {
getDataConfigAlertUser(); getDataConfigAlertUser();
},[dataTable]) },[dataTable])
const getDataConfigAlert = async () => { const getDataConfigAlert = async () => {
const payload = { const payload = {
"paging": {"start": 0, "length": -1}, "paging": {"start": 0, "length": -1},
"columns": [ "columns": [
{"name": "nama", "logic_operator": "ilike", "value": "", "operator": "AND"} {"name": "nama", "logic_operator": "ilike", "value": "", "operator": "AND"}
], ],
"joins": [], "joins": [],
"orders": {"columns": ["id"], "ascending": false} "orders": {"columns": ["id"], "ascending": false}
} }
const result = await axios const result = await axios
.post(CONFIGALERT_SEARCH, payload, config) .post(CONFIGALERT_SEARCH, payload, config)
.then(res => res) .then(res => res)
.catch((error) => error.response); .catch((error) => error.response);
if(result && result.data && result.data.code == 200){ if(result && result.data && result.data.code == 200){
let resData = result.data.data let resData = result.data.data
let checkedAlert = {} let checkedAlert = {}
resData.map((val, index) => { resData.map((val, index) => {
checkedAlert[val.id] = false checkedAlert[val.id] = false
}); });
setChecked(checkedAlert); setChecked(checkedAlert);
setDatatable(resData); setDatatable(resData);
}else{ }else{
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
} }
} }
const getDataConfigAlertUser = async () => { const getDataConfigAlertUser = async () => {
const payload = { const payload = {
"paging": {"start": 0, "length": -1}, "paging": {"start": 0, "length": -1},
"columns": [ "columns": [
{"name": "user_id", "logic_operator": "=", "value": localStorage.getItem('user_id'), "operator": "AND"} {"name": "user_id", "logic_operator": "=", "value": localStorage.getItem('user_id'), "operator": "AND"}
], ],
"joins": [], "joins": [],
"orders": {"columns": ["id"], "ascending": false} "orders": {"columns": ["id"], "ascending": false}
} }
const result = await axios const result = await axios
.post(CALERTUSER_SEARCH, payload, config) .post(CALERTUSER_SEARCH, payload, config)
.then(res => res) .then(res => res)
.catch((error) => error.response); .catch((error) => error.response);
if(result && result.data && result.data.code == 200){ if(result && result.data && result.data.code == 200){
let resData = result.data.data let resData = result.data.data
let configAlert = []; let configAlert = [];
resData.map((val, index) => { resData.map((val, index) => {
configAlert.push(val.config_alert_id); configAlert.push(val.config_alert_id);
let indexRes = dataTable.findIndex(x => x.id === val.config_alert_id); let indexRes = dataTable.findIndex(x => x.id === val.config_alert_id);
if(indexRes >= 0){ if(indexRes >= 0){
let id = dataTable[indexRes].id; let id = dataTable[indexRes].id;
let tempChecked = checked; let tempChecked = checked;
tempChecked[id] = true; tempChecked[id] = true;
setChecked(tempChecked); setChecked(tempChecked);
} }
}); });
window.localStorage.setItem('userConfigAlert', configAlert.join()); window.localStorage.setItem('userConfigAlert', configAlert.join());
setOnSetSwitch(false) setOnSetSwitch(false)
setAlertUser(result.data.data); setAlertUser(result.data.data);
}else{ }else{
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
} }
} }
const onChange = (checked, id) => { const onChange = (checked, id) => {
setOnSetSwitch(true) setOnSetSwitch(true)
if(checked){ if(checked){
addConfigAlertUser(id); addConfigAlertUser(id);
}else{ }else{
setDeleteConfigAlertUser(id) setDeleteConfigAlertUser(id)
} }
} }
const addConfigAlertUser = async (id) => { const addConfigAlertUser = async (id) => {
const formData = { const formData = {
"user_id":parseInt(localStorage.getItem('user_id')), "user_id":parseInt(localStorage.getItem('user_id')),
"config_alert_id":id "config_alert_id":id
} }
const result = await axios.post(CALERTUSER_ADD, formData, config) const result = await axios.post(CALERTUSER_ADD, formData, config)
.then(res => res) .then(res => res)
.catch((error) => error.response); .catch((error) => error.response);
if(result && result.data && result.data.code===200){ if(result && result.data && result.data.code===200){
getDataConfigAlertUser(); getDataConfigAlertUser();
} }
} }
const setDeleteConfigAlertUser = async (id) => { const setDeleteConfigAlertUser = async (id) => {
let indexCek = alertUser.findIndex(x => x.user_id === parseInt(localStorage.getItem('user_id')) && x.config_alert_id === id); let indexCek = alertUser.findIndex(x => x.user_id === parseInt(localStorage.getItem('user_id')) && x.config_alert_id === id);
if(indexCek >= 0){ if(indexCek >= 0){
let idAlert = alertUser[indexCek].id let idAlert = alertUser[indexCek].id
deleteConfigAlertUser(idAlert) deleteConfigAlertUser(idAlert)
} }
} }
const deleteConfigAlertUser = async (id) => { const deleteConfigAlertUser = async (id) => {
const url = CALERTUSER_DELETE(id) const url = CALERTUSER_DELETE(id)
const result = await axios.delete(url, config) const result = await axios.delete(url, config)
.then(res => res) .then(res => res)
.catch((error) => error.response); .catch((error) => error.response);
if (result && result.data && result.data.code === 200) { if (result && result.data && result.data.code === 200) {
getDataConfigAlert(); getDataConfigAlert();
} }
} }
return ( return (
<div> <div>
<NotificationContainer /> <NotificationContainer />
<Card> <Card>
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
<h4 className="capitalize">{pageName}</h4> <h4 className="capitalize">{pageName}</h4>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Row gutter={16}> <Row gutter={16}>
{dataTable.map((val, index) => ( {dataTable.map((val, index) => (
<Col key={index} md={{span:5,offset:1}} xs={{span:11,offset:1}}> <Col key={index} md={{span:5,offset:1}} xs={{span:11,offset:1}}>
<ACard style={{height:"100%"}} actions={[ <ACard style={{height:"100%"}} actions={[
<Switch checked={checked[val.id] ? true : false} onChange={(checked) => onChange(checked, val.id)} disabled={onSetSwitch} />, <Switch checked={checked[val.id] ? true : false} onChange={(checked) => onChange(checked, val.id)} disabled={onSetSwitch} />,
]}> ]}>
<div style={{height:'100%',width:'100%',display:'flex',justifyContent:'center', alignItems:'center', textAlign:'center', flexDirection:'column'}}> <div style={{height:'100%',width:'100%',display:'flex',justifyContent:'center', alignItems:'center', textAlign:'center', flexDirection:'column'}}>
<i style={{marginBottom:"25px"}}><Icon icon={checked[val.id] ? Bell : BellOff} color="black" width="100" height="100" /></i> <i style={{marginBottom:"25px"}}><Icon icon={checked[val.id] ? Bell : BellOff} color="black" width="100" height="100" /></i>
<p style={{marginBottom:"0"}}>{val.nama}</p> <p style={{marginBottom:"0"}}>{val.nama}</p>
</div> </div>
</ACard> </ACard>
</Col> </Col>
))} ))}
</Row> </Row>
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
) )
} }
export default Index; export default Index;

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

@ -1,459 +1,459 @@
import * as XLSX from 'xlsx'; import * as XLSX from 'xlsx';
import DialogForm from './DialogForm'; import DialogForm from './DialogForm';
import DialogMenuRoles from './DialogMenuRoles'; import DialogMenuRoles from './DialogMenuRoles';
import React, { Component, useMemo } from 'react'; import React, { Component, useMemo } 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 { Pagination, Tooltip, Table } from 'antd'; 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 { ROLE_ADD, ROLE_SEARCH, ROLE_EDIT, ROLE_DELETE, ROLEMENU_ADD, ROLEMENU_SEARCH, ROLEMENU_DELETE_ROLE } from '../../../const/ApiConst.js';
import { withTranslation } from 'react-i18next'; import { withTranslation } from 'react-i18next';
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 momentFormat = 'HH:mm'; const momentFormat = 'HH:mm';
const LENGTH_DATA = 10 const LENGTH_DATA = 10
class index extends Component { 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 = [ this.columns = [
{ {
title: this.props.t('action'), title: this.props.t('action'),
dataIndex: '', dataIndex: '',
key: 'x', key: 'x',
className: 'nowrap', className: 'nowrap',
render: (text, record) => <> render: (text, record) => <>
<Tooltip title={this.props.t('menuRoles')}> <Tooltip title={this.props.t('menuRoles')}>
<i className="cil-menu" style={{ color: 'green', marginRight: 10, cursor: "pointer" }} onClick={() => this.handleMenuRoles(text.id)}></i> <i className="cil-menu" style={{ color: 'green', marginRight: 10, cursor: "pointer" }} onClick={() => this.handleMenuRoles(text.id)}></i>
</Tooltip> </Tooltip>
<Tooltip title={this.props.t('delete')}> <Tooltip title={this.props.t('delete')}>
<i className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => this.handleDelete(text.id)}></i> <i className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => this.handleDelete(text.id)}></i>
</Tooltip> </Tooltip>
<Tooltip title={this.props.t('edit')}> <Tooltip title={this.props.t('edit')}>
<i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(text)}></i> <i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(text)}></i>
</Tooltip> </Tooltip>
</>, </>,
}, },
{ title: this.props.t('nameRole'), dataIndex: 'name', key: 'name', className: "nowrap" }, { title: this.props.t('nameRole'), dataIndex: 'name', key: 'name', className: "nowrap" },
{ title: this.props.t('description'), dataIndex: 'description', key: 'description' }, { title: this.props.t('description'), dataIndex: 'description', key: 'description' },
] ]
} }
async componentDidMount() { async componentDidMount() {
this.getDataRoles(); this.getDataRoles();
} }
async componentDidUpdate(prevProps, prevState) { async componentDidUpdate(prevProps, prevState) {
const { search } = this.state const { search } = this.state
if (search !== prevState.search) this.getDataRoles() if (search !== prevState.search) this.getDataRoles()
if (prevProps.dataExport !== this.props.dataExport && this.props.dataExport.length > 0) { if (prevProps.dataExport !== this.props.dataExport && this.props.dataExport.length > 0) {
this.handleExportExcel(); this.handleExportExcel();
} }
} }
handleSearch = e => { handleSearch = e => {
const value = e.target.value const value = e.target.value
this.setState({ search: value, currentPage: 1 }) this.setState({ search: value, currentPage: 1 })
}; };
getDataRoles = async () => { getDataRoles = async () => {
let start = 0; let start = 0;
if (this.state.currentPage !== 1 && this.state.currentPage > 1) { if (this.state.currentPage !== 1 && this.state.currentPage > 1) {
start = (this.state.currentPage * this.state.rowsPerPage) - this.state.rowsPerPage start = (this.state.currentPage * this.state.rowsPerPage) - this.state.rowsPerPage
} }
const formData = { const formData = {
"paging": { "start": start, "length": this.state.rowsPerPage }, "paging": { "start": start, "length": this.state.rowsPerPage },
"columns": [ "columns": [
{ "name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND" } { "name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND" }
], ],
"joins": [], "joins": [],
"orders": { "columns": ["id"], "ascending": false } "orders": { "columns": ["id"], "ascending": false }
} }
const result = await axios const result = await axios
.post(ROLE_SEARCH, formData, config) .post(ROLE_SEARCH, formData, config)
.then(res => res) .then(res => res)
.catch((error) => error.response); .catch((error) => error.response);
if (result && result.data && result.data.code == 200) { if (result && result.data && result.data.code == 200) {
this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord }); this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord });
} else { } else {
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
} }
} }
handleOpenDialog = (type) => { handleOpenDialog = (type) => {
this.setState({ openDialog: true, typeDialog: type }) this.setState({ openDialog: true, typeDialog: type })
this.showChildDialog(); this.showChildDialog();
} }
handleCloseDialog = (type, data) => { handleCloseDialog = (type, data) => {
if (type === "save") { if (type === "save") {
this.saveRole(data); this.saveRole(data);
} else if (type === "edit") { } else if (type === "edit") {
this.editRole(data); this.editRole(data);
} }
this.setState({ openDialog: false }) this.setState({ openDialog: false })
} }
handleOpenDialogMr = () => { handleOpenDialogMr = () => {
this.setState({ dialogMenuForm: true }) this.setState({ dialogMenuForm: true })
this.showMenuRolesDialog(); this.showMenuRolesDialog();
} }
handleCloseDialogMr = (type, data) => { handleCloseDialogMr = (type, data) => {
if (type === "save") { if (type === "save") {
this.saveMenuRoles(data) this.saveMenuRoles(data)
} }
this.setState({ dialogMenuForm: false }) this.setState({ dialogMenuForm: false })
} }
toggleAddDialog = () => { toggleAddDialog = () => {
this.setState({ openDialog: !this.state.openDialog }) this.setState({ openDialog: !this.state.openDialog })
} }
onConfirmDelete = async () => { onConfirmDelete = async () => {
const { idDelete } = this.state const { idDelete } = this.state
const url = ROLE_DELETE(idDelete) const url = ROLE_DELETE(idDelete)
const result = await axios.delete(url, config) const result = await axios.delete(url, config)
.then(res => res) .then(res => res)
.catch((error) => error.response); .catch((error) => error.response);
if (result && result.data && result.data.code === 200) { if (result && result.data && result.data.code === 200) {
this.deleteCurrentRoleMenu(idDelete) this.deleteCurrentRoleMenu(idDelete)
this.getDataRoles() this.getDataRoles()
this.setState({ idDelete: 0, alertDelete: false }) this.setState({ idDelete: 0, alertDelete: false })
NotificationManager.success(`Data role berhasil dihapus`, 'Success!!'); NotificationManager.success(`Data role berhasil dihapus`, 'Success!!');
} else { } else {
this.setState({ idDelete: 0, alertDelete: false }) this.setState({ idDelete: 0, alertDelete: false })
NotificationManager.error(`Data role gagal dihapus`, 'Failed!!'); NotificationManager.error(`Data role gagal dihapus`, 'Failed!!');
} }
} }
saveRole = async (data) => { saveRole = async (data) => {
const formData = { const formData = {
name: data.name, name: data.name,
description: data.description description: data.description
} }
const result = await axios.post(ROLE_ADD, formData, config) const result = await axios.post(ROLE_ADD, formData, config)
.then(res => res) .then(res => res)
.catch((error) => error.response); .catch((error) => error.response);
if (result && result.data && result.data.code === 200) { if (result && result.data && result.data.code === 200) {
this.getDataRoles(); this.getDataRoles();
NotificationManager.success(`Data role berhasil ditambah`, 'Success!!'); NotificationManager.success(`Data role berhasil ditambah`, 'Success!!');
} else { } else {
NotificationManager.error(`${result.data.message}`, 'Failed!!'); NotificationManager.error(`${result.data.message}`, 'Failed!!');
} }
} }
editRole = async (data) => { editRole = async (data) => {
const formData = { const formData = {
name: data.name, name: data.name,
description: data.description description: data.description
} }
const url = ROLE_EDIT(data.id) const url = ROLE_EDIT(data.id)
const result = await axios.put(url, formData, config) const result = await axios.put(url, formData, config)
.then(res => res) .then(res => res)
.catch((error) => error.response); .catch((error) => error.response);
if (result && result.data && result.data.code === 200) { if (result && result.data && result.data.code === 200) {
this.getDataRoles(); this.getDataRoles();
NotificationManager.success(`Data role berhasil diedit`, 'Success!!'); NotificationManager.success(`Data role berhasil diedit`, 'Success!!');
} else { } else {
NotificationManager.error(`Data role gagal di edit`, `Failed!!`); NotificationManager.error(`Data role gagal di edit`, `Failed!!`);
} }
} }
handleEdit = (data) => { handleEdit = (data) => {
this.setState({ dataEdit: data }); this.setState({ dataEdit: data });
this.handleOpenDialog('Edit'); this.handleOpenDialog('Edit');
} }
handleDelete = (id) => { handleDelete = (id) => {
id == '1' ? this.setState({ alertNotDelete: true }) : id == '1' ? this.setState({ alertNotDelete: true }) :
this.setState({ alertDelete: true, idDelete: id }); this.setState({ alertDelete: true, idDelete: id });
} }
onShowSizeChange = (current, pageSize) => { onShowSizeChange = (current, pageSize) => {
this.setState({ rowsPerPage: pageSize }, () => { this.setState({ rowsPerPage: pageSize }, () => {
this.getDataRoles(); this.getDataRoles();
}) })
} }
onPagination = (current, pageSize) => { onPagination = (current, pageSize) => {
this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => { this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => {
this.getDataRoles(); this.getDataRoles();
}) })
} }
toggle = (param) => { toggle = (param) => {
if (param === "edit") { if (param === "edit") {
this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit })) this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit }))
} else if (param === "delete") { } else if (param === "delete") {
this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete })) this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete }))
} else if (param === "menu") { } else if (param === "menu") {
this.setState(prevState => ({ tooltipMenu: !prevState.tooltipMenu })) this.setState(prevState => ({ tooltipMenu: !prevState.tooltipMenu }))
} else if (param === "tambah") { } else if (param === "tambah") {
this.setState(prevState => ({ tooltipTambah: !prevState.tooltipTambah })) this.setState(prevState => ({ tooltipTambah: !prevState.tooltipTambah }))
} else if (param === "export") { } else if (param === "export") {
this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport })) this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport }))
} }
} }
dataNotAvailable = () => { dataNotAvailable = () => {
if (this.state.dataTable.length === 0) { if (this.state.dataTable.length === 0) {
return ( return (
<tr> <tr>
<td align="center" colSpan="3">{this.props.t('noData')}</td> <td align="center" colSpan="3">{this.props.t('noData')}</td>
</tr> </tr>
) )
} }
} }
handleMenuRoles = async (id) => { handleMenuRoles = async (id) => {
const formData = { const formData = {
"paging": { "start": 0, "length": -1 }, "paging": { "start": 0, "length": -1 },
"columns": [ "columns": [
{ "name": "role_id", "logic_operator": "=", "value": `${id}`, "operator": "AND" } { "name": "role_id", "logic_operator": "=", "value": `${id}`, "operator": "AND" }
], ],
"joins": [], "joins": [],
"orders": { "columns": ["id"], "ascending": false } "orders": { "columns": ["id"], "ascending": false }
} }
const result = await axios const result = await axios
.post(ROLEMENU_SEARCH, formData, config) .post(ROLEMENU_SEARCH, formData, config)
.then(res => res) .then(res => res)
.catch((error) => error.response); .catch((error) => error.response);
if (result && result.data && result.data.code == 200) { if (result && result.data && result.data.code == 200) {
this.setState({ menuRoles: result.data.data, idRoles: id }, () => { this.setState({ menuRoles: result.data.data, idRoles: id }, () => {
this.handleOpenDialogMr(); this.handleOpenDialogMr();
}); });
} else { } else {
} }
} }
saveMenuRoles = async (dataArray) => { saveMenuRoles = async (dataArray) => {
let payloadArray = dataArray || [] let payloadArray = dataArray || []
if (payloadArray.length > 0) { if (payloadArray.length > 0) {
await this.deleteCurrentRoleMenu(payloadArray[0].roles_id) await this.deleteCurrentRoleMenu(payloadArray[0].roles_id)
} }
let promises = [] let promises = []
let result = [] let result = []
dataArray.map((val, index) => { dataArray.map((val, index) => {
if (val.checked === true) { if (val.checked === true) {
const formData = { const formData = {
menu_id: val.menu_id, menu_id: val.menu_id,
role_id: val.roles_id role_id: val.roles_id
} }
promises.push(axios.post(ROLEMENU_ADD, formData, config) promises.push(axios.post(ROLEMENU_ADD, formData, config)
.then(res => result.push(res))) .then(res => result.push(res)))
} }
}) })
await Promise.all(promises); await Promise.all(promises);
if (result) { if (result) {
if (result.length > 0) { if (result.length > 0) {
if (result[0].data.code === 200) { if (result[0].data.code === 200) {
this.getDataRoles(); this.getDataRoles();
NotificationManager.success('Data roles berhasil ditambahkan!!', 'Success!!'); NotificationManager.success('Data roles berhasil ditambahkan!!', 'Success!!');
} else { } else {
NotificationManager.error(`${result[0].data.message}`, 'Failed!!'); NotificationManager.error(`${result[0].data.message}`, 'Failed!!');
} }
} }
} }
} }
deleteCurrentRoleMenu = async (id) => { deleteCurrentRoleMenu = async (id) => {
let urlDel = ROLEMENU_DELETE_ROLE(id) let urlDel = ROLEMENU_DELETE_ROLE(id)
const result = await axios.delete(urlDel, config) const result = await axios.delete(urlDel, config)
.then(res => res) .then(res => res)
.catch((error) => error.response); .catch((error) => error.response);
if (result && result.data && result.data.code === 200) { if (result && result.data && result.data.code === 200) {
return true return true
} else { } else {
return false return false
} }
} }
handleExportExcel = async () => { handleExportExcel = async () => {
let start = 0; let start = 0;
let end = "ALL"; let end = "ALL";
const formData = { const formData = {
"paging": { "start": start, "length": this.state.rowsPerPage }, "paging": { "start": start, "length": this.state.rowsPerPage },
"columns": [ "columns": [
{ "name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND" } { "name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND" }
], ],
"joins": [], "joins": [],
"orders": { "columns": ["id"], "ascending": false } "orders": { "columns": ["id"], "ascending": false }
} }
const result = await axios const result = await axios
.post(ROLE_SEARCH, formData, config) .post(ROLE_SEARCH, formData, config)
.then(res => res) .then(res => res)
.catch((error) => error.response); .catch((error) => error.response);
if (result && result.data && result.statusText == "OK") { if (result && result.data && result.statusText == "OK") {
const dataRes = result.data.data || []; const dataRes = result.data.data || [];
const dataExport = []; const dataExport = [];
dataRes.map((val, index) => { dataRes.map((val, index) => {
let row = { let row = {
Nama: val.name, Nama: val.name,
Deskripsi: val.description Deskripsi: val.description
} }
dataExport.push(row); dataExport.push(row);
}) })
this.setState({ dataExport: dataExport }, () => { this.setState({ dataExport: dataExport }, () => {
this.exportExcel(); this.exportExcel();
}); });
} else { } else {
NotificationManager.error('Failed retreiving data!!', 'Failed'); NotificationManager.error('Failed retreiving data!!', 'Failed');
} }
} }
exportExcel = () => { exportExcel = () => {
const dataExcel = this.state.dataExport || []; const dataExcel = this.state.dataExport || [];
const fileName = "Data Roles.xlsx"; const fileName = "Data Roles.xlsx";
const ws = XLSX.utils.json_to_sheet(dataExcel); const ws = XLSX.utils.json_to_sheet(dataExcel);
const wb = XLSX.utils.book_new(); const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Data Roles'); XLSX.utils.book_append_sheet(wb, ws, 'Data Roles');
XLSX.writeFile(wb, fileName); XLSX.writeFile(wb, fileName);
} }
render() { render() {
const { t } = this.props; const { t } = this.props;
const { tooltipTambah, tooltipExport, dialogMenuForm, dataTable, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipEdit, tooltipDelete, tooltipMenu } = this.state const { tooltipTambah, tooltipExport, dialogMenuForm, dataTable, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipEdit, tooltipDelete, tooltipMenu } = this.state
let noSeq = 0; let noSeq = 0;
return ( return (
<div> <div>
<NotificationContainer /> <NotificationContainer />
<SweetAlert <SweetAlert
show={this.state.alertDelete} show={this.state.alertDelete}
warning warning
showCancel showCancel
confirmBtnText="Delete" confirmBtnText="Delete"
confirmBtnBsStyle="danger" confirmBtnBsStyle="danger"
title={this.props.t('deleteConfirm')} title={this.props.t('deleteConfirm')}
onConfirm={this.onConfirmDelete} onConfirm={this.onConfirmDelete}
onCancel={() => this.setState({ alertDelete: false, idDelete: 0 })} onCancel={() => this.setState({ alertDelete: false, idDelete: 0 })}
focusCancelBtn focusCancelBtn
> >
{this.props.t('deleteMsg')} {this.props.t('deleteMsg')}
</SweetAlert> </SweetAlert>
<SweetAlert <SweetAlert
show={this.state.alertNotDelete} show={this.state.alertNotDelete}
warning warning
confirmBtnText="Can't Delete" confirmBtnText="Can't Delete"
confirmBtnBsStyle="danger" confirmBtnBsStyle="danger"
title="Data can't be delete!" title="Data can't be delete!"
onConfirm={() => this.setState({ alertNotDelete: false })} onConfirm={() => this.setState({ alertNotDelete: false })}
> >
Data tipe roles tidak dapat di hapus!! Data tipe roles tidak dapat di hapus!!
</SweetAlert> </SweetAlert>
<DialogForm <DialogForm
openDialog={openDialog} openDialog={openDialog}
closeDialog={this.handleCloseDialog} closeDialog={this.handleCloseDialog}
toggleDialog={() => this.toggleAddDialog} toggleDialog={() => this.toggleAddDialog}
typeDialog={this.state.typeDialog} typeDialog={this.state.typeDialog}
dataEdit={this.state.dataEdit} dataEdit={this.state.dataEdit}
showDialog={showDialog => this.showChildDialog = showDialog} showDialog={showDialog => this.showChildDialog = showDialog}
dataHs={this.state.dataIdHo} dataHs={this.state.dataIdHo}
/> />
<DialogMenuRoles <DialogMenuRoles
openDialog={dialogMenuForm} openDialog={dialogMenuForm}
closeDialog={this.handleCloseDialogMr} closeDialog={this.handleCloseDialogMr}
idRoles={this.state.idRoles} idRoles={this.state.idRoles}
showDialog={showDialog => this.showMenuRolesDialog = showDialog} showDialog={showDialog => this.showMenuRolesDialog = showDialog}
menuRoles={this.state.menuRoles} menuRoles={this.state.menuRoles}
/> />
<Card> <Card>
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
<h4>{this.props.params.name}</h4> <h4>{this.props.params.name}</h4>
<Row> <Row>
<Col> <Col>
<Input onChange={this.handleSearch} value={search} type="text" name="search" id="search" placeholder={this.props.t('searchRoles')} /> <Input onChange={this.handleSearch} value={search} type="text" name="search" id="search" placeholder={this.props.t('searchRoles')} />
</Col> </Col>
<Col> <Col>
<Tooltip title={this.props.t('rolesAdd')}> <Tooltip title={this.props.t('rolesAdd')}>
<Button id="TooltipTambah" color="success" onClick={() => this.handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button> <Button id="TooltipTambah" color="success" onClick={() => this.handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
</Tooltip> </Tooltip>
<Tooltip title={this.props.t('exportExcel')}> <Tooltip title={this.props.t('exportExcel')}>
<Button style={{ marginLeft: "5px" }} id="TooltipExport" color="primary" onClick={() => this.handleExportExcel()}><i className="fa fa-print"></i></Button> <Button style={{ marginLeft: "5px" }} id="TooltipExport" color="primary" onClick={() => this.handleExportExcel()}><i className="fa fa-print"></i></Button>
</Tooltip> </Tooltip>
</Col> </Col>
</Row> </Row>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Table <Table
rowKey="id" rowKey="id"
size="small" size="small"
columns={this.columns} columns={this.columns}
dataSource={dataTable} dataSource={dataTable}
pagination={false} pagination={false}
bordered={false} bordered={false}
/> />
<Pagination <Pagination
style={{ marginTop: "25px" }} style={{ marginTop: "25px" }}
showSizeChanger showSizeChanger
onShowSizeChange={this.onShowSizeChange} onShowSizeChange={this.onShowSizeChange}
onChange={this.onPagination} onChange={this.onPagination}
defaultCurrent={currentPage} defaultCurrent={currentPage}
pageSize={rowsPerPage} pageSize={rowsPerPage}
total={totalPage} total={totalPage}
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]} pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]}
/> />
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
) )
} }
} }
export default withTranslation()(index); export default withTranslation()(index);

Write Preview
Loading…
Cancel
Save