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

proof

master
Anna Ho 1 year ago
parent
592df2a517
commit
5be3d301aa
14 changed files with 1541 additions and 148 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +126
    -85
      src/components/FileList.js
  2. +1
    -1
      src/layout/MainLayout/Header/index.js
  3. +64
    -61
      src/pages/ManageOrgUserPage/index.js
  4. +245
    -0
      src/pages/ProofReply_Public/ApplicationDetails.js
  5. +256
    -0
      src/pages/ProofReply_Public/ProofForm.js
  6. +111
    -0
      src/pages/ProofReply_Public/UploadFileTable.js
  7. +122
    -0
      src/pages/ProofReply_Public/index.js
  8. +144
    -0
      src/pages/ProofSearch_Public/DataGrid.js
  9. +322
    -0
      src/pages/ProofSearch_Public/SearchForm.js
  10. +127
    -0
      src/pages/ProofSearch_Public/index.js
  11. +2
    -0
      src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js
  12. +10
    -0
      src/routes/PublicUserRoutes.js
  13. +3
    -1
      src/utils/ApiPathConst.js
  14. +8
    -0
      src/utils/DateUtils.js

+ 126
- 85
src/components/FileList.js View File

@@ -1,16 +1,16 @@
// material-ui // material-ui
import * as React from 'react'; import * as React from 'react';
import { import {
DataGrid,
GridActionsCellItem, GridActionsCellItem,
} from "@mui/x-data-grid"; } from "@mui/x-data-grid";
import * as Icon from '../utils/IconUtils'; import * as Icon from '../utils/IconUtils';
import * as HttpUtils from "../utils/HttpUtils" import * as HttpUtils from "../utils/HttpUtils"
import * as UrlUtils from "../utils/ApiPathConst" import * as UrlUtils from "../utils/ApiPathConst"
import * as DateUtils from "../utils/DateUtils" import * as DateUtils from "../utils/DateUtils"
import { FiDataGrid } from './FiDataGrid';
// ==============================|| EVENT TABLE ||============================== // // ==============================|| 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 [rows, setRows] = React.useState([]);
const [rowModesModel] = React.useState({}); const [rowModesModel] = React.useState({});


@@ -22,12 +22,12 @@ export default function FileList({refType, refId, allowDelete, sx}) {
HttpUtils.get( HttpUtils.get(
{ {
url: UrlUtils.GET_FILE_DELETE, url: UrlUtils.GET_FILE_DELETE,
params:{
params: {
fileId: fileId, fileId: fileId,
skey:skey,
skey: skey,
filename: filename filename: filename
}, },
onSuccess: function(){
onSuccess: function () {
loadData(); loadData();
} }
} }
@@ -36,84 +36,124 @@ export default function FileList({refType, refId, allowDelete, sx}) {


const onDownloadClick = (fileId, skey, filename) => () => { const onDownloadClick = (fileId, skey, filename) => () => {
HttpUtils.fileDownload({ 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, var dm = decimals || 2,
sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; 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]; 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({ columns.push({
field: 'actions', field: 'actions',
type: 'actions', type: 'actions',
@@ -124,7 +164,7 @@ export default function FileList({refType, refId, allowDelete, sx}) {
return [ return [
<GridActionsCellItem <GridActionsCellItem
key="OutSave" key="OutSave"
icon={<Icon.Delete/>}
icon={<Icon.Delete />}
label="Delete" label="Delete"
className="textPrimary" className="textPrimary"
onClick={onDeleteClick(params.id, params.row.skey, params.row.filename)} onClick={onDeleteClick(params.id, params.row.skey, params.row.filename)}
@@ -135,22 +175,23 @@ export default function FileList({refType, refId, allowDelete, sx}) {
} }


return ( 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>
); );
} }

+ 1
- 1
src/layout/MainLayout/Header/index.js View File

@@ -118,7 +118,7 @@ function Header(props) {
<Link className="myDocumet" to='/publicNotice'>我的公共啟事</Link> <Link className="myDocumet" to='/publicNotice'>我的公共啟事</Link>
</li> </li>
<li> <li>
<Link className="documentRecord" to='/dashboard'>校對記錄</Link>
<Link className="documentRecord" to='/proof/search'>校對記錄</Link>
</li> </li>
<li> <li>
<Link className="paymentRecord" to='/dashboard'>付款記錄</Link> <Link className="paymentRecord" to='/dashboard'>付款記錄</Link>


+ 64
- 61
src/pages/ManageOrgUserPage/index.js View File

@@ -1,13 +1,11 @@
// material-ui // material-ui
import {
DataGrid,
//GridActionsCellItem
} from "@mui/x-data-grid";
import {FiDataGrid} from "components/FiDataGrid";


import { 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 Checkbox from '@mui/material/Checkbox';


import MainCard from "../../components/MainCard"; import MainCard from "../../components/MainCard";
@@ -17,6 +15,15 @@ import * as HttpUtils from "../../utils/HttpUtils";
import * as UrlUtils from "../../utils/ApiPathConst"; import * as UrlUtils from "../../utils/ApiPathConst";
import * as DateUtils from "../../utils/DateUtils"; 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 ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -24,65 +31,64 @@ import * as DateUtils from "../../utils/DateUtils";


const ManageOrgUserPage = () => { const ManageOrgUserPage = () => {
const [rows, setRows] = React.useState([]); const [rows, setRows] = React.useState([]);
const [rowModesModel] = React.useState({});


React.useEffect(() => { React.useEffect(() => {
loadData(); loadData();
}, []); }, []);




function loadData(){
function loadData() {
HttpUtils.get( HttpUtils.get(
{ {
url: UrlUtils.GET_PUBLIC_ORG_USER_LIST, url: UrlUtils.GET_PUBLIC_ORG_USER_LIST,
onSuccess: function(responseData){
onSuccess: function (responseData) {
setRows(responseData); setRows(responseData);
} }
} }
); );
} }


function onActiveClick(params){
function onActiveClick(params) {
HttpUtils.get({ 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>; return <Typography variant="h5" >{headerStr}</Typography>;
} }


function getStatus(params){
if(params.row.locked){
function getStatus(params) {
if (params.row.locked) {
return ( 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( 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(); loadData();
} }
} }
@@ -97,23 +103,23 @@ const ManageOrgUserPage = () => {
field: 'username', field: 'username',
headerName: getHeader('登錄名稱'), headerName: getHeader('登錄名稱'),
flex: 1, flex: 1,
}, },
{ {
id: 'contactPerson', id: 'contactPerson',
field: 'contactPerson', field: 'contactPerson',
headerName: getHeader('用戶名稱'), headerName: getHeader('用戶名稱'),
flex: 1, flex: 1,
}, },
{ {
id: 'contactTel', id: 'contactTel',
field: 'contactTel', field: 'contactTel',
headerName: getHeader('聯絡電話'), headerName: getHeader('聯絡電話'),
flex: 1, flex: 1,
valueGetter:(params)=>{
valueGetter: (params) => {
let contactTel = JSON.parse(params.value) let contactTel = JSON.parse(params.value)
return contactTel?.countryCode+" "+contactTel?.phoneNumber;
return contactTel?.countryCode + " " + contactTel?.phoneNumber;
} }
}, },
{ {
@@ -127,7 +133,7 @@ const ManageOrgUserPage = () => {
field: 'lastLogin', field: 'lastLogin',
headerName: getHeader('最後登入日期'), headerName: getHeader('最後登入日期'),
flex: 1, flex: 1,
valueGetter:(params)=>{
valueGetter: (params) => {
return DateUtils.datetimeStr(params.value); return DateUtils.datetimeStr(params.value);
} }
}, },
@@ -136,7 +142,7 @@ const ManageOrgUserPage = () => {
field: 'lastApply', field: 'lastApply',
headerName: getHeader('最後提交申請日期'), headerName: getHeader('最後提交申請日期'),
flex: 1, flex: 1,
valueGetter:()=>{
valueGetter: () => {
return "--"; return "--";
} }
}, },
@@ -159,9 +165,9 @@ const ManageOrgUserPage = () => {
renderCell: (params) => { renderCell: (params) => {
console.log(params); console.log(params);
return ( return (
<Checkbox
onClick={()=>{setPrimaryUser(params)}}
checked={params.row.primaryUser}
<Checkbox
onClick={() => { setPrimaryUser(params) }}
checked={params.row.primaryUser}
/> />
); );
}, },
@@ -169,30 +175,27 @@ const ManageOrgUserPage = () => {
]; ];


return ( 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>


<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> </Grid>
</MainCard> </MainCard>
); );


+ 245
- 0
src/pages/ProofReply_Public/ApplicationDetails.js View File

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

+ 256
- 0
src/pages/ProofReply_Public/ProofForm.js View File

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

+ 111
- 0
src/pages/ProofReply_Public/UploadFileTable.js View File

@@ -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=&#123;[]&#125;)</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>
);
}

+ 122
- 0
src/pages/ProofReply_Public/index.js View File

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

+ 144
- 0
src/pages/ProofSearch_Public/DataGrid.js View File

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

+ 322
- 0
src/pages/ProofSearch_Public/SearchForm.js View File

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

+ 127
- 0
src/pages/ProofSearch_Public/index.js View File

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

+ 2
- 0
src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js View File

@@ -390,6 +390,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
</Grid> </Grid>


<Grid item lg={4}> <Grid item lg={4}>
{FieldUtils.getComboField({ {FieldUtils.getComboField({
label: "Country:", label: "Country:",
valueName: "country", valueName: "country",
@@ -479,6 +480,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
</Grid> </Grid>


<Grid item lg={4}> <Grid item lg={4}>

{FieldUtils.getComboField({ {FieldUtils.getComboField({
label: "District:", label: "District:",
valueName: "district", valueName: "district",


+ 10
- 0
src/routes/PublicUserRoutes.js View File

@@ -11,6 +11,8 @@ const ManageOrgUser = Loadable(lazy(() => import('pages/ManageOrgUserPage')));
const PublicNotice = Loadable(lazy(() => import('pages/PublicNotice/ListPanel'))); const PublicNotice = Loadable(lazy(() => import('pages/PublicNotice/ListPanel')));
const PublicNoticeApplyForm = Loadable(lazy(() => import('pages/PublicNotice/ApplyForm'))); const PublicNoticeApplyForm = Loadable(lazy(() => import('pages/PublicNotice/ApplyForm')));
const PublicNoticeDetail = Loadable(lazy(() => import('pages/PublicNoticeDetail'))); 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 ||============================== // // ==============================|| MAIN ROUTING ||============================== //


@@ -45,6 +47,14 @@ const PublicDashboard = {
path: 'publicNotice/:id', path: 'publicNotice/:id',
element: <PublicNoticeDetail/> element: <PublicNoticeDetail/>
}, },
{
path: 'proof/reply/:id',
element: <ProofReply/>
},
{
path: 'proof/search',
element: <ProofSearch/>
},
] ]
}, },
] ]


+ 3
- 1
src/utils/ApiPathConst.js View File

@@ -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 GET_ISSUE_COMBO = apiPath+'/gazette-issue/combo';


export const LIST_PROOF = apiPath+'/proof/list';//GET 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 CREATE_PROOF = apiPath+'/proof/create';//POST
export const GET_PROOF = apiPath+'/proof/details';//GET
export const REPLY_PROOF = apiPath+'/proof/reply';//GET


//User Group //User Group
export const POST_AND_UPDATE_USER_GROUP = apiPath+'/group/save'; export const POST_AND_UPDATE_USER_GROUP = apiPath+'/group/save';

+ 8
- 0
src/utils/DateUtils.js View File

@@ -9,6 +9,14 @@ export const dateStr = (date) =>{
return dateFormat(date,"YYYY-MM-DD") 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)=>{ export const convertToDate = (date)=>{
if(typeof date == 'number'){ if(typeof date == 'number'){
return dayjs(date); return dayjs(date);


Write Preview
Loading…
Cancel
Save