-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature/Filtre activités et thèmes/VIL11-VIL112
- Loading branch information
1 parent
f7c42d3
commit 27379df
Showing
5 changed files
with
189 additions
and
25 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| /* eslint-disable prettier/prettier */ | ||
| import React from 'react'; | ||
|
|
||
| import FormControl from '@mui/material/FormControl'; | ||
| import MenuItem from '@mui/material/MenuItem'; | ||
| import OutlinedInput from '@mui/material/OutlinedInput'; | ||
| import type { SelectChangeEvent } from '@mui/material/Select'; | ||
| import Select from '@mui/material/Select'; | ||
| import { useTheme } from '@mui/material/styles'; | ||
| import type { Theme } from '@mui/material/styles'; | ||
|
|
||
| import { | ||
| activitiesLabel, | ||
| themeOfDefi, | ||
| themeOfEnigme, | ||
| themeOfIndiceCulturel, | ||
| themeOfIndiceSymbolique, | ||
| themeOfJeux, | ||
| } from 'src/config/mediatheque/dataFilters'; | ||
|
|
||
| const ITEM_HEIGHT = 48; | ||
| const ITEM_PADDING_TOP = 8; | ||
| const MenuProps = { | ||
| PaperProps: { | ||
| style: { | ||
| maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP, | ||
| width: 250, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| function getStyles(label: string, labelName: readonly string[], theme: Theme) { | ||
| return { | ||
| fontWeight: labelName.indexOf(label) === -1 ? theme.typography.fontWeightRegular : theme.typography.fontWeightMedium, | ||
| }; | ||
| } | ||
|
|
||
| const subThemesMap: { [key: string]: string[] } = { | ||
| 'Indice culturel': themeOfIndiceCulturel, | ||
| 'Indice symbolique': themeOfIndiceSymbolique, | ||
| 'Défis': themeOfDefi, | ||
| 'Jeux': themeOfJeux, | ||
| 'Enigme': themeOfEnigme, | ||
| }; | ||
|
|
||
| export default function FiltersActivities() { | ||
| const theme = useTheme(); | ||
| const [labelNameActivity, setLabelNameActivity] = React.useState<string[]>([]); | ||
| const [labelNameSubTheme, setLabelNameSubTheme] = React.useState<string[]>([]); | ||
|
|
||
| const handleChangeLabelActivity = (event: SelectChangeEvent<typeof labelNameActivity>) => { | ||
| const { | ||
| target: { value }, | ||
| } = event; | ||
| setLabelNameActivity(typeof value === 'string' ? value.split(',') : value); | ||
| setLabelNameSubTheme([]); | ||
| }; | ||
|
|
||
| const subThemes = labelNameActivity.map((activity) => subThemesMap[activity] || []).flat(); | ||
|
|
||
| return ( | ||
| <> | ||
| <div> | ||
| {/* Filtre pour activités */} | ||
| <FormControl sx={{ m: 1, width: 140 }} size="small"> | ||
| <Select | ||
| multiple | ||
| displayEmpty | ||
| value={labelNameActivity} | ||
| onChange={handleChangeLabelActivity} | ||
| input={<OutlinedInput />} | ||
| renderValue={(selected) => { | ||
| if (selected.length === 0) { | ||
| return <em>Activités</em>; | ||
| } | ||
| return selected.join(', '); | ||
| }} | ||
| MenuProps={MenuProps} | ||
| inputProps={{ 'aria-label': 'Label' }} | ||
| > | ||
| {activitiesLabel.map((label: string, index: number) => ( | ||
| <MenuItem key={index} value={label} style={getStyles(label, labelNameActivity, theme)}> | ||
| {label} | ||
| </MenuItem> | ||
| ))} | ||
| </Select> | ||
| </FormControl> | ||
| </div> | ||
| {/* Filtres pour sous thème d'une activité */} | ||
| <div> | ||
| <FormControl sx={{ m: 1, width: 140 }} size="small"> | ||
| <Select | ||
| multiple | ||
| displayEmpty | ||
| value={labelNameSubTheme} | ||
| onChange={(event) => setLabelNameSubTheme(event.target.value as string[])} | ||
| input={<OutlinedInput />} | ||
| renderValue={(selected) => { | ||
| if (selected.length === 0) { | ||
| return <em>Thèmes</em>; | ||
| } | ||
| return selected.join(', '); | ||
| }} | ||
| MenuProps={MenuProps} | ||
| inputProps={{ 'aria-label': 'Label' }} | ||
| > | ||
| <MenuItem disabled value=""> | ||
| <em>{subThemes.length ? 'Thèmes' : 'Pas de thématiques'}</em> | ||
| </MenuItem> | ||
| {subThemes.map((label: string, index: number) => ( | ||
| <MenuItem key={index} value={label} style={getStyles(label, labelNameSubTheme, theme)}> | ||
| {label} | ||
| </MenuItem> | ||
| ))} | ||
| </Select> | ||
| </FormControl> | ||
| </div> | ||
| </> | ||
| ); | ||
| } |
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 |
|---|---|---|
| @@ -1,17 +1,45 @@ | ||
| export const activitiesLabel = [ | ||
| 'Présentation', | ||
| 'Enigme', | ||
| 'Défi', | ||
| 'Question', | ||
| 'Jeux', | ||
| 'Contenu libre', | ||
| 'Indice', | ||
| 'Symbole', | ||
| 'Indice culturel', | ||
| 'Indice symbolique', | ||
| 'Mascotte', | ||
| 'Reportage', | ||
| 'Reaction', | ||
| 'Défis', | ||
| 'Jeux', | ||
| 'Symbole', | ||
| 'Réaction', | ||
| 'Enigme', | ||
| 'Hymne', | ||
| 'Couplet ?', | ||
| 'Histoire', | ||
| 'Couplet', | ||
| 'Inventer une histoire', | ||
| 'Réinventer une histoire', | ||
| ]; | ||
|
|
||
| export const themeOfIndiceCulturel = [ | ||
| 'Paysages', | ||
| 'Arts', | ||
| 'Lieux de vies', | ||
| 'Langues', | ||
| 'Flore et faune', | ||
| 'Loisirs et jeux', | ||
| 'Cuisines', | ||
| 'Traditions', | ||
| 'Autre', | ||
| ]; | ||
|
|
||
| export const themeOfIndiceSymbolique = [ | ||
| 'Drapeau', | ||
| 'Emblème', | ||
| 'Fleur nationale', | ||
| 'Devise', | ||
| 'Hymne', | ||
| 'Animal national', | ||
| 'Figure symbolique', | ||
| 'Monnaie', | ||
| 'Autre', | ||
| ]; | ||
|
|
||
| export const themeOfDefi = ['Culinaire', 'Linguistique', 'Ecologique', 'Autre']; | ||
|
|
||
| export const themeOfJeux = ['Jeu des expressions', 'Jeu de la monnaie', 'Jeu des expressions']; | ||
|
|
||
| export const themeOfEnigme = ['Evement mystère', 'Lieu mystère', 'Objet mystère', 'Personnalité mystère', 'autre']; |
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