From 5037bb0ecaa908d9f4d489234ee3a23bc684bb0b Mon Sep 17 00:00:00 2001 From: anna Date: Sat, 26 Aug 2023 18:48:16 +0800 Subject: [PATCH] add dateUtils --- .../UserInformationCard_Public.js | 315 ++++++++++-------- src/pages/pnspsUserDetailPage_Public/index.js | 179 ++-------- src/utils/DateUtils.js | 18 + src/utils/HttpUtils.js | 16 +- 4 files changed, 225 insertions(+), 303 deletions(-) create mode 100644 src/utils/DateUtils.js diff --git a/src/pages/pnspsUserDetailPage_Public/UserInformationCard_Public.js b/src/pages/pnspsUserDetailPage_Public/UserInformationCard_Public.js index e35b69f..4cffa56 100644 --- a/src/pages/pnspsUserDetailPage_Public/UserInformationCard_Public.js +++ b/src/pages/pnspsUserDetailPage_Public/UserInformationCard_Public.js @@ -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 &¤tUserData !== 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); - }; - + {/* */} + return ( - !onReady ? - - : -
- - - - Upload success. - - + + @@ -117,12 +110,9 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData}) @@ -138,12 +128,9 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData}) @@ -159,12 +146,9 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData}) @@ -180,12 +164,9 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData}) @@ -201,12 +182,9 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData}) @@ -222,12 +200,9 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData}) @@ -244,10 +219,7 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData}) @@ -266,10 +238,7 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData}) @@ -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}) @@ -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} > @@ -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} /> - - - - - - - Locked: - + - - setLocked(event.target.checked)} - name="checked" - color="primary" - size="small" - /> - - + {/*bottom button*/} + + + + {editMode? + + - + : + <> + {locked? + + + + : + + + + } + + + + + + + + } + + +
diff --git a/src/pages/pnspsUserDetailPage_Public/index.js b/src/pages/pnspsUserDetailPage_Public/index.js index 43fd409..d684d0d 100644 --- a/src/pages/pnspsUserDetailPage_Public/index.js +++ b/src/pages/pnspsUserDetailPage_Public/index.js @@ -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 ? : @@ -98,105 +49,13 @@ const UserMaintainPage_Public = () => { {/*col 2*/} - - {/*bottom button*/} - - - - {editMode? - - - - : - <> - {locked? - - - - : - - - - } - - - - - - - - } - - - - ); }; diff --git a/src/utils/DateUtils.js b/src/utils/DateUtils.js new file mode 100644 index 0000000..caccb2a --- /dev/null +++ b/src/utils/DateUtils.js @@ -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; +} \ No newline at end of file diff --git a/src/utils/HttpUtils.js b/src/utils/HttpUtils.js index 58ae64e..56266a0 100644 --- a/src/utils/HttpUtils.js +++ b/src/utils/HttpUtils.js @@ -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);