From fc260bf1650fe1e4056a4d585c9a2a303b8986bb Mon Sep 17 00:00:00 2001
From: anna <anna.ho@2fi-solutions.com.hk>
Date: Fri, 25 Aug 2023 18:00:17 +0800
Subject: [PATCH] add button

---
 .../UserInformationCard_Public.js             | 289 ++++++++++++------
 src/pages/pnspsUserDetailPage_Public/index.js |  96 +++++-
 src/utils/ApiPathConst.js                     |   3 +-
 src/utils/HttpUtils.js                        |  26 +-
 4 files changed, 304 insertions(+), 110 deletions(-)

diff --git a/src/pages/pnspsUserDetailPage_Public/UserInformationCard_Public.js b/src/pages/pnspsUserDetailPage_Public/UserInformationCard_Public.js
index 6ec92c1..e35b69f 100644
--- a/src/pages/pnspsUserDetailPage_Public/UserInformationCard_Public.js
+++ b/src/pages/pnspsUserDetailPage_Public/UserInformationCard_Public.js
@@ -70,11 +70,7 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData})
         HttpFileDownload({
             fileId: 1,
             skey: "W6biVNvk50YVC2T6",
-            filename: "idCardSample.jpg",
-            onSuccess: function(response){
-                console.log(response);
-                setOpen(true);
-            }
+            filename: "idCardSample.jpg"
         });
     };
 
@@ -96,13 +92,22 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData})
                 </Typography>
 
                 <form>
+                                <input
+                accept="image/*"
+                //className={classes.input}
+                id="contained-button-file"
+                multiple
+                type="file"
+                onChange={uploadFile}
+                style={{display: 'none'}}
+            />
                     <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
                         <Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
                             Upload success.
                         </Alert>
                     </Snackbar>
-                    <Grid container>
-                        <Grid sm={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                    <Grid container spacing={1}>
+                        <Grid item lg={4} >
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
                                       sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
@@ -123,81 +128,70 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData})
                             </Grid>
                         </Grid>
 
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                        <Grid item lg={4} >
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
                                       sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                    ID Type:
+                                    English Name:
                                 </Grid>
 
                                 <Grid item xs={7} s={7} md={7} lg={6}>
                                     <TextField
                                         fullWidth
-                                        {...register("idDocType",
-                                        {
-                                            value: currentUserData.idDocType,
-                                        })}
-                                        id='idDocType'
-                                        disabled
+                                        {...register("enName",
+                                            {
+                                                value: currentUserData.enName,
+                                            })}
+                                        id='enName'
+                                        disabled={readOnly}
                                     />
                                 </Grid>
                             </Grid>
                         </Grid>
 
-
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                        <Grid item lg={4} >
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
                                       sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                    Identification No.:
+                                    Created Date:
                                 </Grid>
 
                                 <Grid item xs={7} s={7} md={7} lg={6}>
                                     <TextField
                                         fullWidth
-                                        {...register("identification",
-                                        {
-                                            value: currentUserData.identification,
-                                        })}
-                                        id='identification'
-                                        disabled
+                                        {...register("createDate",
+                                            {
+                                                value: currentUserData.createDate,
+                                            })}
+                                        id='createDate'
+                                        disabled={readOnly}
                                     />
                                 </Grid>
                             </Grid>
                         </Grid>
 
-            <input
-                accept="image/*"
-                //className={classes.input}
-                id="contained-button-file"
-                multiple
-                type="file"
-                onChange={uploadFile}
-            />
-                        <Button variant="contained" onClick={downloadFile} >View Identification File</Button>
-
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                        <Grid item lg={4} >
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
                                       sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                    English Name:
+                                    Prefix:
                                 </Grid>
 
                                 <Grid item xs={7} s={7} md={7} lg={6}>
                                     <TextField
                                         fullWidth
-                                        {...register("enName",
+                                        {...register("prefix",
                                             {
-                                                value: currentUserData.enName,
+                                                value: currentUserData.prefix,
                                             })}
-                                        id='enName'
+                                        id='prefix'
                                         disabled={readOnly}
                                     />
                                 </Grid>
                             </Grid>
                         </Grid>
 
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                        <Grid item lg={4} >
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
                                       sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
@@ -218,134 +212,184 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData})
                             </Grid>
                         </Grid>
 
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                        <Grid item lg={4} >
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
                                       sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                    Chinese Name:
+                                    Last Updated:
                                 </Grid>
 
                                 <Grid item xs={7} s={7} md={7} lg={6}>
                                     <TextField
                                         fullWidth
-                                        {...register("chName",
+                                        {...register("lastUpdate",
                                             {
-                                                value: currentUserData.chName,
+                                                value: currentUserData.lastUpdate,
                                             })}
-                                        id='chName'
+                                        id='lastUpdate'
                                         disabled={readOnly}
                                     />
                                 </Grid>
                             </Grid>
                         </Grid>
 
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+
+                        <Grid item lg={4}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
                                       sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                    Country:
+                                    ID Type:
                                 </Grid>
 
                                 <Grid item xs={7} s={7} md={7} lg={6}>
-
-                                      <Select
-                                             fullWidth
-                                             {...register("country",
-                                                 {
-                                                     value: currentUserData.country,
-                                                 })}
-                                             id='country'
-                                             disabled={readOnly}
-                                        >
-                                        </Select>
+                                    <TextField
+                                        fullWidth
+                                        {...register("idDocType",
+                                        {
+                                            value: currentUserData.idDocType,
+                                        })}
+                                        id='idDocType'
+                                        disabled
+                                    />
                                 </Grid>
                             </Grid>
                         </Grid>
 
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+
+                        <Grid item lg={4}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
                                       sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                    Address:
+                                    Contact Tel:
                                 </Grid>
 
-                                <Grid item xs={7} s={7} md={12} lg={6}>
+                                <Grid item xs={7} s={7} md={7} lg={6}>
                                     <TextField
                                         fullWidth
-                                        {...register("addressLine1",
-                                            {
-                                                value: currentUserData.address?.addressLine1,
-                                            })}
-                                        id='addressLine1'
-                                        disabled={readOnly}
+                                        {...register("contactTel",
+                                        {
+                                            value: currentUserData.contactTel,
+                                        })}
+                                        id='contactTel'
+                                        disabled
                                     />
                                 </Grid>
                             </Grid>
                         </Grid>
 
-                        <Grid sm={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                        <Grid item lg={4}>
                             <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("addressLine2",
-                                            {
-                                                value: currentUserData.address?.addressLine2,
-                                            })}
-                                        id='addressLine2'
+                                        {...register("todo",
+                                        {
+                                            value: currentUserData.todo,
+                                        })}
+                                        id='todo'
                                         disabled
                                     />
                                 </Grid>
                             </Grid>
                         </Grid>
-                         <Grid sm={12} sx={{ml: 3, mr: 3, mb: 3}}>
+
+
+                        <Grid item lg={4}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
                                       sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                    
+                                    ID No.:
                                 </Grid>
 
-                                <Grid item xs={7} s={7} md={7} lg={6}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("addressLine3",
-                                            {
-                                                value: currentUserData.address?.addressLine3,
-                                            })}
-                                        id='addressLine3'
+                                <Grid item xs={7} s={7} md={7} lg={6} >
+                                    <TextField     
+                                        {...register("identification",
+                                        {
+                                            value: currentUserData.identification,
+                                        })}
+                                        id='identification'
                                         disabled
                                     />
+                                     <Button lg={2} variant="contained" onClick={downloadFile} >View File</Button>
                                 </Grid>
                             </Grid>
                         </Grid>
 
+                        <Grid item lg={4}>
+                            <Grid container alignItems={"center"}>
+                                <Grid item xs={4} s={4} md={4} lg={4}
+                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
+                                    Fax No.:
+                                </Grid>
 
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                                <Grid item xs={7} s={7} md={7} lg={6}>
+
+                                      <Select
+                                             fullWidth
+                                             {...register("fax",
+                                                 {
+                                                     value: currentUserData.fax,
+                                                 })}
+                                             id='fax'
+                                             disabled={readOnly}
+                                        >
+                                        </Select>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+
+                        <Grid item lg={4}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
                                       sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                    Post:
+                                    Last Login:
                                 </Grid>
 
                                 <Grid item xs={7} s={7} md={7} lg={6}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("post",
-                                            {
-                                                value: currentUserData.post,
-                                            })}
-                                        id='post'
-                                    />
+
+                                      <TextField
+                                             fullWidth
+                                             {...register("lastLogin",
+                                                 {
+                                                     value: currentUserData.lastLogin,
+                                                 })}
+                                             id='lastLogin'
+                                             disabled
+                                        >
+                                        </TextField>
                                 </Grid>
                             </Grid>
                         </Grid>
 
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                        <Grid item lg={4}>
+                            <Grid container alignItems={"center"}>
+                                <Grid item xs={4} s={4} md={4} lg={4}
+                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
+                                    Country:
+                                </Grid>
+
+                                <Grid item xs={7} s={7} md={7} lg={6}>
+
+                                      <Select
+                                             fullWidth
+                                             {...register("country",
+                                                 {
+                                                     value: currentUserData.country,
+                                                 })}
+                                             id='country'
+                                             disabled={readOnly}
+                                        >
+                                        </Select>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+
+                        <Grid item lg={4}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
                                       sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
@@ -365,27 +409,70 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData})
                             </Grid>
                         </Grid>
 
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                        <Grid item lg={4}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
                                       sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                    Phone:
+                                    Status:
                                 </Grid>
 
                                 <Grid item xs={7} s={7} md={7} lg={6}>
                                     <TextField
                                         fullWidth
-                                        {...register("phone1",
+                                        {...register("status",
+                                            {
+                                                value: currentUserData.status,
+                                            })}
+                                        id='status'
+                                    />
+                                </Grid>
+                            </Grid>
+                        </Grid>
+
+
+                        <Grid item lg={4}>
+                            <Grid container alignItems={"center"}>
+                                <Grid item xs={4} s={4} md={4} lg={4}
+                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center top'}}>
+                                    Address:
+                                </Grid>
+
+                                <Grid item xs={7} s={7} md={12} lg={6}>
+                                    <TextField
+                                        fullWidth
+                                        {...register("addressLine1",
+                                            {
+                                                value: currentUserData.address?.addressLine1,
+                                            })}
+                                        id='addressLine1'
+                                        disabled={readOnly}
+                                    />
+                                    <TextField
+                                        fullWidth
+                                        {...register("addressLine2",
+                                            {
+                                                value: currentUserData.address?.addressLine2,
+                                            })}
+                                        id='addressLine2'
+                                        disabled={readOnly}
+                                    />
+                                    <TextField
+                                        fullWidth
+                                        {...register("addressLine3",
                                             {
-                                                value: currentUserData.phone1,
+                                                value: currentUserData.address?.addressLine3,
                                             })}
-                                        id='phone1'
+                                        id='addressLine3'
+                                        disabled
                                     />
                                 </Grid>
                             </Grid>
                         </Grid>
 
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                        
+                        
+
+                        <Grid item lg={4}>
                             <Grid container>
                                 <Grid item xs={4} s={4} md={4} lg={4}
                                       sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
diff --git a/src/pages/pnspsUserDetailPage_Public/index.js b/src/pages/pnspsUserDetailPage_Public/index.js
index cf1309c..43fd409 100644
--- a/src/pages/pnspsUserDetailPage_Public/index.js
+++ b/src/pages/pnspsUserDetailPage_Public/index.js
@@ -24,15 +24,34 @@ const UserMaintainPage_Public = () => {
     const [editedCustomerData, setEditedCustomerData] = useState({});
     const [userConfirm, setUserConfirm] = useState(false);
 
+    const [editMode, setEditMode] = useState(false);
+    const [locked, setLocked] = useState(false);
+
+
     function updateUserObject(userData) {
         setEditedCustomerData(userData);
     }
 
     const submitData = () => {
         setUserConfirm(true);
+        setEditMode(false);
         setIsCollectData(!isCollectData);
     }
 
+    const onEditClick = () => {
+        setEditMode(true);
+    };
+
+    const doLock = () => {
+        setLocked(true);
+    };
+
+    const doUnlock = () => {
+        setLocked(false);
+    };
+
+
+
     useEffect(() => {
         console.log(params)
         // HttpGet({
@@ -72,10 +91,10 @@ const UserMaintainPage_Public = () => {
             :
             <Grid container rowSpacing={4.5} columnSpacing={2.75}>
                 <Grid item xs={12} sx={{mb: -2.25}}>
-                    <Typography variant="h5">Maintain User</Typography>
+                    <Typography variant="h5">Public User</Typography>
                 </Grid>
                 {/*col 1*/}
-                <Grid item xs={12} md={5} lg={5}>
+                <Grid item xs={12} >
                     <Grid container>
                         <Grid item xs={12} md={12} lg={12}>
                             <UserInformationCard
@@ -92,24 +111,95 @@ const UserMaintainPage_Public = () => {
                 {/*bottom button*/}
                 <Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"end"} justifyContent="center">
                     <Grid container maxWidth justifyContent="flex-end">
+                         
+                    {editMode?
+                        <Grid item sx={{ml: 3, mr: 3}}>
+                                            <Button
+                                                size="large"
+                                                variant="contained"
+                                                type="submit"
+                                                sx={{
+                                                    textTransform: 'capitalize',
+                                                    alignItems: 'end'
+                                                }}
+                                                onClick={submitData}
+                                            >
+                                                Save
+                                            </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={doUnlock}
+                            >
+                                Unlock
+                            </Button>
+                        </Grid>
+                        :
+                        <Grid item sx={{ml: 3, mr: 3}}>
+                            <Button
+                                size="large"
+                                variant="contained"
+                                type="submit"
+                                color="primary"
+                                sx={{
+                                    textTransform: 'capitalize',
+                                    alignItems: 'end'
+                                }}
+                                onClick={doLock}
+                            >
+                                Lock
+                            </Button>
+                        </Grid>
+                        }
+                        <Grid item sx={{ml: 3, mr: 3}}>
+                            <Button
+                                size="large"
+                                variant="contained"
+                                type="submit"
+                                color="success"
                                 sx={{
                                     textTransform: 'capitalize',
                                     alignItems: 'end'
                                 }}
                                 onClick={submitData}
                             >
-                                Save User
+                                Vet
+                            </Button>
+                        </Grid>
+                        <Grid item sx={{ml: 3, mr: 3}}>
+                            <Button
+                                size="large"
+                                variant="contained"
+                                type="submit"
+                                sx={{
+                                    textTransform: 'capitalize',
+                                    alignItems: 'end'
+                                }}
+                                onClick={onEditClick}
+                            >
+                                Edit
                             </Button>
                         </Grid>
+                        </>
+                    }
+                    
+                        
                     </Grid>
                 </Grid>
             </Grid>
     );
 };
 
+
 export default UserMaintainPage_Public;
diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js
index 9f0d626..53e04ac 100644
--- a/src/utils/ApiPathConst.js
+++ b/src/utils/ApiPathConst.js
@@ -16,7 +16,8 @@ export const GET_USER_COMBO_LIST = '/user/combo';
 
 //File Up/Download
 export const FILE_UP_POST = apiPath+'/file/ul';
-export const FILE_DOWN_GET = apiPath+'/file/dl/{id}/{skey}/{filename}';
+export const FILE_DOWN_GET = apiPath+"/dl/{id}/{skey}/{filename}";
+//export const FILE_DOWN_GET = ({id,skey,filename})=>{ return apiPath+'/file/dl/'+id+'/'+skey+'/'+filename};
 
 // POST request
 //Login
diff --git a/src/utils/HttpUtils.js b/src/utils/HttpUtils.js
index 5474ea4..58ae64e 100644
--- a/src/utils/HttpUtils.js
+++ b/src/utils/HttpUtils.js
@@ -9,14 +9,30 @@ export const HttpGet = ({url, onSuccess, onFail, onError}) =>{
     });
 };
 
-export const HttpFileDownload = ({fileId, skey, filename, onSuccess, onFail, onError}) =>{
+export const HttpFileDownload = ({fileId, skey, filename, onSuccess, onError}) =>{
     axios.get(
         FILE_DOWN_GET
-        .replace("{id}",fileId)
-        .replace("{skey}",skey)
-        .replace("{filename}", filename)
+                .replace("{id}",fileId)
+                .replace("{skey}",skey)
+                .replace("{filename}", filename),
+        {
+            responseType: 'blob',
+        }
     ).then(
-        (response)=>{onResponse(response, onSuccess, onFail);}
+        (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';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        }
     ).catch(error => {
         return handleError(error,onError);
     });