diff --git a/src/views/SimproV2/Satuan/index.js b/src/views/SimproV2/Satuan/index.js index 5210c75..b864493 100644 --- a/src/views/SimproV2/Satuan/index.js +++ b/src/views/SimproV2/Satuan/index.js @@ -1,343 +1,337 @@ -import * as XLSX from 'xlsx'; -import DialogForm from './DialogForm'; -import React, { useState, useEffect, useMemo } from 'react'; -import SweetAlert from 'react-bootstrap-sweetalert'; -import axios from "../../../const/interceptorApi" -import { Card, CardBody, CardHeader, Col, Row, Input, Table } from 'reactstrap'; -import { NotificationContainer, NotificationManager } from 'react-notifications'; -import { Pagination, Button, Tooltip } from 'antd'; -import { SATUAN_ADD, SATUAN_EDIT, SATUAN_DELETE, SATUAN_SEARCH } from '../../../const/ApiConst'; -import { useTranslation } from 'react-i18next'; - -const token = window.localStorage.getItem('token'); -const config = { - headers: - { - Authorization: `Bearer ${token}`, - "Content-type": `application/json` - } -}; - -const Satuan = ({ 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 [openDialog, setOpenDialog] = useState(false) - const [rowsPerPage, setRowsPerPage] = useState(10) - const [search, setSearch] = useState('') - const [totalPage, setTotalPage] = useState(0) - const [typeDialog, setTypeDialog] = useState('Save') - const { t } = useTranslation() - useEffect(() => { - getDataSatuan() - }, [currentPage, rowsPerPage, search]) - - useEffect(() => { - const cekData = dataExport || [] - if (cekData.length > 0) { - exportExcel() - } - }, [dataExport]) - - const column = [ - { name: t('name') }, - { name: t('description') }, - ] - const getDataSatuan = async () => { - - let start = 0; - - if (currentPage !== 1 && currentPage > 1) { - start = (currentPage * rowsPerPage) - rowsPerPage - } - - const payload = { - "columns": [ - { - "name": "name", - "logic_operator": "ilike", - "value": search, - "operator": "AND" - }, - { - "name": "description", - "logic_operator": "ilike", - "value": search, - "operator": "AND" - } - ], - "orders": { - "ascending": true, - "columns": [ - 'id' - ] - }, - "paging": { - "length": rowsPerPage, - "start": start - } - } - - const result = await axios - .post(SATUAN_SEARCH, payload, config) - .then(res => res) - .catch((error) => error.response); - if (result && result.data && result.data.code == 200) { - setDatatable(result.data.data); - setTotalPage(result.data.totalRecord); - } else { - NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); - } - } - - const handleSearch = e => { - const value = e.target.value - setSearch(value); - setCurrentPage(1) - }; - - const handleOpenDialog = (type) => { - setOpenDialog(true) - setTypeDialog(type) - } - - const handleExportExcel = async () => { - const payload = { - "paging": { "start": 0, "length": -1 }, - "columns": [ - { "name": "name", "logic_operator": "ilike", "value": search, "operator": "AND" } - ], - "orders": { "columns": ["id"], "ascending": false } - } - const result = await axios - .post(SATUAN_SEARCH, payload, config) - .then(res => res) - .catch((error) => error.response); - if (result && result.data && result.data.code == 200) { - let resData = result.data.data; - const excelData = []; - resData.map((val, index) => { - let dataRow = { - "Nama": val.name, - "Deskripsi": val.description, - } - excelData.push(dataRow) - }) - await setDataExport(excelData); - } else { - NotificationManager.error('Gagal Export Data!!', 'Failed'); - } - } - - const exportExcel = () => { - const dataExcel = dataExport || []; - const fileName = `Data ${pageName}.xlsx`; - const ws = XLSX.utils.json_to_sheet(dataExcel); - const wb = XLSX.utils.book_new(); - XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`); - XLSX.writeFile(wb, fileName); - setDataExport([]) - } - - const handleEdit = (data) => { - setDataEdit(data) - handleOpenDialog('Edit'); - } - - const handleDelete = async (id) => { - await setAlertDelete(true) - await setIdDelete(id) - } - - const handleCloseDialog = (type, data) => { - if (type === "save") { - saveSatuan(data); - } else if (type === "edit") { - editMaterialR(data); - } - setDataEdit([]) - setOpenDialog(false) - } - - const saveSatuan = async (data) => { - const formData = data - const result = await axios.post(SATUAN_ADD, formData, HEADER) - .then(res => res) - .catch((error) => error.response); - - if (result && result.data && result.data.code === 200) { - getDataSatuan() - NotificationManager.success(`Data project type berhasil ditambah`, 'Success!!'); - } else { - NotificationManager.error(`${result.data.message}`, 'Failed!!'); - } - } - - const editMaterialR = async (data) => { - let urlEdit = SATUAN_EDIT(data.id) - const formData = data - - const result = await axios.put(urlEdit, formData, HEADER) - .then(res => res) - .catch((error) => error.response); - - if (result && result.data && result.data.code === 200) { - getDataSatuan(); - NotificationManager.success(`Data project type berhasil diedit`, 'Success!!'); - } else { - NotificationManager.error(`Data project type gagal di edit`, `Failed!!`); - } - } - - const toggleAddDialog = () => { - setOpenDialog(!openDialog) - } - - const onConfirmDelete = async () => { - let url = SATUAN_DELETE(idDelete); - - const result = await axios.delete(url, config) - .then(res => res) - .catch((error) => error.response); - - if (result && result.data && result.data.code === 200) { - getDataSatuan() - setIdDelete(0) - setAlertDelete(false) - NotificationManager.success(`Data project type berhasil dihapus!`, 'Success!!'); - } else { - setIdDelete(0) - setAlertDelete(false) - NotificationManager.error(`Data project type gagal dihapus!}`, 'Failed!!'); - } - } - - const cancelDelete = () => { - setAlertDelete(false) - setIdDelete(0) - } - - const onShowSizeChange = (current, pageSize) => { - setRowsPerPage(pageSize) - } - - const onPagination = (current, pageSize) => { - setCurrentPage(current) - } - - const dataNotAvailable = () => { - if (dataTable.length === 0) { - return ( - - {t('noData')} - - ) - } - } - - return ( -
- - cancelDelete()} - focusCancelBtn - > - {t('deleteMsg')} - - toggleAddDialog} - typeDialog={typeDialog} - dataEdit={dataEdit} - clickOpenModal={clickOpenModal} - dataParent={allDataMenu} - /> - - -

{pageName}

- - - - - - - - - - - - - - - - - - - - {column.map((i, index) => { - return ( - - ) - })} - - - - {dataNotAvailable()} - {dataTable.map((n, index) => { - return ( - - - - - - ) - })} - -
{t('action')}{i.name}
- - - handleDelete(n.id)}> - - - - handleEdit(n)}> - - {n.name}{n.description}
- - - -
- ) -} - -export default Satuan; +import * as XLSX from 'xlsx'; +import DialogForm from './DialogForm'; +import React, { useState, useEffect, useMemo } from 'react'; +import SweetAlert from 'react-bootstrap-sweetalert'; +import axios from "../../../const/interceptorApi" +import { Card, CardBody, CardHeader, Col, Row, Input, Table } from 'reactstrap'; +import { NotificationContainer, NotificationManager } from 'react-notifications'; +import { Pagination, Button, Tooltip } from 'antd'; +import { SATUAN_ADD, SATUAN_EDIT, SATUAN_DELETE, SATUAN_SEARCH } from '../../../const/ApiConst'; +import { useTranslation } from 'react-i18next'; + +const token = window.localStorage.getItem('token'); +const config = { + headers: + { + Authorization: `Bearer ${token}`, + "Content-type": `application/json` + } +}; + +const Satuan = ({ 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 [openDialog, setOpenDialog] = useState(false) + const [rowsPerPage, setRowsPerPage] = useState(10) + const [search, setSearch] = useState('') + const [totalPage, setTotalPage] = useState(0) + const [typeDialog, setTypeDialog] = useState('Save') + const { t } = useTranslation() + useEffect(() => { + getDataSatuan() + }, [currentPage, rowsPerPage, search]) + + useEffect(() => { + const cekData = dataExport || [] + if (cekData.length > 0) { + exportExcel() + } + }, [dataExport]) + + const column = [ + { name: t('name') }, + { name: t('description') }, + ] + const getDataSatuan = async () => { + + let start = 0; + + if (currentPage !== 1 && currentPage > 1) { + start = (currentPage * rowsPerPage) - rowsPerPage + } + + const payload = { + "columns": [ + { + "name": "name", + "logic_operator": "ilike", + "value": search, + "operator": "AND" + } + ], + "orders": { + "ascending": true, + "columns": [ + 'id' + ] + }, + "paging": { + "length": rowsPerPage, + "start": start + } + } + + const result = await axios + .post(SATUAN_SEARCH, payload, config) + .then(res => res) + .catch((error) => error.response); + if (result && result.data && result.data.code == 200) { + setDatatable(result.data.data); + setTotalPage(result.data.totalRecord); + } else { + NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); + } + } + + const handleSearch = e => { + const value = e.target.value + setSearch(value); + setCurrentPage(1) + }; + + const handleOpenDialog = (type) => { + setOpenDialog(true) + setTypeDialog(type) + } + + const handleExportExcel = async () => { + const payload = { + "paging": { "start": 0, "length": -1 }, + "columns": [ + { "name": "name", "logic_operator": "ilike", "value": search, "operator": "AND" } + ], + "orders": { "columns": ["id"], "ascending": false } + } + const result = await axios + .post(SATUAN_SEARCH, payload, config) + .then(res => res) + .catch((error) => error.response); + if (result && result.data && result.data.code == 200) { + let resData = result.data.data; + const excelData = []; + resData.map((val, index) => { + let dataRow = { + "Nama": val.name, + "Deskripsi": val.description, + } + excelData.push(dataRow) + }) + await setDataExport(excelData); + } else { + NotificationManager.error('Gagal Export Data!!', 'Failed'); + } + } + + const exportExcel = () => { + const dataExcel = dataExport || []; + const fileName = `Data ${pageName}.xlsx`; + const ws = XLSX.utils.json_to_sheet(dataExcel); + const wb = XLSX.utils.book_new(); + XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`); + XLSX.writeFile(wb, fileName); + setDataExport([]) + } + + const handleEdit = (data) => { + setDataEdit(data) + handleOpenDialog('Edit'); + } + + const handleDelete = async (id) => { + await setAlertDelete(true) + await setIdDelete(id) + } + + const handleCloseDialog = (type, data) => { + if (type === "save") { + saveSatuan(data); + } else if (type === "edit") { + editMaterialR(data); + } + setDataEdit([]) + setOpenDialog(false) + } + + const saveSatuan = async (data) => { + const formData = data + const result = await axios.post(SATUAN_ADD, formData, HEADER) + .then(res => res) + .catch((error) => error.response); + + if (result && result.data && result.data.code === 200) { + getDataSatuan() + NotificationManager.success(`Satuan berhasil ditambah`, 'Success!!'); + } else { + NotificationManager.error(`${result.data.message}`, 'Failed!!'); + } + } + + const editMaterialR = async (data) => { + let urlEdit = SATUAN_EDIT(data.id) + const formData = data + + const result = await axios.put(urlEdit, formData, HEADER) + .then(res => res) + .catch((error) => error.response); + + if (result && result.data && result.data.code === 200) { + getDataSatuan(); + NotificationManager.success(`Satuan berhasil diubah`, 'Success!!'); + } else { + NotificationManager.error(`Satuan gagal diubah`, `Failed!!`); + } + } + + const toggleAddDialog = () => { + setOpenDialog(!openDialog) + } + + const onConfirmDelete = async () => { + let url = SATUAN_DELETE(idDelete); + + const result = await axios.delete(url, config) + .then(res => res) + .catch((error) => error.response); + + if (result && result.data && result.data.code === 200) { + getDataSatuan() + setIdDelete(0) + setAlertDelete(false) + NotificationManager.success(`Satuan berhasil dihapus!`, 'Success!!'); + } else { + setIdDelete(0) + setAlertDelete(false) + NotificationManager.error(`Satuan 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 ( + + {t('noData')} + + ) + } + } + + return ( +
+ + cancelDelete()} + focusCancelBtn + > + {t('deleteMsg')} + + toggleAddDialog} + typeDialog={typeDialog} + dataEdit={dataEdit} + clickOpenModal={clickOpenModal} + dataParent={allDataMenu} + /> + + +

{pageName}

+ + + + + + + + + + + + + + + + + + + + {column.map((i, index) => { + return ( + + ) + })} + + + + {dataNotAvailable()} + {dataTable.map((n, index) => { + return ( + + + + + + ) + })} + +
{t('action')}{i.name}
+ + + handleDelete(n.id)}> + + + + handleEdit(n)}> + + {n.name}{n.description}
+ + + +
+ ) +} + +export default Satuan;