From 2f73ab1a9d105696f1db8fa20d56ff4ef2cca22f Mon Sep 17 00:00:00 2001 From: "cyril.tsui" Date: Wed, 1 Nov 2023 17:58:06 +0800 Subject: [PATCH 1/2] Update UI --- src/components/FiDataGrid.js | 11 +- src/components/MainCard.js | 90 +-- .../Create_FromApp/ApplicationDetails.js | 39 +- .../Proof/Create_FromApp/GazetteDetails.js | 49 +- src/pages/Proof/Create_FromApp/ProofForm.js | 37 +- src/pages/Proof/Create_FromApp/index.js | 45 +- .../Proof/Reply_GLD/ApplicationDetails.js | 39 +- src/pages/Proof/Reply_GLD/ProofForm.js | 10 +- src/pages/Proof/Reply_GLD/index.js | 26 +- src/pages/Proof/Search_GLD/DataGrid.js | 63 ++- src/pages/Proof/Search_GLD/SearchForm.js | 444 +++++++-------- src/pages/Proof/Search_GLD/index.js | 46 +- .../Details_GLD/ApplicationDetailCard.js | 49 +- .../Details_GLD/ClientDetailCard.js | 516 +++++++++--------- .../Details_GLD/GazetteDetailCard.js | 18 +- .../Details_GLD/StatusChangeDialog.js | 41 +- src/pages/PublicNotice/Details_GLD/index.js | 20 +- .../PublicNotice/Details_Public/index.js | 111 ++-- src/pages/PublicNotice/Search_GLD/DataGrid.js | 51 +- .../PublicNotice/Search_GLD/SearchForm.js | 429 ++++++++------- src/pages/PublicNotice/Search_GLD/index.js | 46 +- .../auth-forms/CustomFormWizard.js | 2 +- src/themes/overrides/Chip.js | 1 + src/themes/overrides/DataGrid.js | 37 ++ src/themes/overrides/OutlinedInput.js | 3 + src/themes/overrides/Tab.js | 4 +- src/themes/overrides/Textfield.js | 27 + src/themes/overrides/index.js | 4 + src/themes/typography.js | 8 +- src/utils/statusUtils/Base.js | 3 +- 30 files changed, 1197 insertions(+), 1072 deletions(-) create mode 100644 src/themes/overrides/DataGrid.js create mode 100644 src/themes/overrides/Textfield.js diff --git a/src/components/FiDataGrid.js b/src/components/FiDataGrid.js index 1d82b7b..cbfe52e 100644 --- a/src/components/FiDataGrid.js +++ b/src/components/FiDataGrid.js @@ -20,18 +20,18 @@ export function FiDataGrid({ rows, columns, sx, autoHeight, const [myHideFooterSelectedRowCount, setMyHideFooterSelectedRowCount] = React.useState(true); const [_sx, set_sx] = React.useState({ padding: "4 2 4 2", - boxShadow: 1, - border: 1, - borderColor: '#DDD', + // boxShadow: 1, + // border: 1, + // borderColor: '#DDD', '& .MuiDataGrid-cell': { borderTop: 1, borderBottom: 1, - borderColor: "#EEE" + borderColor: "#EEE", }, '& .MuiDataGrid-footerContainer': { border: 1, borderColor: "#EEE" - } + }, }); @@ -122,7 +122,6 @@ export function FiDataGrid({ rows, columns, sx, autoHeight, autoHeight={_autoHeight} hideFooterSelectedRowCount={myHideFooterSelectedRowCount} sx={_sx} - /> ); } diff --git a/src/components/MainCard.js b/src/components/MainCard.js index 7880c12..790f131 100644 --- a/src/components/MainCard.js +++ b/src/components/MainCard.js @@ -3,7 +3,7 @@ import { forwardRef } from 'react'; // material-ui import { useTheme } from '@mui/material/styles'; -import { Card, CardContent, CardHeader, Divider, Typography } from '@mui/material'; +import { Card, CardContent, CardHeader, Divider, Typography, Grid } from '@mui/material'; // project import import Highlighter from './third-party/Highlighter'; @@ -39,47 +39,59 @@ const MainCard = forwardRef( boxShadow = theme.palette.mode === 'dark' ? boxShadow || true : boxShadow; return ( - - {/* card header and action */} - {!darkTitle && title && ( - - )} - {darkTitle && title && {title}} action={secondary} />} + *': { + // flexGrow: 1, + // flexBasis: '50%' + // }, + ...sx + }} + > + {/* card header and action */} + {!darkTitle && title && ( + + )} + {darkTitle && title && {title}} action={secondary} />} - {/* card content */} - {content && {children}} - {!content && children} + {/* card content */} + {content && {children}} + {!content && children} - {/* card footer - clipboard & highlighter */} - {codeHighlight && ( - <> - - - {children} - - - )} - + {/* card footer - clipboard & highlighter */} + {codeHighlight && ( + <> + + + {children} + + + )} + ); } ); diff --git a/src/pages/Proof/Create_FromApp/ApplicationDetails.js b/src/pages/Proof/Create_FromApp/ApplicationDetails.js index cbedec8..7242b09 100644 --- a/src/pages/Proof/Create_FromApp/ApplicationDetails.js +++ b/src/pages/Proof/Create_FromApp/ApplicationDetails.js @@ -59,7 +59,7 @@ const SearchPublicNoticeForm = ({ formData }) => { {/*row 1*/} - + Application Details @@ -72,12 +72,13 @@ const SearchPublicNoticeForm = ({ formData }) => { alignItems="center"> - - Application No: + + Application No: - + @@ -90,34 +91,34 @@ const SearchPublicNoticeForm = ({ formData }) => { alignItems="center"> - - Applicant: + Applicant: - + - + - Contact Phone: + Contact Phone: @@ -128,34 +129,34 @@ const SearchPublicNoticeForm = ({ formData }) => { alignItems="center"> - - Contect Person: + Contact Person: - + - + - Contact Fax: + Contact Fax: diff --git a/src/pages/Proof/Create_FromApp/GazetteDetails.js b/src/pages/Proof/Create_FromApp/GazetteDetails.js index dafbbf7..9bc0319 100644 --- a/src/pages/Proof/Create_FromApp/GazetteDetails.js +++ b/src/pages/Proof/Create_FromApp/GazetteDetails.js @@ -26,7 +26,6 @@ const GazetteDetails = ({ formData }) => { initialValues: data, }); - const DisplayField = ({ name, width }) => { return { + style={{ height: '100%' }} + > -
+ {/*row 1*/} - + Gazette Details {/*row 2*/} - + - + - - Issue Number: + Issue Number: - + - + - - Gazette Code: + Issue Date: - + @@ -105,29 +103,28 @@ const GazetteDetails = ({ formData }) => { - + - - Issue Date: + Gazette Code: - + - + - - Group Title: + Group Title: - + diff --git a/src/pages/Proof/Create_FromApp/ProofForm.js b/src/pages/Proof/Create_FromApp/ProofForm.js index fe51f41..d503d12 100644 --- a/src/pages/Proof/Create_FromApp/ProofForm.js +++ b/src/pages/Proof/Create_FromApp/ProofForm.js @@ -150,9 +150,6 @@ const FormPanel = ({ formData }) => { } } - - - return ( { {/*row 1*/} - + Proof @@ -188,7 +185,9 @@ const FormPanel = ({ formData }) => { variant="contained" size="large" disabled={attachments.length >= (formik.values.groupType == "A" ? 2 : 1)} - > Upload Files + > + Upload Files + @@ -199,8 +198,8 @@ const FormPanel = ({ formData }) => { { wait ? - - Calculating, please wait ... + + Calculating, please wait ... : @@ -212,7 +211,7 @@ const FormPanel = ({ formData }) => { textTransform: 'capitalize', alignItems: 'end' }}> - Calculate + Calculate } @@ -246,13 +245,13 @@ const FormPanel = ({ formData }) => { } /> - pages + pages - x + x - ${formik.values.price ? formik.values.price : "6,552"} + ${formik.values.price ? formik.values.price : "6,552"} @@ -282,11 +281,11 @@ const FormPanel = ({ formData }) => { } /> - cm + cm - x + x { - Necessary fee: + Necessary fee: - $ + $ { textTransform: 'capitalize', alignItems: 'end' }}> - Save + Save @@ -373,12 +372,12 @@ const FormPanel = ({ formData }) => {
setIsWarningPopUp(false)} > - Warning + Warning - {warningText} + {warningText} - +
diff --git a/src/pages/Proof/Create_FromApp/index.js b/src/pages/Proof/Create_FromApp/index.js index c04f89f..4e83ccd 100644 --- a/src/pages/Proof/Create_FromApp/index.js +++ b/src/pages/Proof/Create_FromApp/index.js @@ -20,7 +20,7 @@ const BackgroundHead = { backgroundImage: `url(${titleBackgroundImg})`, width: '100%', height: '100%', - backgroundSize:'contain', + backgroundSize: 'contain', backgroundRepeat: 'no-repeat', backgroundColor: '#0C489E', backgroundPosition: 'right' @@ -69,23 +69,28 @@ const Index = () => { : - + + +
+ + Create Proof + +
+ - -
- - Create Proof - -
- + content={false} + sx={{ + backgroundColor: "backgroundColor.default" + }} + > + {/*row 1*/} - + { /> - - + + { {/*row 2*/} - + - - - + + -
+
diff --git a/src/pages/Proof/Reply_GLD/ApplicationDetails.js b/src/pages/Proof/Reply_GLD/ApplicationDetails.js index 6e1c1c2..5f8806c 100644 --- a/src/pages/Proof/Reply_GLD/ApplicationDetails.js +++ b/src/pages/Proof/Reply_GLD/ApplicationDetails.js @@ -16,7 +16,10 @@ const MainCard = Loadable(React.lazy(() => import('components/MainCard'))); import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils"; import FileList from "components/FileList" // ==============================|| DASHBOARD - DEFAULT ||============================== // -const ApplicationDetailCard = ({ formData, setBackButtonPos }) => { +const ApplicationDetailCard = ({ + formData, + // setBackButtonPos +}) => { const params = useParams(); @@ -64,9 +67,9 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => { }); } - React.useEffect(()=>{ - if (document.getElementById("applicationDetailsMainCard")) setBackButtonPos(`${document.getElementById("applicationDetailsMainCard")?.getBoundingClientRect().left / 2}px`) - },[document.getElementById("applicationDetailsMainCard")]) + // React.useEffect(()=>{ + // if (document.getElementById("applicationDetailsMainCard")) setBackButtonPos(`${document.getElementById("applicationDetailsMainCard")?.getBoundingClientRect().left / 3}px`) + // },[document.getElementById("applicationDetailsMainCard")]) return ( { border={false} content={false} > - + Public Notice: Proofreading Reply
@@ -86,7 +89,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => { - App No.: + App No.: @@ -98,7 +101,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => { - Status: + Status: @@ -115,7 +118,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => { - Applicant: + Applicant: @@ -133,7 +136,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => { - Issue No: + Issue No: @@ -148,7 +151,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => { - Contact Person: + Contact Person: @@ -161,7 +164,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => { - Issue Date: + Issue Date: @@ -194,7 +197,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => { - Print file： + Print file： { - Deadline for payment and reply： + Deadline for payment and reply： - {DateUtils.dateStr(data.returnBeforeDate)} Before 2:00 PM + {DateUtils.dateStr(data.returnBeforeDate)} Before 2:00 PM - Fee: + Fee: - {currencyFormat(data.fee)} + {currencyFormat(data.fee)} { formik.values.groupType == "A" ? - ( {data.noOfPages} page x $6,552 ) + ( {data.noOfPages} page x $6,552 ) : - ( {data.length} cm x {data.colCount == 2 ? "$364 Double Column" : "$182 Single Column"} ) + ( {data.length} cm x {data.colCount == 2 ? "$364 Double Column" : "$182 Single Column"} ) } diff --git a/src/pages/Proof/Reply_GLD/ProofForm.js b/src/pages/Proof/Reply_GLD/ProofForm.js index 0164783..a051e00 100644 --- a/src/pages/Proof/Reply_GLD/ProofForm.js +++ b/src/pages/Proof/Reply_GLD/ProofForm.js @@ -48,7 +48,7 @@ const FormPanel = ({ formData }) => { border={false} content={false}> - + Public Notice: Proofreading Reply @@ -58,10 +58,10 @@ const FormPanel = ({ formData }) => { formik.values.replyDate ? - Reply Date: {DateUtils.datetimeStr(formik.values.replyDate)} + Reply Date: {DateUtils.datetimeStr(formik.values.replyDate)} - Reply: {formik.values.action ? (Ready for printing (correct manuscript).) : (Not ready for printing (requires modification).)} + Reply: {formik.values.action ? (Ready for printing (correct manuscript).) : (Not ready for printing (requires modification).)} { formik.values.action ? @@ -87,13 +87,13 @@ const FormPanel = ({ formData }) => { isOverTime() ? - The response timed out, please apply again. + The response timed out, please apply again. : - Wait for reply. + Wait for reply. ) diff --git a/src/pages/Proof/Reply_GLD/index.js b/src/pages/Proof/Reply_GLD/index.js index 5106a94..7e64451 100644 --- a/src/pages/Proof/Reply_GLD/index.js +++ b/src/pages/Proof/Reply_GLD/index.js @@ -92,12 +92,12 @@ const Index = () => { // } // }) - const [backButtonPos, setBackButtonPos] = React.useState() - const backButtonRef = React.useRef() - React.useLayoutEffect(()=>{ + // const [backButtonPos, setBackButtonPos] = React.useState() + // const backButtonRef = React.useRef() + // React.useLayoutEffect(()=>{ // console.log(applicationDetailsRef.current?.getBoundingClientRect()) - if (backButtonRef.current) backButtonRef.current.style.marginLeft = `${backButtonPos}` - },[backButtonPos]) + // if (backButtonRef.current) backButtonRef.current.style.marginLeft = `${backButtonPos}` + // },[backButtonPos]) // React.useEffect(()=>{ // if (backButtonRef.current) backButtonRef.current.style.marginLeft = `${backButtonLeftPos}` @@ -108,7 +108,7 @@ const Index = () => { : ( - +
@@ -117,19 +117,19 @@ const Index = () => {
- {/*row 1*/} - +
- - + + { /> - - + + diff --git a/src/pages/Proof/Search_GLD/DataGrid.js b/src/pages/Proof/Search_GLD/DataGrid.js index 7c4949d..c60cc54 100644 --- a/src/pages/Proof/Search_GLD/DataGrid.js +++ b/src/pages/Proof/Search_GLD/DataGrid.js @@ -1,11 +1,12 @@ // material-ui import * as React from 'react'; import { - Button + Button, + Box } from '@mui/material'; import * as DateUtils from "utils/DateUtils"; -import {useNavigate} from "react-router-dom"; -import {FiDataGrid} from "components/FiDataGrid"; +import { useNavigate } from "react-router-dom"; +import { FiDataGrid } from "components/FiDataGrid"; // ==============================|| EVENT TABLE ||============================== // export default function SearchPublicNoticeTable({ recordList }) { @@ -17,7 +18,7 @@ export default function SearchPublicNoticeTable({ recordList }) { }, [recordList]); const handleEditClick = (params) => () => { - navigate('/proof/reply/'+ params.row.id); + navigate('/proof/reply/' + params.row.id); }; @@ -35,16 +36,16 @@ export default function SearchPublicNoticeTable({ recordList }) { id: 'appId', field: 'appId', headerName: 'Application No./ Gazette Code/ Gazette Issue', - flex: 1, + flex: 1.5, 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)"); + + " Vol. " + zeroPad(params.row.issueVolume, 3) + + ", No. " + zeroPad(params.row.issueNo, 2) + + ", " + DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)"); - return
App No: {appNo}
Gazette Code: {code}
Issue: {isssue}
+ return
App No: {appNo}
Gazette Code: {code}
Issue: {isssue}
}, }, { @@ -62,7 +63,7 @@ export default function SearchPublicNoticeTable({ recordList }) { headerName: 'Confirmed/Return Date', flex: 1, valueGetter: (params) => { - return params?.value?DateUtils.datetimeStr(params?.value):""; + return params?.value ? DateUtils.datetimeStr(params?.value) : ""; } }, { @@ -71,7 +72,7 @@ export default function SearchPublicNoticeTable({ recordList }) { headerName: 'Contact Person', flex: 1, renderCell: (params) => { - let company = params.row.enCompanyName!= null ?" ("+(params.row.enCompanyName)+")":""; + let company = params.row.enCompanyName != null ? " (" + (params.row.enCompanyName) + ")" : ""; let phone = JSON.parse(params.row.contactTelNo); let faxNo = JSON.parse(params.row.contactFaxNo); @@ -99,7 +100,7 @@ export default function SearchPublicNoticeTable({ recordList }) { headerName: 'Gazette Group', flex: 1, valueGetter: (params) => { - return (params?.value)?(params?.value):""; + return (params?.value) ? (params?.value) : ""; } }, { @@ -108,42 +109,44 @@ export default function SearchPublicNoticeTable({ recordList }) { headerName: 'Fee', flex: 1, valueGetter: (params) => { - return (params?.value)?"$ "+currencyFormat(params?.value):""; + return (params?.value) ? "$ " + currencyFormat(params?.value) : ""; } }, ]; function currencyFormat(num) { return num.toLocaleString('en-US', { - minimumFractionDigits: 2 - }); + minimumFractionDigits: 2 + }); } function zeroPad(num, places) { - num=num?num:0; + num = num ? num : 0; var zero = places - num.toString().length + 1; return Array(+(zero > 0 && zero)).join("0") + num; } - + function handleRowDoubleClick(params) { navigate('/proof/reply/' + params.row.id); } return ( -
- - +
+ + 'auto'} + /> +
); } diff --git a/src/pages/Proof/Search_GLD/SearchForm.js b/src/pages/Proof/Search_GLD/SearchForm.js index 1aab6af..3313fa4 100644 --- a/src/pages/Proof/Search_GLD/SearchForm.js +++ b/src/pages/Proof/Search_GLD/SearchForm.js @@ -10,11 +10,12 @@ import { useForm } from "react-hook-form"; import * as React from "react"; import * as ComboData from "utils/ComboData"; import * as DateUtils from "utils/DateUtils"; +import { Typography } from '../../../../node_modules/@mui/material/index'; // ==============================|| DASHBOARD - DEFAULT ||============================== // -const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issueComboData - }) => { +const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, issueComboData +}) => { const [type, setType] = React.useState([]); const [status, setStatus] = React.useState(ComboData.proofStatus[0]); @@ -47,7 +48,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu contact: data.contact, replyed: (status?.type && status?.type != 'all') ? status?.type : "", orgId: (orgSelected?.key && orgSelected?.key > 0) ? orgSelected?.key : "", - + }; applySearch(temp); }; @@ -73,16 +74,16 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu 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 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; + num = num ? num : 0; var zero = places - num.toString().length + 1; return Array(+(zero > 0 && zero)).join("0") + num; } @@ -90,222 +91,227 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu return ( + content={false} + sx={{ backgroundColor: 'backgroundColor.default' }} + > - {/*row 1*/} - - - Search Form - - - - {/*row 2*/} - - - - + + + {/*row 1*/} + + + Search Form + + + + {/*row 2*/} + + + + + + + + + + + getIssueLabel(option)} + onChange={(event, newValue) => { + setIssueSelected(newValue); + }} + renderInput={(params) => ( + + )} + /> + + + + option.label} + onChange={(event, newValue) => { + setGroupSelected(newValue); + }} + renderInput={(params) => ( + + )} + /> + + + + { + setMinDate(DateUtils.dateStr(newValue)); + }} + InputLabelProps={{ + shrink: true + }} + /> + + + + { + setMaxDate(DateUtils.dateStr(newValue)); + }} + id="dateTo" + type="date" + label="Proof Date(To)" + defaultValue={searchCriteria.dateTo} + /> + + + + + + + + + options} + options={ComboData.proofStatus} + value={status} + inputValue={status?.label ? status?.label : ""} + onChange={(event, newValue) => { + if (newValue !== null) { + setStatus(newValue); + } + }} + renderInput={(params) => ( + + )} + InputLabelProps={{ + shrink: true + }} + /> + + + { + orgCombo ? + + { + setOrgSelected(newValue); + }} + renderInput={(params) => ( + + )} + /> + + : <> + } - - - - - - getIssueLabel(option)} - onChange={(event, newValue) => { - setIssueSelected(newValue); - }} - renderInput={(params) => ( - - )} - /> - - - option.label} - onChange={(event, newValue) => { - setGroupSelected(newValue); - }} - renderInput={(params) => ( - - )} - /> - - { - setMinDate(DateUtils.dateStr(newValue)); - }} - InputLabelProps={{ - shrink: true - }} - /> - - - - { - setMaxDate(DateUtils.dateStr(newValue)); - }} - id="dateTo" - type="date" - label="Proof Date(To)" - defaultValue={searchCriteria.dateTo} - /> - - - - - - - - - options} - options={ComboData.proofStatus} - value={status} - inputValue={status?.label?status?.label:""} - onChange={(event, newValue) => { - if (newValue !== null) { - setStatus(newValue); - } - }} - renderInput={(params) => ( - - )} - InputLabelProps={{ - shrink: true - }} - /> - - - { - orgCombo ? - - { - setOrgSelected(newValue); - }} - renderInput={(params) => ( - - )} - /> - - : <> - } - - - - - - {/*last row*/} - - - - - - - + {/*last row*/} + + + + + + + + + diff --git a/src/pages/Proof/Search_GLD/index.js b/src/pages/Proof/Search_GLD/index.js index dde3b21..f82694c 100644 --- a/src/pages/Proof/Search_GLD/index.js +++ b/src/pages/Proof/Search_GLD/index.js @@ -20,7 +20,7 @@ const BackgroundHead = { backgroundImage: `url(${titleBackgroundImg})`, width: '100%', height: '100%', - backgroundSize:'contain', + backgroundSize: 'contain', backgroundRepeat: 'no-repeat', backgroundColor: '#0C489E', backgroundPosition: 'right' @@ -30,12 +30,12 @@ const BackgroundHead = { const UserSearchPage_Individual = () => { - const [record,setRecord] = React.useState([]); - const [orgCombo,setOrgCombo] = React.useState([]); - const [issueCombo,setIssueCombo] = React.useState([]); + 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)), + dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate() - 14)), }); const [onReady, setOnReady] = React.useState(false); @@ -53,36 +53,36 @@ const UserSearchPage_Individual = () => { getUserList(); }, [searchCriteria]); - function getUserList(){ + function getUserList() { HttpUtils.get({ url: UrlUtils.LIST_PROOF, params: searchCriteria, - onSuccess: function(responseData){ + onSuccess: function (responseData) { setRecord(responseData); } }); } - function getOrgCombo(){ + function getOrgCombo() { HttpUtils.get({ url: UrlUtils.GET_ORG_COMBO, - onSuccess: function(responseData){ + onSuccess: function (responseData) { let combo = responseData; setOrgCombo(combo); } }); } - function getIssueCombo(){ + function getIssueCombo() { HttpUtils.get({ url: UrlUtils.GET_ISSUE_COMBO, - onSuccess: function(responseData){ + onSuccess: function (responseData) { let combo = responseData; setIssueCombo(combo); } }); } - + function applySearch(input) { setSearchCriteria(input); @@ -90,9 +90,10 @@ const UserSearchPage_Individual = () => { return ( !onReady ? - + : - +
@@ -102,18 +103,19 @@ const UserSearchPage_Individual = () => { {/*row 1*/} - {/*row 2*/} - + + - Create Proof + Create Proof : null } @@ -166,7 +166,7 @@ const ApplicationDetailCard = ( color="orange" > - Re-submit + Re-submit : currentApplicationDetailData.status == "paid" ? @@ -193,7 +193,7 @@ const ApplicationDetailCard = ( backgroundColor: '#52b202' }}> - Complete + Complete : null } @@ -213,7 +213,7 @@ const ApplicationDetailCard = ( : null } - + Application Details
@@ -225,7 +225,7 @@ const ApplicationDetailCard = ( - Application No: + Application No: @@ -253,7 +253,7 @@ const ApplicationDetailCard = ( - Status: + Status: @@ -270,7 +270,7 @@ const ApplicationDetailCard = ( - Applicant: + Applicant: @@ -315,7 +315,7 @@ const ApplicationDetailCard = ( - Contact Phone: + Contact Phone: @@ -370,7 +370,7 @@ const ApplicationDetailCard = ( - Contect Person: + Contect Person: @@ -398,7 +398,7 @@ const ApplicationDetailCard = ( - Contact Fax: + Contact Fax: @@ -457,7 +457,7 @@ const ApplicationDetailCard = ( - Manuscript File: + Manuscript File: @@ -466,6 +466,7 @@ const ApplicationDetailCard = ( {fileDetail.filename} @@ -494,16 +495,16 @@ const ApplicationDetailCard = (
- setIsWarningPopUp(false)} > - Warning - - {warningText} - - - - - -
+ setIsWarningPopUp(false)} > + Warning + + {warningText} + + + + + +
); }; diff --git a/src/pages/PublicNotice/Details_GLD/ClientDetailCard.js b/src/pages/PublicNotice/Details_GLD/ClientDetailCard.js index 47b3feb..5145ed7 100644 --- a/src/pages/PublicNotice/Details_GLD/ClientDetailCard.js +++ b/src/pages/PublicNotice/Details_GLD/ClientDetailCard.js @@ -1,8 +1,8 @@ // material-ui import { - FormControl, + FormControl, Button, - Grid, + Grid, // InputAdornment, Typography, FormLabel, OutlinedInput, @@ -10,11 +10,11 @@ import { } from '@mui/material'; import MainCard from "../../../components/MainCard"; import * as React from "react"; -import {useForm} from "react-hook-form"; +import { useForm } from "react-hook-form"; import { useEffect, useState - } from "react"; +} from "react"; // import Checkbox from "@mui/material/Checkbox"; import Loadable from 'components/Loadable'; import { lazy } from 'react'; @@ -27,17 +27,17 @@ import HighlightOff from '@mui/icons-material/HighlightOff'; // ==============================|| DASHBOARD - DEFAULT ||============================== // const ClientDetailCard = ( - { applicationDetailData, + { applicationDetailData, // isCollectData, // updateUserObject, // isNewRecord } - ) => { +) => { // const params = useParams(); const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({}); - const [onReady,setOnReady] = useState(false); - const [companyName, setCompanyName] = useState({enCompanyName:"",chCompanyName:""}); - const {register, + const [onReady, setOnReady] = useState(false); + const [companyName, setCompanyName] = useState({ enCompanyName: "", chCompanyName: "" }); + const { register, // getValues } = useForm() // const navigate = useNavigate() @@ -46,12 +46,12 @@ const ClientDetailCard = ( //if user data from parent are not null if (Object.keys(applicationDetailData).length > 0 && applicationDetailData !== undefined) { setCurrentApplicationDetailData(applicationDetailData.userData); - if (!applicationDetailData.companyName1==null){ + if (!applicationDetailData.companyName1 == null) { setCompanyName(applicationDetailData.companyName); - }else{ - const companyNameData ={ - enCompanyName:applicationDetailData.userData.enCompanyName, - chCompanyName:applicationDetailData.userData.chCompanyName + } else { + const companyNameData = { + enCompanyName: applicationDetailData.userData.enCompanyName, + chCompanyName: applicationDetailData.userData.chCompanyName } setCompanyName(companyNameData) } @@ -68,12 +68,12 @@ const ClientDetailCard = ( const handleViewClick = () => () => { console.log(currentApplicationDetailData) - currentApplicationDetailData.type == "ORG"? - window.open('/orgUser/'+ currentApplicationDetailData.id, "_blank", "noreferrer"): - window.open('/indUser/'+ currentApplicationDetailData.id, "_blank", "noreferrer"); + currentApplicationDetailData.type == "ORG" ? + window.open('/orgUser/' + currentApplicationDetailData.id, "_blank", "noreferrer") : + window.open('/indUser/' + currentApplicationDetailData.id, "_blank", "noreferrer"); window.addEventListener("focus", onFocus) }; - + const onFocus = () => { window.removeEventListener("focus", onFocus) location.reload(); @@ -91,15 +91,15 @@ const ClientDetailCard = ( return ( !onReady ? - + : + border={false} + content={false} + sx={{ xs: "12", md: "7" }}> - - - View + + View - - Client Details + + Client Details
+ alignItems="flex-start"> - {currentApplicationDetailData.verifiedBy!==null? - - - Verified - - - : - - - Not Verified - - - - } + {currentApplicationDetailData.verifiedBy !== null ? + + + Verified + + + : + + + Not Verified + + + + } + alignItems="flex-start"> - Client Type: + Client Type: - - + + - {currentApplicationDetailData.type==="ORG"? - <> - - - Company Name (English): - - - - - - - - - - Company Name (Chinese): - - - - - - - - - - English Name: - - - - - - - - - - Contact Phone: - - - - + {currentApplicationDetailData.type === "ORG" ? + <> + + + Company Name (English): + + + - + + + + + Company Name (Chinese): + + + - - - - - - Email: - - - - - + - - : - <> - - - English Name: - - - - - - - - - - Chinese Name: + + + English Name: + + + + + + - - - - + + + Contact Phone: + + + + + + + + + + + - - - - Contact Phone: + + + Email: + + + + + + - - - + : + <> + + + English Name: + + + - + + + + + Chinese Name: + + + - + - - - - Email: + + + Contact Phone: + + + + + + + + + + + - - - - + + + Email: + + + + + + - - + } - +
); diff --git a/src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js b/src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js index 8ce5f4c..5ad79d0 100644 --- a/src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js +++ b/src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js @@ -124,7 +124,7 @@ const GazetteDetailCard = ( alignItems: 'end' }}> - Gen Gazette Code + Gen Gazette Code @@ -142,7 +142,7 @@ const GazetteDetailCard = ( - Issue Number: + Issue Number: @@ -171,7 +171,7 @@ const GazetteDetailCard = ( - Gazette Code: + Gazette Code: @@ -203,7 +203,7 @@ const GazetteDetailCard = ( - Issue Date: + Issue Date: @@ -232,7 +232,7 @@ const GazetteDetailCard = ( - Group Title: + Group Title: @@ -263,13 +263,13 @@ const GazetteDetailCard = (
setIsWarningPopUp(false)} > - Warning + Warning - {warningText} + {warningText} - - + +
diff --git a/src/pages/PublicNotice/Details_GLD/StatusChangeDialog.js b/src/pages/PublicNotice/Details_GLD/StatusChangeDialog.js index ba3ae42..2c96ae6 100644 --- a/src/pages/PublicNotice/Details_GLD/StatusChangeDialog.js +++ b/src/pages/PublicNotice/Details_GLD/StatusChangeDialog.js @@ -45,25 +45,25 @@ const StatusChangeDialog = (props) => { } else { setDialogTitle("Action Confirm"); setPrositiveBtnText("Confirm"); - let str = "Are you sure you want to "+props.getStatus+" this application?" + let str = "Are you sure you want to " + props.getStatus + " this application?" return getConfirmContent(str); } }, [props.getStatus]); const acceptedHandle = () => () => { const getStatus = props.getStatus.status; - if(getStatus == "notAccepted"){ - if(!remarks || remarks=="" ) + if (getStatus == "notAccepted") { + if (!remarks || remarks == "") setHelperText("Please enter reason"); } - if(!helperText){ - props.setReason({"reason": remarks}); - if (remarks!=null&&remarks!=""){ + if (!helperText) { + props.setReason({ "reason": remarks }); + if (remarks != null && remarks != "") { console.log(remarks) // props.setStatusWindowAccepted(true); } } - if(getStatus != "notAccepted"){ + if (getStatus != "notAccepted") { props.setStatusWindowAccepted(true); } }; @@ -80,9 +80,9 @@ const StatusChangeDialog = (props) => { const getConfirmContent = (text) => { setContent( - - {text} - + + {text} + ); } @@ -98,12 +98,12 @@ const StatusChangeDialog = (props) => { inputProps={{ maxLength: 255 }} placeholder="Please enter reason" helperText={helperText} - onChange={(newValues)=>{ + onChange={(newValues) => { setRemarks(newValues.target.value); setHelperText(""); }} > - + ); @@ -115,11 +115,11 @@ const StatusChangeDialog = (props) => { - Target Issue: + Target Issue: - {props.gazetteIssue + ", "}{props.issueNum + ", "}{props.issueDate} + {props.gazetteIssue + ", "}{props.issueNum + ", "}{props.issueDate} @@ -128,7 +128,7 @@ const StatusChangeDialog = (props) => { - Gazette Group: + Gazette Group: { setComboInputValue(newValue); props.setSelectedGazetteGroup(newValue); formik.setFieldValue("", "") - } else {gazetteGroup + } else { + gazetteGroup props.setSelectedGazetteGroupInputType(""); } }} @@ -188,12 +189,16 @@ const StatusChangeDialog = (props) => { diff --git a/src/pages/PublicNotice/Details_GLD/index.js b/src/pages/PublicNotice/Details_GLD/index.js index 64211ab..237a8ed 100644 --- a/src/pages/PublicNotice/Details_GLD/index.js +++ b/src/pages/PublicNotice/Details_GLD/index.js @@ -299,7 +299,7 @@ const PublicNoticeDetail_GLD = () => { }, [getUploadStatus]); return ( - + { - + - - + + {isLoading && editMode ? : { } - - + + { /> - - + + { - + - + import('./StatusChangeDialog'))); +import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; // ==============================|| Body - DEFAULT ||============================== // @@ -46,7 +48,7 @@ const DashboardDefault = () => { backgroundImage: `url(${titleBackgroundImg})`, width: '100%', height: '100%', - backgroundSize:'contain', + backgroundSize: 'contain', backgroundRepeat: 'no-repeat', backgroundColor: '#0C489E', backgroundPosition: 'right' @@ -58,23 +60,23 @@ const DashboardDefault = () => { }, []); const loadApplicationDetail = () => { - if(params.id > 0 ){ + if (params.id > 0) { axios.get(`${GET_PUBLIC_NOTICE_APPLY_DETAIL}/${params.id}`) - .then((response) => { - if (response.status === 200) { - setApplicationDetailData(response.data); - setAapNo(response.data.data.appNo); - } - }) - .catch(error => { - console.log(error); - return false; - }); + .then((response) => { + if (response.status === 200) { + setApplicationDetailData(response.data); + setAapNo(response.data.data.appNo); + } + }) + .catch(error => { + console.log(error); + return false; + }); } } useEffect(() => { - if(applicationDetailData.data === null){ + if (applicationDetailData.data === null) { navigate('/publicNotice'); } }, [applicationDetailData]); @@ -86,8 +88,8 @@ const DashboardDefault = () => { }; useEffect(() => { - if(statusWindowAccepted){ - if(getStatus == "cancel"){ + if (statusWindowAccepted) { + if (getStatus == "cancel") { onCancelledClick() } } @@ -95,31 +97,31 @@ const DashboardDefault = () => { useEffect(() => { // console.log(getStatus) - if(getStatus!==""){ + if (getStatus !== "") { setOpen(true) } }, [getStatus]); const onCancelledClick = () => { - if(params.id > 0 ){ - axios.get(`${SET_PUBLIC_NOTICE_STATUS_CANCELLED}/${params.id}`) - .then((response) => { - if (response.status === 204) { - setOpen(false); - handleClose(); - loadApplicationDetail() - } - }) - .catch(error => { - console.log(error); - return false; - }); + if (params.id > 0) { + axios.get(`${SET_PUBLIC_NOTICE_STATUS_CANCELLED}/${params.id}`) + .then((response) => { + if (response.status === 204) { + setOpen(false); + handleClose(); + loadApplicationDetail() + } + }) + .catch(error => { + console.log(error); + return false; + }); } }; return ( - - + +
@@ -128,33 +130,40 @@ const DashboardDefault = () => {
- - 我的公共啟事 / {appNo} - + + 我的公共啟事 / {appNo} + + + + + {/* */} - {/* */} - - - - - - {/* + {/* */} + + + + + + {/* */} - {/* */} + {/* */} {/* */} - + ); diff --git a/src/pages/PublicNotice/Search_GLD/DataGrid.js b/src/pages/PublicNotice/Search_GLD/DataGrid.js index f6ad551..994f257 100644 --- a/src/pages/PublicNotice/Search_GLD/DataGrid.js +++ b/src/pages/PublicNotice/Search_GLD/DataGrid.js @@ -1,12 +1,13 @@ // material-ui import * as React from 'react'; import { - Button + Button, + Box } from '@mui/material'; import * as DateUtils from "utils/DateUtils"; import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils"; -import {useNavigate} from "react-router-dom"; -import {FiDataGrid} from "components/FiDataGrid"; +import { useNavigate } from "react-router-dom"; +import { FiDataGrid } from "components/FiDataGrid"; // ==============================|| EVENT TABLE ||============================== // export default function SearchPublicNoticeTable({ recordList }) { @@ -18,7 +19,7 @@ export default function SearchPublicNoticeTable({ recordList }) { }, [recordList]); const handleEditClick = (params) => () => { - navigate('/application/'+ params.id); + navigate('/application/' + params.id); }; @@ -36,7 +37,7 @@ export default function SearchPublicNoticeTable({ recordList }) { id: 'status', field: 'status', headerName: 'Status', - width: 150, + width: 175, renderCell: (params) => { return [StatusUtils.getStatusEng(params)] }, @@ -56,7 +57,7 @@ export default function SearchPublicNoticeTable({ recordList }) { headerName: 'Contact Person', flex: 2, renderCell: (params) => { - let company = params.row.enCompanyName!= null ?" ("+(params.row.enCompanyName)+")":""; + let company = params.row.enCompanyName != null ? " (" + (params.row.enCompanyName) + ")" : ""; let phone = JSON.parse(params.row.contactTelNo); let faxNo = JSON.parse(params.row.contactFaxNo); @@ -84,7 +85,7 @@ export default function SearchPublicNoticeTable({ recordList }) { headerName: 'Gazette Group', flex: 1, valueGetter: (params) => { - return (params?.value)?(params?.value):""; + return (params?.value) ? (params?.value) : ""; } }, { @@ -94,37 +95,39 @@ export default function SearchPublicNoticeTable({ recordList }) { flex: 1, valueGetter: (params) => { return params.row.issueYear - +" Vol. "+zeroPad(params.row.issueVolume,3) - +", No. "+zeroPad(params.row.issueNo,2) - +", "+DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)"); + + " Vol. " + zeroPad(params.row.issueVolume, 3) + + ", No. " + zeroPad(params.row.issueNo, 2) + + ", " + DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)"); } }, ]; function zeroPad(num, places) { - num=num?num:0; + num = num ? num : 0; var zero = places - num.toString().length + 1; return Array(+(zero > 0 && zero)).join("0") + num; } function handleRowDoubleClick(params) { // handleEditClick(params) - navigate('/application/'+ params.id); + navigate('/application/' + params.id); } return ( -
- - +
+ + 'auto'} + onRowDoubleClick={handleRowDoubleClick} + /> +
); } diff --git a/src/pages/PublicNotice/Search_GLD/SearchForm.js b/src/pages/PublicNotice/Search_GLD/SearchForm.js index e0af8d2..1cc054a 100644 --- a/src/pages/PublicNotice/Search_GLD/SearchForm.js +++ b/src/pages/PublicNotice/Search_GLD/SearchForm.js @@ -3,18 +3,19 @@ import { Button, CardContent, Grid, TextField, - Autocomplete + Autocomplete, + Typography } from '@mui/material'; import MainCard from "components/MainCard"; import { useForm } from "react-hook-form"; -import * as React from "react"; +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 SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, issueComboData +}) => { const [type, setType] = React.useState([]); // const [status, setStatus] = React.useState({ key: 0, label: 'All', type: 'all' }); @@ -28,7 +29,6 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom); const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo); - const { reset, register, handleSubmit } = useForm() const onSubmit = (data) => { data.status = selectedLabelsString @@ -71,16 +71,16 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu 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 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; + num = num ? num : 0; var zero = places - num.toString().length + 1; return Array(+(zero > 0 && zero)).join("0") + num; } @@ -88,83 +88,87 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu return ( + content={false} + sx={{ backgroundColor: 'backgroundColor.default' }} + >
- {/*row 1*/} - - - Search Form - - - - {/*row 2*/} - - - - - - - { - setMinDate(DateUtils.dateStr(newValue)); - }} - InputLabelProps={{ - shrink: true - }} - /> - - - - { - setMaxDate(DateUtils.dateStr(newValue)); - }} - id="dateTo" - type="date" - label="Submit Date(To)" - defaultValue={searchCriteria.dateTo} - /> - - - - - + + {/*row 1*/} + + + + Search Form + + - - - {/* + + + + + + { + setMinDate(DateUtils.dateStr(newValue)); + }} + InputLabelProps={{ + shrink: true + }} + /> + + + + { + setMaxDate(DateUtils.dateStr(newValue)); + }} + id="dateTo" + type="date" + label={"Submit Date(To)"} + defaultValue={searchCriteria.dateTo} + /> + + + + + + + + + {/* */} - { - const findAllIndex = newValue.findIndex((ele) => { - return ele.type === "all" - }) - - if (findAllIndex > -1) { - setSelectedStatus([newValue[findAllIndex]]); - setSelectedLabelsString('all') - } else { - const selectedLabels = newValue.map(option => option.type); - const selectedLabelsString = `${selectedLabels.join(',')}`; - setSelectedStatus(newValue); - setSelectedLabelsString(selectedLabelsString); - } - }} - getOptionLabel={(option) => option.label} - renderInput={(params) => ( - - )} - /> - - - { - orgCombo ? - - { - if (newValue !== null) { - setOrgSelected(newValue); - } - }} - renderInput={(params) => ( - - )} - /> - - : <> - } - - - getIssueLabel(option)} - onChange={(event, newValue) => { - if (newValue !== null) { - setIssueSelected(newValue); - } - }} - renderInput={(params) => ( - - )} - /> - - - - - - - - - - - {/*last row*/} - - - - + { + const findAllIndex = newValue.findIndex((ele) => { + return ele.type === "all" + }) + + if (findAllIndex > -1) { + setSelectedStatus([newValue[findAllIndex]]); + setSelectedLabelsString('all') + } else { + const selectedLabels = newValue.map(option => option.type); + const selectedLabelsString = `${selectedLabels.join(',')}`; + setSelectedStatus(newValue); + setSelectedLabelsString(selectedLabelsString); + } + }} + getOptionLabel={(option) => option.label} + renderInput={(params) => ( + + )} + /> + + + { + orgCombo ? + + { + if (newValue !== null) { + setOrgSelected(newValue); + } + }} + renderInput={(params) => ( + + )} + /> + + : <> + } + + + getIssueLabel(option)} + onChange={(event, newValue) => { + if (newValue !== null) { + setIssueSelected(newValue); + } + }} + renderInput={(params) => ( + + )} + /> + + + + + - - + {/*last row*/} + + + + + + + + + diff --git a/src/pages/PublicNotice/Search_GLD/index.js b/src/pages/PublicNotice/Search_GLD/index.js index eace58b..d3e31ee 100644 --- a/src/pages/PublicNotice/Search_GLD/index.js +++ b/src/pages/PublicNotice/Search_GLD/index.js @@ -20,7 +20,7 @@ const BackgroundHead = { backgroundImage: `url(${titleBackgroundImg})`, width: '100%', height: '100%', - backgroundSize:'contain', + backgroundSize: 'contain', backgroundRepeat: 'no-repeat', backgroundColor: '#0C489E', backgroundPosition: 'right' @@ -30,12 +30,12 @@ const BackgroundHead = { const UserSearchPage_Individual = () => { - const [record,setRecord] = React.useState([]); - const [orgCombo,setOrgCombo] = React.useState([]); - const [issueCombo,setIssueCombo] = React.useState([]); + 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)), + dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate() - 14)), }); const [onReady, setOnReady] = React.useState(false); @@ -53,36 +53,36 @@ const UserSearchPage_Individual = () => { getUserList(); }, [searchCriteria]); - function getUserList(){ + function getUserList() { HttpUtils.get({ url: UrlUtils.GET_PUBLIC_NOTICE_LIST, params: searchCriteria, - onSuccess: function(responseData){ + onSuccess: function (responseData) { setRecord(responseData); } }); } - function getOrgCombo(){ + function getOrgCombo() { HttpUtils.get({ url: UrlUtils.GET_ORG_COMBO, - onSuccess: function(responseData){ + onSuccess: function (responseData) { let combo = responseData; setOrgCombo(combo); } }); } - function getIssueCombo(){ + function getIssueCombo() { HttpUtils.get({ url: UrlUtils.GET_ISSUE_COMBO, - onSuccess: function(responseData){ + onSuccess: function (responseData) { let combo = responseData; setIssueCombo(combo); } }); } - + function applySearch(input) { setSearchCriteria(input); @@ -90,9 +90,9 @@ const UserSearchPage_Individual = () => { return ( !onReady ? - + : - +
@@ -102,18 +102,19 @@ const UserSearchPage_Individual = () => { {/*row 1*/} - {/*row 2*/} { ); -}; - +} export default UserSearchPage_Individual; diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js index 50f33d3..e73c819 100644 --- a/src/pages/authentication/auth-forms/CustomFormWizard.js +++ b/src/pages/authentication/auth-forms/CustomFormWizard.js @@ -816,7 +816,7 @@ const CustomFormWizard = (props) => { - + ({ lineHeight: 1.57 }, subtitle2: { - fontSize: '0.8rem', + fontSize: '0.9rem', fontWeight: 500, lineHeight: 1.66 }, @@ -84,9 +84,9 @@ const Typography = (fontFamily) => ({ overline: { lineHeight: 1.66 }, - button: { - textTransform: 'capitalize' - } + button: { + textTransform: 'capitalize', + }, }); export default Typography; \ No newline at end of file diff --git a/src/utils/statusUtils/Base.js b/src/utils/statusUtils/Base.js index d7791ca..60d03cb 100644 --- a/src/utils/statusUtils/Base.js +++ b/src/utils/statusUtils/Base.js @@ -1,6 +1,7 @@ +import { Typography } from "@mui/material" export function getStatusTag({ color = "#000", textColor = "#FFF", text = "" }) { return ( -
{text}
+
{text}
) } \ No newline at end of file From d0798b65311475a072a0fcde3ba3dc02149c64ff Mon Sep 17 00:00:00 2001 From: "cyril.tsui" Date: Thu, 2 Nov 2023 10:21:07 +0800 Subject: [PATCH 2/2] Update ui (e.g. datagrid --- .../User/DetailPage/UserAuthorityCard.js | 2 +- src/pages/User/DetailPage/index.js | 12 ++-- src/pages/User/SearchPage/UserSearchForm.js | 25 +++++-- src/pages/User/SearchPage/UserTable.js | 1 + src/pages/User/SearchPage/index.js | 66 +++++++++---------- src/themes/overrides/DataGrid.js | 34 +++++++++- 6 files changed, 94 insertions(+), 46 deletions(-) diff --git a/src/pages/User/DetailPage/UserAuthorityCard.js b/src/pages/User/DetailPage/UserAuthorityCard.js index deef5ed..fd2dd27 100644 --- a/src/pages/User/DetailPage/UserAuthorityCard.js +++ b/src/pages/User/DetailPage/UserAuthorityCard.js @@ -50,7 +50,7 @@ const UserAuthorityCard = ({ isCollectData, updateUserAuthList, userData, isNewR border={false} content={false} > - + User Authority diff --git a/src/pages/User/DetailPage/index.js b/src/pages/User/DetailPage/index.js index e8d8f76..46e570e 100644 --- a/src/pages/User/DetailPage/index.js +++ b/src/pages/User/DetailPage/index.js @@ -204,7 +204,7 @@ const UserMaintainPage = () => { !onReady ? : - +
@@ -222,7 +222,7 @@ const UserMaintainPage = () => { - + { - + { {/*col 2*/} - + { disabled={isNewRecord} onClick={handleDeleteClick} > - Delete User + Delete User { }} onClick={submitData} > - Save + Save diff --git a/src/pages/User/SearchPage/UserSearchForm.js b/src/pages/User/SearchPage/UserSearchForm.js index 7adf346..13b0e38 100644 --- a/src/pages/User/SearchPage/UserSearchForm.js +++ b/src/pages/User/SearchPage/UserSearchForm.js @@ -70,7 +70,7 @@ const UserSearchForm = ({ applySearch }) => { {/*row 1*/} - Search Form (GLD User) + Search Form (GLD User) @@ -82,6 +82,9 @@ const UserSearchForm = ({ applySearch }) => { {...register("userName")} id='userName' label="Username" + InputLabelProps={{ + shrink: true + }} /> @@ -91,6 +94,9 @@ const UserSearchForm = ({ applySearch }) => { {...register("fullenName")} id="fullenName" label="Full Name" + InputLabelProps={{ + shrink: true + }} /> @@ -100,6 +106,9 @@ const UserSearchForm = ({ applySearch }) => { {...register("post")} id="post" label="Post" + InputLabelProps={{ + shrink: true + }} /> @@ -109,6 +118,9 @@ const UserSearchForm = ({ applySearch }) => { {...register("email")} id="email" label="Email" + InputLabelProps={{ + shrink: true + }} /> @@ -118,6 +130,9 @@ const UserSearchForm = ({ applySearch }) => { {...register("phone")} id="phone" label="Phone" + InputLabelProps={{ + shrink: true + }} /> @@ -132,7 +147,7 @@ const UserSearchForm = ({ applySearch }) => { size="small" /> } - label={Locked} + label={Locked} /> @@ -151,7 +166,7 @@ const UserSearchForm = ({ applySearch }) => { alignItems: 'end' }}> - New User + New User @@ -165,7 +180,7 @@ const UserSearchForm = ({ applySearch }) => { textTransform: 'capitalize', alignItems: 'end' }}> - Clear + Clear @@ -178,7 +193,7 @@ const UserSearchForm = ({ applySearch }) => { textTransform: 'capitalize', alignItems: 'end' }}> - Search + Search diff --git a/src/pages/User/SearchPage/UserTable.js b/src/pages/User/SearchPage/UserTable.js index 6d8c300..143b6f7 100644 --- a/src/pages/User/SearchPage/UserTable.js +++ b/src/pages/User/SearchPage/UserTable.js @@ -136,6 +136,7 @@ export default function UserTable({recordList,setChangeLocked}) { }, }} onRowDoubleClick={handleRowDoubleClick} + getRowHeight={() => 'auto'} />
); diff --git a/src/pages/User/SearchPage/index.js b/src/pages/User/SearchPage/index.js index 7ca6d14..09ab603 100644 --- a/src/pages/User/SearchPage/index.js +++ b/src/pages/User/SearchPage/index.js @@ -1,14 +1,14 @@ // material-ui import { - Grid, + Grid, Typography, Stack, // Button } from '@mui/material'; import MainCard from "../../../components/MainCard"; -import {useEffect, useState} from "react"; +import { useEffect, useState } from "react"; import axios from "axios"; -import {GLD_USER_PATH} from "../../../utils/ApiPathConst"; +import { GLD_USER_PATH } from "../../../utils/ApiPathConst"; import * as React from "react"; import Loadable from 'components/Loadable'; @@ -22,7 +22,7 @@ const BackgroundHead = { backgroundImage: `url(${titleBackgroundImg})`, width: '100%', height: '100%', - backgroundSize:'contain', + backgroundSize: 'contain', backgroundRepeat: 'no-repeat', backgroundColor: '#0C489E', backgroundPosition: 'right' @@ -30,7 +30,7 @@ const BackgroundHead = { // ==============================|| DASHBOARD - DEFAULT ||============================== // const UserSettingPage = () => { - const [record,setRecord] = useState([]); + const [record, setRecord] = useState([]); const [searchCriteria, setSearchCriteria] = useState({}); const [onReady, setOnReady] = useState(false); const [changelocked, setChangeLocked] = React.useState(false); @@ -49,9 +49,9 @@ const UserSettingPage = () => { getUserList(); }, [searchCriteria]); - function getUserList(){ + function getUserList() { axios.get(`${GLD_USER_PATH}`, - {params: searchCriteria} + { params: searchCriteria } ) .then((response) => { if (response.status === 200) { @@ -70,35 +70,35 @@ const UserSettingPage = () => { return ( !onReady ? - + : - - -
- - View GLD User - -
- + + +
+ + View GLD User + +
+ - {/*row 1*/} - - - - {/*row 2*/} - - - - - + {/*row 1*/} + + + + {/*row 2*/} + + + + + - + ); }; diff --git a/src/themes/overrides/DataGrid.js b/src/themes/overrides/DataGrid.js index e8b7f9b..a400e26 100644 --- a/src/themes/overrides/DataGrid.js +++ b/src/themes/overrides/DataGrid.js @@ -4,10 +4,13 @@ export default function DataGrid() { const cellFontSize = "1.1rem" const cellFooterFontSize = "1.1rem" const cellHeaderFontSize = "1.1rem" + const selectedNumberFontSize = "1.2rem" + const actionIconSize = "2rem" const cellFontWeight = 600 const cellFooterFontWeight = 600 const cellHeaderFontWeight = 600 + const selectedNumberFontWeight = 600 return { MuiDataGrid: { @@ -22,7 +25,36 @@ export default function DataGrid() { fontSize: cellFooterFontSize, fontWeight: cellFooterFontWeight }, - '& .MuiDataGrid-columnHeader': { + '& .MuiTablePagination-selectLabel': { + fontSize: cellFooterFontSize, + fontWeight: cellFooterFontWeight, + marginTop: 15, + }, + '& .MuiTablePagination-select': { + fontSize: selectedNumberFontSize, + fontWeight: selectedNumberFontWeight, + marginTop: 8, + }, + '& .MuiTablePagination-selectIcon': { + marginTop: 1, + }, + '& .MuiTablePagination-displayedRows': { + fontSize: cellFooterFontSize, + fontWeight: cellFooterFontWeight, + }, + '& .MuiTablePagination-actions': { + fontSize: cellFooterFontSize, + fontWeight: cellFooterFontWeight, + svg: { + width: actionIconSize, + height: actionIconSize, + } + }, + '& .MuiDataGrid-rowCount': { + fontSize: cellFooterFontSize, + fontWeight: cellFooterFontWeight + }, + '& .MuiDataGrid-columnHeaderTitle': { fontSize: cellHeaderFontSize, fontWeight: cellHeaderFontWeight, },