-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: implement initiatives page design, infinite scrolling and filte…
…ring
- Loading branch information
Showing
15 changed files
with
338 additions
and
71 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| 'use client'; | ||
|
|
||
| import React, { useCallback, useState } from 'react'; | ||
| import { isEqual } from 'lodash'; | ||
|
|
||
| import Box from '@mui/material/Box'; | ||
| import IconButton from '@mui/material/IconButton'; | ||
| import SwipeableDrawer from '@mui/material/SwipeableDrawer'; | ||
|
|
||
| import { closeIconButtonStyle } from '@/components/common/CustomDialog'; | ||
| import CloseIcon from '@/components/icons/CloseIcon'; | ||
| import theme from '@/styles/theme'; | ||
|
|
||
| import ApplyFilterButton, { APPLY_BUTTON } from '../common/ApplyFilterButton'; | ||
| import { Typography, Card } from '@mui/material'; | ||
| import ProjectFilter from './ProjectFilter'; | ||
|
|
||
| interface MobileProjectFilterProps { | ||
| open: boolean; | ||
| setOpen: (open: boolean) => void; | ||
| } | ||
|
|
||
| //todo combine with MobileNewsFeedFilter.tsx | ||
|
|
||
| export default function MobileNewsFeedFilter(props: MobileProjectFilterProps) { | ||
| const { open, setOpen } = props; | ||
|
|
||
| const toggleDrawer = (newOpen: boolean) => () => { | ||
| setOpen(newOpen); | ||
| }; | ||
|
|
||
| const applyFilters = () => { | ||
| setOpen(false); | ||
| }; | ||
|
|
||
| return ( | ||
| <Box mb={0} sx={{ backgroundColor: theme.palette.background.paper }} date-testid="projects-filter"> | ||
| <SwipeableDrawer | ||
| sx={{ | ||
| '& .MuiPaper-root': { | ||
| backgroundColor: 'transparent', | ||
| height: 'calc(100% - 200px)', | ||
| }, | ||
| }} | ||
| anchor="bottom" | ||
| open={open} | ||
| onClose={toggleDrawer(false)} | ||
| onOpen={toggleDrawer(true)} | ||
| > | ||
| <Box mr="15px" display="flex" justifyContent="flex-end" alignItems="flex-end"> | ||
| <IconButton onClick={toggleDrawer(false)} sx={closeIconButtonStyle}> | ||
| <CloseIcon color={theme.palette.text.primary} /> | ||
| </IconButton> | ||
| </Box> | ||
|
|
||
| <Box sx={drawerBoxStyle}> | ||
| <Typography variant="overline">Filtern</Typography> | ||
| <Card sx={cardStyles}> | ||
| <ProjectFilter /> | ||
| </Card> | ||
| </Box> | ||
|
|
||
| <ApplyFilterButton onClick={applyFilters} applyButtonType={APPLY_BUTTON.ENABLED} /> | ||
| </SwipeableDrawer> | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| const cardStyles = { | ||
| minHeight: '300px', | ||
| borderRadius: '16px', | ||
| border: '1px solid rgba(255, 255, 255, 0.20)', | ||
| background: 'rgba(255, 255, 255, 0.10)', | ||
| boxShadow: '0px 12px 40px 0px rgba(0, 0, 0, 0.25)', | ||
| backdropFilter: 'blur(20px)', | ||
| height: 'fit-content !important', | ||
| marginBottom: 4, | ||
| }; | ||
|
|
||
| const drawerBoxStyle = { | ||
| minHeight: '300px', | ||
| overflow: 'scroll', | ||
| p: 3, | ||
| pb: 0, | ||
| m: '15px', | ||
| mb: 0, | ||
| borderRadius: '16px', | ||
| border: '1px solid rgba(0, 90, 140, 0.20)', | ||
| backgroundColor: 'primary.light', | ||
| boxShadow: | ||
| '0px 6px 6px -3px rgba(0, 0, 0, 0.05), 0px 10px 22px 1px rgba(0, 0, 0, 0.14), 0px 4px 26px 3px rgba(0, 0, 0, 0.12)', | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| 'use client'; | ||
|
|
||
| import React, { useEffect, useState } from 'react'; | ||
|
|
||
| import { Search } from '@mui/icons-material'; | ||
| import { Box, FormControl, InputAdornment, TextField, Typography } from '@mui/material'; | ||
|
|
||
| import { useProjects } from '@/app/contexts/project-page-context'; | ||
|
|
||
| export default function ProjectFilter() { | ||
| const { filters, setFilters } = useProjects(); | ||
| const [inputValue, setInputValue] = useState(''); | ||
|
|
||
| const updateFilters = (searchString: string) => { | ||
| const updatedFilters = { ...filters, searchString }; | ||
| setFilters(updatedFilters); | ||
| }; | ||
|
|
||
| const handleInputChange = (event: { target: { value: string } }) => { | ||
| const newValue = event.target.value; | ||
| setInputValue(newValue); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| const timeoutId = setTimeout(() => { | ||
| updateFilters(inputValue); | ||
| }, 300); | ||
|
|
||
| return () => { | ||
| clearTimeout(timeoutId); | ||
| }; | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [inputValue]); | ||
|
|
||
| return ( | ||
| <Box sx={{ margin: 3 }}> | ||
| <FormControl variant="standard" sx={{ width: '100%' }}> | ||
| <Typography mb={1} color="white" variant="button"> | ||
| search | ||
| </Typography> | ||
| <TextField | ||
| onChange={handleInputChange} | ||
| variant="outlined" | ||
| fullWidth | ||
| sx={{ | ||
| '& .MuiOutlinedInput-root': { | ||
| '& fieldset': { | ||
| borderColor: 'white', | ||
| }, | ||
| '&:hover fieldset': { | ||
| borderColor: 'white', | ||
| }, | ||
| '&.Mui-focused fieldset': { | ||
| borderColor: 'white', | ||
| }, | ||
| '& input': { | ||
| color: 'white', | ||
| }, | ||
| }, | ||
| }} | ||
| InputProps={{ | ||
| startAdornment: ( | ||
| <InputAdornment position="start"> | ||
| <Search sx={{ color: 'white' }} /> | ||
| </InputAdornment> | ||
| ), | ||
| }} | ||
| inputProps={{ | ||
| 'aria-label': 'Search field', | ||
| }} | ||
| /> | ||
| </FormControl> | ||
| </Box> | ||
| ); | ||
| } |
Oops, something went wrong.