feat(card) : #MAG-114 add board cards

backend/deployment/magneto/conf.json.template

@@ -1,5 +1,5 @@
     {
-      "name": "fr.cgi~magneto~2.0.0",
+      "name": "fr.cgi~magneto~${magnetoVersion}",
       "config": {
         "main" : "fr.cgi.magneto.Magneto",
         "port" : 8205,

backend/pom.xml

@@ -9,7 +9,7 @@
     </parent>
     <groupId>fr.cgi</groupId>
     <artifactId>magneto</artifactId>
-    <version>2.0.0</version>
+    <version>2.0-SNAPSHOT</version>
     <scm>
         <connection>scm:git:https://github.com/OPEN-ENT-NG/magneto.git</connection>
         <developerConnection>scm:git:https://github.com/OPEN-ENT-NG/magneto.git</developerConnection>
@@ -32,7 +32,6 @@
     </repositories>
     <properties>
         <toolsVersion>2.0.0-final</toolsVersion>
-        <vertxCronTimer>2.0.0</vertxCronTimer>
         <powerMockVersion>2.0.2</powerMockVersion>
         <mockitoVersion>[2.0,3.0)</mockitoVersion>
         <entCoreVersion>6.0-SNAPSHOT</entCoreVersion>

backend/src/main/resources/i18n/fr.json

@@ -122,6 +122,7 @@
   "magneto.card.options.delete": "Supprimer",
   "magneto.card.options.move": "Déplacer",
   "magneto.comments": "Commentaires",
+  "magneto.add": "Ajouter",
   "magneto.add.comment": "Ajouter un commentaire",
   "magneto.add.comment.error": "Une erreur est survenue lors de l'ajout du commentaire.",
   "magneto.update.comment.error": "Une erreur est survenue lors de la mise à jour du commentaire.",
@@ -176,6 +177,7 @@
   "group.school.Guest": "Invités de l'{{0}}.",
   "magneto.return": "Retour",
   "magneto.card.saved.by": "Crée par {{0}}, modifié par {{1}}",
+  "magneto.boards.collection": "Collection de tableaux",
   "magneto.cards.collection": "Collection d'aimants",
   "magneto.cards.collection.mine": "Dans mes tableaux",
   "magneto.cards.collection.shared": "Dans les tableaux partagés",

frontend/package.json

@@ -111,7 +111,7 @@
     "concurrently": "8.2.1",
     "csstype": "3.1.2",
     "dotenv-cli": "^7.4.2",
-    "edifice-ts-client": "1.5.23",
+    "edifice-ts-client": "1.7.4",
     "eslint": "8.51.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-import": "2.28.1",

frontend/src/components/app-view/AppView.tsx

@@ -32,8 +32,13 @@ export const AppView: FC = () => {
   const [searchBarResetter, resetSearchBar] = useState(0);
   const { currentFolder, folders, setSelectedFoldersIds, setSelectedFolders } =
     useFoldersNavigation();
-  const { boards, selectedBoards, setSelectedBoards, setSelectedBoardsIds } =
-    useBoardsNavigation();
+  const {
+    boards,
+    selectedBoards,
+    setSelectedBoards,
+    setSelectedBoardsIds,
+    boardsLoading,
+  } = useBoardsNavigation();
   const [dragAndDropBoards, setDragAndDropBoards] = useState<Board[]>([]);
   const [showModal, setShowModal] = useState(false);
   const [modalProps, setModalProps] = useState({
@@ -183,6 +188,8 @@ export const AppView: FC = () => {
             <BoardList
               searchText={searchText}
               onDragAndDrop={handleDragAndDropBoards}
+              boards={boards}
+              boardsLoading={boardsLoading}
             />
             <ToasterContainer
               reset={resetBoardsAndFolders}

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

@@ -0,0 +1,138 @@
+import { FC, useState } from "react";
+
+import { Button, SearchBar } from "@edifice-ui/react";
+import CloseIcon from "@mui/icons-material/Close";
+import { Box, IconButton, Modal, Typography } from "@mui/material";
+import { useTranslation } from "react-i18next";
+
+import {
+  closeButtonStyle,
+  contentContainerStyle,
+  duplicateButtonStyle,
+  headerStyle,
+  modalContainerStyle,
+  modalFooterStyle,
+  titleStyle,
+} from "./style";
+import { InputValueState, BoardCreateMagnetBoardModalProps } from "./types";
+import { useRenderContent } from "./useRenderContent";
+import { initialInputvalue } from "./utils";
+import { TabList } from "../tab-list/TabList";
+import { CURRENTTAB_STATE } from "../tab-list/types";
+import { BOARD_TABS_CONFIG } from "../tab-list/utils";
+import { useMediaLibrary } from "~/providers/MediaLibraryProvider";
+
+export const BoardCreateMagnetBoardModal: FC<
+  BoardCreateMagnetBoardModalProps
+> = ({ open, onClose }) => {
+  const [inputValue, setInputValue] =
+    useState<InputValueState>(initialInputvalue);
+  const { currentTab } = inputValue;
+  const { t } = useTranslation("magneto");
+  const { setIsCreateMagnetOpen, setSelectedBoardData } = useMediaLibrary();
+
+  const handleTabChange = (newValue: CURRENTTAB_STATE) => {
+    setInputValue((prevState) => ({
+      ...prevState,
+      currentTab: newValue,
+      selectedBoardId: null,
+    }));
+  };
+
+  const handleSearchChange = (newValue: string) => {
+    setInputValue((prevState) => ({
+      ...prevState,
+      search: newValue,
+      selectedBoardId: null,
+    }));
+  };
+
+  const handleClose = () => {
+    setInputValue(initialInputvalue);
+    onClose();
+  };
+
+  const handleSubmit = async () => {
+    if (inputValue.selectedBoardId) {
+      setSelectedBoardData(inputValue.selectedBoardId);
+      setIsCreateMagnetOpen(true);
+      handleClose();
+    }
+  };
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      aria-labelledby="modal-title"
+      aria-describedby="modal-create-magnet-magnet"
+    >
+      <Box sx={modalContainerStyle}>
+        <Box sx={headerStyle}>
+          <Typography
+            id="modal-title"
+            variant="h4"
+            component="h2"
+            sx={titleStyle}
+          >
+            {t("magneto.boards.collection")}
+          </Typography>
+          <IconButton
+            onClick={onClose}
+            aria-label="close"
+            sx={closeButtonStyle}
+          >
+            <CloseIcon fontSize="inherit" />
+          </IconButton>
+        </Box>
+        <Box sx={{ width: "100%", padding: "2rem 10%", margin: "auto" }}>
+          <SearchBar
+            onChange={(e) => {
+              handleSearchChange(e.target.value);
+            }}
+            placeholder={t("magneto.search.placeholder")}
+            size="md"
+            isVariant
+            className="searchbar"
+          />
+        </Box>
+        <Box
+          sx={{
+            width: "100%",
+            pb: "1rem",
+            margin: "auto",
+            display: "flex",
+            justifyContent: "center",
+          }}
+        >
+          <TabList
+            currentTab={currentTab}
+            onChange={handleTabChange}
+            tabsConfig={BOARD_TABS_CONFIG}
+          />
+        </Box>
+        <Box sx={contentContainerStyle}>
+          {useRenderContent(inputValue, setInputValue)}
+        </Box>
+        <Box sx={modalFooterStyle}>
+          <Box sx={duplicateButtonStyle}>
+            <Button
+              color="tertiary"
+              type="button"
+              variant="ghost"
+              onClick={() => handleClose()}
+            >
+              {t("magneto.cancel")}
+            </Button>
+            <Button
+              onClick={() => handleSubmit()}
+              disabled={!inputValue.selectedBoardId}
+            >
+              {t("magneto.add")}
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,73 @@
+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;
+
+  .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 */
+
+    .board-number-magnets {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      svg {
+        color: #ffb600;
+        font-size: 1.4rem;
+      }
+
+      svg + p {
+        font-size: 1.2rem;
+        margin: 0;
+      }
+    }
+
+    .board-about {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+
+      .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;
+}
+
+.card-body {
+  width: 100%;
+  padding: 1.2rem;
+}