@@ -1,16 +1,16 @@ | |||
// material-ui | |||
import * as React from 'react'; | |||
import { | |||
DataGrid, | |||
GridActionsCellItem, | |||
} from "@mui/x-data-grid"; | |||
import * as Icon from '../utils/IconUtils'; | |||
import * as HttpUtils from "../utils/HttpUtils" | |||
import * as UrlUtils from "../utils/ApiPathConst" | |||
import * as DateUtils from "../utils/DateUtils" | |||
import { FiDataGrid } from './FiDataGrid'; | |||
// ==============================|| EVENT TABLE ||============================== // | |||
export default function FileList({refType, refId, allowDelete, sx}) { | |||
export default function FileList({ refType, refId, allowDelete, sx, dateHideable, ...props }) { | |||
const [rows, setRows] = React.useState([]); | |||
const [rowModesModel] = React.useState({}); | |||
@@ -22,12 +22,12 @@ export default function FileList({refType, refId, allowDelete, sx}) { | |||
HttpUtils.get( | |||
{ | |||
url: UrlUtils.GET_FILE_DELETE, | |||
params:{ | |||
params: { | |||
fileId: fileId, | |||
skey:skey, | |||
skey: skey, | |||
filename: filename | |||
}, | |||
onSuccess: function(){ | |||
onSuccess: function () { | |||
loadData(); | |||
} | |||
} | |||
@@ -36,84 +36,124 @@ export default function FileList({refType, refId, allowDelete, sx}) { | |||
const onDownloadClick = (fileId, skey, filename) => () => { | |||
HttpUtils.fileDownload({ | |||
fileId:fileId, | |||
skey:skey, | |||
filename:filename, | |||
fileId: fileId, | |||
skey: skey, | |||
filename: filename, | |||
}); | |||
}; | |||
const loadData = ()=>{ | |||
HttpUtils.post( | |||
{ | |||
url: UrlUtils.POST_FILE_LIST, | |||
params:{ | |||
refType: refType, | |||
refId: refId, | |||
}, | |||
onSuccess: function(responseData){ | |||
setRows(responseData.records); | |||
const loadData = () => { | |||
HttpUtils.post( | |||
{ | |||
url: UrlUtils.POST_FILE_LIST, | |||
params: { | |||
refType: refType, | |||
refId:refId, | |||
}, | |||
onSuccess: function (responseData) { | |||
setRows(responseData.records); | |||
} | |||
} | |||
} | |||
); | |||
); | |||
}; | |||
const convertToStr=(bytes,decimals)=>{ | |||
if(bytes == 0) return '0 Bytes'; | |||
const convertToStr = (bytes, decimals) => { | |||
if (bytes == 0) return '0 Bytes'; | |||
var dm = decimals || 2, | |||
sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; | |||
let i = 0; | |||
i = Math.floor(Math.log(bytes) / Math.log(1024)); | |||
let i = 0; | |||
i = Math.floor(Math.log(bytes) / Math.log(1024)); | |||
return parseFloat((bytes / Math.pow(1024, i)).toFixed(dm)) + ' ' + sizes[i]; | |||
} | |||
const columns = [ | |||
{ | |||
id: 'created', | |||
field: 'created', | |||
headerName: 'created', | |||
flex: 1, | |||
valueGetter:(params)=>{ | |||
return DateUtils.datetimeStr(params.value); | |||
} | |||
}, | |||
{ | |||
field: 'actions', | |||
type: 'actions', | |||
headerName: '', | |||
width: 50, | |||
cellClassName: 'actions', | |||
getActions: (params) => { | |||
return [ | |||
<GridActionsCellItem | |||
key="OutSave" | |||
icon={<Icon.Download/>} | |||
label="Download" | |||
className="textPrimary" | |||
onClick={onDownloadClick(params.id, params.row.skey, params.row.filename)} | |||
color="primary" | |||
/>] | |||
const columns = (dateHideable ? | |||
[ | |||
{ | |||
field: 'actions', | |||
type: 'actions', | |||
headerName: '', | |||
width: 50, | |||
cellClassName: 'actions', | |||
getActions: (params) => { | |||
return [ | |||
<GridActionsCellItem | |||
key="OutSave" | |||
icon={<Icon.Download />} | |||
label="Download" | |||
className="textPrimary" | |||
onClick={onDownloadClick(params.id, params.row.skey, params.row.filename)} | |||
color="primary" | |||
/>] | |||
}, | |||
}, | |||
},{ | |||
id: 'filename', | |||
field: 'filename', | |||
headerName: 'filename', | |||
flex: 3, | |||
}, | |||
{ | |||
id: 'filesize', | |||
field: 'filesize', | |||
headerName: 'filesize', | |||
flex: 1, | |||
valueGetter:(params)=>{ | |||
return convertToStr(params.value); | |||
{ | |||
id: 'filename', | |||
field: 'filename', | |||
headerName: 'filename', | |||
flex: 3, | |||
}, | |||
{ | |||
id: 'filesize', | |||
field: 'filesize', | |||
headerName: 'filesize', | |||
flex: 1, | |||
valueGetter: (params) => { | |||
return convertToStr(params.value); | |||
} | |||
} | |||
}, | |||
]; | |||
] | |||
: | |||
[ | |||
{ | |||
id: 'created', | |||
field: 'created', | |||
headerName: 'created', | |||
flex: 1, | |||
valueGetter: (params) => { | |||
return DateUtils.datetimeStr(params.value); | |||
} | |||
}, | |||
{ | |||
field: 'actions', | |||
type: 'actions', | |||
headerName: '', | |||
width: 50, | |||
cellClassName: 'actions', | |||
getActions: (params) => { | |||
return [ | |||
<GridActionsCellItem | |||
key="OutSave" | |||
icon={<Icon.Download />} | |||
label="Download" | |||
className="textPrimary" | |||
onClick={onDownloadClick(params.id, params.row.skey, params.row.filename)} | |||
color="primary" | |||
/>] | |||
}, | |||
}, | |||
{ | |||
id: 'filename', | |||
field: 'filename', | |||
headerName: 'filename', | |||
flex: 3, | |||
}, | |||
{ | |||
id: 'filesize', | |||
field: 'filesize', | |||
headerName: 'filesize', | |||
flex: 1, | |||
valueGetter: (params) => { | |||
return convertToStr(params.value); | |||
} | |||
}, | |||
] | |||
); | |||
if(allowDelete){ | |||
if (allowDelete) { | |||
columns.push({ | |||
field: 'actions', | |||
type: 'actions', | |||
@@ -124,7 +164,7 @@ export default function FileList({refType, refId, allowDelete, sx}) { | |||
return [ | |||
<GridActionsCellItem | |||
key="OutSave" | |||
icon={<Icon.Delete/>} | |||
icon={<Icon.Delete />} | |||
label="Delete" | |||
className="textPrimary" | |||
onClick={onDeleteClick(params.id, params.row.skey, params.row.filename)} | |||
@@ -135,22 +175,23 @@ export default function FileList({refType, refId, allowDelete, sx}) { | |||
} | |||
return ( | |||
<div style={{height: 400, width: '100%'}}> | |||
<DataGrid | |||
hideFooterSelectedRowCount={true} | |||
sx={sx} | |||
rows={rows} | |||
columns={columns} | |||
editMode="row" | |||
rowModesModel={rowModesModel} | |||
initialState={{ | |||
pagination: { | |||
paginationModel: {page: 0, pageSize: 5}, | |||
}, | |||
}} | |||
pageSizeOptions={[5, 10]} | |||
autoHeight = {true} | |||
/> | |||
</div> | |||
// <div style={{height: 400, width: '100%'}}> | |||
<FiDataGrid | |||
{...props} | |||
hideFooterSelectedRowCount={true} | |||
sx={sx} | |||
rows={rows} | |||
columns={columns} | |||
editMode="row" | |||
rowModesModel={rowModesModel} | |||
initialState={{ | |||
pagination: { | |||
paginationModel: { page: 0, pageSize: 5 }, | |||
}, | |||
}} | |||
pageSizeOptions={[5, 10]} | |||
autoHeight={true} | |||
/> | |||
// </div> | |||
); | |||
} |
@@ -118,7 +118,7 @@ function Header(props) { | |||
<Link className="myDocumet" to='/publicNotice'>我的公共啟事</Link> | |||
</li> | |||
<li> | |||
<Link className="documentRecord" to='/dashboard'>校對記錄</Link> | |||
<Link className="documentRecord" to='/proof/search'>校對記錄</Link> | |||
</li> | |||
<li> | |||
<Link className="paymentRecord" to='/dashboard'>付款記錄</Link> | |||
@@ -1,13 +1,11 @@ | |||
// material-ui | |||
import { | |||
DataGrid, | |||
//GridActionsCellItem | |||
} from "@mui/x-data-grid"; | |||
import {FiDataGrid} from "components/FiDataGrid"; | |||
import { | |||
Typography, Button, Grid | |||
}from '@mui/material'; | |||
Typography, Button, Grid, Stack | |||
} from '@mui/material'; | |||
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | |||
import Checkbox from '@mui/material/Checkbox'; | |||
import MainCard from "../../components/MainCard"; | |||
@@ -17,6 +15,15 @@ import * as HttpUtils from "../../utils/HttpUtils"; | |||
import * as UrlUtils from "../../utils/ApiPathConst"; | |||
import * as DateUtils from "../../utils/DateUtils"; | |||
const BackgroundHead = { | |||
backgroundImage: `url(${titleBackgroundImg})`, | |||
width: '100%', | |||
height: '100%', | |||
backgroundSize: 'contain', | |||
backgroundRepeat: 'no-repeat', | |||
backgroundColor: '#0C489E', | |||
backgroundPosition: 'right' | |||
} | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
@@ -24,65 +31,64 @@ import * as DateUtils from "../../utils/DateUtils"; | |||
const ManageOrgUserPage = () => { | |||
const [rows, setRows] = React.useState([]); | |||
const [rowModesModel] = React.useState({}); | |||
React.useEffect(() => { | |||
loadData(); | |||
}, []); | |||
function loadData(){ | |||
function loadData() { | |||
HttpUtils.get( | |||
{ | |||
url: UrlUtils.GET_PUBLIC_ORG_USER_LIST, | |||
onSuccess: function(responseData){ | |||
onSuccess: function (responseData) { | |||
setRows(responseData); | |||
} | |||
} | |||
); | |||
} | |||
function onActiveClick(params){ | |||
function onActiveClick(params) { | |||
HttpUtils.get({ | |||
url: UrlUtils.GET_USER_UNLOCK+"/"+params.row.id, | |||
onSuccess:()=>{ | |||
loadData(); | |||
url: UrlUtils.GET_USER_UNLOCK + "/" + params.row.id, | |||
onSuccess: () => { | |||
loadData(); | |||
} | |||
}); | |||
} | |||
function getHeader(headerStr){ | |||
function getHeader(headerStr) { | |||
return <Typography variant="h5" >{headerStr}</Typography>; | |||
} | |||
function getStatus(params){ | |||
if(params.row.locked){ | |||
function getStatus(params) { | |||
if (params.row.locked) { | |||
return ( | |||
<> | |||
{getStatusTag({color:"#525150", text: "鎖定"})} | |||
<Button variant="outlined" onClick={()=>onActiveClick(params)}>解鎖</Button> | |||
{getStatusTag({ color: "#525150", text: "鎖定" })} | |||
<Button variant="outlined" onClick={() => onActiveClick(params)}>解鎖</Button> | |||
</> | |||
) | |||
}else if(!params.row.verifiedBy){ | |||
return getStatusTag({color:"#fca503", text: "待批核"}) | |||
}else if(params.row.status == "active"){ | |||
return getStatusTag({color:"#73AD21", text: "生效中"}) | |||
) | |||
} else if (!params.row.verifiedBy) { | |||
return getStatusTag({ color: "#fca503", text: "待批核" }) | |||
} else if (params.row.status == "active") { | |||
return getStatusTag({ color: "#73AD21", text: "生效中" }) | |||
} | |||
return getStatusTag({text: params.row.status}) | |||
return getStatusTag({ text: params.row.status }) | |||
} | |||
function getStatusTag({color="#000", textColor="#FFF",text=""}){ | |||
return ( | |||
<div style={{borderRadius:"25px" ,"background": color, "color":textColor, "padding":"5px 10px 5px 10px"}}><b>{text}</b></div> | |||
function getStatusTag({ color = "#000", textColor = "#FFF", text = "" }) { | |||
return ( | |||
<div style={{ borderRadius: "25px", "background": color, "color": textColor, "padding": "5px 10px 5px 10px" }}><b>{text}</b></div> | |||
) | |||
} | |||
const setPrimaryUser=(params)=>{ | |||
const setPrimaryUser = (params) => { | |||
HttpUtils.get( | |||
{ | |||
url: (!params.row.primaryUser?UrlUtils.GET_SET_PRIMARY_USER:UrlUtils.GET_SET_UN_PRIMARY_USER)+"/"+params.row.id, | |||
onSuccess:function(){ | |||
url: (!params.row.primaryUser ? UrlUtils.GET_SET_PRIMARY_USER : UrlUtils.GET_SET_UN_PRIMARY_USER) + "/" + params.row.id, | |||
onSuccess: function () { | |||
loadData(); | |||
} | |||
} | |||
@@ -97,23 +103,23 @@ const ManageOrgUserPage = () => { | |||
field: 'username', | |||
headerName: getHeader('登錄名稱'), | |||
flex: 1, | |||
}, | |||
{ | |||
id: 'contactPerson', | |||
field: 'contactPerson', | |||
headerName: getHeader('用戶名稱'), | |||
flex: 1, | |||
}, | |||
{ | |||
id: 'contactTel', | |||
field: 'contactTel', | |||
headerName: getHeader('聯絡電話'), | |||
flex: 1, | |||
valueGetter:(params)=>{ | |||
valueGetter: (params) => { | |||
let contactTel = JSON.parse(params.value) | |||
return contactTel?.countryCode+" "+contactTel?.phoneNumber; | |||
return contactTel?.countryCode + " " + contactTel?.phoneNumber; | |||
} | |||
}, | |||
{ | |||
@@ -127,7 +133,7 @@ const ManageOrgUserPage = () => { | |||
field: 'lastLogin', | |||
headerName: getHeader('最後登入日期'), | |||
flex: 1, | |||
valueGetter:(params)=>{ | |||
valueGetter: (params) => { | |||
return DateUtils.datetimeStr(params.value); | |||
} | |||
}, | |||
@@ -136,7 +142,7 @@ const ManageOrgUserPage = () => { | |||
field: 'lastApply', | |||
headerName: getHeader('最後提交申請日期'), | |||
flex: 1, | |||
valueGetter:()=>{ | |||
valueGetter: () => { | |||
return "--"; | |||
} | |||
}, | |||
@@ -159,9 +165,9 @@ const ManageOrgUserPage = () => { | |||
renderCell: (params) => { | |||
console.log(params); | |||
return ( | |||
<Checkbox | |||
onClick={()=>{setPrimaryUser(params)}} | |||
checked={params.row.primaryUser} | |||
<Checkbox | |||
onClick={() => { setPrimaryUser(params) }} | |||
checked={params.row.primaryUser} | |||
/> | |||
); | |||
}, | |||
@@ -169,30 +175,27 @@ const ManageOrgUserPage = () => { | |||
]; | |||
return ( | |||
<MainCard elevation={0} border={false} content={false} > | |||
<Grid container rowSpacing={4.5} columnSpacing={2.75}> | |||
<Grid item lg={12} sx={{mb: -2.25}}>Setting</Grid> | |||
<Grid item lg={12}> | |||
<Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}> | |||
公司/機構用戶記錄 | |||
</Typography> | |||
<MainCard elevation={0} border={false} content={false} > | |||
<Grid container> | |||
<Grid item xs={12}> | |||
<div style={BackgroundHead}> | |||
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> | |||
<Typography ml={15} color='#FFF' variant="h4">公司/機構用戶記錄</Typography> | |||
</Stack> | |||
</div> | |||
</Grid> | |||
<Grid item lg={12}> | |||
<DataGrid | |||
rows={rows} | |||
columns={columns} | |||
editMode="row" | |||
rowModesModel={rowModesModel} | |||
initialState={{ | |||
pagination: { | |||
paginationModel: {page: 0, pageSize: 10}, | |||
}, | |||
}} | |||
pageSizeOptions={[5, 10]} | |||
autoHeight | |||
/> | |||
</Grid> | |||
<Grid item lg={12} sx={{padding:2}}> | |||
<FiDataGrid | |||
rows={rows} | |||
columns={columns} | |||
initialState={{ | |||
pagination: { | |||
paginationModel: { page: 0, pageSize: 10 }, | |||
}, | |||
}} | |||
/> | |||
</Grid> | |||
</Grid> | |||
</MainCard> | |||
); | |||
@@ -0,0 +1,245 @@ | |||
// material-ui | |||
import { | |||
FormControl, | |||
Grid, | |||
Typography, | |||
FormLabel, | |||
TextField, | |||
Stack | |||
} from '@mui/material'; | |||
import { useFormik } from 'formik'; | |||
import * as React from "react"; | |||
import * as DateUtils from "utils/DateUtils" | |||
import { useParams } from "react-router-dom"; | |||
import Loadable from 'components/Loadable'; | |||
const MainCard = Loadable(React.lazy(() => import('components/MainCard'))); | |||
import * as StatusUtils from "../PublicNotice/ListPanel/PublicNoteStatusUtils"; | |||
import FileList from "components/FileList" | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const ApplicationDetailCard = ({ formData,}) => { | |||
const params = useParams(); | |||
const [data, setData] = React.useState({}); | |||
//const [proofId, setProofId] = React.useState(); | |||
React.useEffect(() => { | |||
if (formData){ | |||
setData(formData); | |||
//setProofId(formData.id); | |||
} | |||
}, [formData]); | |||
const formik = useFormik({ | |||
enableReinitialize: true, | |||
initialValues: data, | |||
}); | |||
const DisplayField = ({ name, width }) => { | |||
return <TextField | |||
fullWidth | |||
disabled | |||
size="small" | |||
onChange={formik.handleChange} | |||
id={name} | |||
name={name} | |||
value={formik.values[name]} | |||
variant="outlined" | |||
sx={ | |||
{ | |||
"& .MuiInputBase-input.Mui-disabled": { | |||
WebkitTextFillColor: "#000000", | |||
background: "#f8f8f8", | |||
}, | |||
width: width ? width : '100%' | |||
} | |||
} | |||
/>; | |||
} | |||
function currencyFormat(num) { | |||
let val = num?num:0; | |||
return val.toLocaleString('en-US', { | |||
minimumFractionDigits: 2 | |||
}); | |||
} | |||
return ( | |||
<MainCard elevation={0} | |||
border={false} | |||
content={false} | |||
> | |||
<Typography variant="h5" sx={{ textAlign:"left", mb: 2, borderBottom: "1px solid black" }}> | |||
公共啟事:校對資料 | |||
</Typography> | |||
<form> | |||
<Grid container direction="column"> | |||
<Grid item xs={12} md={12} lg={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>申請編號:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<DisplayField name="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>申請狀態:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<FormControl variant="outlined"> | |||
{StatusUtils.getStatusByText(data.appStatus)} | |||
</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>申請人:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<FormControl variant="outlined" fullWidth disabled > | |||
{data.orgId === null ? | |||
<DisplayField name="contactPerson" /> | |||
: | |||
<DisplayField name="applicant" /> | |||
} | |||
</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={3} lg={3} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<FormLabel>憲報期數:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<DisplayField name="issueNoStr" /> | |||
</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>聯絡人:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<DisplayField name="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={3} lg={3} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<FormLabel>刊出日期:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<DisplayField name="issueDate" /> | |||
</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="left"> | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<FormLabel>我的備注:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<Stack direction="row"> | |||
<DisplayField name="appRemarks" /> | |||
</Stack> | |||
</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={12} lg={12} sx={{ display: 'flex', alignItems: 'center' }}> | |||
<FormLabel>請下載下列印刷稿檔案,並仔細校對:</FormLabel> | |||
</Grid> | |||
</Grid> | |||
<FileList | |||
refId={params.id} | |||
refType={"proof"} | |||
dateHideable={true} | |||
disablePagination | |||
disableSelectionOnClick | |||
disableColumnMenu | |||
disableColumnSelector | |||
hideFooter | |||
/> | |||
</Grid> | |||
<Grid item xs={12} md={4} lg={4} sx={{ mb: 1, }}> | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={12} lg={12} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<FormLabel>繳費及返稿最後限期:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={12} lg={12} sx={{mb: 4, display: 'flex', alignItems: 'center' }}> | |||
<FormLabel>{DateUtils.dateStr_Cht(data.returnBeforeDate)} 下午 2:00前</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{ mb: 1, display: 'flex', alignItems: 'center' }}> | |||
<FormLabel>應繳費用:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9} sx={{ mb: 1, display: 'flex', alignItems: 'center' }}> | |||
<FormLabel style={{color: "blue", fontWeight: "bold",}}>{currencyFormat(data.fee)}</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={12} lg={12} sx={{mb: 4, display: 'flex', alignItems: 'center' }}> | |||
{ | |||
formik.values.groupType == "A" | |||
? | |||
<FormLabel>( {data.length} 頁 x $6,552 )</FormLabel> | |||
: | |||
<FormLabel>( {data.length} cm x {data.colCount==2?"$364 二格位":"$182 一格位"} )</FormLabel> | |||
} | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</form> | |||
</MainCard> | |||
); | |||
}; | |||
export default ApplicationDetailCard; |
@@ -0,0 +1,256 @@ | |||
// material-ui | |||
import { | |||
Dialog, DialogTitle, DialogContent, DialogActions, | |||
Typography, | |||
Grid, | |||
Stack, | |||
TextField, | |||
FormLabel, | |||
Button, | |||
RadioGroup, Radio, | |||
FormControlLabel | |||
} from '@mui/material'; | |||
import * as UrlUtils from "utils/ApiPathConst"; | |||
import * as HttpUtils from "utils/HttpUtils"; | |||
import FileList from "components/FileList" | |||
import MainCard from "components/MainCard"; | |||
import * as React from "react"; | |||
import * as yup from 'yup'; | |||
import { useParams } from "react-router-dom"; | |||
import { useFormik } from 'formik'; | |||
import { useNavigate } from "react-router-dom"; | |||
import * as DateUtils from "utils/DateUtils" | |||
import Loadable from 'components/Loadable'; | |||
const UploadFileTable = Loadable(React.lazy(() => import('./UploadFileTable'))); | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const FormPanel = ({ formData }) => { | |||
const [data, setData] = React.useState({}); | |||
const [attachments, setAttachments] = React.useState([]); | |||
const [isWarningPopUp, setIsWarningPopUp] = React.useState(false); | |||
const [warningText, setWarningText] = React.useState(""); | |||
const navigate = useNavigate() | |||
const params = useParams(); | |||
React.useEffect(() => { | |||
if (formData) { | |||
setData(formData); | |||
} | |||
}, [formData]); | |||
const formik = useFormik({ | |||
enableReinitialize: true, | |||
initialValues: data, | |||
validationSchema: yup.object().shape({ | |||
vaild: yup.string().max(255, "請輸入你的登入密碼").required('請輸入你的登入密碼'), | |||
}), | |||
onSubmit: values => { | |||
if (!values.action) { | |||
if (!attachments || attachments.length <= 0) { | |||
setWarningText("請選擇上傳檔案"); | |||
setIsWarningPopUp(true); | |||
return; | |||
} | |||
} | |||
// console.log(values); | |||
HttpUtils.postWithFiles({ | |||
url: UrlUtils.REPLY_PROOF, | |||
params: { | |||
id: data.id, | |||
action: values.action, | |||
vaild: values.vaild, | |||
}, | |||
files: attachments ? attachments : [], | |||
onSuccess: function () { | |||
navigate("/proof/search"); | |||
}, | |||
onFail: function (response) { | |||
setWarningText("行動失敗: 請檢查內容並再次提交回覆"); | |||
setIsWarningPopUp(true); | |||
console.log(response); | |||
}, | |||
onError: function (error) { | |||
setWarningText("行動失敗: 請檢查內容並再次提交回覆"); | |||
setIsWarningPopUp(true); | |||
console.log(error); | |||
} | |||
}); | |||
} | |||
}); | |||
const readFile = (event) => { | |||
let file = event.target.files[0]; | |||
if (file) { | |||
if (!file.name.toLowerCase().substr(file.name.length - 4).includes(".pdf")) { | |||
setWarningText("請上傳有效檔案 (檔案格式: .pdf)"); | |||
setIsWarningPopUp(true); | |||
document.getElementById("uploadFileBtn").value = ""; | |||
return; | |||
} | |||
if (file.size >= (10 * 1024 * 1034)) { | |||
setWarningText("上傳檔案大小應<10MB"); | |||
setIsWarningPopUp(true); | |||
return; | |||
} | |||
file['id'] = attachments.length; | |||
setAttachments([ | |||
...attachments, | |||
file | |||
]); | |||
document.getElementById("uploadFileBtn").value = ""; | |||
} | |||
} | |||
return ( | |||
<MainCard xs={12} md={12} lg={12} | |||
border={false} | |||
content={false}> | |||
<Typography variant="h5" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}> | |||
公共啟事:校對回覆 | |||
</Typography> | |||
<form onSubmit={formik.handleSubmit}> | |||
{ | |||
formik.values.replyDate ? | |||
<Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}> | |||
<Grid item xs={12} md={12} textAlign="left"> | |||
校對回覆日期: {DateUtils.datetimeStr_Cht(formik.values.replyDate)} | |||
</Grid> | |||
<Grid item xs={12} md={12} textAlign="left"> | |||
校對回覆: {formik.values.action? "可以付印(稿件正確)":"未能付印(需要修改)"} | |||
</Grid> | |||
<Grid item xs={12} md={12} textAlign="left"> | |||
<FileList | |||
refId={params.id} | |||
refType={"proofReply"} | |||
dateHideable={true} | |||
disablePagination | |||
disableSelectionOnClick | |||
disableColumnMenu | |||
disableColumnSelector | |||
hideFooter | |||
/> | |||
</Grid> | |||
</Grid> | |||
: | |||
<Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}> | |||
<Grid item xs={12} md={12}> | |||
<RadioGroup | |||
aria-labelledby="demo-radio-buttons-group-label" | |||
id="action" | |||
name="action" | |||
defaultValue={true} | |||
> | |||
<FormControlLabel value={true} control={<Radio />} label="可以付印(稿件正確)" /> | |||
<FormControlLabel value={false} control={<Radio />} label="未能付印(需要修改)" /> | |||
</RadioGroup> | |||
</Grid> | |||
<Grid item xs={12} md={12} textAlign="left"> | |||
請上載稿件修改的檔案: | |||
</Grid> | |||
<Grid item xs={12} md={12} textAlign="left"> | |||
<input | |||
id="uploadFileBtn" | |||
name="file" | |||
type="file" | |||
accept=".pdf" | |||
style={{ display: 'none' }} | |||
disabled={attachments.length >= (formik.values.groupType == "A" ? 2 : 1)} | |||
onChange={(event) => { | |||
readFile(event) | |||
}} | |||
/> | |||
<label htmlFor="uploadFileBtn"> | |||
<Button | |||
component="span" | |||
variant="contained" | |||
size="large" | |||
disabled={attachments.length >= (formik.values.groupType == "A" ? 2 : 1)} | |||
>上載</Button> | |||
</label> | |||
</Grid> | |||
<Grid item xs={12} md={12} textAlign="left"> | |||
<UploadFileTable key="uploadTable" recordList={attachments} setRecordList={setAttachments} /> | |||
</Grid> | |||
<Grid item xs={12} md={12} lg={12}> | |||
<Stack direction="row" alignItems="center"> | |||
<FormLabel sx={{ paddingRight: 2, textAlign: "center" }}> | |||
簽署: | |||
</FormLabel> | |||
<TextField | |||
fullWidth | |||
type="text" | |||
onChange={formik.handleChange} | |||
name="vaild" | |||
variant="outlined" | |||
error={Boolean(formik.errors["vaild"])} | |||
helperText={formik.errors["vaild"] ? formik.errors["vaild"] : ''} | |||
placeholder="請輸入你的登入密碼" | |||
sx={ | |||
{ | |||
"& .MuiInputBase-input.Mui-disabled": { | |||
WebkitTextFillColor: "#000000", | |||
background: "#f8f8f8", | |||
}, | |||
width: '50%' | |||
} | |||
} | |||
/> | |||
</Stack> | |||
</Grid> | |||
<Grid item xs={12} md={12} textAlign="left"> | |||
<Button | |||
size="large" | |||
variant="contained" | |||
color="success" | |||
type="submit" | |||
sx={{ | |||
textTransform: 'capitalize', | |||
alignItems: 'end' | |||
}}> | |||
提交回覆 | |||
</Button> | |||
</Grid> | |||
</Grid> | |||
} | |||
</form> | |||
<div> | |||
<Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)} > | |||
<DialogTitle>注意</DialogTitle> | |||
<DialogContent style={{ display: 'flex', }}> | |||
<Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography> | |||
</DialogContent> | |||
<DialogActions> | |||
<Button onClick={() => setIsWarningPopUp(false)}>OK</Button> | |||
</DialogActions> | |||
</Dialog> | |||
</div> | |||
</MainCard> | |||
); | |||
}; | |||
export default FormPanel; |
@@ -0,0 +1,111 @@ | |||
// material-ui | |||
import * as React from 'react'; | |||
import { | |||
DataGrid, | |||
GridActionsCellItem, | |||
GridRowModes | |||
} from "@mui/x-data-grid"; | |||
import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline'; | |||
import {useEffect} from "react"; | |||
// import {useNavigate} from "react-router-dom"; | |||
// import { useTheme } from '@mui/material/styles'; | |||
import { | |||
Box, | |||
Stack | |||
} from '@mui/material'; | |||
// ==============================|| EVENT TABLE ||============================== // | |||
export default function UploadFileTable({recordList, setRecordList,}) { | |||
const [rows, setRows] = React.useState(recordList); | |||
const [rowModesModel,setRowModesModel] = React.useState({}); | |||
// const theme = useTheme(); | |||
// const navigate = useNavigate() | |||
useEffect(() => { | |||
setRows(recordList); | |||
// console.log(disableDelete); | |||
}, [recordList]); | |||
function NoRowsOverlay() { | |||
return ( | |||
<Stack height="100%" alignItems="center" justifyContent="center"> | |||
No File Record | |||
{/* <pre>(rows={[]})</pre> */} | |||
</Stack> | |||
); | |||
} | |||
const handleCancelClick = (id) => () => { | |||
setRowModesModel({ | |||
...rowModesModel, | |||
[id]: { mode: GridRowModes.View, ignoreModifications: true }, | |||
}); | |||
console.log("Starting Delete") | |||
const editedRow = rows.find((row) => row.id === id); | |||
console.log(editedRow) | |||
console.log(editedRow.isNew) | |||
setRecordList(rows.filter((row) => row.id !== id)); | |||
setRows(rows.filter((row) => row.id !== id)); | |||
} | |||
const columns = [ | |||
{ | |||
field: 'actions', | |||
type: 'actions', | |||
headerName: '', | |||
width: 30, | |||
cellClassName: 'actions', | |||
// hide:true, | |||
getActions: ({id}) => { | |||
return [ | |||
<GridActionsCellItem | |||
key="OutSave" | |||
icon={<RemoveCircleOutlineIcon/>} | |||
label="delete" | |||
className="textPrimary" | |||
onClick={handleCancelClick(id)} | |||
color="error" | |||
/>] | |||
}, | |||
}, | |||
{ | |||
id: 'name', | |||
field: 'name', | |||
headerName: '檔案名稱', | |||
flex: 1, | |||
}, | |||
{ | |||
id: 'size', | |||
field: 'size', | |||
headerName: '檔案大小', | |||
valueGetter: (params) => { | |||
// console.log(params) | |||
return Math.ceil(params.value/1024)+" KB"; | |||
}, | |||
flex: 1, | |||
}, | |||
]; | |||
return ( | |||
<Box | |||
style={{ height: '200px', width: '75%' }} | |||
> | |||
<DataGrid | |||
rows={rows} | |||
columns={columns} | |||
editMode="row" | |||
sx={{border:1}} | |||
rowModesModel={rowModesModel} | |||
components={{ NoRowsOverlay, }} | |||
// hideFooterPagination={true} | |||
disablePagination | |||
disableSelectionOnClick | |||
disableColumnMenu | |||
disableColumnSelector | |||
hideFooter | |||
/> | |||
</Box> | |||
); | |||
} |
@@ -0,0 +1,122 @@ | |||
// material-ui | |||
import { | |||
Grid, | |||
Typography, | |||
Stack, | |||
Box | |||
} from '@mui/material'; | |||
import * as UrlUtils from "utils/ApiPathConst"; | |||
import * as React from "react"; | |||
import * as HttpUtils from "utils/HttpUtils"; | |||
import * as DateUtils from "utils/DateUtils"; | |||
import { useParams } from "react-router-dom"; | |||
import Loadable from 'components/Loadable'; | |||
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); | |||
const ApplicationDetails = Loadable(React.lazy(() => import('./ApplicationDetails'))); | |||
const ProofForm = Loadable(React.lazy(() => import('./ProofForm'))); | |||
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 Index = () => { | |||
const params = useParams(); | |||
const [record, setRecord] = React.useState(); | |||
const [onReady, setOnReady] = React.useState(false); | |||
React.useEffect(() => { | |||
loadForm(); | |||
}, []); | |||
React.useEffect(() => { | |||
setOnReady(true); | |||
}, [record]); | |||
const loadForm = () => { | |||
if (params.id > 0) { | |||
HttpUtils.get({ | |||
url: UrlUtils.GET_PROOF + "/" + params.id, | |||
onSuccess: (responseData) => { | |||
responseData.data["phoneNumber"] = JSON.parse(responseData.data.contactTelNo).phoneNumber; | |||
responseData.data["tel_countryCode"] = JSON.parse(responseData.data.contactTelNo).countryCode; | |||
responseData.data["faxNumber"] = JSON.parse(responseData.data.contactFaxNo).faxNumber; | |||
responseData.data["fax_countryCode"] = JSON.parse(responseData.data.contactFaxNo).countryCode; | |||
responseData.data["issueNoStr"] = responseData.data.issueYear | |||
+" Vol. "+zeroPad(responseData.data.issueVolume,3) | |||
+", No. "+zeroPad(responseData.data.issueNo,2); | |||
responseData.data["issueDate"] = DateUtils.dateFormat(responseData.data.issueDate, "D MMM YYYY (ddd)"); | |||
responseData.data["groupType"] = responseData.data.groupNo.charAt(0); | |||
responseData.data["action"] = responseData.data.replyDate?responseData.data.action:true; | |||
setRecord(responseData.data); | |||
} | |||
}); | |||
} | |||
} | |||
function zeroPad(num, places) { | |||
num=num?num:0; | |||
var zero = places - num.toString().length + 1; | |||
return Array(+(zero > 0 && zero)).join("0") + num; | |||
} | |||
return ( | |||
!onReady ? | |||
<LoadingComponent /> | |||
: | |||
<Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" > | |||
<Grid item xs={12} width="100%"> | |||
<div style={BackgroundHead} width="100%"> | |||
<Stack direction="row" height='70px'> | |||
<Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>校對記錄</Typography> | |||
</Stack> | |||
</div> | |||
</Grid> | |||
{/*row 1*/} | |||
<Grid item xs={12} md={12} > | |||
<Grid container justifyContent="flex-start" alignItems="center" > | |||
<center> | |||
<Grid item xs={12} md={12} sx={{ pt: 2 }}> | |||
<Box xs={12} md={12} sx={{ p: 4, border: '3px groove grey', borderRadius: '10px' }}> | |||
<ApplicationDetails | |||
formData={record} | |||
style={{ | |||
display: "flex", | |||
height: "100%", | |||
flex: 1 | |||
}} | |||
/> | |||
</Box> | |||
</Grid> | |||
<Grid item xs={12} md={12} sx={{ pt: 1, pb:2 }}> | |||
<Box xs={12} md={12} sx={{ p: 4, border: '3px groove grey', borderRadius: '10px' }}> | |||
<ProofForm | |||
formData={record} | |||
/> | |||
</Box> | |||
</Grid> | |||
</center> | |||
</Grid> | |||
</Grid> | |||
{/*row 2*/} | |||
</Grid > | |||
); | |||
}; | |||
export default Index; |
@@ -0,0 +1,144 @@ | |||
// 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('/proof/reply/'+ params.row.appId); | |||
}; | |||
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 = params.row.appNo; | |||
let code = params.row.groupNo; | |||
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 <div style={{margin: 4}}>App No: {appNo}<br/>Gazette Code: {code}<br/>Issue: {isssue}</div> | |||
}, | |||
}, | |||
{ | |||
id: 'created', | |||
field: 'created', | |||
headerName: 'Proof Date', | |||
flex: 1, | |||
valueGetter: (params) => { | |||
return DateUtils.datetimeStr(params?.value); | |||
} | |||
}, | |||
{ | |||
id: 'replyDate', | |||
field: 'replyDate', | |||
headerName: 'Confirmed/Return Date', | |||
flex: 1, | |||
valueGetter: (params) => { | |||
return params?.value?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: 'groupTitle', | |||
field: 'groupTitle', | |||
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)?"$ "+currencyFormat(params?.value):""; | |||
} | |||
}, | |||
]; | |||
function currencyFormat(num) { | |||
return num.toLocaleString('en-US', { | |||
minimumFractionDigits: 2 | |||
}); | |||
} | |||
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 | |||
rowHeight={80} | |||
rows={rows} | |||
columns={columns} | |||
initialState={{ | |||
pagination: { | |||
paginationModel: { page: 0, pageSize: 5 }, | |||
}, | |||
}} | |||
/> | |||
</div> | |||
); | |||
} |
@@ -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, | |||
replyed: (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"> | |||
搜尋 | |||
</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="校對編號:" | |||
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="申請編號:" | |||
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="校對日期(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="校對日期(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="聯絡人" | |||
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.proofStatus} | |||
value={status} | |||
inputValue={status?.label?status?.label:""} | |||
onChange={(event, newValue) => { | |||
if (newValue !== null) { | |||
setStatus(newValue); | |||
} | |||
}} | |||
renderInput={(params) => ( | |||
<TextField {...params} | |||
label="狀態" | |||
/> | |||
)} | |||
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; |
@@ -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.LIST_PROOF, | |||
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">校對記錄</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; |
@@ -390,6 +390,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => { | |||
</Grid> | |||
<Grid item lg={4}> | |||
{FieldUtils.getComboField({ | |||
label: "Country:", | |||
valueName: "country", | |||
@@ -479,6 +480,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => { | |||
</Grid> | |||
<Grid item lg={4}> | |||
{FieldUtils.getComboField({ | |||
label: "District:", | |||
valueName: "district", | |||
@@ -11,6 +11,8 @@ const ManageOrgUser = Loadable(lazy(() => import('pages/ManageOrgUserPage'))); | |||
const PublicNotice = Loadable(lazy(() => import('pages/PublicNotice/ListPanel'))); | |||
const PublicNoticeApplyForm = Loadable(lazy(() => import('pages/PublicNotice/ApplyForm'))); | |||
const PublicNoticeDetail = Loadable(lazy(() => import('pages/PublicNoticeDetail'))); | |||
const ProofReply = Loadable(lazy(() => import('pages/ProofReply_Public'))); | |||
const ProofSearch = Loadable(lazy(() => import('pages/ProofSearch_Public'))); | |||
// ==============================|| MAIN ROUTING ||============================== // | |||
@@ -45,6 +47,14 @@ const PublicDashboard = { | |||
path: 'publicNotice/:id', | |||
element: <PublicNoticeDetail/> | |||
}, | |||
{ | |||
path: 'proof/reply/:id', | |||
element: <ProofReply/> | |||
}, | |||
{ | |||
path: 'proof/search', | |||
element: <ProofSearch/> | |||
}, | |||
] | |||
}, | |||
] | |||
@@ -70,8 +70,10 @@ export const UPDATE_PUBLIC_NOTICE_APPLY_DETAIL = apiPath+'/application/save'; | |||
export const GET_ISSUE_COMBO = apiPath+'/gazette-issue/combo'; | |||
export const LIST_PROOF = apiPath+'/proof/list';//GET | |||
export const GET_PROOF_APP = apiPath+'/proof/create-from-app';//GET | |||
export const GET_PROOF_APP = apiPath+'/proof/create-from-app';//GLD | |||
export const CREATE_PROOF = apiPath+'/proof/create';//POST | |||
export const GET_PROOF = apiPath+'/proof/details';//GET | |||
export const REPLY_PROOF = apiPath+'/proof/reply';//GET | |||
//User Group | |||
export const POST_AND_UPDATE_USER_GROUP = apiPath+'/group/save'; |
@@ -9,6 +9,14 @@ export const dateStr = (date) =>{ | |||
return dateFormat(date,"YYYY-MM-DD") | |||
}; | |||
export const datetimeStr_Cht = (date) =>{ | |||
return dateFormat(date,"YYYY年MM月DD日 HH:mm:ss") | |||
}; | |||
export const dateStr_Cht = (date) =>{ | |||
return dateFormat(date,"YYYY年MM月DD日") | |||
}; | |||
export const convertToDate = (date)=>{ | |||
if(typeof date == 'number'){ | |||
return dayjs(date); | |||