From f2d575b4dce50537d3df9732842e3f3dff510d5c Mon Sep 17 00:00:00 2001
From: Simon Nedjari <simon.nedjari@outlook.com>
Date: Thu, 5 Dec 2024 16:11:26 +0100
Subject: [PATCH 1/3] replace ContentH5P  select with autocomplete

---
 .../activities/content/editors/H5pEditor.tsx  | 50 +++++++++++++------
 1 file changed, 36 insertions(+), 14 deletions(-)

diff --git a/src/components/activities/content/editors/H5pEditor.tsx b/src/components/activities/content/editors/H5pEditor.tsx
index 51a2ef2b5..12ee70d95 100644
--- a/src/components/activities/content/editors/H5pEditor.tsx
+++ b/src/components/activities/content/editors/H5pEditor.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import React from 'react';
 
-import { Button, Divider, FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import { Autocomplete, Button, Divider, FormControl } from '@mui/material';
 import TextField from '@mui/material/TextField';
 
 import type { EditorProps } from '../content.types';
@@ -13,6 +13,7 @@ import { Modal } from 'src/components/Modal';
 import H5pPlayer from 'src/components/h5p/H5pPlayer';
 import { UserContext } from 'src/contexts/userContext';
 import { fontDetailColor } from 'src/styles/variables.const';
+import { normalizeString } from 'src/utils/isNormalizedStringEqual';
 import { UserType } from 'types/user.type';
 
 const IFRAME_REGEX = /<\s*iframe([^>]*)>.*?<\s*\/\s*iframe>/im;
@@ -87,22 +88,22 @@ export const H5pEditor = ({ id, value = '', onChange = () => {}, onDelete = () =
             <h3>Choisissez le contenu H5P :</h3>
             {h5pContent && h5pContent.length > 0 ? (
               <FormControl fullWidth>
-                <InputLabel id="select-h5p">Contenu H5P</InputLabel>
-                <Select
-                  labelId="select-h5p"
+                <Autocomplete
                   id="select-h5p"
-                  label="Contenu H5P"
-                  onChange={(event) => {
-                    onChange(`/h5p/data/${event.target.value}/play`);
+                  onChange={(_e, value) => {
+                    if (!value) return;
+                    onChange(`/h5p/data/${value.contentId}/play`);
                     setIsModalOpen(false);
                   }}
-                >
-                  {h5pContent.map((h5p) => (
-                    <MenuItem key={h5p.contentId} value={h5p.contentId}>
-                      {h5p.title}
-                    </MenuItem>
-                  ))}
-                </Select>
+                  options={h5pContent.sort((a, b) => (a.title > b.title ? 1 : -1))}
+                  getOptionLabel={(option) => option.title}
+                  filterOptions={(options, state) => {
+                    return options.filter((option) =>
+                      normalizeString(option.title).toLowerCase().includes(normalizeString(state.inputValue).toLowerCase()),
+                    );
+                  }}
+                  renderInput={(params) => <TextField {...params} label="Contenu H5P" />}
+                />
               </FormControl>
             ) : (
               <>
@@ -167,3 +168,24 @@ export const H5pEditor = ({ id, value = '', onChange = () => {}, onDelete = () =
     </EditorContainer>
   );
 };
+
+// INITIAL COMPONENT CHANGED TO line 90
+
+// <FormControl fullWidth>
+//   <InputLabel id="select-h5p">Contenu H5P</InputLabel>
+//   <Select
+//     labelId="select-h5p"
+//     id="select-h5p"
+//     label="Contenu H5P"
+//     onChange={(event) => {
+//       onChange(`/h5p/data/${event.target.value}/play`);
+//       setIsModalOpen(false);
+//     }}
+//   >
+//     {h5pContent.map((h5p) => (
+//       <MenuItem key={h5p.contentId} value={h5p.contentId}>
+//         {h5p.title}
+//       </MenuItem>
+//     ))}
+//   </Select>
+// </FormControl>

From 8b810e37a047407788c9502e90a1702f2ee5b6cb Mon Sep 17 00:00:00 2001
From: Simon Nedjari <simon.nedjari@outlook.com>
Date: Fri, 13 Dec 2024 10:30:46 +0100
Subject: [PATCH 2/3] change redirection path to new portal admin

---
 src/pages/admin/newportal/h5p/edit/[id].tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/pages/admin/newportal/h5p/edit/[id].tsx b/src/pages/admin/newportal/h5p/edit/[id].tsx
index afa113383..d48a8b018 100644
--- a/src/pages/admin/newportal/h5p/edit/[id].tsx
+++ b/src/pages/admin/newportal/h5p/edit/[id].tsx
@@ -21,9 +21,10 @@ const H5pEditContentPage = () => {
 
   const contentId = React.useMemo(() => getQueryString(router.query.id), [router]);
   const content = (h5pContent || []).find((h5p) => h5p.contentId === contentId);
+  const redirectPath = `/admin/newportal/h5p`;
 
   if (h5pContent && !content) {
-    router.push(`/admin/h5p`);
+    router.push(redirectPath);
   }
   if (!content) {
     return null;
@@ -32,7 +33,7 @@ const H5pEditContentPage = () => {
   return (
     <div>
       <Breadcrumbs separator={<NavigateNextIcon fontSize="large" color="primary" />} aria-label="breadcrumb" style={{ marginBottom: '1rem' }}>
-        <Link href="/admin/h5p" passHref>
+        <Link href={redirectPath} passHref>
           <MaterialLink>
             <h1>Contenu H5P</h1>
           </MaterialLink>
@@ -48,7 +49,7 @@ const H5pEditContentPage = () => {
                 variant: 'success',
               });
               queryClient.invalidateQueries('h5p');
-              router.push(`/admin/h5p`);
+              router.push(redirectPath);
             }}
             onError={(message) => {
               enqueueSnackbar(message, {
@@ -58,7 +59,7 @@ const H5pEditContentPage = () => {
           ></H5pEditor>
         </div>
       </AdminTile>
-      <Link href="/admin/h5p" passHref>
+      <Link href={redirectPath} passHref>
         <Button variant="outlined" style={{ margin: '1rem 0' }} component="a">
           Retour
         </Button>

From 607369457ee3d704f5e2e6896fa287105ba9f92a Mon Sep 17 00:00:00 2001
From: Simon Nedjari <simon.nedjari@outlook.com>
Date: Fri, 20 Dec 2024 11:20:36 +0100
Subject: [PATCH 3/3] remove comments

---
 .../activities/content/editors/H5pEditor.tsx  | 21 -------------------
 1 file changed, 21 deletions(-)

diff --git a/src/components/activities/content/editors/H5pEditor.tsx b/src/components/activities/content/editors/H5pEditor.tsx
index 12ee70d95..67e751696 100644
--- a/src/components/activities/content/editors/H5pEditor.tsx
+++ b/src/components/activities/content/editors/H5pEditor.tsx
@@ -168,24 +168,3 @@ export const H5pEditor = ({ id, value = '', onChange = () => {}, onDelete = () =
     </EditorContainer>
   );
 };
-
-// INITIAL COMPONENT CHANGED TO line 90
-
-// <FormControl fullWidth>
-//   <InputLabel id="select-h5p">Contenu H5P</InputLabel>
-//   <Select
-//     labelId="select-h5p"
-//     id="select-h5p"
-//     label="Contenu H5P"
-//     onChange={(event) => {
-//       onChange(`/h5p/data/${event.target.value}/play`);
-//       setIsModalOpen(false);
-//     }}
-//   >
-//     {h5pContent.map((h5p) => (
-//       <MenuItem key={h5p.contentId} value={h5p.contentId}>
-//         {h5p.title}
-//       </MenuItem>
-//     ))}
-//   </Select>
-// </FormControl>