From 4e9278d90f26fcc587bae1d4a1b0f0723cd30e0f Mon Sep 17 00:00:00 2001 From: wahyuun Date: Mon, 18 Sep 2023 11:02:49 +0700 Subject: [PATCH] change notification alert, clean code useState, clean payload --- src/views/SimproV2/Divisi/index.js | 732 ++++++++++++++--------------- 1 file changed, 363 insertions(+), 369 deletions(-) diff --git a/src/views/SimproV2/Divisi/index.js b/src/views/SimproV2/Divisi/index.js index 703f8f2..9ab06d3 100644 --- a/src/views/SimproV2/Divisi/index.js +++ b/src/views/SimproV2/Divisi/index.js @@ -1,369 +1,363 @@ -import * as XLSX from 'xlsx'; -import DialogForm from './DialogForm'; -import React, { useState, useEffect } from 'react'; -import SweetAlert from 'react-bootstrap-sweetalert'; -import axios from "../../../const/interceptorApi" -import { Card, CardBody, CardHeader, Col, Row, Input, Table } from 'reactstrap'; -import { DIVISI_LIST, DIVISI_ADD, DIVISI_EDIT, DIVISI_DELETE, DIVISI_SEARCH } from '../../../const/ApiConst'; -import { NotificationContainer, NotificationManager } from 'react-notifications'; -import { Pagination, Button, Tooltip } from 'antd'; -import { useTranslation } from 'react-i18next'; - -const url = ""; -const proyek_id = localStorage.getItem('proyek_id'); -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` - } -}; - -const column = [ - { 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 [openDialog, setOpenDialog] = useState(false) - const [rowsPerPage, setRowsPerPage] = useState(10) - const [search, setSearch] = useState('') - const [totalPage, setTotalPage] = useState(0) - const [typeDialog, setTypeDialog] = useState('Save') - const [dataDivisions, setDataDivisions] = useState([]) - const { t } = useTranslation() - - useEffect(() => { - getListDivision() - }, []) - - useEffect(() => { - getDataProjectType() - }, [currentPage, rowsPerPage, search]) - - useEffect(() => { - const cekData = dataExport || [] - if (cekData.length > 0) { - exportExcel() - } - }, [dataExport]) - - const getListDivision = async () => { - const listDivions = await axios - .get(DIVISI_LIST, HEADER) - .then(res => res) - .catch((error) => error.response); - - if (listDivions && listDivions.data && listDivions.data.code == 200) { - let arr = [] - for (const v in listDivions.data.data) { - arr.push(listDivions.data.data[v]) - } - setDataDivisions(arr); - } else { - NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); - } - } - const getDataProjectType = 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(DIVISI_SEARCH, payload, HEADER) - .then(res => res) - .catch((error) => error.response); - - if (result && result.data && result.data.code == 200) { - result.data.data.map((res) => { - res.key = res.id.toString() - }); - setDatatable(result.data.data); - setTotalPage(result.data.totalRecord); - } else { - NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); - } - } - 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(DIVISI_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 Divisi": 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 handleSearch = e => { - const value = e.target.value - setSearch(value); - setCurrentPage(1) - }; - - const handleOpenDialog = (type) => { - setOpenDialog(true) - setTypeDialog(type) - } - - 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(DIVISI_ADD, formData, HEADER) - .then(res => res) - .catch((error) => error.response); - if (result && result.data && result.data.code === 200) { - getDataProjectType() - NotificationManager.success(`Data berhasil ditambah`, 'Success!!'); - } else { - NotificationManager.error(`${result.data.message}`, 'Failed!!'); - } - } - - const editMaterialR = async (data) => { - let urlEdit = DIVISI_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 berhasil diedit`, 'Success!!'); - } else { - NotificationManager.error(`Data gagal di edit`, `Failed!!`); - } - } - - const toggleAddDialog = () => { - setOpenDialog(!openDialog) - } - - const onConfirmDelete = async () => { - let url = DIVISI_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 berhasil dihapus!`, 'Success!!'); - } else { - setIdDelete(0) - setAlertDelete(false) - NotificationManager.error(`Data 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 ( -
- - - {t('deleteMsg')} - - toggleAddDialog} - typeDialog={typeDialog} - dataEdit={dataEdit} - clickOpenModal={clickOpenModal} - dataParent={allDataMenu} - dataDivisions={dataDivisions} - /> - - -

{pageName}

- - - - - - - - - - - - - - - - - - - - {column.map((i, index) => { - return ( - - ) - })} - - - - {dataNotAvailable()} - {dataTable.map((n, index) => { - return ( - - - - - - ) - })} - -
Aksi{i.name}
- - handleDelete(n.id)}> - - - handleEdit(n)}> - - {n.name}{n.description}
- - -
- ) -} - -export default ProjectType; +import * as XLSX from 'xlsx'; +import DialogForm from './DialogForm'; +import React, { useState, useEffect } from 'react'; +import SweetAlert from 'react-bootstrap-sweetalert'; +import axios from "../../../const/interceptorApi" +import { Card, CardBody, CardHeader, Col, Row, Input, Table } from 'reactstrap'; +import { DIVISI_LIST, DIVISI_ADD, DIVISI_EDIT, DIVISI_DELETE, DIVISI_SEARCH } from '../../../const/ApiConst'; +import { NotificationContainer, NotificationManager } from 'react-notifications'; +import { Pagination, Button, Tooltip } from 'antd'; +import { useTranslation } from 'react-i18next'; + +const url = ""; +const proyek_id = localStorage.getItem('proyek_id'); +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` + } +}; + +const column = [ + { 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 [openDialog, setOpenDialog] = useState(false) + const [rowsPerPage, setRowsPerPage] = useState(10) + const [search, setSearch] = useState("") + const [totalPage, setTotalPage] = useState(0) + const [typeDialog, setTypeDialog] = useState('Save') + const [dataDivisions, setDataDivisions] = useState([]) + const { t } = useTranslation() + + useEffect(() => { + getDataProjectType(); + }, [currentPage, rowsPerPage, search]) + + useEffect(() => { + const cekData = dataExport || [] + if (cekData.length > 0) { + exportExcel() + } + }, [dataExport]) + + const getListDivision = async () => { + const listDivions = await axios + .get(DIVISI_LIST, HEADER) + .then(res => res) + .catch((error) => error.response); + + if (listDivions && listDivions.data && listDivions.data.code == 200) { + let arr = [] + for (const v in listDivions.data.data) { + arr.push(listDivions.data.data[v]) + } + setDataDivisions(arr); + } else { + NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); + } + } + const getDataProjectType = 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(DIVISI_SEARCH, payload, HEADER) + .then(res => res) + .catch((error) => error.response); + + if (result && result.data && result.data.code == 200) { + let dataRes = result.data.data || []; + setDatatable(dataRes); + setTotalPage(result.data.totalRecord); + } else { + NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); + } + } + 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(DIVISI_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 Divisi": 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 handleSearch = e => { + const value = e.target.value + setSearch(value); + setCurrentPage(1) + }; + + const handleOpenDialog = (type) => { + setOpenDialog(true) + setTypeDialog(type) + } + + 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(DIVISI_ADD, formData, HEADER) + .then(res => res) + .catch((error) => error.response); + if (result && result.data && result.data.code === 200) { + getDataProjectType() + NotificationManager.success(`Data berhasil ditambahkan`, 'Success!!'); + } else { + NotificationManager.error(`Data gagal ditambahkan`, 'Failed!!'); + } + } + + const editMaterialR = async (data) => { + let urlEdit = DIVISI_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 berhasil diubah`, 'Success!!'); + } else { + NotificationManager.error(`Data gagal diubah`, `Failed!!`); + } + } + + const toggleAddDialog = () => { + setOpenDialog(!openDialog) + } + + const onConfirmDelete = async () => { + let url = DIVISI_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 berhasil dihapus!`, 'Success!!'); + } else { + setIdDelete(0) + setAlertDelete(false) + NotificationManager.error(`Data 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 ( +
+ + + {t('deleteMsg')} + + toggleAddDialog} + typeDialog={typeDialog} + dataEdit={dataEdit} + clickOpenModal={clickOpenModal} + dataParent={allDataMenu} + dataDivisions={dataDivisions} + /> + + +

{pageName}

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