Merge pull request #893 from parlemonde/ft-VIL-299/publish-dashboard

Ft vil 299/publish dashboard

package.json

@@ -120,16 +120,17 @@
   },
   "dependencies": {
     "@emotion/cache": "^11.9.3",
-    "@emotion/react": "^11.9.3",
+    "@emotion/react": "^11.11.4",
     "@emotion/server": "^11.4.0",
-    "@emotion/styled": "^11.9.3",
+    "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^2.9.10",
     "@lumieducation/h5p-express": "^9.3.2",
     "@lumieducation/h5p-react": "^9.3.2",
     "@lumieducation/h5p-server": "^9.3.2",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.8.5",
+    "@mui/material": "^5.15.14",
     "@mui/system": "^5.8.5",
+    "@mui/x-data-grid": "^6.19.6",
     "ajv": "^8.11.2",
     "ajv-formats": "^2.1.1",
     "argon2": "^0.28.7",

server/controllers/user.ts

@@ -2,7 +2,7 @@ import type { JSONSchemaType } from 'ajv';
 import * as argon2 from 'argon2';
 import type { NextFunction, Request, Response } from 'express';
 import type { FindOperator } from 'typeorm';
-import { getRepository, In, IsNull, LessThan } from 'typeorm';
+import { In, IsNull, LessThan } from 'typeorm';
 
 import { getAccessToken } from '../authentication/lib/tokens';
 import { Email, sendMail } from '../emails';

src/api/activities/activities.get.ts

@@ -0,0 +1,25 @@
+import { useQuery } from 'react-query';
+import type { Activity } from 'server/entities/activity';
+
+import { axiosRequest } from 'src/utils/axiosRequest';
+
+async function getActivities(params: { limit: number | null; isPelico: boolean; isDraft: boolean }): Promise<Activity[]> {
+  const { limit, isPelico, isDraft } = params;
+  return (
+    await axiosRequest({
+      method: 'GET',
+      baseURL: '/api',
+      url: '/activities',
+      params: {
+        limit,
+        pelico: isPelico,
+        status: isDraft ? 1 : 0,
+      },
+    })
+  ).data;
+}
+
+export const useGetActivities = (args: { limit: number; isPelico: boolean; isDraft: boolean }) => {
+  const { isDraft, isPelico, limit } = args;
+  return useQuery(['activities', limit, isPelico, isDraft], () => getActivities({ limit, isDraft, isPelico }));
+};

src/api/activities/activities.put.ts

@@ -0,0 +1,24 @@
+import { useMutation } from 'react-query';
+
+import { axiosRequest } from 'src/utils/axiosRequest';
+
+async function publishActivity(params: { activityId: number }) {
+  const { activityId } = params;
+  return await axiosRequest({
+    method: 'PUT',
+    baseURL: '/api',
+    url: `/activities/${activityId}`,
+    data: {
+      status: 0,
+    },
+  });
+}
+
+export const usePublishActivity = (args: { activityId: number }) => {
+  const { activityId } = args;
+  return useMutation({
+    mutationFn: () => {
+      return publishActivity({ activityId });
+    },
+  });
+};

src/components/Header.tsx

@@ -218,8 +218,15 @@ export const Header = () => {
             {/* )} */}
             {user.type === UserType.ADMIN ||
               (user.type === UserType.SUPER_ADMIN ? (
-                <Link href="/admin/newportal" passHref>
-                  <Button component="a" href="/admin/newportal" variant="contained" color="primary" size="small" style={{ marginLeft: '1rem' }}>
+                <Link href="/admin/newportal/create" passHref>
+                  <Button
+                    component="a"
+                    href="/admin/newportal/create"
+                    variant="contained"
+                    color="primary"
+                    size="small"
+                    style={{ marginLeft: '1rem' }}
+                  >
                     {'Aller à la nouvelle interface admin'}
                   </Button>
                 </Link>

src/components/activities/ActivityCard/activity-admin/ActivityCardAdmin.tsx

@@ -0,0 +1,112 @@
+import React, { useEffect } from 'react';
+import { useQueryClient } from 'react-query';
+import type { Activity } from 'server/entities/activity';
+
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { Card, CardHeader, Avatar, CardMedia, CardContent, Typography, Button, CardActions, CircularProgress, Menu, MenuItem } from '@mui/material';
+
+import { usePublishActivity } from 'src/api/activities/activities.put';
+import PelicoSouriant from 'src/svg/pelico/pelico-souriant.svg';
+import { htmlToText } from 'src/utils';
+
+export default function ActivityCard(activity: Pick<Activity, 'images' | 'content' | 'phase' | 'data' | 'id' | 'status'>) {
+  const publishActivity = usePublishActivity({ activityId: activity.id });
+  const queryClient = useQueryClient();
+  const title: string = activity?.data?.title ? (activity.data.title as string) : '';
+  const imageUrl: string =
+    activity?.images?.length && activity.images[0].imageUrl ? activity.images[0].imageUrl : 'https://placehold.co/600x400?text=No Picture';
+  const content: string = activity.content.reduce((acc, curr) => {
+    if (curr.type === 'text') {
+      acc += curr.value;
+    }
+    return acc;
+  }, '');
+
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  useEffect(() => {
+    if (publishActivity.isSuccess) {
+      queryClient.invalidateQueries({ queryKey: ['activities'] });
+    }
+  }, [publishActivity.isSuccess, queryClient]);
+  return (
+    <Card variant="outlined" sx={{ padding: 1, margin: 2, borderRadius: 4, borderColor: '#ebebeb', width: '50%' }}>
+      <CardHeader
+        avatar={
+          <Avatar sx={{ backgroundColor: 'transparent' }}>
+            <PelicoSouriant />
+          </Avatar>
+        }
+        title={title}
+        titleTypographyProps={{ variant: 'h6' }}
+        sx={{
+          // refer to mui content only classname
+          '.MuiCardHeader-content': {
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+          },
+        }}
+        action={
+          <>
+            <Button
+              id="basic-button"
+              aria-controls={open ? 'basic-menu' : undefined}
+              aria-haspopup="true"
+              aria-expanded={open ? 'true' : undefined}
+              onClick={handleClick}
+            >
+              <MoreVertIcon color="inherit" />
+            </Button>
+            <Menu
+              id="basic-menu"
+              anchorEl={anchorEl}
+              open={open}
+              onClose={handleClose}
+              MenuListProps={{
+                'aria-labelledby': 'basic-button',
+              }}
+            >
+              <MenuItem onClick={handleClose}>Modifier</MenuItem>
+              <MenuItem onClick={handleClose}>Supprimer</MenuItem>
+            </Menu>
+          </>
+        }
+      />
+      <CardMedia
+        sx={{ padding: '1em 1em 0 1em', objectFit: 'cover', objectPosition: 'center' }}
+        component="img"
+        height="194"
+        image={imageUrl}
+        alt="Activity picture"
+      />
+      <CardContent>
+        <Typography
+          variant="body2"
+          color="text.secondary"
+          sx={{
+            maxHeight: '60px',
+            overflow: 'clip',
+            whiteSpace: 'break-spaces',
+          }}
+        >
+          {htmlToText(content)}
+        </Typography>
+      </CardContent>
+      {/* display publish button only if activity is not published yet (status = 1) */}
+      {activity.status !== 0 && (
+        <CardActions sx={{ display: 'flex', justifyContent: 'center' }}>
+          <Button size="small" sx={{ border: 1 }} onClick={() => publishActivity.mutate()} disabled={publishActivity.isLoading}>
+            {publishActivity.isLoading ? <CircularProgress /> : 'Publier'}
+          </Button>
+        </CardActions>
+      )}
+    </Card>
+  );
+}

src/components/activities/ActivityCard/activity-admin/ActivityCardAdminList.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import type { Activity } from 'server/entities/activity';
+
+import { Button } from '@mui/material';
+import Paper from '@mui/material/Paper';
+
+import ActivityCardAdmin from './ActivityCardAdmin';
+
+type Props = {
+  title: string;
+  activities: Activity[];
+  svgNoData: unknown;
+  noDataText: string;
+};
+
+export default function ActivityCardAdminList({ title, activities, svgNoData, noDataText }: Props) {
+  return (
+    <Paper
+      sx={{
+        borderRadius: 4,
+      }}
+    >
+      <div
+        style={{
+          padding: 10,
+          margin: 10,
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            width: '100%',
+            justifyContent: 'space-between',
+          }}
+        >
+          <h2>{title}</h2>
+          <Button size="small" sx={{ border: 1, margin: 1 }}>
+            Afficher plus
+          </Button>
+        </div>
+        {activities.length ? (
+          <div style={{ display: 'flex' }}>
+            {activities.map((activity) => (
+              <ActivityCardAdmin key={activity.id} {...activity} />
+            ))}
+          </div>
+        ) : (
+          <div
+            style={{
+              paddingLeft: 20,
+              marginTop: 30,
+            }}
+          >
+            <p>{noDataText}</p>
+            {svgNoData}
+          </div>
+        )}
+      </div>
+    </Paper>
+  );
+}

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

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -20,10 +21,23 @@ const ContenuLibre = () => {
 
   const backButton = () => {
     return (
-      <a href="/admin/newportal/create" style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
-        <BackArrow />
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        <div
+          style={{
+            cursor: 'pointer',
+          }}
+        >
+          <Link href="/admin/newportal/create">
+            <BackArrow />
+          </Link>
+        </div>
         <h1 style={{ marginLeft: '10px' }}>Créer du contenu libre</h1>
-      </a>
+      </div>
     );
   };