From 5080a61ba725b3bf52d85b2cc7ec48712b08068b Mon Sep 17 00:00:00 2001
From: Alex Cheung <alex.cheung@2fi-solutions.com.hk>
Date: Wed, 23 Aug 2023 17:19:31 +0800
Subject: [PATCH] fix user search

---
 src/layout/MainLayout/Header/index.js         |   2 +-
 src/layout/MainLayout/index.js                |   4 +-
 .../auth-forms/CustomFormWizard.js            |  23 +-
 .../UserInformationCard.js                    |   2 +-
 .../DummyComboRecord.js                       |   0
 .../pnspsUserSearchPage/UserSearchForm.js     |   2 +-
 .../pnspsUserSettingPage/UserSearchForm.js    | 232 ------------------
 src/pages/pnspsUserSettingPage/UserTable.js   | 137 -----------
 src/pages/pnspsUserSettingPage/index.js       |  89 -------
 src/routes/SettingRoutes.js                   |   7 +-
 10 files changed, 14 insertions(+), 484 deletions(-)
 rename src/pages/{pnspsUserSettingPage => pnspsUserSearchPage}/DummyComboRecord.js (100%)
 delete mode 100644 src/pages/pnspsUserSettingPage/UserSearchForm.js
 delete mode 100644 src/pages/pnspsUserSettingPage/UserTable.js
 delete mode 100644 src/pages/pnspsUserSettingPage/index.js

diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js
index 48c4489..b5eb4d6 100644
--- a/src/layout/MainLayout/Header/index.js
+++ b/src/layout/MainLayout/Header/index.js
@@ -114,7 +114,7 @@ function Header(props) {
             >
               <ul id="navbar" width="100%" >
                 <li>
-                  <Link className="usersetting" to='/usersetting'>User</Link>
+                  <Link className="userSearchview" to='/userSearchview'>User</Link>
                 </li>
                 <li>
                   <Link className="usergroupSearchview" to='/usergroupSearchview'>User Group</Link>
diff --git a/src/layout/MainLayout/index.js b/src/layout/MainLayout/index.js
index 48a9177..b57283c 100644
--- a/src/layout/MainLayout/index.js
+++ b/src/layout/MainLayout/index.js
@@ -17,7 +17,7 @@ import Footer from 'components/cards/AuthFooter';
 
 // types
 import { openDrawer } from 'store/reducers/menu';
-import "assets/style/styles.css";
+// import "assets/style/styles.css";
 
 
 // ==============================|| MAIN LAYOUT ||============================== //
@@ -50,7 +50,7 @@ const MainLayout = () => {
   }, [drawerOpen]);
 
   return (
-    <Box sx={{ display: 'flex', width: '100%', flexDirection: "column"}}>
+    <Box sx={{ display: 'flex', width: '100%', flexDirection: "column", paddingTop: { xs: "5px", sm: "43px" }}}>
       <Header/>
       {/* <Drawer open={open} handleDrawerToggle={handleDrawerToggle} /> */}
       <Box component="main" sx={{ width: '100%', flexGrow: 1, p: { xs: 2, sm: 3 } }}>
diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js
index 67f217e..6b65305 100644
--- a/src/pages/authentication/auth-forms/CustomFormWizard.js
+++ b/src/pages/authentication/auth-forms/CustomFormWizard.js
@@ -398,14 +398,14 @@ const CustomFormWizard = (props) => {
                                                     onChange={handleChange}
                                                     placeholder="( )"
                                                     inputProps={{
+                                                        maxLength: 1,
                                                         onKeyDown: (e) => {
                                                             if (e.key === 'Enter') {
                                                                 e.preventDefault();
-                                                                }
+                                                            }
                                                         },
                                                     }}
                                                     fullWidth
-                                                    // sx={{width:'90%'}}
                                                     error={Boolean(touched.checkDigit && errors.checkDigit)}
                                                 />
                                                 {touched.checkDigit && errors.checkDigit && (
@@ -667,7 +667,6 @@ const CustomFormWizard = (props) => {
                                                         </InputLabel>
                                                         <Stack direction="row">
                                                             <OutlinedInput
-                                                                fullWidth
                                                                 error={Boolean(touched.phone && errors.phone)}
                                                                 id="phoneCountryCode-login"
                                                                 type="phoneCountryCode"
@@ -678,33 +677,34 @@ const CustomFormWizard = (props) => {
                                                                 onChange={handleChange}
                                                                 placeholder="eg:852"
                                                                 inputProps={{
+                                                                    maxLength: 3,
                                                                     onKeyDown: (e) => {
                                                                         if (e.key === 'Enter') {
                                                                             e.preventDefault();
                                                                         }
                                                                     },
                                                                 }}
-                                                                sx={{width:'20%'}}
+                                                                sx={{width:'25%'}}
                                                             />
                                                             <OutlinedInput
-                                                                fullWidth
                                                                 error={Boolean(touched.phone && errors.phone)}
                                                                 id="phone-login"
                                                                 type="phone"
                                                                 value={values.phone}
                                                                 name="phone"
                                                                 {...register("phone")}
-                                                                sx={{width:'80%'}}
                                                                 onBlur={handleBlur}
                                                                 onChange={handleChange}
                                                                 placeholder="聯絡電話"
                                                                 inputProps={{
+                                                                    maxLength: 3,
                                                                     onKeyDown: (e) => {
                                                                         if (e.key === 'Enter') {
                                                                             e.preventDefault();
                                                                         }
                                                                     },
                                                                 }}
+                                                                sx={{width:'75%'}}
                                                             />
                                                             {touched.phone && errors.phone && (
                                                                 <FormHelperText error id="helper-text-phone-signup">
@@ -714,12 +714,6 @@ const CustomFormWizard = (props) => {
                                                         </Stack>
                                                     </Stack>
                                                 </Grid>
-                                                {/* <Grid container>
-                                                    <Grid item xs={2} md={2}>
-                                                    </Grid>
-                                                    <Grid item xs={10} md={10}>
-                                                    </Grid>
-                                                </Grid> */}
                                             </Grid>
                                         </Grid>
                                         <Grid item  xs={12} md={6}>
@@ -729,7 +723,6 @@ const CustomFormWizard = (props) => {
                                                         <InputLabel htmlFor="fax-signup">傳真號碼</InputLabel>
                                                         <Stack direction="row">
                                                             <OutlinedInput
-                                                                fullWidth
                                                                 error={Boolean(touched.fax && errors.fax)}
                                                                 id="faxCountryCode-login"
                                                                 type="faxCountryCode"
@@ -746,10 +739,9 @@ const CustomFormWizard = (props) => {
                                                                         }
                                                                     },
                                                                 }}
-                                                                sx={{width:'20%'}}
+                                                                sx={{width:'25%'}}
                                                             />
                                                             <OutlinedInput
-                                                                fullWidth
                                                                 id="fax-login"
                                                                 type="fax"
                                                                 value={values.fax}
@@ -765,6 +757,7 @@ const CustomFormWizard = (props) => {
                                                                         }
                                                                     },
                                                                 }}
+                                                                sx={{width:'75%'}}
                                                             />
                                                         </Stack>
                                                     </Stack>
diff --git a/src/pages/pnspsUserDetailPage/UserInformationCard.js b/src/pages/pnspsUserDetailPage/UserInformationCard.js
index 59ede65..6bf419f 100644
--- a/src/pages/pnspsUserDetailPage/UserInformationCard.js
+++ b/src/pages/pnspsUserDetailPage/UserInformationCard.js
@@ -13,7 +13,7 @@ import {
     subDivision4,
     subDivision5,
     subDivision6
-} from "../pnspsUserSettingPage/DummyComboRecord";
+} from "../pnspsUserSearchPage/DummyComboRecord";
 import {useEffect, useState} from "react";
 import Checkbox from "@mui/material/Checkbox";
 import LoadingComponent from "../extra-pages/LoadingComponent";
diff --git a/src/pages/pnspsUserSettingPage/DummyComboRecord.js b/src/pages/pnspsUserSearchPage/DummyComboRecord.js
similarity index 100%
rename from src/pages/pnspsUserSettingPage/DummyComboRecord.js
rename to src/pages/pnspsUserSearchPage/DummyComboRecord.js
diff --git a/src/pages/pnspsUserSearchPage/UserSearchForm.js b/src/pages/pnspsUserSearchPage/UserSearchForm.js
index 33cc35a..09336d5 100644
--- a/src/pages/pnspsUserSearchPage/UserSearchForm.js
+++ b/src/pages/pnspsUserSearchPage/UserSearchForm.js
@@ -17,7 +17,7 @@ import {
     subDivision4,
     subDivision5,
     subDivision6
-} from "pages/pnspsUserSettingPage/DummyComboRecord";
+} from "pages/pnspsUserSearchPage/DummyComboRecord";
 import Checkbox from "@mui/material/Checkbox";
 import * as React from "react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
diff --git a/src/pages/pnspsUserSettingPage/UserSearchForm.js b/src/pages/pnspsUserSettingPage/UserSearchForm.js
deleted file mode 100644
index 2297846..0000000
--- a/src/pages/pnspsUserSettingPage/UserSearchForm.js
+++ /dev/null
@@ -1,232 +0,0 @@
-// material-ui
-import {
-    Button,
-    CardContent, FormControlLabel,
-    Grid, TextField,
-    Typography
-} from '@mui/material';
-import MainCard from "../../components/MainCard";
-import {useForm} from "react-hook-form";
-
-import dayjs from "dayjs";
-import {useEffect, useState} from "react";
-import Autocomplete from '@mui/material/Autocomplete';
-import {
-    subDivision1,
-    subDivision2,
-    subDivision3,
-    subDivision4,
-    subDivision5,
-    subDivision6
-} from "pages/pnspsUserSettingPage/DummyComboRecord";
-import Checkbox from "@mui/material/Checkbox";
-import * as React from "react";
-// ==============================|| DASHBOARD - DEFAULT ||============================== //
-
-const subDivisionArray =[
-        ...subDivision1,
-        ...subDivision2,
-        ...subDivision3,
-        ...subDivision4,
-        ...subDivision5,
-        ...subDivision6
-];
-
-const UserSearchForm = ({applySearch}) => {
-
-    const [value, setValue] = useState();
-    const [type, setType] = useState([]);
-    const [division, setDivision] = useState(null);
-    const [subDivision, setSubDivision] = useState(null);
-    const [isLotusNoteUser, setIsLotusNoteUser] = useState(false);
-    const [locked, setLocked] = useState(false);
-
-
-    const { reset, register, handleSubmit } = useForm()
-    const onSubmit = (data) => {
-
-        let typeArray = [];
-
-        for(let i =0; i < type.length; i++){
-            typeArray.push(type[i].label);
-        }
-
-        const temp = {
-            eventName: data.eventName,
-            eventOrganization: data.eventOrganization,
-            eventRegion: data.eventRegion,
-            eventDescription: data.eventDescription,
-            type: typeArray,
-            division: division,
-            subDivision: subDivision,
-            selectedDate: dayjs(value).format("MM/DD/YYYY")
-        };
-        applySearch(temp);
-    };
-
-    useEffect(() => {
-        if(division != null){
-            setSubDivision(subDivisionArray[division.type-1][0]);
-        }
-
-    }, [division]);
-
-    function resetForm(){
-        setValue(new Date().toDateString());
-        setType([]);
-        setDivision(null);
-        setSubDivision(null);
-        setIsLotusNoteUser(false);
-        setLocked(false);
-        reset();
-    }
-
-    return (
-        <MainCard xs={12} md={12} lg={12}
-                  border={false}
-                  content={false}>
-
-            <form onSubmit={handleSubmit(onSubmit)}>
-                {/*row 1*/}
-                <CardContent sx={{ px: 2.5, pt: 3 }}>
-                    <Grid item justifyContent="space-between" alignItems="center">
-                        Search Form
-                    </Grid>
-                </CardContent>
-
-                {/*row 2*/}
-                <Grid container alignItems={"center"}>
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
-                        <TextField
-                            fullWidth
-                            {...register("userName")}
-                            id='userName'
-                            label="Username"
-                        />
-                    </Grid>
-
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
-                        <TextField
-                            fullWidth
-                            {...register("fullName")}
-                            id="fullName"
-                            label="Full Name"
-                        />
-                    </Grid>
-
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
-                        <TextField
-                            fullWidth
-                            {...register("post")}
-                            id="post"
-                            label="Post"
-                        />
-                    </Grid>
-
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
-                        <Autocomplete
-                            disablePortal
-                            id="sub-division-combo"
-                            value={subDivision === null? null : subDivision}
-                            options={subDivisionArray}
-                            onChange={(event, newValue) => {
-                                setSubDivision(newValue);
-                            }}
-                            renderInput={(params) => <TextField {...params} label="Sub-Division" />}
-                        />
-                    </Grid>
-
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
-                        <TextField
-                            fullWidth
-                            {...register("email")}
-                            id="email"
-                            label="Email"
-                        />
-                    </Grid>
-
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
-                        <TextField
-                            fullWidth
-                            {...register("phone")}
-                            id="phone"
-                            label="Phone"
-                        />
-                    </Grid>
-
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
-                        <FormControlLabel
-                            control={
-                                <Checkbox
-                                    checked={isLotusNoteUser}
-                                    onChange={(event) => setIsLotusNoteUser(event.target.checked)}
-                                    name="checked"
-                                    color="primary"
-                                    size="small"
-                                />
-                            }
-                            label={<Typography variant="h6">Lotus Notes User</Typography>}
-                        />
-                    </Grid>
-
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
-                        <FormControlLabel
-                            control={
-                                <Checkbox
-                                    checked={locked}
-                                    onChange={(event) => setLocked(event.target.checked)}
-                                    name="checked"
-                                    color="primary"
-                                    size="small"
-                                />
-                            }
-                            label={<Typography variant="h6">Locked</Typography>}
-                        />
-                    </Grid>
-                    {/*<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>*/}
-                    {/*    <TextField*/}
-                    {/*        fullWidth*/}
-                    {/*        {...register("subDivisionId")}*/}
-                    {/*        id="subDivision"*/}
-                    {/*        label="Sub-Division"*/}
-                    {/*    />*/}
-                    {/*</Grid>*/}
-
-                </Grid>
-
-
-                {/*last row*/}
-                <Grid container maxWidth justifyContent="flex-end">
-
-                    <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
-                        <Button
-                            size="large"
-                            variant="contained"
-                            onClick={resetForm}
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            Clear
-                        </Button>
-                    </Grid>
-
-                    <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
-                        <Button
-                            size="large"
-                            variant="contained"
-                            type="submit"
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            Submit
-                        </Button>
-                    </Grid>
-                </Grid>
-            </form>
-        </MainCard>
-    );
-};
-
-export default UserSearchForm;
diff --git a/src/pages/pnspsUserSettingPage/UserTable.js b/src/pages/pnspsUserSettingPage/UserTable.js
deleted file mode 100644
index ed2ab25..0000000
--- a/src/pages/pnspsUserSettingPage/UserTable.js
+++ /dev/null
@@ -1,137 +0,0 @@
-// material-ui
-import * as React from 'react';
-import {
-    DataGrid,
-    GridActionsCellItem,
-} from "@mui/x-data-grid";
-import EditIcon from '@mui/icons-material/Edit';
-import {useEffect} from "react";
-import {useNavigate} from "react-router-dom";
-import { useTheme } from '@mui/material/styles';
-import Checkbox from '@mui/material/Checkbox';
-// ==============================|| EVENT TABLE ||============================== //
-
-export default function UserTable({recordList}) {
-    const [rows, setRows] = React.useState(recordList);
-    const [rowModesModel] = React.useState({});
-    const theme = useTheme();
-
-    const navigate = useNavigate()
-
-    useEffect(() => {
-        setRows(recordList);
-    }, [recordList]);
-
-    const handleEditClick = (id) => () => {
-        navigate('/user/'+ id);
-    };
-
-    const columns = [
-        {
-            field: 'actions',
-            type: 'actions',
-            headerName: 'Actions',
-            width: 100,
-            cellClassName: 'actions',
-            getActions: ({id}) => {
-                return [
-                    <GridActionsCellItem
-                        key="OutSave"
-                        icon={<EditIcon/>}
-                        label="Edit"
-                        className="textPrimary"
-                        onClick={handleEditClick(id)}
-                        color="primary"
-                    />]
-            },
-        },
-        {
-            id: 'username',
-            field: 'username',
-            headerName: 'User Name',
-            flex: 1,
-        },
-        {
-            id: 'name',
-            field: 'name',
-            headerName: 'Full Name',
-            flex: 1,
-        },
-        {
-            id: 'post',
-            field: 'post',
-            headerName: 'Post',
-            flex: 1,
-        },
-        {
-            id: 'email',
-            field: 'email',
-            headerName: 'Email',
-            flex: 1,
-        },
-        {
-            id: 'subDivisionId',
-            field: 'subDivisionId',
-            //type: 'date',
-            //sortable: false,
-            headerName: 'Sub-Division',
-            flex: 1,
-        },
-        {
-            id: 'lotusNotesUser',
-            field: 'lotusNotesUser',
-            type: 'bool',
-            headerName: 'Lotus Notes User',
-            flex: 1,
-            renderCell: (params) => {
-                return (
-                    <Checkbox
-                        theme={theme}
-                        key="locked"
-                        checked={params.row.lotusNotesUser}
-                        color="primary"
-                        size="small"
-                        //onChange={handleChange}
-                    />
-                );
-            },
-        },
-        {
-            id: 'locked',
-            field: 'locked',
-            type: 'bool',
-            headerName: 'Locked',
-            flex: 1,
-            renderCell: (params) => {
-                return (
-                    <Checkbox
-                        theme={theme}
-                        key="locked"
-                        checked={params.row.locked}
-                        color="primary"
-                        size="small"
-                        //onChange={handleChange}
-                    />
-                );
-            },
-        },
-    ];
-
-    return (
-        <div style={{height: 400, width: '100%'}}>
-            <DataGrid
-                rows={rows}
-                columns={columns}
-                editMode="row"
-                rowModesModel={rowModesModel}
-                initialState={{
-                    pagination: {
-                        paginationModel: {page: 0, pageSize: 5},
-                    },
-                }}
-                pageSizeOptions={[5, 10]}
-                autoHeight
-            />
-        </div>
-    );
-}
diff --git a/src/pages/pnspsUserSettingPage/index.js b/src/pages/pnspsUserSettingPage/index.js
deleted file mode 100644
index 0f333cf..0000000
--- a/src/pages/pnspsUserSettingPage/index.js
+++ /dev/null
@@ -1,89 +0,0 @@
-// material-ui
-import {
-    Grid
-} from '@mui/material';
-import MainCard from "../../components/MainCard";
-import SearchForm from "./UserSearchForm";
-import EventTable from "./UserTable";
-import {useEffect, useState} from "react";
-import axios from "axios";
-import {apiPath} from "../../auth/utils";
-import {GET_USER_PATH} from "../../utils/ApiPathConst";
-
-// ==============================|| DASHBOARD - DEFAULT ||============================== //
-
-
-const UserSettingPage = () => {
-
-    const [record,setRecord] = useState([]);
-    const [searchCriteria, setSearchCriteria] = useState({});
-    const [sortedRecord, setSortedRecord] = useState([]);
-
-    useEffect(() => {
-        axios.get(`${apiPath}${GET_USER_PATH}`)
-            .then((response) => {
-                if (response.status === 200) {
-                    setRecord(response.data);
-                    setSortedRecord(response.data);
-                }
-            })
-            .catch(error => {
-                console.log(error);
-                return false;
-            });
-    }, [])
-
-    const filterSearchName = (array) => {
-        return array.filter((item) => item.name.toLowerCase().includes(searchCriteria.eventName));
-    };
-
-    const filterSearchType = (array) => {
-        return array.filter((item) => item.category.includes(searchCriteria.type));
-    };
-
-    function sortData(record) {
-        let sortedRecord = record;
-        sortedRecord = filterSearchName(sortedRecord);
-        sortedRecord = filterSearchType(sortedRecord);
-        return sortedRecord;
-    }
-
-    function applySearch(input) {
-        setSearchCriteria(input);
-    }
-
-    useEffect(() => {
-        //console.log(searchCriteria);
-        if (Object.keys(searchCriteria).length !== 0) {
-            const tempSortedRecord = sortData(record);
-            console.log(tempSortedRecord);
-            setSortedRecord(tempSortedRecord);
-        } else {
-            setSortedRecord(record);
-        }
-    }, [searchCriteria]);
-
-    return (
-        <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-            {/*row 1*/}
-            <Grid item xs={12} md={12} lg={12}>
-                <SearchForm applySearch={applySearch}/>
-            </Grid>
-            {/*row 2*/}
-            <Grid item xs={12} md={12} lg={12}>
-                <MainCard elevation={0}
-                          border={false}
-                          content={false}
-                >
-                    <EventTable
-                        recordList={sortedRecord}
-                    />
-                </MainCard>
-            </Grid>
-
-        </Grid>
-
-    );
-};
-
-export default UserSettingPage;
diff --git a/src/routes/SettingRoutes.js b/src/routes/SettingRoutes.js
index 4710b60..e417961 100644
--- a/src/routes/SettingRoutes.js
+++ b/src/routes/SettingRoutes.js
@@ -7,8 +7,7 @@ import MainLayout from "../layout/MainLayout";
 // render - login
 const SettingPage = Loadable(lazy(() => import('pages/pnspsSettingPage')));
 const PasswordPolicyPage = Loadable(lazy(()=> import('pages/pnspsPasswordPolicyPage')))
-const UserSettingPage = Loadable(lazy(()=>import ('pages/pnspsUserSettingPage/')));
-const UserSearchPage = Loadable(lazy(()=>import ('pages/pnspsUserSearchPage')));
+const UserSearchPage = Loadable(lazy(()=>import ('pages/pnspsUserSearchPage/')));
 const UserMaintainPage = Loadable(lazy(() => import('pages/pnspsUserDetailPage')));
 const UserGroupSearchPage = Loadable(lazy(() => import('pages/pnspsUserGroupSearchPage')));
 const UserGroupDetailPage = Loadable(lazy(() => import('pages/pnspsUserGroupDetailPage')));
@@ -35,10 +34,6 @@ const SettingRoutes = {
             path: '/user/:id',
             element: <UserMaintainPage />
         },
-        {
-            path: 'usersetting',
-            element: <UserSettingPage />
-        },
         {
             path: 'setting',
             element: <SettingPage />