Muhammad Sulaiman Yusuf
3 years ago
16 changed files with 2257 additions and 3095 deletions
@ -1,194 +1,172 @@
|
||||
import Bell from '@iconify/icons-ion/notifications-outline'; |
||||
import BellOff from '@iconify/icons-ion/notifications-off-outline'; |
||||
import React, { useState, useEffect } from 'react'; |
||||
import { Card, CardBody, CardHeader, Input } from 'reactstrap'; |
||||
import axios from 'axios'; |
||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||
import { Card as ACard,Row, Col, Switch } from 'antd'; |
||||
import { CALERTUSER_SEARCH,CONFIGALERT_SEARCH,CALERTUSER_DELETE, CALERTUSER_ADD } from '../../../const/ApiConst.js'; |
||||
import { Card as ACard,Row, Col, Switch } from 'antd'; |
||||
import { Card, CardBody, CardHeader, Input } from 'reactstrap'; |
||||
import { Icon } from '@iconify/react'; |
||||
import Bell from '@iconify/icons-ion/notifications-outline'; |
||||
import BellOff from '@iconify/icons-ion/notifications-off-outline'; |
||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||
|
||||
const token = window.localStorage.getItem('token'); |
||||
const userID = window.localStorage.getItem('user_id'); |
||||
|
||||
const Index = ({params}) => { |
||||
const [dataTable, setDatatable] = useState([]) |
||||
const [alertUser, setAlertUser] = useState([]) |
||||
const [checked, setChecked] = useState({}) |
||||
const [onSetSwitch, setOnSetSwitch] = useState(false) |
||||
const pageName = params.name; |
||||
|
||||
const config = { |
||||
headers:
|
||||
{
|
||||
Authorization : `Bearer ${token}`, |
||||
"Content-type" : `application/json` |
||||
} |
||||
}; |
||||
|
||||
|
||||
useEffect(()=> { |
||||
getDataConfigAlert(); |
||||
// getDataConfigAlertUser();
|
||||
},[]) |
||||
|
||||
useEffect(() => { |
||||
getDataConfigAlertUser(); |
||||
},[dataTable]) |
||||
|
||||
|
||||
|
||||
const getDataConfigAlert = async () => { |
||||
const payload = { |
||||
"paging": {"start": 0, "length": -1}, |
||||
"columns": [ |
||||
{"name": "nama", "logic_operator": "like", "value": "", "operator": "AND"} |
||||
], |
||||
"joins": [], |
||||
"orders": {"columns": ["id"], "ascending": false} |
||||
} |
||||
|
||||
|
||||
|
||||
const result = await axios |
||||
.post(CONFIGALERT_SEARCH, payload, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
// console.log(result)
|
||||
|
||||
if(result && result.data && result.data.code == 200){ |
||||
let resData = result.data.data |
||||
let checkedAlert = {} |
||||
resData.map((val, index) => { |
||||
checkedAlert[val.id] = false |
||||
}); |
||||
setChecked(checkedAlert); |
||||
setDatatable(resData); |
||||
// getDataConfigAlertUser();
|
||||
}else{ |
||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
const getDataConfigAlertUser = async () => { |
||||
const payload = { |
||||
"paging": {"start": 0, "length": -1}, |
||||
"columns": [ |
||||
{"name": "user_id", "logic_operator": "=", "value": localStorage.getItem('user_id'), "operator": "AND"} |
||||
], |
||||
"joins": [], |
||||
"orders": {"columns": ["id"], "ascending": false} |
||||
} |
||||
|
||||
const result = await axios |
||||
.post(CALERTUSER_SEARCH, payload, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
|
||||
|
||||
if(result && result.data && result.data.code == 200){ |
||||
let resData = result.data.data |
||||
// console.log("resData", resData)
|
||||
// console.log("dataTable", dataTable)
|
||||
let configAlert = []; |
||||
resData.map((val, index) => { |
||||
configAlert.push(val.config_alert_id); |
||||
let indexRes = dataTable.findIndex(x => x.id === val.config_alert_id); |
||||
// console.log("indexRes", indexRes)
|
||||
if(indexRes >= 0){ |
||||
let id = dataTable[indexRes].id; |
||||
let tempChecked = checked; |
||||
tempChecked[id] = true; |
||||
// console.log("tempChecked", tempChecked)
|
||||
setChecked(tempChecked); |
||||
} |
||||
}); |
||||
window.localStorage.setItem('userConfigAlert', configAlert.join()); |
||||
console.log("configAlert.join()", configAlert.join()) |
||||
setOnSetSwitch(false) |
||||
setAlertUser(result.data.data); |
||||
}else{ |
||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
const onChange = (checked, id) => { |
||||
setOnSetSwitch(true) |
||||
// console.log(`switch to ${checked} ${id}`);
|
||||
if(checked){ |
||||
addConfigAlertUser(id); |
||||
}else{ |
||||
setDeleteConfigAlertUser(id) |
||||
} |
||||
} |
||||
|
||||
const addConfigAlertUser = async (id) => { |
||||
const formData = { |
||||
"user_id":parseInt(localStorage.getItem('user_id')), |
||||
"config_alert_id":id |
||||
} |
||||
|
||||
const result = await axios.post(CALERTUSER_ADD, formData, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if(result && result.data && result.data.code===200){ |
||||
getDataConfigAlertUser(); |
||||
// NotificationManager.success(`Data menu berhasil ditambah`, 'Success!!');
|
||||
} |
||||
} |
||||
|
||||
const setDeleteConfigAlertUser = async (id) => { |
||||
let indexCek = alertUser.findIndex(x => x.user_id === parseInt(localStorage.getItem('user_id')) && x.config_alert_id === id); |
||||
// console.log("cekcekckecke", indexCek)
|
||||
if(indexCek >= 0){ |
||||
let idAlert = alertUser[indexCek].id |
||||
// console.log("cek idAlert", idAlert);
|
||||
deleteConfigAlertUser(idAlert) |
||||
} |
||||
} |
||||
|
||||
const deleteConfigAlertUser = async (id) => { |
||||
const url = CALERTUSER_DELETE(id) |
||||
|
||||
const result = await axios.delete(url, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
getDataConfigAlert(); |
||||
} |
||||
} |
||||
|
||||
|
||||
return ( |
||||
<div> |
||||
<NotificationContainer /> |
||||
<Card> |
||||
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
||||
<h4 className="capitalize">{pageName}</h4> |
||||
</CardHeader> |
||||
<CardBody> |
||||
<Row gutter={16}> |
||||
{dataTable.map((val, index) => ( |
||||
<Col key={index} md={{span:5,offset:1}} xs={{span:11,offset:1}}> |
||||
<ACard style={{height:"100%"}} actions={[ |
||||
<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'}}> |
||||
<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> |
||||
</div> |
||||
</ACard> |
||||
</Col> |
||||
))} |
||||
</Row> |
||||
</CardBody> |
||||
</Card> |
||||
</div> |
||||
) |
||||
|
||||
const [alertUser, setAlertUser] = useState([]) |
||||
const [checked, setChecked] = useState({}) |
||||
const [dataTable, setDatatable] = useState([]) |
||||
const [onSetSwitch, setOnSetSwitch] = useState(false) |
||||
const pageName = params.name; |
||||
|
||||
const config = { |
||||
headers: |
||||
{ |
||||
Authorization : `Bearer ${token}`, |
||||
"Content-type" : `application/json` |
||||
} |
||||
}; |
||||
|
||||
useEffect(()=> { |
||||
getDataConfigAlert(); |
||||
},[]) |
||||
|
||||
useEffect(() => { |
||||
getDataConfigAlertUser(); |
||||
},[dataTable]) |
||||
|
||||
const getDataConfigAlert = async () => { |
||||
const payload = { |
||||
"paging": {"start": 0, "length": -1}, |
||||
"columns": [ |
||||
{"name": "nama", "logic_operator": "like", "value": "", "operator": "AND"} |
||||
], |
||||
"joins": [], |
||||
"orders": {"columns": ["id"], "ascending": false} |
||||
} |
||||
|
||||
const result = await axios |
||||
.post(CONFIGALERT_SEARCH, payload, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if(result && result.data && result.data.code == 200){ |
||||
let resData = result.data.data |
||||
let checkedAlert = {} |
||||
resData.map((val, index) => { |
||||
checkedAlert[val.id] = false |
||||
}); |
||||
setChecked(checkedAlert); |
||||
setDatatable(resData); |
||||
}else{ |
||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
const getDataConfigAlertUser = async () => { |
||||
const payload = { |
||||
"paging": {"start": 0, "length": -1}, |
||||
"columns": [ |
||||
{"name": "user_id", "logic_operator": "=", "value": localStorage.getItem('user_id'), "operator": "AND"} |
||||
], |
||||
"joins": [], |
||||
"orders": {"columns": ["id"], "ascending": false} |
||||
} |
||||
|
||||
const result = await axios |
||||
.post(CALERTUSER_SEARCH, payload, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if(result && result.data && result.data.code == 200){ |
||||
let resData = result.data.data |
||||
let configAlert = []; |
||||
resData.map((val, index) => { |
||||
configAlert.push(val.config_alert_id); |
||||
let indexRes = dataTable.findIndex(x => x.id === val.config_alert_id); |
||||
if(indexRes >= 0){ |
||||
let id = dataTable[indexRes].id; |
||||
let tempChecked = checked; |
||||
tempChecked[id] = true; |
||||
setChecked(tempChecked); |
||||
} |
||||
}); |
||||
window.localStorage.setItem('userConfigAlert', configAlert.join()); |
||||
setOnSetSwitch(false) |
||||
setAlertUser(result.data.data); |
||||
}else{ |
||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
const onChange = (checked, id) => { |
||||
setOnSetSwitch(true) |
||||
if(checked){ |
||||
addConfigAlertUser(id); |
||||
}else{ |
||||
setDeleteConfigAlertUser(id) |
||||
} |
||||
} |
||||
|
||||
const addConfigAlertUser = async (id) => { |
||||
const formData = { |
||||
"user_id":parseInt(localStorage.getItem('user_id')), |
||||
"config_alert_id":id |
||||
} |
||||
|
||||
const result = await axios.post(CALERTUSER_ADD, formData, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if(result && result.data && result.data.code===200){ |
||||
getDataConfigAlertUser(); |
||||
} |
||||
} |
||||
|
||||
const setDeleteConfigAlertUser = async (id) => { |
||||
let indexCek = alertUser.findIndex(x => x.user_id === parseInt(localStorage.getItem('user_id')) && x.config_alert_id === id); |
||||
if(indexCek >= 0){ |
||||
let idAlert = alertUser[indexCek].id |
||||
deleteConfigAlertUser(idAlert) |
||||
} |
||||
} |
||||
|
||||
const deleteConfigAlertUser = async (id) => { |
||||
const url = CALERTUSER_DELETE(id) |
||||
const result = await axios.delete(url, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
if (result && result.data && result.data.code === 200) { |
||||
getDataConfigAlert(); |
||||
} |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
<NotificationContainer /> |
||||
<Card> |
||||
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
||||
<h4 className="capitalize">{pageName}</h4> |
||||
</CardHeader> |
||||
<CardBody> |
||||
<Row gutter={16}> |
||||
{dataTable.map((val, index) => ( |
||||
<Col key={index} md={{span:5,offset:1}} xs={{span:11,offset:1}}> |
||||
<ACard style={{height:"100%"}} actions={[ |
||||
<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'}}> |
||||
<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> |
||||
</div> |
||||
</ACard> |
||||
</Col> |
||||
))} |
||||
</Row> |
||||
</CardBody> |
||||
</Card> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default Index; |
||||
export default Index; |
||||
|
||||
@ -1,440 +1,379 @@
|
||||
import React, { Component } from 'react'; |
||||
import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap'; |
||||
import { Button } from 'reactstrap'; |
||||
import axios from 'axios'; |
||||
import * as XLSX from 'xlsx'; |
||||
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||
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 { Pagination, Tooltip, Table } from 'antd'; |
||||
|
||||
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` |
||||
} |
||||
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' }, |
||||
{ |
||||
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" }, |
||||
{ name: "Nama" }, |
||||
{ name: "Deskripsi" }, |
||||
] |
||||
|
||||
const LENGTH_DATA = 10 |
||||
|
||||
export default class index extends Component { |
||||
constructor(props) { |
||||
super(props) |
||||
this.state = { |
||||
dataTable: [], |
||||
openDialog: false, |
||||
dialogMenuForm: false, |
||||
typeDialog: 'Save', |
||||
dataEdit: null, |
||||
alertDelete: false, |
||||
alertNotDelete: false, |
||||
idDelete: 0, |
||||
dataGs: [], |
||||
dataIdHo: [], |
||||
search: "", |
||||
page: 0, |
||||
rowsPerPage: LENGTH_DATA, |
||||
currentPage: 1, |
||||
totalPage: 0, |
||||
tooltipEdit: false, |
||||
tooltipDelete: false, |
||||
tooltipMenu: false, |
||||
idRoles:0, |
||||
menuRoles:[], |
||||
tooltipTambah:false, |
||||
tooltipImport:false, |
||||
tooltipExport:false, |
||||
dataExport:[] |
||||
} |
||||
} |
||||
|
||||
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": "like", "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); |
||||
// console.log(result)
|
||||
|
||||
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": "like", "value": this.state.search, "operator": "AND"} |
||||
], |
||||
"joins": [], |
||||
"orders": {"columns": ["id"], "ascending": false} |
||||
} |
||||
// console.log("test", url);
|
||||
const result = await axios |
||||
.post(PROJECT_ROLE_SEARCH, payload) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
// console.log("result", result);
|
||||
if (result && result.data && result.statusText == "OK") { |
||||
const dataRes = result.data.data|| []; |
||||
console.log("data result", dataRes); |
||||
const dataExport = []; |
||||
// <td>{n.name}</td>
|
||||
// <td>{n.url}</td>
|
||||
// <td>{n.alias_name}</td>
|
||||
// <td>{n.icon}</td>
|
||||
// <td>{n.parent_name || "-"}</td>
|
||||
dataRes.map((val,index)=> { |
||||
let row = { |
||||
Nama:val.name, |
||||
Deskripsi:val.description |
||||
} |
||||
dataExport.push(row); |
||||
}) |
||||
console.log("data Export", dataExport); |
||||
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); |
||||
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": "like", "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": "like", "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 |
||||
// showCancel
|
||||
confirmBtnText="Can't Delete" |
||||
confirmBtnBsStyle="danger" |
||||
title="Data can't be delete!" |
||||
onConfirm={() => this.setState({ alertNotDelete: false})} |
||||
// focusCancelBtn
|
||||
> |
||||
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} |
||||
/> |
||||
{/* <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="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 responsive striped hover> |
||||
<thead> |
||||
<tr> |
||||
<th>Aksi</th> |
||||
{column.map((i, index) => { |
||||
return ( |
||||
<th key={index} scope="row">{i.name}</th> |
||||
) |
||||
})} |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
{this.dataNotAvailable()} |
||||
{dataTable.map((n, index) => { |
||||
return ( |
||||
<tr key={n.id}> |
||||
<td className='nowrap'> |
||||
|
||||
<Tooltip title="Hapus"> |
||||
<i id="TooltipDelete" className="cil-trash fa-lg" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => this.handleDelete(n.id)}></i> |
||||
</Tooltip> |
||||
|
||||
<Tooltip title="Edit"> |
||||
<i id="TooltipEdit" className="cil-pencil fa-lg" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(n)}></i> |
||||
</Tooltip> |
||||
</td> |
||||
<td>{n.name}</td> |
||||
<td>{n.description}</td> |
||||
|
||||
</tr> |
||||
) |
||||
})} |
||||
</tbody> |
||||
</Table> */} |
||||
<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> |
||||
) |
||||
} |
||||
} |
||||
|
||||
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> |
||||
) |
||||
} |
||||
} |
||||
|
||||
@ -1,361 +1,338 @@
|
||||
import React, { useState, useEffect, useMemo } from 'react'; |
||||
import { Card, CardBody, CardHeader, Col, Row, Input, Table } from 'reactstrap'; |
||||
import axios from "../../../const/interceptorApi" |
||||
import * as XLSX from 'xlsx'; |
||||
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||
import DialogForm from './DialogForm'; |
||||
import React, { useState, useEffect, useMemo } from 'react'; |
||||
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||
import axios from "../../../const/interceptorApi" |
||||
import { Card, CardBody, CardHeader, Col, Row, Input, Table } from 'reactstrap'; |
||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||
import { Pagination, Button, Tooltip } from 'antd'; |
||||
import { |
||||
SATUAN_ADD, SATUAN_EDIT, SATUAN_DELETE,SATUAN_SEARCH |
||||
} from '../../../const/ApiConst'; |
||||
import { SATUAN_ADD, SATUAN_EDIT, SATUAN_DELETE,SATUAN_SEARCH} from '../../../const/ApiConst'; |
||||
|
||||
const token = window.localStorage.getItem('token'); |
||||
const config = { |
||||
headers: |
||||
{ |
||||
Authorization: `Bearer ${token}`, |
||||
"Content-type": `application/json` |
||||
} |
||||
headers: |
||||
{ |
||||
Authorization: `Bearer ${token}`, |
||||
"Content-type": `application/json` |
||||
} |
||||
}; |
||||
|
||||
const column = [ |
||||
{ name: "Nama" }, |
||||
{ name: "Deskripsi" }, |
||||
{ name: "Nama" }, |
||||
{ name: "Deskripsi" }, |
||||
] |
||||
|
||||
const Satuan = ({ params }) => { |
||||
const token = localStorage.getItem("token") |
||||
const HEADER = { |
||||
headers: { |
||||
"Content-Type": "application/json", |
||||
"Authorization": `Bearer ${token}` |
||||
} |
||||
} |
||||
const pageName = params.name; |
||||
const [search, setSearch] = useState('') |
||||
const [currentPage, setCurrentPage] = useState(1) |
||||
const [openDialog, setOpenDialog] = useState(false) |
||||
const [typeDialog, setTypeDialog] = useState('Save') |
||||
const [dataExport, setDataExport] = useState([]) |
||||
const [rowsPerPage, setRowsPerPage] = useState(10) |
||||
const [dataEdit, setDataEdit] = useState([]) |
||||
const [alertDelete, setAlertDelete] = useState(false) |
||||
const [idDelete, setIdDelete] = useState(0) |
||||
const [dataTable, setDatatable] = useState([]) |
||||
const [clickOpenModal, setClickOpenModal] = useState(false) |
||||
const [allDataMenu, setAllDataMenu] = useState([]) |
||||
const [totalPage, setTotalPage] = useState(0) |
||||
|
||||
useEffect(() => { |
||||
getDataSatuan() |
||||
}, [currentPage, rowsPerPage, search]) |
||||
|
||||
useEffect(() => { |
||||
const cekData = dataExport || [] |
||||
if (cekData.length > 0) { |
||||
exportExcel() |
||||
} |
||||
}, [dataExport]) |
||||
|
||||
const getDataSatuan = async () => { |
||||
|
||||
let start = 0; |
||||
|
||||
if (currentPage !== 1 && currentPage > 1) { |
||||
start = (currentPage * rowsPerPage) - rowsPerPage |
||||
} |
||||
|
||||
const payload = { |
||||
"columns": [ |
||||
{ |
||||
"name": "name", |
||||
"logic_operator": "like", |
||||
"value": search, |
||||
"operator": "AND" |
||||
} |
||||
], |
||||
"orders": { |
||||
"ascending": true, |
||||
"columns": [ |
||||
'id' |
||||
] |
||||
}, |
||||
"paging": { |
||||
"length": rowsPerPage, |
||||
"start": start |
||||
} |
||||
} |
||||
|
||||
// console.log("payload ", payload)
|
||||
const result = await axios |
||||
.post(SATUAN_SEARCH, payload, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
|
||||
|
||||
if (result && result.data && result.data.code == 200) { |
||||
console.log("get data ", result.data) |
||||
setDatatable(result.data.data); |
||||
setTotalPage(result.data.totalRecord); |
||||
} else { |
||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
const handleSearch = e => { |
||||
const value = e.target.value |
||||
setSearch(value); |
||||
setCurrentPage(1) |
||||
}; |
||||
|
||||
const handleOpenDialog = (type) => { |
||||
setOpenDialog(true) |
||||
setTypeDialog(type) |
||||
} |
||||
|
||||
const handleExportExcel = async () => { |
||||
console.log("cek cek cek cke") |
||||
const payload = { |
||||
"paging": { "start": 0, "length": -1 }, |
||||
"columns": [ |
||||
{ "name": "name", "logic_operator": "like", "value": search, "operator": "AND" } |
||||
], |
||||
"joins": [], |
||||
"orders": { "columns": ["id"], "ascending": false } |
||||
} |
||||
|
||||
|
||||
|
||||
const result = await axios |
||||
.post(SATUAN_SEARCH, payload, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
// console.log(result)
|
||||
|
||||
if (result && result.data && result.data.code == 200) { |
||||
let resData = result.data.data; |
||||
const excelData = []; |
||||
resData.map((val, index) => { |
||||
let dataRow = { |
||||
"Nama": val.name, |
||||
"Deskripsi": val.description, |
||||
} |
||||
excelData.push(dataRow) |
||||
}) |
||||
// console.log("cek excel data", resData)
|
||||
await setDataExport(excelData); |
||||
// exportExcel();
|
||||
} else { |
||||
NotificationManager.error('Gagal Export Data!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
const exportExcel = () => { |
||||
const dataExcel = dataExport || []; |
||||
console.log("cek data excel", dataExcel) |
||||
const fileName = `Data ${pageName}.xlsx`; |
||||
const ws = XLSX.utils.json_to_sheet(dataExcel); |
||||
const wb = XLSX.utils.book_new(); |
||||
XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`); |
||||
XLSX.writeFile(wb, fileName); |
||||
setDataExport([]) |
||||
} |
||||
|
||||
const handleEdit = (data) => { |
||||
setDataEdit(data) |
||||
handleOpenDialog('Edit'); |
||||
} |
||||
|
||||
const handleDelete = async (id) => { |
||||
await setAlertDelete(true) |
||||
await setIdDelete(id) |
||||
} |
||||
|
||||
const handleCloseDialog = (type, data) => { |
||||
if (type === "save") { |
||||
saveSatuan(data); |
||||
} else if (type === "edit") { |
||||
editMaterialR(data); |
||||
} |
||||
setDataEdit([]) |
||||
setOpenDialog(false) |
||||
} |
||||
|
||||
const saveSatuan = async (data) => { |
||||
const formData = data |
||||
const result = await axios.post(SATUAN_ADD, formData, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
getDataSatuan() |
||||
// console.log("data material s ", formData)
|
||||
NotificationManager.success(`Data project type berhasil ditambah`, 'Success!!'); |
||||
} else { |
||||
// console.log("data material fail ", formData)
|
||||
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
||||
} |
||||
} |
||||
|
||||
const editMaterialR = async (data) => { |
||||
|
||||
let urlEdit = SATUAN_EDIT(data.id) |
||||
const formData = data |
||||
|
||||
console.log("from data edit ", formData) |
||||
|
||||
const result = await axios.put(urlEdit, formData, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
getDataSatuan(); |
||||
NotificationManager.success(`Data project type berhasil diedit`, 'Success!!'); |
||||
} else { |
||||
NotificationManager.error(`Data project type gagal di edit`, `Failed!!`); |
||||
} |
||||
} |
||||
|
||||
const toggleAddDialog = () => { |
||||
setOpenDialog(!openDialog) |
||||
} |
||||
|
||||
const onConfirmDelete = async () => { |
||||
let url = SATUAN_DELETE(idDelete); |
||||
|
||||
const result = await axios.delete(url, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
getDataSatuan() |
||||
setIdDelete(0) |
||||
setAlertDelete(false) |
||||
NotificationManager.success(`Data project type berhasil dihapus!`, 'Success!!'); |
||||
} else { |
||||
setIdDelete(0) |
||||
setAlertDelete(false) |
||||
NotificationManager.error(`Data project type gagal dihapus!}`, 'Failed!!'); |
||||
} |
||||
} |
||||
|
||||
const cancelDelete = () => { |
||||
setAlertDelete(false) |
||||
setIdDelete(0) |
||||
} |
||||
|
||||
const onShowSizeChange = (current, pageSize) => { |
||||
setRowsPerPage(pageSize) |
||||
} |
||||
|
||||
const onPagination = (current, pageSize) => { |
||||
setCurrentPage(current) |
||||
} |
||||
|
||||
const dataNotAvailable = () => { |
||||
if (dataTable.length === 0) { |
||||
return ( |
||||
<tr> |
||||
<td align="center" colSpan="3">Tidak ada data project type</td> |
||||
</tr> |
||||
) |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
return ( |
||||
<div> |
||||
<NotificationContainer /> |
||||
<SweetAlert |
||||
show={alertDelete} |
||||
warning |
||||
showCancel |
||||
confirmBtnText="Delete" |
||||
confirmBtnBsStyle="danger" |
||||
title={`Are you sure?`} |
||||
onConfirm={onConfirmDelete} |
||||
onCancel={() => cancelDelete()} |
||||
focusCancelBtn |
||||
> |
||||
Delete this data |
||||
</SweetAlert> |
||||
<DialogForm |
||||
openDialog={openDialog} |
||||
closeDialog={handleCloseDialog} |
||||
toggleDialog={() => toggleAddDialog} |
||||
typeDialog={typeDialog} |
||||
dataEdit={dataEdit} |
||||
clickOpenModal={clickOpenModal} |
||||
dataParent={allDataMenu} |
||||
/> |
||||
<Card> |
||||
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
||||
<h4 className="capitalize">{pageName}</h4> |
||||
<Row> |
||||
<Col> |
||||
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Search divisi...`} /> |
||||
</Col> |
||||
<Col> |
||||
<Tooltip title="Add UOM"> |
||||
<Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button> |
||||
</Tooltip> |
||||
<Tooltip title="Export Excel"> |
||||
<Button style={{marginLeft:"5px"}} color="primary" onClick={()=> handleExportExcel()}><i className="fa fa-print"></i></Button> |
||||
</Tooltip> |
||||
</Col> |
||||
</Row> |
||||
</CardHeader> |
||||
<CardBody> |
||||
<Table responsive striped hover> |
||||
<thead> |
||||
<tr> |
||||
<th>Aksi</th> |
||||
{column.map((i, index) => { |
||||
return ( |
||||
<th key={index} scope="row">{i.name}</th> |
||||
) |
||||
})} |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
{dataNotAvailable()} |
||||
{dataTable.map((n, index) => { |
||||
return ( |
||||
<tr key={n.id}> |
||||
<td className='nowrap'> |
||||
|
||||
<Tooltip title="Hapus"> |
||||
<i id="TooltipDelete" className="cil-trash fa-lg" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => handleDelete(n.id)}></i> |
||||
</Tooltip> |
||||
|
||||
<Tooltip title="Edit"> |
||||
<i id="TooltipEdit" className="cil-pencil fa-lg" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEdit(n)}></i> |
||||
</Tooltip> |
||||
</td> |
||||
<td>{n.name}</td> |
||||
<td>{n.description}</td> |
||||
</tr> |
||||
) |
||||
})} |
||||
</tbody> |
||||
</Table> |
||||
<Pagination |
||||
showSizeChanger |
||||
onShowSizeChange={onShowSizeChange} |
||||
onChange={onPagination} |
||||
defaultCurrent={currentPage} |
||||
pageSize={rowsPerPage} |
||||
total={totalPage} |
||||
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]} |
||||
/> |
||||
</CardBody> |
||||
</Card> |
||||
</div> |
||||
) |
||||
const token = localStorage.getItem("token") |
||||
const HEADER = { |
||||
headers: { |
||||
"Content-Type": "application/json", |
||||
"Authorization": `Bearer ${token}` |
||||
} |
||||
} |
||||
const pageName = params.name; |
||||
|
||||
const [alertDelete, setAlertDelete] = useState(false) |
||||
const [allDataMenu, setAllDataMenu] = useState([]) |
||||
const [clickOpenModal, setClickOpenModal] = useState(false) |
||||
const [currentPage, setCurrentPage] = useState(1) |
||||
const [dataEdit, setDataEdit] = useState([]) |
||||
const [dataExport, setDataExport] = useState([]) |
||||
const [dataTable, setDatatable] = useState([]) |
||||
const [idDelete, setIdDelete] = useState(0) |
||||
const [openDialog, setOpenDialog] = useState(false) |
||||
const [rowsPerPage, setRowsPerPage] = useState(10) |
||||
const [search, setSearch] = useState('') |
||||
const [totalPage, setTotalPage] = useState(0) |
||||
const [typeDialog, setTypeDialog] = useState('Save') |
||||
|
||||
useEffect(() => { |
||||
getDataSatuan() |
||||
}, [currentPage, rowsPerPage, search]) |
||||
|
||||
useEffect(() => { |
||||
const cekData = dataExport || [] |
||||
if (cekData.length > 0) { |
||||
exportExcel() |
||||
} |
||||
}, [dataExport]) |
||||
|
||||
const getDataSatuan = async () => { |
||||
|
||||
let start = 0; |
||||
|
||||
if (currentPage !== 1 && currentPage > 1) { |
||||
start = (currentPage * rowsPerPage) - rowsPerPage |
||||
} |
||||
|
||||
const payload = { |
||||
"columns": [ |
||||
{ |
||||
"name": "name", |
||||
"logic_operator": "like", |
||||
"value": search, |
||||
"operator": "AND" |
||||
} |
||||
], |
||||
"orders": { |
||||
"ascending": true, |
||||
"columns": [ |
||||
'id' |
||||
] |
||||
}, |
||||
"paging": { |
||||
"length": rowsPerPage, |
||||
"start": start |
||||
} |
||||
} |
||||
|
||||
const result = await axios |
||||
.post(SATUAN_SEARCH, payload, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
if (result && result.data && result.data.code == 200) { |
||||
setDatatable(result.data.data); |
||||
setTotalPage(result.data.totalRecord); |
||||
} else { |
||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
const handleSearch = e => { |
||||
const value = e.target.value |
||||
setSearch(value); |
||||
setCurrentPage(1) |
||||
}; |
||||
|
||||
const handleOpenDialog = (type) => { |
||||
setOpenDialog(true) |
||||
setTypeDialog(type) |
||||
} |
||||
|
||||
const handleExportExcel = async () => { |
||||
const payload = { |
||||
"paging": { "start": 0, "length": -1 }, |
||||
"columns": [ |
||||
{ "name": "name", "logic_operator": "like", "value": search, "operator": "AND" } |
||||
], |
||||
"joins": [], |
||||
"orders": { "columns": ["id"], "ascending": false } |
||||
} |
||||
const result = await axios |
||||
.post(SATUAN_SEARCH, payload, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
if (result && result.data && result.data.code == 200) { |
||||
let resData = result.data.data; |
||||
const excelData = []; |
||||
resData.map((val, index) => { |
||||
let dataRow = { |
||||
"Nama": val.name, |
||||
"Deskripsi": val.description, |
||||
} |
||||
excelData.push(dataRow) |
||||
}) |
||||
await setDataExport(excelData); |
||||
} else { |
||||
NotificationManager.error('Gagal Export Data!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
const exportExcel = () => { |
||||
const dataExcel = dataExport || []; |
||||
const fileName = `Data ${pageName}.xlsx`; |
||||
const ws = XLSX.utils.json_to_sheet(dataExcel); |
||||
const wb = XLSX.utils.book_new(); |
||||
XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`); |
||||
XLSX.writeFile(wb, fileName); |
||||
setDataExport([]) |
||||
} |
||||
|
||||
const handleEdit = (data) => { |
||||
setDataEdit(data) |
||||
handleOpenDialog('Edit'); |
||||
} |
||||
|
||||
const handleDelete = async (id) => { |
||||
await setAlertDelete(true) |
||||
await setIdDelete(id) |
||||
} |
||||
|
||||
const handleCloseDialog = (type, data) => { |
||||
if (type === "save") { |
||||
saveSatuan(data); |
||||
} else if (type === "edit") { |
||||
editMaterialR(data); |
||||
} |
||||
setDataEdit([]) |
||||
setOpenDialog(false) |
||||
} |
||||
|
||||
const saveSatuan = async (data) => { |
||||
const formData = data |
||||
const result = await axios.post(SATUAN_ADD, formData, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
getDataSatuan() |
||||
NotificationManager.success(`Data project type berhasil ditambah`, 'Success!!'); |
||||
} else { |
||||
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
||||
} |
||||
} |
||||
|
||||
const editMaterialR = async (data) => { |
||||
let urlEdit = SATUAN_EDIT(data.id) |
||||
const formData = data |
||||
|
||||
const result = await axios.put(urlEdit, formData, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
getDataSatuan(); |
||||
NotificationManager.success(`Data project type berhasil diedit`, 'Success!!'); |
||||
} else { |
||||
NotificationManager.error(`Data project type gagal di edit`, `Failed!!`); |
||||
} |
||||
} |
||||
|
||||
const toggleAddDialog = () => { |
||||
setOpenDialog(!openDialog) |
||||
} |
||||
|
||||
const onConfirmDelete = async () => { |
||||
let url = SATUAN_DELETE(idDelete); |
||||
|
||||
const result = await axios.delete(url, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
getDataSatuan() |
||||
setIdDelete(0) |
||||
setAlertDelete(false) |
||||
NotificationManager.success(`Data project type berhasil dihapus!`, 'Success!!'); |
||||
} else { |
||||
setIdDelete(0) |
||||
setAlertDelete(false) |
||||
NotificationManager.error(`Data project type gagal dihapus!}`, 'Failed!!'); |
||||
} |
||||
} |
||||
|
||||
const cancelDelete = () => { |
||||
setAlertDelete(false) |
||||
setIdDelete(0) |
||||
} |
||||
|
||||
const onShowSizeChange = (current, pageSize) => { |
||||
setRowsPerPage(pageSize) |
||||
} |
||||
|
||||
const onPagination = (current, pageSize) => { |
||||
setCurrentPage(current) |
||||
} |
||||
|
||||
const dataNotAvailable = () => { |
||||
if (dataTable.length === 0) { |
||||
return ( |
||||
<tr> |
||||
<td align="center" colSpan="3">Tidak ada data project type</td> |
||||
</tr> |
||||
) |
||||
} |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
<NotificationContainer /> |
||||
<SweetAlert |
||||
show={alertDelete} |
||||
warning |
||||
showCancel |
||||
confirmBtnText="Delete" |
||||
confirmBtnBsStyle="danger" |
||||
title={`Are you sure?`} |
||||
onConfirm={onConfirmDelete} |
||||
onCancel={() => cancelDelete()} |
||||
focusCancelBtn |
||||
> |
||||
Delete this data |
||||
</SweetAlert> |
||||
<DialogForm |
||||
openDialog={openDialog} |
||||
closeDialog={handleCloseDialog} |
||||
toggleDialog={() => toggleAddDialog} |
||||
typeDialog={typeDialog} |
||||
dataEdit={dataEdit} |
||||
clickOpenModal={clickOpenModal} |
||||
dataParent={allDataMenu} |
||||
/> |
||||
<Card> |
||||
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
||||
<h4 className="capitalize">{pageName}</h4> |
||||
<Row> |
||||
<Col> |
||||
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Search divisi...`} /> |
||||
</Col> |
||||
<Col> |
||||
<Tooltip title="Add UOM"> |
||||
<Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button> |
||||
</Tooltip> |
||||
<Tooltip title="Export Excel"> |
||||
<Button style={{marginLeft:"5px"}} color="primary" onClick={()=> handleExportExcel()}><i className="fa fa-print"></i></Button> |
||||
</Tooltip> |
||||
</Col> |
||||
</Row> |
||||
</CardHeader> |
||||
<CardBody> |
||||
<Table responsive striped hover> |
||||
<thead> |
||||
<tr> |
||||
<th>Aksi</th> |
||||
{column.map((i, index) => { |
||||
return ( |
||||
<th key={index} scope="row">{i.name}</th> |
||||
) |
||||
})} |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
{dataNotAvailable()} |
||||
{dataTable.map((n, index) => { |
||||
return ( |
||||
<tr key={n.id}> |
||||
<td className='nowrap'> |
||||
|
||||
<Tooltip title="Hapus"> |
||||
<i id="TooltipDelete" className="cil-trash fa-lg" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => handleDelete(n.id)}></i> |
||||
</Tooltip> |
||||
|
||||
<Tooltip title="Edit"> |
||||
<i id="TooltipEdit" className="cil-pencil fa-lg" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEdit(n)}></i> |
||||
</Tooltip> |
||||
</td> |
||||
<td>{n.name}</td> |
||||
<td>{n.description}</td> |
||||
</tr> |
||||
) |
||||
})} |
||||
</tbody> |
||||
</Table> |
||||
<Pagination |
||||
showSizeChanger |
||||
onShowSizeChange={onShowSizeChange} |
||||
onChange={onPagination} |
||||
defaultCurrent={currentPage} |
||||
pageSize={rowsPerPage} |
||||
total={totalPage} |
||||
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]} |
||||
/> |
||||
</CardBody> |
||||
</Card> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default Satuan; |
||||
export default Satuan; |
||||
|
||||
Loading…
Reference in new issue