74 lines
3.3 KiB
TypeScript
74 lines
3.3 KiB
TypeScript
import React, { FC, useState } from "react";
|
|
import { Button, Card } from "../../../components";
|
|
import { QuestionCardField } from "./QuestionCardField";
|
|
import { Question } from "../../../__generated__/graphql-schema";
|
|
import { NodeId } from "../../../utils/graphql";
|
|
import { BLOOM_TAXONOMY, CHECK_TYPE, DIFFICULTY } from "../../../utils/types";
|
|
|
|
interface Props {
|
|
question: Question
|
|
onAddQuestion: Function,
|
|
onRemoveQuestion: Function
|
|
}
|
|
|
|
export const QuestionCard: FC<Props> = ({ question, onAddQuestion, onRemoveQuestion }) => {
|
|
const [collapsed, setCollapsed] = useState(false)
|
|
|
|
const title = `Questão ${NodeId.decode(question.id).id}`
|
|
const difficulty = DIFFICULTY.find(item => item.value === question.difficulty)?.label
|
|
const bloomTaxonomy = BLOOM_TAXONOMY.find(item => item.value === question.bloomTaxonomy)?.label
|
|
const checkType = CHECK_TYPE.find(item => item.value === question.checkType)?.label
|
|
|
|
const handleAddQuestion = () => {
|
|
setButtonState({
|
|
bg: 'bg-red-700', label: 'Remover', method: handleRemoveQuestion
|
|
})
|
|
onAddQuestion(title, handleRemoveQuestion)
|
|
}
|
|
|
|
const handleRemoveQuestion = () => {
|
|
setButtonState({
|
|
bg: '', label: 'Adicionar', method: handleAddQuestion
|
|
})
|
|
onRemoveQuestion(question.id)
|
|
}
|
|
|
|
const [buttonState, setButtonState] = useState({
|
|
bg: '', label: 'Adicionar', method: handleAddQuestion
|
|
})
|
|
|
|
return (
|
|
<div id={title.replace(/\s+/g, '_')}>
|
|
<Card title={title} className="mb-5">
|
|
<div>
|
|
{!collapsed && <div className="grid grid-cols-2 gap-2">
|
|
<QuestionCardField label="Grau de Dificuldade" value={difficulty}/>
|
|
<QuestionCardField label="Categoria" value={question.subject?.category.name}/>
|
|
<QuestionCardField label="Eixo de Formação" value={question.subject?.axis.name}/>
|
|
<QuestionCardField label="Assunto" value={question.subject?.name}/>
|
|
<QuestionCardField label="Habilidade Cognitiva" value={bloomTaxonomy}/>
|
|
<QuestionCardField label="Tipo" value={checkType}/>
|
|
<QuestionCardField label="Autoria" value={question.authorship} />
|
|
<QuestionCardField label="Ano" value={question.authorshipYear}/>
|
|
<div className="col-span-2">
|
|
<span className="text-gray-700">Enunciado:</span>
|
|
<div dangerouslySetInnerHTML={{__html: question.body ?? ''}}></div>
|
|
</div>
|
|
</div>}
|
|
<div className="mt-6">
|
|
<hr className="h-4"/>
|
|
<div className="flex justify-between w-full">
|
|
<Button type="default" onClick={() => setCollapsed(!collapsed)}>
|
|
{collapsed ? 'Mostrar Mais' : 'Mostrar Menos'}
|
|
</Button>
|
|
<Button type="primary" className={buttonState.bg}
|
|
onClick={buttonState.method}>
|
|
{buttonState.label}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)
|
|
} |