| @@ -1,5 +1,6 @@ | |||
| // material-ui | |||
| import { useState, useEffect } from 'react'; | |||
| import { Box } from "@mui/material"; | |||
| import { | |||
| DataGrid, GridOverlay, | |||
| } from "@mui/x-data-grid"; | |||
| @@ -10,10 +11,10 @@ import { getSearchCriteria, checkSearchCriteriaPath } from "auth/utils"; | |||
| // ==============================|| EVENT TABLE ||============================== // | |||
| export function FiDataGrid({ rows, columns, sx, autoHeight, | |||
| export function FiDataGrid({ rows, columns, sx, autoHeight = true, | |||
| hideFooterSelectedRowCount, rowModesModel, editMode, | |||
| pageSizeOptions, filterItems, customPageSize, doLoad, applyGridOnReady, applySearch, | |||
| tab, ...props }) { | |||
| tab, height, maxHeight, pagination = true, ...props }) { | |||
| const intl = useIntl(); | |||
| const [_rows, set_rows] = useState([]); | |||
| const [_doLoad, set_doLoad] = useState({}); | |||
| @@ -26,7 +27,7 @@ export function FiDataGrid({ rows, columns, sx, autoHeight, | |||
| const [page, setPage] = useState(0); | |||
| const [pageSize, setPageSize] = useState(10); | |||
| const [_autoHeight, set_autoHeight] = useState(true); | |||
| // const [_autoHeight, set_autoHeight] = useState(true); | |||
| const [myHideFooterSelectedRowCount, setMyHideFooterSelectedRowCount] = useState(true); | |||
| const [_sx, set_sx] = useState({ | |||
| padding: "4 2 4 2", | |||
| @@ -50,6 +51,15 @@ export function FiDataGrid({ rows, columns, sx, autoHeight, | |||
| }, | |||
| }); | |||
| const effectiveAutoHeight = autoHeight && !height && !maxHeight; | |||
| const containerSx = { | |||
| width: '100%', | |||
| ...(height ? { height } : {}), | |||
| ...(maxHeight ? { maxHeight, height: '100%' } : {}), | |||
| overflow: 'hidden', | |||
| }; | |||
| const [rowCount, setRowCount] = useState(0); | |||
| useEffect(() => { | |||
| @@ -97,9 +107,9 @@ export function FiDataGrid({ rows, columns, sx, autoHeight, | |||
| if (pageSizeOptions) { | |||
| set_pageSizeOptions(pageSizeOptions) | |||
| } | |||
| if (autoHeight !== undefined) { | |||
| set_autoHeight(autoHeight) | |||
| } | |||
| // if (autoHeight !== undefined) { | |||
| // set_autoHeight(autoHeight) | |||
| // } | |||
| if (editMode) { | |||
| set_editMode(editMode); | |||
| } | |||
| @@ -188,39 +198,58 @@ export function FiDataGrid({ rows, columns, sx, autoHeight, | |||
| return ( | |||
| <DataGrid | |||
| {...props} | |||
| rows={_rows} | |||
| rowCount={rowCount ? rowCount : 0} | |||
| columns={_columns} | |||
| paginationMode="server" | |||
| disableColumnMenu | |||
| shrinkWrap={true} | |||
| rowModesModel={_rowModesModel} | |||
| pageSizeOptions={_pageSizeOptions} | |||
| editMode={_editMode} | |||
| autoHeight={_autoHeight} | |||
| hideFooterSelectedRowCount={myHideFooterSelectedRowCount} | |||
| filterModel={{ items: _filterItems }} | |||
| sx={_sx} | |||
| loading={loading} | |||
| components={{ | |||
| noRowsOverlay: CustomNoRowsOverlay, | |||
| Pagination: () => ( | |||
| <TablePagination | |||
| count={rowCount ? rowCount : 0} | |||
| page={page} | |||
| rowsPerPage={pageSize} | |||
| rowsPerPageOptions={_pageSizeOptions} | |||
| labelDisplayedRows={() => | |||
| `${(_rows?.length ? page * pageSize + 1 : 0)}-${page * pageSize + (_rows?.length ?? 0)} ${intl.formatMessage({ id: "of" })} ${rowCount}` | |||
| <Box sx={containerSx}> | |||
| <DataGrid | |||
| {...props} | |||
| rows={_rows} | |||
| rowCount={rowCount || 0} | |||
| columns={_columns} | |||
| disableColumnMenu | |||
| shrinkWrap | |||
| rowModesModel={_rowModesModel} | |||
| pageSizeOptions={pagination ? _pageSizeOptions : []} | |||
| editMode={_editMode} | |||
| autoHeight={effectiveAutoHeight} | |||
| hideFooterSelectedRowCount={myHideFooterSelectedRowCount} | |||
| filterModel={{ items: _filterItems }} | |||
| loading={loading} | |||
| paginationMode={pagination ? "server" : undefined} | |||
| sx={{ | |||
| ..._sx, | |||
| '& .MuiDataGrid-virtualScroller': { | |||
| overflowY: height || maxHeight ? 'auto' : 'visible', | |||
| overflowX: height || maxHeight ? 'auto' : 'visible', | |||
| }, | |||
| // 👇 completely hide the footer when pagination is off | |||
| ...(pagination === false && { | |||
| '& .MuiDataGrid-footerContainer': { | |||
| display: 'none', | |||
| }, | |||
| }), | |||
| }} | |||
| components={{ | |||
| noRowsOverlay: CustomNoRowsOverlay, | |||
| ...(pagination | |||
| ? { | |||
| Pagination: () => ( | |||
| <TablePagination | |||
| count={rowCount || 0} | |||
| page={page} | |||
| rowsPerPage={pageSize} | |||
| rowsPerPageOptions={_pageSizeOptions} | |||
| labelDisplayedRows={() => | |||
| `${(_rows?.length ? page * pageSize + 1 : 0)}-${page * pageSize + (_rows?.length ?? 0)} ${intl.formatMessage({ id: "of" })} ${rowCount}` | |||
| } | |||
| labelRowsPerPage={intl.formatMessage({ id: "rowsPerPage" }) + ":"} | |||
| onPageChange={handleChangePage} | |||
| onRowsPerPageChange={handleChangePageSize} | |||
| /> | |||
| ), | |||
| } | |||
| labelRowsPerPage={intl.formatMessage({ id: "rowsPerPage" }) + ":"} | |||
| onPageChange={handleChangePage} | |||
| onRowsPerPageChange={handleChangePageSize} | |||
| /> | |||
| ), | |||
| }} | |||
| /> | |||
| : {}), | |||
| }} | |||
| /> | |||
| </Box> | |||
| ); | |||
| } | |||
| @@ -2,8 +2,8 @@ | |||
| import { | |||
| Button, | |||
| Grid, | |||
| // TextField, | |||
| // Autocomplete, | |||
| TextField, | |||
| Autocomplete, | |||
| Typography | |||
| } from '@mui/material'; | |||
| import MainCard from "components/MainCard"; | |||
| @@ -14,6 +14,7 @@ import {PNSPS_BUTTON_THEME} from "../../themes/buttonConst"; | |||
| import {ThemeProvider} from "@emotion/react"; | |||
| // import * as ComboData from "utils/ComboData"; | |||
| import * as DateUtils from "utils/DateUtils"; | |||
| import * as ComboData from "utils/ComboData"; | |||
| import {DatePicker} from "@mui/x-date-pickers/DatePicker"; | |||
| import dayjs from "dayjs"; | |||
| @@ -21,17 +22,19 @@ import {DemoItem} from "@mui/x-date-pickers/internals/demo"; | |||
| import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider"; | |||
| import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs"; | |||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
| const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria, onGridReady }) => { | |||
| const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria, onGridReady,selectedIds=[] }) => { | |||
| // const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom); | |||
| const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom); | |||
| const [maxDate,setMaxDate] = React.useState(searchCriteria.dateFrom); | |||
| const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy"); | |||
| const [toDateValue, setToDateValue] = React.useState("dd / mm / yyyy"); | |||
| const [payMethod, setPayMethod] = React.useState(ComboData.payMethod[0]); | |||
| // const [status, setStatus] = React.useState(ComboData.paymentStatus[0]); | |||
| const marginBottom = 2.5; | |||
| const { | |||
| // register, | |||
| register, | |||
| handleSubmit, | |||
| } = useForm() | |||
| @@ -59,6 +62,8 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria, onGr | |||
| // transNo: data.transNo, | |||
| dateFrom: sentDateFrom, | |||
| dateTo: sentDateTo, | |||
| paymentId: selectedIds.join(','), | |||
| payMethod : (payMethod?.type && payMethod?.type != 'all') ? payMethod?.type : "", | |||
| // status : (status?.type && status?.type != 'all') ? status?.type : "", | |||
| }; | |||
| applySearch(temp); | |||
| @@ -103,7 +108,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria, onGr | |||
| {/*row 2*/} | |||
| <Grid container display="flex" alignItems={"center"}> | |||
| <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}> | |||
| <Grid item xs={9} s={6} md={3} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}> | |||
| <LocalizationProvider dateAdapter={AdapterDayjs}> | |||
| <DemoItem components={['DatePicker']}> | |||
| <DatePicker | |||
| @@ -130,7 +135,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria, onGr | |||
| </LocalizationProvider> | |||
| </Grid> | |||
| <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}> | |||
| <Grid item xs={9} s={6} md={3} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}> | |||
| <LocalizationProvider dateAdapter={AdapterDayjs}> | |||
| <DemoItem components={['DatePicker']}> | |||
| <DatePicker | |||
| @@ -157,6 +162,35 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria, onGr | |||
| </LocalizationProvider> | |||
| </Grid> | |||
| <Grid item xs={9} s={6} md={3} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}> | |||
| <Autocomplete | |||
| {...register("payMethod")} | |||
| disablePortal={false} | |||
| size="small" | |||
| id="payMethod" | |||
| filterOptions={(options) => options} | |||
| options={ComboData.payMethod} | |||
| value={payMethod} | |||
| getOptionLabel={(option) => option.label} | |||
| inputValue={payMethod?.label ? payMethod?.label : ""} | |||
| onChange={(event, newValue) => { | |||
| if(newValue==null){ | |||
| setPayMethod(ComboData.payMethod[0]); | |||
| }else{ | |||
| setPayMethod(newValue); | |||
| } | |||
| }} | |||
| renderInput={(params) => ( | |||
| <TextField {...params} | |||
| label="Payment Means" | |||
| /> | |||
| )} | |||
| InputLabelProps={{ | |||
| shrink: true | |||
| }} | |||
| /> | |||
| </Grid> | |||
| {/* <Grid item xs={9} s={6} md={4} lg={3}> | |||
| </Grid> */} | |||
| </Grid> | |||
| @@ -0,0 +1,118 @@ | |||
| // material-ui | |||
| import * as React from 'react'; | |||
| import * as DateUtils from "utils/DateUtils"; | |||
| import {PAYMENT_GFMIS_LIST} from "utils/ApiPathConst"; | |||
| // import * as HttpUtils from "utils/HttpUtils"; | |||
| import * as FormatUtils from "utils/FormatUtils" | |||
| // import { useNavigate } from "react-router-dom"; | |||
| import { FiDataGrid } from "components/FiDataGrid"; | |||
| import { clickableLink } from 'utils/CommonFunction'; | |||
| import { | |||
| // Checkbox, | |||
| // Dialog, DialogTitle, DialogContent, DialogActions, | |||
| // Button,Typography | |||
| // MenuItem | |||
| } from '@mui/material'; | |||
| // ==============================|| EVENT TABLE ||============================== // | |||
| export default function SearchPaymentTable({ searchCriteria, applyGridOnReady, applySearch, selectedIds = [], onSelectionChange,}) { | |||
| const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria); | |||
| // const navigate = useNavigate() | |||
| const _sx = { | |||
| padding: "4 2 4 2", | |||
| boxShadow: 1, | |||
| border: 1, | |||
| borderColor: '#DDD', | |||
| '& .MuiDataGrid-cell': { | |||
| borderTop: 1, | |||
| borderBottom: 1, | |||
| borderColor: "#EEE" | |||
| }, | |||
| '& .MuiDataGrid-footerContainer': { | |||
| border: 1, | |||
| borderColor: "#EEE" | |||
| } | |||
| } | |||
| React.useEffect(() => { | |||
| set_searchCriteria(searchCriteria); | |||
| }, [searchCriteria]); | |||
| const columns = [ | |||
| { | |||
| id: 'appNos', | |||
| field: 'appNos', | |||
| headerName: 'Application No.', | |||
| flex: 1, | |||
| minWidth: 150, | |||
| renderCell: (params) => { | |||
| let appNo = params.row.appNos; | |||
| return <div style={{ marginTop: 2, marginBottom: 2 }}>{appNo}</div> | |||
| }, | |||
| }, | |||
| { | |||
| field: 'actions', | |||
| headerName: 'Transaction No.', | |||
| flex: 1, | |||
| minWidth: 200, | |||
| cellClassName: 'actions', | |||
| renderCell: (params) => { | |||
| return clickableLink('/paymentPage/details/' + params.row.id, params.row.transNo); | |||
| }, | |||
| }, | |||
| { | |||
| id: 'transDateTime', | |||
| field: 'transDateTime', | |||
| headerName: 'Transaction Date', | |||
| flex: 1, | |||
| minWidth: 150, | |||
| valueGetter: (params) => { | |||
| return DateUtils.dateStr(params?.value); | |||
| } | |||
| }, | |||
| { | |||
| field: 'payMethod', | |||
| headerName: 'Payment Method', | |||
| flex: 1, | |||
| width: 150, | |||
| renderCell: (params) => { | |||
| return params?.value | |||
| } | |||
| }, | |||
| { | |||
| id: 'payAmount', | |||
| field: 'payAmount', | |||
| headerName: 'Amount ($)', | |||
| width: 150, | |||
| valueGetter: (params) => { | |||
| return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : ""; | |||
| } | |||
| }, | |||
| ]; | |||
| return ( | |||
| <div style={{ width: '100%' }}> | |||
| <FiDataGrid | |||
| sx={_sx} | |||
| rowHeight={80} | |||
| columns={columns} | |||
| height={500} | |||
| autoHeight={false} | |||
| pagination={false} | |||
| applyGridOnReady={applyGridOnReady} | |||
| applySearch={applySearch} | |||
| checkboxSelection | |||
| disableRowSelectionOnClick | |||
| rowSelectionModel={selectedIds} | |||
| onRowSelectionModelChange={(ids) => onSelectionChange?.(ids)} | |||
| doLoad={React.useMemo(() => ({ | |||
| url: PAYMENT_GFMIS_LIST, | |||
| params: _searchCriteria, | |||
| }), [_searchCriteria])} | |||
| /> | |||
| </div> | |||
| ); | |||
| } | |||
| @@ -22,6 +22,7 @@ import Loadable from 'components/Loadable'; | |||
| const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); | |||
| const SearchForm = Loadable(React.lazy(() => import('./SearchForm'))); | |||
| const EventTable = Loadable(React.lazy(() => import('./DataGrid'))); | |||
| const TransactionTable = Loadable(React.lazy(() => import('./TransactionDataGrid'))); | |||
| import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | |||
| const BackgroundHead = { | |||
| @@ -46,7 +47,7 @@ const Index = () => { | |||
| const [onGridReady, setGridOnReady] = React.useState(false); | |||
| const [isPopUp, setIsPopUp] = React.useState(false); | |||
| const [downloadInput, setDownloadInput] = React.useState(); | |||
| const [selectedIds, setSelectedIds] = React.useState([]); | |||
| const [inputDate, setInputDate] = React.useState(searchCriteria.dateTo); | |||
| const [inputDateValue, setInputDateValue] = React.useState("dd / mm / yyyy"); | |||
| @@ -61,7 +62,7 @@ const Index = () => { | |||
| function downloadXML() { | |||
| // console.log(input) | |||
| console.log(selectedIds.join(',')) | |||
| setIsPopUp(false) | |||
| let sentDateFrom = ""; | |||
| @@ -73,7 +74,8 @@ const Index = () => { | |||
| params:{ | |||
| dateTo: downloadInput.dateTo, | |||
| dateFrom: downloadInput.dateFrom, | |||
| inputDate: sentDateFrom | |||
| inputDate: sentDateFrom, | |||
| paymentId: selectedIds.join(',') | |||
| }, | |||
| onSuccess: (responseData) => { | |||
| // console.log(responseData) | |||
| @@ -158,9 +160,25 @@ const Index = () => { | |||
| generateXML={generateXML} | |||
| searchCriteria={searchCriteria} | |||
| onGridReady={onGridReady} | |||
| selectedIds={selectedIds} | |||
| /> | |||
| </Grid> | |||
| {/*row 2*/} | |||
| <Grid item xs={12} md={12} lg={12}> | |||
| <MainCard elevation={0} | |||
| border={false} | |||
| content={false} | |||
| sx={{width: "-webkit-fill-available"}} | |||
| > | |||
| <TransactionTable | |||
| searchCriteria={searchCriteria} | |||
| applyGridOnReady={applyGridOnReady} | |||
| applySearch={applySearch} | |||
| selectedIds={selectedIds} | |||
| onSelectionChange={setSelectedIds} | |||
| /> | |||
| </MainCard> | |||
| </Grid> | |||
| <Grid item xs={12} md={12} lg={12}> | |||
| <MainCard elevation={0} | |||
| border={false} | |||
| @@ -91,6 +91,15 @@ export default function SearchPaymentTable({ searchCriteria, applyGridOnReady, a | |||
| return clickableLink('/paymentPage/details/' + params.row.id, params.row.transNo); | |||
| }, | |||
| }, | |||
| { | |||
| field: 'payMethod', | |||
| headerName: 'Payment Method', | |||
| flex: 1, | |||
| width: 150, | |||
| renderCell: (params) => { | |||
| return params?.value | |||
| } | |||
| }, | |||
| { | |||
| id: 'transDateTime', | |||
| field: 'transDateTime', | |||
| @@ -90,6 +90,7 @@ const FullListForm = ({ searchCriteria, issueComboData}) => { | |||
| function resetForm() { | |||
| setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14))) | |||
| setMaxDate(DateUtils.dateValue(new Date())) | |||
| setIssueSelected({}); | |||
| reset({contact:""}); | |||
| } | |||
| @@ -3,6 +3,7 @@ import { | |||
| Button, | |||
| Grid, | |||
| TextField, | |||
| Autocomplete, | |||
| Typography | |||
| } from '@mui/material'; | |||
| import MainCard from "components/MainCard"; | |||
| @@ -13,6 +14,7 @@ import {ThemeProvider} from "@emotion/react"; | |||
| import {PNSPS_BUTTON_THEME} from "../../themes/buttonConst"; | |||
| import * as HttpUtils from "utils/HttpUtils"; | |||
| import * as UrlUtils from "utils/ApiPathConst"; | |||
| import * as FormatUtils from "utils/FormatUtils"; | |||
| import {DatePicker} from "@mui/x-date-pickers/DatePicker"; | |||
| import dayjs from "dayjs"; | |||
| @@ -21,7 +23,7 @@ import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider"; | |||
| import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs"; | |||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
| const SummaryForm = ({ searchCriteria}) => { | |||
| const SummaryForm = ({ searchCriteria, issueComboData}) => { | |||
| const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom); | |||
| const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo); | |||
| @@ -29,6 +31,8 @@ const SummaryForm = ({ searchCriteria}) => { | |||
| const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy"); | |||
| const [toDateValue, setToDateValue] = React.useState("dd / mm / yyyy"); | |||
| const [issueSelected, setIssueSelected] = React.useState({}); | |||
| const [issueCombo, setIssueCombo] = React.useState([]); | |||
| const [waitDownload, setWaitDownload] = React.useState(false); | |||
| @@ -55,6 +59,7 @@ const SummaryForm = ({ searchCriteria}) => { | |||
| dateFrom: sentDateFrom, | |||
| dateTo: sentDateTo, | |||
| contact: data.contact, | |||
| issueId: issueSelected?.id | |||
| }; | |||
| doExport(temp); | |||
| }; | |||
| @@ -69,9 +74,30 @@ const SummaryForm = ({ searchCriteria}) => { | |||
| }); | |||
| }; | |||
| React.useEffect(() => { | |||
| if (issueComboData && issueComboData.length > 0) { | |||
| setIssueCombo(issueComboData); | |||
| if(searchCriteria.issueId!=undefined){ | |||
| setIssueSelected(issueComboData.find(item => item.id === searchCriteria.issueId)) | |||
| } | |||
| } | |||
| }, [issueComboData]); | |||
| const getIssueLabel=(data)=> { | |||
| let issueYear = data.issueYear | |||
| let volume = data.volume; | |||
| let issueNo = data.issueNo; | |||
| let issueDate = data.issueDate; | |||
| return issueYear | |||
| + " Vol. " + FormatUtils.zeroPad(volume, 3) | |||
| + ", No. " + FormatUtils.zeroPad(issueNo, 2) | |||
| + ", " + DateUtils.dateFormat(issueDate, "D MMM YYYY (ddd)"); | |||
| } | |||
| function resetForm() { | |||
| setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14))) | |||
| setMaxDate(DateUtils.dateValue(new Date())) | |||
| setIssueSelected({}); | |||
| reset({contact:""}); | |||
| } | |||
| @@ -106,6 +132,29 @@ const SummaryForm = ({ searchCriteria}) => { | |||
| /> | |||
| </Grid> | |||
| <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}> | |||
| <Autocomplete | |||
| {...register("issueId")} | |||
| disablePortal | |||
| size="small" | |||
| id="issueId" | |||
| options={issueCombo} | |||
| value={issueSelected} | |||
| inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""} | |||
| getOptionLabel={(option) => getIssueLabel(option)} | |||
| onChange={(event, newValue) => { | |||
| setIssueSelected(newValue); | |||
| }} | |||
| renderInput={(params) => ( | |||
| <TextField {...params} | |||
| label="Gazette Issue No." | |||
| InputLabelProps={{ | |||
| shrink: true | |||
| }} | |||
| /> | |||
| )} | |||
| /> | |||
| </Grid> | |||
| <Grid item xs={12} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:marginBottom}}> | |||
| <Grid container spacing={1}> | |||
| @@ -89,6 +89,7 @@ const ReportSearchPage = () => { | |||
| <Grid item xs={12} md={12} lg={12} sx={{mb: -1}}> | |||
| <SummaryForm | |||
| searchCriteria={searchCriteria} | |||
| issueComboData={issueCombo} | |||
| /> | |||
| </Grid> | |||
| {/*row 2*/} | |||
| @@ -73,6 +73,43 @@ const Index = () => { | |||
| } | |||
| document.getElementById("uploadFileBtn").value = ""; | |||
| } | |||
| const readOfflineFile = (event) => { | |||
| let file = event.target.files[0]; | |||
| setWait(true); | |||
| if (file) { | |||
| if (file.name.toLowerCase().substr(file.name.length - 5).includes(".xlsx") | |||
| ) { | |||
| HttpUtils.postWithFiles({ | |||
| url: UrlUtils.OFFLINE_IMPORT, | |||
| params:null, | |||
| files: [event.target.files[0]], | |||
| onSuccess: function (responData) { | |||
| setWait(false); | |||
| if(responData?.msg){ | |||
| setResultStr(<>{DateUtils.datetimeStr(new Date())}<br/><span style={{"color": "red"}}>Error</span><br/><span style={{"whiteSpace": "pre-line"}}>{responData?.msg}</span></>) | |||
| }else if(responData?.success){ | |||
| setResultStr(<>{DateUtils.datetimeStr(new Date())}<br/><span style={{"color": "green"}}>Success</span><br/>Record Count: {responData.recordCount}</>) | |||
| } | |||
| }, | |||
| onError: function(){ | |||
| setWait(false); | |||
| setResultStr(<>{DateUtils.datetimeStr(new Date())}<br/><span style={{"color": "red"}}>Error</span><br/>Action Fail: Please import valid file.</>) | |||
| } | |||
| }); | |||
| } else { | |||
| setWait(false); | |||
| setWarningText("Please upload a valid file (file format: .xlsx)"); | |||
| setIsWarningPopUp(true); | |||
| document.getElementById("uploadOfflineFileBtn").value = ""; | |||
| return; | |||
| } | |||
| }else{ | |||
| setWait(false); | |||
| } | |||
| document.getElementById("uploadOfflineFileBtn").value = ""; | |||
| } | |||
| return ( | |||
| <Grid container sx={{ minHeight: '87vh', backgroundColor: 'backgroundColor.default' }} direction="column" alignItems="center"> | |||
| @@ -103,39 +140,71 @@ const Index = () => { | |||
| } | |||
| }); | |||
| }} | |||
| >Export DR Excel</Button> | |||
| <Grid item sx={{ pl: 4 }}> | |||
| <Grid container direction="row" justifyContent="flex-start" alignItems="center"> | |||
| <Grid item xs={12} md={6} lg={6} sx={{ wordBreak: 'break-word' }}> | |||
| <input | |||
| id="uploadFileBtn" | |||
| name="file" | |||
| type="file" | |||
| accept=".xlsx" | |||
| style={{ display: 'none' }} | |||
| onChange={(event) => { | |||
| readFile(event) | |||
| }} | |||
| /> | |||
| </Grid> | |||
| >Export DR Excel | |||
| </Button> | |||
| <Grid item sx={{ pl: 4 }}> | |||
| <Grid container direction="row" justifyContent="flex-start" alignItems="center"> | |||
| <Grid item xs={12} md={6} lg={6} sx={{ wordBreak: 'break-word' }}> | |||
| <input | |||
| id="uploadFileBtn" | |||
| name="file" | |||
| type="file" | |||
| accept=".xlsx" | |||
| style={{ display: 'none' }} | |||
| onChange={(event) => { | |||
| readFile(event) | |||
| }} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item > | |||
| <Grid container direction="row" justifyContent="flex-start" alignItems="center"> | |||
| <Grid item xs={12} > | |||
| <label htmlFor="uploadFileBtn"> | |||
| <Button | |||
| aria-label={intl.formatMessage({ id: 'uploadFileBtn' })} | |||
| component="span" | |||
| variant="outlined" | |||
| size="large" | |||
| >Import DR Excel</Button> | |||
| </label> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item > | |||
| <Grid container direction="row" justifyContent="flex-start" alignItems="center"> | |||
| <Grid item xs={12} > | |||
| <label htmlFor="uploadFileBtn"> | |||
| <Button | |||
| aria-label={intl.formatMessage({ id: 'uploadFileBtn' })} | |||
| component="span" | |||
| variant="outlined" | |||
| size="large" | |||
| >Import DR Excel</Button> | |||
| </label> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item sx={{ pl: 4 }}> | |||
| <Grid container direction="row" justifyContent="flex-start" alignItems="center"> | |||
| <Grid item xs={12} md={6} lg={6} sx={{ wordBreak: 'break-word' }}> | |||
| <input | |||
| id="uploadOfflineFileBtn" | |||
| name="file" | |||
| type="file" | |||
| accept=".xlsx" | |||
| style={{ display: 'none' }} | |||
| onChange={(event) => { | |||
| readOfflineFile(event) | |||
| }} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item> | |||
| <Grid container direction="row" justifyContent="flex-end" alignItems="center"> | |||
| <Grid item xs={12} > | |||
| <label htmlFor="uploadOfflineFileBtn"> | |||
| <Button | |||
| aria-label={intl.formatMessage({ id: 'uploadFileBtn' })} | |||
| component="span" | |||
| variant="outlined" | |||
| size="large" | |||
| >Import Offline Mode Application</Button> | |||
| </label> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </Stack> | |||
| </Box> | |||
| </Grid> | |||
| @@ -83,6 +83,7 @@ export const GET_FILE_DELETE = apiPath+'/file/delete'; | |||
| export const DR_EXPORT = apiPath+'/settings/dr/export'; | |||
| export const DR_IMPORT = apiPath+'/settings/dr/import'; | |||
| export const OFFLINE_IMPORT = apiPath+'/settings/dr/importOffline'; | |||
| export const AUDIT_LOG_EXPORT = apiPath+'/settings/auditLog-export'; | |||
| @@ -176,6 +177,7 @@ export const PAYMENT_LOAD = apiPath+'/payment/load';//GET | |||
| export const PAYMENT_APP_LIST = apiPath+'/payment/applist';//POST | |||
| export const PAYMENT_CHECK = apiPath+'/payment/check-payment';//GET | |||
| export const PAYMENT_BIB = apiPath+'/payment/set-bib';//POST | |||
| export const PAYMENT_GFMIS_LIST = apiPath+'/payment/listGFMIS';//GET | |||
| export const PAYMENT_LIMIT_SETTING_LIST = apiPath+'/settings/payment';//GET | |||
| // export const PAYMENT_AVAILABLE_PAYMENT = paymentPath+'/api/payment/availability';//POST | |||