From 00ca06dcba78de9b0fa6751e466123cf9cea6596 Mon Sep 17 00:00:00 2001 From: farhan048 Date: Fri, 20 Oct 2023 17:13:32 +0700 Subject: [PATCH] company management page --- src/views/Master/MasterCompany/index.js | 523 ++++++++++++++++++++++++ 1 file changed, 523 insertions(+) create mode 100644 src/views/Master/MasterCompany/index.js diff --git a/src/views/Master/MasterCompany/index.js b/src/views/Master/MasterCompany/index.js new file mode 100644 index 0000000..b26057b --- /dev/null +++ b/src/views/Master/MasterCompany/index.js @@ -0,0 +1,523 @@ +import * as XLSX from 'xlsx'; +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 DialogForm from './DialogForm' +import { NotificationContainer, NotificationManager } from 'react-notifications'; +import { Pagination, Table, Button, Tooltip } from 'antd'; +import { + COMPANY_MANAGEMENT_SEARCH, USER_ADD, USER_SEARCH, USER_EDIT, USER_DELETE, ROLE_SEARCH, DIVISI_SEARCH, USER_SHIFT_ADD, USER_SYNC +} from '../../../const/ApiConst'; +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 role_name = window.localStorage.getItem('role_name'); +const company_id = window.localStorage.getItem('company_id'); +const MasterCompany = ({ params }) => { + const token = localStorage.getItem("token") + const company_id = localStorage.getItem("company_id") + 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; + const { t } = useTranslation(); + 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": "phone_number", + "logic_operator": "~*", + "value": search + }, + { + "name": "email", + "logic_operator": "~*", + "value": search + }, + { + "name": "status_resource", + "logic_operator": "~*", + "value": search + }, + ] + }, + "joins": [ + + ], + "orders": { + "columns": [ + "id" + ], + "ascending": false + } + } + + const result = await axios + .post(COMPANY_MANAGEMENT_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 handleSync = async () => { + await axios.get(USER_SYNC, HEADER) + .then(res => res) + .catch((error) => error.response) + } + + const handleExportExcel = async () => { + + let start = 0; + + if (currentPage !== 1 && currentPage > 1) { + start = (currentPage * rowsPerPage) - rowsPerPage + } + + const payload = { + "paging": { + "start": start, + "length": -1 + }, + "columns": [], + "group_column": { + "operator": "AND", + "group_operator": "OR", + "where": [ + { + "name": "name", + "logic_operator": "~*", + "value": search + }, + + { + "name": "name", + "logic_operator": "~*", + "value": search, + "table_name": "m_divisi" + }, + { + "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" + ] + } + ], + "orders": { + "columns": [ + "id" + ], + "ascending": false + } + } + const result = await axios + .post(USER_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 = { + "NIK (Nomor Induk Karyawan)": n.ktp_number, + "Employee Name": n.name, + "Divisi": n.join_second_name, + "Employee Type": n.employee_type, + "Role": n.join_first_name, + "Phone No": n.phone_number, + } + 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(`${result.data.message}`, `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: t('action'), + dataIndex: '', + key: 'x', + render: (text, record) => <> + + + + + + + + + + + , + }, + + { title: "Number Registration", dataIndex: 'registration_no', key: 'registration_no' }, + { title: "Name", dataIndex: 'company_name', key: 'company_name' }, + { title: 'Phone No.', dataIndex: 'phone_no', key: 'phone_no' }, + { title: 'Email', dataIndex: 'email', key: 'email' }, + { title: 'Status', dataIndex: 'is_active', key: 'is_active', render: (text, record) => <>{text && text !== false ? "Active" : 'Inactive'} } + ]; + return ( + + ) + }, [dataTable]) + + return ( +
+ + cancelDelete()} + focusCancelBtn + > + {t('deleteMsg')} + + {/* toggleAddDialog} + typeDialog={typeDialog} + dataEdit={dataEdit} + clickOpenModal={clickOpenModal} + roleList={roleList} + divisiList={divisiList} + /> */} + + +

{pageName}

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