feat(#vil-): admin h5p page

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

@@ -62,7 +62,7 @@ const Creer = () => {
 
   const links: Link[] = [
     { name: 'Créer du contenu libre', link: '/admin/newportal/contenulibre/1', action: handleNewActivity },
-    { name: 'Créer une activité H5P', link: 'https://' },
+    { name: 'Créer une activité H5P', link: '/admin/newportal/h5p' },
     { name: 'Paramétrer l’hymne', link: 'https://' },
     { name: 'Mixer l’hymne', link: 'https://' },
   ];

src/pages/admin/newportal/h5p/edit/[id].tsx

@@ -0,0 +1,70 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useSnackbar } from 'notistack';
+import * as React from 'react';
+import { useQueryClient } from 'react-query';
+
+import NavigateNextIcon from '@mui/icons-material/NavigateNext';
+import { Breadcrumbs, Button } from '@mui/material';
+import MaterialLink from '@mui/material/Link';
+
+import { useH5pContentList } from 'src/api/h5p/h5p-content.list';
+import { AdminTile } from 'src/components/admin/AdminTile';
+import { H5pEditor } from 'src/components/h5p';
+import { getQueryString } from 'src/utils';
+
+const H5pEditContentPage = () => {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const { data: h5pContent } = useH5pContentList();
+  const { enqueueSnackbar } = useSnackbar();
+
+  const contentId = React.useMemo(() => getQueryString(router.query.id), [router]);
+  const content = (h5pContent || []).find((h5p) => h5p.contentId === contentId);
+
+  if (h5pContent && !content) {
+    router.push(`/admin/h5p`);
+  }
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <div>
+      <Breadcrumbs separator={<NavigateNextIcon fontSize="large" color="primary" />} aria-label="breadcrumb" style={{ marginBottom: '1rem' }}>
+        <Link href="/admin/h5p" passHref>
+          <MaterialLink>
+            <h1>Contenu H5P</h1>
+          </MaterialLink>
+        </Link>
+        <h1>{content.title}</h1>
+      </Breadcrumbs>
+      <AdminTile title="Ajouter un contenu H5P">
+        <div style={{ width: '100%' /* display: 'flex', flexDirection: 'column', alignItems: 'center' */ }}>
+          <H5pEditor
+            contentId={content.contentId}
+            onSave={() => {
+              enqueueSnackbar('Contenu H5P modifié avec succès!', {
+                variant: 'success',
+              });
+              queryClient.invalidateQueries('h5p');
+              router.push(`/admin/h5p`);
+            }}
+            onError={(message) => {
+              enqueueSnackbar(message, {
+                variant: 'error',
+              });
+            }}
+          ></H5pEditor>
+        </div>
+      </AdminTile>
+      <Link href="/admin/h5p" passHref>
+        <Button variant="outlined" style={{ margin: '1rem 0' }} component="a">
+          Retour
+        </Button>
+      </Link>
+    </div>
+  );
+};
+
+export default H5pEditContentPage;

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

@@ -0,0 +1,136 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useSnackbar } from 'notistack';
+import * as React from 'react';
+import { useQueryClient } from 'react-query';
+
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import { Button, NoSsr, IconButton, Tooltip } from '@mui/material';
+
+import { useDeleteH5pContentMutation } from 'src/api/h5p/h5p-content.delete';
+import { useH5pContentList } from 'src/api/h5p/h5p-content.list';
+import { Modal } from 'src/components/Modal';
+import { AdminTable } from 'src/components/admin/AdminTable';
+import { AdminTile } from 'src/components/admin/AdminTile';
+import { defaultContainedButtonStyle } from 'src/styles/variables.const';
+import BackArrow from 'src/svg/back-arrow.svg';
+
+const H5pList = () => {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const { enqueueSnackbar } = useSnackbar();
+  const { data: h5pContent } = useH5pContentList();
+  const [deleteIndex, setDeleteIndex] = React.useState(-1);
+  const { mutate: deleteH5pMutate, isLoading } = useDeleteH5pContentMutation();
+
+  const actions = (id: string) => (
+    <>
+      <Tooltip title="Modifier">
+        <IconButton
+          aria-label="edit"
+          onClick={() => {
+            router.push(`/admin/newportal/h5p/edit/${id}`);
+          }}
+        >
+          <EditIcon />
+        </IconButton>
+      </Tooltip>
+      <Tooltip title="Supprimer">
+        <IconButton
+          aria-label="delete"
+          onClick={() => {
+            setDeleteIndex((h5pContent || []).findIndex((h5p) => h5p.contentId === id));
+          }}
+        >
+          <DeleteIcon />
+        </IconButton>
+      </Tooltip>
+    </>
+  );
+
+  return (
+    <div>
+      <Link href="/admin/newportal/create">
+        <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', marginBottom: '1rem' }}>
+          <BackArrow />
+          <h1 style={{ marginLeft: '10px' }}>Villages-mondes</h1>
+        </div>
+      </Link>
+      <AdminTile
+        title="Liste du contenu H5P"
+        toolbarButton={
+          <Link href="/admin/newportal/h5p/new" passHref>
+            <Button
+              color="inherit"
+              sx={defaultContainedButtonStyle}
+              component="a"
+              variant="contained"
+              style={{ flexShrink: 0 }}
+              startIcon={<AddCircleIcon />}
+            >
+              Ajouter un contenu H5P
+            </Button>
+          </Link>
+        }
+      >
+        <AdminTable
+          emptyPlaceholder={
+            <>
+              {"Vous n'avez pas encore de contenu H5P ! "}
+              <Link href="/admin/newportal/new" passHref>
+                <a className="text text--primary text--small">En créer un ?</a>
+              </Link>
+            </>
+          }
+          data={(h5pContent || []).map((h5p) => ({ ...h5p, id: h5p.contentId }))}
+          columns={[
+            { key: 'title', label: 'Nom du contenu', sortable: true },
+            { key: 'mainLibrary', label: 'Type' },
+          ]}
+          actions={actions}
+        />
+      </AdminTile>
+      <NoSsr>
+        <Modal
+          title="Confirmer la suppression"
+          open={deleteIndex !== -1}
+          onClose={() => {
+            setDeleteIndex(-1);
+          }}
+          onConfirm={() => {
+            deleteH5pMutate(h5pContent?.[deleteIndex]?.contentId || '', {
+              onSettled: () => {
+                queryClient.invalidateQueries('h5p');
+                setDeleteIndex(-1);
+              },
+              onError: () => {
+                enqueueSnackbar('Une erreur est survenue...', {
+                  variant: 'error',
+                });
+              },
+              onSuccess: () => {
+                enqueueSnackbar('Contenu H5P supprimé avec succès!', {
+                  variant: 'success',
+                });
+              },
+            });
+          }}
+          loading={isLoading}
+          fullWidth
+          maxWidth="sm"
+          ariaLabelledBy="delete-h5p-id"
+          ariaDescribedBy="delete-h5p-desc"
+          error
+        >
+          <div id="delete-h5p-desc">
+            Voulez vous vraiment supprimer le contenu H5P <strong>{(h5pContent || [])[deleteIndex]?.title}</strong> ?
+          </div>
+        </Modal>
+      </NoSsr>
+    </div>
+  );
+};
+
+export default H5pList;

src/pages/admin/newportal/h5p/new.tsx

@@ -0,0 +1,56 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useSnackbar } from 'notistack';
+import * as React from 'react';
+import { useQueryClient } from 'react-query';
+
+import NavigateNextIcon from '@mui/icons-material/NavigateNext';
+import { Breadcrumbs, Button } from '@mui/material';
+import MaterialLink from '@mui/material/Link';
+
+import { AdminTile } from 'src/components/admin/AdminTile';
+import { H5pEditor } from 'src/components/h5p';
+
+const H5pNewContentPage = () => {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const { enqueueSnackbar } = useSnackbar();
+
+  return (
+    <div>
+      <Breadcrumbs separator={<NavigateNextIcon fontSize="large" color="primary" />} aria-label="breadcrumb" style={{ marginBottom: '1rem' }}>
+        <Link href="/admin/newportal/h5p" passHref>
+          <MaterialLink>
+            <h1>Contenu H5P</h1>
+          </MaterialLink>
+        </Link>
+        <h1>Nouveau</h1>
+      </Breadcrumbs>
+      <AdminTile title="Ajouter un contenu H5P">
+        <div style={{ width: '100%' /* display: 'flex', flexDirection: 'column', alignItems: 'center' */ }}>
+          <H5pEditor
+            onSave={() => {
+              enqueueSnackbar('Contenu H5P créé avec succès!', {
+                variant: 'success',
+              });
+              queryClient.invalidateQueries('h5p');
+              router.push(`/admin/newportal/h5p`);
+            }}
+            onError={(message) => {
+              enqueueSnackbar(message, {
+                variant: 'error',
+              });
+            }}
+          ></H5pEditor>
+        </div>
+      </AdminTile>
+      <Link href="/admin/newportal/h5p" passHref>
+        <Button variant="outlined" style={{ margin: '1rem 0' }} component="a">
+          Retour
+        </Button>
+      </Link>
+    </div>
+  );
+};
+
+export default H5pNewContentPage;