@@ -95,15 +95,13 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData }) => { | |||
{/*row 1*/} | |||
<CardContent sx={{ px: 2.5, pt: 3 }}> | |||
<Grid item justifyContent="space-between" alignItems="center" > | |||
<Typography variant="h4">Create</Typography> | |||
<Typography variant="h5">Please Select Gazette Issue :</Typography> | |||
</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 }}> | |||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3 }}> | |||
<Autocomplete | |||
disablePortal | |||
id="issueId" | |||
@@ -126,13 +124,7 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData }) => { | |||
)} | |||
/> | |||
</Grid> | |||
</Grid> | |||
{/*last row*/} | |||
<Grid container maxWidth justifyContent="flex-end"> | |||
<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }} > | |||
<Grid item sx={{ ml: 3, mr: 3}} > | |||
<Button | |||
size="large" | |||
variant="contained" | |||
@@ -144,8 +136,7 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData }) => { | |||
<Typography variant="h5">Preview</Typography> | |||
</Button> | |||
</Grid> | |||
<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }} > | |||
<Grid item sx={{ ml: 3, mr: 3}} > | |||
<Button | |||
size="large" | |||
variant="contained" | |||
@@ -0,0 +1,183 @@ | |||
// material-ui | |||
import { | |||
FormControl, | |||
Button, | |||
Grid, | |||
Typography, FormLabel, | |||
} from '@mui/material'; | |||
import * as React from "react"; | |||
import Loadable from 'components/Loadable'; | |||
const MainCard = Loadable(React.lazy(() => import('components/MainCard'))); | |||
import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils"; | |||
import DownloadIcon from '@mui/icons-material/Download'; | |||
import { notifyDownloadSuccess } from 'utils/CommonFunction'; | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const ApplicationDetailCard = ({ data }) => { | |||
const [appDetail, setAppDetails] = React.useState({}); | |||
React.useEffect(() => { | |||
if (Object.keys(data).length > 0) { | |||
setAppDetails(data); | |||
} | |||
}, [data]); | |||
const onDownloadClick = () => () => { | |||
HttpUtils.fileDownload({ | |||
fileId: appDetail.appFileId, | |||
skey: appDetail.appSkey, | |||
filename: appDetail.appFilename, | |||
}); | |||
notifyDownloadSuccess() | |||
setUploadStatus(true) | |||
}; | |||
return ( | |||
<MainCard elevation={0} | |||
border={false} | |||
content={false} | |||
> | |||
<Typography variant="h4" xs={12} md={12} sx={{ mb: 2, borderBottom: "1px solid black" }}> | |||
Application Details | |||
</Typography> | |||
<Grid container direction="column"> | |||
<Grid item xs={12} md={12}> | |||
<Grid container direction="row" justifyContent="space-between" alignItems="center"> | |||
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}> | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}> | |||
<FormLabel><Typography variant="h5">Application No:</Typography></FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
{appDetail.appNo} | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}> | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<FormLabel><Typography variant="h5">Status:</Typography></FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<FormControl variant="outlined"> | |||
{StatusUtils.getStatusByTextEng(appDetail.status)} | |||
</FormControl> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid container direction="row" justifyContent="space-between" alignItems="center"> | |||
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}> | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<FormLabel><Typography variant="h5">Applicant:</Typography></FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<FormControl variant="outlined" fullWidth disabled > | |||
{appDetail.orgId === null ? | |||
appDetail.contactPerson : appDetail.enCompanyName | |||
} | |||
</FormControl> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}> | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={4} lg={4} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<FormLabel><Typography variant="h5">Contact Phone:</Typography></FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={8} lg={8}> | |||
{appDetail.contactTelNo ? appDetail.contactTelNo.countryCode + " " + appDetail.contactTelNo.phoneNumber : ""} | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid container direction="row" justifyContent="space-between" alignItems="center"> | |||
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}> | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<FormLabel><Typography variant="h5">Contect Person:</Typography></FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
{appDetail.contactPerson} | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}> | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={4} lg={4} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<FormLabel><Typography variant="h5">Contact Fax:</Typography></FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={8} lg={8}> | |||
{appDetail.contactFaxNo ? appDetail.contactFaxNo.countryCode + " " + appDetail.contactFaxNo.faxNumber : ""} | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid container direction="row" justifyContent="space-between" | |||
alignItems="center"> | |||
<Grid item xs={12} md={6} lg={6} mt={1}> | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={12} lg={12}> | |||
<Grid container direction="row"> | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<FormLabel><Typography variant="h5">Manuscript File:</Typography></FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}> | |||
<Grid container direction="row" justifyContent="flex-start"> | |||
<Grid item xs={12} md={5} lg={5} sx={{ display: 'flex', alignItems: 'center' }}> | |||
<FormControl variant="outlined" fullWidth > | |||
<Typography | |||
// fullWidth | |||
id='fileName' | |||
variant="h5" | |||
> | |||
{appDetail.filename} | |||
</Typography> | |||
</FormControl> | |||
</Grid> | |||
<Grid item md={2} lg={2}> | |||
<Button | |||
size="small" | |||
variant="contained" | |||
onClick={onDownloadClick()} | |||
sx={{ | |||
textTransform: 'capitalize', | |||
alignItems: 'end', | |||
}}> | |||
<DownloadIcon /> | |||
</Button> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</MainCard> | |||
); | |||
}; | |||
export default ApplicationDetailCard; |
@@ -0,0 +1,64 @@ | |||
// material-ui | |||
import { | |||
Grid, | |||
// InputAdornment, | |||
Typography, FormLabel, | |||
} from '@mui/material'; | |||
import MainCard from "../../../components/MainCard"; | |||
import * as React from "react"; | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const ClientDetailCard = ({ data }) => { | |||
const [clientData, setClientData] = React.useState({}); | |||
React.useEffect(() => { | |||
if (Object.keys(data).length > 0 && data !== undefined) { | |||
setClientData(data); | |||
} | |||
}, [data]); | |||
const getDisplayField = (label, value) => { | |||
return <Grid container direction="column" justifyContent="flex-start" | |||
alignItems="flex-start"> | |||
<Grid item xs={12} md={12} lg={12} mb={1} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<FormLabel><Typography variant="h5">{label}:</Typography></FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }} > | |||
{value} | |||
</Grid> | |||
</Grid>; | |||
} | |||
return ( | |||
<MainCard elevation={0} | |||
border={false} | |||
content={false} | |||
sx={{ xs: "12", md: "7" }}> | |||
<Typography variant="h4" sx={{ mb: 2, borderBottom: "1px solid black" }}> | |||
Client Details | |||
</Typography> | |||
{getDisplayField("Client Type", clientData.type)} | |||
{clientData.type === "ORG" ? | |||
<> | |||
{getDisplayField("Company Name (English)", clientData?.enCompanyName)} | |||
{getDisplayField("Company Name (Chinese)", clientData?.chCompanyName)} | |||
{getDisplayField("English Name", clientData.contactPerson)} | |||
{getDisplayField("Contact Phone", clientData.contactTel ? clientData.contactTel.countryCode + " " + clientData.contactTel.phoneNumber : "")} | |||
{getDisplayField("Email", clientData.emailBus)} | |||
</> : | |||
<> | |||
{getDisplayField("English Name", clientData.enName)} | |||
{getDisplayField("Chinese Name", clientData.chName)} | |||
{getDisplayField("Contact Phone", clientData.mobileNumber ? clientData.mobileNumber.countryCode + " " + clientData.mobileNumber.phoneNumber : "")} | |||
{getDisplayField("Email", clientData.emailAddress)} | |||
</> | |||
} | |||
</MainCard> | |||
); | |||
}; | |||
export default ClientDetailCard; |
@@ -0,0 +1,117 @@ | |||
// material-ui | |||
import { | |||
FormControl, | |||
Button, | |||
Grid, | |||
Typography, FormLabel, | |||
} from '@mui/material'; | |||
import * as React from "react"; | |||
import * as StatusUtils from "utils/statusUtils/DnStatus"; | |||
import Loadable from 'components/Loadable'; | |||
const MainCard = Loadable(React.lazy(() => import('components/MainCard'))); | |||
import DownloadIcon from '@mui/icons-material/Download'; | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const DnDetailCard = ({ data }) => { | |||
const [dnData, setDnData] = React.useState({}); | |||
React.useEffect(() => { | |||
if (Object.keys(data).length > 0) { | |||
setDnData(data) | |||
} | |||
}, [data]); | |||
const onDownloadClick = () => { | |||
} | |||
const getDisplayField = (label, value) => { | |||
return <Grid item xs={12} md={5} lg={5} sx={{ mb: 1 }}> | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<FormLabel><Typography variant="h5">{label}:</Typography></FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<Typography variant="h5"> | |||
{value} | |||
</Typography> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
} | |||
return ( | |||
<MainCard elevation={0} | |||
border={false} | |||
content={false} | |||
> | |||
<Typography variant="h4" xs={12} md={12} sx={{ mb: 2, borderBottom: "1px solid black" }}> | |||
Demand Note | |||
</Typography> | |||
<Grid container direction="column"> | |||
<Grid item xs={12} md={12}> | |||
<Grid container direction="row" justifyContent="space-between" alignItems="center"> | |||
{getDisplayField("DN No.", dnData.dnNo)} | |||
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}> | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<FormLabel><Typography variant="h5">Status:</Typography></FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<FormControl variant="outlined"> | |||
{StatusUtils.getStatus_Eng(dnData.status)} | |||
</FormControl> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid container direction="row" justifyContent="space-between" alignItems="center"> | |||
{getDisplayField("Issue Date", dnData.issueDate)} | |||
{getDisplayField("DN Sent", dnData?.sentDate ? dnData.sentDate + " - " + dnData.sentBy : "")} | |||
</Grid> | |||
<Grid container direction="row" justifyContent="space-between" alignItems="center"> | |||
<Grid item xs={12} md={6} lg={6} mt={1}> | |||
<Grid container direction="row" justifyContent="flex-start"> | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<FormLabel><Typography variant="h5">File:</Typography></FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={5} lg={5} sx={{ display: 'flex', alignItems: 'center' }}> | |||
<Typography variant="h5">{dnData.filename} </Typography> | |||
</Grid> | |||
<Grid item md={4} lg={4}> | |||
<Button | |||
size="small" | |||
variant="contained" | |||
onClick={onDownloadClick()} | |||
sx={{ | |||
textTransform: 'capitalize', | |||
alignItems: 'end', | |||
}}> | |||
<DownloadIcon /> | |||
</Button> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</MainCard> | |||
); | |||
}; | |||
export default DnDetailCard; |
@@ -0,0 +1,96 @@ | |||
// material-ui | |||
import { | |||
Grid, | |||
Typography, FormLabel, | |||
} from '@mui/material'; | |||
import MainCard from "../../../components/MainCard"; | |||
import * as React from "react"; | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const GazetteDetailCard = ({ data }) => { | |||
const [appData, setAppData] = React.useState({}); | |||
React.useEffect(() => { | |||
if (Object.keys(data).length > 0) { | |||
setAppData(data); | |||
} | |||
}, [data]); | |||
return ( | |||
<MainCard elevation={0} | |||
border={false} | |||
content={false} | |||
> | |||
<Typography variant="h5" sx={{ mb: 2, borderBottom: "1px solid black" }}> | |||
Gazette Details | |||
</Typography> | |||
<form> | |||
<Grid container direction="column"> | |||
<Grid item xs={12} md={12}> | |||
<Grid container direction="row" justifyContent="space-between" | |||
alignItems="center"> | |||
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}> | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<FormLabel><Typography variant="h5">Issue Number:</Typography></FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
{appData.issueNum} | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}> | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<FormLabel><Typography variant="h5">Gazette Code:</Typography></FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
{appData.groupNo} | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid container direction="row" justifyContent="space-between" | |||
alignItems="center"> | |||
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}> | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<FormLabel><Typography variant="h5">Issue Date:</Typography></FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
{appData.gazetteIssueDate} | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}> | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<FormLabel><Typography variant="h5">Group Title:</Typography></FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
{appData.groupTitle} | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</form> | |||
</MainCard> | |||
); | |||
}; | |||
export default GazetteDetailCard; |
@@ -0,0 +1,123 @@ | |||
import { | |||
Grid, | |||
Typography, | |||
Stack, | |||
Box | |||
} from '@mui/material'; | |||
import Loadable from 'components/Loadable'; | |||
import * as React from 'react'; | |||
import { useParams } from "react-router-dom"; | |||
import * as HttpUtils from "utils/HttpUtils"; | |||
import * as DateUtils from "utils/DateUtils"; | |||
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | |||
const LoadingComponent = Loadable(React.lazy(() => import('../../extra-pages/LoadingComponent'))); | |||
const DnDetailCard = Loadable(React.lazy(() => import('./DnDetailCard'))); | |||
const ApplicationDetailCard = Loadable(React.lazy(() => import('./ApplicationDetailCard'))); | |||
const GazetteDetailCard = Loadable(React.lazy(() => import('./GazetteDetailCard'))); | |||
const ClientDetailCard = Loadable(React.lazy(() => import('./ClientDetailCard'))); | |||
import { | |||
DEMAND_NOTE_LOAD, | |||
} from "utils/ApiPathConst"; | |||
// ==============================|| Body - DEFAULT ||============================== // | |||
const DemandNote_index = () => { | |||
const params = useParams(); | |||
const [data, setData] = React.useState({}); | |||
const [isLoading, setLoading] = React.useState(false); | |||
const BackgroundHead = { | |||
backgroundImage: `url(${titleBackgroundImg})`, | |||
width: '100%', | |||
height: '100%', | |||
backgroundSize: 'contain', | |||
backgroundRepeat: 'no-repeat', | |||
backgroundColor: '#0C489E', | |||
backgroundPosition: 'right' | |||
} | |||
React.useEffect(() => { | |||
loadApplicationDetail(); | |||
}, []); | |||
const loadApplicationDetail = () => { | |||
if (params.id > 0) { | |||
HttpUtils.get({ | |||
url: `${DEMAND_NOTE_LOAD}/${params.id}`, | |||
onSuccess: (response) => { | |||
response["issueDate"] = DateUtils.dateStr(response["issueDate"]); | |||
response["sentDate"] = DateUtils.datetimeStr(response["sentDate"]); | |||
response["gazetteIssueDate"] = DateUtils.datetimeStr(response["gazetteIssueDate"]); | |||
response["contactFaxNo"] =JSON.parse(response["contactFaxNo"]); | |||
response["contactTelNo"] =JSON.parse(response["contactTelNo"]); | |||
response["contactTel"] =JSON.parse(response["contactTel"]); | |||
setData(response); | |||
setLoading(false); | |||
} | |||
}); | |||
} | |||
} | |||
return ( | |||
<Grid container sx={{ maxHeight: '500vh', backgroundColor: 'backgroundColor.default' }} 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">Demand Note</Typography> | |||
</Stack> | |||
</div> | |||
</Grid> | |||
<Grid item xs={12} > | |||
<Grid container direction="row"> | |||
<Grid item xs={12} md={10} lg={10} xl={10}> | |||
<Grid container direction="column"> | |||
<Grid item xs={12} md={10} lg={10} xl={10}> | |||
<Box xs={12} ml={4} mt={3} sx={{ p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}> | |||
<DnDetailCard data={data}/> | |||
</Box> | |||
</Grid> | |||
<Grid item xs={12} md={10} lg={10} xl={10}> | |||
<Box xs={12} ml={4} mt={3} sx={{ p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}> | |||
{isLoading && editMode ? | |||
<LoadingComponent /> : | |||
<ApplicationDetailCard | |||
data={data} | |||
/> | |||
} | |||
</Box> | |||
</Grid> | |||
<Grid item xs={12} md={10} lg={10} xl={10}> | |||
<Box xs={12} ml={4} mt={3} sx={{ p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}> | |||
<GazetteDetailCard | |||
data={data} | |||
/> | |||
</Box> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid item xs={12} md={2} lg={2} xl={2}> | |||
<Grid container> | |||
<Grid item xs={12} md={12}> | |||
<Box xs={12} md={12} ml={3} mt={3} mr={1} height='800px' sx={{ p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}> | |||
<ClientDetailCard | |||
data={data} | |||
/> | |||
</Box> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
); | |||
} | |||
export default DemandNote_index; | |||
@@ -22,10 +22,11 @@ export default function SeaarchDemandNote({ recordList }) { | |||
setRows(recordList); | |||
}, [recordList]); | |||
const handleEditClick = (params) => () => { | |||
navigate('/application/' + params.id); | |||
const handleDnClick = (params) => () => { | |||
navigate('/paymentPage/demandNote/details/' + params.id); | |||
}; | |||
const onDownloadClick = (params) => () => { | |||
HttpUtils.fileDownload({ | |||
fileId: params.row.fileId, | |||
@@ -54,24 +55,28 @@ export default function SeaarchDemandNote({ recordList }) { | |||
} | |||
function handleRowDoubleClick(params) { | |||
// handleEditClick(params) | |||
navigate('/application/' + params.id); | |||
handleDnClick(params); | |||
} | |||
const columns = [ | |||
{ | |||
field: 'dnNo', | |||
headerName: 'DN No.', | |||
width: 175, | |||
renderCell: (params) => { | |||
return <Button onClick={handleDnClick(params)}><u>{params.row.dnNo}</u></Button>; | |||
}, | |||
}, | |||
{ | |||
field: 'appNo', | |||
headerName: 'App No.', | |||
width: 150, | |||
renderCell: (params) => { | |||
return <Button onClick={handleEditClick(params)}><u>{params.row.appNo}</u></Button>; | |||
}, | |||
}, | |||
{ | |||
id: 'contactPerson', | |||
field: 'contactPerson', | |||
headerName: 'Client', | |||
flex: 2, | |||
width: 300, | |||
renderCell: (params) => { | |||
let company = params.row.enCompanyName != null ? " (" + (params.row.enCompanyName) + ")" : ""; | |||
@@ -95,13 +100,6 @@ export default function SeaarchDemandNote({ recordList }) { | |||
</>); | |||
} | |||
}, | |||
{ | |||
id: 'dnNo', | |||
field: 'dnNo', | |||
headerName: 'DN No.', | |||
width: 175, | |||
}, | |||
{ | |||
id: 'issueDate', | |||
field: 'issueDate', | |||
@@ -111,9 +109,7 @@ export default function SeaarchDemandNote({ recordList }) { | |||
return DateUtils.dateStr(params?.value); | |||
} | |||
}, | |||
{ | |||
id: 'status', | |||
field: 'status', | |||
headerName: 'Status', | |||
width: 175, | |||
@@ -122,7 +118,6 @@ export default function SeaarchDemandNote({ recordList }) { | |||
}, | |||
}, | |||
{ | |||
id: 'sentDate', | |||
field: 'sentDate', | |||
headerName: 'DN Sent Date', | |||
flex: 1, | |||
@@ -131,7 +126,6 @@ export default function SeaarchDemandNote({ recordList }) { | |||
} | |||
}, | |||
{ | |||
id: 'filename', | |||
field: 'filename', | |||
headerName: 'DN File', | |||
flex: 1, | |||
@@ -139,19 +133,8 @@ export default function SeaarchDemandNote({ recordList }) { | |||
return <Button onClick={onDownloadClick(params)}><u>{params.row.filename}</u></Button>; | |||
}, | |||
}, | |||
{ | |||
id: 'status', | |||
field: 'status', | |||
headerName: '', | |||
width: 150, | |||
renderCell: (params) => { | |||
return <Button onClick={onDownloadClick(params)}><u>View Details</u></Button>; | |||
}, | |||
}, | |||
]; | |||
return ( | |||
<div style={{ height: '100%', width: '100%' }}> | |||
<Grid container maxWidth justifyContent="flex-start"> | |||
@@ -16,6 +16,7 @@ const PaymentSearch_GLD = Loadable(lazy(() => import('pages/Payment/Search_GLD') | |||
const PaymentDetails_GLD = Loadable(lazy(() => 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'))); | |||
// ==============================|| MAIN ROUTING ||============================== // | |||
const GLDUserRoutes = { | |||
@@ -68,6 +69,10 @@ const GLDUserRoutes = { | |||
{ | |||
path: '/paymentPage/demandNote', | |||
element: <DemandNote_Search/> | |||
}, | |||
{ | |||
path: '/paymentPage/demandNote/details/:id', | |||
element: <DemandNote_Details/> | |||
} | |||
] | |||
}, | |||
@@ -97,6 +97,7 @@ export const PAYMENT_APP_LIST = apiPath+'/payment/applist';//POST | |||
export const DEMAND_NOTE_PREVIEW = apiPath+'/demandNote/preview';//GET | |||
export const DEMAND_NOTE_CREATE = apiPath+'/demandNote/create';//POST | |||
export const DEMAND_NOTE_LIST = apiPath+'/demandNote/list';//GET | |||
export const DEMAND_NOTE_LOAD = apiPath+'/demandNote/load';//GET | |||
@@ -0,0 +1,24 @@ | |||
import {getStatusTag} from "utils/statusUtils/Base"; | |||
const pending = {color:"#f5a83d", eng:"Pending", cht:"待辦"} | |||
const toBePaid = {color:"#f5a83d", eng:"to be paid", cht:"待支付"} | |||
const paid = {color:"#8a8784", eng:"paid", cht:"已付費"} | |||
export function getStatus_Cht(params) { | |||
let status = getStatus(params); | |||
return status?getStatusTag({color: status.color, textColor:status.textColor, text:status.cht }):""; | |||
} | |||
export function getStatus_Eng(params) { | |||
let status = getStatus(params); | |||
return status?getStatusTag({color: status.color, textColor:status.textColor, text:status.eng }):""; | |||
} | |||
function getStatus(params) { | |||
let status = params?.row?params.row.status:params; | |||
if(status =="pending") return pending; | |||
if(status == "to be paid") return toBePaid; | |||
if(status =="paid") return paid; | |||
} | |||