geonizeli/progress-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add question area and clear selection button

Browse Source
This commit is contained in:
WindowsCrashed
2023-08-11 14:51:13 -03:00
parent a28b21f44e
commit 3d946d03ff
3 changed files with 56 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
app/javascript/pages/assessment/NewAssessmentManual.tsx
View File

@@ -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<string, any>
}
const NEW_ASSESSEMENT_DATA_QUERY = gql`
query NewAssessementDataQuery {
axes {
nodes {
id
name
}
}
}
`
import { QuestionArea } from "./components/QuestionArea";
export const NewAssessementManual = () => {
const { data } = useQuery<Query>(NEW_ASSESSEMENT_DATA_QUERY)
const axes = data?.axes.nodes
const [questions, setQuestions] = useState<{id: string, label: string, removeHandler: Function}[]>([])
const [subjectsIds, setSubjectsIds] = useState<string[]>([])
const { register, control, watch } = useForm<NewAssessementManualForm>({
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 = () => {
<BottomBar/>
<div className="grid grid-cols-5 gap-4 mt-4 mx-4 pb-20">
<FiltersSideBar/>
<div className="col-span-3 border-l-2 border-r-2 border-gray-300 px-6 pb-10">
<QuestionCard title="Question 1"
onAddQuestion={addQuestion}
onRemoveQuestion={removeQuestion}/>
<QuestionCard title="Question 2"
onAddQuestion={addQuestion}
onRemoveQuestion={removeQuestion}/>
<QuestionCard title="Question 3"
onAddQuestion={addQuestion}
onRemoveQuestion={removeQuestion}/>
<QuestionCard title="Question 4"
onAddQuestion={addQuestion}
onRemoveQuestion={removeQuestion}/>
<QuestionCard title="Question 5"
onAddQuestion={addQuestion}
onRemoveQuestion={removeQuestion}/>
<QuestionCard title="Question 6"
onAddQuestion={addQuestion}
onRemoveQuestion={removeQuestion}/>
<QuestionCard title="Question 7"
onAddQuestion={addQuestion}
onRemoveQuestion={removeQuestion}/>
</div>
<SelectedQuestionsSideBar questions={questions}/>
<QuestionArea questions={questions}
onAddQuestion={addQuestion} onRemoveQuestion={removeQuestion}/>
<SelectedQuestionsSideBar
questions={selectedQuestions}
onClearSelectedQuestions={clearSelectedQuestions}
/>
</div>
</>
)

19
app/javascript/pages/assessment/components/QuestionArea.tsx Normal file
View File

@@ -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<Props> = ({ questions, onAddQuestion, onRemoveQuestion }) => {
return (
<div className="col-span-3 border-l-2 border-r-2 border-gray-300 px-6">
{questions.map(question =>
<QuestionCard title={question}
onAddQuestion={onAddQuestion}
onRemoveQuestion={onRemoveQuestion}/>)}
</div>
)
}

25
app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx
View File

@@ -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<Props> = ({ questions }) => {
export const SelectedQuestionsSideBar: FC<Props> = ({ questions, onClearSelectedQuestions }) => {
return (
<SideBar header="Questões Selecionadas">
<div>
{questions.length ?
questions.map(q => <SelectedQuestionCard
key={q.id} id={q.id} label={q.label}
onRemoveQuestion={q.removeHandler}/>) :
<h2 className="text-gray-700 mt-3">
Nenhuma questão selecionada
</h2>
<>
<div>
{questions.map(q => <SelectedQuestionCard
key={q.id} id={q.id} label={q.label}
onRemoveQuestion={q.removeHandler}/>)}
</div>
<div className="flex justify-center mt-6">
<Button type="primary" onClick={() => onClearSelectedQuestions()}>
Limpar Seleção
</Button>
</div>
</> :
<h2 className="text-gray-700 mt-3">
Nenhuma questão selecionada
</h2>
}
</div>
</SideBar>