From cbc8eb2c900f7070fa51eb385561538c4d31b6e0 Mon Sep 17 00:00:00 2001
From: Alex Cheung <alex.cheung@2fi-solutions.com.hk>
Date: Wed, 12 Jun 2024 13:43:18 +0800
Subject: [PATCH] update dashboard loading

---
 .../GLDUserProfile/UserInformationCard.js     |  25 ++
 src/pages/dashboard/Public/Message.js         |  40 +---
 src/pages/dashboard/Public/Notice.js          |  15 +-
 src/pages/dashboard/Public/index.js           | 222 +++++++++++++-----
 4 files changed, 201 insertions(+), 101 deletions(-)

diff --git a/src/pages/User/GLDUserProfile/UserInformationCard.js b/src/pages/User/GLDUserProfile/UserInformationCard.js
index 873cae7..a86d350 100644
--- a/src/pages/User/GLDUserProfile/UserInformationCard.js
+++ b/src/pages/User/GLDUserProfile/UserInformationCard.js
@@ -13,6 +13,7 @@ import * as React from "react";
 import {useEffect, useState} from "react";
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
+import { dateStr } from 'utils/DateUtils';
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 
 
@@ -149,6 +150,30 @@ const UserInformationCard = ({userData}) => {
                                 </Grid>
                             </Grid>
                         </Grid>
+                        
+                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                            <Grid container alignItems={"center"}>
+                                <Grid item xs={4} s={4} md={4} lg={4}
+                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
+                                    <FormLabel>Password Expiry Date:</FormLabel>
+                                </Grid>
+
+                                <Grid item xs={7} s={7} md={7} lg={6}>
+                                    <FormControl variant="outlined" fullWidth>
+                                        <OutlinedInput
+                                            fullWidth
+                                            size="small"
+                                            value={dateStr(currentUserData.passwordExpiryDate)}
+                                            disabled={true}
+                                            // {...register("emailAddress",
+                                            //     {
+                                            //     })}
+                                            id='passwordExpiryDate'
+                                        />
+                                    </FormControl>
+                                </Grid>
+                            </Grid>
+                        </Grid>
 
                     </Grid>
 
diff --git a/src/pages/dashboard/Public/Message.js b/src/pages/dashboard/Public/Message.js
index 8d13377..1d964b5 100644
--- a/src/pages/dashboard/Public/Message.js
+++ b/src/pages/dashboard/Public/Message.js
@@ -1,49 +1,35 @@
 // material-ui
 import {
     Stack,
-    Typography,
-    Button
+    // Typography,
+    // Button
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import * as React from "react";
-import * as HttpUtils from "utils/HttpUtils";
-import * as UrlUtils from "utils/ApiPathConst";
-import * as DateUtils from "utils/DateUtils";
+// import * as HttpUtils from "utils/HttpUtils";
+// import * as UrlUtils from "utils/ApiPathConst";
+// import * as DateUtils from "utils/DateUtils";
 
-import { useNavigate } from "react-router-dom";
+// import { useNavigate } from "react-router-dom";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const SearchDemandNoteForm = () => {
-    const navigate = useNavigate()
+const SearchDemandNoteForm = (props) => {
+    // const navigate = useNavigate()
     const [itemList, setItemList] = React.useState([]);
 
     React.useEffect(() => {
         loadData();
+        // props.setMessageOnReady(true);
     }, []);
 
     const loadData = () => {
+        if(props.itemList.length > 0){
+            setItemList(props.itemList)
+        }
+        // props.setMessageOnReady(true);
 
-        HttpUtils.get({
-            url: UrlUtils.GET_MSG_DASHBOARD,
-            onSuccess: function (response) {
-                let list = []
-                response.map((item) => {
-                    list.push(
-                        <Button onClick={()=>{navigate("/msg/details/"+item.id);}} color={item.readTime?"gray":"black"} style={{justifyContent: "flex-start"}} sx={{p:2}}>
-                            <Stack direction="column" >
-                                <Typography variant='h4' align="justify"><b>{item.subject}</b></Typography>
-                                <Typography align="justify">{DateUtils.datetimeStr(item.sentDate)}</Typography>
-                            </Stack>
-                        </Button>
-                    )
-                });
-
-                setItemList(list);
-
-            }
-        });
     };
 
 
diff --git a/src/pages/dashboard/Public/Notice.js b/src/pages/dashboard/Public/Notice.js
index c558773..e723a07 100644
--- a/src/pages/dashboard/Public/Notice.js
+++ b/src/pages/dashboard/Public/Notice.js
@@ -6,15 +6,15 @@ import {
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import * as React from "react";
-import * as HttpUtils from "utils/HttpUtils";
-import * as UrlUtils from "utils/ApiPathConst";
+// import * as HttpUtils from "utils/HttpUtils";
+// import * as UrlUtils from "utils/ApiPathConst";
 import * as DateUtils from "utils/DateUtils";
 import { useIntl} from "react-intl";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const SearchDemandNoteForm = () => {
+const SearchDemandNoteForm = (props) => {
 
     const [itemList, setItemList] = React.useState([]);
     const [listData, setListData] = React.useState([]);
@@ -44,12 +44,9 @@ const SearchDemandNoteForm = () => {
 
     const loadData = () => {
 
-        HttpUtils.get({
-            url: UrlUtils.GET_ANNOUNCE_DASHBOARD,
-            onSuccess: function (response) {
-                setListData(response);
-            }
-        });
+        if(props.listData.length > 0){
+            setListData(props.listData)
+        }
     };
 
 
diff --git a/src/pages/dashboard/Public/index.js b/src/pages/dashboard/Public/index.js
index e3de4e4..ec33f38 100644
--- a/src/pages/dashboard/Public/index.js
+++ b/src/pages/dashboard/Public/index.js
@@ -1,4 +1,4 @@
-// import { useState } from 'react';
+import { useState } from 'react';
 
 // material-ui
 import {
@@ -14,8 +14,15 @@ import { FormattedMessage, useIntl } from "react-intl";
 import AdsClickRoundedIcon from '@mui/icons-material/AdsClickRounded';
 import * as React from "react";
 import Loadable from 'components/Loadable';
+import * as HttpUtils from "utils/HttpUtils";
+import * as UrlUtils from "utils/ApiPathConst";
+import * as DateUtils from "utils/DateUtils";
+
 const Message = Loadable(React.lazy(() => import('./Message')));
 const Notice = Loadable(React.lazy(() => import('./Notice')));
+// import { lazy } from 'react';
+
+const LoadingComponent = Loadable(React.lazy(() => import('../../extra-pages/LoadingComponent')));
 
 import { useNavigate } from "react-router-dom";
 
@@ -37,8 +44,19 @@ const DashboardDefault = () => {
   }
 
   const { locale } = intl;
+  const [messageOnReady, setMessageOnReady] = useState(false);
+  const [onNoticeReady, setNoticeOnReady] = useState(false);
+  const [isLoading, setLoding] = useState(true);
+  const [itemList, setItemList] = React.useState([]);
+  const [listData, setListData] = React.useState([]);
+
+  React.useEffect(() => {
+    loadMessageData()
+    loadNoticeData()
+  }, []);
 
   const getWelcomeMsg=()=>{
+    
     var current = new Date()
     var curHr = current.getHours()
 
@@ -51,77 +69,151 @@ const DashboardDefault = () => {
     }
   }
 
+  React.useEffect(() => {
+    // console.log(messageOnReady)
+    // console.log(onNoticeReady)
+    if(messageOnReady&&onNoticeReady){
+      setLoding(false)
+      // console.log(123)
+    }
+  }, [messageOnReady,onNoticeReady]);
+
+  const loadMessageData = () => {
+    HttpUtils.get({
+        url: UrlUtils.GET_MSG_DASHBOARD,
+        onSuccess: function (response) {
+            let list = []
+            response.map((item) => {
+                list.push(
+                    <Button onClick={()=>{navigate("/msg/details/"+item.id);}} color={item.readTime?"gray":"black"} style={{justifyContent: "flex-start"}} sx={{p:2}}>
+                        <Stack direction="column" >
+                            <Typography variant='h4' align="justify"><b>{item.subject}</b></Typography>
+                            <Typography align="justify">{DateUtils.datetimeStr(item.sentDate)}</Typography>
+                        </Stack>
+                    </Button>
+                )
+            });
+
+            setItemList(list);
+            setMessageOnReady(true);
+            // console.log('123')
+        },
+        onError: function (){
+            // console.log('123')
+            setMessageOnReady(true);
+        }
+    });
+    // props.setMessageOnReady(true);
+
+  };
+
+  const loadNoticeData = () => {
+    HttpUtils.get({
+        url: UrlUtils.GET_ANNOUNCE_DASHBOARD,
+        onSuccess: function (response) {
+            setListData(response);
+            setNoticeOnReady(true)
+        },
+        onError: function () {
+            setNoticeOnReady(true)
+        }
+    });
+  };
+
   return (
-    <Grid container sx={{ minHeight: '87vh' }} direction="column">
-      <Grid item xs={12} >
-        <div style={BackgroundHead}>
-          <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-            {/* <Typography variant="h5">我的公共啟事</Typography> */}
-            <Typography color='#FFF' variant="h5" sx={{ ml: 10, display: { xs: 'none', sm: 'none', md: 'block' } }}>
-              {isORGLoggedIn() ? userData.fullenName: (locale === 'en' ?userData.fullenName: userData.fullchName)}, {getWelcomeMsg()}
-            </Typography>
-          </Stack>
-        </div>
-      </Grid>
-      <Grid item xs={12} md={12} sx={{ textAlign: "center" }}>
-        <Grid container justifyContent="center" spacing={2} sx={{ pt: 2 }} alignitems="stretch" >
-          <Grid item xs={12} lg={5} sx={{ pt: 2 }} style={{ height: '100%' }}>
-            <Button
-              xs={12} onClick={() => { navigate("/publicNotice/apply"); }}
-              style={{ justifyContent: "flex-start" }}
-              aria-label={intl.formatMessage({ id: 'submitApplication' })}
-              sx={{ width: "100%", p: 4, border: '3px solid #e1edfc', borderRadius: '10px', backgroundColor: "#e1edfc" }}
-            >
-              <Stack direction="row" spacing={2}>
-                <AdsClickRoundedIcon />
-                <Stack direction="column" alignItems="start">
-                  <Typography variant="h4" >
-                    <FormattedMessage id="submitApplication" />
-                  </Typography>
-                  <Typography >
-                    <FormattedMessage id="applicationSubheading" />
+        isLoading ?
+          <Grid container sx={{ minHeight: '87vh' }} direction="column">
+            <Grid item xs={12} >
+              <div style={BackgroundHead}>
+                <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                  {/* <Typography variant="h5">我的公共啟事</Typography> */}
+                  <Typography color='#FFF' variant="h5" sx={{ ml: 10, display: { xs: 'none', sm: 'none', md: 'block' } }}>
+                    {isORGLoggedIn() ? userData.fullenName: (locale === 'en' ?userData.fullenName: userData.fullchName)}, {getWelcomeMsg()}
                   </Typography>
                 </Stack>
+              </div>
+            </Grid>
+            <Grid item xs={12} md={12} sx={{ textAlign: "center" }}>
+              <Grid container sx={{ minHeight: '75vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+                <Grid item>
+                    <LoadingComponent />
+                </Grid>
+              </Grid>
+            </Grid>
+          </Grid>
+        :
+        <Grid container sx={{ minHeight: '87vh' }} direction="column">
+          <Grid item xs={12} >
+            <div style={BackgroundHead}>
+              <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                {/* <Typography variant="h5">我的公共啟事</Typography> */}
+                <Typography color='#FFF' variant="h5" sx={{ ml: 10, display: { xs: 'none', sm: 'none', md: 'block' } }}>
+                  {isORGLoggedIn() ? userData.fullenName: (locale === 'en' ?userData.fullenName: userData.fullchName)}, {getWelcomeMsg()}
+                </Typography>
               </Stack>
-            </Button>
-            <Stack direction="row" justifyContent="space-between" sx={{ pl: 2, pr: 2, pt: 2 }} >
-              <Typography variant="h4">
-                <FormattedMessage id="announcement" />
-              </Typography>
-              <Button
-                color="gray"
-                aria-label={intl.formatMessage({ id: 'viewAllAnnouncement' })}
-                onClick={()=>{navigate("/announcement/search")}}
-              ><u>
-                  <FormattedMessage id="viewAllAnnouncement" />
-                </u></Button>
-            </Stack>
-            <Box xs={12} md={12} sx={{ p: 1, border: '3px solid #eee', borderRadius: '10px' }} >
-              <Notice
-              />
-            </Box>
+            </div>
           </Grid>
-          <Grid item xs={12} lg={5} sx={{ pt: 2 }} style={{ height: '100%' }}>
-            <Stack direction="row" justifyContent="space-between" sx={{ pl: 2, pr: 2, pt: 2 }} >
-              <Typography variant="h4">
-                <FormattedMessage id="systemMessage" />
-              </Typography>
-              <Button
-                aria-label={intl.formatMessage({ id: 'viewAllSystemMessage' })}
-                onClick={() => { navigate("/msg/search"); }}
-                color="gray"
-              ><u>
-                  <FormattedMessage id="viewAllSystemMessage" />
-                </u></Button>
-            </Stack>
-            <Box xs={12} md={12} sx={{ p: 1, border: '3px solid #eee', borderRadius: '10px' }} >
-              <Message
-              />
-            </Box>
+          <Grid item xs={12} md={12} sx={{ textAlign: "center" }}>
+            <Grid container justifyContent="center" spacing={2} sx={{ pt: 2 }} alignitems="stretch" >
+              <Grid item xs={12} lg={5} sx={{ pt: 2 }} style={{ height: '100%' }}>
+                <Button
+                  xs={12} onClick={() => { navigate("/publicNotice/apply"); }}
+                  style={{ justifyContent: "flex-start" }}
+                  aria-label={intl.formatMessage({ id: 'submitApplication' })}
+                  sx={{ width: "100%", p: 4, border: '3px solid #e1edfc', borderRadius: '10px', backgroundColor: "#e1edfc" }}
+                >
+                  <Stack direction="row" spacing={2}>
+                    <AdsClickRoundedIcon />
+                    <Stack direction="column" alignItems="start">
+                      <Typography variant="h4" >
+                        <FormattedMessage id="submitApplication" />
+                      </Typography>
+                      <Typography >
+                        <FormattedMessage id="applicationSubheading" />
+                      </Typography>
+                    </Stack>
+                  </Stack>
+                </Button>
+                <Stack direction="row" justifyContent="space-between" sx={{ pl: 2, pr: 2, pt: 2 }} >
+                  <Typography variant="h4">
+                    <FormattedMessage id="announcement" />
+                  </Typography>
+                  <Button
+                    color="gray"
+                    aria-label={intl.formatMessage({ id: 'viewAllAnnouncement' })}
+                    onClick={()=>{navigate("/announcement/search")}}
+                  ><u>
+                      <FormattedMessage id="viewAllAnnouncement" />
+                    </u></Button>
+                </Stack>
+                <Box xs={12} md={12} sx={{ p: 1, border: '3px solid #eee', borderRadius: '10px' }} >
+                  <Notice
+                    listData = {listData}
+                  />
+                </Box>
+              </Grid>
+              <Grid item xs={12} lg={5} sx={{ pt: 2 }} style={{ height: '100%' }}>
+                <Stack direction="row" justifyContent="space-between" sx={{ pl: 2, pr: 2, pt: 2 }} >
+                  <Typography variant="h4">
+                    <FormattedMessage id="systemMessage" />
+                  </Typography>
+                  <Button
+                    aria-label={intl.formatMessage({ id: 'viewAllSystemMessage' })}
+                    onClick={() => { navigate("/msg/search"); }}
+                    color="gray"
+                  ><u>
+                      <FormattedMessage id="viewAllSystemMessage" />
+                    </u></Button>
+                </Stack>
+                <Box xs={12} md={12} sx={{ p: 1, border: '3px solid #eee', borderRadius: '10px' }} >
+                  <Message 
+                    itemList = {itemList}
+                  />
+                </Box>
+              </Grid>
+            </Grid>
           </Grid>
         </Grid>
-      </Grid>
-    </Grid>
   );
 };