PNSPS-frontend-MaterialUI/src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js

// material-ui
import {
    Button,
    Autocomplete,
    Grid, TextField,
    Typography
} from '@mui/material';
import MainCard from "../../../components/MainCard";
import {useForm} from "react-hook-form";

import { useState} from "react";
import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
import {ThemeProvider} from "@emotion/react";
// ==============================|| DASHBOARD - DEFAULT ||============================== //


const UserSearchForm_Organization = ({applySearch}) => {

    const [type, setType] = useState([]);
    const [accountFilter, setAccountFilter] = useState("All");


    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,
            fullenName: data.fullenName,
            email: data.email,
            phone: data.phone,
            brNoStr: data.brNoStr,
            orgName: data.orgName,
            accountFilter: accountFilter=="All"?null:accountFilter,
        };
        applySearch(temp);
    };

    function resetForm(){
        setType([]);
        setAccountFilter("All");
        reset();
    }

    return (
        <MainCard xs={12} md={12} lg={12}
                  border={false}
                  content={false}>

            <form onSubmit={handleSubmit(onSubmit)} >
                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
                    {/*row 1*/}
                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
                        <Typography variant="pnspsFormHeader" >
                            Search
                        </Typography>
                    </Grid>
                    {/*row 2*/}

                    <Grid container display="flex" alignItems={"center"}>
                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
                            <TextField
                                fullWidth
                                {...register("orgName")}
                                id="orgName"
                                label="Organisation"
                                InputLabelProps={{
                                    shrink: true
                                }}
                            />
                        </Grid>

                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
                            <TextField
                                fullWidth
                                {...register("brNoStr")}
                                id="brNoStr"
                                label="BR No."
                                InputLabelProps={{
                                    shrink: true
                                }}
                            />
                        </Grid>

                        <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"
                                InputLabelProps={{
                                    shrink: true
                                }}
                            />
                        </Grid>

                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
                            <TextField
                                fullWidth
                                {...register("contactPerson")}
                                id="contactPerson"
                                label="Name"
                                InputLabelProps={{
                                    shrink: true
                                }}
                            />
                        </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"
                                InputLabelProps={{
                                    shrink: true
                                }}
                            />
                        </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"
                                InputLabelProps={{
                                    shrink: true
                                }}
                            />
                        </Grid>

                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
                                     <Autocomplete
                                      {...register("accountFilter")}
                                        disablePortal={false}
                                        id="accountFilter"
                                        size="small"
                                        options={["All", "Active","Locked","Not Verified"]}
                                        value={accountFilter}
                                        onChange={(event, newValue) => {
                                        if (newValue !== null){
                                            setAccountFilter(newValue);
                                        }else{
                                            setAccountFilter("All");
                                        }
                                    }}
                                        renderInput={(params) => (
                                        <TextField {...params}
                                            label="Status"
                                            InputLabelProps={{
                                                shrink: true
                                            }}
                                        />
                                        )}
                                    />
                        </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">
                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                        <Grid item sx={{ml:3, mr:3, mb:3}}>
                            <Button
                                variant="contained"
                                color="cancel"
                                onClick={resetForm}
                                >
                                Reset
                            </Button>
                        </Grid>

                        <Grid item sx={{mb:3}}>
                            <Button
                                variant="contained"
                                type="submit"
                                >
                                Submit
                            </Button>
                        </Grid>
                        </ThemeProvider>
                    </Grid>
                </Grid>
            </form>
        </MainCard>
    );
};

export default UserSearchForm_Organization;