kelvinsuen
/
LIONER-frontend
1
0
Форк 0
Код Проблеми 0 Запити на злиття 0 Релізи 0 Вікі Активність
Переглянути джерело

no message

master
[email protected] 2 тижднів тому
джерело
f49ace98af
коміт
c25b80d37f
1 змінених файлів з 107 додано та 131 видалено
Об'єднаний перегляд
Параметри порівняння
Показати статистику Завантажити патч Завантажити файл різниці
  1. +107
    -131
      src/pages/lionerUserSearchPage/UserSearchForm.js

+ 107
- 131
src/pages/lionerUserSearchPage/UserSearchForm.js Переглянути файл

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

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


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


const UserSearchForm = ({applySearch}) => { const UserSearchForm = ({applySearch}) => {

const navigate = useNavigate()
const [type, setType] = useState([]);
const navigate = useNavigate();
const [userGroup, setUserGroup] = useState(null); 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) => { const onSubmit = (data) => {

let typeArray = [];

for(let i =0; i < type.length; i++){
typeArray.push(type[i].label);
}

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


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

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

{/*row 2*/}
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5 }}> <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>


<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5 }}> <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>


<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5 }}> <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 <Autocomplete
disablePortal disablePortal
id="user-group-combo" id="user-group-combo"
size="small" 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}/>} renderInput={(params) => <TextField {...params}/>}
/> />
</Grid> </Grid>


<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5 }}> <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>


<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5 }}> <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>

{/* <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> </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}> <ThemeProvider theme={LIONER_BUTTON_THEME}>
<Grid item> <Grid item>
<Grid container> <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>

<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> </Button>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>


<Grid item sx={{ml:3, mr:3, mb:0.5 }}> <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> </Grid>


</ThemeProvider> </ThemeProvider>

</Grid> </Grid>
</form> </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> </MainCard>
); );
}; };


export default UserSearchForm;
export default UserSearchForm;

Писати Попередній перегляд
Завантаження…
Відмінити
Зберегти