From 70d6c38539fe4fa38ebb78534d36a10025cb3517 Mon Sep 17 00:00:00 2001 From: nurkomalasari Date: Mon, 9 Jan 2023 15:21:27 +0700 Subject: [PATCH] Bug fixing export excel --- src/views/SimproV2/ProjectType/index.js | 771 +++++----- src/views/SimproV2/ResourceTools/index.js | 1321 ++++++++++------- .../SimproV2/ResourceWorker/DialogForm.js | 758 +++++----- src/views/SimproV2/ResourceWorker/index.js | 1009 ++++++------- 4 files changed, 2030 insertions(+), 1829 deletions(-) diff --git a/src/views/SimproV2/ProjectType/index.js b/src/views/SimproV2/ProjectType/index.js index d21ccb7..b703b17 100644 --- a/src/views/SimproV2/ProjectType/index.js +++ b/src/views/SimproV2/ProjectType/index.js @@ -1,377 +1,394 @@ -import * as XLSX from 'xlsx'; -import DialogForm from './DialogForm'; -import DialogInitialGantt from './DialogInitialGantt'; -import React, { useState, useEffect, useMemo } from 'react'; -import SweetAlert from 'react-bootstrap-sweetalert'; -import axios from "../../../const/interceptorApi" -import moment from 'moment' -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'; - -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 [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 ( - - Tidak ada data project type - - ) - } - } - - const renderTable = useMemo(() => { - const columns = [ - { - title: 'Action', - dataIndex: '', - key: 'x', - className:'nowrap', - render: (text, record) => <> - - handleDelete(text.id)}> - - - handleEdit(text)}> - {" "} - - handleDialogIg(text.id)}> - - , - }, - { title: 'Nama Role', dataIndex: 'name', key: 'name', className:"nowrap" }, - { title: 'Description', dataIndex: 'description', key: 'description' }, - ]; - return ( - - ) - }, [dataTable]) - - return ( -
- - cancelDelete()} - focusCancelBtn - > - Delete this data - - toggleAddDialog} - typeDialog={typeDialog} - dataEdit={dataEdit} - clickOpenModal={clickOpenModal} - dataParent={allDataMenu} - /> - - - -

{pageName}

- -
- - - - - - - - - - - - - - {renderTable} - - - - - ) -} - -export default ProjectType; +import * as XLSX from 'xlsx'; +import DialogForm from './DialogForm'; +import DialogInitialGantt from './DialogInitialGantt'; +import React, { useState, useEffect, useMemo } from 'react'; +import SweetAlert from 'react-bootstrap-sweetalert'; +import axios from "../../../const/interceptorApi" +import moment from 'moment' +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'; + +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 [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 ( + + + + ) + } + } + + const renderTable = useMemo(() => { + const columns = [ + { + title: 'Action', + dataIndex: '', + key: 'x', + className: 'nowrap', + render: (text, record) => <> + + handleDelete(text.id)}> + + + handleEdit(text)}> + {" "} + + handleDialogIg(text.id)}> + + , + }, + { title: 'Nama Role', dataIndex: 'name', key: 'name', className: "nowrap" }, + { title: 'Description', dataIndex: 'description', key: 'description' }, + ]; + return ( +
Tidak ada data project type
+ ) + }, [dataTable]) + + return ( +
+ + cancelDelete()} + focusCancelBtn + > + Delete this data + + toggleAddDialog} + typeDialog={typeDialog} + dataEdit={dataEdit} + clickOpenModal={clickOpenModal} + dataParent={allDataMenu} + /> + + + +

{pageName}

+ +
+ + + + + + + + + + + + + + {renderTable} + + + + + ) +} + +export default ProjectType; diff --git a/src/views/SimproV2/ResourceTools/index.js b/src/views/SimproV2/ResourceTools/index.js index 2986409..d38cf68 100644 --- a/src/views/SimproV2/ResourceTools/index.js +++ b/src/views/SimproV2/ResourceTools/index.js @@ -1,577 +1,744 @@ -import * as XLSX from 'xlsx'; -import DialogForm from './DialogForm'; -import DialogTools from './DialogEditReqTools'; -import React, { useState, useEffect, useMemo } from 'react'; -import SweetAlert from 'react-bootstrap-sweetalert'; -import _, { initial } from 'underscore' -import axios from "../../../const/interceptorApi" -import moment from 'moment' -import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap'; -import { DownloadOutlined } from '@ant-design/icons'; -import { NotificationContainer, NotificationManager } from 'react-notifications'; -import { Pagination, Table, Button, Tooltip, Tabs, Collapse } from 'antd'; -import { renderLabelStatus } from '../../../const/CustomFunc'; -import { - TOOLS_RESOURCE_ADD, TOOLS_RESOURCE_SEARCH, REQUEST_TOOLS_SEARCH, TOOLS_RESOURCE_EDIT, TOOLS_RESOURCE_DELETE -} from '../../../const/ApiConst'; - -const { TabPane } = Tabs; -const { Panel } = Collapse; - -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 ResourceWorker = ({ params }) => { - const token = localStorage.getItem("token") - const HEADER = { - headers: { - "Content-Type": "application/json", - "Authorization": `Bearer ${token}` - } - } - - const [alertDelete, setAlertDelete] = useState(false) - const [clickOpenModal, setClickOpenModal] = useState(false) - const [currentPage, setCurrentPage] = useState(1) - const [dataDeliveryTools, setDataDeliveryTools] = useState([]); - const [dataEdit, setDataEdit] = useState(null) - const [dataExport, setDataExport] = useState([]) - const [dataReqTools, setDataReqTools] = useState([]); - const [dataTable, setDatatable] = useState([]) - const [idDelete, setIdDelete] = useState(0) - const [idTask, setIdTask] = useState(0); - const [openDialog, setOpenDialog] = useState(false) - const [openDialogFormTools, setOpenDialogFormTools] = useState(false); - const [roleList, setRoleList] = useState([]) - const [rowsPerPage, setRowsPerPage] = useState(10) - const [search, setSearch] = useState('') - const [totalPage, setTotalPage] = useState(0) - const [typeDialog, setTypeDialog] = useState('Save') - const pageName = params.name; - - useEffect(() => { - getDataReqTools() - getDataDeliveryTools() - }, []) - - useEffect(() => { - getDataTools() - }, [search, rowsPerPage, currentPage]) - - const onShowSizeChange = (current, pageSize) => { - setRowsPerPage(pageSize) - } - - const onPagination = (current, pageSize) => { - setCurrentPage(current) - } - - const getDataTools = async () => { - - let start = 0; - - if (currentPage !== 1 && currentPage > 1) { - start = (currentPage * rowsPerPage) - rowsPerPage - } - - const payload = { - "paging": { - "start": start, - "length": rowsPerPage - }, - "columns": [ - { - "name": "name", - "logic_operator": "ilike", - "value": search, - "operator": "AND" - } - ], - "joins": [], - "orders": { - "columns": [ - "id" - ], - "ascending": false - } - } - - const result = await axios - .post(TOOLS_RESOURCE_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 getDataReqTools = 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, config) - .then(res => res) - .catch((error) => error.response); - - if (result && result.data && result.data.code == 200) { - const group = _.chain(result.data.data) - .groupBy("join_first_nama") - .map((value, key) => ({ header: key, data: value })) - .value() - setDataReqTools(group); - } else { - NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); - } - } - - const getDataDeliveryTools = 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, config) - .then(res => res) - .catch((error) => error.response); - - if (result && result.data && result.data.code == 200) { - const group = _.chain(result.data.data) - .groupBy("join_first_nama") - .map((value, key) => ({ header: key, data: value })) - .value() - setDataDeliveryTools(group); - } 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 }, - "joins": [], - "orders": { "columns": ["id"], "ascending": false } - } - - if (parseInt(role_id) !== 1) { - payload["columns"] = [ - { "name": "id", "logic_operator": "=", "value": proyek_id, "operator": "AND" } - ] - } - - 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 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) : "-", - } - excelData.push(dataRow) - }) - await setDataExport(excelData); - } else { - NotificationManager.error('Gagal Export Data!!', 'Failed'); - } - } - - const handleEdit = (data) => { - setDataEdit(data) - handleOpenDialog('Edit'); - } - - const handleDelete = async (id) => { - await setAlertDelete(true) - await setIdDelete(id) - } - - const handleCloseDialog = (type, data) => { - if (type === "save") { - saveTools(data); - } else if (type === "edit") { - editTools(data); - } - setDataEdit([]) - setOpenDialog(false) - } - - const saveTools = async (data) => { - const formData = data - const result = await axios.post(TOOLS_RESOURCE_ADD, formData, HEADER) - .then(res => res) - .catch((error) => error.response); - - if (result && result.data && result.data.code === 200) { - getDataTools(); - NotificationManager.success(`Data tools berhasil ditambah`, 'Success!!'); - } else { - NotificationManager.error(`${result.data.message}`, 'Failed!!'); - } - } - - const editTools = async (data) => { - - let urlEdit = TOOLS_RESOURCE_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) { - getDataTools(); - NotificationManager.success(`Data tools berhasil diedit`, 'Success!!'); - } else { - NotificationManager.error(`Data tools gagal di edit`, `Failed!!`); - } - } - - const toggleAddDialog = () => { - setOpenDialog(!openDialog) - } - - const onConfirmDelete = async () => { - let url = TOOLS_RESOURCE_DELETE(idDelete); - - const result = await axios.delete(url, config) - .then(res => res) - .catch((error) => error.response); - - if (result && result.data && result.data.code === 200) { - getDataTools() - setIdDelete(0) - setAlertDelete(false) - NotificationManager.success(`Data tools berhasil dihapus!`, 'Success!!'); - } else { - setIdDelete(0) - setAlertDelete(false) - NotificationManager.error(`Data tools gagal dihapus!}`, 'Failed!!'); - } - } - - const cancelDelete = () => { - setAlertDelete(false) - setIdDelete(0) - } - - const RenderTable = useMemo(() => { - const columns = [ - { - title: 'Action', - dataIndex: '', - key: 'x', - className: 'nowrap', - render: (text, record) => <> - - - - - - - , - }, - { title: 'Name', dataIndex: 'name', key: 'name' }, - { title: 'Asset Type', dataIndex: 'asset_type', key: 'asset_type' }, - { title: 'UOM', dataIndex: 'uom', key: 'uom' }, - { title: 'QTY', dataIndex: 'qty', key: 'qty' }, - { title: 'Description', dataIndex: 'description', key: 'description' }, - ]; - return ( -
- ) - }, [dataTable]) - - const RenderToolsResource = () => - -

{pageName}

- - - - - - - - - - - - - - - - {RenderTable} - - - - - const handleClickEditReqTools = data => { - setIdTask(data.id) - setDataEdit(data) - setOpenDialogFormTools(true) - } - - const handleCloseDialogFormTools = () => { - setOpenDialogFormTools(false); - getDataReqTools() - getDataDeliveryTools() - getDataTools() - } - - - const CompRenderTable = (data, type) => { - - let columns = [ - { - title: 'Action', - dataIndex: '', - key: 'x', - render: (text, record) => <> - {type == "delivery" ? "-" : ( - <> - - - - - - )} - , - }, - { title: 'Status', dataIndex: 'status', key: 'status', render: (text, record) => renderLabelStatus(text) }, - { title: 'Name', dataIndex: 'asset_name', key: 'asset_name' }, - { title: 'Asset Type', dataIndex: 'asset_type', key: 'asset_type' }, - { title: 'UOM', dataIndex: 'uom', key: 'uom' }, - { title: 'QTY', dataIndex: 'qty', key: 'qty' }, - ]; - - if (type === 'request') { - columns.push({ title: 'QTY Received', dataIndex: 'qty_received', key: 'qty_received' }); - } - columns.push({ title: 'Ownership Status', dataIndex: 'ownership_status', key: 'ownership_status' }); - columns.push({ title: 'Ownership Name', dataIndex: 'ownership_name', key: 'ownership_name' }); - - return ( -
- ) - } - - const RenderToolsRequest = () => - -

Tools Request

- - - - - - - - - - - - - {dataReqTools.length > 0 ? - - {dataReqTools.map(res => { - return ( - - {CompRenderTable(res.data, "request")} - - ) - })} - - : -
No data available
- } - - - - const RenderToolsDeliver = () => - -

Tools Delivery

- - - - - - - - - - - - - {dataDeliveryTools.length > 0 ? - - {dataDeliveryTools.map(res => { - return ( - - {CompRenderTable(res.data, "delivery")} - - ) - })} - - : -
No data available
- } - - - - const RenderDialogFormTools = useMemo(() => ( - setOpenDialogFormTools(false)} - toggleDialog={() => setOpenDialogFormTools(!openDialogFormTools)} - handleCloseDialogFormTools={() => handleCloseDialogFormTools()} - idTask={idTask} - dataEdit={dataEdit} - /> - ), [openDialogFormTools]) - - return ( -
- - cancelDelete()} - focusCancelBtn - > - Delete this data - - toggleAddDialog} - typeDialog={typeDialog} - dataEdit={dataEdit} - clickOpenModal={clickOpenModal} - roleList={roleList} - /> - - {RenderDialogFormTools} - - - - {RenderToolsResource()} - - - {RenderToolsRequest()} - - - {RenderToolsDeliver()} - - -
- ) -} - -export default ResourceWorker; +import * as XLSX from 'xlsx'; +import DialogForm from './DialogForm'; +import DialogTools from './DialogEditReqTools'; +import React, { useState, useEffect, useMemo } from 'react'; +import SweetAlert from 'react-bootstrap-sweetalert'; +import _, { initial } from 'underscore' +import axios from "../../../const/interceptorApi" +import moment from 'moment' +import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap'; +import { DownloadOutlined } from '@ant-design/icons'; +import { NotificationContainer, NotificationManager } from 'react-notifications'; +import { Pagination, Table, Button, Tooltip, Tabs, Collapse } from 'antd'; +import { renderLabelStatus } from '../../../const/CustomFunc'; +import { + TOOLS_RESOURCE_ADD, TOOLS_RESOURCE_SEARCH, REQUEST_TOOLS_SEARCH, TOOLS_RESOURCE_EDIT, TOOLS_RESOURCE_DELETE +} from '../../../const/ApiConst'; + +const { TabPane } = Tabs; +const { Panel } = Collapse; + +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 ResourceWorker = ({ params }) => { + const token = localStorage.getItem("token") + const HEADER = { + headers: { + "Content-Type": "application/json", + "Authorization": `Bearer ${token}` + } + } + + const [alertDelete, setAlertDelete] = useState(false) + const [clickOpenModal, setClickOpenModal] = useState(false) + const [currentPage, setCurrentPage] = useState(1) + 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) + const [idTask, setIdTask] = useState(0); + const [openDialog, setOpenDialog] = useState(false) + const [openDialogFormTools, setOpenDialogFormTools] = useState(false); + const [roleList, setRoleList] = useState([]) + const [rowsPerPage, setRowsPerPage] = useState(10) + const [search, setSearch] = useState('') + const [totalPage, setTotalPage] = useState(0) + const [typeDialog, setTypeDialog] = useState('Save') + const pageName = params.name; + + useEffect(() => { + getDataReqTools() + getDataDeliveryTools() + }, []) + + useEffect(() => { + 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) + } + + const onPagination = (current, pageSize) => { + setCurrentPage(current) + } + + const getDataTools = async () => { + + let start = 0; + + if (currentPage !== 1 && currentPage > 1) { + start = (currentPage * rowsPerPage) - rowsPerPage + } + + const payload = { + "paging": { + "start": start, + "length": rowsPerPage + }, + "columns": [ + { + "name": "name", + "logic_operator": "ilike", + "value": search, + "operator": "AND" + } + ], + "joins": [], + "orders": { + "columns": [ + "id" + ], + "ascending": false + } + } + + const result = await axios + .post(TOOLS_RESOURCE_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 getDataReqTools = 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, config) + .then(res => res) + .catch((error) => error.response); + + if (result && result.data && result.data.code == 200) { + const group = _.chain(result.data.data) + .groupBy("join_first_nama") + .map((value, key) => ({ header: key, data: value })) + .value() + setDataReqTools(group); + } else { + NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); + } + } + + const getDataDeliveryTools = 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, config) + .then(res => res) + .catch((error) => error.response); + + if (result && result.data && result.data.code == 200) { + const group = _.chain(result.data.data) + .groupBy("join_first_nama") + .map((value, key) => ({ header: key, data: value })) + .value() + setDataDeliveryTools(group); + } 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 handleExportExcelToolsResource = async () => { + + const payload = { + "paging": { "start": 0, "length": -1 }, + "joins": [], + "orders": { "columns": ["id"], "ascending": false } + } + + if (parseInt(role_id) !== 1) { + payload["columns"] = [ + { "name": "id", "logic_operator": "=", "value": proyek_id, "operator": "AND" } + ] + } + + 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 setDataExport(excelData); + } else { + NotificationManager.error('Gagal Export Data!!', 'Failed'); + } + } + + 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'); + } + + const handleDelete = async (id) => { + await setAlertDelete(true) + await setIdDelete(id) + } + + const handleCloseDialog = (type, data) => { + if (type === "save") { + saveTools(data); + } else if (type === "edit") { + editTools(data); + } + setDataEdit([]) + setOpenDialog(false) + } + + const saveTools = async (data) => { + const formData = data + const result = await axios.post(TOOLS_RESOURCE_ADD, formData, HEADER) + .then(res => res) + .catch((error) => error.response); + + if (result && result.data && result.data.code === 200) { + getDataTools(); + NotificationManager.success(`Data tools berhasil ditambah`, 'Success!!'); + } else { + NotificationManager.error(`${result.data.message}`, 'Failed!!'); + } + } + + const editTools = async (data) => { + + let urlEdit = TOOLS_RESOURCE_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) { + getDataTools(); + NotificationManager.success(`Data tools berhasil diedit`, 'Success!!'); + } else { + NotificationManager.error(`Data tools gagal di edit`, `Failed!!`); + } + } + + const toggleAddDialog = () => { + setOpenDialog(!openDialog) + } + + const onConfirmDelete = async () => { + let url = TOOLS_RESOURCE_DELETE(idDelete); + + const result = await axios.delete(url, config) + .then(res => res) + .catch((error) => error.response); + + if (result && result.data && result.data.code === 200) { + getDataTools() + setIdDelete(0) + setAlertDelete(false) + NotificationManager.success(`Data tools berhasil dihapus!`, 'Success!!'); + } else { + setIdDelete(0) + setAlertDelete(false) + NotificationManager.error(`Data tools gagal dihapus!}`, 'Failed!!'); + } + } + + const cancelDelete = () => { + setAlertDelete(false) + setIdDelete(0) + } + + const RenderTable = useMemo(() => { + const columns = [ + { + title: 'Action', + dataIndex: '', + key: 'x', + className: 'nowrap', + render: (text, record) => <> + + + + + + + , + }, + { title: 'Name', dataIndex: 'name', key: 'name' }, + { title: 'Asset Type', dataIndex: 'asset_type', key: 'asset_type' }, + { title: 'UOM', dataIndex: 'uom', key: 'uom' }, + { title: 'QTY', dataIndex: 'qty', key: 'qty' }, + { title: 'Description', dataIndex: 'description', key: 'description' }, + ]; + return ( +
+ ) + }, [dataTable]) + + const RenderToolsResource = () => + +

{pageName}

+ + + + + + + + + + + + + + + + {RenderTable} + + + + + const handleClickEditReqTools = data => { + setIdTask(data.id) + setDataEdit(data) + setOpenDialogFormTools(true) + } + + const handleCloseDialogFormTools = () => { + setOpenDialogFormTools(false); + getDataReqTools() + getDataDeliveryTools() + getDataTools() + } + + + const CompRenderTable = (data, type) => { + + let columns = [ + { + title: 'Action', + dataIndex: '', + key: 'x', + render: (text, record) => <> + {type == "delivery" ? "-" : ( + <> + + + + + + )} + , + }, + { title: 'Status', dataIndex: 'status', key: 'status', render: (text, record) => renderLabelStatus(text) }, + { title: 'Name', dataIndex: 'asset_name', key: 'asset_name' }, + { title: 'Asset Type', dataIndex: 'asset_type', key: 'asset_type' }, + { title: 'UOM', dataIndex: 'uom', key: 'uom' }, + { title: 'QTY', dataIndex: 'qty', key: 'qty' }, + ]; + + if (type === 'request') { + columns.push({ title: 'QTY Received', dataIndex: 'qty_received', key: 'qty_received' }); + } + columns.push({ title: 'Ownership Status', dataIndex: 'ownership_status', key: 'ownership_status' }); + columns.push({ title: 'Ownership Name', dataIndex: 'ownership_name', key: 'ownership_name' }); + + return ( +
+ ) + } + + const RenderToolsRequest = () => + +

Tools Request

+ + + + + + + + + + + + + {dataReqTools.length > 0 ? + + {dataReqTools.map(res => { + return ( + + {CompRenderTable(res.data, "request")} + + ) + })} + + : +
No data available
+ } + + + + const RenderToolsDeliver = () => + +

Tools Delivery

+ + + + + + + + + + + + + {dataDeliveryTools.length > 0 ? + + {dataDeliveryTools.map(res => { + return ( + + {CompRenderTable(res.data, "delivery")} + + ) + })} + + : +
No data available
+ } + + + + const RenderDialogFormTools = useMemo(() => ( + setOpenDialogFormTools(false)} + toggleDialog={() => setOpenDialogFormTools(!openDialogFormTools)} + handleCloseDialogFormTools={() => handleCloseDialogFormTools()} + idTask={idTask} + dataEdit={dataEdit} + /> + ), [openDialogFormTools]) + + return ( +
+ + cancelDelete()} + focusCancelBtn + > + Delete this data + + toggleAddDialog} + typeDialog={typeDialog} + dataEdit={dataEdit} + clickOpenModal={clickOpenModal} + roleList={roleList} + /> + + {RenderDialogFormTools} + + + + {RenderToolsResource()} + + + {RenderToolsRequest()} + + + {RenderToolsDeliver()} + + +
+ ) +} + +export default ResourceWorker; diff --git a/src/views/SimproV2/ResourceWorker/DialogForm.js b/src/views/SimproV2/ResourceWorker/DialogForm.js index 9182ffa..e293ea4 100644 --- a/src/views/SimproV2/ResourceWorker/DialogForm.js +++ b/src/views/SimproV2/ResourceWorker/DialogForm.js @@ -1,379 +1,379 @@ -import React, { useEffect, useState } from 'react' -import { - 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'; -import 'antd/dist/antd.css'; -import { formatRupiah, formatNumber } from '../../../const/CustomFunc' -import { ROLE_SEARCH } from '../../../const/ApiConst' -const { Option } = Select - -const token = window.localStorage.getItem('token'); -const config = { - headers: - { - Authorization: `Bearer ${token}`, - "Content-type": `application/json` - } -}; - -const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, roleList, divisiList }) => { - 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') - - 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 = ''; - - 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(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('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 - } - - if(birthDate && birthDate!=""){ - data['birth_date'] = birthDate; - } - - closeDialog('edit', data); - } - } - - const handleCancel = () => { - closeDialog('cancel', 'none') - } - - const setupSelectRole = () => { - return ( - <> - {roleList.map((val, index) => { - return ( - - ) - })} - - ) - } - - const setupSelectDivisi = () => { - return ( - <> - {divisiList.map((val, index) => { - return ( - - ) - })} - - ) - } - - const renderForm = () => { - return ( -
- - - - - - {/* setKtpNumber(e.target.value.replace(/[^0-9]/g, ''))} placeholder={`Input NIK (KTP)...`} maxLength="16" /> */} - setKtpNumber(e.target.value)} placeholder={`Input NIK (KTP)...`} maxLength="16" /> - - - - - - setResourceName(e.target.value)} placeholder={`Input resource name...`} /> - - - - {/* {typeDialog === 'Save' && - - - - - setPassword(e.target.value)} placeholder={`Password...`} /> - - - - - - setRetryPassword(e.target.value)} placeholder={`Retry password...`} /> - - - - } */} - - - - - - - - - - - - setPhoneNo(e.target.value.replace(/[^0-9]/g, ''))} placeholder={`Input phone number...`} maxLength="15" /> - - - - - - - - setEmail(e.target.value)} placeholder={`Input email...`} /> - - - - - - - - - - - - - - setBirthPlace(e.target.value)} placeholder={`Input birth place...`} /> - - - - - - setBirthDate(date)} /> - - - - - - - - - - - - - - {/* */} - - - - - - - - - - - - - - setAddress(e.target.value)} placeholder="Input address..." /> - - - - - ) - } - - const renderForm2 = () => { - return ( - - - - - - setEmail(e.target.value)} placeholder={`Email...`} /> - - - - - - setUsername(e.target.value)} placeholder={`Username...`} /> - - - - - - - - setPassword(e.target.value)} placeholder={`Password...`} /> - - - - - - setRetryPassword(e.target.value)} placeholder={`Retry password...`} /> - - - - - - - ) - } - - - return ( - <> - - {typeDialog == "Save" ? `Add` : "Edit"} Human Resource - - {typeDialog !== "Set" ? renderForm() : renderForm2()} - - - {' '} - - - - - ) - -} - -export default DialogForm; \ No newline at end of file +import React, { useEffect, useState } from 'react' +import { + 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'; +import 'antd/dist/antd.css'; +import { formatRupiah, formatNumber } from '../../../const/CustomFunc' +import { ROLE_SEARCH } from '../../../const/ApiConst' +const { Option } = Select + +const token = window.localStorage.getItem('token'); +const config = { + headers: + { + Authorization: `Bearer ${token}`, + "Content-type": `application/json` + } +}; + +const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, roleList, divisiList }) => { + 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') + + 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 = ''; + + 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 (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('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 + } + + if (birthDate && birthDate != "") { + data['birth_date'] = birthDate; + } + + closeDialog('edit', data); + } + } + + const handleCancel = () => { + closeDialog('cancel', 'none') + } + + const setupSelectRole = () => { + return ( + <> + {roleList.map((val, index) => { + return ( + + ) + })} + + ) + } + + const setupSelectDivisi = () => { + return ( + <> + {divisiList.map((val, index) => { + return ( + + ) + })} + + ) + } + + const renderForm = () => { + return ( + + + + + + + {/* setKtpNumber(e.target.value.replace(/[^0-9]/g, ''))} placeholder={`Input NIK (KTP)...`} maxLength="16" /> */} + setKtpNumber(e.target.value)} placeholder={`Input NIK (KTP)...`} maxLength="16" /> + + + + + + setResourceName(e.target.value)} placeholder={`Input resource name...`} /> + + + + {/* {typeDialog === 'Save' && + + + + + setPassword(e.target.value)} placeholder={`Password...`} /> + + + + + + setRetryPassword(e.target.value)} placeholder={`Retry password...`} /> + + + + } */} + + + + + + + + + + + + setPhoneNo(e.target.value.replace(/[^0-9]/g, ''))} placeholder={`Input phone number...`} maxLength="15" /> + + + + + + + + setEmail(e.target.value)} placeholder={`Input email...`} /> + + + + + + + + + + + + + + setBirthPlace(e.target.value)} placeholder={`Input birth place...`} /> + + + + + + setBirthDate(date)} /> + + + + + + + + + + + + + + {/* */} + + + + + + + + + + + + + + setAddress(e.target.value)} placeholder="Input address..." /> + + + + + ) + } + + const renderForm2 = () => { + return ( + + + + + + setEmail(e.target.value)} placeholder={`Email...`} /> + + + + + + setUsername(e.target.value)} placeholder={`Username...`} /> + + + + + + + + setPassword(e.target.value)} placeholder={`Password...`} /> + + + + + + setRetryPassword(e.target.value)} placeholder={`Retry password...`} /> + + + + + + + ) + } + + + return ( + <> + + {typeDialog == "Save" ? `Add` : "Edit"} Human Resource + + {typeDialog !== "Set" ? renderForm() : renderForm2()} + + + {' '} + + + + + ) + +} + +export default DialogForm; diff --git a/src/views/SimproV2/ResourceWorker/index.js b/src/views/SimproV2/ResourceWorker/index.js index d1c2911..49c300d 100644 --- a/src/views/SimproV2/ResourceWorker/index.js +++ b/src/views/SimproV2/ResourceWorker/index.js @@ -1,496 +1,513 @@ -import * as XLSX from 'xlsx'; -import DialogForm from './DialogForm'; -import DialogFormUserShift from './DialogFormUserShift'; -import React, { useState, useEffect, useMemo } from 'react'; -import SweetAlert from 'react-bootstrap-sweetalert'; -import axios from "../../../const/interceptorApi" -import moment from 'moment' -import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap'; -import { DownloadOutlined } from '@ant-design/icons'; -import { NotificationContainer, NotificationManager } from 'react-notifications'; -import { Pagination, Table, Button, Tooltip } from 'antd'; -import { - PROYEK_SEARCH, USER_ADD, USER_SEARCH, USER_EDIT, USER_DELETE, ROLE_SEARCH, DIVISI_SEARCH, USER_SHIFT_ADD -} from '../../../const/ApiConst'; - -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 ResourceWorker = ({ params }) => { - const token = localStorage.getItem("token") - const HEADER = { - headers: { - "Content-Type": "application/json", - "Authorization": `Bearer ${token}` - } - } - const [alertDelete, setAlertDelete] = useState(false) - const [clickOpenModal, setClickOpenModal] = useState(false) - const [clickOpenModalShift, setClickOpenModalShift] = useState(false) - const [currentPage, setCurrentPage] = useState(1) - const [dataEdit, setDataEdit] = useState([]) - const [dataExport, setDataExport] = useState([]) - const [dataTable, setDatatable] = useState([]) - const [divisiList, setDivisiList] = useState([]) - const [idDelete, setIdDelete] = useState(0) - const [openDialog, setOpenDialog] = useState(false) - const [openDialogShift, setOpenDialogShift] = useState(false) - const [roleList, setRoleList] = useState([]) - const [rowsPerPage, setRowsPerPage] = useState(10) - const [search, setSearch] = useState('') - const [totalPage, setTotalPage] = useState(0) - const [typeDialog, setTypeDialog] = useState('Save') - const [typeDialogShift, setTypeDialogShift] = useState('Save') - const pageName = params.name; - - useEffect(() => { - getRoleList() - getDivisiList() - }, []) - - useEffect(() => { - getDataUser() - }, [search, rowsPerPage, currentPage]) - - const onShowSizeChange = (current, pageSize) => { - setRowsPerPage(pageSize) - } - - const onPagination = (current, pageSize) => { - setCurrentPage(current) - } - - const getRoleList = async () => { - const formData = { - "paging": { "start": 0, "length": -1 }, - "orders": { "columns": ["id"], "ascending": false } - } - - const result = await axios - .post(ROLE_SEARCH, formData, config) - .then(res => res) - .catch((error) => error.response); - - if (result && result.data && result.data.code == 200) { - setRoleList(result.data.data); - } - } - - const getDivisiList = async () => { - const formData = { - "paging": { "start": 0, "length": -1 }, - "orders": { "columns": ["id"], "ascending": false } - } - - const result = await axios - .post(DIVISI_SEARCH, formData, config) - .then(res => res) - .catch((error) => error.response); - - if (result && result.data && result.data.code == 200) { - setDivisiList(result.data.data); - } else { - NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); - } - } - - const getDataUser = async () => { - - let start = 0; - - if (currentPage !== 1 && currentPage > 1) { - start = (currentPage * rowsPerPage) - rowsPerPage - } - - const payload = { - "paging": { - "start": start, - "length": rowsPerPage - }, - "columns": [], - "group_column": { - "operator": "AND", - "group_operator": "OR", - "where": [ - { - "name": "name", - "logic_operator": "~*", - "value": search - }, - { - "name": "ktp_number", - "logic_operator": "~*", - "value": search - }, - { - "name": "name", - "logic_operator": "~*", - "value": search, - "table_name": "m_divisi" - }, - { - "name": "employee_type", - "logic_operator": "~*", - "value": search - }, - { - "name": "name", - "logic_operator": "~*", - "value": search, - "table_name": "m_roles" - }, - { - "name": "phone_number", - "logic_operator": "~*", - "value": search - }, - { - "name": "email", - "logic_operator": "~*", - "value": search - }, - { - "name": "status_resource", - "logic_operator": "~*", - "value": search - }, - ] - }, - "joins": [ - { - "name": "m_roles", - "column_join": "role_id", - "column_results": [ - "name", - "description" - ] - }, - { - "name": "m_divisi", - "column_join": "divisi_id", - "column_results": [ - "name" - ] - } - ], - "orders": { - "columns": [ - "id" - ], - "ascending": false - } - } - - const result = await axios - .post(USER_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 = async (type) => { - await setTypeDialog(type) - setOpenDialog(true) - - } - - const handleOpenDialogShift = async (type) => { - await setTypeDialogShift(type) - setOpenDialogShift(true) - - } - - const handleExportExcel = async () => { - - const payload = { - "paging": { "start": 0, "length": -1 }, - "columns": [ - { "name": "name", "logic_operator": "ilike", "value": search, "operator": "AND" } - ], - "joins": [], - "orders": { "columns": ["id"], "ascending": false } - } - - if (parseInt(role_id) !== 1) { - payload["columns"] = [ - { "name": "id", "logic_operator": "=", "value": proyek_id, "operator": "AND" } - ] - } - - const result = await axios - .post(PROYEK_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 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) : "-", - } - excelData.push(dataRow) - }) - await setDataExport(excelData); - } else { - NotificationManager.error('Gagal Export Data!!', 'Failed'); - } - } - - const handleEdit = (data) => { - setDataEdit(data) - handleOpenDialog('Edit'); - } - - const handleSetWorker = async (data) => { - await setDataEdit(data) - handleOpenDialog('Set'); - } - - const handleSetUserShift = async (data) => { - await setDataEdit(data) - handleOpenDialogShift('Save'); - } - - const handleDelete = async (id) => { - await setAlertDelete(true) - await setIdDelete(id) - } - - const handleCloseDialog = (type, data) => { - if (type === "save") { - saveUser(data); - } else if (type === "edit") { - editUser(data); - } - setDataEdit([]) - setOpenDialog(false) - } - - const handleCloseDialogShift = (type, data) => { - if (type === "save") { - saveUserShift(data); - } - setDataEdit([]) - setOpenDialogShift(false) - } - - const saveUser = async (data) => { - const formData = data - const result = await axios.post(USER_ADD, formData, HEADER) - .then(res => res) - .catch((error) => error.response); - - if (result && result.data && result.data.code === 200) { - getDataUser(); - NotificationManager.success(`Data resource berhasil ditambah`, 'Success!!'); - } else { - NotificationManager.error(`${result.data.message}`, 'Failed!!'); - } - } - - const saveUserShift = async (data) => { - const formData = data - const result = await axios.post(USER_SHIFT_ADD, formData, HEADER) - .then(res => res) - .catch((error) => error.response); - - if (result && result.data && result.data.code === 200) { - getDataUser(); - NotificationManager.success(`Data resource berhasil ditambah`, 'Success!!'); - } else { - NotificationManager.error(`${result.data.message}`, 'Failed!!'); - } - } - - const editUser = async (data) => { - - let urlEdit = USER_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) { - getDataUser(); - NotificationManager.success(`Data resource berhasil diedit`, 'Success!!'); - } else { - NotificationManager.error(`Data resource gagal di edit`, `Failed!!`); - } - } - - const toggleAddDialog = () => { - setOpenDialog(!openDialog) - } - - const toggleAddDialogShift = () => { - setOpenDialogShift(!openDialogShift) - } - - const onConfirmDelete = async () => { - let url = USER_DELETE(idDelete); - - const result = await axios.delete(url, config) - .then(res => res) - .catch((error) => error.response); - - if (result && result.data && result.data.code === 200) { - getDataUser() - setIdDelete(0) - setAlertDelete(false) - NotificationManager.success(`Data user berhasil dihapus!`, 'Success!!'); - } else { - setIdDelete(0) - setAlertDelete(false) - NotificationManager.error(`Data user gagal dihapus!}`, 'Failed!!'); - } - } - - const cancelDelete = () => { - setAlertDelete(false) - setIdDelete(0) - } - - const RenderTable = useMemo(() => { - const columns = [ - { - title: 'Action', - dataIndex: '', - key: 'x', - render: (text, record) => <> - - - - - - - - - - - , - }, - - { title: 'NIK (KTP/ ID Card)', dataIndex: 'ktp_number', key: 'ktp_number' }, - { title: 'Employee Name', dataIndex: 'name', key: 'name' }, - { title: 'Divisi', dataIndex: 'join_second_name', key: 'join_second_name' }, - { title: 'Employee Type', dataIndex: 'employee_type', key: 'employee_type' }, - { - title: 'Role', - dataIndex: 'join_first_name', - key: 'join_first_name', - render: (text, record) => <>{record.join_first_name} - }, - { title: 'Phone No.', dataIndex: 'phone_number', key: 'phone_number' }, - { title: 'Email', dataIndex: 'email', key: 'email' }, - { title: 'Status', dataIndex: 'status_resource', key: 'status_status' } - ]; - return ( -
- ) - }, [dataTable]) - - return ( -
- - cancelDelete()} - focusCancelBtn - > - Delete this data - - toggleAddDialog} - typeDialog={typeDialog} - dataEdit={dataEdit} - clickOpenModal={clickOpenModal} - roleList={roleList} - divisiList={divisiList} - /> - toggleAddDialogShift} - typeDialog={typeDialogShift} - dataEdit={dataEdit} - clickOpenModal={clickOpenModalShift} - /> - - -

{pageName}

- -
- - - - - - - - - - - - - - {RenderTable} - - - - - ) -} - -export default ResourceWorker; +import * as XLSX from 'xlsx'; +import DialogForm from './DialogForm'; +import DialogFormUserShift from './DialogFormUserShift'; +import React, { useState, useEffect, useMemo } from 'react'; +import SweetAlert from 'react-bootstrap-sweetalert'; +import axios from "../../../const/interceptorApi" +import moment from 'moment' +import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap'; +import { DownloadOutlined } from '@ant-design/icons'; +import { NotificationContainer, NotificationManager } from 'react-notifications'; +import { Pagination, Table, Button, Tooltip } from 'antd'; +import { + PROYEK_SEARCH, USER_ADD, USER_SEARCH, USER_EDIT, USER_DELETE, ROLE_SEARCH, DIVISI_SEARCH, USER_SHIFT_ADD +} from '../../../const/ApiConst'; + +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 ResourceWorker = ({ params }) => { + const token = localStorage.getItem("token") + const HEADER = { + headers: { + "Content-Type": "application/json", + "Authorization": `Bearer ${token}` + } + } + const [alertDelete, setAlertDelete] = useState(false) + const [clickOpenModal, setClickOpenModal] = useState(false) + const [clickOpenModalShift, setClickOpenModalShift] = useState(false) + const [currentPage, setCurrentPage] = useState(1) + const [dataEdit, setDataEdit] = useState([]) + const [dataExport, setDataExport] = useState([]) + const [dataTable, setDatatable] = useState([]) + const [divisiList, setDivisiList] = useState([]) + const [idDelete, setIdDelete] = useState(0) + const [openDialog, setOpenDialog] = useState(false) + const [openDialogShift, setOpenDialogShift] = useState(false) + const [roleList, setRoleList] = useState([]) + const [rowsPerPage, setRowsPerPage] = useState(10) + const [search, setSearch] = useState('') + const [totalPage, setTotalPage] = useState(0) + const [typeDialog, setTypeDialog] = useState('Save') + const [typeDialogShift, setTypeDialogShift] = useState('Save') + const pageName = params.name; + + useEffect(() => { + getRoleList() + getDivisiList() + }, []) + + useEffect(() => { + getDataUser() + }, [search, rowsPerPage, currentPage]) + + useEffect(() => { + const cekData = dataExport || [] + if (cekData.length > 0) { + exportExcel() + } + }, [dataExport]) + + const onShowSizeChange = (current, pageSize) => { + setRowsPerPage(pageSize) + } + + const onPagination = (current, pageSize) => { + setCurrentPage(current) + } + + const getRoleList = async () => { + const formData = { + "paging": { "start": 0, "length": -1 }, + "orders": { "columns": ["id"], "ascending": false } + } + + const result = await axios + .post(ROLE_SEARCH, formData, config) + .then(res => res) + .catch((error) => error.response); + + if (result && result.data && result.data.code == 200) { + setRoleList(result.data.data); + } + } + + const getDivisiList = async () => { + const formData = { + "paging": { "start": 0, "length": -1 }, + "orders": { "columns": ["id"], "ascending": false } + } + + const result = await axios + .post(DIVISI_SEARCH, formData, config) + .then(res => res) + .catch((error) => error.response); + + if (result && result.data && result.data.code == 200) { + setDivisiList(result.data.data); + } else { + NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); + } + } + + const getDataUser = async () => { + + let start = 0; + + if (currentPage !== 1 && currentPage > 1) { + start = (currentPage * rowsPerPage) - rowsPerPage + } + + const payload = { + "paging": { + "start": start, + "length": rowsPerPage + }, + "columns": [], + "group_column": { + "operator": "AND", + "group_operator": "OR", + "where": [ + { + "name": "name", + "logic_operator": "~*", + "value": search + }, + { + "name": "ktp_number", + "logic_operator": "~*", + "value": search + }, + { + "name": "name", + "logic_operator": "~*", + "value": search, + "table_name": "m_divisi" + }, + { + "name": "employee_type", + "logic_operator": "~*", + "value": search + }, + { + "name": "name", + "logic_operator": "~*", + "value": search, + "table_name": "m_roles" + }, + { + "name": "phone_number", + "logic_operator": "~*", + "value": search + }, + { + "name": "email", + "logic_operator": "~*", + "value": search + }, + { + "name": "status_resource", + "logic_operator": "~*", + "value": search + }, + ] + }, + "joins": [ + { + "name": "m_roles", + "column_join": "role_id", + "column_results": [ + "name", + "description" + ] + }, + { + "name": "m_divisi", + "column_join": "divisi_id", + "column_results": [ + "name" + ] + } + ], + "orders": { + "columns": [ + "id" + ], + "ascending": false + } + } + + const result = await axios + .post(USER_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 = async (type) => { + await setTypeDialog(type) + setOpenDialog(true) + + } + + const handleOpenDialogShift = async (type) => { + await setTypeDialogShift(type) + setOpenDialogShift(true) + + } + + const handleExportExcel = async () => { + + const payload = { + "paging": { "start": 0, "length": -1 }, + "columns": [ + { "name": "name", "logic_operator": "ilike", "value": search, "operator": "AND" } + ], + "joins": [], + "orders": { "columns": ["id"], "ascending": false } + } + + if (parseInt(role_id) !== 1) { + payload["columns"] = [ + { "name": "id", "logic_operator": "=", "value": proyek_id, "operator": "AND" } + ] + } + + const result = await axios + .post(PROYEK_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 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) : "-", + } + 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 handleSetWorker = async (data) => { + await setDataEdit(data) + handleOpenDialog('Set'); + } + + const handleSetUserShift = async (data) => { + await setDataEdit(data) + handleOpenDialogShift('Save'); + } + + const handleDelete = async (id) => { + await setAlertDelete(true) + await setIdDelete(id) + } + + const handleCloseDialog = (type, data) => { + if (type === "save") { + saveUser(data); + } else if (type === "edit") { + editUser(data); + } + setDataEdit([]) + setOpenDialog(false) + } + + const handleCloseDialogShift = (type, data) => { + if (type === "save") { + saveUserShift(data); + } + setDataEdit([]) + setOpenDialogShift(false) + } + + const saveUser = async (data) => { + const formData = data + const result = await axios.post(USER_ADD, formData, HEADER) + .then(res => res) + .catch((error) => error.response); + + if (result && result.data && result.data.code === 200) { + getDataUser(); + NotificationManager.success(`Data resource berhasil ditambah`, 'Success!!'); + } else { + NotificationManager.error(`${result.data.message}`, 'Failed!!'); + } + } + + const saveUserShift = async (data) => { + const formData = data + const result = await axios.post(USER_SHIFT_ADD, formData, HEADER) + .then(res => res) + .catch((error) => error.response); + + if (result && result.data && result.data.code === 200) { + getDataUser(); + NotificationManager.success(`Data resource berhasil ditambah`, 'Success!!'); + } else { + NotificationManager.error(`${result.data.message}`, 'Failed!!'); + } + } + + const editUser = async (data) => { + + let urlEdit = USER_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) { + getDataUser(); + NotificationManager.success(`Data resource berhasil diedit`, 'Success!!'); + } else { + NotificationManager.error(`Data resource gagal di edit`, `Failed!!`); + } + } + + const toggleAddDialog = () => { + setOpenDialog(!openDialog) + } + + const toggleAddDialogShift = () => { + setOpenDialogShift(!openDialogShift) + } + + const onConfirmDelete = async () => { + let url = USER_DELETE(idDelete); + + const result = await axios.delete(url, config) + .then(res => res) + .catch((error) => error.response); + + if (result && result.data && result.data.code === 200) { + getDataUser() + setIdDelete(0) + setAlertDelete(false) + NotificationManager.success(`Data user berhasil dihapus!`, 'Success!!'); + } else { + setIdDelete(0) + setAlertDelete(false) + NotificationManager.error(`Data user gagal dihapus!}`, 'Failed!!'); + } + } + + const cancelDelete = () => { + setAlertDelete(false) + setIdDelete(0) + } + + const RenderTable = useMemo(() => { + const columns = [ + { + title: 'Action', + dataIndex: '', + key: 'x', + render: (text, record) => <> + + + + + + + + + + + , + }, + + { title: 'NIK (KTP/ ID Card)', dataIndex: 'ktp_number', key: 'ktp_number' }, + { title: 'Employee Name', dataIndex: 'name', key: 'name' }, + { title: 'Divisi', dataIndex: 'join_second_name', key: 'join_second_name' }, + { title: 'Employee Type', dataIndex: 'employee_type', key: 'employee_type' }, + { + title: 'Role', + dataIndex: 'join_first_name', + key: 'join_first_name', + render: (text, record) => <>{record.join_first_name} + }, + { title: 'Phone No.', dataIndex: 'phone_number', key: 'phone_number' }, + { title: 'Email', dataIndex: 'email', key: 'email' }, + { title: 'Status', dataIndex: 'status_resource', key: 'status_status' } + ]; + return ( +
+ ) + }, [dataTable]) + + return ( +
+ + cancelDelete()} + focusCancelBtn + > + Delete this data + + toggleAddDialog} + typeDialog={typeDialog} + dataEdit={dataEdit} + clickOpenModal={clickOpenModal} + roleList={roleList} + divisiList={divisiList} + /> + toggleAddDialogShift} + typeDialog={typeDialogShift} + dataEdit={dataEdit} + clickOpenModal={clickOpenModalShift} + /> + + +

{pageName}

+ +
+ + + + + + + + + + + + + + {RenderTable} + + + + + ) +} + +export default ResourceWorker;