display modal on mobile and modal hidden in desktop view

src/components/admin/mediatheque/CheckboxAdmin.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import Checkbox from '@mui/material/Checkbox';
+
+import PelicoNeutre from 'src/svg/pelico/pelico_neutre.svg';
+
+const CheckboxAdmin = () => {
+  const label = { inputProps: { 'aria-label': 'Pelico' } };
+
+  return (
+    <div style={{ display: 'flex', width: '80px' }}>
+      <Checkbox {...label} />
+      <PelicoNeutre style={{ margin: 'auto', height: '16px', width: 'auto', cursor: 'pointer' }} />
+    </div>
+  );
+};
+
+export default CheckboxAdmin;

src/components/admin/mediatheque/Filter.tsx

@@ -0,0 +1,80 @@
+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';
+
+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,
+  };
+}
+
+type FilterProps = {
+  labels: string[];
+  placeholder: string;
+};
+
+const FilterMultipleChoice = ({ labels, placeholder }: FilterProps) => {
+  const theme = useTheme();
+  const [labelName, setLabelName] = React.useState<string[]>([]);
+
+  const handleChange = (event: SelectChangeEvent<typeof labelName>) => {
+    const {
+      target: { value },
+    } = event;
+    setLabelName(
+      // On autofill we get a stringified value.
+      typeof value === 'string' ? value.split(',') : value,
+    );
+  };
+
+  return (
+    <div>
+      <FormControl sx={{ m: 1, width: 140 }} size="small">
+        <Select
+          multiple
+          displayEmpty
+          value={labelName}
+          onChange={handleChange}
+          input={<OutlinedInput />}
+          renderValue={(selected) => {
+            if (selected.length === 0) {
+              return <em>{placeholder}</em>;
+            }
+
+            return selected.join(', ');
+          }}
+          MenuProps={MenuProps}
+          inputProps={{ 'aria-label': 'Without label' }}
+        >
+          <MenuItem disabled value="">
+            <em>Placeholder</em>
+          </MenuItem>
+          {labels.map((label: string, index: number) => (
+            <MenuItem key={index} value={label} style={getStyles(label, labelName, theme)}>
+              {label}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  );
+};
+
+export default FilterMultipleChoice;

src/components/admin/mediatheque/ModalFilter.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import RefreshIcon from '@mui/icons-material/Refresh';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import Modal from '@mui/material/Modal';
+
+import CheckboxAdmin from 'src/components/admin/mediatheque/CheckboxAdmin';
+import FilterMultipleChoice from 'src/components/admin/mediatheque/Filter';
+import { activitiesLabel } from 'src/config/mediatheque/dataFilters';
+
+const styleModal = {
+  position: 'absolute' as const,
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 250,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  borderRadius: '10px',
+  boxShadow: 24,
+  p: 4,
+};
+
+const ModalFilter = () => {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center' }}>
+      <Button onClick={handleOpen}>Filtres</Button>
+      <Modal open={open} onClose={handleClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description">
+        <Box sx={styleModal}>
+          <FilterMultipleChoice labels={activitiesLabel} placeholder="Activités" />
+          <FilterMultipleChoice labels={activitiesLabel} placeholder="Thèmes" />
+          <FilterMultipleChoice labels={activitiesLabel} placeholder="VM" />
+          <FilterMultipleChoice labels={activitiesLabel} placeholder="Pays" />
+          <FilterMultipleChoice labels={activitiesLabel} placeholder="Classes" />
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <CheckboxAdmin />
+            <IconButton aria-label="delete" color="primary">
+              <RefreshIcon />
+            </IconButton>
+          </div>
+        </Box>
+      </Modal>
+    </div>
+  );
+};
+
+export default ModalFilter;

src/config/mediatheque/dataFilters.ts

@@ -0,0 +1,17 @@
+export const activitiesLabel = [
+  'Présentation',
+  'Enigme',
+  'Défi',
+  'Question',
+  'Jeux',
+  'Contenu libre',
+  'Indice',
+  'Symbole',
+  'Mascotte',
+  'Reportage',
+  'Reaction',
+  'Hymne',
+  'Couplet ?',
+  'Histoire',
+  'Réinventer une histoire',
+];

src/pages/admin/newportal/medialibrary/index.tsx

@@ -1,8 +1,5 @@
 import React from 'react';
 
-import { useGetMediatheque } from 'src/api/mediatheque/mediatheque.get';
-import type { Filter } from 'types/mediatheque.type';
-
 // Tout doit être responsive
 
 // STEP 1: les filtres (proposition modal sur les filtre)
@@ -17,6 +14,16 @@ import type { Filter } from 'types/mediatheque.type';
 // STEP 4: le bouton télécharger (image, vidéo, son) (lib jszip par exemple)
 // STEP 4.1: comment on dl une vidéo youtube ? Souvent des vidéos Viméo (bah on dl pas)
 
+import RefreshIcon from '@mui/icons-material/Refresh';
+import IconButton from '@mui/material/IconButton';
+
+import { useGetMediatheque } from 'src/api/mediatheque/mediatheque.get';
+import CheckboxAdmin from 'src/components/admin/mediatheque/CheckboxAdmin';
+import FilterMultipleChoice from 'src/components/admin/mediatheque/Filter';
+import ModalFilter from 'src/components/admin/mediatheque/ModalFilter';
+import { activitiesLabel } from 'src/config/mediatheque/dataFilters';
+import type { Filter } from 'types/mediatheque.type';
+
 const Mediatheque = () => {
   const offset = 0;
   const filters: Filter[] = [
@@ -29,7 +36,23 @@ const Mediatheque = () => {
   return (
     <>
       <div>
-        <h1>Médiatheque</h1>
+        <h1 className="title-for-mediatheque">Médiathèque d&apos;1Village</h1>
+        <div className="desktop-view">
+          <div style={{ display: 'flex' }}>
+            <FilterMultipleChoice labels={activitiesLabel} placeholder="Activités" />
+            <FilterMultipleChoice labels={activitiesLabel} placeholder="Thèmes" />
+            <FilterMultipleChoice labels={activitiesLabel} placeholder="VM" />
+            <FilterMultipleChoice labels={activitiesLabel} placeholder="Pays" />
+            <FilterMultipleChoice labels={activitiesLabel} placeholder="Classes" />
+            <CheckboxAdmin />
+            <IconButton aria-label="delete" color="primary">
+              <RefreshIcon />
+            </IconButton>
+          </div>
+        </div>
+        <div className="modal-view">
+          <ModalFilter />
+        </div>
       </div>
     </>
   );

src/styles/globals.scss

@@ -395,3 +395,36 @@ a.text--success:hover {
   background-image: url('/icon-fullscreen-2x.png');
   background-size: 26px 26px;
 }
+
+// ----- AFFICHAGE MEDIATHEQUE
+.desktop-view {
+  display: flex;
+}
+
+.modal-view {
+  display: none;
+}
+
+h1.title-for-mediatheque{
+  font-family: 'Alegreya Sans', 'Times New Roman', Times, serif;
+  font-weight: 500;
+}
+
+
+/* Style pour mobile */
+@media (max-width: 768px) {
+  .desktop-view {
+    display: none;
+  }
+
+  .modal-view {
+    display: block;
+  }
+
+  h1.title-for-mediatheque{
+    font-family: 'Alegreya Sans', 'Times New Roman', Times, serif;
+    font-weight: 500;
+    text-align: center;
+  }
+}
+