import React, { useEffect, useState, useRef } from 'react' import { Modal } from 'react-bootstrap' import DataTable from 'react-data-table-component' import ErrorLogService from '../../../services/ErrorLogService' import CountryService from '../../../services/MastersService/CountryService' import ManageMenuService from '../../../services/MenuManagementService/ManageMenuService' import PageHeader from '../../../components/Common/PageHeader' import Select from 'react-select' import { Astrick } from '../../../components/Utilities/Style' import * as Validation from '../../../components/Utilities/Validation' import Alert from '../../../components/Common/Alert' import { ExportToExcel } from '../../../components/Utilities/Table/ExportToExcel' function CountryComponent() { const [data, setData] = useState(null) const [notify, setNotify] = useState() const [modal, setModal] = useState({ showModal: false, modalData: '', modalHeader: '', }) const [exportData, setExportData] = useState(null) const roleId = sessionStorage.getItem("role_id") const [checkRole, setCheckRole] = useState(null) const handleModal = (data) => { setModal(data) } // const searchRef = useRef() // const handleSearch = () => { // const search = searchRef.current.value; // if (search.length > 0) { // const temp = data.filter((d) => { // return d.country.toLowerCase().match(new RegExp(search.toLowerCase(), 'g')) // }) // setData(temp) // const exportTempData = [] // for (const key in temp) { // exportTempData.push({ // Sr: temp[key].counter, // Country: temp[key].country, // Status: temp[key].is_active ? 'Active' : 'Deactive', // created_at:temp[key].created_at, // created_by:temp[key].created_by, // updated_at: temp[key].updated_at, // updated_by: temp[key].updated_by, // }) // } // setExportData(null) // setExportData(exportTempData) // } else { // // setNotify(null) // // setNotify({ type: 'danger', message: 'Please Search Country Name' }) // alert("Please Search Country Name") // } // } const columns = [ { name: 'Action', selector: (row) => { }, sortable: false, width: "100px", cell: (row) => (
), }, { name: 'Sr', selector: (row) => row.counter, sortable: true, width: "60px" }, { name: 'Country', selector: (row) => row.country, sortable: true }, { name: 'Status', selector: (row) => row.is_active, sortable: true, cell: (row) => (
{row.is_active === 1 && ( Active )} {row.is_active === 0 && ( Deactive )}
), }, { name: 'Created At', selector: (row) => row.created_at, sortable: true, width: "200px" }, { name: 'Created By', selector: (row) => row.created_by, sortable: true }, { name: 'Updated At', selector: (row) => row.updated_at, sortable: true }, { name: 'Updated By', selector: (row) => row.updated_by, sortable: true }, ] const loadData = async () => { const data = [] const exportTempData = [] await new CountryService().getCountry().then((res) => { console.log(res) if (res.status === 200) { let counter = 1 const temp = res.data.data for (const key in temp) { data.push({ counter: counter++, id: temp[key].id, country: temp[key].country, is_active: temp[key].is_active, remark: temp[key].remark, created_at: temp[key].created_at, created_by: temp[key].created_by, updated_at: temp[key].updated_at, updated_by: temp[key].updated_by, }) } setData(null) setData(data) for (const key in data) { exportTempData.push({ Sr: data[key].counter, Country: data[key].country, Status: data[key].is_active ? 'Active' : 'Deactive', created_at: temp[key].created_at, created_by: temp[key].created_by, updated_at: data[key].updated_at, updated_by: data[key].updated_by, }) } setExportData(null) setExportData(exportTempData) } }) .catch((error) => { const { response } = error const { request, ...errorObject } = response new ErrorLogService().sendErrorLog( 'Country', 'Get_Country', 'INSERT', errorObject.data.message, ) }) await new ManageMenuService().getRole(roleId).then((res) => { if (res.status === 200) { if (res.data.status == 1) { const getRoleId = sessionStorage.getItem("role_id"); setCheckRole(res.data.data.filter(d => d.role_id == getRoleId)) } } }) } const handleForm = (id) => async (e) => { e.preventDefault() const form = new FormData(e.target) setNotify(null) if (!id) { await new CountryService() .postCountry(form) .then((res) => { console.log(res) if (res.status === 200) { if (res.data.status === 1) { setNotify({ type: 'success', message: res.data.message }) setModal({ showModal: false, modalData: '', modalHeader: '' }) loadData() } else { setNotify({ type: 'danger', message: res.data.message }) } } else { setNotify({ type: 'danger', message: res.data.message }) new ErrorLogService().sendErrorLog( 'Country', 'Create_Country', 'INSERT', res.message, ) } }) .catch((error) => { const { response } = error const { request, ...errorObject } = response setNotify({ type: 'danger', message: 'Request Error !!!' }) new ErrorLogService().sendErrorLog( 'Country', 'Create_Country', 'INSERT', errorObject.data.message, ) }) } else { await new CountryService() .updateCountry(id, form) .then((res) => { if (res.status === 200) { if (res.data.status === 1) { setNotify({ type: 'success', message: res.data.message }) setModal({ showModal: false, modalData: '', modalHeader: '' }) loadData() } else { setNotify({ type: 'danger', message: res.data.message }) } } else { setNotify({ type: 'danger', message: res.data.message }) new ErrorLogService().sendErrorLog( 'Country', 'Create_Country', 'INSERT', res.message, ) } }) .catch((error) => { const { response } = error const { request, ...errorObject } = response setNotify({ type: 'danger', message: 'Request Error !!!' }) new ErrorLogService().sendErrorLog( 'Country', 'Create_Country', 'INSERT', errorObject.data.message, ) }) } } // //Search As Enter key press // useEffect(() => { // const listener = event => { // if (event.code === "Enter") { // console.log("Enter key was pressed. Run your function."); // // callMyFunction(); // handleSearch() // } // }; // document.addEventListener("keydown", listener); // return () => { // document.removeEventListener("keydown", listener); // }; // }, [data]); // const handleKeyDown = (event) => { // if (event.key === 'Enter') { // handleSearch() // } // }; const [search, setSearch] = useState(null) useEffect(() => { const searchData = data && data.filter((d) => { // return (d.country ? d.country :"").toLowerCase().match(search.toLowerCase()) return d.country.toLowerCase().match(search.toLowerCase()) }) console.log(searchData) setData(searchData) }, [search]) useEffect(() => { loadData() }, []) return (
{notify && } { return (
{checkRole && checkRole[4].can_create == 1 ? : ""}
) }} /> {/*
*/}
{data && ( setSearch(e.target.value)} /> } actions={
} /> )}
{ handleModal({ showModal: false, modalData: '', modalHeader: '', }) }} >
{modal.modalHeader}
{ Validation.CharacterWithSpace(e) }} onPaste={(e) => { e.preventDefault() return false; }} onCopy={(e) => { e.preventDefault() return false; }} />
{modal.modalData &&
}
{!modal.modalData && ( )} {modal.modalData && checkRole && checkRole[4].can_update == 1 ? ( ) : ""}
) } function CountryDropdown(props) { const [data, setData] = useState(null) useEffect(async () => { const tempData = [] await new CountryService().getCountry().then((res) => { if (res.status === 200) { let counter = 1 const data = res.data.data for (const key in data) { if (data[key].is_active == 1) { tempData.push({ id: data[key].id, country: data[key].country, }) } } setData(tempData) } }) }, []) return ( <> {data && ( )} {!data &&

Loading....

} ) } export { CountryComponent, CountryDropdown }