Revize e57fa805

re #9130 catalog filter toggle

frontend/src/features/Catalog/Catalog.tsx

@@ -1 +1 @@
 import {
     Box,
     Button,
+    Collapse,
     Container,
     Grid,
     Paper,
@@ -10 +11 @@
 import { CatalogDto } from '../../swagger/data-contracts'
 import CatalogTable from './CatalogTable'
 import { faker } from '@faker-js/faker'
-
+import { useState } from 'react'
 
 const Catalog = () => {
+    const [filterOpen, setFilterOpen] = useState(false)
+    const toggleFilter = () => {
+        setFilterOpen(!filterOpen)
+    }
 
     // Creates a generic row for the table
     const createRow = (): CatalogDto => ({
@@ -26 +31 @@
         countries: [faker.address.country()],
         alternativeNames: [faker.commerce.productName()],
     })
-    const data: CatalogDto[] = Array(33).fill({}).map(() => createRow())
+    const data: CatalogDto[] = Array(33)
+        .fill({})
+        .map(() => createRow())
 
     return (
         <>
             <Paper sx={{ py: 2 }}>
                 <Container sx={{ mt: 4 }}>
-                    <Button variant="contained">Filter</Button>
+                    <Button variant="contained" onClick={toggleFilter}>Filter</Button>
+                    <Collapse in={filterOpen} timeout="auto" unmountOnExit>
                     <Grid container spacing={1} alignItems="stretch">
                         <Grid item xs={6}>
                             <Stack
@@ -71 +79 @@
                             </Stack>
                         </Grid>
                     </Grid>
+                    </Collapse>
 
                     <Box sx={{ mt: 4 }}>
                         <CatalogTable data={data} />