alex
/
PNSPS-frontend-MaterialUI
1
0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

update layout

master
jason.lam 1 年之前
父節點
bb917eb441
當前提交
f6f1feec73
共有 5 個檔案被更改，包括 296 行新增 和 312 行删除
分割檢視
Diff Options
Show Stats Download Patch File Download Diff File
  1. +15
    -7
      src/components/FileList.js
  2. +2
    -2
      src/pages/PublicNotice/Details_GLD/index.js
  3. +262
    -263
      src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js
  4. +15
    -38
      src/pages/User/DetailsPage_Individual/index.js
  5. +2
    -2
      src/utils/FieldUtils.js

+ 15
- 7
src/components/FileList.js 查看文件

@@ -8,11 +8,15 @@ import * as HttpUtils from "../utils/HttpUtils"
import * as UrlUtils from "../utils/ApiPathConst"
import * as DateUtils from "../utils/DateUtils"
import { FiDataGrid } from './FiDataGrid';
import {useTheme} from "@emotion/react";
import {useMediaQuery} from "@mui/material";
// ==============================|| EVENT TABLE ||============================== //

export default function FileList({ refType, refId, allowDelete, sx, dateHideable,lang, ...props }) {
const [rows, setRows] = React.useState([]);
const [rowModesModel] = React.useState({});
const theme = useTheme();
const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));

React.useEffect(() => {
loadData();
@@ -92,13 +96,15 @@ export default function FileList({ refType, refId, allowDelete, sx, dateHideable
id: 'filename',
field: 'filename',
headerName: lang=="ch"?"檔案名稱":'File Name',
flex: 3,
width: isMdOrLg ? 'auto' : 400,
flex: isMdOrLg ? 3 : undefined,
},
{
id: 'filesize',
field: 'filesize',
headerName: lang=="ch"?"檔案大小":'File Size',
flex: 1,
width: isMdOrLg ? 'auto' : 160,
flex: isMdOrLg ? 1 : undefined,
valueGetter: (params) => {
return convertToStr(params.value);
}
@@ -110,7 +116,8 @@ export default function FileList({ refType, refId, allowDelete, sx, dateHideable
id: 'created',
field: 'created',
headerName: lang=="ch"?"日期":'Created',
flex: 1,
width: isMdOrLg ? 'auto' : 160,
flex: isMdOrLg ? 1 : undefined,
valueGetter: (params) => {
return DateUtils.datetimeStr(params.value);
}
@@ -137,13 +144,15 @@ export default function FileList({ refType, refId, allowDelete, sx, dateHideable
id: 'filename',
field: 'filename',
headerName: lang=="ch"?"檔案名稱":'File Name',
flex: 3,
width: isMdOrLg ? 'auto' : 400,
flex: isMdOrLg ? 3 : undefined,
},
{
id: 'filesize',
field: 'filesize',
headerName: lang=="ch"?"檔案大小":'File Size',
flex: 1,
width: isMdOrLg ? 'auto' : 160,
flex: isMdOrLg ? 1 : undefined,
valueGetter: (params) => {
return convertToStr(params.value);
}
@@ -175,7 +184,6 @@ export default function FileList({ refType, refId, allowDelete, sx, dateHideable
}

return (
// <div style={{height: 400, width: '100%'}}>
<FiDataGrid
{...props}
hideFooterSelectedRowCount={true}
@@ -191,7 +199,7 @@ export default function FileList({ refType, refId, allowDelete, sx, dateHideable
}}
pageSizeOptions={[5, 10]}
autoHeight={true}

/>
// </div>
);
}

+ 2
- 2
src/pages/PublicNotice/Details_GLD/index.js 查看文件

@@ -380,10 +380,10 @@ const PublicNoticeDetail_GLD = () => {
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12} lg={3} xl={3}>
<Grid item xs={12} md={12} lg={3} xl={3} sx={{mt:{xs: -3, sm:-3}}}>
<Grid container>
<Grid item xs={12} md={12}>
<Box xs={12} md={12} height='800px' sx={{ ml:2, mt:3, mr:{xs:2, sm:2}, borderRadius: '10px', backgroundColor: '#ffffff' }}>
<Box xs={12} md={12} height='800px' sx={{ ml:2, mt:3, mb:3, mr:{xs:2, sm:2}, borderRadius: '10px', backgroundColor: '#ffffff' }}>
<ClientDetailCard
// updateUserObject={updateUserObject}
applicationDetailData={applicationDetailData}


+ 262
- 263
src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js 查看文件

@@ -144,9 +144,8 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
:
<form onSubmit={formik.handleSubmit} style={{ padding: 12 }}>
{/*top button*/}
<Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"start"} justifyContent="center">
<Grid item xs={12} sm={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"start"} justifyContent="center">
<Grid container maxWidth justifyContent="flex-start">

{editMode ?
<>
<Grid item sx={{ ml: 3, mr: 3 }}>
@@ -195,319 +194,319 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
</Grid>
</>
}

</Grid>
</Grid>
{/*end top button*/}
<Typography variant="h4" sx={{ mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
Individual User Details
</Typography>
<Grid container spacing={1} sx={{ mt: 3, ml: 3, mb: 2, mr: 3}}>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Username:",
valueName: "username",
disabled: true,
form: formik
})}
</Grid>
<Grid item xs={12} sm={12} md={12} lg={12}>
<Grid container spacing={1} sx={{ mt: 3, ml: 3, mb: 2, mr: 3}}>
<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getTextField({
label: "Username:",
valueName: "username",
disabled: true,
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getTextField({
label: "English Name:",
valueName: "enName",
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getTextField({
label: "English Name:",
valueName: "enName",
disabled: (!editMode),
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Created Date:",
valueName: "createDate",
disabled: true,
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Prefix:",
valueName: "prefix",
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Created Date:",
valueName: "createDate",
disabled: true,
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Prefix:",
valueName: "prefix",
disabled: (!editMode),
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Chinese Name:",
valueName: "chName",
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Chinese Name:",
valueName: "chName",
disabled: (!editMode),
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Last Updated:",
valueName: "modifieDate",
disabled: true,
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Last Updated:",
valueName: "modifieDate",
disabled: true,
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getComboField({
label: "ID Type:",
valueName: "idDocType",
disabled: (!editMode),
dataList: ComboData.idDocType,
filterOptions: (options) => options,
getOptionLabel: (item) => item ? typeof item === 'string' ? item : (item["type"] ? item["type"] + "-" + item["label"] : "") : "",
onInputChange: (event, newValue, setInputValue) => {
if (newValue == null) {
setInputValue("");
}
let _val = newValue.split("-");
if (_val[0]) {
setInputValue(_val[0]);
}
},
onChange: (event, newValue) => {
if (newValue == null) {
formik.setFieldValue("idDocType", "");
return;
}
formik.setFieldValue("idDocType", newValue.type);
},
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getComboField({
label: "ID Type:",
valueName: "idDocType",
disabled: (!editMode),
dataList: ComboData.idDocType,
filterOptions: (options) => options,
getOptionLabel: (item) => item ? typeof item === 'string' ? item : (item["type"] ? item["type"] + "-" + item["label"] : "") : "",
onInputChange: (event, newValue, setInputValue) => {
if (newValue == null) {
setInputValue("");
}
let _val = newValue.split("-");
if (_val[0]) {
setInputValue(_val[0]);
}
},
onChange: (event, newValue) => {
if (newValue == null) {
formik.setFieldValue("idDocType", "");
return;
}
formik.setFieldValue("idDocType", newValue.type);
},
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getPhoneField({
label: "Contact Tel:",
valueName: {
code: "tel_countryCode",
num: "phoneNumber"
},
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getPhoneField({
label: "Contact Tel:",
valueName: {
code: "tel_countryCode",
num: "phoneNumber"
},
disabled: (!editMode),
form: formik
})}
</Grid>

<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="h5">Verified:</Typography>
</Grid>
<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="h5">Verified:</Typography>
</Grid>

{
currentUserData.verifiedBy || editMode ?
<Grid item xs={12} md={6} lg={6}>
{FieldUtils.initField({
valueName: "verifiedStatus",
disabled: true,
form: formik,
})}
</Grid>
:
<>
<Grid item xs={10} md={4} lg={4}>
{
currentUserData.verifiedBy || editMode ?
<Grid item xs={12} md={6} lg={6}>
{FieldUtils.initField({
valueName: "verifiedStatus",
disabled: true,
form: formik,
})}
</Grid>
<Grid item xs={1}>
<Button
size="large"
variant="contained"
sx={{
textTransform: 'capitalize',
alignItems: 'end',
}}
onClick={onVerifiedClick}
>
<Typography variant="h5">Verify</Typography>
</Button>
</Grid>
</>
}

</Grid>
</Grid>

<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="h5">ID No.:</Typography>
</Grid>

<Grid item xs={12} md={6} lg={6}>
<Grid container>
{formik.values.idDocType == "HKID" ?
:
<>
<Grid item lg={8}>
<Grid item xs={10} md={4} lg={4}>
{FieldUtils.initField({
valueName: "identification",
disabled: (!editMode),
valueName: "verifiedStatus",
disabled: true,
form: formik,
placeholder: "證件號碼",
inputProps: {
maxLength: 7,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}
})}

</Grid>
<Grid item lg={4}>
<Grid item xs={1}>
<Button
size="large"
variant="contained"
sx={{
textTransform: 'capitalize',
alignItems: 'end',
}}
onClick={onVerifiedClick}
>
<Typography variant="h5">Verify</Typography>
</Button>
</Grid>
</>
}

</Grid>
</Grid>

<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="h5">ID No.:</Typography>
</Grid>

<Grid item xs={12} md={6} lg={6}>
<Grid container>
{formik.values.idDocType == "HKID" ?
<>
<Grid item lg={8}>
{FieldUtils.initField({
valueName: "identification",
disabled: (!editMode),
form: formik,
placeholder: "證件號碼",
inputProps: {
maxLength: 7,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}
})}

</Grid>
<Grid item lg={4}>
{FieldUtils.initField({
valueName: "checkDigit",
disabled: (!editMode),
form: formik
})}
</Grid>
</> :
<Grid item lg={12}>
{FieldUtils.initField({
valueName: "checkDigit",
valueName: "identification",
disabled: (!editMode),
form: formik
})}
</Grid>
</> :
<Grid item lg={12}>
{FieldUtils.initField({
valueName: "identification",
disabled: (!editMode),
form: formik
})}
</Grid>
}
}
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>

<Grid item lg={4}>
{FieldUtils.getPhoneField({
label: "Fax No.:",
valueName: {
code: "fax_countryCode",
num: "faxNumber"
},
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getPhoneField({
label: "Fax No.:",
valueName: {
code: "fax_countryCode",
num: "faxNumber"
},
disabled: (!editMode),
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Last Login:",
valueName: "lastLoginDate",
disabled: true,
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Last Login:",
valueName: "lastLoginDate",
disabled: true,
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getComboField({
label: "Country:",
valueName: "country",
dataList: ComboData.country,
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getComboField({
label: "Country:",
valueName: "country",
dataList: ComboData.country,
disabled: (!editMode),
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Email:",
valueName: "emailAddress",
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Email:",
valueName: "emailAddress",
disabled: (!editMode),
form: formik
})}
</Grid>


<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="h5">Status:</Typography>
</Grid>
<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="h5">Status:</Typography>
</Grid>

{
editMode ?
<Grid item xs={12} md={6} lg={6}>
{FieldUtils.initField({
valueName: "status",
disabled: true,
form: formik,
})}
</Grid>
:
<>
<Grid item lg={4}>
{
editMode ?
<Grid item xs={12} md={6} lg={6}>
{FieldUtils.initField({
valueName: "status",
disabled: true,
form: formik,
})}
</Grid>
{locked ?
<Grid item lg={1} sx={{ml:1}}>
<Button
size="large"
variant="contained"
color="success"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doUnlock}
>
<Typography variant="h5">Active</Typography>
</Button>
</Grid>
:
<Grid item lg={1} sx={{ml:1}}>
<Button
size="large"
variant="contained"
color="error"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doLock}
>
<Typography variant="h5">Lock</Typography>
</Button>
:
<>
<Grid item lg={4}>
{FieldUtils.initField({
valueName: "status",
disabled: true,
form: formik,
})}
</Grid>
}
</>
}
{locked ?
<Grid item lg={1} sx={{ml:1}}>
<Button
size="large"
variant="contained"
color="success"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doUnlock}
>
<Typography variant="h5">Active</Typography>
</Button>
</Grid>
:
<Grid item lg={1} sx={{ml:1}}>
<Button
size="large"
variant="contained"
color="error"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doLock}
>
<Typography variant="h5">Lock</Typography>
</Button>
</Grid>
}
</>
}
</Grid>
</Grid>
</Grid>

<Grid item lg={4}>
{FieldUtils.getAddressField({
label: "Address:",
valueName: ["addressLine1", "addressLine2", "addressLine3"],
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getAddressField({
label: "Address:",
valueName: ["addressLine1", "addressLine2", "addressLine3"],
disabled: (!editMode),
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getComboField({
label: "District:",
valueName: "district",
dataList: ComboData.district,
disabled: (!editMode),
form: formik
})}
<Grid item lg={4}>
{FieldUtils.getComboField({
label: "District:",
valueName: "district",
dataList: ComboData.district,
disabled: (!editMode),
form: formik
})}
</Grid>
</Grid>
</Grid>

</form>
}
</MainCard>


+ 15
- 38
src/pages/User/DetailsPage_Individual/index.js 查看文件

@@ -1,7 +1,7 @@
// material-ui
import * as React from "react";

import { Grid, Typography, Button, Stack, Box } from '@mui/material';
import { Grid, Typography, Button, Stack } from '@mui/material';
import FileList from "../../../components/FileList"
import MainCard from "../../../components/MainCard";
import * as HttpUtils from "../../../utils/HttpUtils";
@@ -35,26 +35,6 @@ const UserMaintainPage_Individual = () => {
const [formData, setFormData] = React.useState({})
const [isLoading, setLoding] = React.useState(true);

const _sx = {
ml: 6,
mr: 6,
mb: 3,
mt: 3,
padding: "4 2 4 2",
boxShadow: 1,
border: 1,
borderColor: '#DDD',
'& .MuiDataGrid-cell': {
borderTop: 1,
borderBottom: 1,
borderColor: "#EEE"
},
'& .MuiDataGrid-footerContainer': {
border: 1,
borderColor: "#EEE"
}
}

React.useEffect(() => {
loadData();
}, []);
@@ -102,7 +82,7 @@ const UserMaintainPage_Individual = () => {
isLoading ?
<LoadingComponent />
:
<Grid container sx={{ minHeight: '90vh', backgroundColor: 'backgroundColor.default' }}>
<Grid container sx={{ backgroundColor: 'backgroundColor.default', maxWidth:'100%' }}>
<Grid item xs={12}>
<div style={BackgroundHead}>
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -116,29 +96,26 @@ const UserMaintainPage_Individual = () => {
</Button>
</Grid>
{/*col 1*/}
<Grid item xs={12}>
<Grid item xs={12} sm={12} md={12} lg={12} >
<Grid container>
<Grid item xs={12} md={12} lg={12}>
<Box xs={12} ml={0} mt={-1} mr={0} sx={{ p: 1, borderRadius: '10px' }}>
<UserInformationCard
formData={formData}
loadDataFun={loadData}
/>
</Box>
<Grid item xs={12} sm={12} md={12} lg={12} >
<UserInformationCard
formData={formData}
loadDataFun={loadData}
/>
</Grid>
<Grid item xs={12} md={12} lg={12}>
<Box xs={12} ml={0} mt={-3} mr={11.5} sx={{ p: 1, borderRadius: '10px' }}>
<MainCard elevation={0} border={false} content={false}>
<Typography variant="h4" sx={{ mt: 4, ml: 6, mb: 2, mr: 6, borderBottom: "1px solid black" }}>
Files
</Typography>
<MainCard elevation={0} border={false} content={false} sx={{maxWidth: '100%', mr:2}}>
<Typography variant="h4" sx={{ mt: 4, ml: 2, mb: 2, mr: 2, borderBottom: "1px solid black" }}>
Files
</Typography>
<Grid item xs={12} sm={12} md={12} lg={12} sx={{maxWidth: '95%'}}>
<FileList
sx={_sx}
refId={params.id}
refType={"identification"}
/>
</MainCard>
</Box>
</Grid>
</MainCard>
<br />
</Grid>
</Grid>


+ 2
- 2
src/utils/FieldUtils.js 查看文件

@@ -27,8 +27,8 @@ export const getDateField = ({ label, valueName, form, disabled }) => {
}

export const getTextField = ({ label, valueName, form, disabled }) => {
return <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
return <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} >
<Grid item xs={12} sm={12} md={3} lg={3}
sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="h5">{label}</Typography>
</Grid>


Write Preview
Loading…
取消
儲存