diff --git a/app/javascript/pages/assessment/NewAssessmentManual.tsx b/app/javascript/pages/assessment/NewAssessmentManual.tsx index 5db83f2..4856477 100644 --- a/app/javascript/pages/assessment/NewAssessmentManual.tsx +++ b/app/javascript/pages/assessment/NewAssessmentManual.tsx @@ -4,15 +4,60 @@ import { SelectedQuestionsSideBar } from "./components/SelectedQuestionsSideBar" import { FiltersSideBar } from "./components/FiltersSideBar"; import { BottomBar } from "./components/BottomBar"; import { QuestionArea } from "./components/QuestionArea"; +import { gql, useQuery } from "@apollo/client"; +import { Query, Question } from "../../__generated__/graphql-schema"; + +const QuestionFragments = gql` + fragment QuestionFields on Question { + id + authorship + authorshipYear + bloomTaxonomy + body + checkType + difficulty + status + subject { + axis { + name + } + category { + name + } + name + } + } +` + +const QUESTIONS_QUERY = gql` + ${QuestionFragments} + query { + questions { + nodes { + ...QuestionFields + } + } + } +` export const NewAssessementManual = () => { - const [questions, setQuestions] = useState([ - "Question 1", "Question 2", "Question 3", "Question 4", - "Question 5", "Question 6", "Question 7"]) + // const [questions, setQuestions] = useState([ + // "Question 1", "Question 2", "Question 3", "Question 4", + // "Question 5", "Question 6", "Question 7"]) + const [questions, setQuestions] = useState([]) const [selectedQuestions, setSelectedQuestions] = useState<{id: string, label: string, removeHandler: Function}[]>([]) + const { fetchMore } = useQuery(QUESTIONS_QUERY, { + onCompleted: (respose) => { + const { questions: questionConnection } = respose + setQuestions(questionConnection.nodes as Question[]) + console.log(respose) + }, + fetchPolicy: "network-only" + }) + const addQuestion = (label: string, removeHandler: Function) => { - const id: string = label.replace(/\s+/g, '') + const id: string = label.replace(/\s+/g, '_') if (!selectedQuestions.find(q => q.id === id)) { setSelectedQuestions(q => [...q, { id, label, removeHandler }]) } @@ -26,6 +71,8 @@ export const NewAssessementManual = () => { setSelectedQuestions([]) } + fetchMore({}) + return ( <> diff --git a/app/javascript/pages/assessment/components/QuestionArea.tsx b/app/javascript/pages/assessment/components/QuestionArea.tsx index 82092e6..564ea91 100644 --- a/app/javascript/pages/assessment/components/QuestionArea.tsx +++ b/app/javascript/pages/assessment/components/QuestionArea.tsx @@ -1,8 +1,9 @@ import React, { FC } from "react"; import { QuestionCard } from "./QuestionCard"; +import { Question } from "../../../__generated__/graphql-schema"; interface Props { - questions: string[] + questions: Question[] onAddQuestion: Function, onRemoveQuestion: Function } @@ -11,7 +12,7 @@ export const QuestionArea: FC = ({ questions, onAddQuestion, onRemoveQues return (
{questions.map(question => - )}
diff --git a/app/javascript/pages/assessment/components/QuestionCard.tsx b/app/javascript/pages/assessment/components/QuestionCard.tsx index 7b1fa6d..494ceb3 100644 --- a/app/javascript/pages/assessment/components/QuestionCard.tsx +++ b/app/javascript/pages/assessment/components/QuestionCard.tsx @@ -1,18 +1,24 @@ 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 { - title: string + question: Question onAddQuestion: Function, onRemoveQuestion: Function } -export const QuestionCard: FC = ({ title, onAddQuestion, onRemoveQuestion }) => { +export const QuestionCard: FC = ({ question, onAddQuestion, onRemoveQuestion }) => { const [collapsed, setCollapsed] = useState(false) - const questionId = title.replace(/\s+/g, '') - + 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 @@ -24,7 +30,7 @@ export const QuestionCard: FC = ({ title, onAddQuestion, onRemoveQuestion setButtonState({ bg: '', label: 'Adicionar', method: handleAddQuestion }) - onRemoveQuestion(questionId) + onRemoveQuestion(question.id) } const [buttonState, setButtonState] = useState({ @@ -32,23 +38,21 @@ export const QuestionCard: FC = ({ title, onAddQuestion, onRemoveQuestion }) return ( -
+
{!collapsed &&
- - - - - - - - + + + + + + + +
Enunciado: -
- ijodsjidsoifidfsiojsdfiojdsfiodfs ijdf iodsf iosd iojdf sijodsf iojdsf ioj sdfiojdf sioj dfsiojsdf iojdfs ijodsfijoidfsijodfsijdfsijo dsiofd ijosdfjiofdsidsfio -
+
}
diff --git a/app/javascript/pages/assessment/components/QuestionCardField.tsx b/app/javascript/pages/assessment/components/QuestionCardField.tsx index 60d7515..989886b 100644 --- a/app/javascript/pages/assessment/components/QuestionCardField.tsx +++ b/app/javascript/pages/assessment/components/QuestionCardField.tsx @@ -1,15 +1,16 @@ import React, { FC } from "react"; +import { Maybe } from "../../../__generated__/graphql-schema"; interface Props { label: string, - value: string + value?: Maybe } export const QuestionCardField: FC = ({ label, value }) => { return (
{`${label}: `} - {value} + {value ?? ''}
) } \ No newline at end of file