Skip to content
Snippets Groups Projects
Commit acbcaae4 authored by Richard Fernando Heise Ferreira's avatar Richard Fernando Heise Ferreira
Browse files

Merge branch 'issue-230/thinking-aloud-change-in-resource-visualization' into 'develop'

Issue #230: Thinking Aloud - Resource Visualization

See merge request !282
parents 34f60bec d01198ce
No related branches found
No related tags found
1 merge request!282Issue #230: Thinking Aloud - Resource Visualization
Pipeline #41993 passed
......@@ -7,11 +7,11 @@ import { useState } from "react";
* @return Botões de informações que o usuário pode acessar
* @param {Object} props
* @param {Function} props.setOptButton
* @param {Boolean} props.verifyCurator `true` se for curador, `false` se não.
* @param {Boolean} props.setUserVerified `true` se for curador, `false` se não.
* @param {Number} props.idProfile
* @param {Number} props.idLogin
*/
export default function SelectionButtons({ setOptButton, verifyCurator, idProfile, idLogin, options }) {
export default function SelectionButtons({ setOptButton, userVerified, idProfile, idLogin, options }) {
const [value, setValue] = useState(0)
const handleChange = (e, newValue) => {
......
......@@ -159,6 +159,23 @@ export default function UserCard({ profileData, idLogin, achievements, progresse
setMedalActive(countMedalBeingUsed)
fetchFollowers()
// Função que análisa se o usuário é considerado "verificado" conforme cargo
const verifier = async () => {
const all_roles = [
"teacher", "admin", "curator", "moderator",
"supervisor", "editor", "partner", "publisher", "submitter"
];
// Extrai todos os nomes dos cargos do usuário
const user_roles = profileData["roles"].map(role => role.name);
// Verifica se algum cargo do usuário está na lista de roles permitidos
const verifier_user_roles = user_roles.find(role => all_roles.includes(role));
if (verifier_user_roles) {
setUserVerified(true);
}
};
verifier()
/**
......@@ -183,27 +200,7 @@ export default function UserCard({ profileData, idLogin, achievements, progresse
itemsRoles()
.then(roles => setTranslateItems(roles))
*/
}, [profileData])
// Função que análisa se o usuário é considerado "verificado" conforme cargo
const verifier = async () => {
const all_roles = [
"teacher", "admin", "curator", "moderator",
"supervisor", "editor", "partner", "publisher", "submitter"
];
// Extrai todos os nomes dos cargos do usuário
const user_roles = profileData["roles"].map(role => role.name);
// Verifica se algum cargo do usuário está na lista de roles permitidos
const verifier_user_roles = user_roles.find(role => all_roles.includes(role));
if (verifier_user_roles) {
setUserVerified(true);
}
};
}, [items, profileData])
/*
......@@ -221,7 +218,7 @@ export default function UserCard({ profileData, idLogin, achievements, progresse
{ name: "Seguindo", component: <FollowingCards id={profileData["id"]} count={following} /> },
)
if (verifyCurator) {
if (userVerified) {
options.push(
{ name: "Homologação", component: <ProfileHomologation id={profileData["id"]} /> },
{ name: "Denúncias", component: <ProfileComplaints id={profileData["id"]} /> }
......@@ -307,7 +304,7 @@ export default function UserCard({ profileData, idLogin, achievements, progresse
{/* Botões de recursos, sobre, coleções e homologação, mostra quais botões para cada usuário */}
<div className='max-md:mx-1 max-md:mb-1 rounded-2xl min-w-[200px] mt-10 bg-white-HC-dark outline outline-1 outline-ice-HC-white'>
{<SelectionButtons options={options} setOptButton={setOptButton} verifyCurator={verifyCurator} idLogin={idLogin} idProfile={profileData["id"]} />}
{<SelectionButtons options={options} setOptButton={setOptButton} userVerified={userVerified} idLogin={idLogin} idProfile={profileData["id"]} />}
{/* Faz a escolha correta de qual botão o usuário clicou */}
<ProfileOptions
options={options}
......
......@@ -71,6 +71,8 @@ export default function HomologationModal({ open, onClose, name, id, setSubmitte
}
const ConfirmModal = ({ open, onClose }) => {
const accept = payload.some(item => item.accepted === false)
return (
<Modal
......@@ -85,13 +87,13 @@ export default function HomologationModal({ open, onClose, name, id, setSubmitte
},
}}
>
<div className="flex flex-col bg-ice-HC-dark p-5 rounded-lg ">
<p className="flex justify-center text-darkGray-HC-white-underline font-bold text-2xl">Recurso a ser aprovado</p>
<p className="pt-3 text-lg text-darkGray-HC-white-underline ">Este recurso será publicado na MEC RED. Você confirma essa avaliação?</p>
<div className="flex flex-col bg-ice-HC-dark p-5 rounded-lg outline outline-1 outline-ice-HC-white">
<p className="flex justify-center text-darkGray-HC-white font-bold text-2xl">Recurso a ser aprovado</p>
<p className="pt-3 text-lg text-darkGray-HC-white">Este recurso {accept ? "não será" : "será"} publicado na MEC RED. Você confirma essa avaliação?</p>
<div className="flex flex-row justify-end pt-5">
<button onClick={() => onClose()} className="bg-ice-HC-dark px-3 py-2 mr-1 rounded-lg text-darkGray-HC-white-underline hover:bg-ice-HC-dark-hover">Alterar avaliação</button>
<button onClick={handleSubmit} className="bg-turquoise px-3 py-2 ml-1 rounded-lg text-white-HC-dark-underline font-semibold hover:bg-turquoise-hover">Confirmar</button>
<button onClick={() => onClose()} className="bg-ice-HC-dark px-3 py-2 mr-1 rounded-lg text-darkGray-HC-white-underline hover:text-darkGray-HC-dark-underline hover:bg-lightGray-HC-white outline outline-1 outline-white">Alterar avaliação</button>
<button onClick={handleSubmit} className="bg-turquoise-HC-white px-3 py-2 ml-1 rounded-lg text-white-HC-dark-underline hover:text-white font-semibold hover:bg-darkTurquoise-HC-dark outline outline-1 outline-ice-HC-white">Confirmar</button>
</div>
</div>
......@@ -143,7 +145,7 @@ export default function HomologationModal({ open, onClose, name, id, setSubmitte
},
}}
>
<div className="flex flex-col bg-ice-HC-dark p-5 rounded-lg ">
<div className="flex flex-col bg-ice-HC-dark p-5 rounded-lg outline outline-1 outline-ice-HC-white">
<ConfirmModal open={confirmOpen} onClose={() => { setConfirmOpen(false) }} />
<NotSucessModal open={notSucess} onClose={() => { setNotSucess(false) }} />
<p className="flex justify-center text-2xl text-darkGray-HC-white-underline font-bold pb-2">{`Você está avaliando a submissão ${name}`}</p>
......@@ -152,9 +154,28 @@ export default function HomologationModal({ open, onClose, name, id, setSubmitte
return (
<div key={i} className="pb-4">
<p className="text-darkGray-HC-white-underline text-lg" key={i}>{item.description}</p>
<RadioGroup row onChange={(e) => { handleRadios(e, item.id) }}>
<FormControlLabel value={"Não"} control={<Radio />} label="Não" className="text-darkGray-HC-white-underline" />
<FormControlLabel value={"Sim"} control={<Radio />} label="Sim" className="text-darkGray-HC-white-underline" />
<RadioGroup row
onChange={(e) => { handleRadios(e, item.id) }}>
<FormControlLabel value={"Não"} control={
<Radio
sx={{
color: 'var(--darkGray-HC-white)',
'&.Mui-checked': {
color: 'var(--turquoise-HC-white)',
},
}}
/>
} label="Não" className="text-darkGray-HC-white-underline" />
<FormControlLabel value={"Sim"} control={
<Radio
sx={{
color: 'var(--darkGray-HC-white)',
'&.Mui-checked': {
color: 'var(--turquoise-HC-white)',
},
}}
/>
} label="Sim" className="text-darkGray-HC-white-underline" />
</RadioGroup>
</div>
)
......@@ -170,10 +191,27 @@ export default function HomologationModal({ open, onClose, name, id, setSubmitte
multiline
label="Justificativa (opcional)"
variant="standard"
sx={{
'& .MuiInputBase-input': {
color: 'var(--darkGray-HC-white)', // Cor do texto digitado
},
'& .MuiInput-underline:before': {
borderBottomColor: 'var(--darkGray-HC-white)', // underline antes do foco
},
'& .MuiInput-underline:after': {
borderBottomColor: 'var(--turquoise-HC-white)', // underline no foco
},
'& .MuiInputLabel-root': {
color: 'var(--darkGray-HC-white)', // label normal
},
'& .MuiInputLabel-root.Mui-focused': {
color: 'var(--turquoise-HC-white)', // label no foco
},
}}
/>
<div className="flex justify-end mt-5">
<button onClick={onClose} className="bg-ice-HC-dark px-3 py-2 mr-1 rounded-lg text-darkGray-HC-white-underline hover:bg-ice-HC-dark-hover">Cancelar</button>
<button onClick={() => { payload.length < 4 ? setNotSucess(true) : setConfirmOpen(true) }} className="bg-turquoise px-3 py-2 ml-1 rounded-lg text-white-HC-dark-underline font-semibold hover:bg-turquoise-hover">Enviar</button>
<button onClick={onClose} className="bg-ice-HC-dark px-3 py-2 mr-1 rounded-lg text-darkGray-HC-white-underline hover:text-darkGray-HC-dark-underline hover:bg-lightGray-HC-white outline outline-1 outline-white">Cancelar</button>
<button onClick={() => { payload.length < 4 ? setNotSucess(true) : setConfirmOpen(true) }} className="bg-turquoise-HC-white px-3 py-2 ml-1 rounded-lg text-white-HC-dark-underline hover:text-white font-semibold hover:bg-darkTurquoise-HC-dark outline outline-1 outline-ice-HC-white">Enviar</button>
</div>
</div>
</Modal>
......
......@@ -29,11 +29,11 @@ function formatSize(size) {
export default function Specifications({ learningObject }) {
const specInfo = [
{ icon: <IconLocation className='mr-2 invertLogo-HC-white'/>, enabled: true, name: "Idioma", data: learningObject.language.map((lang) => lang.name).join(", ") ?? "Não Informado" },
{ icon: <IconLevel className='mr-2 invertLogo-HC-white'/>, enabled: true, name: "Nível de Ensino", data: learningObject.educational_stages.map((stage) => stage.name).join(", ") },
{ icon: <IconMedia className='invertLogo-HC-white' style={{ transform: "scale(0.85)" }}/>, enabled: true, name: "Tipo de Mídia", data: learningObject.object_type },
{ icon: <IconTheme className='mr-1 invertLogo-HC-white'/>, enabled: true, name: "Temática", data: learningObject.subjects.map((subject) => subject.name).join(", ") },
{ icon: <IconSize className='mr-2 invertLogo-HC-white' style={{ transform: "scale(1.15)" }}/>, enabled: !learningObject.link, name: "Tamanho", data: formatSize(learningObject?.attachments[0]?.size) },
{ icon: <IconLocation className='scale-[0.9] ml-1 mr-2 invertLogo-HC-white'/>, enabled: true, name: "Idioma", data: learningObject.language.map((lang) => lang.name).join(", ") ?? "Não Informado" },
{ icon: <IconLevel className='scale-[0.9] mr-2 invertLogo-HC-white'/>, enabled: true, name: "Nível de Ensino", data: learningObject.educational_stages.map((stage) => stage.name).join(", ") },
{ icon: <IconMedia className='scale-[0.75] rotate-[315deg] invertLogo-HC-white'/>, enabled: true, name: "Tipo de Mídia", data: learningObject.object_type },
{ icon: <IconTheme className='scale-[0.9] mr-1 invertLogo-HC-white'/>, enabled: true, name: "Temática", data: learningObject.subjects.map((subject) => subject.name).join(", ") },
{ icon: <IconSize className='scale-[0.9] mx-1 invertLogo-HC-white'/>, enabled: !learningObject.link, name: "Tamanho", data: formatSize(learningObject?.attachments[0]?.size) },
];
return (
<div className="flex flex-col p-1 text-darkGray-HC-white">
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment