Skip to content

Commit 6f8de5c

Browse files
longshuicylongshuicy
authored
804 move searchbox to top for metadata definition and group page (#815)
* make a new generic search component and clean up the group page * rewrite the search page for metadata defintion as well
1 parent 2d0742f commit 6f8de5c

File tree

3 files changed

+113
-118
lines changed

3 files changed

+113
-118
lines changed

‎frontend/src/components/groups/Groups.tsx‎

Lines changed: 18 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,14 @@ import {
77
DialogContent,
88
DialogTitle,
99
Grid,
10-
IconButton,
11-
InputBase,
1210
} from "@mui/material";
1311
import { RootState } from "../../types/data";
1412
import { useDispatch, useSelector } from "react-redux";
1513
import {
1614
fetchGroups,
1715
searchGroups as searchGroupsAction,
1816
} from "../../actions/group";
19-
import { ArrowBack, ArrowForward, SearchOutlined } from "@material-ui/icons";
17+
import { ArrowBack, ArrowForward } from "@material-ui/icons";
2018
import { Link } from "react-router-dom";
2119
import Paper from "@mui/material/Paper";
2220
import Table from "@mui/material/Table";
@@ -26,12 +24,11 @@ import TableCell from "@mui/material/TableCell";
2624
import TableBody from "@mui/material/TableBody";
2725
import TableContainer from "@mui/material/TableContainer";
2826
import GroupsIcon from "@mui/icons-material/Groups";
29-
import { theme } from "../../theme";
3027
import Layout from "../Layout";
31-
import { MainBreadcrumbs } from "../navigation/BreadCrumb";
3228
import GroupAddIcon from "@mui/icons-material/GroupAdd";
3329
import { CreateGroup } from "./CreateGroup";
3430
import { ErrorModal } from "../errors/ErrorModal";
31+
import { GenericSearchBox } from "../search/GenericSearchBox";
3532

3633
export function Groups() {
3734
// Redux connect equivalent
@@ -55,14 +52,6 @@ export function Groups() {
5552
const [searchTerm, setSearchTerm] = useState<string>("");
5653
const [createGroupOpen, setCreateGroupOpen] = useState<boolean>(false);
5754

58-
// for breadcrumb
59-
const paths = [
60-
{
61-
name: "Groups",
62-
url: "/groups",
63-
},
64-
];
65-
6655
// component did mount
6756
useEffect(() => {
6857
listGroups(skip, limit);
@@ -124,11 +113,8 @@ export function Groups() {
124113
<CreateGroup setCreateGroupOpen={setCreateGroupOpen} />
125114
</DialogContent>
126115
</Dialog>
127-
{/*breadcrumb*/}
128116
<Grid container>
129-
<Grid item xs={8} sx={{ display: "flex", alignItems: "center" }}>
130-
<MainBreadcrumbs paths={paths} />
131-
</Grid>
117+
<Grid item xs={8}></Grid>
132118
<Grid item xs={4}>
133119
<Button
134120
variant="contained"
@@ -142,49 +128,19 @@ export function Groups() {
142128
</Button>
143129
</Grid>
144130
</Grid>
145-
<br />
146-
<Grid container>
147-
<Grid item xs={3}>
148-
<Box
149-
component="form"
150-
sx={{
151-
p: "2px 4px",
152-
display: "flex",
153-
alignItems: "left",
154-
backgroundColor: theme.palette.primary.contrastText,
155-
width: "80%",
156-
}}
157-
>
158-
<InputBase
159-
sx={{ ml: 1, flex: 1 }}
160-
placeholder="keyword for group"
161-
inputProps={{
162-
"aria-label": "Type in keyword to search for group",
163-
}}
164-
onChange={(e) => {
165-
setSearchTerm(e.target.value);
166-
}}
167-
onKeyDown={(e) => {
168-
if (e.key === "Enter") {
169-
e.preventDefault();
170-
searchGroups(searchTerm, skip, limit);
171-
}
172-
}}
173-
value={searchTerm}
174-
/>
175-
<IconButton
176-
type="button"
177-
sx={{ p: "10px" }}
178-
aria-label="search"
179-
onClick={() => {
180-
searchGroups(searchTerm, skip, limit);
181-
}}
182-
>
183-
<SearchOutlined />
184-
</IconButton>
185-
</Box>
131+
<Grid container spacing={2}>
132+
<Grid item xs={12}>
133+
<GenericSearchBox
134+
title="Search for Groups"
135+
searchPrompt="keyword for group"
136+
setSearchTerm={setSearchTerm}
137+
searchTerm={searchTerm}
138+
searchFunction={searchGroups}
139+
skip={skip}
140+
limit={limit}
141+
/>
186142
</Grid>
187-
<Grid item xs={9}>
143+
<Grid item xs={12}>
188144
<TableContainer component={Paper}>
189145
<Table sx={{ minWidth: 650 }} aria-label="simple table">
190146
<TableHead>
@@ -219,7 +175,9 @@ export function Groups() {
219175
return (
220176
<TableRow
221177
key={group.id}
222-
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
178+
sx={{
179+
"&:last-child td, &:last-child th": { border: 0 },
180+
}}
223181
>
224182
<TableCell scope="row" key={group.id}>
225183
<Button component={Link} to={`/groups/${group.id}`}>

‎frontend/src/components/metadata/MetadataDefinitions.tsx‎

Lines changed: 15 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,14 @@ import {
88
DialogTitle,
99
Grid,
1010
IconButton,
11-
InputBase,
1211
} from "@mui/material";
1312
import { RootState } from "../../types/data";
1413
import { useDispatch, useSelector } from "react-redux";
1514
import {
1615
fetchMetadataDefinitions as fetchMetadataDefinitionsAction,
1716
searchMetadataDefinitions as searchMetadataDefinitionsAction,
1817
} from "../../actions/metadata";
19-
import { ArrowBack, ArrowForward, SearchOutlined } from "@material-ui/icons";
18+
import { ArrowBack, ArrowForward } from "@material-ui/icons";
2019
import Paper from "@mui/material/Paper";
2120
import Table from "@mui/material/Table";
2221
import TableHead from "@mui/material/TableHead";
@@ -25,14 +24,13 @@ import TableCell from "@mui/material/TableCell";
2524
import TableBody from "@mui/material/TableBody";
2625
import TableContainer from "@mui/material/TableContainer";
2726
import InfoIcon from "@mui/icons-material/Info";
28-
import { theme } from "../../theme";
2927
import Layout from "../Layout";
30-
import { MainBreadcrumbs } from "../navigation/BreadCrumb";
3128
import { ErrorModal } from "../errors/ErrorModal";
3229
import { CreateMetadataDefinition } from "./CreateMetadataDefinition";
3330
import DeleteIcon from "@mui/icons-material/Delete";
3431
import DeleteMetadataDefinitionModal from "./DeleteMetadataDefinitionModal";
3532
import { Link } from "react-router-dom";
33+
import { GenericSearchBox } from "../search/GenericSearchBox";
3634

3735
export function MetadataDefinitions() {
3836
// Redux connect equivalent
@@ -67,14 +65,6 @@ export function MetadataDefinitions() {
6765
const [selectedMetadataDefinition, setSelectedMetadataDefinition] =
6866
useState();
6967

70-
// for breadcrumb
71-
const paths = [
72-
{
73-
name: "Metadata Definitions",
74-
url: "/metadata-definitions",
75-
},
76-
];
77-
7868
// component did mount
7969
useEffect(() => {
8070
listMetadataDefinitions(null, skip, limit);
@@ -149,11 +139,8 @@ export function MetadataDefinitions() {
149139
/>
150140
</DialogContent>
151141
</Dialog>
152-
{/*breadcrumb*/}
153142
<Grid container>
154-
<Grid item xs={8} sx={{ display: "flex", alignItems: "center" }}>
155-
<MainBreadcrumbs paths={paths} />
156-
</Grid>
143+
<Grid item xs={8}></Grid>
157144
<Grid item xs={4}>
158145
<Button
159146
variant="contained"
@@ -168,49 +155,19 @@ export function MetadataDefinitions() {
168155
</Grid>
169156
</Grid>
170157
<br />
171-
<Grid container>
172-
<Grid item xs={3}>
173-
<Box
174-
component="form"
175-
sx={{
176-
p: "2px 4px",
177-
display: "flex",
178-
alignItems: "left",
179-
backgroundColor: theme.palette.primary.contrastText,
180-
width: "80%",
181-
}}
182-
>
183-
<InputBase
184-
sx={{ ml: 1, flex: 1 }}
185-
placeholder="keyword for metadat definition"
186-
inputProps={{
187-
"aria-label":
188-
"Type in keyword to search for metadat definition",
189-
}}
190-
onChange={(e) => {
191-
setSearchTerm(e.target.value);
192-
}}
193-
onKeyDown={(e) => {
194-
if (e.key === "Enter") {
195-
e.preventDefault();
196-
searchMetadataDefinitions(searchTerm, skip, limit);
197-
}
198-
}}
199-
value={searchTerm}
200-
/>
201-
<IconButton
202-
type="button"
203-
sx={{ p: "10px" }}
204-
aria-label="search"
205-
onClick={() => {
206-
searchMetadataDefinitions(searchTerm, skip, limit);
207-
}}
208-
>
209-
<SearchOutlined />
210-
</IconButton>
211-
</Box>
158+
<Grid container spacing={2}>
159+
<Grid item xs={12}>
160+
<GenericSearchBox
161+
title="Search for Metadata Definitions"
162+
searchPrompt="keyword for metadata definition"
163+
setSearchTerm={setSearchTerm}
164+
searchTerm={searchTerm}
165+
searchFunction={searchMetadataDefinitions}
166+
skip={skip}
167+
limit={limit}
168+
/>
212169
</Grid>
213-
<Grid item xs={9}>
170+
<Grid item xs={12}>
214171
<TableContainer component={Paper}>
215172
<Table sx={{ minWidth: 650 }} aria-label="simple table">
216173
<TableHead>

‎frontend/src/components/search/GenericSearchBox.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import Typography from "@mui/material/Typography";
2+
import { theme } from "../../theme";
3+
import { Box, IconButton, InputBase } from "@mui/material";
4+
import { SearchOutlined } from "@material-ui/icons";
5+
import React from "react";
6+
7+
type GenericSearchBoxProps = {
8+
title: string;
9+
searchPrompt: string;
10+
setSearchTerm: any;
11+
searchTerm: string;
12+
searchFunction: any;
13+
skip?: number;
14+
limit?: number;
15+
};
16+
17+
export function GenericSearchBox(props: GenericSearchBoxProps) {
18+
const {
19+
title,
20+
searchPrompt,
21+
setSearchTerm,
22+
searchTerm,
23+
searchFunction,
24+
skip,
25+
limit,
26+
} = props;
27+
return (
28+
<>
29+
<Typography
30+
sx={{
31+
fontSize: "1rem",
32+
color: theme.palette.primary.light,
33+
fontWeight: 600,
34+
}}
35+
>
36+
{title}
37+
</Typography>
38+
<Box
39+
component="form"
40+
sx={{
41+
border: "1px solid #ced4da",
42+
borderRadius: "6px",
43+
mb: 2,
44+
p: "2px 4px",
45+
display: "flex",
46+
alignItems: "left",
47+
backgroundColor: theme.palette.primary.contrastText,
48+
}}
49+
>
50+
<InputBase
51+
sx={{ ml: 1, flex: 1 }}
52+
placeholder={searchPrompt}
53+
inputProps={{
54+
"aria-label": { searchPrompt },
55+
}}
56+
onChange={(e) => {
57+
setSearchTerm(e.target.value);
58+
}}
59+
onKeyDown={(e) => {
60+
if (e.key === "Enter") {
61+
e.preventDefault();
62+
searchFunction(searchTerm, skip, limit);
63+
}
64+
}}
65+
value={searchTerm}
66+
/>
67+
<IconButton
68+
type="button"
69+
sx={{ p: "10px" }}
70+
aria-label="search"
71+
onClick={() => {
72+
searchFunction(searchTerm, skip, limit);
73+
}}
74+
>
75+
<SearchOutlined />
76+
</IconButton>
77+
</Box>
78+
</>
79+
);
80+
}

0 commit comments

Comments
 (0)