| @@ -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; | |||
| } | |||