@@ -159,6 +159,7 @@ const ApplicationDetailCard = ({ data }) => { | |||
// fullWidth | |||
id='fileName' | |||
variant="h5" | |||
sx={{ wordBreak: 'break-word' }} | |||
> | |||
{appDetail.appFilename} | |||
</Typography> | |||
@@ -50,7 +50,7 @@ const FormPanel = ({ formData, isOverTime }) => { | |||
<Typography variant="h5">Reply Date: {DateUtils.datetimeStr(formik.values.replyDate)}</Typography> | |||
</Grid> | |||
<Grid item xs={12} md={12} textAlign="left"> | |||
<Typography variant="h5">Reply: {formik.values.action ? (<span style={{ color: 'green' }}>Ready for printing (correct manuscript).</span>) : (<span style={{ color: 'red' }}>Not ready for printing (requires modification).</span>)}</Typography> | |||
<Typography variant="h5" >Reply: {formik.values.action ? (<span style={{ color: 'green' }}>Ready for printing (correct manuscript).</span>) : (<span style={{ color: 'red' }}>Not ready for printing (requires modification).</span>)}</Typography> | |||
</Grid> | |||
{ | |||
formik.values.action ? | |||
@@ -21,6 +21,8 @@ import { | |||
import { useNavigate } from "react-router-dom"; | |||
import { notifyActionSuccess } from 'utils/CommonFunction'; | |||
import {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst"; | |||
import {ThemeProvider} from "@emotion/react"; | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
@@ -132,7 +134,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => { | |||
</Stack> | |||
</div> | |||
</Grid> | |||
<Grid item xs={12} width="60%"> | |||
<Grid item xs={12} width={{xs:"90%", sm:"90%", md:"60%", lg:"60%"}}> | |||
<Button title="返回" sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/publicNotice") }}> | |||
<ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} /> | |||
</Button> | |||
@@ -180,7 +182,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => { | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<Typography variant="h5">目標期數:</Typography> | |||
</Grid> | |||
<Grid item xs={12} md={6} lg={6}> | |||
<Grid item xs={12} md={9} lg={6}> | |||
<RadioGroup | |||
aria-labelledby="demo-radio-buttons-group-label" | |||
id="issueId" | |||
@@ -204,7 +206,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => { | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<Typography variant="h5">稿件檔案 ({"檔案大小應<10MB"}):</Typography> | |||
</Grid> | |||
<Grid item xs={12} md={3} lg={3}> | |||
<Grid item xs={12} md={6} lg={6} sx={{ wordBreak: 'break-word' }}> | |||
<input | |||
id="uploadFileBtn" | |||
name="file" | |||
@@ -248,11 +250,12 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => { | |||
</Grid> | |||
<Grid item xs={12}> | |||
<center> | |||
<ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}> | |||
<Button | |||
variant="contained" | |||
type="submit" | |||
size="large" | |||
>申請公共啟事</Button> | |||
</ThemeProvider> | |||
</center> | |||
</Grid> | |||
</Grid> | |||
@@ -475,7 +475,7 @@ const ApplicationDetailCard = ( | |||
<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> | |||
<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"> | |||
@@ -485,6 +485,7 @@ const ApplicationDetailCard = ( | |||
// fullWidth | |||
id='fileName' | |||
variant="h5" | |||
sx={{ wordBreak: 'break-word' }} | |||
> | |||
{fileDetail.filename} | |||
</Typography> | |||
@@ -301,7 +301,7 @@ const PublicNoticeDetail_GLD = () => { | |||
}, [getUploadStatus]); | |||
return ( | |||
<Grid container sx={{ maxHeight: '500vh', backgroundColor: 'backgroundColor.default' }} direction="column"> | |||
<Grid container sx={{ maxHeight: '500vh',width:"100%", backgroundColor: 'backgroundColor.default' }} direction="column"> | |||
<StatusChangeDialog open={open} | |||
handleClose={handleClose} | |||
setReason={setReason} | |||
@@ -316,7 +316,7 @@ const PublicNoticeDetail_GLD = () => { | |||
selectedGazetteGroupInputType={selectedGazetteGroupInputType} | |||
setSelectedGazetteGroupInputType={setSelectedGazetteGroupInputType} | |||
/> | |||
<Grid item xs={12}> | |||
<Grid item xs={12} > | |||
<div style={BackgroundHead}> | |||
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> | |||
<Typography ml={15} color='#FFF' variant="h4">Application</Typography> | |||
@@ -338,10 +338,10 @@ const PublicNoticeDetail_GLD = () => { | |||
</Grid> */} | |||
<Grid item xs={12} > | |||
<Grid container direction="row"> | |||
<Grid item xs={12} md={10} lg={10} xl={10}> | |||
<Grid item xs={12} md={12} lg={9} xl={9}> | |||
<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' }}> | |||
<Grid item xs={12} sm={12} md={12} lg={12} xl={12}> | |||
<Box xs={12} sx={{ ml:2 , mt:3, mr:{xs:2, sm:2}, p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}> | |||
{isLoading && editMode ? | |||
<LoadingComponent /> : | |||
<ApplicationDetailCard | |||
@@ -357,8 +357,8 @@ const PublicNoticeDetail_GLD = () => { | |||
} | |||
</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' }}> | |||
<Grid item xs={12} md={12} lg={12} xl={12}> | |||
<Box xs={12} sx={{ml:2, mt:3, mr:{xs:2, sm:2}, p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}> | |||
<GazetteDetailCard | |||
// updateUserObject={updateUserObject} | |||
applicationDetailData={applicationDetailData} | |||
@@ -368,8 +368,8 @@ const PublicNoticeDetail_GLD = () => { | |||
/> | |||
</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' }}> | |||
<Grid item xs={12} md={12} lg={12} xl={12}> | |||
<Box xs={12} sx={{ml:2, mt:3, mr:{sm:2}, p: 0, borderRadius: '10px',width: {xs:'92vw', sm:'96.5vw', md:"auto"}, backgroundColor: '#ffffff' }}> | |||
<TabTableDetail | |||
applicationDetailData={applicationDetailData} | |||
proofList={proofList} | |||
@@ -380,10 +380,10 @@ const PublicNoticeDetail_GLD = () => { | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid item xs={12} md={2} lg={2} xl={2}> | |||
<Grid item xs={12} md={12} lg={3} xl={3}> | |||
<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' }}> | |||
<Box xs={12} md={12} height='800px' sx={{ ml:2, mt:3, mr:{xs:2, sm:2}, p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}> | |||
<ClientDetailCard | |||
// updateUserObject={updateUserObject} | |||
applicationDetailData={applicationDetailData} | |||
@@ -1,19 +1,22 @@ | |||
// material-ui | |||
import * as React from 'react'; | |||
import { | |||
Button | |||
Button, useMediaQuery | |||
} from '@mui/material'; | |||
import { useNavigate } from "react-router-dom"; | |||
import {FiDataGrid} from "components/FiDataGrid"; | |||
import * as FormatUtils from "utils/FormatUtils" | |||
import * as DateUtils from "utils/DateUtils" | |||
import * as PaymentStatus from "utils/statusUtils/PaymentStatus" | |||
import {useTheme} from "@emotion/react"; | |||
// import * as StatusUtils from "./PublicNoteStatusUtils"; | |||
// ==============================|| EVENT TABLE ||============================== // | |||
export default function SubmittedTab({ rows }) { | |||
const navigate = useNavigate() | |||
const theme = useTheme(); | |||
const isMdOrLg = useMediaQuery(theme.breakpoints.up('md')); | |||
const handleEditClick = (params) => () => { | |||
navigate('/paymentPage/details/' + params.row.id); | |||
@@ -23,7 +26,8 @@ export default function SubmittedTab({ rows }) { | |||
{ | |||
field: 'actions', | |||
headerName: 'Trans. No.', | |||
flex: 1, | |||
width: isMdOrLg ? 'auto' : 160, | |||
flex: isMdOrLg ? 1 : undefined, | |||
cellClassName: 'actions', | |||
renderCell: (params) => { | |||
return <Button onClick={handleEditClick(params)}><u>{params.row.transNo}</u></Button>; | |||
@@ -33,7 +37,8 @@ export default function SubmittedTab({ rows }) { | |||
id: 'transDateTime', | |||
field: 'transDateTime', | |||
headerName: 'Trans. Date', | |||
flex: 1, | |||
width: isMdOrLg ? 'auto' : 160, | |||
flex: isMdOrLg ? 1 : undefined, | |||
valueGetter: (params) => { | |||
return DateUtils.datetimeStr(params.value); | |||
} | |||
@@ -42,7 +47,8 @@ export default function SubmittedTab({ rows }) { | |||
id: 'status', | |||
field: 'status', | |||
headerName: 'Status', | |||
flex: 1, | |||
width: isMdOrLg ? 'auto' : 160, | |||
flex: isMdOrLg ? 1 : undefined, | |||
renderCell: (params) => { | |||
return PaymentStatus.getStatus_Eng(params); | |||
} | |||
@@ -1,7 +1,7 @@ | |||
// material-ui | |||
import * as React from 'react'; | |||
import { | |||
Button, | |||
Button, useMediaQuery, | |||
} from '@mui/material'; | |||
import { | |||
GridActionsCellItem, | |||
@@ -14,11 +14,14 @@ import {FiDataGrid} from "components/FiDataGrid"; | |||
import * as FormatUtils from "utils/FormatUtils" | |||
import * as HttpUtils from "utils/HttpUtils" | |||
import * as UrlUtils from "utils/ApiPathConst" | |||
import {useTheme} from "@emotion/react"; | |||
// ==============================|| EVENT TABLE ||============================== // | |||
export default function ProofTab({rows}) { | |||
const navigate = useNavigate() | |||
const theme = useTheme(); | |||
const isMdOrLg = useMediaQuery(theme.breakpoints.up('md')); | |||
const handleEditClick = (params) => () => { | |||
navigate('/proof/reply/' + params.row.id); | |||
@@ -35,7 +38,8 @@ export default function ProofTab({rows}) { | |||
field: 'refNo', | |||
headerName: 'Proof No.', | |||
width: 200, | |||
width: isMdOrLg ? 'auto' : 200, | |||
flex: isMdOrLg ? 1 : undefined, | |||
cellClassName: 'actions', | |||
renderCell: (params) => { | |||
return <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>; | |||
@@ -44,7 +48,8 @@ export default function ProofTab({rows}) { | |||
{ | |||
field: 'status', | |||
headerName: 'Status', | |||
flex: 1, | |||
width: isMdOrLg ? 'auto' : 160, | |||
flex: isMdOrLg ? 1 : undefined, | |||
renderCell: (params) => { | |||
return ProofStatus.getStatus_Eng(params); | |||
}, | |||
@@ -52,7 +57,9 @@ export default function ProofTab({rows}) { | |||
{ | |||
field: 'created', | |||
headerName: 'Proof Date', | |||
flex: 1, | |||
width: isMdOrLg ? 'auto' : 160, | |||
flex: isMdOrLg ? 1 : undefined, | |||
valueGetter: (params) => { | |||
return DateUtils.datetimeStr(params?.value); | |||
} | |||
@@ -60,7 +67,8 @@ export default function ProofTab({rows}) { | |||
{ | |||
field: 'replyDate', | |||
headerName: 'Confirmed/Return Date', | |||
flex: 1, | |||
width: isMdOrLg ? 'auto' : 160, | |||
flex: isMdOrLg ? 1 : undefined, | |||
valueGetter: (params) => { | |||
return params?.value?DateUtils.datetimeStr(params?.value):""; | |||
} | |||
@@ -68,7 +76,9 @@ export default function ProofTab({rows}) { | |||
{ | |||
field: 'fee', | |||
headerName: 'Fee', | |||
flex: 1, | |||
width: isMdOrLg ? 'auto' : 160, | |||
flex: isMdOrLg ? 1 : undefined, | |||
valueGetter: (params) => { | |||
return (params?.value)?"$ "+FormatUtils.currencyFormat(params?.value):""; | |||
} | |||
@@ -7,16 +7,22 @@ import {FiDataGrid} from "components/FiDataGrid"; | |||
// } from '@mui/material'; | |||
import * as DateUtils from "utils/DateUtils" | |||
import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils"; | |||
import {useTheme} from "@emotion/react"; | |||
import {useMediaQuery} from "@mui/material"; | |||
// ==============================|| EVENT TABLE ||============================== // | |||
export default function StatusHistoryTab({rows}) { | |||
const theme = useTheme(); | |||
const isMdOrLg = useMediaQuery(theme.breakpoints.up('md')); | |||
const columns = [ | |||
{ | |||
id: 'created', | |||
field: 'created', | |||
headerName: 'Date', | |||
flex: 1, | |||
width: isMdOrLg ? 'auto' : 160, | |||
flex: isMdOrLg ? 1 : undefined, | |||
valueGetter: (params) => { | |||
return DateUtils.datetimeStr(params?.value); | |||
} | |||
@@ -26,13 +32,15 @@ export default function StatusHistoryTab({rows}) { | |||
id: 'createdBy', | |||
field: 'createdBy', | |||
headerName: 'Changed By', | |||
flex: 1, | |||
width: isMdOrLg ? 'auto' : 160, | |||
flex: isMdOrLg ? 1 : undefined, | |||
}, | |||
{ | |||
id: 'status', | |||
field: 'status', | |||
headerName: 'Status', | |||
flex: 1, | |||
width: isMdOrLg ? 'auto' : 160, | |||
flex: isMdOrLg ? 1 : undefined, | |||
renderCell: (params) => { | |||
return [StatusUtils.getStatusEng(params)] | |||
}, | |||
@@ -74,7 +74,7 @@ const PublicNotice = ({ applicationDetailData, proofList, paymentList }) => { | |||
{/*col 2*/} | |||
<Grid item xs={12}> | |||
<TabContext value={selectedTab}> | |||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | |||
<Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto' }}> | |||
<TabList onChange={handleChange} aria-label="lab API tabs example"> | |||
<Tab label={"Proof(" + _proofList?.length + ") "} value="1" /> | |||
<Tab label={"Payment(" + _paymentList.length + ") "} value="2" /> | |||
@@ -60,6 +60,9 @@ export const getTextArea = ({ label, valueName, form, disabled, inputProps, ...p | |||
minRows: 4, | |||
maxRows: 4, | |||
inputProps: inputProps, | |||
InputProps: { | |||
style: { minHeight:'42.5px', maxHeight: '50vh',height: 'auto' }, | |||
}, | |||
props | |||
})} | |||
</Grid> | |||
@@ -170,7 +173,7 @@ export const getComboField = ({ label, dataList, valueName, form, disabled, getO | |||
</Grid>; | |||
} | |||
export const initField = ({ type, valueName, form, disabled, multiline, handleChange, placeholder, inputProps, width, ...props }) => { | |||
export const initField = ({ type, valueName, form, disabled, multiline, handleChange, placeholder, inputProps, InputProps, width, ...props }) => { | |||
let err = Boolean(form.errors[valueName]); | |||
return <TextField | |||
@@ -181,6 +184,7 @@ export const initField = ({ type, valueName, form, disabled, multiline, handleCh | |||
type={type} | |||
placeholder={placeholder} | |||
inputProps={inputProps} | |||
InputProps={InputProps} | |||
error={err} | |||
helperText={form.errors[valueName] ? form.errors[valueName] : ''} | |||
onChange={handleChange ? handleChange : form.handleChange} | |||