From a84ef726d032c62e4a50337afbf56d529fd0ff19 Mon Sep 17 00:00:00 2001 From: Alex Cheung Date: Tue, 19 Sep 2023 12:22:45 +0800 Subject: [PATCH] add applicaiton status table with api --- .../ClientDetailCard.js | 11 ++- src/pages/gldApplicationDetailPage/index.js | 2 +- .../tabTableDetail/BaseGrid.js | 8 +- .../tabTableDetail/ProofTab.js | 76 +++++++++++++++++++ .../tabTableDetail/StatusHistoryTab.js | 64 ++++++++++++++++ .../tabTableDetail/TabTable.js | 52 +++++++------ 6 files changed, 182 insertions(+), 31 deletions(-) create mode 100644 src/pages/gldApplicationDetailPage/tabTableDetail/ProofTab.js create mode 100644 src/pages/gldApplicationDetailPage/tabTableDetail/StatusHistoryTab.js diff --git a/src/pages/gldApplicationDetailPage/ClientDetailCard.js b/src/pages/gldApplicationDetailPage/ClientDetailCard.js index c9bfcf0..28cf4b5 100644 --- a/src/pages/gldApplicationDetailPage/ClientDetailCard.js +++ b/src/pages/gldApplicationDetailPage/ClientDetailCard.js @@ -23,6 +23,7 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo import ContentPasteSearchIcon from '@mui/icons-material/ContentPasteSearch'; import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline'; import HighlightOff from '@mui/icons-material/HighlightOff'; +import {useNavigate} from "react-router-dom"; // ==============================|| DASHBOARD - DEFAULT ||============================== // const ClientDetailCard = ( @@ -39,6 +40,7 @@ const ClientDetailCard = ( const {register, // getValues } = useForm() + const navigate = useNavigate() useEffect(() => { //if user data from parent are not null @@ -56,6 +58,13 @@ const ClientDetailCard = ( } }, [currentApplicationDetailData]); + const handleViewClick = () => () => { + console.log(currentApplicationDetailData) + currentApplicationDetailData.type == "ORG"? + navigate('/orgUser/'+ currentApplicationDetailData.id): + navigate('/indUser/'+ currentApplicationDetailData.id); + }; + // useEffect(() => { // //upload latest data to parent // const values = getValues(); @@ -86,7 +95,7 @@ const ClientDetailCard = ( ; + }, + } + ]; + + return ( +
+ +
+ ); +} diff --git a/src/pages/gldApplicationDetailPage/tabTableDetail/StatusHistoryTab.js b/src/pages/gldApplicationDetailPage/tabTableDetail/StatusHistoryTab.js new file mode 100644 index 0000000..0683082 --- /dev/null +++ b/src/pages/gldApplicationDetailPage/tabTableDetail/StatusHistoryTab.js @@ -0,0 +1,64 @@ +// material-ui +import * as React from 'react'; +import { + DataGrid, +} from "@mui/x-data-grid"; +// import dayjs from "dayjs"; +// import { +// Button +// } from '@mui/material'; +// import * as DateUtils from "utils/DateUtils" +import * as StatusUtils from "../../PublicNotice/ListPanel/PublicNoteStatusUtils"; + +// ==============================|| EVENT TABLE ||============================== // + +export default function StatusHistoryTab({rows}) { + const [rowModesModel] = React.useState({}); + + const columns = [ + { + id: 'created', + field: 'created', + headerName: 'Date', + valueGetter: (params) => { + const value = params.value + return value[0]+"/"+value[1]+"/"+value[2]+" "+value[3]+":"+value[4]+":"+value[5] + }, + // valueFormatter: (params) => dayjs(params.value).format('DD/MM/YYYY'), + flex: 1, + }, + { + id: 'createdBy', + field: 'createdBy', + headerName: 'Changed By', + flex: 1, + }, + { + id: 'status', + field: 'status', + headerName: 'Status', + flex: 1, + renderCell: (params) => { + return [StatusUtils.getStatusEng(params)] + }, + }, + ]; + + return ( +
+ +
+ ); +} diff --git a/src/pages/gldApplicationDetailPage/tabTableDetail/TabTable.js b/src/pages/gldApplicationDetailPage/tabTableDetail/TabTable.js index 3b44b92..7cf0222 100644 --- a/src/pages/gldApplicationDetailPage/tabTableDetail/TabTable.js +++ b/src/pages/gldApplicationDetailPage/tabTableDetail/TabTable.js @@ -9,7 +9,7 @@ import { import { TabPanel, TabContext, TabList } from '@mui/lab'; import { - // useEffect, + useEffect, useState } from "react"; // import { useNavigate } from "react-router-dom"; import * as React from "react"; @@ -19,20 +19,20 @@ import * as React from "react"; import Loadable from 'components/Loadable'; import { lazy } from 'react'; const BaseGrid = Loadable(lazy(() => import('./BaseGrid'))); -const PendingPaymentTab = Loadable(lazy(() => import('./PendingPaymentTab'))); +const StatusHistoryTab = Loadable(lazy(() => import('./StatusHistoryTab'))); const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); -// const SearchTab = Loadable(lazy(() => import('./SearchPublicNoticeTab'))); +const ProofTab = Loadable(lazy(() => import('./ProofTab'))); // ==============================|| DASHBOARD - DEFAULT ||============================== // -const PublicNotice = () => { +const PublicNotice = ({applicationDetailData}) => { const [submittedList, ] = useState([]); const [inProgressList, ] = useState([]); - const [pendingPaymentList, ] = useState([]); - const [isLoading,] = useState(false); + const [onReady,setOnReady] = useState(false); const [selectedTab, setSelectedTab] = useState("1"); // const navigate = useNavigate(); + const [statusHistoryList, setStatusHistoryList] = useState([]); // useEffect(() => { @@ -43,18 +43,20 @@ const PublicNotice = () => { window.location.reload(false); } - // const loadData = () => { - // setLoding(true); - // HttpUtils.get({ - // url: `${UrlUtils.GET_PUBLIC_NOTICE_LIST_ListByStatus}`, - // onSuccess: function (response) { - // setSubmittedList(response["submitted"]); - // setInProgressList(response["inProgress"]); - // setPendingPaymentList(response["pendingPayment"]); - // setPendingPublishList(response["pendingPublish"]); - // } - // }); - // }; + useEffect(() => { + //if user data from parent are not null + // console.log(applicationDetailData) + if (Object.keys(applicationDetailData).length > 0) { + setStatusHistoryList(applicationDetailData.statusHistoryList); + } + }, [applicationDetailData]); + + useEffect(() => { + //if state data are ready and assign to different field + if (statusHistoryList.length > 0) { + setOnReady(true); + } + }, [statusHistoryList]); // useEffect(() => { // setLoding(false); @@ -69,7 +71,7 @@ const PublicNotice = () => { // } return ( - isLoading ? + !onReady ? : @@ -78,13 +80,13 @@ const PublicNotice = () => { - - - + + + - @@ -96,8 +98,8 @@ const PublicNotice = () => { /> -