ruidy/ticket_manager
1
0
Fork 0
mirror of https://github.com/rjNemo/ticket_manager synced 2026-06-12 03:36:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update FilterBar

Browse source
This commit is contained in:
Ruidy Nemausat 2020-04-03 11:45:03 +02:00
parent 6de5e17b79
commit 05660e55aa
2 changed files with 47 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
client/src/components/FilterBar.tsx
View file

@ -1,5 +1,9 @@
import React, { FC, ChangeEvent, MouseEvent } from "react"; import React, { FC, ChangeEvent, MouseEvent } from "react";
import { useRouteMatch } from "react-router-dom"; import { useRouteMatch } from "react-router-dom";
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import { Grid } from "@material-ui/core";
// import { AccountCircle, FilterList, FilterListSharp } from "@material-ui/icons";
type IProps = { type IProps = {
filterText: string; filterText: string;
@ -7,35 +11,42 @@ type IProps = {
clearFilterText: (e: MouseEvent<HTMLInputElement>) => void; clearFilterText: (e: MouseEvent<HTMLInputElement>) => void;
}; };
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
"& > *": {
margin: theme.spacing(1),
width: "25ch"
}
},
margin: {
margin: theme.spacing(1)
}
})
);
export const FilterBar: FC<IProps> = ({ export const FilterBar: FC<IProps> = ({
filterText, filterText,
handleChange, handleChange
clearFilterText // clearFilterText
}) => { }) => {
const { url } = useRouteMatch(); const { url } = useRouteMatch();
const placeholder: string = url.split("/")[3] || "users"; const placeholder: string = url.split("/")[3] || "users";
const classes = useStyles();
return ( return (
<> <div className={classes.margin}>
<div className="nav-wrapper"> <Grid container spacing={1} alignItems="flex-end">
<div className="input-field"> <Grid item>
<input <TextField
// className="validate" id="input-with-icon-grid"
id="filter" variant="outlined"
type="search" label={`Filter ${placeholder}`}
required size="small"
name="filter"
value={filterText} value={filterText}
placeholder={`Filter ${placeholder}`}
onChange={handleChange} onChange={handleChange}
/> />
<label className="label-icon" htmlFor="search"> </Grid>
<i className="material-icons">filter_list</i> </Grid>
</label> </div>
<i className="material-icons" onClick={clearFilterText}>
close
</i>
</div>
</div>
</>
); );
}; };

23
client/src/components/ProjectList.tsx
View file

@ -6,6 +6,7 @@ import { put } from "../utils/http";
import { Constants } from "../utils/Constants"; import { Constants } from "../utils/Constants";
import { HttpResponse } from "../types/HttpResponse"; import { HttpResponse } from "../types/HttpResponse";
import { Project } from "../types/Project"; import { Project } from "../types/Project";
import { Container, Typography, Grid } from "@material-ui/core";
type IProps = { type IProps = {
projects: Project[]; projects: Project[];
@ -28,14 +29,20 @@ export const ProjectList: FC<IProps> = ({ projects }) => {
); );
return ( return (
<> <>
<div className="row valign-wrapper"> <Grid container>
<h3>Projects</h3> <Grid item xs>
<FilterBar <Typography variant="h4" component="h4">
filterText={filterText} Projects
handleChange={handleChange} </Typography>
clearFilterText={clearFilterText} </Grid>
/> <Grid item xs={4}>
</div> <FilterBar
filterText={filterText}
handleChange={handleChange}
clearFilterText={clearFilterText}
/>
</Grid>
</Grid>
<div className="col s12 grey lighten-1"> <div className="col s12 grey lighten-1">
<ul> <ul>
{filteredTickets.length === 0 ? ( {filteredTickets.length === 0 ? (