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

shoow remark and hidden Pay btn when status != confirmed

master
Anna Ho 2 years ago
parent
503574d98c
commit
84b574664e
1 changed files with 172 additions and 94 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +172
    -94
      src/pages/PublicNoticeDetail/ApplicationDetailCard.js

+ 172
- 94
src/pages/PublicNoticeDetail/ApplicationDetailCard.js View File

@@ -1,8 +1,8 @@
// material-ui // material-ui
import { import {
FormControl,
FormControl,
Button, Button,
Grid,
Grid,
// InputAdornment, // InputAdornment,
Typography, FormLabel, Typography, FormLabel,
OutlinedInput, OutlinedInput,
@@ -10,11 +10,11 @@ import {
} from '@mui/material'; } from '@mui/material';
// import MainCard from "../../components/MainCard"; // import MainCard from "../../components/MainCard";
const MainCard = Loadable(lazy(() => import('components/MainCard'))); const MainCard = Loadable(lazy(() => import('components/MainCard')));
import {useForm} from "react-hook-form";
import { useForm } from "react-hook-form";
import { import {
useEffect, useEffect,
useState useState
} from "react";
} from "react";
// import Checkbox from "@mui/material/Checkbox"; // import Checkbox from "@mui/material/Checkbox";
import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';


@@ -32,34 +32,34 @@ import EditNoteIcon from '@mui/icons-material/EditNote';
import DownloadIcon from '@mui/icons-material/Download'; import DownloadIcon from '@mui/icons-material/Download';
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //
const ApplicationDetailCard = ( const ApplicationDetailCard = (
{ applicationDetailData,
{ applicationDetailData,
setStatus, setStatus,
// updateUserObject, // updateUserObject,
// isNewRecord // isNewRecord
} }
) => {
) => {
// const params = useParams(); // const params = useParams();
const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({}); const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({});
const [companyName, setCompanyName] = useState({}); const [companyName, setCompanyName] = useState({});
const [fileDetail, setfileDetail] = useState({}); const [fileDetail, setfileDetail] = useState({});
const [onReady,setOnReady] = useState(false);
const [issueNum,setIssueNum] = useState("");
const [issueDate,setIssueDate] = useState("");
const {register,
const [onReady, setOnReady] = useState(false);
const [issueNum, setIssueNum] = useState("");
const [issueDate, setIssueDate] = useState("");
const { register,
// getValues // getValues
} = useForm() } = useForm()


useEffect(() => { useEffect(() => {
//if user data from parent are not null //if user data from parent are not null
// console.log(applicationDetailData) // console.log(applicationDetailData)
if (Object.keys(applicationDetailData).length > 0 &&applicationDetailData.data!==null) {
if (Object.keys(applicationDetailData).length > 0 && applicationDetailData.data !== null) {
setCurrentApplicationDetailData(applicationDetailData.data); setCurrentApplicationDetailData(applicationDetailData.data);
setCompanyName(applicationDetailData.companyName); setCompanyName(applicationDetailData.companyName);
setfileDetail(applicationDetailData.fileDetail); setfileDetail(applicationDetailData.fileDetail);
setIssueNum(applicationDetailData.gazetteIssueDetail.volume+"/"+applicationDetailData.gazetteIssueDetail.year
+" No. "+applicationDetailData.gazetteIssueDetail.issueNo);
setIssueNum(applicationDetailData.gazetteIssueDetail.volume + "/" + applicationDetailData.gazetteIssueDetail.year
+ " No. " + applicationDetailData.gazetteIssueDetail.issueNo);
setIssueDate(DateUtils.dateFormat(applicationDetailData.gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)")); setIssueDate(DateUtils.dateFormat(applicationDetailData.gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)"));
} }
}, [applicationDetailData]); }, [applicationDetailData]);


@@ -73,78 +73,85 @@ const ApplicationDetailCard = (


const onDownloadClick = () => () => { const onDownloadClick = () => () => {
HttpUtils.fileDownload({ HttpUtils.fileDownload({
fileId:fileDetail.id,
skey:fileDetail.skey,
filename:fileDetail.filename,
fileId: fileDetail.id,
skey: fileDetail.skey,
filename: fileDetail.filename,
}); });
}; };


const cancelledClick = () => () =>{
const cancelledClick = () => () => {
setStatus("cancel") setStatus("cancel")
}; };


return ( return (
!onReady ? !onReady ?
<LoadingComponent/>
<LoadingComponent />
: :
<MainCard elevation={0} <MainCard elevation={0}
border={false}
content={false}
border={false}
content={false}
> >
<Grid container spacing={1} direction="row"> <Grid container spacing={1} direction="row">
<Grid item xs={12}> <Grid item xs={12}>
<Stack
<Stack
direction="row" direction="row"
justifyContent="space-between" justifyContent="space-between"
alignItems="center" alignItems="center"
spacing={2} spacing={2}
mb={2} mb={2}
> >
{
currentApplicationDetailData.status == "confirmed"?
<Button <Button
// size="large" // size="large"
variant="contained" variant="contained"
// onClick={handleNewUserClick} // onClick={handleNewUserClick}
disabled= {currentApplicationDetailData.status =="rejected"||currentApplicationDetailData.status =="cancelled"||currentApplicationDetailData.status =="paid"}
disabled={currentApplicationDetailData.status == "rejected" || currentApplicationDetailData.status == "cancelled" || currentApplicationDetailData.status == "paid"}
sx={{ sx={{
textTransform: 'capitalize', textTransform: 'capitalize',
alignItems: 'end' alignItems: 'end'
}}> }}>
<EditNoteIcon/>
<EditNoteIcon />
<Typography ml={1}> 支付</Typography> <Typography ml={1}> 支付</Typography>
</Button> </Button>
:<div></div>
}


<Button <Button
// size="large"
variant="contained"
onClick={cancelledClick()}
disabled= {currentApplicationDetailData.status !=="submitted"}
sx={{
textTransform: 'capitalize',
alignItems: 'end',
backgroundColor:'#ffa733'
}}>
<CloseIcon/>
<Typography ml={1}> 取消</Typography>
</Button>
// size="large"
variant="contained"
onClick={cancelledClick()}
disabled={currentApplicationDetailData.status !== "submitted"}
sx={{
textTransform: 'capitalize',
alignItems: 'end',
backgroundColor: '#ffa733'
}}>
<CloseIcon />
<Typography ml={1}> 取消</Typography>
</Button>
</Stack> </Stack>
</Grid> </Grid>
</Grid> </Grid>
<Typography variant="h5" sx={{mb: 2, borderBottom: "1px solid black"}}>
公共啟事申請資料
<Typography variant="h5" sx={{ mb: 2, borderBottom: "1px solid black" }}>
公共啟事申請資料
</Typography> </Typography>
<form> <form>
<Grid container direction="column"> <Grid container direction="column">
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<Grid container direction="row" justifyContent="space-between" <Grid container direction="row" justifyContent="space-between"
alignItems="center"> alignItems="center">
<Grid item xs={12} md={6} lg={6} sx={{mb: 1}}>
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} <Grid item xs={12} md={3} lg={3}
sx={{display: 'flex', alignItems: 'center'}}>
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>申請編號:</FormLabel> <FormLabel>申請編號:</FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
<FormControl variant="outlined" fullWidth disabled>
<FormControl variant="outlined" fullWidth disabled>
<OutlinedInput <OutlinedInput
fullWidth fullWidth
size="small" size="small"
@@ -153,15 +160,21 @@ const ApplicationDetailCard = (
value: currentApplicationDetailData.appNo, value: currentApplicationDetailData.appNo,
})} })}
id='appNo' id='appNo'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/> />
</FormControl> </FormControl>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} md={5} lg={5} sx={{mb: 1, ml:1}}>
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} <Grid item xs={12} md={3} lg={3}
sx={{display: 'flex', alignItems: 'center'}}>
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>申請狀態:</FormLabel> <FormLabel>申請狀態:</FormLabel>
</Grid> </Grid>


@@ -175,43 +188,55 @@ const ApplicationDetailCard = (
</Grid> </Grid>
<Grid container direction="row" justifyContent="space-between" <Grid container direction="row" justifyContent="space-between"
alignItems="center"> alignItems="center">
<Grid item xs={12} md={6} lg={6} sx={{mb: 1}}>
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} <Grid item xs={12} md={3} lg={3}
sx={{display: 'flex', alignItems: 'center'}}>
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>申請人:</FormLabel> <FormLabel>申請人:</FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
<FormControl variant="outlined" fullWidth disabled > <FormControl variant="outlined" fullWidth disabled >
{ currentApplicationDetailData.orgId===null?
<OutlinedInput
fullWidth
size="small"
{...register("contactPerson",
{
value: currentApplicationDetailData.contactPerson,
})}
id='contactPerson'
/>:
<OutlinedInput
fullWidth
size="small"
{...register("companyName",
{
value: companyName.enCompanyName,
})}
id='companyName'
/>
{currentApplicationDetailData.orgId === null ?
<OutlinedInput
fullWidth
size="small"
{...register("contactPerson",
{
value: currentApplicationDetailData.contactPerson,
})}
id='contactPerson'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/> :
<OutlinedInput
fullWidth
size="small"
{...register("companyName",
{
value: companyName.enCompanyName,
})}
id='companyName'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/>
} }
</FormControl> </FormControl>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} md={5} lg={5} sx={{mb: 1, ml:1}}>
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} <Grid item xs={12} md={3} lg={3}
sx={{display: 'flex', alignItems: 'center'}}>
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>憲報期數:</FormLabel> <FormLabel>憲報期數:</FormLabel>
</Grid> </Grid>


@@ -225,24 +250,30 @@ const ApplicationDetailCard = (
value: issueNum, value: issueNum,
})} })}
id='issueNum' id='issueNum'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/> />
</FormControl> </FormControl>
</Stack> </Stack>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
</Grid>
</Grid>
<Grid container direction="row" justifyContent="space-between" <Grid container direction="row" justifyContent="space-between"
alignItems="center"> alignItems="center">
<Grid item xs={12} md={6} lg={6} sx={{mb: 1}}>
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} <Grid item xs={12} md={3} lg={3}
sx={{display: 'flex', alignItems: 'center'}}>
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>聯絡人:</FormLabel> <FormLabel>聯絡人:</FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
<FormControl variant="outlined" fullWidth disabled>
<FormControl variant="outlined" fullWidth disabled>
<OutlinedInput <OutlinedInput
fullWidth fullWidth
size="small" size="small"
@@ -251,15 +282,21 @@ const ApplicationDetailCard = (
value: currentApplicationDetailData.contactPerson, value: currentApplicationDetailData.contactPerson,
})} })}
id='contactPerson' id='contactPerson'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/> />
</FormControl> </FormControl>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} md={5} lg={5} sx={{mb: 1, ml:1}}>
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} <Grid item xs={12} md={3} lg={3}
sx={{display: 'flex', alignItems: 'center'}}>
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>發布日期:</FormLabel> <FormLabel>發布日期:</FormLabel>
</Grid> </Grid>


@@ -273,6 +310,12 @@ const ApplicationDetailCard = (
value: issueDate, value: issueDate,
})} })}
id='issueDate' id='issueDate'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/> />
</FormControl> </FormControl>
</Stack> </Stack>
@@ -280,16 +323,16 @@ const ApplicationDetailCard = (
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} md={6} lg={6} sx={{mb: 1,}}>
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} <Grid item xs={12} md={3} lg={3}
sx={{display: 'flex', alignItems: 'center'}}>
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>聯絡電話:</FormLabel> <FormLabel>聯絡電話:</FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
<Stack direction="row"> <Stack direction="row">
<FormControl variant="outlined" sx={{width:'25%'}} disabled>
<FormControl variant="outlined" sx={{ width: '25%' }} disabled>
<OutlinedInput <OutlinedInput
size="small" size="small"
{...register("countryCode", {...register("countryCode",
@@ -297,9 +340,15 @@ const ApplicationDetailCard = (
value: currentApplicationDetailData.contactTelNo.countryCode, value: currentApplicationDetailData.contactTelNo.countryCode,
})} })}
id='countryCode' id='countryCode'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/> />
</FormControl> </FormControl>
<FormControl variant="outlined" sx={{width:'100%'}} disabled>
<FormControl variant="outlined" sx={{ width: '100%' }} disabled>
<OutlinedInput <OutlinedInput
size="small" size="small"
{...register("phoneNumber", {...register("phoneNumber",
@@ -307,22 +356,28 @@ const ApplicationDetailCard = (
value: currentApplicationDetailData.contactTelNo.phoneNumber, value: currentApplicationDetailData.contactTelNo.phoneNumber,
})} })}
id='phoneNumber' id='phoneNumber'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/> />
</FormControl> </FormControl>
</Stack> </Stack>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} md={6} lg={6} sx={{mb: 1,}}>
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} <Grid item xs={12} md={3} lg={3}
sx={{display: 'flex', alignItems: 'center'}}>
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>傳真號碼:</FormLabel> <FormLabel>傳真號碼:</FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
<Stack direction="row"> <Stack direction="row">
<FormControl variant="outlined" sx={{width:'25%'}} disabled>
<FormControl variant="outlined" sx={{ width: '25%' }} disabled>
<OutlinedInput <OutlinedInput
size="small" size="small"
{...register("countryCode", {...register("countryCode",
@@ -330,9 +385,15 @@ const ApplicationDetailCard = (
value: currentApplicationDetailData.contactFaxNo.countryCode, value: currentApplicationDetailData.contactFaxNo.countryCode,
})} })}
id='countryCode' id='countryCode'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/> />
</FormControl> </FormControl>
<FormControl variant="outlined" sx={{width:'100%'}} disabled>
<FormControl variant="outlined" sx={{ width: '100%' }} disabled>
<OutlinedInput <OutlinedInput
size="small" size="small"
{...register("faxNumber", {...register("faxNumber",
@@ -340,6 +401,12 @@ const ApplicationDetailCard = (
value: currentApplicationDetailData.contactFaxNo.faxNumber, value: currentApplicationDetailData.contactFaxNo.faxNumber,
})} })}
id='faxNumber' id='faxNumber'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/> />
</FormControl> </FormControl>
</Stack> </Stack>
@@ -353,31 +420,31 @@ const ApplicationDetailCard = (
<Grid item xs={12} md={6} lg={6}> <Grid item xs={12} md={6} lg={6}>
<Grid container direction="row"> <Grid container direction="row">
<Grid item xs={12} md={3} lg={3} <Grid item xs={12} md={3} lg={3}
sx={{display: 'flex', alignItems: 'center'}}>
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>犒件檔案:</FormLabel> <FormLabel>犒件檔案:</FormLabel>
</Grid> </Grid>
<Grid item xs={12} md={9} lg={9} sx={{display: 'flex', alignItems: 'center'}}>
<Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}>
<Grid container direction="row" justifyContent="flex-start"> <Grid container direction="row" justifyContent="flex-start">
<Grid item xs={12} md={5} lg={5} sx={{display: 'flex', alignItems: 'center'}}>
<Grid item xs={12} md={5} lg={5} sx={{ display: 'flex', alignItems: 'center' }}>
<FormControl variant="outlined" fullWidth > <FormControl variant="outlined" fullWidth >
<Typography <Typography
fullWidth fullWidth
id='fileName' id='fileName'
> >
{fileDetail.filename}
{fileDetail.filename}
</Typography> </Typography>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item md={2} lg={2}>
<Grid item md={2} lg={2}>
<Button <Button
size="small"
variant="contained"
onClick={onDownloadClick()}
sx={{
textTransform: 'capitalize',
alignItems: 'end',
}}>
<DownloadIcon/>
size="small"
variant="contained"
onClick={onDownloadClick()}
sx={{
textTransform: 'capitalize',
alignItems: 'end',
}}>
<DownloadIcon />
</Button> </Button>
</Grid> </Grid>
</Grid> </Grid>
@@ -386,7 +453,18 @@ const ApplicationDetailCard = (
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
</Grid>
</Grid>
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1, paddingTop: 2}}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>備註:</FormLabel>
</Grid>
<Grid item xs={12} md={9} lg={9}>
<FormLabel>{currentApplicationDetailData.remarks}</FormLabel>
</Grid>
</Grid>
</Grid>
</Grid> </Grid>
</Grid> </Grid>
</form> </form>


Write Preview
Loading…
Cancel
Save