alex
/
PNSPS-frontend-MaterialUI
1
0
Forkuj 0
Kod Zgłoszenia 0 Oczekujące zmiany 0 Wydania 0 Wiki Aktywność
Przeglądaj źródła

update client search layout

master
jason.lam 1 rok temu
rodzic
55ca5d036a
commit
e2fe3f62d9
10 zmienionych plików z 379 dodań i 397 usunięć
Widok podzielony
Opcje porównania
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania
  1. +97
    -106
      src/pages/Organization/SearchPage/OrganizationSearchForm.js
  2. +1
    -1
      src/pages/Organization/SearchPage/index.js
  3. +47
    -52
      src/pages/User/SearchPage/UserSearchForm.js
  4. +1
    -1
      src/pages/User/SearchPage/index.js
  5. +19
    -23
      src/pages/User/SearchPage_Individual/UserSearchForm_Individual.js
  6. +4
    -2
      src/pages/User/SearchPage_Individual/index.js
  7. +135
    -139
      src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js
  8. +1
    -1
      src/pages/User/SearchPage_Organization/index.js
  9. +70
    -70
      src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js
  10. +4
    -2
      src/pages/pnspsUserGroupSearchPage/index.js

+ 97
- 106
src/pages/Organization/SearchPage/OrganizationSearchForm.js Wyświetl plik

@@ -1,7 +1,6 @@
// material-ui
import {
Button,
CardContent,
Grid, TextField,
Typography,
Autocomplete,
@@ -15,6 +14,8 @@ import * as React from "react";
import * as UrlUtils from "utils/ApiPathConst";
import * as HttpUtils from "utils/HttpUtils";
import * as ComboData from "utils/ComboData";
import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
import {ThemeProvider} from "@emotion/react";
// ==============================|| DASHBOARD - DEFAULT ||============================== //


@@ -62,119 +63,109 @@ const OrganizationSearchForm = ({ applySearch }) => {

<form onSubmit={handleSubmit(onSubmit)}>
{/*row 1*/}
<CardContent sx={{ px: 2.5, pt: 3 }}>
<Grid item justifyContent="space-between" alignItems="center">
<Typography variant="h5">Search Form</Typography>
<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="h5" >
Search Form
</Typography>
</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("brNo")}
id='brNo'
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("enCompanyName")}
id="enCompanyName"
label="Name (English)"
InputLabelProps={{
shrink: true
}}
/>
</Grid>

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

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3}}>
<Autocomplete
{...register("searchCreditor")}
id="searchCreditor"
size="small"
options={ComboData.CreditorStatus}
value={creditorSelected}
onChange={(event, newValue) => {
setCreditorSelected(newValue);
{/*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("brNo")}
id='brNo'
label="BR No."
InputLabelProps={{
shrink: true
}}
getOptionLabel={(option) => option.label}
renderInput={(params) => (
<TextField
{...params}
label="Status"
InputLabelProps={{
shrink: true
}}
/>
)}
/>
</Grid>

</Grid>

</Grid>

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

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

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3}}>
<Autocomplete
{...register("searchCreditor")}
id="searchCreditor"
size="small"
options={ComboData.CreditorStatus}
value={creditorSelected}
onChange={(event, newValue) => {
setCreditorSelected(newValue);
}}
getOptionLabel={(option) => option.label}
renderInput={(params) => (
<TextField
{...params}
label="Status"
InputLabelProps={{
shrink: true
}}
/>
)}
/>
</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={doExport}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
<Typography variant="h5">Export</Typography>
</Button>
</Grid>

<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<Button
size="large"
variant="contained"
onClick={resetForm}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
<Typography variant="h5">Clear</Typography>
</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'
}}>
<Typography variant="h5">Submit</Typography>
</Button>
{/*last row*/}
<Grid container maxWidth justifyContent="flex-end">
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Grid item sx={{mr: 3, mb: 3 }}>
<Button
variant="contained"
onClick={doExport}
>
Export
</Button>
</Grid>

<Grid item sx={{ mr: 3, mb: 3}}>
<Button
variant="contained"
onClick={resetForm}
>
Clear
</Button>
</Grid>

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

</Grid>
</form>
</MainCard>


+ 1
- 1
src/pages/Organization/SearchPage/index.js Wyświetl plik

@@ -76,7 +76,7 @@ const OrganizationSearchPage = () => {
</div>
</Grid>
{/*row 1*/}
<Grid item xs={12} md={12} lg={12}>
<Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
<SearchForm applySearch={applySearch} />
</Grid>
{/*row 2*/}


+ 47
- 52
src/pages/User/SearchPage/UserSearchForm.js Wyświetl plik

@@ -1,7 +1,7 @@
// material-uisubDivision
import {
Button,
CardContent, FormControlLabel,
FormControlLabel,
Grid, TextField,
Typography
} from '@mui/material';
@@ -19,6 +19,8 @@ import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
import { useNavigate } from "react-router";
import axios from "axios";
import { GET_EMAIL_LIST } from 'utils/ApiPathConst';
import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
import {ThemeProvider} from "@emotion/react";

// ==============================|| DASHBOARD - DEFAULT ||============================== //

@@ -76,15 +78,16 @@ const UserSearchForm = ({ applySearch }) => {
content={false}>

<form onSubmit={handleSubmit(onSubmit)}>
{/*row 1*/}
<CardContent sx={{ px: 2.5, pt: 3 }}>
<Grid item justifyContent="space-between" alignItems="center">
<Typography variant="h5">Search Form (GLD User)</Typography>
<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="h5" >
Search Form (GLD User)
</Typography>
</Grid>
</CardContent>
{/*row 2*/}

{/*row 2*/}
<Grid container alignItems={"center"}>
<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
@@ -156,56 +159,48 @@ const UserSearchForm = ({ applySearch }) => {
size="small"
/>
}
label={<Typography variant="h5">Locked</Typography>}
label={<Typography variant="h6">Locked</Typography>}
/>
</Grid>
</Grid>

{/*last row*/}
<Grid container direction="row"
justifyContent="space-between"
alignItems="center">
<Grid item xs={3} md={3} sx={{ ml: 3, mr: 1, mb: 3, mt: 3 }}>
<Button
size="large"
variant="contained"
onClick={handleNewUserClick}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
<AddCircleOutlineIcon sx={{ mb: 0.5 }} />
<Typography sx={{ ml: 1 }} variant="h5">New User</Typography>
</Button>
</Grid>
<Grid item xs={8} md={8} sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<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'
}}>
<Typography variant="h5">Clear</Typography>
</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'
}}>
<Typography variant="h5">Search</Typography>
</Button>
{/*last row*/}
<Grid container direction="row"
justifyContent="space-between"
alignItems="center">
<ThemeProvider theme={PNSPS_BUTTON_THEME}>

<Grid item xs={3} md={3} sx={{ ml: 3,mb: 3 }}>
<Button
variant="contained"
onClick={handleNewUserClick}
startIcon={<AddCircleOutlineIcon/>}
>
New User
</Button>
</Grid>
<Grid item xs={8} md={8}>
<Grid container maxWidth justifyContent="flex-end">
<Grid item sx={{ ml: 3, mr: 3, mb: 3,}}>
<Button
variant="contained"
onClick={resetForm}
>
Clear
</Button>
</Grid>

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


+ 1
- 1
src/pages/User/SearchPage/index.js Wyświetl plik

@@ -82,7 +82,7 @@ const UserSettingPage = () => {
</Grid>

{/*row 1*/}
<Grid item xs={12} md={12} lg={12}>
<Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
<SearchForm applySearch={applySearch} />
</Grid>
{/*row 2*/}


+ 19
- 23
src/pages/User/SearchPage_Individual/UserSearchForm_Individual.js Wyświetl plik

@@ -1,7 +1,6 @@
// material-ui
import {
Button,
CardContent,
Grid, TextField,
Autocomplete,
Typography
@@ -10,6 +9,8 @@ import MainCard from "../../../components/MainCard";
import { useForm } from "react-hook-form";
import { useState } from "react";
import * as React from "react";
import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
import {ThemeProvider} from "@emotion/react";
// ==============================|| DASHBOARD - DEFAULT ||============================== //


@@ -48,15 +49,16 @@ const UserSearchForm_Individual = ({ applySearch }) => {
content={false}>

<form onSubmit={handleSubmit(onSubmit)}>
{/*row 1*/}
<CardContent sx={{ px: 2.5, pt: 3 }}>
<Grid item justifyContent="space-between" alignItems="center">
<Typography variant="h5">Search Form</Typography>
<Grid container sx={{ 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="h5" >
Search Form
</Typography>
</Grid>
</CardContent>
{/*row 2*/}

{/*row 2*/}
<Grid container alignItems={"center"}>
<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
@@ -142,32 +144,26 @@ const UserSearchForm_Individual = ({ applySearch }) => {

{/*last row*/}
<Grid container maxWidth justifyContent="flex-end">
<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Grid item sx={{ ml: 3, mr: 3, mb: 3 }}>
<Button
size="large"
variant="contained"
onClick={resetForm}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
<Typography variant="h5">Clear</Typography>
>
Clear
</Button>
</Grid>

<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<Grid item sx={{ mb: 3}}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
<Typography variant="h5">Submit</Typography>
>
Submit
</Button>
</Grid>
</ThemeProvider>
</Grid>
</Grid>
</form>
</MainCard>


+ 4
- 2
src/pages/User/SearchPage_Individual/index.js Wyświetl plik

@@ -71,13 +71,15 @@ const UserSearchPage_Individual = () => {
<Grid item xs={12}>
<div style={BackgroundHead}>
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
<Typography ml={15} color='#FFF' variant="h4">View Individual User</Typography>
<Typography ml={15} color='#FFF' variant="h4">
View Individual User
</Typography>
</Stack>
</div>
</Grid>

{/*row 1*/}
<Grid item xs={12} md={12} lg={12}>
<Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
<SearchForm applySearch={applySearch} />
</Grid>
{/*row 2*/}


+ 135
- 139
src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js Wyświetl plik

@@ -1,7 +1,7 @@
// material-ui
import {
Button,
CardContent, Autocomplete,
Autocomplete,
Grid, TextField,
Typography
} from '@mui/material';
@@ -10,6 +10,8 @@ import {useForm} from "react-hook-form";

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


@@ -51,151 +53,145 @@ const UserSearchForm_Organization = ({applySearch}) => {
border={false}
content={false}>

<form onSubmit={handleSubmit(onSubmit)}>
{/*row 1*/}
<CardContent sx={{ px: 2.5, pt: 3 }}>
<Grid item justifyContent="space-between" alignItems="center">
<Typography variant="h5">Search Form</Typography>
</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("orgName")}
id="orgName"
label="Org 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("brNoStr")}
id="brNoStr"
label="BR No."
InputLabelProps={{
shrink: true
}}
/>
<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="h5" >
Search Form
</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("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
id="accountFilter"
size="small"
options={["All", "Active","Locked","Not verified"]}
value={accountFilter}
onChange={(event, newValue) => {
if (newValue !== null){
setAccountFilter(newValue);
}
}}
renderInput={(params) => (
<TextField {...params}
label="Status"
InputLabelProps={{
shrink: true
}}
<TextField
fullWidth
{...register("orgName")}
id="orgName"
label="Org 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("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
id="accountFilter"
size="small"
options={["All", "Active","Locked","Not verified"]}
value={accountFilter}
onChange={(event, newValue) => {
if (newValue !== null){
setAccountFilter(newValue);
}
}}
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>
</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>*/}


{/*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'
}}>
<Typography variant="h5">Clear</Typography>
</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'
}}>
<Typography variant="h5">Submit</Typography>
</Button>

{/*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"
onClick={resetForm}
>
Clear
</Button>
</Grid>

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


+ 1
- 1
src/pages/User/SearchPage_Organization/index.js Wyświetl plik

@@ -77,7 +77,7 @@ const UserSearchPage_Organization = () => {
</div>
</Grid>
{/*row 1*/}
<Grid item xs={12} md={12} lg={12}>
<Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
<SearchForm applySearch={applySearch} />
</Grid>
{/*row 2*/}


+ 70
- 70
src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js Wyświetl plik

@@ -1,7 +1,6 @@
// material-ui
import {
Button,
CardContent,
Grid, TextField,
Typography
} from '@mui/material';
@@ -10,6 +9,8 @@ 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";

// ==============================|| DASHBOARD - DEFAULT ||============================== //

@@ -37,83 +38,82 @@ const UserGroupSearchForm = ({ applySearch }) => {
>

<form onSubmit={handleSubmit(onSubmit)}>
{/*row 1*/}
<CardContent sx={{ px: 2.5, pt: 3 }}>
<Grid item justifyContent="space-between" alignItems="center">
<Typography variant="h5">Search Form</Typography>
<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="h5" >
Search Form
</Typography>
</Grid>
</CardContent>
{/*row 2*/}

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

{/*last row*/}
<Grid container direction="row"
justifyContent="space-between"
alignItems="center"
sx={{ mt: 3 }}
>
<Grid item xs={3} md={3} sx={{ ml: 3, mr: 1 }}>
<Button
variant="contained"
onClick={handleNewGroupClick}
startIcon={<AddCircleOutlineIcon sx={{alignItems:"center"}}/>}
>
<Typography variant="h5">New Group</Typography>
</Button>
</Grid>
<Grid item xs={8} md={8} sx={{ ml: 3, mr: 3 }}>
<Grid container maxWidth justifyContent="flex-end">
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
onClick={resetForm}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
<Typography variant="h5">Clear</Typography>
</Button>
</Grid>
{/*last row*/}
<Grid container direction="row"
justifyContent="space-between"
alignItems="center"
sx={{ mb: 3 }}
>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Grid item xs={3} md={3} sx={{ ml: 3}}>
<Button
variant="contained"
onClick={handleNewGroupClick}
startIcon={<AddCircleOutlineIcon sx={{alignItems:"center"}}/>}
>
New Group
</Button>
</Grid>
<Grid item xs={8} md={8}>
<Grid container maxWidth justifyContent="flex-end">
<Grid item sx={{mr:3}}>
<Button
variant="contained"
onClick={resetForm}
>
Clear
</Button>
</Grid>

<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
<Typography variant="h5">Search</Typography>
</Button>
<Grid item >
<Button
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
Search
</Button>
</Grid>
</Grid>
</Grid>
</ThemeProvider>
</Grid>
</Grid>
</form>


+ 4
- 2
src/pages/pnspsUserGroupSearchPage/index.js Wyświetl plik

@@ -79,13 +79,15 @@ const UserGroupSearchPanel = () => {
<Grid item xs={12}>
<div style={BackgroundHead}>
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
<Typography ml={15} color='#FFF' variant="h4">View User Group</Typography>
<Typography ml={15} color='#FFF' variant="h4">
View User Group
</Typography>
</Stack>
</div>
</Grid>

{/*row 1*/}
<Grid item xs={12} md={12} lg={12}>
<Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
<UserGroupSearchForm applySearch={applySearch} />
</Grid>
{/*row 2*/}


Napisz Podgląd
Ładowanie…
Anuluj
Zapisz