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 +

}