alex
/
PNSPS-frontend-MaterialUI
1
0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
Procházet zdrojové kódy

save form & fileDownload

master
Anna Ho před 2 roky
rodič
5037bb0eca
revize
2cf1affccc
5 změnil soubory, kde provedl 223 přidání a 94 odebrání
Rozdělené zobrazení
Diff Options
Zobrazit statistiky Stáhněte soubor opravy Stáhněte rozdílový soubor
  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 Zobrazit soubor

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


+ 189
- 78
src/pages/pnspsUserDetailPage_Public/UserInformationCard_Public.js Zobrazit soubor

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

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

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


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

const [currentUserData, setCurrentUserData] = useState(userData);
const [editMode, setEditMode] = useState(false);
@@ -30,17 +32,91 @@ const UserInformationCard_Public = ({userData}) => {
let createDate = DateUtils.datetimeStr(userData.created);
let modifiedBy = DateUtils.datetimeStr(userData.modified)+", "+userData.modifiedBy;
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);
}, [userData]);

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


function onSubmitForm(_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 = () => {
@@ -48,11 +124,21 @@ const UserInformationCard_Public = ({userData}) => {
};

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

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

<Grid item xs={7} s={7} md={7} lg={6}>
<Grid item xs={2}>
<TextField
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>
@@ -250,20 +343,45 @@ const UserInformationCard_Public = ({userData}) => {
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
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>

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

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


+ 7
- 1
src/pages/pnspsUserDetailPage_Public/index.js Zobrazit soubor

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

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

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


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



+ 6
- 1
src/utils/ApiPathConst.js Zobrazit soubor

@@ -13,10 +13,15 @@ export const GET_PUBLIC_USER_PATH = '/user/public';
export const GET_AUTH_LIST = '/user/auth/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
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};

// POST request


+ 18
- 14
src/utils/HttpUtils.js Zobrazit soubor

@@ -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}) =>{
axios.post(url,{
params
}).then(
axios.post(url,params,
{
headers: {
"Content-Type":"application/json"
}
}).then(
(response)=>{onResponse(response, onSuccess, onFail);}
).catch(error => {
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',
}
).then(
(response)=>{
if(onSuccess){
onSuccess(response);
}
const url = URL.createObjectURL(response.data);
const a = document.createElement('a');
a.style = 'display: none';
a.href = url;
a.download = 'file.txt';
a.setAttribute("download", filename);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);


Zapsat Náhled
Načítá se…
Zrušit
Uložit