alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

add proof search

master
Anna Ho 1 year ago
parent
04e7f551d5
commit
2592e26ab0
5 changed files with 591 additions and 1 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      src/layout/MainLayout/Header/index.js
  2. +136
    -0
      src/pages/ProofSearch/DataGrid.js
  3. +322
    -0
      src/pages/ProofSearch/SearchForm.js
  4. +127
    -0
      src/pages/ProofSearch/index.js
  5. +5
    -0
      src/routes/GLDUserRoutes.js

+ 1
- 1
src/layout/MainLayout/Header/index.js View File

@@ -80,7 +80,7 @@ function Header(props) {
<Link className="application" to='/application/search'>Application</Link> <Link className="application" to='/application/search'>Application</Link>
</li> </li>
<li> <li>
<Link className="proof" to='/dashboard'>Proof</Link>
<Link className="proof" to='/proof/search'>Proof</Link>
</li> </li>
<li> <li>
<Link className="payment" to='/dashboard'>Payment</Link> <Link className="payment" to='/dashboard'>Payment</Link>


+ 136
- 0
src/pages/ProofSearch/DataGrid.js View File

@@ -0,0 +1,136 @@
// material-ui
import * as React from 'react';
import {
Button
} from '@mui/material';
import * as DateUtils from "utils/DateUtils";
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()

React.useEffect(() => {
setRows(recordList);
}, [recordList]);

const handleEditClick = (params) => () => {
navigate('/application/'+ params.id);
};


const columns = [
{
field: 'actions',
headerName: 'Proof No.',
width: 150,
cellClassName: 'actions',
renderCell: (params) => {
return <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>;
},
},
{
id: 'appId',
field: 'appId',
headerName: 'Application No./ Gazette Code/ Gazette Issue',
flex: 1,
renderCell: (params) => {
let appNo = "";
let code = "";
let isssue = params.row.issueYear
+" Vol. "+zeroPad(params.row.issueVolume,3)
+", No. "+zeroPad(params.row.issueNo,2)
+", "+DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)");

return [appNo+" ("+code+")"+isssue]
},
},
{
id: 'created',
field: 'created',
headerName: 'Proof Date',
flex: 1,
valueGetter: (params) => {
return DateUtils.datetimeStr(params?.value);
}
},
{
id: 'created',
field: 'created',
headerName: 'Confirmed/Return Date',
flex: 1,
valueGetter: (params) => {
return DateUtils.datetimeStr(params?.value);
}
},
{
id: 'contactPerson',
field: 'contactPerson',
headerName: 'Contact Person',
flex: 1,
renderCell: (params) => {
let company = params.row.enCompanyName!= null ?" ("+(params.row.enCompanyName)+")":"";

let phone = JSON.parse(params.row.contactTelNo);
let faxNo = JSON.parse(params.row.contactFaxNo);

let contact = "";
if (phone) {
contact = "Phone No.: " + phone?.countryCode + " " + phone?.phoneNumber
}

if (faxNo && faxNo?.faxNumber) {
if (contact != "")
contact = contact + ", "
contact = contact + "Fax No.:" + faxNo?.countryCode + " " + faxNo?.faxNumber
}

return (<>
{params?.value + company}<br />
{contact}
</>);
}
},
{
id: 'groupNo',
field: 'groupNo',
headerName: 'Gazette Group',
flex: 1,
valueGetter: (params) => {
return (params?.value)?(params?.value):"";
}
},
{
id: 'fee',
field: 'fee',
headerName: 'Fee',
flex: 1,
valueGetter: (params) => {
return (params?.value)?(params?.value):"";
}
},
];

function zeroPad(num, places) {
num=num?num:0;
var zero = places - num.toString().length + 1;
return Array(+(zero > 0 && zero)).join("0") + num;
}

return (
<div style={{ height: 400, width: '100%' }}>

<FiDataGrid
rows={rows}
columns={columns}
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 5 },
},
}}
/>
</div>
);
}

+ 322
- 0
src/pages/ProofSearch/SearchForm.js View File

@@ -0,0 +1,322 @@
// material-ui
import {
Button,
CardContent,
Grid, TextField,
Autocomplete
} from '@mui/material';
import MainCard from "components/MainCard";
import { useForm } from "react-hook-form";
import * as React from "react";
import * as ComboData from "utils/ComboData";
import * as DateUtils from "utils/DateUtils";
// ==============================|| DASHBOARD - DEFAULT ||============================== //


const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issueComboData
}) => {

const [type, setType] = React.useState([]);
const [status, setStatus] = React.useState({ key: 0, label: 'All', type: 'all' });
const [orgSelected, setOrgSelected] = React.useState({});
const [orgCombo, setOrgCombo] = React.useState();
const [issueSelected, setIssueSelected] = React.useState({});
const [issueCombo, setIssueCombo] = React.useState([]);
const [groupSelected, setGroupSelected] = React.useState({});

const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);


const { reset, register, handleSubmit } = useForm()
const onSubmit = (data) => {

let typeArray = [];

for (let i = 0; i < type.length; i++) {
typeArray.push(type[i].label);
}

const temp = {
refNo: data.refNo,
code: data.code,
issueId: issueSelected?.id,
gazettGroup: groupSelected?.type,
dateFrom: data.dateFrom,
dateTo: data.dateTo,
contact: data.contact,
status: (status?.type && status?.type != 'all') ? status?.type : "",
orgId: (orgSelected?.key && orgSelected?.key > 0) ? orgSelected?.key : "",
};
applySearch(temp);
};

React.useEffect(() => {
if (orgComboData && orgComboData.length > 0) {
setOrgCombo(orgComboData);
}
}, [orgComboData]);

React.useEffect(() => {
if (issueComboData && issueComboData.length > 0) {
setIssueCombo(issueComboData);
}
}, [issueComboData]);

function resetForm() {
setType([]);
setStatus({ key: 0, label: 'All', type: 'all' });
setOrgSelected({});
setIssueSelected({});
setGroupSelected({});
reset();
}

function getIssueLabel(data){
if(data=={}) return "";
return data.year
+" Vol. "+zeroPad(data.volume,3)
+", No. "+zeroPad(data.issueNo,2)
+", "+DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");
}

function zeroPad(num, places) {
num=num?num:0;
var zero = places - num.toString().length + 1;
return Array(+(zero > 0 && zero)).join("0") + num;
}

return (
<MainCard xs={12} md={12} lg={12}
border={false}
content={false}>

<form onSubmit={handleSubmit(onSubmit)}>
{/*row 1*/}
<CardContent sx={{ px: 2.5, pt: 3 }}>
<Grid item justifyContent="space-between" alignItems="center">
Search Form
</Grid>
</CardContent>

{/*row 2*/}
<Grid container alignItems={"center"}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("refNo")}
id='refNo'
label="Proof No."
defaultValue={searchCriteria.refNo}
InputLabelProps={{
shrink: true
}}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("code")}
id='code'
label="Application / Gazette Code"
defaultValue={searchCriteria.code}
InputLabelProps={{
shrink: true
}}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Autocomplete
{...register("issueId")}
disablePortal
id="issueId"
options={issueCombo}
value={issueSelected}
inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""}
getOptionLabel={(option)=>getIssueLabel(option)}
onChange={(event, newValue) => {
if (newValue !== null) {
setIssueSelected(newValue);
}
}}
renderInput={(params) => (
<TextField {...params}
label="Gazette Issue"
InputLabelProps={{
shrink: true
}}
/>
)}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Autocomplete
{...register("gazettGroup")}
disablePortal
id="gazettGroup"
options={ComboData.groupTitle}
value={groupSelected}
inputValue={(groupSelected?.label)?groupSelected?.label:""}
getOptionLabel={(option)=>option.label}
onChange={(event, newValue) => {
if (newValue !== null) {
setGroupSelected(newValue);
}
}}
renderInput={(params) => (
<TextField {...params}
label="Gazette Group"
InputLabelProps={{
shrink: true
}}
/>
)}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("dateFrom")}
id="dateFrom"
type="date"
label="Proof Date (From)"
defaultValue={searchCriteria.dateFrom}
InputProps={{ inputProps: { max: maxDate } }}
onChange={(newValue) => {
setMinDate(DateUtils.dateStr(newValue));
}}
InputLabelProps={{
shrink: true
}}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
InputLabelProps={{
shrink: true
}}
{...register("dateTo")}
InputProps={{ inputProps: { min: minDate } }}
onChange={(newValue) => {
setMaxDate(DateUtils.dateStr(newValue));
}}
id="dateTo"
type="date"
label="Proof Date(To)"
defaultValue={searchCriteria.dateTo}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("contact")}
id="contact"
label="Contact Person"
defaultValue={searchCriteria.contact}
InputLabelProps={{
shrink: true
}}
/>

</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Autocomplete
{...register("status")}
disablePortal
id="status"
filterOptions={(options) => options}
options={ComboData.publicNoticeStaticEng}
value={status}
inputValue={status?.label}
onChange={(event, newValue) => {
if (newValue !== null) {
setStatus(newValue);
}
}}
renderInput={(params) => (
<TextField {...params}
label="Status"
/>
)}
InputLabelProps={{
shrink: true
}}
/>
</Grid>

{
orgCombo ?
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Autocomplete
{...register("orgId")}
disablePortal
id="orgId"
options={orgCombo}
value={orgSelected}
inputValue={(orgSelected?.label) ? orgSelected?.label : ""}
onChange={(event, newValue) => {
if (newValue !== null) {
setOrgSelected(newValue);
}
}}
renderInput={(params) => (
<TextField {...params}
label="Organization"
InputLabelProps={{
shrink: true
}}
/>
)}
/>
</Grid>
: <></>
}


</Grid>


{/*last row*/}
<Grid container maxWidth justifyContent="flex-end">

<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<Button
size="large"
variant="contained"
onClick={resetForm}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
Clear
</Button>
</Grid>

<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
Submit
</Button>
</Grid>
</Grid>
</form>
</MainCard>
);
};

export default SearchPublicNoticeForm;

+ 127
- 0
src/pages/ProofSearch/index.js View File

@@ -0,0 +1,127 @@
// 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 UserSearchPage_Individual = () => {

const [record,setRecord] = React.useState([]);
const [orgCombo,setOrgCombo] = React.useState([]);
const [issueCombo,setIssueCombo] = 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(() => {
getUserList();
getOrgCombo();
getIssueCombo();
}, []);

React.useEffect(() => {
setOnReady(true);
}, [record]);

React.useEffect(() => {
getUserList();
}, [searchCriteria]);

function getUserList(){
HttpUtils.get({
url: UrlUtils.GET_PUBLIC_NOTICE_LIST,
params: searchCriteria,
onSuccess: function(responseData){
setRecord(responseData);
}
});
}

function getOrgCombo(){
HttpUtils.get({
url: UrlUtils.GET_ORG_COMBO,
onSuccess: function(responseData){
let combo = responseData;
setOrgCombo(combo);
}
});
}

function getIssueCombo(){
HttpUtils.get({
url: UrlUtils.GET_ISSUE_COMBO,
onSuccess: function(responseData){
let combo = responseData;
setIssueCombo(combo);
}
});
}

function applySearch(input) {
setSearchCriteria(input);
}

return (
!onReady ?
<LoadingComponent/>
:
<Grid container sx={{minHeight: '85vh',backgroundColor:'#ffffff'}} direction="column">
<Grid item xs={12}>
<div style={BackgroundHead}>
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
<Typography ml={15} color='#FFF' variant="h4">Proof</Typography>
</Stack>
</div>
</Grid>
{/*row 1*/}
<Grid item xs={12} md={12} lg={12}>
<SearchForm
applySearch={applySearch}
orgComboData={orgCombo}
issueComboData={issueCombo}
searchCriteria={searchCriteria}
/>
</Grid>
{/*row 2*/}
<Grid item xs={12} md={12} lg={12}>
<MainCard elevation={0}
border={false}
content={false}
>
<EventTable
recordList={record}
/>
</MainCard>
</Grid>
</Grid>
);
};

export default UserSearchPage_Individual;

+ 5
- 0
src/routes/GLDUserRoutes.js View File

@@ -9,6 +9,7 @@ const MainLayout = Loadable(lazy(() => import('layout/MainLayout')));
const DashboardDefault = Loadable(lazy(() => import('pages/gldDashboard'))); const DashboardDefault = Loadable(lazy(() => import('pages/gldDashboard')));
const ApplicationDetail = Loadable(lazy(() => import('pages/PublicNoticeDetail_GLD'))); const ApplicationDetail = Loadable(lazy(() => import('pages/PublicNoticeDetail_GLD')));
const ApplicationSearch = Loadable(lazy(() => import('pages/PublicNoticeSearch_GLD'))); const ApplicationSearch = Loadable(lazy(() => import('pages/PublicNoticeSearch_GLD')));
const ProofSearch = Loadable(lazy(() => import('pages/ProofSearch')));
// ==============================|| MAIN ROUTING ||============================== // // ==============================|| MAIN ROUTING ||============================== //


const GLDUserRoutes = { const GLDUserRoutes = {
@@ -33,6 +34,10 @@ const GLDUserRoutes = {
{ {
path: '/application/search', path: '/application/search',
element: <ApplicationSearch/> element: <ApplicationSearch/>
},
{
path: '/proof/search',
element: <ProofSearch/>
} }
] ]
}, },


Write Preview
Loading…
Cancel
Save