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

save form & fileDownload

master
Anna Ho 2 years ago
parent
5037bb0eca
commit
2cf1affccc
5 changed files with 223 additions and 94 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +3
    -0
      src/layout/MainLayout/Header/index.js
  2. +189
    -78
      src/pages/pnspsUserDetailPage_Public/UserInformationCard_Public.js
  3. +7
    -1
      src/pages/pnspsUserDetailPage_Public/index.js
  4. +6
    -1
      src/utils/ApiPathConst.js
  5. +18
    -14
      src/utils/HttpUtils.js

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

@@ -72,6 +72,9 @@ function Header(props) {
<li> <li>
<Link className="userSearchview" to='/userSearchview'>User</Link> <Link className="userSearchview" to='/userSearchview'>User</Link>
</li> </li>
<li>
<Link className="publicUser" to='/publicUser'>Public User</Link>
</li>
<li> <li>
<Link className="usergroupSearchview" to='/usergroupSearchview'>User Group</Link> <Link className="usergroupSearchview" to='/usergroupSearchview'>User Group</Link>
</li> </li>


+ 189
- 78
src/pages/pnspsUserDetailPage_Public/UserInformationCard_Public.js View File

@@ -1,6 +1,6 @@
// material-ui // material-ui
import { import {
Grid, TextField, Typography, Select, Button
Grid, TextField, Typography, Button
} from '@mui/material'; } from '@mui/material';
import MainCard from "../../components/MainCard"; import MainCard from "../../components/MainCard";
import * as React from "react"; import * as React from "react";
@@ -10,13 +10,15 @@ import {useEffect, useState} from "react";
//import LoadingComponent from "../extra-pages/LoadingComponent"; //import LoadingComponent from "../extra-pages/LoadingComponent";
import * as DateUtils from '../../utils/DateUtils'; import * as DateUtils from '../../utils/DateUtils';
import * as HttpUtils from '../../utils/HttpUtils'; import * as HttpUtils from '../../utils/HttpUtils';
import * as UrlUtils from "../../utils/ApiPathConst";
//import axios from 'axios';


//import {useParams} from "react-router-dom"; //import {useParams} from "react-router-dom";


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




const UserInformationCard_Public = ({userData}) => {
const UserInformationCard_Public = ({userData, loadDataFun}) => {


const [currentUserData, setCurrentUserData] = useState(userData); const [currentUserData, setCurrentUserData] = useState(userData);
const [editMode, setEditMode] = useState(false); const [editMode, setEditMode] = useState(false);
@@ -30,17 +32,91 @@ const UserInformationCard_Public = ({userData}) => {
let createDate = DateUtils.datetimeStr(userData.created); let createDate = DateUtils.datetimeStr(userData.created);
let modifiedBy = DateUtils.datetimeStr(userData.modified)+", "+userData.modifiedBy; let modifiedBy = DateUtils.datetimeStr(userData.modified)+", "+userData.modifiedBy;
userData["createDate"] = createDate; userData["createDate"] = createDate;
userData["modifiedBy"] = modifiedBy;
userData["modifieDate"] = modifiedBy;
userData["verifiedStatus"] = userData.verified? "Not verify yet":"Verified";

userData["country"] = userData.address?.country;
userData["addressLine1"] = userData.address?.addressLine1;
userData["addressLine2"] = userData.address?.addressLine2;
userData["addressLine3"] = userData.address?.addressLine3;
userData["addressLine3"] = userData.address?.addressLine3;

userData["phoneNumber"] = userData.contactTel?.phoneNumber;
userData["tel_countryCode"] = userData.contactTel?.countryCode;

userData["faxNumber"] = userData.faxNo?.faxNumber;
userData["fax_countryCode"] = userData.faxNo?.countryCode;
setCurrentUserData(userData); setCurrentUserData(userData);
}, [userData]); }, [userData]);


useEffect(() => { useEffect(() => {
reset(currentUserData); reset(currentUserData);
setLocked(currentUserData.locked);
}, [currentUserData]); }, [currentUserData]);




function onSubmitForm(_formData) { function onSubmitForm(_formData) {
console.log(_formData); console.log(_formData);

// axios.post(UrlUtils.POST_PUBLIC_USER+"/"+userData.id,{
// prefix: "1",
// enName: "Chan",
// chName: "Chan",
// idDocType: "Chan",
// contactTel: {
// countryCode:"Chan",
// phoneNumber: "Chan"
// },
// identification: "Chan",
// faxNo:{
// countryCode: "Chan",
// faxNumber: "Chan"
// },
// emailAddress:"Chan",
// address:{
// country:"Chan",
// addressLine1: "Chan",
// addressLine2: "Chan",
// addressLine3: "Chan",
// },
// }).then(
// (response)=>{
// if(response.status == 200)
// loadDataFun();
// }
// ).catch(error => {
// console.log(error);
// });

HttpUtils.post({
url: UrlUtils.POST_PUBLIC_USER+"/"+userData.id,
params: {
prefix: _formData.prefix,
enName: _formData.enName,
chName: _formData.chName,
idDocType: _formData.idDocType,
contactTel: {
countryCode: _formData.tel_countryCode,
phoneNumber: _formData.phoneNumber
},
identification: _formData.identification,
faxNo:{
countryCode: _formData.fax_countryCode,
faxNumber: _formData.faxNumber
},
emailAddress:_formData.emailAddress,
address:{
country:_formData.country,
addressLine1: _formData.addressLine1,
addressLine2: _formData.addressLine2,
addressLine3: _formData.addressLine3,
},
},
onSuccess: function(){
loadDataFun();
}
});
} }


const onEditClick = () => { const onEditClick = () => {
@@ -48,11 +124,21 @@ const UserInformationCard_Public = ({userData}) => {
}; };


const doLock = () => { const doLock = () => {
setLocked(true);
HttpUtils.get({
url: UrlUtils.GET_PUBLIC_USER_LOCK+"/"+userData.id,
onSuccess: function(){
loadDataFun();
}
});
}; };


const doUnlock = () => { const doUnlock = () => {
setLocked(false);
HttpUtils.get({
url: UrlUtils.GET_PUBLIC_USER_UNLOCK+"/"+userData.id,
onSuccess: function(){
loadDataFun();
}
});
}; };




@@ -148,7 +234,7 @@ const UserInformationCard_Public = ({userData}) => {
fullWidth fullWidth
{...register("createDate")} {...register("createDate")}
id='createDate' id='createDate'
disabled={!editMode}
disabled
/> />
</Grid> </Grid>
</Grid> </Grid>
@@ -200,9 +286,9 @@ const UserInformationCard_Public = ({userData}) => {
<Grid item xs={7} s={7} md={7} lg={6}> <Grid item xs={7} s={7} md={7} lg={6}>
<TextField <TextField
fullWidth fullWidth
{...register("modifiedBy")}
id='modifiedBy'
disabled={!editMode}
{...register("modifieDate")}
id='modifieDate'
disabled
/> />
</Grid> </Grid>
</Grid> </Grid>
@@ -221,7 +307,7 @@ const UserInformationCard_Public = ({userData}) => {
fullWidth fullWidth
{...register("idDocType")} {...register("idDocType")}
id='idDocType' id='idDocType'
disabled
disabled={!editMode}
/> />
</Grid> </Grid>
</Grid> </Grid>
@@ -234,13 +320,20 @@ const UserInformationCard_Public = ({userData}) => {
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Contact Tel: Contact Tel:
</Grid> </Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<Grid item xs={2}>
<TextField <TextField
fullWidth fullWidth
{...register("contactTel")}
id='contactTel'
disabled
{...register("tel_countryCode")}
id='tel_countryCode'
disabled={!editMode}
/>
</Grid>
<Grid item xs={4}>
<TextField
fullWidth
{...register("phoneNumber")}
id='phoneNumber'
disabled={!editMode}
/> />
</Grid> </Grid>
</Grid> </Grid>
@@ -250,20 +343,45 @@ const UserInformationCard_Public = ({userData}) => {
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4} <Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Vetted By:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("todo",
{
value: currentUserData?.todo,
})}
id='todo'
disabled
/>
</Grid>
Verified:
</Grid>

{
currentUserData.verified || editMode?
<Grid item xs={6}>
<TextField
fullWidth
{...register("verifiedStatus")}
id='verifiedStatus'
disabled
/>
</Grid>
:
<>
<Grid item xs={4}>
<TextField
fullWidth
{...register("verifiedStatus")}
id='verifiedStatus'
disabled
/>
</Grid>
<Grid item xs={1}>
<Button
size="large"
variant="contained"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Verified
</Button>
</Grid>
</>
}
</Grid> </Grid>
</Grid> </Grid>


@@ -282,7 +400,7 @@ const UserInformationCard_Public = ({userData}) => {
value: currentUserData?.identification, value: currentUserData?.identification,
})} })}
id='identification' id='identification'
disabled
disabled={!editMode}
/> />
<Button lg={2} variant="contained" onClick={downloadFile} >View File</Button> <Button lg={2} variant="contained" onClick={downloadFile} >View File</Button>
</Grid> </Grid>
@@ -296,18 +414,21 @@ const UserInformationCard_Public = ({userData}) => {
Fax No.: Fax No.:
</Grid> </Grid>


<Grid item xs={7} s={7} md={7} lg={6}>

<Select
fullWidth
{...register("fax",
{
value: currentUserData?.fax,
})}
id='fax'
disabled={!editMode}
>
</Select>
<Grid item xs={2} >
<TextField
fullWidth
{...register("fax_countryCode")}
id='fax_countryCode'
disabled={!editMode}
/>
</Grid>
<Grid item xs={4} >
<TextField
fullWidth
{...register("faxNumber")}
id='faxNumber'
disabled={!editMode}
/>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
@@ -343,17 +464,12 @@ const UserInformationCard_Public = ({userData}) => {
</Grid> </Grid>


<Grid item xs={7} s={7} md={7} lg={6}> <Grid item xs={7} s={7} md={7} lg={6}>

<Select
fullWidth
{...register("country",
{
value: currentUserData?.country,
})}
id='country'
disabled={!editMode}
>
</Select>
<TextField
fullWidth
{...register("country")}
id='country'
disabled={!editMode}
/>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
@@ -368,11 +484,9 @@ const UserInformationCard_Public = ({userData}) => {
<Grid item xs={7} s={7} md={7} lg={6}> <Grid item xs={7} s={7} md={7} lg={6}>
<TextField <TextField
fullWidth fullWidth
{...register("email",
{
value: currentUserData?.email,
})}
id='email'
{...register("emailAddress")}
id='emailAddress'
disabled={!editMode}
/> />
</Grid> </Grid>
</Grid> </Grid>
@@ -388,11 +502,9 @@ const UserInformationCard_Public = ({userData}) => {
<Grid item xs={7} s={7} md={7} lg={6}> <Grid item xs={7} s={7} md={7} lg={6}>
<TextField <TextField
fullWidth fullWidth
{...register("status",
{
value: currentUserData?.status,
})}
{...register("status")}
id='status' id='status'
disabled
/> />
</Grid> </Grid>
</Grid> </Grid>
@@ -432,7 +544,7 @@ const UserInformationCard_Public = ({userData}) => {
value: currentUserData?.address?.addressLine3, value: currentUserData?.address?.addressLine3,
})} })}
id='addressLine3' id='addressLine3'
disabled
disabled={!editMode}
/> />
</Grid> </Grid>
</Grid> </Grid>
@@ -445,11 +557,13 @@ const UserInformationCard_Public = ({userData}) => {
<Grid container maxWidth justifyContent="flex-end"> <Grid container maxWidth justifyContent="flex-end">
{editMode? {editMode?
<>
<Grid item sx={{ml: 3, mr: 3}}> <Grid item sx={{ml: 3, mr: 3}}>
<Button <Button
size="large" size="large"
variant="contained" variant="contained"
type="submit" type="submit"
color="success"
sx={{ sx={{
textTransform: 'capitalize', textTransform: 'capitalize',
alignItems: 'end' alignItems: 'end'
@@ -458,60 +572,57 @@ const UserInformationCard_Public = ({userData}) => {
Save Save
</Button> </Button>
</Grid> </Grid>
:
<>
{locked?
<Grid item sx={{ml: 3, mr: 3}}> <Grid item sx={{ml: 3, mr: 3}}>
<Button <Button
size="large" size="large"
variant="contained" variant="contained"
type="submit"
color="primary"
onClick={loadDataFun}
sx={{ sx={{
textTransform: 'capitalize', textTransform: 'capitalize',
alignItems: 'end' alignItems: 'end'
}} }}
onClick={doUnlock}
> >
Unlock
Cancel & Back
</Button> </Button>
</Grid> </Grid>
</>
: :
<>
{locked?
<Grid item sx={{ml: 3, mr: 3}}> <Grid item sx={{ml: 3, mr: 3}}>
<Button <Button
size="large" size="large"
variant="contained" variant="contained"
type="submit"
color="primary" color="primary"
sx={{ sx={{
textTransform: 'capitalize', textTransform: 'capitalize',
alignItems: 'end' alignItems: 'end'
}} }}
onClick={doLock}
onClick={doUnlock}
> >
Lock
Unlock
</Button> </Button>
</Grid> </Grid>
}
:
<Grid item sx={{ml: 3, mr: 3}}> <Grid item sx={{ml: 3, mr: 3}}>
<Button <Button
size="large" size="large"
variant="contained" variant="contained"
type="submit"
color="success"
color="primary"
sx={{ sx={{
textTransform: 'capitalize', textTransform: 'capitalize',
alignItems: 'end' alignItems: 'end'
}} }}
onClick={doLock}
> >
Vet
Lock
</Button> </Button>
</Grid> </Grid>
}
<Grid item sx={{ml: 3, mr: 3}}> <Grid item sx={{ml: 3, mr: 3}}>
<Button <Button
size="large" size="large"
variant="contained" variant="contained"
type="submit"
sx={{ sx={{
textTransform: 'capitalize', textTransform: 'capitalize',
alignItems: 'end' alignItems: 'end'


+ 7
- 1
src/pages/pnspsUserDetailPage_Public/index.js View File

@@ -21,6 +21,11 @@ const UserMaintainPage_Public = () => {


useEffect(()=>{ useEffect(()=>{
console.log(userData); console.log(userData);
loadData();
},[]);

const loadData = ()=>{
setLoding(true);
HttpUtils.get( HttpUtils.get(
{ {
url: `${apiPath}${UrlUtils.GET_USER_PATH}/${params.id}`, url: `${apiPath}${UrlUtils.GET_USER_PATH}/${params.id}`,
@@ -29,7 +34,7 @@ const UserMaintainPage_Public = () => {
} }
} }
); );
},[]);
};




useEffect(() => { useEffect(() => {
@@ -50,6 +55,7 @@ const UserMaintainPage_Public = () => {
<Grid item xs={12} md={12} lg={12}> <Grid item xs={12} md={12} lg={12}>
<UserInformationCard <UserInformationCard
userData={userData} userData={userData}
loadDataFun={loadData}
/> />
</Grid> </Grid>




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

@@ -13,10 +13,15 @@ export const GET_PUBLIC_USER_PATH = '/user/public';
export const GET_AUTH_LIST = '/user/auth/combo'; export const GET_AUTH_LIST = '/user/auth/combo';
export const GET_USER_COMBO_LIST = '/user/combo'; export const GET_USER_COMBO_LIST = '/user/combo';


export const POST_PUBLIC_USER = apiPath+'/user/public';
export const GET_PUBLIC_USER_LOCK = apiPath+'/user/public/lock';
export const GET_PUBLIC_USER_UNLOCK = apiPath+'/user/public/unlock';
export const GET_PUBLIC_USER_VERiFY = apiPath+'/user/public/verify';



//File Up/Download //File Up/Download
export const FILE_UP_POST = apiPath+'/file/ul'; export const FILE_UP_POST = apiPath+'/file/ul';
export const FILE_DOWN_GET = apiPath+"/dl/{id}/{skey}/{filename}";
export const FILE_DOWN_GET = apiPath+"/file/dl";
//export const FILE_DOWN_GET = ({id,skey,filename})=>{ return apiPath+'/file/dl/'+id+'/'+skey+'/'+filename}; //export const FILE_DOWN_GET = ({id,skey,filename})=>{ return apiPath+'/file/dl/'+id+'/'+skey+'/'+filename};


// POST request // POST request


+ 18
- 14
src/utils/HttpUtils.js View File

@@ -9,35 +9,39 @@ export const get = ({url, onSuccess, onFail, onError}) =>{
}); });
}; };


//TODO
export const put = ({url,params, onSuccess, onFail, onError}) =>{
axios.put(url,params).then(
(response)=>{onResponse(response, onSuccess, onFail);}
).catch(error => {
return handleError(error,onError);
});
};

export const post = ({url, params, onSuccess, onFail, onError}) =>{ export const post = ({url, params, onSuccess, onFail, onError}) =>{
axios.post(url,{
params
}).then(
axios.post(url,params,
{
headers: {
"Content-Type":"application/json"
}
}).then(
(response)=>{onResponse(response, onSuccess, onFail);} (response)=>{onResponse(response, onSuccess, onFail);}
).catch(error => { ).catch(error => {
return handleError(error,onError); return handleError(error,onError);
}); });
}; };


export const fileDownload = ({fileId, skey, filename, onSuccess, onError}) =>{
axios.get(
FILE_DOWN_GET
.replace("{id}",fileId)
.replace("{skey}",skey)
.replace("{filename}", filename),
export const fileDownload = ({fileId, skey, filename, onError}) =>{
axios.get( FILE_DOWN_GET+"/"+fileId+"/"+skey+"/"+filename,
{ {
responseType: 'blob', responseType: 'blob',
} }
).then( ).then(
(response)=>{ (response)=>{
if(onSuccess){
onSuccess(response);
}
const url = URL.createObjectURL(response.data); const url = URL.createObjectURL(response.data);
const a = document.createElement('a'); const a = document.createElement('a');
a.style = 'display: none';
a.href = url; a.href = url;
a.download = 'file.txt';
a.setAttribute("download", filename);
document.body.appendChild(a); document.body.appendChild(a);
a.click(); a.click();
document.body.removeChild(a); document.body.removeChild(a);


Write Preview
Loading…
Cancel
Save