Revize 41a11178
Přidáno uživatelem Václav Honzík před asi 2 roky(ů)
| frontend/src/features/Catalog/CatalogFilter.tsx | ||
|---|---|---|
| 18 | 18 |
const CatalogFilter = () => {
|
| 19 | 19 |
const dispatch = useDispatch() |
| 20 | 20 |
|
| 21 |
const filterOpen = useSelector((state: RootState) => state.catalog.filterOpen) |
|
| 21 |
const filterOpen = useSelector( |
|
| 22 |
(state: RootState) => state.catalog.filterOpen |
|
| 23 |
) |
|
| 22 | 24 |
const toggleFilter = () => {
|
| 23 | 25 |
dispatch(setFilterOpen(!filterOpen)) |
| 24 | 26 |
} |
| ... | ... | |
| 35 | 37 |
startIcon={
|
| 36 | 38 |
filterOpen ? <FilterListOffIcon /> : <FilterListIcon /> |
| 37 | 39 |
} |
| 38 |
// variant="outlined"
|
|
| 40 |
variant="outlined" |
|
| 39 | 41 |
color="primary" |
| 40 | 42 |
onClick={toggleFilter}
|
| 43 |
sx={{ mb: 2 }}
|
|
| 41 | 44 |
> |
| 42 | 45 |
Filter |
| 43 | 46 |
</Button> |
| 44 | 47 |
<Collapse in={filterOpen} timeout="auto" unmountOnExit>
|
| 45 |
<Grid container spacing={1} alignItems="stretch">
|
|
| 46 |
<Grid item xs={6}>
|
|
| 47 |
<Stack direction="column" spacing={1} sx={{ mt: 2 }}>
|
|
| 48 |
<Stack direction="row" spacing={2}>
|
|
| 49 |
<TextField |
|
| 50 |
size="small" |
|
| 51 |
id="name" |
|
| 52 |
label="Name" |
|
| 53 |
onChange={(e: any) => {
|
|
| 54 |
dispatch(setFilter({
|
|
| 55 |
...filter, |
|
| 56 |
name: e.target.value |
|
| 57 |
})) |
|
| 58 |
}} |
|
| 59 |
value={filter.name}
|
|
| 60 |
/> |
|
| 61 |
<TextField |
|
| 62 |
size="small" |
|
| 63 |
id="type" |
|
| 64 |
label="Type" |
|
| 65 |
onChange={(e: any) => {
|
|
| 66 |
dispatch(setFilter({
|
|
| 67 |
...filter, |
|
| 68 |
type: e.target.value |
|
| 69 |
})) |
|
| 70 |
}} |
|
| 71 |
value={filter.type}
|
|
| 72 |
/> |
|
| 73 |
</Stack> |
|
| 74 |
<Stack direction="row" spacing={2}>
|
|
| 75 |
<TextField |
|
| 76 |
size="small" |
|
| 77 |
id="writtenForm" |
|
| 78 |
label="Written form" |
|
| 79 |
/> |
|
| 80 |
<TextField |
|
| 81 |
size="small" |
|
| 82 |
id="stateOrTerritory" |
|
| 83 |
label="State or territory" |
|
| 84 |
onChange={(e: any) => {
|
|
| 85 |
dispatch(setFilter({
|
|
| 86 |
...filter, |
|
| 87 |
country: e.target.value |
|
| 88 |
})) |
|
| 89 |
}} |
|
| 90 |
value={filter.country}
|
|
| 91 |
/> |
|
| 92 |
<TextField |
|
| 93 |
size="small" |
|
| 94 |
id="groupBy" |
|
| 95 |
label="Group by" |
|
| 96 |
/> |
|
| 97 |
</Stack> |
|
| 98 |
</Stack> |
|
| 99 |
</Grid> |
|
| 100 |
<Grid item xs sx={{ mt: 'auto', ml: 1, mb: 1 }}>
|
|
| 101 |
<Stack |
|
| 102 |
direction="row" |
|
| 103 |
justifyContent="flex-start" |
|
| 104 |
alignItems="flex-end" |
|
| 105 |
> |
|
| 106 |
<Button startIcon={<ManageSearchIcon/>} variant="contained" onClick={applyFilter}>
|
|
| 107 |
Search |
|
| 108 |
</Button> |
|
| 109 |
</Stack> |
|
| 110 |
</Grid> |
|
| 111 |
</Grid> |
|
| 48 |
<Stack direction="row" spacing={2} sx={{ mt: 2 }}>
|
|
| 49 |
<TextField |
|
| 50 |
size="small" |
|
| 51 |
id="name" |
|
| 52 |
label="Name" |
|
| 53 |
onChange={(e: any) => {
|
|
| 54 |
dispatch( |
|
| 55 |
setFilter({
|
|
| 56 |
...filter, |
|
| 57 |
name: e.target.value, |
|
| 58 |
}) |
|
| 59 |
) |
|
| 60 |
}} |
|
| 61 |
value={filter.name}
|
|
| 62 |
/> |
|
| 63 |
<TextField |
|
| 64 |
size="small" |
|
| 65 |
id="type" |
|
| 66 |
label="Type" |
|
| 67 |
onChange={(e: any) => {
|
|
| 68 |
dispatch( |
|
| 69 |
setFilter({
|
|
| 70 |
...filter, |
|
| 71 |
type: e.target.value, |
|
| 72 |
}) |
|
| 73 |
) |
|
| 74 |
}} |
|
| 75 |
value={filter.type}
|
|
| 76 |
/> |
|
| 77 |
<TextField |
|
| 78 |
size="small" |
|
| 79 |
id="writtenForm" |
|
| 80 |
label="Written form" |
|
| 81 |
/> |
|
| 82 |
|
|
| 83 |
<TextField |
|
| 84 |
size="small" |
|
| 85 |
id="stateOrTerritory" |
|
| 86 |
label="State or territory" |
|
| 87 |
onChange={(e: any) => {
|
|
| 88 |
dispatch( |
|
| 89 |
setFilter({
|
|
| 90 |
...filter, |
|
| 91 |
country: e.target.value, |
|
| 92 |
}) |
|
| 93 |
) |
|
| 94 |
}} |
|
| 95 |
value={filter.country}
|
|
| 96 |
/> |
|
| 97 |
<TextField size="small" id="groupBy" label="Group by" /> |
|
| 98 |
</Stack> |
|
| 99 |
<Stack alignItems="flex-end" sx={{ mt: 2 }}>
|
|
| 100 |
<Button |
|
| 101 |
startIcon={<ManageSearchIcon />}
|
|
| 102 |
variant="contained" |
|
| 103 |
onClick={applyFilter}
|
|
| 104 |
> |
|
| 105 |
Search |
|
| 106 |
</Button> |
|
| 107 |
</Stack> |
|
| 112 | 108 |
</Collapse> |
| 113 | 109 |
{filterOpen ? <Divider sx={{ mb: 5, mt: 1 }} /> : null}
|
| 114 | 110 |
</Fragment> |
Také k dispozici: Unified diff
map adjustments
re #9547