fix preview and css

frontend/src/components/board-card/useResourceTypeDisplay.ts

@@ -8,6 +8,7 @@ import {
   mdiMusicNote,
   mdiPlayCircle,
 } from "@mdi/js";
+import TableChartIcon from "@mui/icons-material/TableChart";
 
 import { RESOURCE_TYPE } from "~/core/enums/resource-type.enum";
 
@@ -42,6 +43,11 @@ export const useResourceTypeDisplay = (resourceType: string) => {
         type = "Audio";
         break;
       }
+      case RESOURCE_TYPE.BOARD: {
+        icon = mdiFileMultiple; //TODO : change to MUI TableIcon
+        type = "Tableau";
+        break;
+      }
       case RESOURCE_TYPE.FILE: {
         icon = mdiFileMultiple;
         type = "Fichier";

frontend/src/components/board-create-magnet-board-modal/BoardList.scss

@@ -1,73 +1,71 @@
-ul.grid {
-  padding-top: 1.5rem;
-  padding-right: 1.6rem;
-  display: grid;
-  grid-template-columns: repeat(
-    4,
-    minmax(0, 1fr)
-  ); /* Force equal width columns */
-  gap: 1.6rem;
-  width: 100% !important;
-}
-
-li.boardSizing {
-  /* Remove any width constraints */
-  min-width: 0;
+.board-list-container {
+  ul.grid {
+    padding-top: 1.5rem;
+    padding-right: 1.6rem;
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 1.6rem;
+    width: 100% !important;
+  }
 
-  .card {
-    width: 100%;
-    padding: unset !important;
-    margin: unset !important;
-    display: flex;
-    flex-wrap: wrap !important;
-    flex-direction: column;
-    max-width: 100%; /* Ensure card doesn't overflow */
+  li.boardSizing {
+    min-width: 0;
 
-    .board-number-magnets {
+    .card {
+      width: 100%;
+      padding: unset !important;
+      margin: unset !important;
       display: flex;
-      justify-content: center;
-      align-items: center;
+      flex-wrap: wrap !important;
+      flex-direction: column;
+      max-width: 100%;
 
-      svg {
-        color: #ffb600;
-        font-size: 1.4rem;
-      }
+      .board-number-magnets {
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
-      svg + p {
-        font-size: 1.2rem;
-        margin: 0;
-      }
-    }
+        svg {
+          color: #ffb600;
+          font-size: 1.4rem;
+        }
 
-    .board-about {
-      display: flex;
-      justify-content: space-between;
-      width: 100%;
+        svg + p {
+          font-size: 1.2rem;
+          margin: 0;
+        }
+      }
 
-      .board-about-left-content,
-      .board-about-right-content {
-        margin: 0 !important;
+      .board-about {
         display: flex;
-        gap: 0.4rem;
-        align-items: center;
+        justify-content: space-between;
+        width: 100%;
 
-        .med-resource-card-text {
-          font-size: 1.2rem;
+        .board-about-left-content,
+        .board-about-right-content {
+          margin: 0 !important;
+          display: flex;
+          gap: 0.4rem;
+          align-items: center;
+
+          .med-resource-card-text {
+            font-size: 1.2rem;
+          }
         }
       }
     }
   }
-}
 
-.title {
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 1.4rem;
-}
+  .title {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 1.4rem;
+  }
 
-.card-body {
-  width: 100%;
-  padding: 1.2rem;
+  .card-body {
+    width: 100%;
+    padding: 1.2rem;
+  }
 }

frontend/src/components/board-create-magnet-board-modal/useRenderContent.tsx

@@ -88,7 +88,7 @@ export const useRenderContent = (
   };
 
   return (
-    <>
+    <div className="board-list-container">
       {boards?.length > 0 && (
         <animated.ul className="grid ps-0 list-unstyled mb-24">
           {boards
@@ -121,6 +121,6 @@ export const useRenderContent = (
             })}
         </animated.ul>
       )}
-    </>
+    </div>
   );
 };

frontend/src/components/card-preview-board/CardPreviewBoard.tsx

@@ -0,0 +1,198 @@
+import React, { useState, useEffect, useRef } from "react";
+
+import { Box } from "@mui/material";
+
+interface CardPreviewBoardProps {
+  src: string;
+  width?: number;
+  height?: number;
+  onClose?: () => void; // Nouvelle prop pour gérer la fermeture
+}
+
+export const containerStyle = {
+  width: "100%",
+  position: "relative",
+  overflow: "hidden",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+};
+
+export const clickableOverlayStyle = {
+  position: "absolute",
+  cursor: "pointer",
+  zIndex: 1,
+  transformOrigin: "top left",
+  top: 0,
+  left: 0,
+};
+
+export const iframeStyle = {
+  transformOrigin: "top left",
+  pointerEvents: "none",
+  position: "absolute",
+  top: 0,
+  left: 0,
+};
+
+export const loadingContainerStyle = {
+  position: "absolute",
+  inset: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  bgcolor: "grey.50",
+};
+
+export const loadingTextStyle = {
+  color: "text.secondary",
+};
+
+const CardPreviewBoard: React.FC<CardPreviewBoardProps> = ({
+  src,
+  width = 1920,
+  height = 1080,
+  onClose,
+}) => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [containerHeight, setContainerHeight] = useState(0);
+
+  const updateScale = () => {
+    const iframe = iframeRef.current;
+    const container = containerRef.current;
+    const overlay = overlayRef.current;
+    if (!iframe || !container || !overlay) return;
+
+    const containerWidth = container.clientWidth;
+    const viewportHeight = window.innerHeight;
+    const maxHeight = viewportHeight * 0.4;
+
+    const scaleByWidth = containerWidth / width;
+    const scaleByHeight = maxHeight / height;
+    const finalScale = Math.min(scaleByWidth, scaleByHeight);
+
+    const scaledHeight = height * finalScale;
+
+    // Calculate centered position
+    const horizontalOffset = (containerWidth - width * finalScale) / 2;
+
+    setContainerHeight(scaledHeight);
+    container.style.height = `${scaledHeight}px`;
+
+    const transform = `translate(${horizontalOffset}px, 0) scale(${finalScale})`;
+
+    // Position and scale the iframe
+    iframe.style.transform = transform;
+    iframe.style.width = `${width}px`;
+    iframe.style.height = `${height}px`;
+
+    // Apply same transformation to overlay
+    overlay.style.cssText = iframe.style.cssText;
+    overlay.style.visibility = "visible";
+    overlay.style.pointerEvents = "auto";
+    overlay.style.cursor = "pointer";
+  };
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      requestAnimationFrame(updateScale);
+    });
+
+    resizeObserver.observe(container);
+
+    const handleResize = () => requestAnimationFrame(updateScale);
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  const hideHeader = () => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    try {
+      const iframeDoc =
+        iframe.contentDocument || iframe.contentWindow?.document;
+      if (!iframeDoc) return;
+
+      let styleElement = iframeDoc.getElementById("hide-header-style");
+      if (!styleElement) {
+        styleElement = iframeDoc.createElement("style");
+        styleElement.id = "hide-header-style";
+        iframeDoc.head.appendChild(styleElement);
+      }
+
+      styleElement.textContent = `
+        #root > .header:first-of-type {
+          display: none !important;
+        }
+      `;
+    } catch (error) {
+      console.error("Failed to hide header:", error);
+    }
+  };
+
+  const handleIframeLoad = () => {
+    setIsLoading(false);
+    updateScale();
+    hideHeader();
+  };
+
+  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.button === 0) {
+      // Ferme d'abord la modale si la fonction onClose est fournie
+      if (onClose) {
+        onClose();
+      }
+      // Puis redirige vers la nouvelle URL
+      window.location.href = src;
+    }
+  };
+
+  return (
+    <Box
+      ref={containerRef}
+      sx={{
+        ...containerStyle,
+        height: containerHeight ? `${containerHeight}px` : "auto",
+        maxHeight: "40vh",
+      }}
+    >
+      <Box
+        ref={overlayRef}
+        sx={clickableOverlayStyle}
+        onClick={handleOverlayClick}
+      />
+      <iframe
+        ref={iframeRef}
+        src={src}
+        scrolling="no"
+        style={
+          {
+            ...iframeStyle,
+            visibility: isLoading ? "hidden" : "visible",
+          } as React.CSSProperties
+        }
+        onLoad={handleIframeLoad}
+        title="Scaled content"
+        sandbox="allow-scripts allow-same-origin allow-forms"
+      />
+      {isLoading && (
+        <Box sx={loadingContainerStyle}>
+          <Box sx={loadingTextStyle}>Chargement...</Box>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default CardPreviewBoard;

frontend/src/components/preview-content/utils.tsx

@@ -5,6 +5,7 @@ import { CardContentAudio } from "../card-content-audio/CardContentAudio";
 import { CardContentFile } from "../card-content-file/CardContentFile";
 import { CardContentImageDisplay } from "../card-content-image-display/CardContentImageDisplay";
 import { CardContentSvgDisplay } from "../card-content-svg-display/CardContentSvgDisplay";
+import CardPreviewBoard from "../card-preview-board/CardPreviewBoard";
 import { ExternalVideoPlayer } from "../external-video-player/ExternalVideoPlayer";
 import { getVideoSource } from "../external-video-player/utils";
 import { PreviewContentImage } from "../preview-content-image/PreviewContentImage";
@@ -50,6 +51,10 @@ export const displayPreviewContentByType = (card: Card) => {
       );
     case RESOURCE_TYPE.FILE:
       return <CardContentFile card={card} />;
+    case RESOURCE_TYPE.BOARD:
+      return (
+        <CardPreviewBoard src={`/magneto#/board/${card.resourceUrl}/view`} />
+      );
     default:
       return null;
   }

frontend/src/core/enums/resource-type.enum.ts

@@ -8,6 +8,7 @@ export enum RESOURCE_TYPE {
   FILE = "file",
   LINK = "link",
   CARD = "card",
+  BOARD = "board",
 
   EMBEDDER = "embedder",
   HYPERLINK = "hyperlink",