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

Bug fixing export excel

pull/2/head
nurkomalasari 2 years ago
parent
78907d19ce
commit
70d6c38539
4 changed files with 2030 additions and 1829 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 719
      src/views/SimproV2/ProjectType/index.js
  2. 187
      src/views/SimproV2/ResourceTools/index.js
  3. 636
      src/views/SimproV2/ResourceWorker/DialogForm.js
  4. 17
      src/views/SimproV2/ResourceWorker/index.js

719
src/views/SimproV2/ProjectType/index.js
Unescape View File

@ -9,7 +9,7 @@ import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap';
import { DownloadOutlined } from '@ant-design/icons';
import { NotificationContainer, NotificationManager } from 'react-notifications';
import { PROJECT_TYPE_ADD, PROJECT_TYPE_EDIT, PROJECT_TYPE_DELETE, PROJECT_TYPE_SEARCH } from '../../../const/ApiConst';
import { Pagination, Button, Tooltip, Table} from 'antd';
import { Pagination, Button, Tooltip, Table } from 'antd';
const url = "";
const proyek_id = localStorage.getItem('proyek_id');
@ -17,361 +17,378 @@ const role_id = localStorage.getItem('role_id');
const format = "DD-MM-YYYY";
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 ProjectType = ({params}) => {
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 [idTypeProject, setIdTypeProject] = useState(0)
const [openDialog, setOpenDialog] = useState(false)
const [openDialogIG, setOpenDialogIG] = useState(false)
const [rowsPerPage, setRowsPerPage] = useState(10)
const [search, setSearch] = useState('')
const [totalPage, setTotalPage] = useState(0)
const [typeDialog, setTypeDialog] = useState('Save')
useEffect(() => {
getDataProjectType()
}, [currentPage, rowsPerPage, search])
useEffect(() => {
const cekData = dataExport || []
if (cekData.length > 0) {
exportExcel()
}
}, [dataExport])
const getDataProjectType = 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(PROJECT_TYPE_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 () => {
let start = 0;
const payload = {
"paging": { "start": start, "length": -1 },
"columns": [
{ "name": "name", "logic_operator": "ilike", "value": search, "operator": "AND" }
],
"joins": [],
"orders": { "columns": ["id"], "ascending": false }
}
const result = await axios
.post(PROJECT_TYPE_SEARCH, payload)
.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") {
saveProjectType(data);
} else if (type === "edit") {
editMaterialR(data);
}
setDataEdit([])
setOpenDialog(false)
}
const saveProjectType = async (data) => {
const formData = data
const result = await axios.post(PROJECT_TYPE_ADD, formData, HEADER)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
getDataProjectType()
NotificationManager.success(`Data project type berhasil ditambah`, 'Success!!');
} else {
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
}
const editMaterialR = async (data) => {
let urlEdit = PROJECT_TYPE_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) {
getDataProjectType();
NotificationManager.success(`Data project type berhasil diedit`, 'Success!!');
} else {
NotificationManager.error(`Data project type gagal di edit`, `Failed!!`);
}
}
const toggleAddDialog = () => {
setOpenDialog(!openDialog)
}
const handleDialogIg = (id) => {
setIdTypeProject(id)
setOpenDialogIG(true)
}
const closeDialogIG = () => {
setIdTypeProject(0)
setOpenDialogIG(false)
}
const toggleDialogIG = () => {
if(openDialogIG){
setIdTypeProject(0)
}
setOpenDialogIG(!openDialogIG);
}
const onConfirmDelete = async () => {
let url = PROJECT_TYPE_DELETE(idDelete);
const result = await axios.delete(url,config)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
getDataProjectType()
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>
)
}
}
const renderTable = useMemo(() => {
const columns = [
{
title: 'Action',
dataIndex: '',
key: 'x',
className:'nowrap',
render: (text, record) => <>
<Tooltip title="Delete">
<i className="fa fa-trash" style={{ color: 'red', marginRight: '10px', cursor: "pointer" }} onClick={() => handleDelete(text.id)}></i>
</Tooltip>
<Tooltip title="Edit">
<i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEdit(text)}></i>
</Tooltip>{" "}
<Tooltip title="Template Gantt">
<i className="fa fa-gears" style={{ color: 'blue', cursor: "pointer" }} onClick={() => handleDialogIg(text.id)}></i>
</Tooltip>
</>,
},
{ title: 'Nama Role', dataIndex: 'name', key: 'name', className:"nowrap" },
{ title: 'Description', dataIndex: 'description', key: 'description' },
];
return (
<Table
rowKey="id"
size="small"
columns={columns}
dataSource={dataTable}
pagination={false}
/>
)
}, [dataTable])
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}
/>
<DialogInitialGantt
openDialog={openDialogIG}
closeDialog={closeDialogIG}
toggleDialog={toggleDialogIG}
idTypeProject={idTypeProject}
/>
<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 project type...`} />
</Col>
<Col>
<Tooltip title="Add Material Resource">
<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" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button>
</Tooltip>
</Col>
</Row>
</CardHeader>
<CardBody>
{renderTable}
<Pagination
style={{marginTop:"25px"}}
showSizeChanger
onShowSizeChange={onShowSizeChange}
onChange={onPagination}
defaultCurrent={currentPage}
pageSize={rowsPerPage}
total={totalPage}
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]}
/>
</CardBody>
</Card>
</div>
)
const ProjectType = ({ params }) => {
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 [idTypeProject, setIdTypeProject] = useState(0)
const [openDialog, setOpenDialog] = useState(false)
const [openDialogIG, setOpenDialogIG] = useState(false)
const [rowsPerPage, setRowsPerPage] = useState(10)
const [search, setSearch] = useState('')
const [totalPage, setTotalPage] = useState(0)
const [typeDialog, setTypeDialog] = useState('Save')
useEffect(() => {
getDataProjectType()
}, [currentPage, rowsPerPage, search])
useEffect(() => {
const cekData = dataExport || []
if (cekData.length > 0) {
exportExcel()
}
}, [dataExport])
const getDataProjectType = 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(PROJECT_TYPE_SEARCH, payload, config, HEADER)
.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 () => {
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(PROJECT_TYPE_SEARCH, payload, HEADER)
.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") {
saveProjectType(data);
} else if (type === "edit") {
editMaterialR(data);
}
setDataEdit([])
setOpenDialog(false)
}
const saveProjectType = async (data) => {
const formData = data
const result = await axios.post(PROJECT_TYPE_ADD, formData, HEADER)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
getDataProjectType()
NotificationManager.success(`Data project type berhasil ditambah`, 'Success!!');
} else {
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
}
const editMaterialR = async (data) => {
let urlEdit = PROJECT_TYPE_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) {
getDataProjectType();
NotificationManager.success(`Data project type berhasil diedit`, 'Success!!');
} else {
NotificationManager.error(`Data project type gagal di edit`, `Failed!!`);
}
}
const toggleAddDialog = () => {
setOpenDialog(!openDialog)
}
const handleDialogIg = (id) => {
setIdTypeProject(id)
setOpenDialogIG(true)
}
const closeDialogIG = () => {
setIdTypeProject(0)
setOpenDialogIG(false)
}
const toggleDialogIG = () => {
if (openDialogIG) {
setIdTypeProject(0)
}
setOpenDialogIG(!openDialogIG);
}
const onConfirmDelete = async () => {
let url = PROJECT_TYPE_DELETE(idDelete);
const result = await axios.delete(url, config)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
getDataProjectType()
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>
)
}
}
const renderTable = useMemo(() => {
const columns = [
{
title: 'Action',
dataIndex: '',
key: 'x',
className: 'nowrap',
render: (text, record) => <>
<Tooltip title="Delete">
<i className="fa fa-trash" style={{ color: 'red', marginRight: '10px', cursor: "pointer" }} onClick={() => handleDelete(text.id)}></i>
</Tooltip>
<Tooltip title="Edit">
<i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEdit(text)}></i>
</Tooltip>{" "}
<Tooltip title="Template Gantt">
<i className="fa fa-gears" style={{ color: 'blue', cursor: "pointer" }} onClick={() => handleDialogIg(text.id)}></i>
</Tooltip>
</>,
},
{ title: 'Nama Role', dataIndex: 'name', key: 'name', className: "nowrap" },
{ title: 'Description', dataIndex: 'description', key: 'description' },
];
return (
<Table
rowKey="id"
size="small"
columns={columns}
dataSource={dataTable}
pagination={false}
/>
)
}, [dataTable])
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}
/>
<DialogInitialGantt
openDialog={openDialogIG}
closeDialog={closeDialogIG}
toggleDialog={toggleDialogIG}
idTypeProject={idTypeProject}
/>
<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 project type...`} />
</Col>
<Col>
<Tooltip title="Add Material Resource">
<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" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button>
</Tooltip>
</Col>
</Row>
</CardHeader>
<CardBody>
{renderTable}
<Pagination
style={{ marginTop: "25px" }}
showSizeChanger
onShowSizeChange={onShowSizeChange}
onChange={onPagination}
defaultCurrent={currentPage}
pageSize={rowsPerPage}
total={totalPage}
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]}
/>
</CardBody>
</Card>
</div>
)
}
export default ProjectType;

187
src/views/SimproV2/ResourceTools/index.js
Unescape View File

@ -46,6 +46,9 @@ const ResourceWorker = ({ params }) => {
const [dataDeliveryTools, setDataDeliveryTools] = useState([]);
const [dataEdit, setDataEdit] = useState(null)
const [dataExport, setDataExport] = useState([])
const [dataExportToolsRequest, setDataExportToolsRequest] = useState([])
const [dataExportToolsDelivery, setDataExportToolsDelivery] = useState([])
const [dataReqTools, setDataReqTools] = useState([]);
const [dataTable, setDatatable] = useState([])
const [idDelete, setIdDelete] = useState(0)
@ -68,6 +71,27 @@ const ResourceWorker = ({ params }) => {
getDataTools()
}, [search, rowsPerPage, currentPage])
useEffect(() => {
const cekData = dataExport || []
if (cekData.length > 0) {
exportExcel()
}
}, [dataExport])
useEffect(() => {
const cekData = dataExportToolsRequest || []
if (cekData.length > 0) {
exportExcelToolsRequest()
}
}, [dataExportToolsRequest])
useEffect(() => {
const cekData = dataExportToolsDelivery || []
if (cekData.length > 0) {
exportExcelToolsDilevery()
}
}, [dataExportToolsDelivery])
const onShowSizeChange = (current, pageSize) => {
setRowsPerPage(pageSize)
}
@ -220,7 +244,7 @@ const ResourceWorker = ({ params }) => {
setTypeDialog(type)
}
const handleExportExcel = async () => {
const handleExportExcelToolsResource = async () => {
const payload = {
"paging": { "start": 0, "length": -1 },
@ -244,12 +268,11 @@ const ResourceWorker = ({ params }) => {
const excelData = [];
resData.map((n, index) => {
let dataRow = {
"Nama Proyek": n.nama,
"Biaya": n.biaya,
"Color Progress": n.color_progress,
"Jumlah Pekerja": n.jumlah_pekerja,
"Tanggal Mulai": n.mulai_proyek ? moment(n.mulai_proyek).format(format) : "-",
"Tanggal Selesai": n.akhir_proyek ? moment(n.akhir_proyek).format(format) : "-",
"Nama": n.name,
"Tipe Asset": n.asset_type,
"Deskripsi": n.description,
"Quantity": n.qty,
"UOM": n.uom
}
excelData.push(dataRow)
})
@ -259,6 +282,150 @@ const ResourceWorker = ({ params }) => {
}
}
const handleExportExcelToolsRequest = async () => {
const payload = {
"paging": {
"start": 0,
"length": 10
},
"columns": [
{
"name": "asset_type",
"logic_operator": "ilike",
"value": "",
"operator": "AND"
},
{
"name": "status",
"logic_operator": "<>",
"value": "receipt to site",
"operator": "AND"
}
],
"joins": [{ "name": "m_proyek", "column_join": "proyek_id", "column_results": ["kode_sortname", "nama"] }],
"orders": {
"columns": [
"id"
],
"ascending": false
}
}
const result = await axios.post(REQUEST_TOOLS_SEARCH, payload, HEADER)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code == 200) {
let resData = result.data.data;
const excelData = [];
resData.map((n, index) => {
let dataRow = {
"Company Name": n.join_first_nama ? null : "-",
"Asset Name": n.asset_name,
"Asset Type": n.asset_type,
"Description": n.description,
"Quantity": n.qty,
"UOM": n.uom,
"Status": n.status,
}
console.log('Tools Request', resData)
excelData.push(dataRow)
})
await setDataExportToolsRequest(excelData);
} else {
NotificationManager.error('Gagal Export Data!!', 'Failed');
}
}
const handleExportExcelToolsDeliver = async () => {
const payload = {
"paging": {
"start": 0,
"length": 10
},
"columns": [
{
"name": "asset_type",
"logic_operator": "ilike",
"value": "",
"operator": "AND"
},
{
"name": "status",
"logic_operator": "=",
"value": "receipt to site",
"operator": "AND"
}
],
"joins": [{ "name": "m_proyek", "column_join": "proyek_id", "column_results": ["kode_sortname", "nama"] }],
"orders": {
"columns": [
"id"
],
"ascending": false
}
}
const result = await axios.post(TOOLS_RESOURCE_SEARCH, payload, HEADER)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code == 200) {
let resData = result.data.data;
const excelData = [];
resData.map((n, index) => {
let dataRow = {
"Nama": n.name,
"Tipe Asset": n.asset_type,
"Deskripsi": n.description,
"Quantity": n.qty,
"UOM": n.uom
}
excelData.push(dataRow)
})
await setDataExportToolsDelivery(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 exportExcelToolsRequest = () => {
const dataExcel = dataExportToolsRequest || [];
const fileName = `Data Tools Request.xlsx`;
const ws = XLSX.utils.json_to_sheet(dataExcel);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, `Data Tools Request`);
XLSX.writeFile(wb, fileName);
setDataExportToolsRequest([])
}
const exportExcelToolsDilevery = () => {
const dataExcel = dataExportToolsDelivery || [];
const fileName = `Data Tools Dilevery.xlsx`;
const ws = XLSX.utils.json_to_sheet(dataExcel);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, `Data Tools Dilevery`);
XLSX.writeFile(wb, fileName);
setDataExportToolsDelivery([])
}
const handleEdit = (data) => {
setDataEdit(data)
handleOpenDialog('Edit');
@ -383,7 +550,7 @@ const ResourceWorker = ({ params }) => {
<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" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button>
<Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcelToolsResource()}><i className="fa fa-print"></i></Button>
</Tooltip>
</Col>
</Row>
@ -467,7 +634,7 @@ const ResourceWorker = ({ params }) => {
</Col>
<Col>
<Tooltip title="Export Excel">
<Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button>
<Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcelToolsRequest()}><i className="fa fa-print"></i></Button>
</Tooltip>
</Col>
</Row>
@ -498,7 +665,7 @@ const ResourceWorker = ({ params }) => {
</Col>
<Col>
<Tooltip title="Export Excel">
<Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button>
<Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcelToolsDeliver()}><i className="fa fa-print"></i></Button>
</Tooltip>
</Col>
</Row>

636
src/views/SimproV2/ResourceWorker/DialogForm.js
Unescape View File

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react'
import {
Modal, ModalHeader, ModalBody, ModalFooter,
Button, Form, FormGroup, Label, Input, Col, Row
Modal, ModalHeader, ModalBody, ModalFooter,
Button, Form, FormGroup, Label, Input, Col, Row
} from 'reactstrap';
import { DatePicker, Tooltip, Select, Input as InputAntd } from 'antd';
import moment from 'moment';
@ -12,207 +12,207 @@ const { Option } = Select
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 DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, roleList, divisiList }) => {
const [openDialogMap, setOpenDialogMap] = useState(false)
const [openDialogMap, setOpenDialogMap] = useState(false)
const [id, setId] = useState(0)
const [resourceName, setResourceName] = useState('')
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const [retryPassword, setRetryPassword] = useState('')
const [employeeType, setEmployeeType] = useState('')
const [phoneNo, setPhoneNo] = useState('')
const [email, setEmail] = useState('')
const [gender, setGender] = useState('')
const [birthDate, setBirthDate] = useState('')
const [birthPlace, setBirthPlace] = useState('')
const [bloodType, setBloodType] = useState('')
const [ktpNumber, setKtpNumber] = useState('')
const [biayaPerJam, setBiayaPerJam] = useState('')
const [roleId, setRoleId] = useState('')
const [address, setAddress] = useState('')
const [divisionId, setDivisionId] = useState('')
const [statusResource, setStatusResource] = useState('active')
const [id, setId] = useState(0)
const [resourceName, setResourceName] = useState('')
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const [retryPassword, setRetryPassword] = useState('')
const [employeeType, setEmployeeType] = useState('')
const [phoneNo, setPhoneNo] = useState('')
const [email, setEmail] = useState('')
const [gender, setGender] = useState('')
const [birthDate, setBirthDate] = useState('')
const [birthPlace, setBirthPlace] = useState('')
const [bloodType, setBloodType] = useState('')
const [ktpNumber, setKtpNumber] = useState('')
const [biayaPerJam, setBiayaPerJam] = useState('')
const [roleId, setRoleId] = useState('')
const [address, setAddress] = useState('')
const [divisionId, setDivisionId] = useState('')
const [statusResource, setStatusResource] = useState('active')
useEffect(() => {
if (typeDialog === "Edit" || typeDialog === "Set") {
console.log("cel data Edit", dataEdit)
setId(dataEdit.id)
setResourceName(dataEdit.name)
setUsername(dataEdit.username)
setPassword('')
setRetryPassword('')
setEmployeeType(dataEdit.employee_type)
setPhoneNo(dataEdit.phone_number)
setEmail(dataEdit.email)
setGender(dataEdit.gender)
setBirthDate(dataEdit.birth_date ? moment(dataEdit.birth_date) : "")
setBirthPlace(dataEdit.birth_place)
setBloodType(dataEdit.blood_type)
setKtpNumber(dataEdit.ktp_number ? dataEdit.ktp_number : '')
setBiayaPerJam(dataEdit.biaya_per_jam ? formatNumber(dataEdit.biaya_per_jam) : '')
setRoleId(dataEdit.role_id)
setDivisionId(dataEdit.divisi_id)
setAddress(dataEdit.address)
} else {
setId(0)
setResourceName('')
setUsername('')
setPassword('')
setRetryPassword('')
setEmployeeType('')
setPhoneNo('')
setEmail('')
setGender('')
setBirthDate('')
setBirthPlace('')
setBloodType('')
setKtpNumber('')
setBiayaPerJam('')
setRoleId('')
setDivisionId('')
setAddress('')
setStatusResource('active')
}
}, [dataEdit, openDialog])
useEffect(() => {
if (typeDialog === "Edit" || typeDialog === "Set") {
console.log("cel data Edit", dataEdit)
setId(dataEdit.id)
setResourceName(dataEdit.name)
setUsername(dataEdit.username)
setPassword('')
setRetryPassword('')
setEmployeeType(dataEdit.employee_type)
setPhoneNo(dataEdit.phone_number)
setEmail(dataEdit.email)
setGender(dataEdit.gender)
setBirthDate(dataEdit.birth_date ? moment(dataEdit.birth_date) : "")
setBirthPlace(dataEdit.birth_place)
setBloodType(dataEdit.blood_type)
setKtpNumber(dataEdit.ktp_number ? dataEdit.ktp_number : '')
setBiayaPerJam(dataEdit.biaya_per_jam ? formatNumber(dataEdit.biaya_per_jam) : '')
setRoleId(dataEdit.role_id)
setDivisionId(dataEdit.divisi_id)
setAddress(dataEdit.address)
} else {
setId(0)
setResourceName('')
setUsername('')
setPassword('')
setRetryPassword('')
setEmployeeType('')
setPhoneNo('')
setEmail('')
setGender('')
setBirthDate('')
setBirthPlace('')
setBloodType('')
setKtpNumber('')
setBiayaPerJam('')
setRoleId('')
setDivisionId('')
setAddress('')
setStatusResource('active')
}
}, [dataEdit, openDialog])
const handleSave = () => {
let data = '';
const handleSave = () => {
let data = '';
if (!ktpNumber && ktpNumber === "") {
alert("Please input NIK (KTP/ ID Card)");
return;
}
if (!roleId && roleId === "") {
alert("Please select the role");
return;
}
if (!divisionId && divisionId === "") {
alert("Please select the division");
return;
}
if (!ktpNumber && ktpNumber === "") {
alert("Please input NIK (KTP/ ID Card)");
return;
}
if (!roleId && roleId === "") {
alert("Please select the role");
return;
}
if (!divisionId && divisionId === "") {
alert("Please select the division");
return;
}
if (typeDialog === "Save") {
console.log("divisionId ", divisionId)
data = {
name: resourceName,
employee_type: employeeType,
phone_number: phoneNo,
email,
gender,
birth_place: birthPlace,
ktp_number: ktpNumber,
role_id: roleId,
divisi_id: divisionId,
address,
status_resource: statusResource
}
if (typeDialog === "Save") {
console.log("divisionId ", divisionId)
data = {
name: resourceName,
employee_type: employeeType,
phone_number: phoneNo,
email,
gender,
birth_place: birthPlace,
ktp_number: ktpNumber,
role_id: roleId,
divisi_id: divisionId,
address,
status_resource: statusResource
}
if(birthDate && birthDate!=""){
data['birth_date'] = birthDate;
}
if (birthDate && birthDate != "") {
data['birth_date'] = birthDate;
}
closeDialog('save', data);
} else if (typeDialog === "Set") {
if (!password && password === "") {
alert("Please fill password");
return;
}
if (password !== retryPassword) {
alert("Password doesn't match");
return;
}
data = {
id,
username,
password,
email,
}
closeDialog('save', data);
} else if (typeDialog === "Set") {
if (!password && password === "") {
alert("Please fill password");
return;
}
if (password !== retryPassword) {
alert("Password doesn't match");
return;
}
data = {
id,
username,
password,
email,
}
closeDialog('edit', data);
} else {
closeDialog('edit', data);
} else {
data = {
id,
name: resourceName,
username,
employee_type: employeeType,
phone_number: phoneNo,
email,
gender,
birth_place: birthPlace,
blood_type: bloodType,
ktp_number: ktpNumber,
biaya_per_jam: biayaPerJam.replace('.', ''),
role_id: roleId,
divisi_id: divisionId,
address,
status_resource: statusResource
}
data = {
id,
name: resourceName,
username,
employee_type: employeeType,
phone_number: phoneNo,
email,
gender,
birth_place: birthPlace,
blood_type: bloodType,
ktp_number: ktpNumber,
biaya_per_jam: biayaPerJam.replace('.', ''),
role_id: roleId,
divisi_id: divisionId,
address,
status_resource: statusResource
}
if(birthDate && birthDate!=""){
data['birth_date'] = birthDate;
}
if (birthDate && birthDate != "") {
data['birth_date'] = birthDate;
}
closeDialog('edit', data);
}
closeDialog('edit', data);
}
}
const handleCancel = () => {
closeDialog('cancel', 'none')
}
const handleCancel = () => {
closeDialog('cancel', 'none')
}
const setupSelectRole = () => {
return (
<>
{roleList.map((val, index) => {
return (
<Option key={index} value={val.id}>{val.name}</Option>
)
})}
</>
)
}
const setupSelectRole = () => {
return (
<>
{roleList.map((val, index) => {
return (
<Option key={index} value={val.id}>{val.name}</Option>
)
})}
</>
)
}
const setupSelectDivisi = () => {
return (
<>
{divisiList.map((val, index) => {
return (
<Option key={index} value={val.id}>{val.name}</Option>
)
})}
</>
)
}
const setupSelectDivisi = () => {
return (
<>
{divisiList.map((val, index) => {
return (
<Option key={index} value={val.id}>{val.name}</Option>
)
})}
</>
)
}
const renderForm = () => {
return (
<Form>
<Row>
<Col md={6}>
const renderForm = () => {
return (
<Form>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">NIK (KTP / ID Card) *</Label>
{/* <Input type="text" value={ktpNumber} onChange={(e) => setKtpNumber(e.target.value.replace(/[^0-9]/g, ''))} placeholder={`Input NIK (KTP)...`} maxLength="16" /> */}
<Input type="text" value={ktpNumber} onChange={(e) => setKtpNumber(e.target.value)} placeholder={`Input NIK (KTP)...`} maxLength="16" />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Resource Name *</Label>
<Input type="text" value={resourceName} onChange={(e) => setResourceName(e.target.value)} placeholder={`Input resource name...`} />
</FormGroup>
</Col>
</Row>
{/* {typeDialog === 'Save' &&
<FormGroup>
<Label className="capitalize">NIK (KTP / ID Card) *</Label>
{/* <Input type="text" value={ktpNumber} onChange={(e) => setKtpNumber(e.target.value.replace(/[^0-9]/g, ''))} placeholder={`Input NIK (KTP)...`} maxLength="16" /> */}
<Input type="text" value={ktpNumber} onChange={(e) => setKtpNumber(e.target.value)} placeholder={`Input NIK (KTP)...`} maxLength="16" />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Resource Name *</Label>
<Input type="text" value={resourceName} onChange={(e) => setResourceName(e.target.value)} placeholder={`Input resource name...`} />
</FormGroup>
</Col>
</Row>
{/* {typeDialog === 'Save' &&
<Row>
<Col md={6}>
<FormGroup>
@ -228,151 +228,151 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
</Col>
</Row>
} */}
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Employee Type *</Label>
<Select showSearch value={employeeType} defaultValue={employeeType} onChange={(val) => setEmployeeType(val)} placeholder="Select Employee Type" style={{ width: '100%' }}>
<Option value={'employee'}>Employee</Option>
<Option value={'subcon'}>Subcon</Option>
<Option value={'freelance'}>Freelance</Option>
</Select>
</FormGroup>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Employee Type *</Label>
<Select showSearch value={employeeType} defaultValue={employeeType} onChange={(val) => setEmployeeType(val)} placeholder="Select Employee Type" style={{ width: '100%' }}>
<Option value={'employee'}>Employee</Option>
<Option value={'subcon'}>Subcon</Option>
<Option value={'freelance'}>Freelance</Option>
</Select>
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Phone No.</Label>
<Input type="text" value={phoneNo} onChange={(e) => setPhoneNo(e.target.value.replace(/[^0-9]/g, ''))} placeholder={`Input phone number...`} maxLength="15" />
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Email</Label>
<Input type="text" value={email} onChange={(e) => setEmail(e.target.value)} placeholder={`Input email...`} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Gender</Label>
<Select showSearch value={gender} defaultValue={gender} onChange={(val) => setGender(val)} placeholder="Select Gender" style={{ width: '100%' }}>
<Option value="Male">Male</Option>
<Option value="Female">Female</Option>
{/* <Option value="Other">Other</Option> */}
</Select>
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Birth Place</Label>
<Input type="text" value={birthPlace} onChange={(e) => setBirthPlace(e.target.value)} placeholder={`Input birth place...`} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Birth Date</Label>
<DatePicker style={{ width: "100%" }} value={birthDate} onChange={(date, dateString) => setBirthDate(date)} />
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Role *</Label>
<Select showSearch defaultValue={roleId} onChange={(val) => setRoleId(val)} placeholder="Select Role" style={{ width: '100%' }}>
{setupSelectRole()}
</Select>
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Division *</Label>
{/* <Select style={{ width: "100%" }} defaultValue={statusResource} onChange={(e) => setStatusResource(e)}>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Phone No.</Label>
<Input type="text" value={phoneNo} onChange={(e) => setPhoneNo(e.target.value.replace(/[^0-9]/g, ''))} placeholder={`Input phone number...`} maxLength="15" />
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Email</Label>
<Input type="text" value={email} onChange={(e) => setEmail(e.target.value)} placeholder={`Input email...`} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Gender</Label>
<Select showSearch value={gender} defaultValue={gender} onChange={(val) => setGender(val)} placeholder="Select Gender" style={{ width: '100%' }}>
<Option value="Male">Male</Option>
<Option value="Female">Female</Option>
{/* <Option value="Other">Other</Option> */}
</Select>
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Birth Place</Label>
<Input type="text" value={birthPlace} onChange={(e) => setBirthPlace(e.target.value)} placeholder={`Input birth place...`} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Birth Date</Label>
<DatePicker style={{ width: "100%" }} value={birthDate} onChange={(date, dateString) => setBirthDate(date)} />
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Role *</Label>
<Select showSearch defaultValue={roleId} onChange={(val) => setRoleId(val)} placeholder="Select Role" style={{ width: '100%' }}>
{setupSelectRole()}
</Select>
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Division *</Label>
{/* <Select style={{ width: "100%" }} defaultValue={statusResource} onChange={(e) => setStatusResource(e)}>
<Option value={'active'}>Active</Option>
<Option value={'inactive'}>Inactive</Option>
</Select> */}
<Select showSearch defaultValue={divisionId} onChange={(val) => setDivisionId(val)} placeholder="Select Division" style={{ width: '100%' }}>
{setupSelectDivisi()}
</Select>
</FormGroup>
</Col>
</Row>
<Select showSearch defaultValue={divisionId} onChange={(val) => setDivisionId(val)} placeholder="Select Division" style={{ width: '100%' }}>
{setupSelectDivisi()}
</Select>
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<Label className="capitalize">Status Resource</Label>
<Select style={{ width: "100%" }} defaultValue={statusResource} onChange={(e) => setStatusResource(e)}>
<Option value={'active'}>Active</Option>
<Option value={'inactive'}>Inactive</Option>
</Select>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Address</Label>
<Input type="textarea" value={address} onChange={(e) => setAddress(e.target.value)} placeholder="Input address..." />
</FormGroup>
</Col>
</Row>
</Form>
)
}
<Row>
<Col md={6}>
<Label className="capitalize">Status Resource</Label>
<Select style={{ width: "100%" }} defaultValue={statusResource} onChange={(e) => setStatusResource(e)}>
<Option value={'active'}>Active</Option>
<Option value={'inactive'}>Inactive</Option>
</Select>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Address</Label>
<Input type="textarea" value={address} onChange={(e) => setAddress(e.target.value)} placeholder="Input address..." />
</FormGroup>
</Col>
</Row>
</Form>
)
}
const renderForm2 = () => {
return (
<Form>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Email</Label>
<Input type="text" defaultValue={""} value={email} onChange={(e) => setEmail(e.target.value)} placeholder={`Email...`} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Username</Label>
<Input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder={`Username...`} />
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Password</Label>
<Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder={`Password...`} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Retry Password</Label>
<Input type="password" value={retryPassword} onChange={(e) => setRetryPassword(e.target.value)} placeholder={`Retry password...`} />
</FormGroup>
</Col>
</Row>
const renderForm2 = () => {
return (
<Form>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Email</Label>
<Input type="text" defaultValue={""} value={email} onChange={(e) => setEmail(e.target.value)} placeholder={`Email...`} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Username</Label>
<Input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder={`Username...`} />
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Password</Label>
<Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder={`Password...`} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Retry Password</Label>
<Input type="password" value={retryPassword} onChange={(e) => setRetryPassword(e.target.value)} placeholder={`Retry password...`} />
</FormGroup>
</Col>
</Row>
</Form>
)
}
</Form>
)
}
return (
<>
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} Human Resource</ModalHeader>
<ModalBody>
{typeDialog !== "Set" ? renderForm() : renderForm2()}
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '}
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>
</ModalFooter>
</Modal>
</>
)
return (
<>
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} Human Resource</ModalHeader>
<ModalBody>
{typeDialog !== "Set" ? renderForm() : renderForm2()}
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '}
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>
</ModalFooter>
</Modal>
</>
)
}

17
src/views/SimproV2/ResourceWorker/index.js
Unescape View File

@ -62,6 +62,13 @@ const ResourceWorker = ({ params }) => {
getDataUser()
}, [search, rowsPerPage, currentPage])
useEffect(() => {
const cekData = dataExport || []
if (cekData.length > 0) {
exportExcel()
}
}, [dataExport])
const onShowSizeChange = (current, pageSize) => {
setRowsPerPage(pageSize)
}
@ -264,6 +271,16 @@ const ResourceWorker = ({ params }) => {
}
}
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');

Write Preview
Loading…
Cancel
Save