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

update proof search page

master
jason.lam 1 year ago
parent
88d2fe8ae4
commit
417720162a
4 changed files with 78 additions and 63 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +19
    -10
      src/pages/Proof/Search_Public/DataGrid.js
  2. +56
    -52
      src/pages/Proof/Search_Public/SearchForm.js
  3. +1
    -0
      src/pages/Proof/Search_Public/index.js
  4. +2
    -1
      src/themes/buttonConst.js

+ 19
- 10
src/pages/Proof/Search_Public/DataGrid.js View File

@@ -1,7 +1,7 @@
// material-ui // material-ui
import * as React from 'react'; import * as React from 'react';
import { import {
Button
Button, useMediaQuery
} from '@mui/material'; } from '@mui/material';
import * as DateUtils from "utils/DateUtils"; import * as DateUtils from "utils/DateUtils";
import * as FormatUtils from "utils/FormatUtils" import * as FormatUtils from "utils/FormatUtils"
@@ -11,11 +11,14 @@ import { FiDataGrid } from "components/FiDataGrid";
import { import {
isORGLoggedIn, isORGLoggedIn,
} from "utils/Utils"; } from "utils/Utils";
import {useTheme} from "@emotion/react";
// ==============================|| EVENT TABLE ||============================== // // ==============================|| EVENT TABLE ||============================== //


export default function SearchPublicNoticeTable({ recordList }) { export default function SearchPublicNoticeTable({ recordList }) {
const [rows, setRows] = React.useState(recordList); const [rows, setRows] = React.useState(recordList);
const navigate = useNavigate() const navigate = useNavigate()
const theme = useTheme();
const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));


const _sx = { const _sx = {
padding: "4 2 4 2", padding: "4 2 4 2",
@@ -63,7 +66,8 @@ export default function SearchPublicNoticeTable({ recordList }) {
{ {
field: 'actions', field: 'actions',
headerName: '校對編號', headerName: '校對編號',
width: 250,
width: isMdOrLg ? 'auto' : 250,
flex: isMdOrLg ? 1.5 : undefined,
cellClassName: 'actions', cellClassName: 'actions',
renderCell: (params) => { renderCell: (params) => {
return <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>; return <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>;
@@ -73,7 +77,8 @@ export default function SearchPublicNoticeTable({ recordList }) {
id: 'appId', id: 'appId',
field: 'appId', field: 'appId',
headerName: isORGLoggedIn()?"憲報期數 / Care Of/ 我的備註":"憲報期數 / 我的備註", headerName: isORGLoggedIn()?"憲報期數 / Care Of/ 我的備註":"憲報期數 / 我的備註",
flex: 1,
width: isMdOrLg ? 'auto' : 160,
flex: isMdOrLg ? 1 : undefined,
renderCell: (params) => { renderCell: (params) => {
// let appNo = params.row.appNo; // let appNo = params.row.appNo;
// let code = params.row.groupNo; // let code = params.row.groupNo;
@@ -90,7 +95,8 @@ export default function SearchPublicNoticeTable({ recordList }) {
id: 'created', id: 'created',
field: 'created', field: 'created',
headerName: '校對日期', headerName: '校對日期',
width: 250,
width: isMdOrLg ? 'auto' : 250,
flex: isMdOrLg ? 1.5 : undefined,
valueGetter: (params) => { valueGetter: (params) => {
return DateUtils.datetimeStr(params?.value); return DateUtils.datetimeStr(params?.value);
} }
@@ -99,7 +105,8 @@ export default function SearchPublicNoticeTable({ recordList }) {
id: 'returnBeforeDate', id: 'returnBeforeDate',
field: 'returnBeforeDate', field: 'returnBeforeDate',
headerName: '此日期前回覆', headerName: '此日期前回覆',
width: 250,
width: isMdOrLg ? 'auto' : 250,
flex: isMdOrLg ? 1.5 : undefined,
valueGetter: (params) => { valueGetter: (params) => {
let returnBeforeDate = DateUtils.convertToDate(params?.value); let returnBeforeDate = DateUtils.convertToDate(params?.value);
returnBeforeDate = returnBeforeDate.setHours(14, 0, 0, 0); returnBeforeDate = returnBeforeDate.setHours(14, 0, 0, 0);
@@ -110,7 +117,8 @@ export default function SearchPublicNoticeTable({ recordList }) {
id: 'replyDate', id: 'replyDate',
field: 'replyDate', field: 'replyDate',
headerName: '回覆日期', headerName: '回覆日期',
width: 250,
width: isMdOrLg ? 'auto' : 250,
flex: isMdOrLg ? 1.5 : undefined,
valueGetter: (params) => { valueGetter: (params) => {
return params?.value ? DateUtils.datetimeStr(params?.value) : ""; return params?.value ? DateUtils.datetimeStr(params?.value) : "";
} }
@@ -118,7 +126,8 @@ export default function SearchPublicNoticeTable({ recordList }) {
{ {
id: 'actions', id: 'actions',
headerName: '狀態', headerName: '狀態',
flex: 1,
width: isMdOrLg ? 'auto' : 160,
flex: isMdOrLg ? 1 : undefined,
renderCell: (params) => { renderCell: (params) => {
return ProofStatus.getStatus_Cht(params); return ProofStatus.getStatus_Cht(params);
}, },
@@ -127,7 +136,8 @@ export default function SearchPublicNoticeTable({ recordList }) {
id: 'fee', id: 'fee',
field: 'fee', field: 'fee',
headerName: '費用', headerName: '費用',
width: 250,
width: isMdOrLg ? 'auto' : 250,
flex: isMdOrLg ? 1.5 : undefined,
valueGetter: (params) => { valueGetter: (params) => {
return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : ""; return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
} }
@@ -139,10 +149,9 @@ export default function SearchPublicNoticeTable({ recordList }) {
} }


return ( return (
<div style={{ height: '100%', width: '100%' }}>
<div style={{ width: '100%', overflowX: 'auto'}}>


<FiDataGrid <FiDataGrid
rowHeight={80}
sx={_sx} sx={_sx}
rows={rows} rows={rows}
columns={columns} columns={columns}


+ 56
- 52
src/pages/Proof/Search_Public/SearchForm.js View File

@@ -12,6 +12,8 @@ import * as React from "react";
import * as ComboData from "utils/ComboData"; import * as ComboData from "utils/ComboData";
import * as DateUtils from "utils/DateUtils"; import * as DateUtils from "utils/DateUtils";
import * as FormatUtils from "utils/FormatUtils"; import * as FormatUtils from "utils/FormatUtils";
import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
import {ThemeProvider} from "@emotion/react";
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //




@@ -105,7 +107,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData


{/*row 2*/} {/*row 2*/}
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Grid item xs={12} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField <TextField
fullWidth fullWidth
{...register("refNo")} {...register("refNo")}
@@ -118,7 +120,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
/> />
</Grid> </Grid>


<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Grid item xs={12} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField <TextField
fullWidth fullWidth
{...register("code")} {...register("code")}
@@ -131,7 +133,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
/> />
</Grid> </Grid>


<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Grid item xs={12} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Autocomplete <Autocomplete
{...register("issueId")} {...register("issueId")}
disablePortal disablePortal
@@ -177,40 +179,48 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
/> />
</Grid> */} </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="校對日期(從)"
defaultValue={searchCriteria.dateFrom}
InputProps={{ inputProps: { max: maxDate } }}
onChange={(newValue) => {
setMinDate(DateUtils.dateStr(newValue));
}}
InputLabelProps={{
shrink: true
}}
/>
</Grid>
<Grid item xs={12} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Grid container>
<Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}>
<TextField
fullWidth
{...register("dateFrom")}
id="dateFrom"
type="date"
label="校對日期(從)"
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="校對日期(到)"
defaultValue={searchCriteria.dateTo}
/>
<Grid item xs={1.5} s={1.5} md={1.5} lg={1} sx={{mt:1.3, display: 'flex', justifyContent:"center", alignItems: 'flex-start'}}>
到
</Grid>

<Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}>
<TextField
fullWidth
InputLabelProps={{
shrink: true
}}
{...register("dateTo")}
InputProps={{ inputProps: { min: minDate } }}
onChange={(newValue) => {
setMaxDate(DateUtils.dateStr(newValue));
}}
id="dateTo"
type="date"
//label="校對日期(到)"
defaultValue={searchCriteria.dateTo}
/>
</Grid>
</Grid>
</Grid> </Grid>


{/* <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}> {/* <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
@@ -227,10 +237,11 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData


</Grid> */} </Grid> */}


<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Grid item xs={12} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Autocomplete <Autocomplete
{...register("status")} {...register("status")}
disablePortal={false} disablePortal={false}
size="small"
id="status" id="status"
filterOptions={(options) => options} filterOptions={(options) => options}
options={ComboData.proofStatus} options={ComboData.proofStatus}
@@ -258,32 +269,25 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData


{/*last row*/} {/*last row*/}
<Grid container maxWidth justifyContent="flex-end"> <Grid container maxWidth justifyContent="flex-end">
<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Grid item sx={{ mr: 3, mb: 3 }}>
<Button <Button
size="large"
variant="contained" variant="contained"
onClick={resetForm} onClick={resetForm}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
<Typography variant="h5">重置</Typography>
>
重置
</Button> </Button>
</Grid> </Grid>


<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<Grid item sx={{ ml: 3, mr: 3, mb: 3 }}>
<Button <Button
size="large"
variant="contained" variant="contained"
type="submit" type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
<Typography variant="h5">提交</Typography>
>
提交
</Button> </Button>
</Grid> </Grid>
</ThemeProvider>
</Grid> </Grid>
</form> </form>
</MainCard> </MainCard>


+ 1
- 0
src/pages/Proof/Search_Public/index.js View File

@@ -100,6 +100,7 @@ const UserSearchPage_Individual = () => {
<MainCard elevation={0} <MainCard elevation={0}
border={false} border={false}
content={false} content={false}
sx={{width: "-webkit-fill-available"}}
> >
<EventTable <EventTable
recordList={record} recordList={record}


+ 2
- 1
src/themes/buttonConst.js View File

@@ -64,7 +64,8 @@ export const PNSPS_BUTTON_THEME = createTheme({
fontSize: '1.2rem', fontSize: '1.2rem',
fontWeight: '600', fontWeight: '600',
height: '45px', height: '45px',
width: '40vw', // Default width for xs screen sizes
width: '35' +
'vw', // Default width for xs screen sizes
'@media (min-width: 600px)': { // sm breakpoint '@media (min-width: 600px)': { // sm breakpoint
width: '20vw', width: '20vw',
}, },


Write Preview
Loading…
Cancel
Save