Merge branch 'issue/239-cards-divorce' into 'develop'

Issue #239: FIX cards on resource

See merge request !230

src/app/components/Cards.js

@@ -110,15 +110,12 @@ export default function Cards(props) {
 
   return (
     <Card
-      className={`active:bg-main active:rounded-3xl transition ease-in-out ${props.page !== "recurso" && "items-center"}`}
+      className={`active:bg-main active:rounded-3xl transition ease-in-out 2xl:w-[330px] xl:w-[290px] lg:w-[270px] max-lg:w-[290px] ${props.page !== "recurso" && "items-center"}`}
       tabIndex="-1"
       sx={{
         display: "flex",
-        flexDirection: props?.horizontal ? "row" : "column",
-        // Modo de mudar o tamanho do card de acordo com a resolução da tela até separar os cards de recomendados com de recursos gerais
-        width: props?.width ?? (window.innerWidth >= 1536 ? 330 : window.innerWidth >= 1280 ? 290 : window.innerWidth >= 1024 ? 270 : 290),
-
-        height: props?.height ?? "auto",
+        flexDirection: "column",
+        height: "auto",
         backgroundColor: "transparent",
         boxShadow: "none",
       }}
@@ -131,8 +128,8 @@ export default function Cards(props) {
         tabIndex="0"
         className="hover:scale-[1.02] p-1 focus:border-secondary focus:border-4 border-gray-color transition-transform rounded-xl flex-shrink-0 aspect-video"
         sx={{
-          width: props?.thumbWidth ?? 327,
-          height: props?.thumbHeight ?? 181,
+          width: 327,
+          height: 181,
         }}
         component="img"
         image={

src/app/components/RecommendedCards.js

+import * as React from "react";
+import Card from "@mui/material/Card";
+import CardHeader from "@mui/material/CardHeader";
+import CardMedia from "@mui/material/CardMedia";
+import Avatar from "@mui/material/Avatar";
+import Typography from "@mui/material/Typography";
+import Link from "next/link";
+import { mecredURL } from "@/axiosConfig";
+import { useMediaQuery } from "@mui/material";
+
+
+/**
+ * Funçao que monta os cards dos recursos
+ * @param {Number} id id do recurso
+ * @param {string} title título do recurso
+ * @param {string} author autor do recurso
+ * @param {string} avatar link avatar autor
+ * @param {string} image link imagem recurso
+ * @param {String} updated_at data da ultima modificação do recurso
+ */
+
+export default function RecommendedCards(props) {
+
+  /**
+   * 
+   * @param {String} type tipo de recurso 
+   * @returns caso o recurso não tenha retorna uma thumbnail padrão
+   */
+  const getDefaultThumbnail = (type) => {
+    let thumbnail_url;
+
+    switch (type) {
+      case "Apresentação":
+        thumbnail_url = "/images/thumb-red.png";
+        break;
+      case "Livro digital":
+        thumbnail_url = "/images/thumb-pdf.png";
+        break;
+      case "Texto":
+        thumbnail_url = "/images/thumb-pdf.png";
+        break;
+      case "Vídeo":
+        thumbnail_url = "/images/thumb-video.png";
+        break;
+      case "Áudio":
+        thumbnail_url = "/images/thumb-audio.png";
+        break;
+      case "Imagem":
+        thumbnail_url = "/images/thumb-red.png";
+        break;
+      case "Animação":
+        thumbnail_url = "/images/thumb-red.png";
+        break;
+      case "Jogo":
+        thumbnail_url = "/images/thumb-red.png";
+      case "Software Educacional":
+        thumbnail_url = "/images/thumb-red.png";
+        break;
+      default:
+        thumbnail_url = "/images/thumb-red.png";
+        break;
+    }
+
+    return thumbnail_url;
+  };
+
+  /**
+   * 
+   * @param {String} updated_time 
+   * @returns função responsável por cálcular o tempo percorrido desde a publicação do recurso na plataforma
+   */
+  const timeFunction = (updated_time) => {
+    let data = new Date(updated_time)
+    let dataAtual = new Date();
+
+    let time = dataAtual.getTime() - data.getTime();
+    let dia = Math.floor(time / (1000 * 60 * 60 * 24));
+    let ano;
+    let mes;
+
+    if ((ano = Math.floor(dia / 365)) > 0)
+      return <p> há {ano} {ano === 1 ? "ano" : "anos"} </p>
+    else if (((mes = Math.floor(dia / 31)) > 0))
+      return <p> há {mes} {mes === 1 ? "mês" : "meses"}</p>
+
+    if (dia === 0)
+      return <p>hoje</p>
+    return <p>há {dia} {dia === 1 ? "dia" : "dias"}</p>
+
+  }
+
+  function getRandomBg(id) {
+    const colors = [
+      "bg-secondary",
+      "bg-orange",
+      "bg-secondary-hover",
+      "bg-orange-hover",
+      "bg-violet",
+      "bg-pink",
+      "bg-red",
+      "bg-text-color",
+      "bg-text-color-click",
+      "bg-button-filters",
+      "bg-text-filter",
+      "bg-other-links",
+      "bg-blue-button",
+    ]
+
+    return colors[id % colors.length];
+  }
+
+  const isSm = useMediaQuery((theme) => theme.breakpoints.down('sm'));
+
+
+  return (
+    <Card
+      className={`active:bg-main active:rounded-3xl transition ease-in-out ${props.page !== "recurso" && "items-center"}`}
+      tabIndex="-1"
+      sx={{
+        display: "flex",
+        flexDirection: props?.horizontal ? "row" : "column",
+        width: "100%",
+        height: "auto",
+        backgroundColor: "transparent",
+        boxShadow: "none",
+      }}
+      component={Link}
+      href={`/recurso/${props["id"]}` + (props.collectionSource ? `?collectionId=${props.collectionSource}` : "")}
+    >
+
+      <CardMedia
+        id="conteudo"
+        tabIndex="0"
+        className="hover:scale-[1.02] p-1 focus:border-secondary focus:border-4 border-gray-color transition-transform rounded-xl flex-shrink-0 aspect-video"
+        sx={{
+          width: isSm ? "100%" : "230px",
+          height: "auto",
+        }}
+        component="img"
+        image={
+          props["image"] === null
+            ? getDefaultThumbnail(props["type"])
+            : mecredURL + props["image"]
+        }
+        alt="imagem"
+        title={props.title}
+      />
+      {
+        props.page === "recurso" ?
+          <>
+
+            <div className="flex flex-col ml-4 max-sm:ml-0 max-sm:justify-stretch">
+              <div className="line-clamp-2 text-lg text-main-text font-bold text-text-filter min-h-4 max-sm:w-full"> {props["title"]}  </div>
+
+              <div className=" flex flex-row ">
+                <div className="flex flex-col ">
+                  <div className="line-clamp-1 text-text-color text-sm font-light" >
+                    {props["author"]}
+                  </div>
+                  <div className="line-clamp-1 text-text-color text-sm font-light">
+                    {timeFunction(props.updated_at)}
+                  </div>
+                </div>
+              </div>
+
+            </div>
+          </>
+          :
+          <>
+            <div className="flex flex-row mt-4 mb-4 w-full justify-start ">
+              {props?.noAvatar || !props["avatar"] ? <div className={`flex items-center shrink-0 justify-center text-xl font-bold ml-1 text-main rounded-full h-[33px] w-[33px] ${getRandomBg(props["id"])}`} >{props["author"][0]}</div>
+                :
+                <img
+                  src={mecredURL + props["avatar"]}
+                  alt={props["author"]}
+                  className="w-[33px] h-[33px] object-cover rounded-full"
+
+                />
+
+              }
+              <div className="mx-2">
+                <div className="line-clamp-1 text-sm text-main-text font-bold text-text-filter mb- w-[100%] min-h-4"> {props["title"]}  </div>
+                <div className="flex flex-row">
+                  <div>
+                    <div className="line-clamp-1 text-text-color text-sm font-light" >
+                      {props["author"]}
+                    </div>
+                    <div className="line-clamp-1 text-text-color text-sm font-light">
+                      {timeFunction(props.updated_at)}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+
+          </>
+      }
+      {props?.homologa == "submitted" ?
+        <div className="text-main text-xs p-1 bg-blue-publish rounded-full flex justify-start">Em homologação</div>
+        :
+        null
+      }
+    </Card>
+  );
+}

src/app/perfil/[id]/components/ProfileCollections.js

@@ -14,7 +14,6 @@ import EditCollectionModal from "./EditCollectionModal";
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
 import ShareButton from "@/app/components/ShareButton";
 
-
 const ModalSucess = ({ open, onClose, modalOnClose }) => {
   return (
     <Modal open={open} onClose={onClose} className="grid place-items-center">

src/app/recurso/[id]/components/actionButtons.js

@@ -176,7 +176,7 @@ export default function ActionButtons({ learningObject, setNeedLoginOpen, state
 
   let buttonKey = 0;
   let genButton = (info) => (
-    !info ? null : <Button
+    !info ? null : info.name == "Compartilhar" ? <ShareModal buttonType="incolor" /> : <Button
       id="conteudo"
       key={buttonKey++}
       className=" first:bg-secondary group outline outline-1 outline-outlineColor group/button bg-white shadow-none flex justify-start rounded-xl p-1 m-1 normal-case text-sm min-w-min font-bold hover:bg-main-hover focus:bg-main-hover"
@@ -193,7 +193,6 @@ export default function ActionButtons({ learningObject, setNeedLoginOpen, state
     <>
       <DeleteModal open={deleteOpen} onClose={() => setDeleteOpen(false)} idLogin={userData["id"]} resourceId={learningObject.id}  />
       <HomologationModal open={submitOpen} onClose={() => setSubmitOpen(false)} name={learningObject.name} id={learningObject.submission_id} setSubmitted={setSubmitted}/>
-      <ShareModal open={shareOpen} onClose={() => setShareOpen(false)} title={"Compartilhar recurso"} link={window.location.origin + pathname}/>
       <ReportModal
         learningObject={learningObject}
         open={reportOpen}

src/app/recurso/[id]/components/relatedResources.js

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import Cards from "@/app/components/Cards";
 import { useMediaQuery } from "@mui/material";
 import Loading from "@/app/components/Loading";
+import RecommendedCards from "@/app/components/RecommendedCards";
 
 const NUM_RELATED = 12;
 
@@ -58,7 +59,7 @@ export default function RelatedResources({ learningObject }) {
                   className="my-3"
                   key={index}
               >
-                <Cards 
+                <RecommendedCards 
                   horizontal={!isSm}
                   noAvatar={!isSm}
                   id={item["id"]}
@@ -68,9 +69,6 @@ export default function RelatedResources({ learningObject }) {
                   image={item["thumbnail"]}
                   type={item["object_type"]}
                   updated_at={item["updated_at"]}
-                  thumbWidth={isSm ? "100%" : "230px"}
-                  thumbHeight="auto"
-                  width="100%"
                   page="recurso"
                 />
               </div>