feat: 🎸 add Accordion for search and filter

yeukfei02 · Jan 7, 2023 · 66ef871 · 66ef871
1 parent 1537a0a
commit 66ef871
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 25 deletions.
diff --git a/apps/web/src/components/dashboard/Dashboard.tsx b/apps/web/src/components/dashboard/Dashboard.tsx
@@ -2,6 +2,11 @@ import React, { useState, useEffect } from 'react';
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import { Typography } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
@@ -39,6 +44,8 @@ function Dashboard() {
   const [sortByCreatedAt, setSortByCreatedAt] = useState(false);
   const [sortByUpdatedAt, setSortByUpdatedAt] = useState(false);
 
+  const [expanded, setExpanded] = useState(true);
+
   const token = localStorage.getItem('token');
   const userRole = localStorage.getItem('userRole');
   const userId = localStorage.getItem('userId');
@@ -199,6 +206,17 @@ function Dashboard() {
     setSortByUpdatedAt(e.target.checked);
   };
 
+  const handleAccordionChange = (
+    event: React.SyntheticEvent,
+    isExpanded: boolean
+  ) => {
+    if (expanded) {
+      setExpanded(false);
+    } else {
+      setExpanded(true);
+    }
+  };
+
   return (
     <>
       <CustomAppBar />
@@ -220,22 +238,37 @@ function Dashboard() {
           ) : null}
         </div>
 
-        <SearchAndFilter
-          searchText={searchText}
-          incidentType={incidentType}
-          status={status}
-          page={page}
-          sortByCreatedAt={sortByCreatedAt}
-          sortByUpdatedAt={sortByUpdatedAt}
-          totalPageCount={totalPageCount}
-          handlePageChange={handlePageChange}
-          handleSortByCreatedAt={handleSortByCreatedAt}
-          handleSortByUpdatedAt={handleSortByUpdatedAt}
-          handleIncidentTypeChange={handleIncidentTypeChange}
-          handleStatusChange={handleStatusChange}
-          handleSearchTextChange={handleSearchTextChange}
-          handleClearFilterClick={handleClearFilterClick}
-        />
+        <Accordion
+          className="my-5"
+          expanded={expanded}
+          onChange={handleAccordionChange}
+        >
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="panel1a-content"
+            id="panel1a-header"
+          >
+            <Typography variant="h6">Search and Filter</Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <SearchAndFilter
+              searchText={searchText}
+              incidentType={incidentType}
+              status={status}
+              page={page}
+              sortByCreatedAt={sortByCreatedAt}
+              sortByUpdatedAt={sortByUpdatedAt}
+              totalPageCount={totalPageCount}
+              handlePageChange={handlePageChange}
+              handleSortByCreatedAt={handleSortByCreatedAt}
+              handleSortByUpdatedAt={handleSortByUpdatedAt}
+              handleIncidentTypeChange={handleIncidentTypeChange}
+              handleStatusChange={handleStatusChange}
+              handleSearchTextChange={handleSearchTextChange}
+              handleClearFilterClick={handleClearFilterClick}
+            />
+          </AccordionDetails>
+        </Accordion>
 
         <IncidentCardList incidents={incidents} getIncidents={getIncidents} />
 

diff --git a/apps/web/src/components/searchAndFilter/SearchAndFilter.tsx b/apps/web/src/components/searchAndFilter/SearchAndFilter.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
-import Card from '@mui/material/Card';
 import Pagination from '@mui/material/Pagination';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Button from '@mui/material/Button';
 import Switch from '@mui/material/Switch';
-import { Typography } from '@mui/material';
 import TextField from '@mui/material/TextField';
 import FormControl from '@mui/material/FormControl';
 import Grid from '@mui/material/Grid';
@@ -49,12 +47,8 @@ function SearchAndFilter({
   handleClearFilterClick,
 }: Props) {
   return (
-    <Card className="mt-5 p-7">
-      <Typography variant="h5">
-        <span className="font-bold">Search and Filter</span>
-      </Typography>
-
-      <div className="my-5">
+    <div className="p-3">
+      <div className="mb-5">
         <Grid container spacing={2}>
           <Grid item xs={12} sm={6}>
             <TextField
@@ -146,7 +140,7 @@ function SearchAndFilter({
           Clear Filter
         </Button>
       </div>
-    </Card>
+    </div>
   );
 }