From 5cc7c7af2e32114d1e8094be46d2cc98d31a65b4 Mon Sep 17 00:00:00 2001 From: Alex Cheung Date: Tue, 9 Jan 2024 18:07:33 +0800 Subject: [PATCH] add gfmis ui --- src/layout/MainLayout/Header/index.js | 32 +---- src/pages/GFMIS/DataGrid.js | 88 +++++++++++++ src/pages/GFMIS/SearchForm.js | 155 +++++++++++++++++++++++ src/pages/GFMIS/index.js | 133 +++++++++++++++++++ src/pages/Payment/Search_GLD/index.js | 1 + src/pages/Payment/Search_Public/index.js | 1 + src/routes/GLDUserRoutes.js | 5 + src/utils/ApiPathConst.js | 2 +- 8 files changed, 385 insertions(+), 32 deletions(-) create mode 100644 src/pages/GFMIS/DataGrid.js create mode 100644 src/pages/GFMIS/SearchForm.js create mode 100644 src/pages/GFMIS/index.js diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js index 383f321..a38d932 100644 --- a/src/layout/MainLayout/Header/index.js +++ b/src/layout/MainLayout/Header/index.js @@ -43,8 +43,6 @@ import Profile from './HeaderContent/Profile'; import "assets/style/navbarStyles.css"; import { isUserLoggedIn, isGLDLoggedIn, isPrimaryLoggedIn } from "utils/Utils"; import { handleLogoutFunction } from 'auth/index'; -import * as HttpUtils from "utils/HttpUtils"; -import * as UrlUtils from "utils/ApiPathConst" // assets // import { MenuFoldOutlined,MenuOutlined } from '@ant-design/icons'; @@ -73,34 +71,6 @@ function Header(props) { navigate('/login'); }; - const getXML = () => () => { - HttpUtils.get({ - url: UrlUtils.GEN_GFMIS_XML + "/today?online=true", - params:{}, - onSuccess: (responseData) => { - console.log(responseData) - const parser = new DOMParser(); - const xmlDoc = parser.parseFromString(responseData, 'application/xml'); - const filename = xmlDoc.querySelector('FileHeader').getAttribute('H_Filename'); - const blob = new Blob([responseData], { type: 'application/xml' }); - // Create a download link - const link = document.createElement('a'); - link.href = URL.createObjectURL(blob); - link.download = filename+'.xml'; - - // Append the link to the document body - document.body.appendChild(link); - - // Programmatically click the link to trigger the download - link.click(); - - // Clean up the link - document.body.removeChild(link); - } - }); - // open(UrlUtils.GEN_GFMIS_XML + "/today?online=true") - } - const loginContent = ( isGLDLoggedIn() ?
@@ -124,7 +94,7 @@ function Header(props) { Payment Record
  • - Download XML + GFMIS Generate XML
  • Create DN diff --git a/src/pages/GFMIS/DataGrid.js b/src/pages/GFMIS/DataGrid.js new file mode 100644 index 0000000..b3e6bfc --- /dev/null +++ b/src/pages/GFMIS/DataGrid.js @@ -0,0 +1,88 @@ +// material-ui +import * as React from 'react'; +// import { +// Button +// } from '@mui/material'; +import * as FormatUtils from "utils/FormatUtils" +import { useNavigate } from "react-router-dom"; +import { FiDataGrid } from "components/FiDataGrid"; +// ==============================|| EVENT TABLE ||============================== // + +export default function SearchPublicNoticeTable({ recordList }) { + const [rows, setRows] = React.useState(recordList); + 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(() => { + setRows(recordList); + }, [recordList]); + + const handleEditClick = (params) => () => { + navigate('/paymentPage/details/' + params.row.id); + }; + + const columns = [ + // { + // field: 'actions', + // headerName: 'Trans. No.', + // flex: 1, + // cellClassName: 'actions', + // renderCell: (params) => { + // return ; + // }, + // }, + { + id: 'paymentMethod', + field: 'paymentMethod', + headerName: 'Payment Method', + flex: 4, + renderCell: (params) => { + let paymentMethod = params.row.paymentMethod; + return
    {paymentMethod}
    + }, + }, + { + id: 'payAmount', + field: 'payAmount', + headerName: 'Payment Amount', + flex: 5, + valueGetter: (params) => { + return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : ""; + } + }, + ]; + + + return ( +
    + + +
    + ); +} diff --git a/src/pages/GFMIS/SearchForm.js b/src/pages/GFMIS/SearchForm.js new file mode 100644 index 0000000..01e65fb --- /dev/null +++ b/src/pages/GFMIS/SearchForm.js @@ -0,0 +1,155 @@ +// material-ui +import { + Button, + CardContent, + Grid, TextField, + // Autocomplete, + Typography +} from '@mui/material'; +import MainCard from "components/MainCard"; +import { useForm } from "react-hook-form"; +import * as React from "react"; +import * as DateUtils from "utils/DateUtils"; +// import * as ComboData from "utils/ComboData"; +// ==============================|| DASHBOARD - DEFAULT ||============================== // + + +const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria }) => { + + const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom); + const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo); + // const [status, setStatus] = React.useState(ComboData.paymentStatus[0]); + + 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" + } + } + + const { register, handleSubmit, getValues } = useForm() + + const onSubmit = (data) => { + const temp = { + // code: data.code, + // transNo: data.transNo, + dateFrom: data.dateFrom, + dateTo: data.dateTo, + // status : (status?.type && status?.type != 'all') ? status?.type : "", + }; + applySearch(temp); + }; + + const generateHandler = () => { + const dateFrom = getValues("dateFrom") + const dateTo = getValues("dateTo") + const temp = { + // code: data.code, + // transNo: data.transNo, + dateFrom: dateFrom, + dateTo: dateTo, + // status : (status?.type && status?.type != 'all') ? status?.type : "", + }; + generateXML(temp); + } + + + return ( + + +
    + {/*row 1*/} + + + Credit Date + + + + {/*row 2*/} + + + + { + setMinDate(DateUtils.dateStr(newValue)); + }} + InputLabelProps={{ + shrink: true + }} + /> + + + + { + setMaxDate(DateUtils.dateStr(newValue)); + }} + id="dateTo" + type="date" + label="To" + defaultValue={searchCriteria.dateTo} + /> + + + {/* + */} + + + + + + + + + + +
    +     + ); +}; + +export default SearchPublicNoticeForm; diff --git a/src/pages/GFMIS/index.js b/src/pages/GFMIS/index.js new file mode 100644 index 0000000..017f6e0 --- /dev/null +++ b/src/pages/GFMIS/index.js @@ -0,0 +1,133 @@ +// material-ui +import { + Grid, + Typography, + Stack +} from '@mui/material'; +import MainCard from "components/MainCard"; +import * as UrlUtils from "utils/ApiPathConst"; +import * as React from "react"; +import * as HttpUtils from "utils/HttpUtils"; +import * as DateUtils from "utils/DateUtils"; + +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'))); +import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' + +const BackgroundHead = { + backgroundImage: `url(${titleBackgroundImg})`, + width: '100%', + height: '100%', + backgroundSize:'contain', + backgroundRepeat: 'no-repeat', + backgroundColor: '#0C489E', + backgroundPosition: 'right' +} + +// ==============================|| DASHBOARD - DEFAULT ||============================== // + +const Index = () => { + + const [record,setRecord] = React.useState([]); + const [searchCriteria, setSearchCriteria] = React.useState({ + dateTo: DateUtils.dateStr(new Date()), + dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)), + }); + const [onReady, setOnReady] = React.useState(false); + + React.useEffect(() => { + setOnReady(true); + }, [record]); + + React.useEffect(() => { + console.log(searchCriteria) + loadGrid(); + }, [searchCriteria]); + + function loadGrid(){ + HttpUtils.get({ + url: UrlUtils.GFIMIS_LIST, + params: searchCriteria, + onSuccess: function(responseData){ + setRecord(responseData); + } + }); + } + + function downloadXML(input) { + console.log(input) + HttpUtils.get({ + url: UrlUtils.GEN_GFMIS_XML + "/today?online=true", + params:{}, + onSuccess: (responseData) => { + console.log(responseData) + const parser = new DOMParser(); + const xmlDoc = parser.parseFromString(responseData, 'application/xml'); + const filename = xmlDoc.querySelector('FileHeader').getAttribute('H_Filename'); + const blob = new Blob([responseData], { type: 'application/xml' }); + // Create a download link + const link = document.createElement('a'); + link.href = URL.createObjectURL(blob); + link.download = filename+'.xml'; + + // Append the link to the document body + document.body.appendChild(link); + + // Programmatically click the link to trigger the download + link.click(); + + // Clean up the link + document.body.removeChild(link); + } + }); + // open(UrlUtils.GEN_GFMIS_XML + "/today?online=true") + } + + + function applySearch(input) { + setSearchCriteria(input); + } + + function generateXML(input) { + downloadXML(input); + } + + return ( + !onReady ? + + : + + +
    + + GFMIS + +
    +     + {/*row 1*/} + + + + {/*row 2*/} + + + + + +     + ); +}; + +export default Index; diff --git a/src/pages/Payment/Search_GLD/index.js b/src/pages/Payment/Search_GLD/index.js index 5364cfc..9e7d21e 100644 --- a/src/pages/Payment/Search_GLD/index.js +++ b/src/pages/Payment/Search_GLD/index.js @@ -84,6 +84,7 @@ const Index = () => { { import('pages/Payment/Details_GLD const DemandNote_Create = Loadable(lazy(() => import('pages/DemandNote/Create'))); const DemandNote_Search = Loadable(lazy(() => import('pages/DemandNote/Search'))); const DemandNote_Details = Loadable(lazy(() => import('pages/DemandNote/Details'))); +const GFMIS_Search = Loadable(lazy(() => import('pages/GFMIS'))); // ==============================|| MAIN ROUTING ||============================== // const GLDUserRoutes = { @@ -73,6 +74,10 @@ const GLDUserRoutes = { { path: '/paymentPage/demandNote/details/:id', element: + }, + { + path: '/gfmis/search', + element: } ] }, diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js index e59de2f..316270e 100644 --- a/src/utils/ApiPathConst.js +++ b/src/utils/ApiPathConst.js @@ -108,7 +108,7 @@ export const DEMAND_NOTE_MARK_PAID = apiPath+'/demandNote/mark-as-paid';//POST export const DEMAND_NOTE_ATTACH = apiPath+'/demandNote/attach';//POST export const DEMAND_NOTE_EXPORT = apiPath+'/demandNote/export';//POST - +export const GFIMIS_LIST = apiPath+'/gfmis/list';//GET //User Group