alex
/
PNSPS-frontend-MaterialUI
1
0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki アクティビティ
ソースを参照

upload application detail by api not ready

master
Alex Cheung 1年前
親
615134d14a
コミット
9a111103f3
16個のファイルの変更、1252行の追加、26行の削除
ユニファイド表示
差分オプション
統計情報を表示 Patchファイルをダウンロード Diffファイルをダウンロード
  1. バイナリ
      src/assets/images/dashboard/gazette-bar.png
  2. +7
    -3
      src/assets/style/navbarStyles.css
  3. +365
    -0
      src/pages/gldApplicationDetailPage/ApplicationDetailCard.js
  4. +226
    -0
      src/pages/gldApplicationDetailPage/ClientDetailCard.js
  5. +179
    -0
      src/pages/gldApplicationDetailPage/GazetteDetailCard.js
  6. +99
    -0
      src/pages/gldApplicationDetailPage/index.js
  7. +93
    -0
      src/pages/gldApplicationDetailPage/tabTableDetail/BaseGrid.js
  8. +141
    -0
      src/pages/gldApplicationDetailPage/tabTableDetail/PendingPaymentTab.js
  9. +111
    -0
      src/pages/gldApplicationDetailPage/tabTableDetail/TabTable.js
  10. +9
    -9
      src/pages/gldDashboard/index.js
  11. +1
    -1
      src/pages/pnspsUserDetailPage/index.js
  12. +1
    -1
      src/pages/pnspsUserSearchPage/index.js
  13. +9
    -9
      src/pages/publicDashboard/index.js
  14. +5
    -1
      src/routes/GLDUserRoutes.js
  15. +3
    -1
      src/routes/MainRoutes.js
  16. +3
    -1
      src/routes/SettingRoutes.js

バイナリ
src/assets/images/dashboard/gazette-bar.png ファイルの表示

変更前 変更後
幅: 1024  |  高さ: 130  |  サイズ: 124 KiB

+ 7
- 3
src/assets/style/navbarStyles.css ファイルの表示

@@ -58,14 +58,18 @@
border: 1px solid rgba(0,0,0,.15); border: 1px solid rgba(0,0,0,.15);
border-radius: 0.25rem; border-radius: 0.25rem;
} }
#navbar div li:hover > ul,
#navbar div li:focus-within > ul,
#navbar div li:hover > ul{
visibility: visible;
opacity: 1;
display: block
}
/* #navbar div li:focus-within > ul,
#navbar div li ul:hover, #navbar div li ul:hover,
#navbar div li ul:focus { #navbar div li ul:focus {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
display: block display: block
}
} */
#systemTitle{ #systemTitle{
text-decoration: none; text-decoration: none;
font-size: 1.3rem; font-size: 1.3rem;


+ 365
- 0
src/pages/gldApplicationDetailPage/ApplicationDetailCard.js ファイルの表示

@@ -0,0 +1,365 @@
// material-ui
import {
FormControl,
Button,
Grid,
// InputAdornment,
Typography, FormLabel,
OutlinedInput,
Stack
} from '@mui/material';
import MainCard from "../../components/MainCard";
import * as React from "react";
import {useForm} from "react-hook-form";
import {
// useEffect,
useState
} from "react";
// import Checkbox from "@mui/material/Checkbox";
import Loadable from 'components/Loadable';
import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
//import {useParams} from "react-router-dom";
import BorderColorOutlinedIcon from '@mui/icons-material/BorderColorOutlined';
import DoneIcon from '@mui/icons-material/Done';
import CloseIcon from '@mui/icons-material/Close';
import EditNoteIcon from '@mui/icons-material/EditNote';
import DownloadIcon from '@mui/icons-material/Download';
// ==============================|| DASHBOARD - DEFAULT ||============================== //
const ApplicationDetailCard = (
// {isCollectData, updateUserObject,userData,isNewRecord}
) => {
// const params = useParams();
const [currentApplicationDetailData, ] = React.useState({});
// const [locked, setLocked] = useState(false);
const [onReady,] = useState(true);
const {register,
// getValues
} = useForm()

// useEffect(() => {
// //if user data from parent are not null
// if (Object.keys(userData).length > 0 && userData !== undefined) {
// setCurrentUserData(userData.data);
// }
// }, []);

// useEffect(() => {
// //if state data are ready and assign to different field
// if (Object.keys(userData).length > 0 &&currentApplicationDetailData !== undefined&&currentApplicationDetailData.id!==undefined) {
// setLocked(currentApplicationDetailData.locked);
// setOnReady(true);
// }else if(isNewRecord){
// setLocked(false);
// setOnReady(true);
// }
// }, [currentApplicationDetailData]);

// useEffect(() => {
// //upload latest data to parent
// const values = getValues();
// const objectData ={
// ...values,
// locked: locked,
// }
// updateUserObject(objectData);
// }, [isCollectData]);


return (
!onReady ?
<LoadingComponent/>
:
<MainCard elevation={0}
border={false}
content={false}
>
<Grid container spacing={4} direction="row">
<Grid item xs={4} >
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
spacing={2}
mb={2}
>
<Button
// size="large"
variant="contained"
// onClick={handleNewUserClick}
sx={{
textTransform: 'capitalize',
alignItems: 'end',
}}>
<BorderColorOutlinedIcon/>
<Typography ml={1}> Edit</Typography>
</Button>
<Button
// size="large"
variant="contained"
// onClick={handleNewUserClick}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
<EditNoteIcon/>
<Typography ml={1}> Create Proof</Typography>
</Button>
</Stack>
</Grid>
<Grid item xs={8} >
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
spacing={2}
mb={2}
>
<Button
// size="large"
variant="contained"
// onClick={handleNewUserClick}
sx={{
textTransform: 'capitalize',
alignItems: 'end',
backgroundColor:'#52b202'
}}>
<DoneIcon/>
<Typography ml={1}> Complete</Typography>
</Button>
<Button
// size="large"
variant="contained"
// onClick={handleNewUserClick}
sx={{
textTransform: 'capitalize',
alignItems: 'end',
backgroundColor:'#52b202'
}}>
<DoneIcon/>
<Typography ml={1}> Accept</Typography>
</Button>
<Button
// size="large"
variant="contained"
// onClick={handleNewUserClick}
sx={{
textTransform: 'capitalize',
alignItems: 'end',
backgroundColor:'#ffa733'
}}>
<CloseIcon/>
<Typography ml={1}> Reject</Typography>
</Button>
<Button
// size="large"
variant="contained"
// onClick={handleNewUserClick}
sx={{
textTransform: 'capitalize',
alignItems: 'end',
backgroundColor:'#ffa733'
}}>
<CloseIcon/>
<Typography ml={1}> Withdraw</Typography>
</Button>
</Stack>
</Grid>
</Grid>
<Typography variant="h5" sx={{mb: 2, borderBottom: "1px solid black"}}>
Application Details
</Typography>
<form>
<Grid container direction="column">
<Grid item xs={12} md={12}>
<Grid container direction="row" justifyContent="space-between"
alignItems="center">
<Grid item xs={12} md={6} lg={6} sx={{mb: 1}}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Application No:</FormLabel>
</Grid>

<Grid item xs={12} md={9} lg={9}>
<FormControl variant="outlined" fullWidth >
<OutlinedInput
fullWidth
size="small"
{...register("appNo",
{
value: currentApplicationDetailData.appNo,
})}
id='appNo'
/>
</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>Status:</FormLabel>
</Grid>

<Grid item xs={12} md={9} lg={9}>
<FormControl variant="outlined" fullWidth >
<OutlinedInput
fullWidth
size="small"
{...register("status",
{
value: currentApplicationDetailData.status,
})}
id='status'
/>
</FormControl>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid container direction="row" justifyContent="space-between"
alignItems="center">
<Grid item xs={12} md={6} lg={6} sx={{mb: 1}}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Applicant:</FormLabel>
</Grid>

<Grid item xs={12} md={9} lg={9}>
<FormControl variant="outlined" fullWidth >
<OutlinedInput
fullWidth
size="small"
{...register("userName",
{
value: currentApplicationDetailData.userName,
})}
id='userName'
/>
</FormControl>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={5} lg={5} sx={{mb: 1, ml:1}}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={4} lg={4}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Contact Phone:</FormLabel>
</Grid>

<Grid item xs={12} md={8} lg={8}>
<FormControl variant="outlined" fullWidth >
<OutlinedInput
fullWidth
size="small"
{...register("contactTelNo",
{
value: currentApplicationDetailData.contactTelNo,
})}
id='contactTelNo'
/>
</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>Contect Person:</FormLabel>
</Grid>

<Grid item xs={12} md={9} lg={9}>
<FormControl variant="outlined" fullWidth >
<OutlinedInput
fullWidth
size="small"
{...register("contactPerson",
{
value: currentApplicationDetailData.contactPerson,
})}
id='contactPerson'
/>
</FormControl>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={5} lg={5} sx={{mb: 1, ml:1}}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={4} lg={4}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Contact Fax:</FormLabel>
</Grid>

<Grid item xs={12} md={8} lg={8}>
<FormControl variant="outlined" fullWidth >
<OutlinedInput
fullWidth
size="small"
{...register("contactFaxNo",
{
value: currentApplicationDetailData.contactFaxNo,
})}
id='contactFaxNo'
/>
</FormControl>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid container direction="row" justifyContent="space-between"
alignItems="center">
<Grid item xs={12} md={12} lg={12} mt={1}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={12} lg={12}>
<Grid container direction="row">
<Grid item xs={12} md={2} lg={2}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Manuscript File:</FormLabel>
</Grid>
<Grid item xs={12} md={6} lg={6} sx={{display: 'flex', alignItems: 'center'}}>
<Grid container direction="row" justifyContent="flex-start">
<Grid item xs={12} md={5} lg={5} sx={{display: 'flex', alignItems: 'center'}}>
<FormControl variant="outlined" fullWidth >
<Typography
fullWidth
id='fileName'
>
Manuscript File Final.pdf
</Typography>
</FormControl>
</Grid>
<Grid item md={2} lg={2}>
<Button
size="small"
variant="contained"
// onClick={handleNewUserClick}
sx={{
textTransform: 'capitalize',
alignItems: 'end',
}}>
<DownloadIcon/>
</Button>
</Grid>
</Grid>
</Grid>

</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</form>
</MainCard>
);
};

export default ApplicationDetailCard;

+ 226
- 0
src/pages/gldApplicationDetailPage/ClientDetailCard.js ファイルの表示

@@ -0,0 +1,226 @@
// material-ui
import {
FormControl,
Button,
Grid,
// InputAdornment,
Typography, FormLabel,
OutlinedInput,
Stack
} from '@mui/material';
import MainCard from "../../components/MainCard";
import * as React from "react";
import {useForm} from "react-hook-form";
import {
// useEffect,
useState
} from "react";
// import Checkbox from "@mui/material/Checkbox";
import Loadable from 'components/Loadable';
import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
//import {useParams} from "react-router-dom";
import ContentPasteSearchIcon from '@mui/icons-material/ContentPasteSearch';
// ==============================|| DASHBOARD - DEFAULT ||============================== //
const ClientDetailCard = (
// {isCollectData, updateUserObject,userData,isNewRecord}
) => {
// const params = useParams();
const [currentApplicationDetailData, ] = React.useState({});
// const [locked, setLocked] = useState(false);
const [onReady,] = useState(true);
const {register,
// getValues
} = useForm()

// useEffect(() => {
// //if user data from parent are not null
// if (Object.keys(userData).length > 0 && userData !== undefined) {
// setCurrentUserData(userData.data);
// }
// }, []);

// useEffect(() => {
// //if state data are ready and assign to different field
// if (Object.keys(userData).length > 0 &&currentApplicationDetailData !== undefined&&currentApplicationDetailData.id!==undefined) {
// setLocked(currentApplicationDetailData.locked);
// setOnReady(true);
// }else if(isNewRecord){
// setLocked(false);
// setOnReady(true);
// }
// }, [currentApplicationDetailData]);

// useEffect(() => {
// //upload latest data to parent
// const values = getValues();
// const objectData ={
// ...values,
// locked: locked,
// }
// updateUserObject(objectData);
// }, [isCollectData]);


return (
!onReady ?
<LoadingComponent/>
:
<MainCard elevation={0}
border={false}
content={false}
>
<Grid container spacing={1} direction="row">
<Grid item xs={12} md={7} lg={7} >
<Stack
direction="row"
justifyContent="flex-start"
alignItems="center"
spacing={2}
mb={2}
>
<Button
// size="large"
variant="contained"
// onClick={handleNewUserClick}
sx={{
textTransform: 'capitalize',
alignItems: 'end',
}}>
<ContentPasteSearchIcon/>
<Typography ml={1} mr={1}> View</Typography>
</Button>
</Stack>
</Grid>
</Grid>
<Typography variant="h5" sx={{mb: 2, borderBottom: "1px solid black"}}>
Client Details
</Typography>
<form>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1} >
<Typography>
{currentApplicationDetailData.status}
</Typography>
</Grid>
</Grid>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1} >
<FormLabel>Client Type:</FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} >
<FormControl variant="outlined" >
<OutlinedInput
size="small"
{...register("userType",
{
value: currentApplicationDetailData.userType,
})}
id='userType'
/>
</FormControl>
</Grid>
</Grid>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Company Name (English):</FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} >
<FormControl variant="outlined" >
<OutlinedInput
size="small"
{...register("enCompanyName",
{
value: currentApplicationDetailData.enCompanyName,
})}
id='enCompanyName'
/>
</FormControl>
</Grid>
</Grid>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Company Name (Chinese):</FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} >
<FormControl variant="outlined" >
<OutlinedInput
size="small"
{...register("chCompanyName",
{
value: currentApplicationDetailData.chCompanyName,
})}
id='chCompanyName'
/>
</FormControl>
</Grid>
</Grid>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>English Name:</FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} >
<FormControl variant="outlined" >
<OutlinedInput
size="small"
{...register("contactPerson",
{
value: currentApplicationDetailData.contactPerson,
})}
id='contactPerson'
/>
</FormControl>
</Grid>
</Grid>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Contact Phone:</FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} >
<FormControl variant="outlined" >
<OutlinedInput
size="small"
{...register("phoneNumber",
{
value: currentApplicationDetailData.phoneNumber,
})}
id='phoneNumber'
/>
</FormControl>
</Grid>
</Grid>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Email:</FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} >
<FormControl variant="outlined" >
<OutlinedInput
size="small"
{...register("emailBus",
{
value: currentApplicationDetailData.emailBus,
})}
id='emailBus'
/>
</FormControl>
</Grid>
</Grid>
</form>
</MainCard>
);
};

export default ClientDetailCard;

+ 179
- 0
src/pages/gldApplicationDetailPage/GazetteDetailCard.js ファイルの表示

@@ -0,0 +1,179 @@
// material-ui
import {
FormControl,
// Button,
Grid,
// InputAdornment,
Typography, FormLabel,
OutlinedInput,
} from '@mui/material';
import MainCard from "../../components/MainCard";
import * as React from "react";
import {useForm} from "react-hook-form";
import {
// useEffect,
useState
} from "react";
// import Checkbox from "@mui/material/Checkbox";
import Loadable from 'components/Loadable';
import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
//import {useParams} from "react-router-dom";

// ==============================|| DASHBOARD - DEFAULT ||============================== //
const GazetteDetailCard = (
// {isCollectData, updateUserObject,userData,isNewRecord}
) => {
// const params = useParams();
const [currentApplicationDetailData, ] = React.useState({});
// const [locked, setLocked] = useState(false);
const [onReady,] = useState(true);
const {register,
// getValues
} = useForm()

// useEffect(() => {
// //if user data from parent are not null
// if (Object.keys(userData).length > 0 && userData !== undefined) {
// setCurrentUserData(userData.data);
// }
// }, []);

// useEffect(() => {
// //if state data are ready and assign to different field
// if (Object.keys(userData).length > 0 &&currentApplicationDetailData !== undefined&&currentApplicationDetailData.id!==undefined) {
// setLocked(currentApplicationDetailData.locked);
// setOnReady(true);
// }else if(isNewRecord){
// setLocked(false);
// setOnReady(true);
// }
// }, [currentApplicationDetailData]);

// useEffect(() => {
// //upload latest data to parent
// const values = getValues();
// const objectData ={
// ...values,
// locked: locked,
// }
// updateUserObject(objectData);
// }, [isCollectData]);


return (
!onReady ?
<LoadingComponent/>
:
<MainCard elevation={0}
border={false}
content={false}
>
<Typography variant="h5" sx={{mb: 2, borderBottom: "1px solid black"}}>
Gazette Details
</Typography>
<form>
<Grid container direction="column">
<Grid item xs={12} md={12}>
<Grid container direction="row" justifyContent="space-between"
alignItems="center">
<Grid item xs={12} md={6} lg={6} sx={{mb: 1}}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Issue Number:</FormLabel>
</Grid>

<Grid item xs={12} md={9} lg={9}>
<FormControl variant="outlined" fullWidth >
<OutlinedInput
fullWidth
size="small"
{...register("issueNo",
{
value: currentApplicationDetailData.issueNo,
})}
id='issueNo'
/>
</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>Gazette Code:</FormLabel>
</Grid>

<Grid item xs={12} md={9} lg={9}>
<FormControl variant="outlined" fullWidth >
<OutlinedInput
fullWidth
size="small"
{...register("issueNo",
{
value: currentApplicationDetailData.issueNo,
})}
id='issueNo'
/>
</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>Issue Date:</FormLabel>
</Grid>

<Grid item xs={12} md={9} lg={9}>
<FormControl variant="outlined" fullWidth >
<OutlinedInput
fullWidth
size="small"
{...register("issueDate",
{
value: currentApplicationDetailData.issueDate,
})}
id='issueDate'
/>
</FormControl>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={5} lg={5} sx={{mb: 1, ml:1}}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={4} lg={4}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Group Title:</FormLabel>
</Grid>

<Grid item xs={12} md={8} lg={8}>
<FormControl variant="outlined" fullWidth >
<OutlinedInput
fullWidth
size="small"
{...register("issueNo",
{
value: currentApplicationDetailData.issueNo,
})}
id='issueNo'
/>
</FormControl>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</form>
</MainCard>
);
};

export default GazetteDetailCard;

+ 99
- 0
src/pages/gldApplicationDetailPage/index.js ファイルの表示

@@ -0,0 +1,99 @@
// import { useState } from 'react';

// material-ui
import {
Grid,
Typography,
Stack,
Box
} from '@mui/material';
import Loadable from 'components/Loadable';
import { lazy } from 'react';

import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
const ApplicationDetailCard = Loadable(lazy(() => import('./ApplicationDetailCard')));
const GazetteDetailCard = Loadable(lazy(() => import('./GazetteDetailCard')));
const ClientDetailCard = Loadable(lazy(() => import('./ClientDetailCard')));
const TabTableDetail = Loadable(lazy(() => import('./tabTableDetail/TabTable')));

// ==============================|| Body - DEFAULT ||============================== //

const DashboardDefault = () => {
const BackgroundHead = {
backgroundImage: `url(${titleBackgroundImg})`,
width: '100%',
height: '100%',
backgroundSize:'cover'
}
const appNo = "G2023-343"
const gazetteIssue = "2023 Vol 027"
const issueNo = "No. 36"
const issueDate = "A001"

return (
<Grid container sx={{maxnHeight: '500vh'}} 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">Application</Typography>
</Stack>
</div>
</Grid>
<Grid item xs={12} >
<Stack direction="row" height='20px' justifyContent="flex-start" alignItems="center">
<Typography ml={4} mt={3} variant="h4">Application / {appNo}, {gazetteIssue}, {issueNo} , {issueDate}</Typography>
</Stack>
</Grid>
<Grid item xs={12} >
<Grid container direction="row">
<Grid item xs={12} md={10}>
<Grid container direction="column">
<Grid item>
<Box xs={12} ml={4} mt={3} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}>
<ApplicationDetailCard
// updateUserObject={updateUserObject}
// userData={userData}
// isCollectData={isCollectData}
// isNewRecord={isNewRecord}
/>
</Box>
</Grid>
<Grid item xs={12}>
<Box xs={12} ml={4} mt={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}>
<GazetteDetailCard
// updateUserObject={updateUserObject}
// userData={userData}
// isCollectData={isCollectData}
// isNewRecord={isNewRecord}
/>
</Box>
</Grid>
<Grid item xs={12}>
<Box xs={12} ml={4} mt={3}>
<TabTableDetail />
</Box>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={2} lg={2}>
<Grid container>
<Grid item xs={12} >
<Box xs={12} ml={1} mt={3} mr={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}>
<ClientDetailCard
// updateUserObject={updateUserObject}
// userData={userData}
// isCollectData={isCollectData}
// isNewRecord={isNewRecord}
/>
</Box>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
);
};

export default DashboardDefault;

+ 93
- 0
src/pages/gldApplicationDetailPage/tabTableDetail/BaseGrid.js ファイルの表示

@@ -0,0 +1,93 @@
// material-ui
import * as React from 'react';
import {
DataGrid,
} from "@mui/x-data-grid";
import {
Button
} from '@mui/material';
import * as DateUtils from "utils/DateUtils"
// import * as StatusUtils from "./PublicNoteStatusUtils";
// ==============================|| EVENT TABLE ||============================== //

export default function BaseGrid({rows}) {
const [rowModesModel] = React.useState({});

const columns = [
{
id: 'appNo',
field: 'appNo',
headerName: '申請編號',
flex: 1,
},
{
id: 'created',
field: 'created',
headerName: '提交日期',
flex: 1,
valueGetter:(params)=>{
return DateUtils.datetimeStr(params?.value);
}
},
{
id: 'contactPerson',
field: 'contactPerson',
headerName: '聯絡人',
flex: 2,
renderCell: (params) => {
let phone = JSON.parse(params.row.contactTelNo);
let faxNo = JSON.parse(params.row.contactFaxNo);

let contact = "";
if (phone) {
contact = "電話: " + phone?.countryCode + " " + phone?.phoneNumber
}

if (faxNo) {
if (contact != "")
contact = contact + ", "
contact = contact + "傳真:" + faxNo?.countryCode + " " + faxNo?.faxNumber
}

return (<>
{params?.value}<br />
{contact}
</>);
}
},
{
id: 'remarks',
field: 'remarks',
headerName: '我的備註',
flex: 3,
},
{
field: 'actions',
type: 'actions',
headerName: '',
width: 50,
cellClassName: 'actions',
renderCell: () => {
return <Button onClick={()=>{}}>查看詳細</Button>;
},
}
];

return (
<div style={{height: 400, width: '100%'}}>
<DataGrid
rows={rows}
columns={columns}
editMode="row"
rowModesModel={rowModesModel}
initialState={{
pagination: {
paginationModel: {page: 0, pageSize: 5},
},
}}
pageSizeOptions={[5, 10]}
autoHeight = {true}
/>
</div>
);
}

+ 141
- 0
src/pages/gldApplicationDetailPage/tabTableDetail/PendingPaymentTab.js ファイルの表示

@@ -0,0 +1,141 @@
// material-ui
import * as React from 'react';
import {
DataGrid,
} from "@mui/x-data-grid";
import {
Stack,
Typography,
Button,
Dialog, DialogTitle, DialogContent, DialogActions
} from '@mui/material';
import * as DateUtils from "utils/DateUtils"
// import * as StatusUtils from "./PublicNoteStatusUtils";
// ==============================|| EVENT TABLE ||============================== //

export default function SubmittedTab({ rows }) {
const [selectedRowItems, setSelectedRowItems] = React.useState([]);
const [isPopUp, setIsPopUp] = React.useState(false);


const columns = [
{
id: 'appNo',
field: 'appNo',
headerName: '申請編號',
flex: 1,
},
{
id: 'created',
field: 'created',
headerName: '提交日期',
flex: 1,
valueGetter: (params) => {
return DateUtils.datetimeStr(params.value);
}
},
{
id: 'contactPerson',
field: 'contactPerson',
headerName: '聯絡人',
flex: 2,
renderCell: (params) => {
let phone = JSON.parse(params.row.contactTelNo);
let faxNo = JSON.parse(params.row.contactFaxNo);

let contact = "";
if (phone) {
contact = "電話: " + phone?.countryCode + " " + phone?.phoneNumber
}

if (faxNo) {
if (contact != "")
contact = contact + ", "
contact = contact + "傳真:" + faxNo?.countryCode + " " + faxNo?.faxNumber
}

return (<>
{params?.value}<br />
{contact}
</>);
}
},
{
id: 'remarks',
field: 'remarks',
headerName: '我的備註',
flex: 3,

},
{
field: 'actions',
type: 'actions',
headerName: '',
width: 50,
cellClassName: 'actions',
renderCell: () => {
return <Button onClick={() => { }}>查看詳細</Button>;
},
}
];

const getWindowContent = () => {
var content = [];
const datas = rows?.filter((row) =>
selectedRowItems.includes(row.id)
);
for (var i = 0; i < datas?.length; i++) {
content.push(<>
<Stack direction="row" justifyContent="space-between"><Typography variant="h5">申請編號: {datas[i].appNo}</Typography>({DateUtils.datetimeStr(datas[i].created)})</Stack>
備註: {datas[i].remarks}
<br /><br />
</>);
}
return content;
}

return (
<>
<div style={{ height: 400, width: '100%' }}>
<DataGrid
checkboxSelection
disableRowSelectionOnClick
rows={rows}
columns={columns}
editMode="row"
rowSelectionModel={selectedRowItems}
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 5 },
},
}}
pageSizeOptions={[5, 10]}
autoHeight={true}
onRowSelectionModelChange={(newSelection) => {
setSelectedRowItems(newSelection);
}}
/>
<Button variant="contained" onClick={() => { setIsPopUp(true) }}>付款</Button>
</div>

<div>
<Dialog open={isPopUp} onClose={() => setIsPopUp(false)} >
<DialogTitle></DialogTitle>
<Typography variant="h2" style={{ padding: '16px' }}>確認付款</Typography>
<DialogContent style={{ display: 'flex', }}>
<Stack direction="column" justifyContent="space-between">
{getWindowContent()}
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={() => setIsPopUp(false)}>Close</Button>
<Button onClick={() => setIsPopUp(false)}>確認</Button>
</DialogActions>
</Dialog>
</div>
</>
);



}

+ 111
- 0
src/pages/gldApplicationDetailPage/tabTableDetail/TabTable.js ファイルの表示

@@ -0,0 +1,111 @@
// material-ui
import {
Grid,
// Typography,
Tab,
Box,
// Button
} from '@mui/material';

import { TabPanel, TabContext, TabList } from '@mui/lab';
import {
// useEffect,
useState } from "react";
// import { useNavigate } from "react-router-dom";
import * as React from "react";
// import * as HttpUtils from "../../../utils/HttpUtils";
// import * as UrlUtils from "../../../utils/ApiPathConst";

import Loadable from 'components/Loadable';
import { lazy } from 'react';
const BaseGrid = Loadable(lazy(() => import('./BaseGrid')));
const PendingPaymentTab = Loadable(lazy(() => import('./PendingPaymentTab')));
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
// const SearchTab = Loadable(lazy(() => import('./SearchPublicNoticeTab')));


// ==============================|| DASHBOARD - DEFAULT ||============================== //

const PublicNotice = () => {
const [submittedList, ] = useState([]);
const [inProgressList, ] = useState([]);
const [pendingPaymentList, ] = useState([]);
const [isLoading,] = useState(false);
const [selectedTab, setSelectedTab] = useState("1");
// const navigate = useNavigate();


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

const reloadPage = () => {
window.location.reload(false);
}

// const loadData = () => {
// setLoding(true);
// HttpUtils.get({
// url: `${UrlUtils.GET_PUBLIC_NOTICE_LIST_ListByStatus}`,
// onSuccess: function (response) {
// setSubmittedList(response["submitted"]);
// setInProgressList(response["inProgress"]);
// setPendingPaymentList(response["pendingPayment"]);
// setPendingPublishList(response["pendingPublish"]);
// }
// });
// };

// useEffect(() => {
// setLoding(false);
// }, [submittedList]);

const handleChange = (event, newValue) => {
setSelectedTab(newValue);
}

// const onBtnClick = () => {
// navigate('/publicNotice/apply')
// }

return (
isLoading ?
<LoadingComponent />
:
<Grid container sx={{minHeight: '40vh'}}>
{/*col 2*/}
<Grid item xs={12}>
<TabContext value={selectedTab}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<TabList onChange={handleChange} aria-label="lab API tabs example">
<Tab label={"已提交(" + submittedList.length + ")"} value="1" />
<Tab label={"處理中(" + inProgressList.length + ")"} value="2" />
<Tab label={"待付款(" + pendingPaymentList.length + ")"} value="3" />
</TabList>
</Box>
<TabPanel value="1">
<BaseGrid
rows={submittedList}
reloadFunction={reloadPage}
/>
</TabPanel>
<TabPanel value="2">
<BaseGrid
rows={inProgressList}
reloadFunction={reloadPage}
/>
</TabPanel>
<TabPanel value="3">
<PendingPaymentTab
rows={pendingPaymentList}
reloadFunction={reloadPage}
/>
</TabPanel>
</TabContext>
</Grid>
</Grid>
);
};


export default PublicNotice;

+ 9
- 9
src/pages/gldDashboard/index.js ファイルの表示

@@ -6,26 +6,26 @@ import {
Typography, Typography,
Stack Stack
} from '@mui/material'; } from '@mui/material';
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //


const DashboardDefault = () => { const DashboardDefault = () => {
const userData = JSON.parse(localStorage.getItem("userData")); const userData = JSON.parse(localStorage.getItem("userData"));
const BackgroundHead = { const BackgroundHead = {
backgroundColor: '#0d47a1',
backgroundImage: `url(${titleBackgroundImg})`,
width: '100%', width: '100%',
height: '100%', height: '100%',
backgroundSize:'cover' backgroundSize:'cover'
} }
return ( return (
<Grid container sx={{minHeight: '90vh', paddingTop: '53px'}}>
<div style={BackgroundHead}>
<Grid item xs={12} height='60px'>
<Stack direction="row" height='100%' justifyContent="flex-start" alignItems="center">
<Typography ml={10} color='#FFF' variant="h4">Morning, {userData.fullenName}</Typography>
<Grid container sx={{minHeight: '90vh'}} 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">Morning, {userData.fullenName}</Typography>
</Stack> </Stack>
</Grid>
</div>
</div>
</Grid>
</Grid> </Grid>
); );
}; };


+ 1
- 1
src/pages/pnspsUserDetailPage/index.js ファイルの表示

@@ -190,7 +190,7 @@ const UserMaintainPage = () => {
!onReady ? !onReady ?
<LoadingComponent/> <LoadingComponent/>
: :
<Grid container sx={{minHeight: '90vh', paddingTop: '53px'}}>
<Grid container sx={{minHeight: '90vh'}}>
<Grid item xs={12} height='60px'> <Grid item xs={12} height='60px'>
<Stack direction="row" height='100%' justifyContent="flex-start" alignItems="center"> <Stack direction="row" height='100%' justifyContent="flex-start" alignItems="center">
<Typography variant="h5">Maintain User</Typography> <Typography variant="h5">Maintain User</Typography>


+ 1
- 1
src/pages/pnspsUserSearchPage/index.js ファイルの表示

@@ -60,7 +60,7 @@ const UserSettingPage = () => {
!onReady ? !onReady ?
<LoadingComponent/> <LoadingComponent/>
: :
<Grid container sx={{minHeight: '90vh', paddingTop: '53px'}}>
<Grid container sx={{minHeight: '90vh'}}>
<Grid item xs={12} md={12} lg={12}> <Grid item xs={12} md={12} lg={12}>
<Grid direction="row" container justifyContent="flex-start" alignItems="center" ml={2}> <Grid direction="row" container justifyContent="flex-start" alignItems="center" ml={2}>
<Grid item xs={2} height='50px'> <Grid item xs={2} height='50px'>


+ 9
- 9
src/pages/publicDashboard/index.js ファイルの表示

@@ -9,28 +9,28 @@ import {
import { import {
isORGLoggedIn, isORGLoggedIn,
} from "utils/Utils"; } from "utils/Utils";


import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //


const DashboardDefault = () => { const DashboardDefault = () => {
const userData = JSON.parse(localStorage.getItem("userData")); const userData = JSON.parse(localStorage.getItem("userData"));
const BackgroundHead = { const BackgroundHead = {
backgroundColor: '#0d47a1',
// backgroundColor: '#0d47a1',
backgroundImage: `url(${titleBackgroundImg})`,
width: '100%', width: '100%',
height: '100%', height: '100%',
backgroundSize:'cover' backgroundSize:'cover'
} }
return ( return (
<Grid container sx={{minHeight: '90vh', paddingTop: '53px'}}>
<div style={BackgroundHead}>
<Grid item xs={12} height='60px'>
<Stack direction="row" height='100%' justifyContent="flex-start" alignItems="center">
<Grid container sx={{minHeight: '90vh'}} direction="column">
<Grid item xs={12} >
<div style={BackgroundHead}>
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
{/* <Typography variant="h5">我的公共啟事</Typography> */} {/* <Typography variant="h5">我的公共啟事</Typography> */}
<Typography ml={10} color='#FFF' variant="h4">{isORGLoggedIn() ?userData.fullenName:userData.fullchName}, 午安! 請選擇所需服務。</Typography> <Typography ml={10} color='#FFF' variant="h4">{isORGLoggedIn() ?userData.fullenName:userData.fullchName}, 午安! 請選擇所需服務。</Typography>
</Stack> </Stack>
</Grid>
</div>
</div>
</Grid>
</Grid> </Grid>
); );
}; };


+ 5
- 1
src/routes/GLDUserRoutes.js ファイルの表示

@@ -7,7 +7,7 @@ const MainLayout = Loadable(lazy(() => import('layout/MainLayout')));


// render - dashboard // render - dashboard
const DashboardDefault = Loadable(lazy(() => import('pages/gldDashboard'))); const DashboardDefault = Loadable(lazy(() => import('pages/gldDashboard')));
const ApplicationDetail = Loadable(lazy(() => import('pages/gldApplicationDetailPage')));
// ==============================|| MAIN ROUTING ||============================== // // ==============================|| MAIN ROUTING ||============================== //


const GLDUserRoutes = { const GLDUserRoutes = {
@@ -24,6 +24,10 @@ const GLDUserRoutes = {
{ {
path: 'dashboard', path: 'dashboard',
element: <DashboardDefault /> element: <DashboardDefault />
},
{
path: '/application/:id',
element: <ApplicationDetail/>
} }
] ]
}, },


+ 3
- 1
src/routes/MainRoutes.js ファイルの表示

@@ -2,7 +2,9 @@ import { lazy } from 'react';


// project import // project import
import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
import MainLayout from 'layout/MainLayout';
// import MainLayout from 'layout/MainLayout';
const MainLayout = Loadable(lazy(() => import('layout/MainLayout')));



// render - dashboard // render - dashboard




+ 3
- 1
src/routes/SettingRoutes.js ファイルの表示

@@ -2,7 +2,9 @@ import { lazy } from 'react';


// project import // project import
import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
import MainLayout from "../layout/MainLayout";
// import MainLayout from "../layout/MainLayout";
const MainLayout = Loadable(lazy(() => import('layout/MainLayout')));
// import {Navigate} from "react-router";


// render - login // render - login
const SettingPage = Loadable(lazy(() => import('pages/pnspsSettingPage'))); const SettingPage = Loadable(lazy(() => import('pages/pnspsSettingPage')));


書き込み プレビュー
読み込み中…
キャンセル
保存