Push from mediatheque with card

server/controllers/mediatheque.ts

@@ -12,43 +12,46 @@ const getMedias = async (result: any[], queryBuilder, offset, limit) => {
     .limit(limit ? parseInt(limit) : undefined)
     .offset(offset ? parseInt(offset) : undefined)
     .getMany();
-  console.log('offset');
-  console.log(offset);
-  console.log('limit');
-  console.log(limit);
-  console.log('activities');
-  console.log(activities);
-  const activitiesMediaFinder = activities.map(({ id, content, subType, type, villageId, userId }) => {
-    const result = { id, subType, type, villageId, userId, content: [] };
+  // console.log('offset');
+  // console.log(offset);
+  // console.log('limit');
+  // console.log(limit);
+  // console.log('activities');
+  // console.log(activities);
+  const activitiesMediaFinder = activities.map(({ id, content, subType, type, villageId, userId, user }) => {
+    // let subQueryBuilder = AppDataSource.getRepository(Activity).createQueryBuilder('activity').innerJoinAndSelect('activity.user', 'user');
+    // subQueryBuilder = subQueryBuilder.addSelect(['user.countrycode']);
+    // const activitiesWithUserData = await subQueryBuilder.getMany();
+    const result = { id, subType, type, villageId, userId, medias: [], user };
     if (content.game) {
       content.game.map(({ inputs }) =>
-        inputs.map((input) => {
+        inputs.map((input: { type: number; selectedValue: string }) => {
           if (input.type === 3 || input.type === 4) {
-            result.content.push({ type: input.type === 3 ? 'image' : 'video', value: input.selectedValue });
+            result.medias.push({ type: input.type === 3 ? 'image' : 'video', value: input.selectedValue });
           }
         }),
       );
     } else {
       content.map(({ type, value }) => {
         const wantedTypes = ['image', 'video', 'sound'];
         if (wantedTypes.includes(type)) {
-          result.content.push({ type, value });
+          result.medias.push({ type, value });
         }
       });
     }
     return result;
   });
 
-  const activitiesWithMediaOnly = activitiesMediaFinder.filter((a) => a.content.length > 0);
+  const activitiesWithMediaOnly = activitiesMediaFinder.filter((a) => a.medias.length > 0);
   result = [...result, ...activitiesWithMediaOnly];
 
   if (!limit) {
     return { activities: result, offset: offset + limit };
   }
   const oldLength = result.length;
   result = result.slice(0, limit);
-  console.log('resultPOPOPO');
-  console.log(result);
+  // console.log('resultPOPOPO');
+  // console.log(result);
   const newLength = result.length;
   const hasReduced = oldLength !== newLength;
 
@@ -67,7 +70,10 @@ mediathequeController.post({ path: '' }, async (req, res) => {
   const filters: Array<Filter[]> = req?.body?.filters || [];
   const offset: string | undefined = req?.query?.offset as string;
   const limit: string | undefined = req?.query?.limit as string;
-  let subQueryBuilder = AppDataSource.getRepository(Activity).createQueryBuilder('activity').innerJoin('activity.user', 'user');
+  let subQueryBuilder = AppDataSource.getRepository(Activity)
+    .createQueryBuilder('activity')
+    .innerJoinAndSelect('activity.user', 'user') // Join and select the user
+    .addSelect(['user.countrycode']); // Select the countrycode
 
   filters.map((filter, index) => {
     subQueryBuilder = subQueryBuilder[index === 0 ? 'where' : 'orWhere'](
@@ -84,10 +90,9 @@ mediathequeController.post({ path: '' }, async (req, res) => {
       }),
     );
   });
-
   const activitiesWithMediaOnly = await getMedias([], subQueryBuilder, offset ? parseInt(offset) : undefined, limit ? parseInt(limit) : undefined);
-  console.log('activitiesWithMediaOnly');
-  console.log(activitiesWithMediaOnly);
+  // console.log('activitiesWithMediaOnly');
+  // console.log(activitiesWithMediaOnly);
 
   res.send(activitiesWithMediaOnly);
 });

src/components/admin/mediatheque/CardMediatheque.tsx

@@ -0,0 +1,50 @@
+import React, { useContext } from 'react';
+
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import Typography from '@mui/material/Typography';
+
+import MediathequeContext from 'src/contexts/mediathequeContext';
+
+export default function MediaCard() {
+  const { filtered } = useContext(MediathequeContext);
+  const { allFiltered } = useContext(MediathequeContext);
+  console.log('filtered');
+
+  console.log(filtered);
+  console.log('allFiltered');
+
+  console.log(allFiltered);
+
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between' }}>
+      {filtered && filtered.length > 0 ? (
+        filtered.map((item, index) => (
+          <Card key={index} sx={{ width: '30%', marginBottom: '20px' }}>
+            {/* Utilisation de la première image du tableau medias */}
+            <CardMedia sx={{ height: 140 }} image={item.medias[0].value} title="Media" />
+            <CardContent>
+              <Typography gutterBottom variant="h5" component="div">
+                Media {item.id}
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                Type: {item.type}, Subtype: {item.subType}
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                User ID: {item.userId}, Village ID: {item.villageId}
+              </Typography>
+            </CardContent>
+            <CardActions>
+              <Button size="small">En savoir plus</Button>
+            </CardActions>
+          </Card>
+        ))
+      ) : (
+        <p>Aucun média disponible</p>
+      )}
+    </div>
+  );
+}

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

@@ -20,6 +20,7 @@ import IconButton from '@mui/material/IconButton';
 import Pagination from '@mui/material/Pagination';
 import Stack from '@mui/material/Stack';
 
+import MediaCard from 'src/components/admin/mediatheque/CardMediatheque';
 import CheckboxAdmin from 'src/components/admin/mediatheque/CheckboxAdmin';
 import DownloadButton from 'src/components/admin/mediatheque/DownloadButton';
 import Filters from 'src/components/admin/mediatheque/Filter';
@@ -30,10 +31,7 @@ import MediathequeContext from 'src/contexts/mediathequeContext';
 import { bgPage } from 'src/styles/variables.const';
 import PelicoSearch from 'src/svg/pelico/pelico-search.svg';
 
-const Mediatheque = () => {
-  const { setFilters, filtered, setOffset, count } = useContext(MediathequeContext);
-
-  /* const [currentVillage, setCurrentVillage] = useState(null)
+/* const [currentVillage, setCurrentVillage] = useState(null)
   const [currentCountry, setCurrentCountry] = useState(null)
   const [currentClass, setCurrentClass] = useState(null)
 
@@ -61,6 +59,9 @@ const Mediatheque = () => {
     updateClassList();
   },[currentCountry, updateClassList, countrylist]) */
 
+const Mediatheque = () => {
+  const { setFilters, filtered, setOffset, count } = useContext(MediathequeContext);
+
   const handleResetFilters = () => {
     setFilters([[]]);
     setOffset(0);
@@ -119,6 +120,9 @@ const Mediatheque = () => {
           <div>Il y a des médias</div>
         )}
       </div>
+      <div>
+        <MediaCard />
+      </div>
       <div className="pagination">
         <Stack spacing={2}>
           <Pagination size="small" siblingCount={0} count={howManyPages} variant="outlined" onChange={handleChangePage} />