alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Toiminta
Selaa lähdekoodia

add dateUtils

master
Anna Ho 2 vuotta sitten
vanhempi
704ffafa57
commit
5037bb0eca
4 muutettua tiedostoa jossa 225 lisäystä ja 303 poistoa
Jaettu näkymä
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 Näytä tiedosto

@@ -1,88 +1,94 @@
// material-ui
import {
Grid, TextField, Typography, Select, Button, Snackbar, Alert
Grid, TextField, Typography, Select, Button
} from '@mui/material';
import MainCard from "../../components/MainCard";
import * as React from "react";
import {useForm} from "react-hook-form";
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";

// ==============================|| 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 [onReady, setOnReady] = useState(false);
const {register, getValues} = useForm()


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

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]);

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]);

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

:
<>
{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>

</form>
</MainCard>


+ 19
- 160
src/pages/pnspsUserDetailPage_Public/index.js Näytä tiedosto

@@ -1,92 +1,43 @@
// material-ui
import {
Button,
Grid, Typography
} from '@mui/material';
import {Grid, Typography} from '@mui/material';
import {useEffect, useState} 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 {useParams} from "react-router-dom";
import UserInformationCard from "./UserInformationCard_Public";
import LoadingComponent from "../extra-pages/LoadingComponent";
import {GET_USER_PATH} from "../../utils/ApiPathConst";
import * as UrlUtils from "../../utils/ApiPathConst";

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


const UserMaintainPage_Public = () => {
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(() => {
if(userConfirm && onReady){
console.log("update in parents");
console.log(editedCustomerData);
}
setUserConfirm(false);
}, [editedCustomerData]);
setLoding(false);
}, [userData]);

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

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


+ 18
- 0
src/utils/DateUtils.js Näytä tiedosto

@@ -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 Näytä tiedosto

@@ -1,7 +1,7 @@
import axios from "axios";
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(
(response)=>{onResponse(response, onSuccess, onFail);}
).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(
FILE_DOWN_GET
.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();
formData.append("multipartFile", file);
formData.append("refType", refType);


Kirjoita Esikatselu
Ladataan…
Peruuta
Tallenna