diff --git a/src/app/components/Content.js b/src/app/components/Content.js index e24104adb1166aa4cb7afe357504c78bedda1c7c..c98db1b2fdf568274e4ffe0b1163cdcebc34b257 100644 --- a/src/app/components/Content.js +++ b/src/app/components/Content.js @@ -96,7 +96,7 @@ export default function Content({ name, inputFilter, searchPage }) { {(filterState.searchClass !== "MEC" && filterState.searchClass != "User") ? ( <> - <div className=" pl-10 fixed top-[100px] w-full + <div className=" pl-10 fixed top-[100px] w-full bg-fundo bg-repeat bg-fixed" @@ -109,7 +109,7 @@ export default function Content({ name, inputFilter, searchPage }) { </div> </div> - <div className="ml-4 pt-36"> + <div className="ml-4 pt-36 max-sm:ml-0"> <InfiniteScroll filterState={filterState} setNewSize={setNewSize} setItems={setItemsBySearchClass[filterState.searchClass]} items={itemsBySearchClass[filterState.searchClass]} abortController={abortControllerBySearchClass[filterState.searchClass]} /> </div> </> diff --git a/src/app/components/GroupCardsCollections.js b/src/app/components/GroupCardsCollections.js index 8496db3e5c66f61e0b548ffa08b73dc45cc1eaac..97b35a09ec20d4d1ce66683c0fd27ead5a30208e 100644 --- a/src/app/components/GroupCardsCollections.js +++ b/src/app/components/GroupCardsCollections.js @@ -1,75 +1,76 @@ "use client"; import { useEffect, useState } from "react"; import Cards from "./Cards"; - +import { useRouter } from "next/navigation" /** * Retorna na tela uma coleção * @param {Array.<Object>} data - recursos da coleção * @param {number} cardsPerRow - quantidade de cards que cabem na linha */ export default function GroupCardsCollections({ data, cardsPerRow }) { - const [expanded, setExpanded] = useState(false); - const [showButton, setShowButton] = useState(false); + const [expanded, setExpanded] = useState(false); + const [showButton, setShowButton] = useState(false); + const router = useRouter() + + const handleResize = (data) => { + setShowButton(data?.length > cardsPerRow); + }; - const handleResize = (data) => { - setShowButton(data?.length > cardsPerRow); - }; + const toggleContent = () => { + setExpanded(!expanded); + }; - const toggleContent = () => { - setExpanded(!expanded); - }; + useEffect(() => { + handleResize(data); + }), [cardsPerRow]; - useEffect(() => { - handleResize(data); - }), [cardsPerRow]; + return ( - return ( - - <div className="flex flex-col"> - <div className="mx-1 flex flex-col"> - <div id="contentSize" className={`flex content flex-wrap max-sm:justify-center mb-4 max-sm:ml-0 md:ml-0 ${expanded ? "" : "overflow-y-hidden h-[290px]"}`}> + <div className="flex flex-col"> + <div className="mx-1 flex flex-col"> + <div id="contentSize" className={`flex content flex-wrap max-sm:justify-center mb-4 max-sm:ml-0 md:ml-0 ${expanded ? "" : "overflow-y-hidden h-[290px]"}`}> - {data?.length !== 0 ? data?.map((item, index) => { - return ( - <Cards - key={index} - id={item['collectionable']['id']} - title={item["collectionable"]["name"]} - author={item["collectionable"]["publisher"]["name"]} - authorId={item["collectionable"]["publisher"]["id"]} - avatar={item["collectionable"]["publisher"]["avatar"]} - image={item["collectionable"]["thumbnail"]} - updated_at={item["collectionable"]["updated_at"]} - /> - ); - }) - : - <div className="flex flex-col justify-center w-full items-center"> - <p className="text-main-text text-xl font-bold">Coleção Vazia</p> - <p className="text-main-text text-sm font-bold">Adicione novos recursos!</p> - </div> - } - </div> + {data?.length !== 0 ? data?.map((item, index) => { + return ( + <Cards + key={index} + id={item['collectionable']['id']} + title={item["collectionable"]["name"]} + author={item["collectionable"]["publisher"]["name"]} + authorId={item["collectionable"]["publisher"]["id"]} + avatar={item["collectionable"]["publisher"]["avatar"]} + image={item["collectionable"]["thumbnail"]} + updated_at={item["collectionable"]["updated_at"]} + /> + ); + }) + : + <div className="flex flex-col justify-center w-full items-center"> + <p className="text-main-text text-xl font-bold">Coleção Vazia</p> + <button onClick={() => router.push(`/busca?page=LearningObject`)} className="text-main-text text-sm font-bold">Adicione novos recursos!</button> </div> - <> - {/*mostra botão de ver mais caso os recursos de uma coleção cabem em mais de uma linha */} - {showButton ? - ( - <button - fullWidth - disableElevation - variant="outlined" - className="hover:bg-main -ml-4 py-2 border-hidden rounded-xl normal-case flex justify-center" - onClick={toggleContent} - > - <p className=" px-4 text-main-text-click text-lg rounded-md" - alt={expanded ? "Ver menos" : "Ver mais..."} - > - {expanded ? "Ver menos" : "Ver mais..."} - </p> - </button> - ) : null} - </> + } </div> - ); + </div> + <> + {/*mostra botão de ver mais caso os recursos de uma coleção cabem em mais de uma linha */} + {showButton ? + ( + <button + fullWidth + disableElevation + variant="outlined" + className="hover:bg-main -ml-4 py-2 border-hidden rounded-xl normal-case flex justify-center" + onClick={toggleContent} + > + <p className=" px-4 text-main-text-click text-lg rounded-md" + alt={expanded ? "Ver menos" : "Ver mais..."} + > + {expanded ? "Ver menos" : "Ver mais..."} + </p> + </button> + ) : null} + </> + </div> + ); } diff --git a/src/app/components/InfiniteScrollCards.js b/src/app/components/InfiniteScrollCards.js index 979ecde2967a2aa89fcd1f411bc5267605a4405e..18cead1ff51491c20edbe5058776e1bae60dea98 100644 --- a/src/app/components/InfiniteScrollCards.js +++ b/src/app/components/InfiniteScrollCards.js @@ -78,10 +78,10 @@ export default function InfiniteScrollCards({ data, searchClass, setNewSize, new switch (type) { case "Collection": return ( - <div className="flex flex-col"> + <div className="flex flex-col justify-center"> {data?.map((item, index) => ( <Fragment key={item['id']} > - <div className="bg-white mb-10 pt-6 pl-4 mr-14 rounded-2xl outline outline-2 outline-outlineColor"> + <div className="bg-white mb-10 pt-6 pl-4 mx-7 rounded-2xl outline outline-2 outline-outlineColor"> <p className="text-2xl max-md:text-center font-bold mb-0 text-text-color mr-2 inline-block">{item['name']}</p> <div className="flex flex-wrap justify-between mr-8 max-md:flex-col "> <p className=" ml-1 max-md:text-center text-main-text mb-0"> diff --git a/src/app/perfil/[id]/components/CreateCollectionModal.js b/src/app/perfil/[id]/components/CreateCollectionModal.js index cd1de804070a014b6ca2c63d86769886bacd2c80..fe7699f22d182a50b82e8c7b761daf9e723ee904 100644 --- a/src/app/perfil/[id]/components/CreateCollectionModal.js +++ b/src/app/perfil/[id]/components/CreateCollectionModal.js @@ -10,97 +10,125 @@ import mecredApi from "@/axiosConfig"; * @param {Number} props.idLogin * @returns Modal de criar uma nova coleção */ -export default function CreateCollectionModal({ open, onClose, idLogin }) { - const [name, setName] = useState("") - const token = getStoredValue("access_token"); - const client = getStoredValue("client"); - const uid = getStoredValue("uid"); - const handleNameChange = (e) => { - setName(e.target.value) - } +const ModalSucess = ({ open, onClose, modalOnClose }) => { + return ( + <Modal open={open} onClose={onClose} className="grid place-items-center"> + <div className="flex flex-col justify-center items-center bg-main gap-3 px-4 py-10 pt-12 rounded"> + <p className="text-xl justify-center flex text-main-text">Coleção criada com sucesso!</p> + <div className="flex flex-row mt-5"> + <button + className=" text-sm p-2 mr-1 text-white border-main rounded-lg normal-case h-9 w-24 font-bold bg-secondary hover:bg-secondary-hover" + onClick={() => { onClose(); modalOnClose() }} + > + Fechar + </button> + </div> + </div> + </Modal> + ) +} + +export default function CreateCollectionModal({ open, onClose, idLogin }) { + const [name, setName] = useState("") + const [openSucess, setOpenSucess] = useState(false) + + const token = getStoredValue("access_token"); + const client = getStoredValue("client"); + const uid = getStoredValue("uid"); - const handleSubmit = async (e) => { - if (name.length > 150) return; + const handleNameChange = (e) => { + setName(e.target.value) + } - e.preventDefault(); - /** - * Informações necessárias para o backend para criar uma nova coleção - */ - const payload = { - "collection": { - "name": name, - "owner_id": idLogin, - "owner_type": "User", - "privacy": e.target["privacy-radio-group"].value - } - }; + const handleSubmit = async (e) => { + if (name.length > 150) return; - /** - * Requisição para criação da coleção - */ - await mecredApi.post("/collections", payload, { - headers: { - "access-token": token, - "token-type": "Bearer", - client: client, - uid: uid, - Expires: 0, - }, - }) + e.preventDefault(); + /** + * Informações necessárias para o backend para criar uma nova coleção + */ + const payload = { + "collection": { + "name": name, + "owner_id": idLogin, + "owner_type": "User", + "privacy": e.target["privacy-radio-group"].value + } }; - return ( - <Modal - open={open} - onClose={onClose} - className="grid place-items-center m-5" - > - <div className="flex flex-col bg-main p-5 rounded-lg w-[40%]"> - <div className="text-2xl font-bold text-main-text">Criar Coleção</div> - <p className="text-lg text-main-text font-bold mb-1 mt-4">Nome da Coleção</p> - <form onSubmit={handleSubmit}> - <TextField - size="small" - fullWidth - onChange={handleNameChange} - value={name} - helperText={`${name.length}/150`} - error={name.length > 150} - /> - <p className="text-lg text-main-text font-bold mb-3 mt-4">Esta coleção é:</p> - <FormLabel > - <RadioGroup name="privacy-radio-group"> - <FormControlLabel - value="public" - control={<Radio className="" />} - label="Coleção Pública" - /> - <FormControlLabel - value="private" - control={<Radio />} - label="Coleção Privada" - /> - </RadioGroup> - </FormLabel> - <div className="flex justify-center space-x-2"> - <button - className=" border text-sm p-2 text-main border-main rounded-lg normal-case h-9 font-bold bg-secondary hover:bg-secondary-hover" - type="submit" - alt='Criar Coleção' - > - Criar Coleção - </button> - <button - className=" border- text-sm p-2 text-main-text border-main rounded-lg normal-case h-9 font-bold bg-main hover:bg-main-hover" - onClick={() => onClose()} - alt='Cancelar' - > - Cancelar - </button> - </div> - </form> - </div> - </Modal> - ) + /** + * Requisição para criação da coleção + */ + try { + // Requisição para criação da coleção + const response = await mecredApi.post("/collections", payload, { + headers: { + "access-token": token, + "token-type": "Bearer", + client: client, + uid: uid, + Expires: 0, + }, + }); + setOpenSucess(true); + } catch (error) { + // Log de erro caso ocorra + console.error("Erro ao criar a coleção:", error); + } + }; + return ( + <Modal + open={open} + onClose={onClose} + className="grid place-items-center m-5" + > + <div className="flex flex-col bg-main p-5 rounded-lg w-[40%] max-sm:w-[85%]"> + <div className="text-2xl font-bold text-main-text">Criar Coleção</div> + <p className="text-lg text-main-text font-bold mb-1 mt-4">Nome da Coleção</p> + <form onSubmit={handleSubmit}> + <TextField + size="small" + fullWidth + onChange={handleNameChange} + value={name} + helperText={`${name.length}/150`} + error={name.length > 150} + /> + <p className="text-lg text-main-text font-bold mb-3 mt-4">Esta coleção é:</p> + <FormLabel > + <RadioGroup name="privacy-radio-group"> + <FormControlLabel + value="public" + control={<Radio className="" />} + label="Coleção Pública" + /> + <FormControlLabel + value="private" + control={<Radio />} + label="Coleção Privada" + /> + </RadioGroup> + </FormLabel> + <div className="flex justify-center space-x-2"> + <button + className=" border text-sm p-2 text-main border-main rounded-lg normal-case h-9 font-bold bg-secondary hover:bg-secondary-hover" + type="submit" + alt='Criar Coleção' + > + Criar Coleção + </button> + <button + className=" border- text-sm p-2 text-main-text border-main rounded-lg normal-case h-9 font-bold bg-main hover:bg-main-hover" + onClick={() => onClose()} + alt='Cancelar' + > + Cancelar + </button> + <ModalSucess open={openSucess} onClose={() => setOpenSucess(false)} modalOnClose={onClose} /> + </div> + </form> + </div> + </Modal> + ) } \ No newline at end of file diff --git a/src/app/perfil/[id]/components/ProfileCollections.js b/src/app/perfil/[id]/components/ProfileCollections.js index d055d1e80c2fb998b1b20ea5e314deebcb648548..178bc7113222745255def2728308ec759dae2268 100644 --- a/src/app/perfil/[id]/components/ProfileCollections.js +++ b/src/app/perfil/[id]/components/ProfileCollections.js @@ -80,6 +80,7 @@ export default function ProfileCollections({ id, idLogin }) { }; const handleDelete = () => { + const url = `/collections/${colToDelete}` const headers = { headers: {