PNSPS-frontend-MaterialUI/src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js

// material-ui
import {
    Button,
    Grid, TextField,
    Typography
} from '@mui/material';
import MainCard from "../../components/MainCard";
import { useForm } from "react-hook-form";
import * as React from "react";
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
import { useNavigate } from "react-router";
import { PNSPS_BUTTON_THEME } from "../../themes/buttonConst";
import { ThemeProvider } from "@emotion/react";
import { isGrantedAny } from "auth/utils";
// ==============================|| DASHBOARD - DEFAULT ||============================== //

const UserGroupSearchForm = ({ applySearch, onGridReady, searchCriteria }) => {
    const navigate = useNavigate();

    const { reset, register, handleSubmit } = useForm()
    const onSubmit = (data) => {
        applySearch(data);
    };

    function resetForm() {
        reset({
            name:"",
            description:""
        });
    }

    const handleNewGroupClick = (id) => {
        // console.log(id)
        navigate('/userGroup/' + id);
    };

    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("name")}
                                id='userGroupName'
                                label="User Group Name"
                                defaultValue={searchCriteria.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("description")}
                                id="userGroupDescription"
                                label="User Group Description"
                                defaultValue={searchCriteria.description}
                                InputLabelProps={{
                                    shrink: true
                                }}
                            />
                        </Grid>
                    </Grid>

                    {/*last row*/}
                    <Grid container direction="row"
                        justifyContent="space-between"
                        alignItems="center"
                        spacing={3}
                        sx={{ mb: 3 }}
                    >
                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                            {
                                isGrantedAny("MAINTAIN_GROUP") ?
                                    <Grid item xs={3} md={3} >
                                        <Button
                                            variant="contained"
                                            onClick={handleNewGroupClick}
                                            startIcon={<AddCircleOutlineIcon sx={{ alignItems: "center" }} />}
                                        >
                                            New Group
                                        </Button>
                                    </Grid>
                                    :
                                    <Grid item xs={3} md={3}></Grid>
                            }

                            <Grid item xs={8} md={8}>
                                <Grid container maxWidth justifyContent="flex-end" spacing={3}>
                                    <Grid item >
                                        <Button
                                            variant="contained"
                                            color="cancel"
                                            onClick={resetForm}
                                        >
                                            Reset
                                        </Button>
                                    </Grid>

                                    <Grid item >
                                        <Button
                                            variant="contained"
                                            type="submit"
                                            disabled={onGridReady}
                                            sx={{
                                                textTransform: 'capitalize',
                                                alignItems: 'end'
                                        }}>
                                            Search
                                        </Button>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </ThemeProvider>
                    </Grid>
                </Grid>
            </form>
        </MainCard>
    );
};

export default UserGroupSearchForm;