update public org user ui

src/components/FileList.js

@@ -4,7 +4,6 @@ import {
     DataGrid,
     GridActionsCellItem,
 } from "@mui/x-data-grid";
-import {useEffect} from "react";
 import * as Icon from '../utils/IconUtils';
 import * as HttpUtils from "../utils/HttpUtils"
 import * as UrlUtils from "../utils/ApiPathConst"
@@ -15,7 +14,7 @@ export default function FileList({refType, refId, allowDelete, sx}) {
     const [rows, setRows] = React.useState([]);
     const [rowModesModel] = React.useState({});
 
-    useEffect(() => {
+    React.useEffect(() => {
         loadData();
     }, []);
 

src/layout/MainLayout/Header/index.js

@@ -124,7 +124,12 @@ function Header(props) {
         <Link className="paymentRecord" to='/dashboard'>付款記錄</Link>
       </li>
       <li>
-        <Link className="userSetting" to='/dashboard'>設定</Link>
+        <Link className="userSetting" to='/dashboard'>設定<KeyboardArrowDownIcon/></Link>
+        <ul className='dropdown'>
+          <li>
+            <Link className="manageOrgUser" to='setting/manageUser'>公司/機構用戶記錄</Link>
+          </li>
+        </ul>
       </li>
       <li>
         <Link className="logout" onClick={handleLogout}>登出</Link>

src/pages/ManageOrgUserPage/index.js

@@ -0,0 +1,148 @@
+// material-ui
+import {
+    DataGrid,
+    GridActionsCellItem
+} from "@mui/x-data-grid";
+
+import {
+     Typography
+}from '@mui/material';
+import MainCard from "../../components/MainCard";
+
+import * as React from "react";
+import * as Icon from '../../utils/IconUtils';
+import * as HttpUtils from "../../utils/HttpUtils";
+import * as UrlUtils from "../../utils/ApiPathConst";
+import * as DateUtils from "../../utils/DateUtils";
+
+
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+
+const ManageOrgUserPage = () => {
+    const [rows, setRows] = React.useState([]);
+    const [rowModesModel] = React.useState({});
+
+    React.useEffect(() => {
+        loadData();
+    }, []);
+
+
+    const loadData = ()=>{
+        HttpUtils.get(
+            {
+                url: UrlUtils.GET_PUBLIC_ORG_USER_LIST,
+                onSuccess: function(responseData){
+                    setRows(responseData);
+                }
+            }
+        );
+    };
+
+    const onActiveClick=()=>{
+
+    }
+
+    const getHeader=(headerStr)=>{
+        return <Typography variant="h5" >{headerStr}</Typography>;
+    }
+
+    const columns = [
+        {
+            id: 'username',
+            field: 'username',
+            headerName: getHeader('登錄名稱'),
+            flex: 1,
+            
+        },
+        {
+            id: 'contactPerson',
+            field: 'contactPerson',
+            headerName: getHeader('用戶名稱'),
+            flex: 1,
+            
+        },
+        {
+            id: 'contactTel',
+            field: 'contactTel',
+            headerName: getHeader('聯絡電話'),
+            flex: 1,
+            valueGetter:(params)=>{
+                let contactTel = JSON.parse(params.value)
+                return contactTel?.countryCode+" "+contactTel?.phoneNumber;
+            }
+        },
+        {
+            id: 'emailBus',
+            field: 'emailBus',
+            headerName: getHeader('電郵'),
+            flex: 1,
+        },
+        {
+            id: 'lastLogin',
+            field: 'lastLogin',
+            headerName: getHeader('最後登入日期'),
+            flex: 1,
+            valueGetter:(params)=>{
+                return DateUtils.datetimeStr(params.value);
+            }
+        },
+        {
+            id: 'lastApply',
+            field: 'lastApply',
+            headerName: getHeader('最後提交申請日期'),
+            flex: 1,
+            valueGetter:(params)=>{
+                return DateUtils.datetimeStr(params.value);
+            }
+        },
+        {
+            field: 'actions',
+            type: 'actions',
+            headerName: getHeader('狀態'),
+            flex: 1,
+            cellClassName: 'actions',
+            getActions: (params) => {
+                return [
+                    <GridActionsCellItem
+                        key="OutSave"
+                        icon={<Icon.Download/>}
+                        label="Download"
+                        className="textPrimary"
+                        onClick={onActiveClick(params)}
+                        color="primary"
+                    />]
+            },
+        }
+    ];
+
+
+
+    return (
+        <MainCard elevation={0}  border={false}   content={false} >
+            <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>
+            公司/機構用戶記錄
+            </Typography>
+
+            <br/>
+
+            <DataGrid
+                rows={rows}
+                columns={columns}
+                editMode="row"
+                rowModesModel={rowModesModel}
+                initialState={{
+                    pagination: {
+                        paginationModel: {page: 0, pageSize: 10},
+                    },
+                }}
+                pageSizeOptions={[5, 10]}
+                autoHeight = {true}
+            />
+        </MainCard>
+    );
+};
+
+
+export default ManageOrgUserPage;

src/routes/PublicUserRoutes.js

@@ -7,6 +7,7 @@ const MainLayout = Loadable(lazy(() => import('layout/MainLayout')));
 
 // render - dashboard
 const DashboardDefault = Loadable(lazy(() => import('pages/publicDashboard')));
+const ManageOrgUser = Loadable(lazy(() => import('pages/ManageOrgUserPage')));
 
 // ==============================|| MAIN ROUTING ||============================== //
 
@@ -24,6 +25,10 @@ const PublicDashboard = {
         {
           path: 'dashboard',
           element: <DashboardDefault />
+        },
+        {
+          path: 'setting/manageUser',
+          element: <ManageOrgUser/>
         }
       ]
     },

src/utils/ApiPathConst.js

@@ -38,3 +38,8 @@ export const POST_LOGIN = '/login';
 
 //register
 export const POST_PUBLIC_USER_REGISTER = apiPath+'/user/register';
+
+
+
+//Public
+export const GET_PUBLIC_ORG_USER_LIST = apiPath+'/user/listOrg';