kelvinsuen
/
LIONER-frontend
1
0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki アクティビティ
ソースを参照

no message

master
[email protected] 2週間前
親
f49ace98af
コミット
c25b80d37f
1個のファイルの変更、107行の追加、131行の削除
分割表示
差分オプション
統計情報を表示 Patchファイルをダウンロード Diffファイルをダウンロード
  1. +107
    -131
      src/pages/lionerUserSearchPage/UserSearchForm.js

+ 107
- 131
src/pages/lionerUserSearchPage/UserSearchForm.js ファイルの表示

@@ -1,50 +1,45 @@
// material-ui
import {
Button,
FormControlLabel,
Grid, TextField,
Typography
Grid,
TextField,
Typography,
Dialog,
DialogTitle,
DialogContent,
DialogActions
} from '@mui/material';
import MainCard from "../../components/MainCard";
import {useForm} from "react-hook-form";

import {useEffect, useState} from "react";
import Autocomplete from '@mui/material/Autocomplete';
import Checkbox from "@mui/material/Checkbox";
import * as React from "react";
import axios from "axios"; // Added missing import
import {apiPath} from "../../auth/utils";
// import {GET_USER_GROUP_COMBO_LIST} from "../../utils/ApiPathConst";
import {useNavigate} from 'react-router-dom';
import {ThemeProvider} from "@emotion/react";
import {LIONER_BUTTON_THEME} from "../../themes/colorConst";
import {USER_GROUP_COMBO} from "../../utils/ComboConst";
import {CARD_MAX_WIDTH} from "../../themes/themeConst";

// ==============================|| DASHBOARD - DEFAULT ||============================== //
// ==============================|| USER SEARCH FORM ||============================== //

const UserSearchForm = ({applySearch}) => {

const navigate = useNavigate()
const [type, setType] = useState([]);
const navigate = useNavigate();
const [userGroup, setUserGroup] = useState(null);
const [selectedUserType, setSelectedUserType] = useState(null);
const [userGroupList, setUserGroupList] = useState([]);
const [locked, setLocked] = useState(false);
const [locked] = useState(false);
const [twoFactorEnabled] = useState(false);
// States for Report Dialog
const [openReportDialog, setOpenReportDialog] = useState(false);
const [reportDates, setReportDates] = useState({ fromDate: '', toDate: '' });

const { reset, register, handleSubmit } = useForm();

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 = {
username: data.userName,
fullname: data.fullName,
post: data.post,
groupId: userGroup !== null ? userGroup.id : null,
email: data.email,
phone: data.phone,
@@ -54,25 +49,35 @@ const UserSearchForm = ({applySearch}) => {
applySearch(temp);
};

useEffect(() => {
// axios.get(`${apiPath}${GET_USER_GROUP_COMBO_LIST}`)
// .then((response) => {
// if (response.status === 200) {
// setUserGroupList(response.data.records);
// }
// })
// .catch(error => {
// console.log(error);
// return false;
// });
const handleOpenReport = () => setOpenReportDialog(true);
const handleCloseReport = () => {
setOpenReportDialog(false);
setReportDates({ fromDate: '', toDate: '' });
};

}, []);
const handleExport = () => {
axios.get(`${apiPath}/client/excel-client-consultant-report`, {
params: reportDates,
responseType: 'blob',
})
.then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', `Client_Consultant_Report_${reportDates.fromDate}_to_${reportDates.toDate}.xlsx`);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
handleCloseReport();
})
.catch(error => {
console.error("Export failed", error);
});
};

function resetForm(){
setType([]);
setUserGroup(null);
setSelectedUserType(null);
setLocked(false);
reset();
}

@@ -85,140 +90,111 @@ const UserSearchForm = ({applySearch}) => {
content={false}
sx={{width:CARD_MAX_WIDTH}}
>

<form onSubmit={handleSubmit(onSubmit)}>
{/*row 1*/}
<Grid sx={{mb:2}}/>

{/*row 2*/}
<Grid container alignItems={"center"}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5 }}>
<Typography variant="lionerLabel" component="span">
Username
</Typography>
<TextField
fullWidth
{...register("userName")}
inputProps={{maxLength: 50}}
id='userName'
autoComplete="off"
/>
<Typography variant="lionerLabel" component="span">Username</Typography>
<TextField fullWidth {...register("userName")} inputProps={{maxLength: 50}} id='userName' autoComplete="off" />
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5 }}>
<Typography variant="lionerLabel" component="span">
Full Name
</Typography>
<TextField
fullWidth
{...register("fullName")}
inputProps={{maxLength: 90}}
id="fullName"
autoComplete="off"
/>
<Typography variant="lionerLabel" component="span">Full Name</Typography>
<TextField fullWidth {...register("fullName")} inputProps={{maxLength: 90}} id="fullName" autoComplete="off" />
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5 }}>
<Typography variant="lionerLabel" component="span">
User Group
</Typography>
<Typography variant="lionerLabel" component="span">User Group</Typography>
<Autocomplete
disablePortal
id="user-group-combo"
size="small"
value={userGroup === null? null : userGroup}
options={USER_GROUP_COMBO}//{userGroupList}
onChange={(event, newValue) => {
setUserGroup(newValue);
}}
value={userGroup}
options={USER_GROUP_COMBO}
onChange={(event, newValue) => setUserGroup(newValue)}
renderInput={(params) => <TextField {...params}/>}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5 }}>
<Typography variant="lionerLabel" component="span">
Email
</Typography>
<TextField
fullWidth
{...register("email")}
inputProps={{maxLength: 120}}
id="email"
autoComplete="off"
/>
<Typography variant="lionerLabel" component="span">Email</Typography>
<TextField fullWidth {...register("email")} inputProps={{maxLength: 120}} id="email" autoComplete="off" />
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5 }}>
<Typography variant="lionerLabel" component="span">
Phone
</Typography>
<TextField
fullWidth
{...register("phone")}
inputProps={{maxLength: 30}}
id="phone"
autoComplete="off"
/>
<Typography variant="lionerLabel" component="span">Phone</Typography>
<TextField fullWidth {...register("phone")} inputProps={{maxLength: 30}} id="phone" autoComplete="off" />
</Grid>

{/* <Grid item xs={9} s={6} md={5} lg={3} sx={{mt:2.5,ml:3, mr:3 }}>
<Typography variant="lionerLabel" component="span">
Show Locked User Only
</Typography>
<Checkbox
checked={locked}
onChange={(event) => setLocked(event.target.checked)}
name="checked"
color="primary"
size="medium"
/>
</Grid> */}

</Grid>


{/*last row*/}

<Grid container maxWidth justifyContent="space-between" sx={{mt:1.5,mb:2}}>
<Grid container justifyContent="space-between" sx={{mt:1.5, mb:2}}>
<ThemeProvider theme={LIONER_BUTTON_THEME}>
<Grid item>
<Grid container>
<Grid item sx={{ml:3, mr:1.5, }}>
<Button
variant="contained"
type="submit"
color="save">
Search
</Button>
<Grid item sx={{ml:3, mr:1.5}}>
<Button variant="contained" type="submit" color="save">Search</Button>
</Grid>

<Grid item sx={{ml:1.5, mr:3, mb:0.5 }}>
<Button
variant="contained"
onClick={resetForm}
color="cancel">
Clear
<Grid item sx={{ml:1.5, mr:1.5}}>
<Button variant="contained" onClick={resetForm} color="cancel">Clear</Button>
</Grid>
<Grid item sx={{ml:1.5, mr:3}}>
<Button variant="contained" onClick={handleOpenReport} color="primary">
Client Consultant Report
</Button>
</Grid>
</Grid>
</Grid>

<Grid item sx={{ml:3, mr:3, mb:0.5 }}>
<Button
variant="contained"
onClick={createNewUser}
color="create">
New User
</Button>
<Button variant="contained" onClick={createNewUser} color="create">New User</Button>
</Grid>


</ThemeProvider>

</Grid>
</form>

{/* Report Criteria Dialog */}
<Dialog open={openReportDialog} onClose={handleCloseReport} fullWidth maxWidth="xs">
<DialogTitle>Export Client Consultant Report</DialogTitle>
<DialogContent>
<Grid container spacing={2} sx={{ mt: 0.5 }}>
<Grid item xs={12}>
<Typography variant="lionerLabel">From Date</Typography>
<TextField
fullWidth
type="date"
InputLabelProps={{ shrink: true }}
value={reportDates.fromDate}
onChange={(e) => setReportDates({ ...reportDates, fromDate: e.target.value })}
/>
</Grid>
<Grid item xs={12}>
<Typography variant="lionerLabel">To Date</Typography>
<TextField
fullWidth
type="date"
InputLabelProps={{ shrink: true }}
value={reportDates.toDate}
onChange={(e) => setReportDates({ ...reportDates, toDate: e.target.value })}
/>
</Grid>
</Grid>
</DialogContent>
<DialogActions sx={{ p: 3 }}>
<Button onClick={handleCloseReport} color="inherit">Cancel</Button>
<ThemeProvider theme={LIONER_BUTTON_THEME}>
<Button
onClick={handleExport}
variant="contained"
color="save"
disabled={!reportDates.fromDate || !reportDates.toDate}
>
Export Excel
</Button>
</ThemeProvider>
</DialogActions>
</Dialog>
</MainCard>
);
};

export default UserSearchForm;
export default UserSearchForm;

書き込み プレビュー
読み込み中…
キャンセル
保存