Merge pull request #898 from parlemonde/Feature_Gerer-Interface-Acceu…

…il_VIL-310

Feature gerer interface acceuil vil 310

src/pages/admin/newportal/manage/access/index.tsx

@@ -0,0 +1,24 @@
+import Link from 'next/link';
+import React from 'react';
+
+import BackArrow from 'src/svg/back-arrow.svg';
+
+const Access = () => {
+  const renderTitle = () => {
+    return (
+      <div>
+        <Link href="/admin/newportal/manage">
+          <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
+            <BackArrow />
+            <h1 style={{ marginLeft: '10px' }}>Droits d&apos;accès</h1>
+          </div>
+        </Link>
+        <p>Il y a ici la liste complète des droits d&apos;accès sur 1Village.</p>
+      </div>
+    );
+  };
+
+  return <>{renderTitle()}</>;
+};
+
+export default Access;

src/pages/admin/newportal/manage/activities/index.tsx

@@ -0,0 +1,24 @@
+import Link from 'next/link';
+import React from 'react';
+
+import BackArrow from 'src/svg/back-arrow.svg';
+
+const Activities = () => {
+  const renderTitle = () => {
+    return (
+      <div>
+        <Link href="/admin/newportal/manage">
+          <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
+            <BackArrow />
+            <h1 style={{ marginLeft: '10px' }}>Consignes d&apos;activité</h1>
+          </div>
+        </Link>
+        <p>Il y a ici la liste complète des villages-mondes.</p>
+      </div>
+    );
+  };
+
+  return <>{renderTitle()}</>;
+};
+
+export default Activities;

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

@@ -1,15 +1,77 @@
+import Link from 'next/link';
 import React from 'react';
 
+import { List, ListItem, ListItemIcon, ListItemText } from '@mui/material';
+
+import { UserContext } from 'src/contexts/userContext';
+import DoubleChevronRightIcon from 'src/svg/mdi-light_chevron-double-right.svg';
+import { UserType } from 'types/user.type';
+
+type Link = {
+  name: string;
+  link: string;
+};
+interface NavItemProps {
+  key?: number;
+  link: string;
+  primary: string;
+}
+
 const Gerer = () => {
+  const { user } = React.useContext(UserContext);
+  const hasAccess = user !== null && user.type in [UserType.MEDIATOR, UserType.ADMIN, UserType.SUPER_ADMIN];
+
+  if (!hasAccess) {
+    return <h1>Vous n&apos;avez pas accès à cette page, vous devez être modérateur.</h1>;
+  }
+
+  const links: Link[] = [
+    { name: 'Les villages-mondes', link: '/admin/newportal/manage/villages' },
+    { name: 'Les utilisateurs', link: '/admin/newportal/manage/users' },
+    { name: 'Les consignes des activités', link: '/admin/newportal/manage/activities' },
+    { name: 'Paramétrer 1Village', link: '/admin/newportal/manage/settings' },
+    { name: "Les droits d'accès", link: '/admin/newportal/manage/access' },
+  ];
+
+  const NavItem = ({ link, primary }: NavItemProps) => (
+    <Link href={link} passHref>
+      <ListItem className="like-button grey" button component="a">
+        <ListItemText primary={primary} />
+        <ListItemIcon>
+          <DoubleChevronRightIcon />
+        </ListItemIcon>
+      </ListItem>
+    </Link>
+  );
+
   const renderTitle = () => {
     return (
       <div>
         <h1>Gérer</h1>
+        <p>
+          C’est dans cet espace, que les administrateurs et administratrices du site vont pouvoir gérer les droits d’accès, la composition des
+          villages-mondes et accéder à la liste complète des utilisateurs.
+        </p>
       </div>
     );
   };
 
-  return <>{renderTitle()}</>;
+  const renderLinks = () => {
+    return (
+      <List sx={{ padding: 0, margin: 0 }}>
+        {links?.map((item, id) => (
+          <NavItem key={id} link={item.link} primary={item.name} />
+        ))}
+      </List>
+    );
+  };
+
+  return (
+    <>
+      {renderTitle()}
+      {renderLinks()}
+    </>
+  );
 };
 
 export default Gerer;

src/pages/admin/newportal/manage/settings/index.tsx

@@ -0,0 +1,70 @@
+import Link from 'next/link';
+import React from 'react';
+
+import { List, ListItem, ListItemIcon, ListItemText } from '@mui/material';
+
+import BackArrow from 'src/svg/back-arrow.svg';
+import DoubleChevronRightIcon from 'src/svg/mdi-light_chevron-double-right.svg';
+
+type Link = {
+  name: string;
+  link: string;
+};
+interface NavItemProps {
+  key?: number;
+  link: string;
+  primary: string;
+}
+
+const Gerer = () => {
+  const links: Link[] = [
+    { name: 'Archiver', link: 'https://' },
+    { name: 'Présenatation de Pélico', link: 'https://' },
+    { name: 'Paramétrer la home', link: 'https://' },
+    { name: 'Paramétrer les phases', link: 'https://' },
+  ];
+
+  const NavItem = ({ link, primary }: NavItemProps) => (
+    <Link href={link} passHref>
+      <ListItem className="like-button grey" button component="a">
+        <ListItemText primary={primary} />
+        <ListItemIcon>
+          <DoubleChevronRightIcon />
+        </ListItemIcon>
+      </ListItem>
+    </Link>
+  );
+
+  const renderTitle = () => {
+    return (
+      <div>
+        <Link href="/admin/newportal/manage">
+          <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
+            <BackArrow />
+            <h1 style={{ marginLeft: '10px' }}>Paramétrage</h1>
+          </div>
+        </Link>
+        <p>C’est ici que l’on peut activer les phases d’1Village, créer les devinettes de lancement d’année et archiver 1Village.</p>
+      </div>
+    );
+  };
+
+  const renderLinks = () => {
+    return (
+      <List sx={{ padding: 0, margin: 0 }}>
+        {links?.map((item, id) => (
+          <NavItem key={id} link={item.link} primary={item.name} />
+        ))}
+      </List>
+    );
+  };
+
+  return (
+    <>
+      {renderTitle()}
+      {renderLinks()}
+    </>
+  );
+};
+
+export default Gerer;

src/pages/admin/newportal/manage/users/index.tsx

@@ -0,0 +1,24 @@
+import Link from 'next/link';
+import React from 'react';
+
+import BackArrow from 'src/svg/back-arrow.svg';
+
+const Users = () => {
+  const renderTitle = () => {
+    return (
+      <div>
+        <Link href="/admin/newportal/manage">
+          <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
+            <BackArrow />
+            <h1 style={{ marginLeft: '10px' }}>Utilisateurs</h1>
+          </div>
+        </Link>
+        <p>Il y a ici la liste complète des utilisateurs sur 1Village.</p>
+      </div>
+    );
+  };
+
+  return <>{renderTitle()}</>;
+};
+
+export default Users;

src/pages/admin/newportal/manage/villages/index.tsx

@@ -0,0 +1,24 @@
+import Link from 'next/link';
+import React from 'react';
+
+import BackArrow from 'src/svg/back-arrow.svg';
+
+const Villages = () => {
+  const renderTitle = () => {
+    return (
+      <div>
+        <Link href="/admin/newportal/manage">
+          <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
+            <BackArrow />
+            <h1 style={{ marginLeft: '10px' }}>Villages-mondes</h1>
+          </div>
+        </Link>
+        <p>Il y a ici la liste complète des villages-mondes.</p>
+      </div>
+    );
+  };
+
+  return <>{renderTitle()}</>;
+};
+
+export default Villages;