From d5969375989ee19e9205789bc7df469f9fc16c41 Mon Sep 17 00:00:00 2001 From: WindowsCrashed Date: Fri, 4 Aug 2023 23:43:50 -0300 Subject: [PATCH 01/14] add new assessment manual page --- .../pages/assessment/NewAssessmentManual.tsx | 188 ++++++++++++++++++ app/javascript/routes/paths.ts | 1 + app/javascript/routes/routes.tsx | 2 + 3 files changed, 191 insertions(+) create mode 100644 app/javascript/pages/assessment/NewAssessmentManual.tsx diff --git a/app/javascript/pages/assessment/NewAssessmentManual.tsx b/app/javascript/pages/assessment/NewAssessmentManual.tsx new file mode 100644 index 0000000..59d23a2 --- /dev/null +++ b/app/javascript/pages/assessment/NewAssessmentManual.tsx @@ -0,0 +1,188 @@ +import { gql, useQuery } from "@apollo/client"; +import React, { useState } from "react"; +import { FaTrash } from "react-icons/fa"; +import { Controller, useForm } from "react-hook-form"; + +import { Axis, Query } from "../../__generated__/graphql-schema"; +import { Button, Card, Input, Navigator } from '../../components'; + +type NewAssessementManualForm = { + axisWeights: Record +} + +const NEW_ASSESSEMENT_DATA_QUERY = gql` + query NewAssessementDataQuery { + axes { + nodes { + id + name + } + } + } +` + +export const NewAssessementManual = () => { + const { data } = useQuery(NEW_ASSESSEMENT_DATA_QUERY) + const axes = data?.axes.nodes + + const [subjectsIds, setSubjectsIds] = useState([]) + const { register, control, watch } = useForm({ + mode: 'onBlur' + }) + + + const addAxisForm = useForm<{ axisId: string }>() + + const handleAddAxis = (formData: { axisId: string }) => { + setSubjectsIds(prev => [...prev, formData.axisId]) + addAxisForm.reset(); + } + + const handleRemoveAxis = (axisId: string) => { + setSubjectsIds(prev => prev.filter((axis => axis !== axisId))) + } + + if (!axes?.length) return null + + const notSelectedAxis: Axis[] = axes.filter((axis) => !subjectsIds.includes(axis.id)) + const selectedAxis: Axis[] = axes.filter((axis) => subjectsIds.includes(axis.id)) + + return ( +
+ // <> + // + //
+ // + //
+ //

Titulo:

+ //
+ // + //
+ //
+ //
+ //

Observações:

+ //
+ // + //
+ //
+ // + // + //
+ //
+ // + // + //
+ //
+ + //
+ // {selectedAxis.map(axis => ( + //
+ //
+ //
+ //
{axis.name}
+ //
handleRemoveAxis(axis.id)}>
+ //
+ //
+ // Fácil + // + // {watch(`axisWeights.easy.${axis.id}`) ?? 5} + // + //
+ // ( + // + // )} + // /> + + //
+ + //
+ //
+ // Médio + // + // {watch(`axisWeights.medium.${axis.id}`) ?? 5} + // + //
+ // ( + // + // )} + // /> + + //
+ + //
+ //
+ // Difícil + // + // {watch(`axisWeights.hard.${axis.id}`) ?? 5} + // + //
+ // ( + // + // )} + // /> + + //
+ + //
+ //
+ //
+ // ))} + //
+ // + //
+ // + // + ) +} \ No newline at end of file diff --git a/app/javascript/routes/paths.ts b/app/javascript/routes/paths.ts index 376de37..1318bd0 100644 --- a/app/javascript/routes/paths.ts +++ b/app/javascript/routes/paths.ts @@ -21,4 +21,5 @@ export const DashboardRoutePaths = { export const AssessmentRoutePaths = { index: "/assessments", new: "/assessments/new", + newManual: "/assessments/new-manual" } \ No newline at end of file diff --git a/app/javascript/routes/routes.tsx b/app/javascript/routes/routes.tsx index dadbf56..55ce9c5 100644 --- a/app/javascript/routes/routes.tsx +++ b/app/javascript/routes/routes.tsx @@ -3,6 +3,7 @@ import { Redirect, Route, Switch } from "react-router-dom"; import { AssessmentList } from "../pages/assessment"; import { NewAssessement } from "../pages/assessment/NewAssessement"; +import { NewAssessementManual } from "../pages/assessment/NewAssessmentManual"; import { Dashboard } from '../pages/dashboard'; import { Edit, List, New, Review, Show } from "../pages/question"; import { Profile } from "../pages/session"; @@ -22,5 +23,6 @@ export const PrivateRoutes = () => ( + ); From 0d0aaf4f7b8e4f3409e99ede4ddab74a135a38f6 Mon Sep 17 00:00:00 2001 From: WindowsCrashed Date: Sat, 5 Aug 2023 00:43:15 -0300 Subject: [PATCH 02/14] add initial layout of new assessment manual page --- .../pages/assessment/NewAssessmentManual.tsx | 18 ++++++++++++++++-- .../pages/assessment/components/SideBar.tsx | 19 +++++++++++++++++++ 2 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 app/javascript/pages/assessment/components/SideBar.tsx diff --git a/app/javascript/pages/assessment/NewAssessmentManual.tsx b/app/javascript/pages/assessment/NewAssessmentManual.tsx index 59d23a2..ed55658 100644 --- a/app/javascript/pages/assessment/NewAssessmentManual.tsx +++ b/app/javascript/pages/assessment/NewAssessmentManual.tsx @@ -5,6 +5,7 @@ import { Controller, useForm } from "react-hook-form"; import { Axis, Query } from "../../__generated__/graphql-schema"; import { Button, Card, Input, Navigator } from '../../components'; +import { SideBar } from "./components/SideBar"; type NewAssessementManualForm = { axisWeights: Record @@ -48,9 +49,22 @@ export const NewAssessementManual = () => { const selectedAxis: Axis[] = axes.filter((axis) => subjectsIds.includes(axis.id)) return ( -
+ <> + +
+ {/*bgColor="bg-red-700"*/} + Filters + +
{/*bg-blue-500*/} + Questions +
+ {/*bgColor="bg-yellow-400"*/} + Selected Questions + +
+ // <> - // + // //
// //
diff --git a/app/javascript/pages/assessment/components/SideBar.tsx b/app/javascript/pages/assessment/components/SideBar.tsx new file mode 100644 index 0000000..779a116 --- /dev/null +++ b/app/javascript/pages/assessment/components/SideBar.tsx @@ -0,0 +1,19 @@ +import React, { FC, PropsWithChildren } from "react"; + +interface Props extends PropsWithChildren { + bgColor?: string; + border?: 'l' | 'r' +} + +export const SideBar: FC = ({ bgColor, border, children }) => { + return ( +
+
+ {children} +
+
+ ) +} \ No newline at end of file From eb33921b20e54757d653ece84fdb3863e3b7b6f4 Mon Sep 17 00:00:00 2001 From: WindowsCrashed Date: Sat, 5 Aug 2023 23:41:12 -0300 Subject: [PATCH 03/14] add question card --- .../pages/assessment/NewAssessmentManual.tsx | 17 ++++-- .../assessment/components/QuestionCard.tsx | 59 +++++++++++++++++++ .../pages/assessment/components/SideBar.tsx | 8 +-- 3 files changed, 73 insertions(+), 11 deletions(-) create mode 100644 app/javascript/pages/assessment/components/QuestionCard.tsx diff --git a/app/javascript/pages/assessment/NewAssessmentManual.tsx b/app/javascript/pages/assessment/NewAssessmentManual.tsx index ed55658..05acf19 100644 --- a/app/javascript/pages/assessment/NewAssessmentManual.tsx +++ b/app/javascript/pages/assessment/NewAssessmentManual.tsx @@ -6,6 +6,7 @@ import { Controller, useForm } from "react-hook-form"; import { Axis, Query } from "../../__generated__/graphql-schema"; import { Button, Card, Input, Navigator } from '../../components'; import { SideBar } from "./components/SideBar"; +import { QuestionCard } from "./components/QuestionCard"; type NewAssessementManualForm = { axisWeights: Record @@ -51,14 +52,20 @@ export const NewAssessementManual = () => { return ( <> -
- {/*bgColor="bg-red-700"*/} +
+ {/*bgColor="bg-red-700"*/} Filters -
{/*bg-blue-500*/} - Questions +
{/*bg-blue-500*/} + + + + + + +
- {/*bgColor="bg-yellow-400"*/} + {/*bgColor="bg-yellow-400"*/} Selected Questions
diff --git a/app/javascript/pages/assessment/components/QuestionCard.tsx b/app/javascript/pages/assessment/components/QuestionCard.tsx new file mode 100644 index 0000000..9ce10d9 --- /dev/null +++ b/app/javascript/pages/assessment/components/QuestionCard.tsx @@ -0,0 +1,59 @@ +import React, { FC } from "react"; +import { Button, Card } from "../../../components"; + +interface Props { + title: string +} + +export const QuestionCard: FC = ({ title }) => { + return ( + +
+
+
+ Grau de Dificuldade: + Media +
+
+ Categoria: + Modelagem +
+
+ Eixo de Formacao: + Infra Sistemas +
+
+ Assunto: + Fisica +
+
+ Habilidade Cogn: + Compreender +
+
+ Ano: + 2023 +
+
+ Autoria: + UNIFESO +
+
+ Enunciado: +
+ ijodsjidsoifidfsiojsdfiojdsfiodfs ijdf iodsf iosd iojdf sijodsf iojdsf ioj sdfiojdf sioj dfsiojsdf iojdfs ijodsfijoidfsijodfsijdfsijo dsiofd ijosdfjiofdsidsfio +
+
+
+
+
+
+ +
+
+
+ + ) +} \ No newline at end of file diff --git a/app/javascript/pages/assessment/components/SideBar.tsx b/app/javascript/pages/assessment/components/SideBar.tsx index 779a116..1519831 100644 --- a/app/javascript/pages/assessment/components/SideBar.tsx +++ b/app/javascript/pages/assessment/components/SideBar.tsx @@ -2,15 +2,11 @@ import React, { FC, PropsWithChildren } from "react"; interface Props extends PropsWithChildren { bgColor?: string; - border?: 'l' | 'r' } -export const SideBar: FC = ({ bgColor, border, children }) => { +export const SideBar: FC = ({ bgColor, children }) => { return ( -
+
{children}
From decd05a1568e77e1d4ad5c2f9f41387e7fab7b0e Mon Sep 17 00:00:00 2001 From: WindowsCrashed Date: Mon, 7 Aug 2023 22:06:14 -0300 Subject: [PATCH 04/14] add selected question card --- .../pages/assessment/NewAssessmentManual.tsx | 12 ++- .../assessment/components/QuestionCard.tsx | 90 ++++++++++--------- .../components/SelectedQuestionCard.tsx | 26 ++++++ .../components/SelectedQuestionsSideBar.tsx | 22 +++++ 4 files changed, 103 insertions(+), 47 deletions(-) create mode 100644 app/javascript/pages/assessment/components/SelectedQuestionCard.tsx create mode 100644 app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx diff --git a/app/javascript/pages/assessment/NewAssessmentManual.tsx b/app/javascript/pages/assessment/NewAssessmentManual.tsx index 05acf19..7aedf74 100644 --- a/app/javascript/pages/assessment/NewAssessmentManual.tsx +++ b/app/javascript/pages/assessment/NewAssessmentManual.tsx @@ -7,6 +7,9 @@ import { Axis, Query } from "../../__generated__/graphql-schema"; import { Button, Card, Input, Navigator } from '../../components'; import { SideBar } from "./components/SideBar"; import { QuestionCard } from "./components/QuestionCard"; +import { Link } from "react-router-dom"; +import { SelectedQuestionCard } from "./components/SelectedQuestionCard"; +import { SelectedQuestionsSideBar } from "./components/SelectedQuestionsSideBar"; type NewAssessementManualForm = { axisWeights: Record @@ -65,9 +68,12 @@ export const NewAssessementManual = () => {
- {/*bgColor="bg-yellow-400"*/} - Selected Questions - + + + + + +
// <> diff --git a/app/javascript/pages/assessment/components/QuestionCard.tsx b/app/javascript/pages/assessment/components/QuestionCard.tsx index 9ce10d9..440ddeb 100644 --- a/app/javascript/pages/assessment/components/QuestionCard.tsx +++ b/app/javascript/pages/assessment/components/QuestionCard.tsx @@ -7,53 +7,55 @@ interface Props { export const QuestionCard: FC = ({ title }) => { return ( - -
-
-
- Grau de Dificuldade: - Media -
-
- Categoria: - Modelagem -
-
- Eixo de Formacao: - Infra Sistemas -
-
- Assunto: - Fisica -
-
- Habilidade Cogn: - Compreender -
-
- Ano: - 2023 -
-
- Autoria: - UNIFESO -
-
- Enunciado: +
+ +
+
- ijodsjidsoifidfsiojsdfiojdsfiodfs ijdf iodsf iosd iojdf sijodsf iojdsf ioj sdfiojdf sioj dfsiojsdf iojdfs ijodsfijoidfsijodfsijdfsijo dsiofd ijosdfjiofdsidsfio + Grau de Dificuldade: + Media +
+
+ Categoria: + Modelagem +
+
+ Eixo de Formacao: + Infra Sistemas +
+
+ Assunto: + Fisica +
+
+ Habilidade Cogn: + Compreender +
+
+ Ano: + 2023 +
+
+ Autoria: + UNIFESO +
+
+ Enunciado: +
+ ijodsjidsoifidfsiojsdfiojdsfiodfs ijdf iodsf iosd iojdf sijodsf iojdsf ioj sdfiojdf sioj dfsiojsdf iojdfs ijodsfijoidfsijodfsijdfsijo dsiofd ijosdfjiofdsidsfio +
+
+
+
+
+
+
-
-
-
- -
-
-
- + +
) } \ No newline at end of file diff --git a/app/javascript/pages/assessment/components/SelectedQuestionCard.tsx b/app/javascript/pages/assessment/components/SelectedQuestionCard.tsx new file mode 100644 index 0000000..22f11eb --- /dev/null +++ b/app/javascript/pages/assessment/components/SelectedQuestionCard.tsx @@ -0,0 +1,26 @@ +import React, { FC } from 'react'; +import { FaTrash } from 'react-icons/fa'; +import { Link } from 'react-router-dom'; + +type Props = { + label: string + id: string +} + +export const SelectedQuestionCard: FC = ({ label, id }) => { + return ( + + ) +} + diff --git a/app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx b/app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx new file mode 100644 index 0000000..e3bf953 --- /dev/null +++ b/app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx @@ -0,0 +1,22 @@ +import React, { FC, PropsWithChildren } from "react"; +import { SideBar } from "./SideBar"; + +interface Props extends PropsWithChildren { + +} + +export const SelectedQuestionsSideBar: FC = ({ children }) => { + return ( + +

Questões Selecionadas

+
+
+ {children ?? +

+ Nenhuma questão selecionada +

+ } +
+ + ) +} \ No newline at end of file From 0b5964a6d76ea40a86a05d4afae0fdcf468d1aa2 Mon Sep 17 00:00:00 2001 From: WindowsCrashed Date: Mon, 7 Aug 2023 23:03:13 -0300 Subject: [PATCH 05/14] add add question mechanic --- .../pages/assessment/NewAssessmentManual.tsx | 183 ++++-------------- .../assessment/components/QuestionCard.tsx | 33 +++- .../components/SelectedQuestionCard.tsx | 6 +- .../components/SelectedQuestionsSideBar.tsx | 13 +- 4 files changed, 74 insertions(+), 161 deletions(-) diff --git a/app/javascript/pages/assessment/NewAssessmentManual.tsx b/app/javascript/pages/assessment/NewAssessmentManual.tsx index 7aedf74..37b821b 100644 --- a/app/javascript/pages/assessment/NewAssessmentManual.tsx +++ b/app/javascript/pages/assessment/NewAssessmentManual.tsx @@ -1,6 +1,5 @@ import { gql, useQuery } from "@apollo/client"; import React, { useState } from "react"; -import { FaTrash } from "react-icons/fa"; import { Controller, useForm } from "react-hook-form"; import { Axis, Query } from "../../__generated__/graphql-schema"; @@ -8,7 +7,6 @@ import { Button, Card, Input, Navigator } from '../../components'; import { SideBar } from "./components/SideBar"; import { QuestionCard } from "./components/QuestionCard"; import { Link } from "react-router-dom"; -import { SelectedQuestionCard } from "./components/SelectedQuestionCard"; import { SelectedQuestionsSideBar } from "./components/SelectedQuestionsSideBar"; type NewAssessementManualForm = { @@ -30,6 +28,8 @@ export const NewAssessementManual = () => { const { data } = useQuery(NEW_ASSESSEMENT_DATA_QUERY) const axes = data?.axes.nodes + const [questions, setQuestions] = useState<{id: string, label: string}[]>([]) + const [subjectsIds, setSubjectsIds] = useState([]) const { register, control, watch } = useForm({ mode: 'onBlur' @@ -52,6 +52,15 @@ export const NewAssessementManual = () => { const notSelectedAxis: Axis[] = axes.filter((axis) => !subjectsIds.includes(axis.id)) const selectedAxis: Axis[] = axes.filter((axis) => subjectsIds.includes(axis.id)) + const addQuestion = (label: string) => { + const id: string = label.replace(/\s+/g, '') + setQuestions(q => [...q, { id, label }]) + } + + const removeQuestion = (id: string) => { + setQuestions(q => q.filter(i => i.id != id)) + } + return ( <> @@ -60,156 +69,30 @@ export const NewAssessementManual = () => { Filters
{/*bg-blue-500*/} - - - - - - - + + + + + + +
- - - - - - +
- // <> - // - //
- // - //
- //

Titulo:

- //
- // - //
- //
- //
- //

Observações:

- //
- // - //
- //
- // - // - //
- //
- // - // - //
- //
- - //
- // {selectedAxis.map(axis => ( - //
- //
- //
- //
{axis.name}
- //
handleRemoveAxis(axis.id)}>
- //
- //
- // Fácil - // - // {watch(`axisWeights.easy.${axis.id}`) ?? 5} - // - //
- // ( - // - // )} - // /> - - //
- - //
- //
- // Médio - // - // {watch(`axisWeights.medium.${axis.id}`) ?? 5} - // - //
- // ( - // - // )} - // /> - - //
- - //
- //
- // Difícil - // - // {watch(`axisWeights.hard.${axis.id}`) ?? 5} - // - //
- // ( - // - // )} - // /> - - //
- - //
- //
- //
- // ))} - //
- // - //
- // - // ) } \ No newline at end of file diff --git a/app/javascript/pages/assessment/components/QuestionCard.tsx b/app/javascript/pages/assessment/components/QuestionCard.tsx index 440ddeb..432c8a9 100644 --- a/app/javascript/pages/assessment/components/QuestionCard.tsx +++ b/app/javascript/pages/assessment/components/QuestionCard.tsx @@ -1,13 +1,35 @@ -import React, { FC } from "react"; +import React, { FC, useState } from "react"; import { Button, Card } from "../../../components"; interface Props { title: string + onAddQuestion: Function, + onRemoveQuestion: Function } -export const QuestionCard: FC = ({ title }) => { +export const QuestionCard: FC = ({ title, onAddQuestion, onRemoveQuestion }) => { + const questionId = title.replace(/\s+/g, '') + + const handleAddQuestion = () => { + setButtonState({ + bg: 'bg-red-700', label: 'Remover', method: handleRemoveQuestion + }) + onAddQuestion(title) + } + + const handleRemoveQuestion = () => { + setButtonState({ + bg: '', label: 'Adicionar', method: handleAddQuestion + }) + onRemoveQuestion(questionId) + } + + const [buttonState, setButtonState] = useState({ + bg: '', label: 'Adicionar', method: handleAddQuestion + }) + return ( -
+
@@ -49,8 +71,9 @@ export const QuestionCard: FC = ({ title }) => {
-
diff --git a/app/javascript/pages/assessment/components/SelectedQuestionCard.tsx b/app/javascript/pages/assessment/components/SelectedQuestionCard.tsx index 22f11eb..282a336 100644 --- a/app/javascript/pages/assessment/components/SelectedQuestionCard.tsx +++ b/app/javascript/pages/assessment/components/SelectedQuestionCard.tsx @@ -5,9 +5,10 @@ import { Link } from 'react-router-dom'; type Props = { label: string id: string + onRemoveQuestion: Function } -export const SelectedQuestionCard: FC = ({ label, id }) => { +export const SelectedQuestionCard: FC = ({ label, id, onRemoveQuestion }) => { return (
= ({ label, id }) => {
diff --git a/app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx b/app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx index e3bf953..a34a1cb 100644 --- a/app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx +++ b/app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx @@ -1,17 +1,22 @@ import React, { FC, PropsWithChildren } from "react"; import { SideBar } from "./SideBar"; +import { SelectedQuestionCard } from "./SelectedQuestionCard"; -interface Props extends PropsWithChildren { - +type Props = { + questions: {id: string, label: string}[], + onRemoveQuestion: Function } -export const SelectedQuestionsSideBar: FC = ({ children }) => { +export const SelectedQuestionsSideBar: FC = ({ questions, onRemoveQuestion }) => { return (

Questões Selecionadas

- {children ?? + {questions.length ? + questions.map(q => ) :

Nenhuma questão selecionada

From c26ae6194f6b30f328537fda4b3ef0fb5fdf54a0 Mon Sep 17 00:00:00 2001 From: WindowsCrashed Date: Mon, 7 Aug 2023 23:09:54 -0300 Subject: [PATCH 06/14] add collapse to question card --- .../pages/assessment/components/QuestionCard.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/app/javascript/pages/assessment/components/QuestionCard.tsx b/app/javascript/pages/assessment/components/QuestionCard.tsx index 432c8a9..7981830 100644 --- a/app/javascript/pages/assessment/components/QuestionCard.tsx +++ b/app/javascript/pages/assessment/components/QuestionCard.tsx @@ -8,6 +8,8 @@ interface Props { } export const QuestionCard: FC = ({ title, onAddQuestion, onRemoveQuestion }) => { + const [collapsed, setCollapsed] = useState(false) + const questionId = title.replace(/\s+/g, '') const handleAddQuestion = () => { @@ -32,7 +34,7 @@ export const QuestionCard: FC = ({ title, onAddQuestion, onRemoveQuestion
-
+ {!collapsed &&
Grau de Dificuldade: Media @@ -67,10 +69,13 @@ export const QuestionCard: FC = ({ title, onAddQuestion, onRemoveQuestion ijodsjidsoifidfsiojsdfiojdsfiodfs ijdf iodsf iosd iojdf sijodsf iojdsf ioj sdfiojdf sioj dfsiojsdf iojdfs ijodsfijoidfsijodfsijdfsijo dsiofd ijosdfjiofdsidsfio
-
+
}
-
+
+
- +
) diff --git a/app/javascript/pages/assessment/components/QuestionCard.tsx b/app/javascript/pages/assessment/components/QuestionCard.tsx index 7981830..d009238 100644 --- a/app/javascript/pages/assessment/components/QuestionCard.tsx +++ b/app/javascript/pages/assessment/components/QuestionCard.tsx @@ -16,7 +16,7 @@ export const QuestionCard: FC = ({ title, onAddQuestion, onRemoveQuestion setButtonState({ bg: 'bg-red-700', label: 'Remover', method: handleRemoveQuestion }) - onAddQuestion(title) + onAddQuestion(title, handleRemoveQuestion) } const handleRemoveQuestion = () => { diff --git a/app/javascript/pages/assessment/components/SelectedQuestionCard.tsx b/app/javascript/pages/assessment/components/SelectedQuestionCard.tsx index 282a336..a685688 100644 --- a/app/javascript/pages/assessment/components/SelectedQuestionCard.tsx +++ b/app/javascript/pages/assessment/components/SelectedQuestionCard.tsx @@ -1,6 +1,5 @@ import React, { FC } from 'react'; import { FaTrash } from 'react-icons/fa'; -import { Link } from 'react-router-dom'; type Props = { label: string @@ -18,7 +17,7 @@ export const SelectedQuestionCard: FC = ({ label, id, onRemoveQuestion })
diff --git a/app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx b/app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx index a34a1cb..e374c7a 100644 --- a/app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx +++ b/app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx @@ -1,13 +1,14 @@ -import React, { FC, PropsWithChildren } from "react"; +import React, { FC, } from "react"; import { SideBar } from "./SideBar"; import { SelectedQuestionCard } from "./SelectedQuestionCard"; type Props = { - questions: {id: string, label: string}[], - onRemoveQuestion: Function + questions: { + id: string, label: string, removeHandler: Function + }[] } -export const SelectedQuestionsSideBar: FC = ({ questions, onRemoveQuestion }) => { +export const SelectedQuestionsSideBar: FC = ({ questions }) => { return (

Questões Selecionadas

@@ -16,7 +17,7 @@ export const SelectedQuestionsSideBar: FC = ({ questions, onRemoveQuestio {questions.length ? questions.map(q => ) : + onRemoveQuestion={q.removeHandler}/>) :

Nenhuma questão selecionada

From 264d126414bd38422b9261e9302e3ff127def753 Mon Sep 17 00:00:00 2001 From: WindowsCrashed Date: Tue, 8 Aug 2023 23:23:11 -0300 Subject: [PATCH 08/14] add filter side bar --- .../pages/assessment/NewAssessmentManual.tsx | 55 ++++++++------- .../assessment/components/FiltersSideBar.tsx | 69 +++++++++++++++++++ .../assessment/components/QuestionCard.tsx | 14 ++-- .../components/RangeFilterField.tsx | 23 +++++++ .../components/SelectFilterField.tsx | 19 +++++ .../components/SelectedQuestionsSideBar.tsx | 4 +- .../pages/assessment/components/SideBar.tsx | 17 +++-- 7 files changed, 159 insertions(+), 42 deletions(-) create mode 100644 app/javascript/pages/assessment/components/FiltersSideBar.tsx create mode 100644 app/javascript/pages/assessment/components/RangeFilterField.tsx create mode 100644 app/javascript/pages/assessment/components/SelectFilterField.tsx diff --git a/app/javascript/pages/assessment/NewAssessmentManual.tsx b/app/javascript/pages/assessment/NewAssessmentManual.tsx index 0ebd371..348755d 100644 --- a/app/javascript/pages/assessment/NewAssessmentManual.tsx +++ b/app/javascript/pages/assessment/NewAssessmentManual.tsx @@ -8,6 +8,7 @@ import { SideBar } from "./components/SideBar"; import { QuestionCard } from "./components/QuestionCard"; import { Link } from "react-router-dom"; import { SelectedQuestionsSideBar } from "./components/SelectedQuestionsSideBar"; +import { FiltersSideBar } from "./components/FiltersSideBar"; type NewAssessementManualForm = { axisWeights: Record @@ -66,34 +67,32 @@ export const NewAssessementManual = () => { return ( <> -
- {/*bgColor="bg-red-700"*/} - Filters - -
{/*bg-blue-500*/} - - - - - - - -
- +
+ +
{/*bg-blue-500*/} + + + + + + + +
+
) diff --git a/app/javascript/pages/assessment/components/FiltersSideBar.tsx b/app/javascript/pages/assessment/components/FiltersSideBar.tsx new file mode 100644 index 0000000..8ef4757 --- /dev/null +++ b/app/javascript/pages/assessment/components/FiltersSideBar.tsx @@ -0,0 +1,69 @@ +import React, { FC, } from "react"; +import { SideBar } from "./SideBar"; +import { SelectedQuestionCard } from "./SelectedQuestionCard"; +import { Button } from "../../../components"; +import { SelectFilterField } from "./SelectFilterField"; +import { RangeFilterField } from "./RangeFilterField"; + +type Props = { + questions?: { + id: string, label: string, removeHandler: Function + }[] +} + +export const FiltersSideBar: FC = () => { + return ( + +
+
+ + + + + + + + +
+ + +
+ + +
+ + ) +} \ No newline at end of file diff --git a/app/javascript/pages/assessment/components/QuestionCard.tsx b/app/javascript/pages/assessment/components/QuestionCard.tsx index d009238..df8c487 100644 --- a/app/javascript/pages/assessment/components/QuestionCard.tsx +++ b/app/javascript/pages/assessment/components/QuestionCard.tsx @@ -37,14 +37,14 @@ export const QuestionCard: FC = ({ title, onAddQuestion, onRemoveQuestion {!collapsed &&
Grau de Dificuldade: - Media + Média
Categoria: Modelagem
- Eixo de Formacao: + Eixo de Formação: Infra Sistemas
@@ -52,17 +52,21 @@ export const QuestionCard: FC = ({ title, onAddQuestion, onRemoveQuestion Fisica
- Habilidade Cogn: + Habilidade Cognitiva: Compreender
- Ano: - 2023 + Tipo: + Resposta Multipla
Autoria: UNIFESO
+
+ Ano: + 2023 +
Enunciado:
diff --git a/app/javascript/pages/assessment/components/RangeFilterField.tsx b/app/javascript/pages/assessment/components/RangeFilterField.tsx new file mode 100644 index 0000000..8dbff06 --- /dev/null +++ b/app/javascript/pages/assessment/components/RangeFilterField.tsx @@ -0,0 +1,23 @@ +import React, { FC, } from "react"; + +type Props = { + label: string +} + +export const RangeFilterField: FC = ({ label }) => { + return ( +
+ {label} +
+
+ Início + +
+
+ Fim + +
+
+
+ ) +} \ No newline at end of file diff --git a/app/javascript/pages/assessment/components/SelectFilterField.tsx b/app/javascript/pages/assessment/components/SelectFilterField.tsx new file mode 100644 index 0000000..3b5891d --- /dev/null +++ b/app/javascript/pages/assessment/components/SelectFilterField.tsx @@ -0,0 +1,19 @@ +import React, { FC, } from "react"; + +type Props = { + options: {id: number, label: string,}[] + label: string +} + +export const SelectFilterField: FC = ({ options, label }) => { + return ( +
+ {label} + +
+ ) +} \ No newline at end of file diff --git a/app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx b/app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx index e374c7a..bc5ea11 100644 --- a/app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx +++ b/app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx @@ -10,9 +10,7 @@ type Props = { export const SelectedQuestionsSideBar: FC = ({ questions }) => { return ( - -

Questões Selecionadas

-
+
{questions.length ? questions.map(q => = ({ bgColor, children }) => { +export const SideBar: FC = ({ header, children }) => { return ( -
-
- {children} -
+
+ {header && + <> +

{header}

+
+ } +
+ {children}
+
) } \ No newline at end of file From 8e0111b8eaf85e31c60b9db3254975b6128b97c4 Mon Sep 17 00:00:00 2001 From: WindowsCrashed Date: Wed, 9 Aug 2023 12:30:49 -0300 Subject: [PATCH 09/14] add bottom bar --- .../pages/assessment/NewAssessmentManual.tsx | 6 ++++-- .../pages/assessment/components/BottomBar.tsx | 21 +++++++++++++++++++ .../assessment/components/FiltersSideBar.tsx | 5 +---- 3 files changed, 26 insertions(+), 6 deletions(-) create mode 100644 app/javascript/pages/assessment/components/BottomBar.tsx diff --git a/app/javascript/pages/assessment/NewAssessmentManual.tsx b/app/javascript/pages/assessment/NewAssessmentManual.tsx index 348755d..187bcf5 100644 --- a/app/javascript/pages/assessment/NewAssessmentManual.tsx +++ b/app/javascript/pages/assessment/NewAssessmentManual.tsx @@ -9,6 +9,7 @@ import { QuestionCard } from "./components/QuestionCard"; import { Link } from "react-router-dom"; import { SelectedQuestionsSideBar } from "./components/SelectedQuestionsSideBar"; import { FiltersSideBar } from "./components/FiltersSideBar"; +import { BottomBar } from "./components/BottomBar"; type NewAssessementManualForm = { axisWeights: Record @@ -67,9 +68,10 @@ export const NewAssessementManual = () => { return ( <> -
+ +
-
{/*bg-blue-500*/} +
diff --git a/app/javascript/pages/assessment/components/BottomBar.tsx b/app/javascript/pages/assessment/components/BottomBar.tsx new file mode 100644 index 0000000..91502e5 --- /dev/null +++ b/app/javascript/pages/assessment/components/BottomBar.tsx @@ -0,0 +1,21 @@ +import React, { FC, } from "react"; +import { Button } from "../../../components"; + +type Props = { + +} + +export const BottomBar: FC = () => { + return ( +
+
+ + +
+
+ ) +} \ No newline at end of file diff --git a/app/javascript/pages/assessment/components/FiltersSideBar.tsx b/app/javascript/pages/assessment/components/FiltersSideBar.tsx index 8ef4757..b87b665 100644 --- a/app/javascript/pages/assessment/components/FiltersSideBar.tsx +++ b/app/javascript/pages/assessment/components/FiltersSideBar.tsx @@ -15,9 +15,7 @@ export const FiltersSideBar: FC = () => { return (
-
+ = () => { Limpar Filtro
-
From a28b21f44eaf622b4e83e9e38c9362f0c87f6d01 Mon Sep 17 00:00:00 2001 From: WindowsCrashed Date: Wed, 9 Aug 2023 12:50:21 -0300 Subject: [PATCH 10/14] add button to access new assessment manual --- app/javascript/pages/assessment/NewAssessement.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/app/javascript/pages/assessment/NewAssessement.tsx b/app/javascript/pages/assessment/NewAssessement.tsx index 47fccbf..ba58ec8 100644 --- a/app/javascript/pages/assessment/NewAssessement.tsx +++ b/app/javascript/pages/assessment/NewAssessement.tsx @@ -5,6 +5,7 @@ import { Controller, useForm } from "react-hook-form"; import { Axis, Query } from "../../__generated__/graphql-schema"; import { Button, Card, Input, Navigator } from '../../components'; +import { useHistory } from "react-router"; type NewAssessementForm = { axisWeights: Record @@ -47,6 +48,8 @@ export const NewAssessement = () => { const notSelectedAxis: Axis[] = axes.filter((axis) => !subjectsIds.includes(axis.id)) const selectedAxis: Axis[] = axes.filter((axis) => subjectsIds.includes(axis.id)) + const navigate = useHistory() + return ( <> @@ -179,9 +182,14 @@ export const NewAssessement = () => {
- +
+ + +
) } \ No newline at end of file From 3d946d03ff218588a278a76e8df37af3fdb1f501 Mon Sep 17 00:00:00 2001 From: WindowsCrashed Date: Fri, 11 Aug 2023 14:51:13 -0300 Subject: [PATCH 11/14] add question area and clear selection button --- .../pages/assessment/NewAssessmentManual.tsx | 95 ++++--------------- .../assessment/components/QuestionArea.tsx | 19 ++++ .../components/SelectedQuestionsSideBar.tsx | 25 +++-- 3 files changed, 56 insertions(+), 83 deletions(-) create mode 100644 app/javascript/pages/assessment/components/QuestionArea.tsx diff --git a/app/javascript/pages/assessment/NewAssessmentManual.tsx b/app/javascript/pages/assessment/NewAssessmentManual.tsx index 187bcf5..5db83f2 100644 --- a/app/javascript/pages/assessment/NewAssessmentManual.tsx +++ b/app/javascript/pages/assessment/NewAssessmentManual.tsx @@ -1,68 +1,29 @@ -import { gql, useQuery } from "@apollo/client"; import React, { useState } from "react"; -import { Controller, useForm } from "react-hook-form"; - -import { Axis, Query } from "../../__generated__/graphql-schema"; -import { Button, Card, Input, Navigator } from '../../components'; -import { SideBar } from "./components/SideBar"; -import { QuestionCard } from "./components/QuestionCard"; -import { Link } from "react-router-dom"; +import { Navigator } from '../../components'; import { SelectedQuestionsSideBar } from "./components/SelectedQuestionsSideBar"; import { FiltersSideBar } from "./components/FiltersSideBar"; import { BottomBar } from "./components/BottomBar"; - -type NewAssessementManualForm = { - axisWeights: Record -} - -const NEW_ASSESSEMENT_DATA_QUERY = gql` - query NewAssessementDataQuery { - axes { - nodes { - id - name - } - } - } -` +import { QuestionArea } from "./components/QuestionArea"; export const NewAssessementManual = () => { - const { data } = useQuery(NEW_ASSESSEMENT_DATA_QUERY) - const axes = data?.axes.nodes - - const [questions, setQuestions] = useState<{id: string, label: string, removeHandler: Function}[]>([]) - - const [subjectsIds, setSubjectsIds] = useState([]) - const { register, control, watch } = useForm({ - mode: 'onBlur' - }) - - - const addAxisForm = useForm<{ axisId: string }>() - - const handleAddAxis = (formData: { axisId: string }) => { - setSubjectsIds(prev => [...prev, formData.axisId]) - addAxisForm.reset(); - } - - const handleRemoveAxis = (axisId: string) => { - setSubjectsIds(prev => prev.filter((axis => axis !== axisId))) - } - - if (!axes?.length) return null - - const notSelectedAxis: Axis[] = axes.filter((axis) => !subjectsIds.includes(axis.id)) - const selectedAxis: Axis[] = axes.filter((axis) => subjectsIds.includes(axis.id)) + const [questions, setQuestions] = useState([ + "Question 1", "Question 2", "Question 3", "Question 4", + "Question 5", "Question 6", "Question 7"]) + const [selectedQuestions, setSelectedQuestions] = useState<{id: string, label: string, removeHandler: Function}[]>([]) const addQuestion = (label: string, removeHandler: Function) => { const id: string = label.replace(/\s+/g, '') - if (!questions.find(q => q.id === id)) { - setQuestions(q => [...q, { id, label, removeHandler }]) + if (!selectedQuestions.find(q => q.id === id)) { + setSelectedQuestions(q => [...q, { id, label, removeHandler }]) } } const removeQuestion = (id: string) => { - setQuestions(q => q.filter(i => i.id !== id)) + setSelectedQuestions(q => q.filter(i => i.id !== id)) + } + + const clearSelectedQuestions = () => { + setSelectedQuestions([]) } return ( @@ -71,30 +32,12 @@ export const NewAssessementManual = () => {
-
- - - - - - - -
- + +
) diff --git a/app/javascript/pages/assessment/components/QuestionArea.tsx b/app/javascript/pages/assessment/components/QuestionArea.tsx new file mode 100644 index 0000000..82092e6 --- /dev/null +++ b/app/javascript/pages/assessment/components/QuestionArea.tsx @@ -0,0 +1,19 @@ +import React, { FC } from "react"; +import { QuestionCard } from "./QuestionCard"; + +interface Props { + questions: string[] + onAddQuestion: Function, + onRemoveQuestion: Function +} + +export const QuestionArea: FC = ({ questions, onAddQuestion, onRemoveQuestion }) => { + return ( +
+ {questions.map(question => + )} +
+ ) +} \ No newline at end of file diff --git a/app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx b/app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx index bc5ea11..78f17b5 100644 --- a/app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx +++ b/app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx @@ -1,24 +1,35 @@ import React, { FC, } from "react"; import { SideBar } from "./SideBar"; import { SelectedQuestionCard } from "./SelectedQuestionCard"; +import { Button } from "../../../components"; type Props = { questions: { id: string, label: string, removeHandler: Function }[] + onClearSelectedQuestions: Function } -export const SelectedQuestionsSideBar: FC = ({ questions }) => { +export const SelectedQuestionsSideBar: FC = ({ questions, onClearSelectedQuestions }) => { return (
{questions.length ? - questions.map(q => ) : -

- Nenhuma questão selecionada -

+ <> +
+ {questions.map(q => )} +
+
+ +
+ : +

+ Nenhuma questão selecionada +

}
From 147fb997d096ed8d6f4d33c60aa80f11284e72e3 Mon Sep 17 00:00:00 2001 From: WindowsCrashed Date: Sat, 12 Aug 2023 20:20:22 -0300 Subject: [PATCH 12/14] update question card with question card field --- .../assessment/components/QuestionCard.tsx | 41 ++++--------------- .../components/QuestionCardField.tsx | 15 +++++++ 2 files changed, 24 insertions(+), 32 deletions(-) create mode 100644 app/javascript/pages/assessment/components/QuestionCardField.tsx diff --git a/app/javascript/pages/assessment/components/QuestionCard.tsx b/app/javascript/pages/assessment/components/QuestionCard.tsx index df8c487..7b1fa6d 100644 --- a/app/javascript/pages/assessment/components/QuestionCard.tsx +++ b/app/javascript/pages/assessment/components/QuestionCard.tsx @@ -1,5 +1,6 @@ import React, { FC, useState } from "react"; import { Button, Card } from "../../../components"; +import { QuestionCardField } from "./QuestionCardField"; interface Props { title: string @@ -35,38 +36,14 @@ export const QuestionCard: FC = ({ title, onAddQuestion, onRemoveQuestion
{!collapsed &&
-
- Grau de Dificuldade: - Média -
-
- Categoria: - Modelagem -
-
- Eixo de Formação: - Infra Sistemas -
-
- Assunto: - Fisica -
-
- Habilidade Cognitiva: - Compreender -
-
- Tipo: - Resposta Multipla -
-
- Autoria: - UNIFESO -
-
- Ano: - 2023 -
+ + + + + + + +
Enunciado:
diff --git a/app/javascript/pages/assessment/components/QuestionCardField.tsx b/app/javascript/pages/assessment/components/QuestionCardField.tsx new file mode 100644 index 0000000..60d7515 --- /dev/null +++ b/app/javascript/pages/assessment/components/QuestionCardField.tsx @@ -0,0 +1,15 @@ +import React, { FC } from "react"; + +interface Props { + label: string, + value: string +} + +export const QuestionCardField: FC = ({ label, value }) => { + return ( +
+ {`${label}: `} + {value} +
+ ) +} \ No newline at end of file From 230a59e9992a87a8e05cddc9f686f8c78399a330 Mon Sep 17 00:00:00 2001 From: WindowsCrashed Date: Fri, 25 Aug 2023 22:33:33 -0300 Subject: [PATCH 13/14] add questions query --- .../pages/assessment/NewAssessmentManual.tsx | 55 +++++++++++++++++-- .../assessment/components/QuestionArea.tsx | 5 +- .../assessment/components/QuestionCard.tsx | 38 +++++++------ .../components/QuestionCardField.tsx | 5 +- 4 files changed, 78 insertions(+), 25 deletions(-) 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 From ce7d38e95bfc60697e03a6881e2098fe5af6f578 Mon Sep 17 00:00:00 2001 From: WindowsCrashed Date: Fri, 25 Aug 2023 23:44:31 -0300 Subject: [PATCH 14/14] add filters query --- .../pages/assessment/NewAssessmentManual.tsx | 12 +- .../assessment/components/FiltersSideBar.tsx | 106 +++++++++++------- .../assessment/components/QuestionCard.tsx | 5 +- .../components/SelectFilterField.tsx | 2 +- 4 files changed, 74 insertions(+), 51 deletions(-) diff --git a/app/javascript/pages/assessment/NewAssessmentManual.tsx b/app/javascript/pages/assessment/NewAssessmentManual.tsx index 4856477..b86cf40 100644 --- a/app/javascript/pages/assessment/NewAssessmentManual.tsx +++ b/app/javascript/pages/assessment/NewAssessmentManual.tsx @@ -41,17 +41,13 @@ const QUESTIONS_QUERY = gql` ` 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([]) const [selectedQuestions, setSelectedQuestions] = useState<{id: string, label: string, removeHandler: Function}[]>([]) - const { fetchMore } = useQuery(QUESTIONS_QUERY, { - onCompleted: (respose) => { - const { questions: questionConnection } = respose + useQuery(QUESTIONS_QUERY, { + onCompleted: (response) => { + const { questions: questionConnection } = response setQuestions(questionConnection.nodes as Question[]) - console.log(respose) }, fetchPolicy: "network-only" }) @@ -71,8 +67,6 @@ export const NewAssessementManual = () => { setSelectedQuestions([]) } - fetchMore({}) - return ( <> diff --git a/app/javascript/pages/assessment/components/FiltersSideBar.tsx b/app/javascript/pages/assessment/components/FiltersSideBar.tsx index b87b665..8cba45a 100644 --- a/app/javascript/pages/assessment/components/FiltersSideBar.tsx +++ b/app/javascript/pages/assessment/components/FiltersSideBar.tsx @@ -1,55 +1,83 @@ -import React, { FC, } from "react"; +import React, { FC, useState, } from "react"; import { SideBar } from "./SideBar"; -import { SelectedQuestionCard } from "./SelectedQuestionCard"; import { Button } from "../../../components"; import { SelectFilterField } from "./SelectFilterField"; import { RangeFilterField } from "./RangeFilterField"; +import { BLOOM_TAXONOMY, CHECK_TYPE, DIFFICULTY } from "../../../utils/types"; +import { gql, useQuery } from "@apollo/client"; +import { Axis, Category, Query, Subject } from "../../../__generated__/graphql-schema"; + +const FILTERS_QUERY = gql` + query { + categories { + nodes { + id + name + } + } + axes { + nodes { + id + name + } + } + subjects { + nodes { + id + name + } + } + } +` type Props = { - questions?: { - id: string, label: string, removeHandler: Function - }[] + } export const FiltersSideBar: FC = () => { + const [categories, setCategories] = useState([]) + const [axis, setAxis] = useState([]) + const [subjects, setSubjects] = useState([]) + + const difficulties = DIFFICULTY.map(item => ({id: item.value, label: item.label})) + const bloomTaxonomyTypes = BLOOM_TAXONOMY.map(item => ({id: item.value, label: item.label})) + const checkTypes = CHECK_TYPE.map(item => ({id: item.value, label: item.label})) + const authorshipTypes = [ + {id: 1, label: 'Própria'}, + {id: 2, label: 'Outro'}, + ] + + useQuery(FILTERS_QUERY, { + onCompleted: (response) => { + const { + categories: categoriesConnection, + axes: axisConnection, + subjects: subjectConnection + } = response + setCategories(categoriesConnection.nodes as Category[]) + setAxis(axisConnection.nodes as Axis[]) + setSubjects(subjectConnection.nodes as Subject[]) + }, + fetchPolicy: "network-only" + }) + return (
- - - - - - - + + ({id: item.id, label: item.name})) + }/> + ({id: item.id, label: item.name})) + }/> + ({id: item.id, label: item.name})) + }/> + + +