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

add dateUtils

master
Anna Ho 2 years ago
parent
704ffafa57
commit
5037bb0eca
4 changed files with 225 additions and 303 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +175
    -140
      src/pages/pnspsUserDetailPage_Public/UserInformationCard_Public.js
  2. +19
    -160
      src/pages/pnspsUserDetailPage_Public/index.js
  3. +18
    -0
      src/utils/DateUtils.js
  4. +13
    -3
      src/utils/HttpUtils.js

+ 175
- 140
src/pages/pnspsUserDetailPage_Public/UserInformationCard_Public.js View File

@@ -1,88 +1,94 @@
// material-ui // material-ui
import { import {
Grid, TextField, Typography, Select, Button, Snackbar, Alert
Grid, TextField, Typography, Select, 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";
import {useForm} from "react-hook-form"; import {useForm} from "react-hook-form";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import Checkbox from "@mui/material/Checkbox";
import LoadingComponent from "../extra-pages/LoadingComponent";
//import Checkbox from "@mui/material/Checkbox";
//import LoadingComponent from "../extra-pages/LoadingComponent";
import * as DateUtils from '../../utils/DateUtils';
import * as HttpUtils from '../../utils/HttpUtils';


import { HttpFileDownload,HttpFileUpload } from 'utils/HttpUtils';
//import {useParams} from "react-router-dom"; //import {useParams} from "react-router-dom";


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




const UserInformationCard_Public = ({isCollectData, updateUserObject,userData}) => {
const UserInformationCard_Public = ({userData}) => {


const readOnly = true;

//const params = useParams();
const [currentUserData, setCurrentUserData] = React.useState({});
const [currentUserData, setCurrentUserData] = useState(userData);
const [editMode, setEditMode] = useState(false);
const [locked, setLocked] = useState(false); const [locked, setLocked] = useState(false);
const [onReady, setOnReady] = useState(false);
const {register, getValues} = useForm()


const from = useForm({defaultValues: userData});
const {register,reset, handleSubmit} = from;


useEffect(() => { useEffect(() => {
//if user data from parent are not null
if (Object.keys(userData).length > 0 && userData !== undefined) {
setCurrentUserData(userData.data);
}
let createDate = DateUtils.datetimeStr(userData.created);
let modifiedBy = DateUtils.datetimeStr(userData.modified)+", "+userData.modifiedBy;
userData["createDate"] = createDate;
userData["modifiedBy"] = modifiedBy;
setCurrentUserData(userData);
}, [userData]); }, [userData]);


useEffect(() => { useEffect(() => {
//if state data are ready and assign to different field
if (Object.keys(userData).length > 0 &&currentUserData !== undefined) {
setLocked(currentUserData.locked);
setOnReady(true);

}
reset(currentUserData);
}, [currentUserData]); }, [currentUserData]);


useEffect(() => {
//upload latest data to parent
const values = getValues();
const objectData ={
...values,
locked: locked,
}
updateUserObject(objectData);
}, [isCollectData]);


const uploadFile = (event)=>{
HttpFileUpload(
{
refType:"identification",
refId: currentUserData.id,
file: event.target.files[0],
onSuccess: (response)=>{
console.log(response);
setOpen(true);
}
}
);

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

const onEditClick = () => {
setEditMode(true);
};

const doLock = () => {
setLocked(true);
};

const doUnlock = () => {
setLocked(false);
}; };



// const uploadFile = (event)=>{
// HttpUtils.fileUpload(
// {
// refType:"identification",
// refId: currentUserData.id,
// file: event.target.files[0],
// onSuccess: (response)=>{
// console.log(response);
// setOpen(true);
// }
// }
// );
// };

const downloadFile = ()=>{ const downloadFile = ()=>{
HttpFileDownload({
HttpUtils.fileDownload({
fileId: 1, fileId: 1,
skey: "W6biVNvk50YVC2T6", skey: "W6biVNvk50YVC2T6",
filename: "idCardSample.jpg" filename: "idCardSample.jpg"
}); });
}; };


const [open, setOpen] = React.useState(false);
const handleClose = () => {
setOpen(false);
};
{/* <input
accept="image/*"
//className={classes.input}
id="contained-button-file"
multiple
type="file"
onChange={uploadFile}
style={{display: 'none'}}
/> */}

return ( return (
!onReady ?
<LoadingComponent/>
:
<MainCard elevation={0} <MainCard elevation={0}
border={false} border={false}
content={false} content={false}
@@ -91,21 +97,8 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData})
Information Information
</Typography> </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>
<form onSubmit={handleSubmit(onSubmitForm)}>
<Grid container spacing={1}> <Grid container spacing={1}>
<Grid item lg={4} > <Grid item lg={4} >
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
@@ -117,12 +110,9 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,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("userName",
{
value: currentUserData.username,
})}
id='username' id='username'
disabled disabled
{...register("username")}
/> />
</Grid> </Grid>
</Grid> </Grid>
@@ -138,12 +128,9 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,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("enName",
{
value: currentUserData.enName,
})}
{...register("enName")}
id='enName' id='enName'
disabled={readOnly}
disabled={!editMode}
/> />
</Grid> </Grid>
</Grid> </Grid>
@@ -159,12 +146,9 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,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("createDate",
{
value: currentUserData.createDate,
})}
{...register("createDate")}
id='createDate' id='createDate'
disabled={readOnly}
disabled={!editMode}
/> />
</Grid> </Grid>
</Grid> </Grid>
@@ -180,12 +164,9 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,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("prefix",
{
value: currentUserData.prefix,
})}
{...register("prefix")}
id='prefix' id='prefix'
disabled={readOnly}
disabled={!editMode}
/> />
</Grid> </Grid>
</Grid> </Grid>
@@ -201,12 +182,9 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,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("chName",
{
value: currentUserData.chName,
})}
{...register("chName")}
id='chName' id='chName'
disabled={readOnly}
disabled={!editMode}
/> />
</Grid> </Grid>
</Grid> </Grid>
@@ -222,12 +200,9 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,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("lastUpdate",
{
value: currentUserData.lastUpdate,
})}
id='lastUpdate'
disabled={readOnly}
{...register("modifiedBy")}
id='modifiedBy'
disabled={!editMode}
/> />
</Grid> </Grid>
</Grid> </Grid>
@@ -244,10 +219,7 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,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("idDocType",
{
value: currentUserData.idDocType,
})}
{...register("idDocType")}
id='idDocType' id='idDocType'
disabled disabled
/> />
@@ -266,10 +238,7 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,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("contactTel",
{
value: currentUserData.contactTel,
})}
{...register("contactTel")}
id='contactTel' id='contactTel'
disabled disabled
/> />
@@ -289,7 +258,7 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData})
fullWidth fullWidth
{...register("todo", {...register("todo",
{ {
value: currentUserData.todo,
value: currentUserData?.todo,
})} })}
id='todo' id='todo'
disabled disabled
@@ -310,7 +279,7 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData})
<TextField <TextField
{...register("identification", {...register("identification",
{ {
value: currentUserData.identification,
value: currentUserData?.identification,
})} })}
id='identification' id='identification'
disabled disabled
@@ -333,10 +302,10 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData})
fullWidth fullWidth
{...register("fax", {...register("fax",
{ {
value: currentUserData.fax,
value: currentUserData?.fax,
})} })}
id='fax' id='fax'
disabled={readOnly}
disabled={!editMode}
> >
</Select> </Select>
</Grid> </Grid>
@@ -356,7 +325,7 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData})
fullWidth fullWidth
{...register("lastLogin", {...register("lastLogin",
{ {
value: currentUserData.lastLogin,
value: currentUserData?.lastLogin,
})} })}
id='lastLogin' id='lastLogin'
disabled disabled
@@ -379,10 +348,10 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData})
fullWidth fullWidth
{...register("country", {...register("country",
{ {
value: currentUserData.country,
value: currentUserData?.country,
})} })}
id='country' id='country'
disabled={readOnly}
disabled={!editMode}
> >
</Select> </Select>
</Grid> </Grid>
@@ -401,7 +370,7 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData})
fullWidth fullWidth
{...register("email", {...register("email",
{ {
value: currentUserData.email,
value: currentUserData?.email,
})} })}
id='email' id='email'
/> />
@@ -421,7 +390,7 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData})
fullWidth fullWidth
{...register("status", {...register("status",
{ {
value: currentUserData.status,
value: currentUserData?.status,
})} })}
id='status' id='status'
/> />
@@ -442,25 +411,25 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData})
fullWidth fullWidth
{...register("addressLine1", {...register("addressLine1",
{ {
value: currentUserData.address?.addressLine1,
value: currentUserData?.address?.addressLine1,
})} })}
id='addressLine1' id='addressLine1'
disabled={readOnly}
disabled={!editMode}
/> />
<TextField <TextField
fullWidth fullWidth
{...register("addressLine2", {...register("addressLine2",
{ {
value: currentUserData.address?.addressLine2,
value: currentUserData?.address?.addressLine2,
})} })}
id='addressLine2' id='addressLine2'
disabled={readOnly}
disabled={!editMode}
/> />
<TextField <TextField
fullWidth fullWidth
{...register("addressLine3", {...register("addressLine3",
{ {
value: currentUserData.address?.addressLine3,
value: currentUserData?.address?.addressLine3,
})} })}
id='addressLine3' id='addressLine3'
disabled disabled
@@ -469,29 +438,95 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData})
</Grid> </Grid>
</Grid> </Grid>



<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'}}>
Locked:
</Grid>
</Grid>


<Grid item xs={7} s={7} md={7} lg={6}>
<Checkbox
checked={locked}
onChange={(event) => setLocked(event.target.checked)}
name="checked"
color="primary"
size="small"
/>
</Grid>
</Grid>
{/*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'
}}
>
Save
</Button>
</Grid> </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'
}}
>
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>


</form> </form>
</MainCard> </MainCard>


+ 19
- 160
src/pages/pnspsUserDetailPage_Public/index.js View File

@@ -1,92 +1,43 @@
// material-ui // material-ui
import {
Button,
Grid, Typography
} from '@mui/material';
import {Grid, Typography} from '@mui/material';
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import * as React from "react"; import * as React from "react";
import axios from "axios";
//import {HttpGet} from "../../utils/HttpUtils";
//import axios from "axios";
import * as HttpUtils from "../../utils/HttpUtils";
import {apiPath} from "../../auth/utils"; import {apiPath} from "../../auth/utils";
import {useParams} from "react-router-dom"; import {useParams} from "react-router-dom";
import UserInformationCard from "./UserInformationCard_Public"; import UserInformationCard from "./UserInformationCard_Public";
import LoadingComponent from "../extra-pages/LoadingComponent"; import LoadingComponent from "../extra-pages/LoadingComponent";
import {GET_USER_PATH} from "../../utils/ApiPathConst";
import * as UrlUtils from "../../utils/ApiPathConst";


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




const UserMaintainPage_Public = () => { const UserMaintainPage_Public = () => {
const params = useParams(); const params = useParams();
const [userData, setUserData] = useState({});
const [onReady, setOnReady] = useState(false);
const [isCollectData, setIsCollectData] = useState(false);
const [editedCustomerData, setEditedCustomerData] = useState({});
const [userConfirm, setUserConfirm] = useState(false);
const [userData, setUserData] = useState({})
const [isLoading, setLoding] = useState(true);


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({
// url: `${apiPath}${GET_USER_PATH}/${params.id}`,
// onSuccess: (response)=>{
// setUserData(response.data);
// }
// });

axios.get(`${apiPath}${GET_USER_PATH}/${params.id}`)
.then((response) => {
if (response.status === 200) {
setUserData(response.data);
useEffect(()=>{
console.log(userData);
HttpUtils.get(
{
url: `${apiPath}${UrlUtils.GET_USER_PATH}/${params.id}`,
onSuccess: function(response){
setUserData(response.data)
} }
})
.catch(error => {
console.log(error);
return false;
});
}, []);
}
);
},[]);


useEffect(() => {
setOnReady(true);
}, [userData]);


useEffect(() => { useEffect(() => {
if(userConfirm && onReady){
console.log("update in parents");
console.log(editedCustomerData);
}
setUserConfirm(false);
}, [editedCustomerData]);
setLoding(false);
}, [userData]);


return ( return (
!onReady ?
isLoading ?
<LoadingComponent/> <LoadingComponent/>
: :
<Grid container rowSpacing={4.5} columnSpacing={2.75}> <Grid container rowSpacing={4.5} columnSpacing={2.75}>
@@ -98,105 +49,13 @@ const UserMaintainPage_Public = () => {
<Grid container> <Grid container>
<Grid item xs={12} md={12} lg={12}> <Grid item xs={12} md={12} lg={12}>
<UserInformationCard <UserInformationCard
updateUserObject={updateUserObject}
userData={userData} userData={userData}
isCollectData={isCollectData}
/> />
</Grid> </Grid>


</Grid> </Grid>
</Grid> </Grid>
{/*col 2*/} {/*col 2*/}

{/*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}
>
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> </Grid>
); );
}; };


+ 18
- 0
src/utils/DateUtils.js View File

@@ -0,0 +1,18 @@
import dayjs from 'dayjs';

export const datetimeStr = (date) =>{
date = convertToDate(date);
return dayjs(date).format("DD-MM-YYYY HH:mm:ss")
};

export const dateStr = (date) =>{
date = convertToDate(date);
return dayjs(date).format("DD-MM-YYYY")
};

const convertToDate = (date)=>{
if(Array.isArray(date)){
return new Date(date[0],date[1],date[2],date[3],date[4],date[5]);
}
return date;
}

+ 13
- 3
src/utils/HttpUtils.js View File

@@ -1,7 +1,7 @@
import axios from "axios"; import axios from "axios";
import {FILE_UP_POST, FILE_DOWN_GET} from "../utils/ApiPathConst"; import {FILE_UP_POST, FILE_DOWN_GET} from "../utils/ApiPathConst";


export const HttpGet = ({url, onSuccess, onFail, onError}) =>{
export const get = ({url, onSuccess, onFail, onError}) =>{
axios.get(url).then( axios.get(url).then(
(response)=>{onResponse(response, onSuccess, onFail);} (response)=>{onResponse(response, onSuccess, onFail);}
).catch(error => { ).catch(error => {
@@ -9,7 +9,17 @@ export const HttpGet = ({url, onSuccess, onFail, onError}) =>{
}); });
}; };


export const HttpFileDownload = ({fileId, skey, filename, onSuccess, onError}) =>{
export const post = ({url, params, onSuccess, onFail, onError}) =>{
axios.post(url,{
params
}).then(
(response)=>{onResponse(response, onSuccess, onFail);}
).catch(error => {
return handleError(error,onError);
});
};

export const fileDownload = ({fileId, skey, filename, onSuccess, onError}) =>{
axios.get( axios.get(
FILE_DOWN_GET FILE_DOWN_GET
.replace("{id}",fileId) .replace("{id}",fileId)
@@ -38,7 +48,7 @@ export const HttpFileDownload = ({fileId, skey, filename, onSuccess, onError}) =
}); });
}; };


export const HttpFileUpload = ({ refType, refId, file,refCode, onSuccess, onFail, onError}) =>{
export const fileUpload = ({ refType, refId, file,refCode, onSuccess, onFail, onError}) =>{
var formData = new FormData(); var formData = new FormData();
formData.append("multipartFile", file); formData.append("multipartFile", file);
formData.append("refType", refType); formData.append("refType", refType);


Write Preview
Loading…
Cancel
Save