Projekt

Obecné

Profil

« Předchozí | Další » 

Revize 1c710f4f

Přidáno uživatelem Václav Honzík před asi 2 roky(ů)

filter functional

re #9545

Zobrazit rozdíly:

frontend/src/features/Catalog/Catalog.tsx
1 1 
import {
2 
    Box,
3 
    Button,
4 
    Collapse,
5 2 
    Container,
6 
    Grid,
7 3 
    Paper,
8 
    Stack,
9 
    TextField,
10 4 
    Typography,
11 5 
} from '@mui/material'
12 6 
import CatalogTable from './CatalogTable'
13 
import { Fragment, useState } from 'react'
7 
import { Fragment } from 'react'
8 
import CatalogFilter from './CatalogFilter'
14 9 

  		




  15
  10
  
    
const Catalog = () => {


  		




  16
  
  
    
    const [filterOpen, setFilterOpen] = useState(false)


  		




  17
  
  
    
    const toggleFilter = () => {


  		




  18
  
  
    
        setFilterOpen(!filterOpen)


  		




  19
  
  
    
    }


  		




  
  11
  
    
    


  		




  20
  12
  
    

  		




  21
  13
  
    
    return (


  		




  22
  14
  
    
        <Fragment>


  		




  ......




  27
  19
  
    
            >


  		




  28
  20
  
    
                <Container sx={{ mt: 4 }}>


  		




  29
  21
  
    
                    <Typography variant="h3" sx={{mb: 2}} fontWeight="bold" >Catalog</Typography>


  		




  30
  
  
    
                    <Button variant="outlined" color="primary" onClick={toggleFilter}>


  		




  31
  
  
    
                        Filter


  		




  32
  
  
    
                    </Button>


  		




  33
  
  
    
                    <Collapse in={filterOpen} timeout="auto" unmountOnExit>


  		




  34
  
  
    
                        <Grid container spacing={1} alignItems="stretch">


  		




  35
  
  
    
                            <Grid item xs={6}>


  		




  36
  
  
    
                                <Stack


  		




  37
  
  
    
                                    direction="column"


  		




  38
  
  
    
                                    spacing={1}


  		




  39
  
  
    
                                    sx={{ mt: 2 }}


  		




  40
  
  
    
                                >


  		




  41
  
  
    
                                    <Stack direction="row" spacing={2}>


  		




  42
  
  
    
                                        <TextField


  		




  43
  
  
    
                                            size="small"


  		




  44
  
  
    
                                            id="name"


  		




  45
  
  
    
                                            label="Name"


  		




  46
  
  
    
                                        />


  		




  47
  
  
    
                                        <TextField


  		




  48
  
  
    
                                            size="small"


  		




  49
  
  
    
                                            id="type"


  		




  50
  
  
    
                                            label="Type"


  		




  51
  
  
    
                                        />


  		




  52
  
  
    
                                    </Stack>


  		




  53
  
  
    
                                    <Stack direction="row" spacing={2}>


  		




  54
  
  
    
                                        <TextField


  		




  55
  
  
    
                                            size="small"


  		




  56
  
  
    
                                            id="writtenForm"


  		




  57
  
  
    
                                            label="Written form"


  		




  58
  
  
    
                                        />


  		




  59
  
  
    
                                        <TextField


  		




  60
  
  
    
                                            size="small"


  		




  61
  
  
    
                                            id="stateOrTerritory"


  		




  62
  
  
    
                                            label="State or territory"


  		




  63
  
  
    
                                        />


  		




  64
  
  
    
                                        <TextField


  		




  65
  
  
    
                                            size="small"


  		




  66
  
  
    
                                            id="groupBy"


  		




  67
  
  
    
                                            label="Group by"


  		




  68
  
  
    
                                        />


  		




  69
  
  
    
                                    </Stack>


  		




  70
  
  
    
                                </Stack>


  		




  71
  
  
    
                            </Grid>


  		




  72
  
  
    
                            <Grid item xs sx={{ mt: 'auto', ml: 1, mb: 1 }}>


  		




  73
  
  
    
                                <Stack


  		




  74
  
  
    
                                    direction="row"


  		




  75
  
  
    
                                    justifyContent="flex-start"


  		




  76
  
  
    
                                    alignItems="flex-end"


  		




  77
  
  
    
                                >


  		




  78
  
  
    
                                    <Button variant="outlined">Search</Button>


  		




  79
  
  
    
                                </Stack>


  		




  80
  
  
    
                            </Grid>


  		




  81
  
  
    
                        </Grid>


  		




  82
  
  
    
                    </Collapse>


  		




  83
  
  
    

  		




  84
  
  
    
                    <Box sx={{ mt: 4 }}>


  		




  
  22
  
    
                        <CatalogFilter />


  		




  85
  23
  
    
                        <CatalogTable />


  		




  86
  
  
    
                    </Box>


  		




  87
  24
  
    
                </Container>


  		




  88
  25
  
    
            </Paper>


  		




  89
  26
  
    
        </Fragment>


  		












Také k dispozici:  Unified diff