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