add add question mechanic
This commit is contained in:
WindowsCrashed
@@ -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<Query>(NEW_ASSESSEMENT_DATA_QUERY)
|
||||
const axes = data?.axes.nodes
|
||||
|
||||
const [questions, setQuestions] = useState<{id: string, label: string}[]>([])
|
||||
|
||||
const [subjectsIds, setSubjectsIds] = useState<string[]>([])
|
||||
const { register, control, watch } = useForm<NewAssessementManualForm>({
|
||||
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 (
|
||||
<>
|
||||
<Navigator home />
|
||||
@@ -60,156 +69,30 @@ export const NewAssessementManual = () => {
|
||||
Filters
|
||||
</SideBar>
|
||||
<div className="col-span-3 border-l-2 border-r-2 border-gray-300 px-6 pb-20"> {/*bg-blue-500*/}
|
||||
<QuestionCard title="Question 1"/>
|
||||
<QuestionCard title="Question 2"/>
|
||||
<QuestionCard title="Question 3"/>
|
||||
<QuestionCard title="Question 4"/>
|
||||
<QuestionCard title="Question 5"/>
|
||||
<QuestionCard title="Question 6"/>
|
||||
<QuestionCard title="Question 7"/>
|
||||
<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>
|
||||
<SelectedQuestionCard id="Question1" label="question 1"/>
|
||||
<SelectedQuestionCard id="Question2" label="question 2"/>
|
||||
<SelectedQuestionCard id="Question3" label="question 3"/>
|
||||
<SelectedQuestionCard id="Question5" label="question 5"/>
|
||||
</SelectedQuestionsSideBar>
|
||||
<SelectedQuestionsSideBar onRemoveQuestion={removeQuestion} questions={questions}/>
|
||||
</div>
|
||||
</>
|
||||
// <>
|
||||
//
|
||||
// <div className="m-auto grid gap-4 mt-4 mx-6">
|
||||
// <Card title="Detalhes">
|
||||
// <div className="flex flex-col">
|
||||
// <p className="pr-2 my-auto">Titulo: </p>
|
||||
// <div className="w-full">
|
||||
// <Input></Input>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className="flex flex-col mt-3">
|
||||
// <p className="pr-2 my-auto">Observações: </p>
|
||||
// <div className="w-full">
|
||||
// <Input></Input>
|
||||
// </div>
|
||||
// </div>
|
||||
// </Card>
|
||||
// <Card title="Exios e Pesos">
|
||||
// <div className="mb-6">
|
||||
// <form
|
||||
// className="flex flex-row"
|
||||
// onSubmit={addAxisForm.handleSubmit(handleAddAxis)}
|
||||
// >
|
||||
// <select
|
||||
// className="w-full rounded p-1 border-gray-400 border shadow-sm"
|
||||
// disabled={!notSelectedAxis.length}
|
||||
// {...addAxisForm.register('axisId')}
|
||||
// >
|
||||
// {notSelectedAxis.map(axes => (
|
||||
// <option value={axes.id} key={`axes-${axes.id}`}>{axes.name}</option>
|
||||
// ))}
|
||||
// </select>
|
||||
// <Button
|
||||
// className="ml-4"
|
||||
// htmlType="submit"
|
||||
// disabled={!notSelectedAxis.length}
|
||||
// >
|
||||
// Adicionar
|
||||
// </Button>
|
||||
// </form>
|
||||
// </div>
|
||||
|
||||
// <div>
|
||||
// {selectedAxis.map(axis => (
|
||||
// <div
|
||||
// key={`list-axis-${axis.id}`}
|
||||
// className="flex flex-col w-full border border-gray-300 rounded p-4 mt-4 shadow-sm"
|
||||
// >
|
||||
// <div key={`list-axis-${axis.id}`} className="ml-4 mb-2">
|
||||
// <div className="flex justify-between">
|
||||
// <div className="text-lg">{axis.name}</div>
|
||||
// <div className="text-red-600 cursor-pointer" onClick={() => handleRemoveAxis(axis.id)}><FaTrash></FaTrash></div>
|
||||
// </div>
|
||||
// <div className="ml-4 grid grid-cols-3">
|
||||
// Fácil
|
||||
// <span>
|
||||
// {watch(`axisWeights.easy.${axis.id}`) ?? 5}
|
||||
// </span>
|
||||
// <div>
|
||||
// <Controller
|
||||
// name={`axisWeights.easy.${axis.id}`}
|
||||
// control={control}
|
||||
// defaultValue={5}
|
||||
// render={({ field }) => (
|
||||
// <input
|
||||
// className="w-full"
|
||||
// type="range"
|
||||
// min={0}
|
||||
// max={10}
|
||||
// {...field}
|
||||
// />
|
||||
// )}
|
||||
// />
|
||||
|
||||
// </div>
|
||||
|
||||
// </div>
|
||||
// <div className="ml-4 grid grid-cols-3">
|
||||
// Médio
|
||||
// <span>
|
||||
// {watch(`axisWeights.medium.${axis.id}`) ?? 5}
|
||||
// </span>
|
||||
// <div>
|
||||
// <Controller
|
||||
// name={`axisWeights.medium.${axis.id}`}
|
||||
// control={control}
|
||||
// defaultValue={5}
|
||||
// render={({ field }) => (
|
||||
// <input
|
||||
// className="w-full"
|
||||
// type="range"
|
||||
// min={0}
|
||||
// max={10}
|
||||
// {...field}
|
||||
// />
|
||||
// )}
|
||||
// />
|
||||
|
||||
// </div>
|
||||
|
||||
// </div>
|
||||
// <div className="ml-4 grid grid-cols-3">
|
||||
// Difícil
|
||||
// <span>
|
||||
// {watch(`axisWeights.hard.${axis.id}`) ?? 5}
|
||||
// </span>
|
||||
// <div>
|
||||
// <Controller
|
||||
// name={`axisWeights.hard.${axis.id}`}
|
||||
// control={control}
|
||||
// defaultValue={5}
|
||||
// render={({ field }) => (
|
||||
// <input
|
||||
// className="w-full"
|
||||
// type="range"
|
||||
// min={0}
|
||||
// max={10}
|
||||
// {...field}
|
||||
// />
|
||||
// )}
|
||||
// />
|
||||
|
||||
// </div>
|
||||
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// ))}
|
||||
// </div>
|
||||
// </Card>
|
||||
// </div>
|
||||
// <Button type="primary" className="ml-auto mr-6 mt-6">
|
||||
// Gerar
|
||||
// </Button>
|
||||
// </>
|
||||
)
|
||||
}
|
||||
@@ -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<Props> = ({ title }) => {
|
||||
export const QuestionCard: FC<Props> = ({ 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 (
|
||||
<div id={title.replace(/\s+/g, '')}>
|
||||
<div id={questionId}>
|
||||
<Card title={title} className="mb-5">
|
||||
<div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
@@ -49,8 +71,9 @@ export const QuestionCard: FC<Props> = ({ title }) => {
|
||||
<div className="mt-6">
|
||||
<hr className="h-4"/>
|
||||
<div className="flex justify-end">
|
||||
<Button type="primary">
|
||||
Adicionar
|
||||
<Button type="primary" className={buttonState.bg}
|
||||
onClick={buttonState.method}>
|
||||
{buttonState.label}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,9 +5,10 @@ import { Link } from 'react-router-dom';
|
||||
type Props = {
|
||||
label: string
|
||||
id: string
|
||||
onRemoveQuestion: Function
|
||||
}
|
||||
|
||||
export const SelectedQuestionCard: FC<Props> = ({ label, id }) => {
|
||||
export const SelectedQuestionCard: FC<Props> = ({ label, id, onRemoveQuestion }) => {
|
||||
return (
|
||||
<div className="mx-1 sm:mx-0 mb-4 mt-3 sm:mb-0 border-l-8 border-primary-light flex bg-white hover:bg-unifeso-50 rounded shadow hover:shadow-md cursor-pointer group transition-all duration-500">
|
||||
<a className="flex flex-col w-full px-3 py-2"
|
||||
@@ -16,7 +17,8 @@ export const SelectedQuestionCard: FC<Props> = ({ label, id }) => {
|
||||
</a>
|
||||
<div className="flex flex-col relative flex-grow justify-center">
|
||||
<button className="group-hover:block absolute bg-gray-300 hover:bg-primary-normal text-gray-500 hover:text-gray-100 hover:shadow-lg rounded-full p-2 cursor-pointer shadow-inner transition-all duration-500"
|
||||
style={{ left: '-1.5rem' }}>
|
||||
style={{ left: '-1.5rem' }}
|
||||
onClick={() => onRemoveQuestion(id)}>
|
||||
<FaTrash />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -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<Props> = ({ children }) => {
|
||||
export const SelectedQuestionsSideBar: FC<Props> = ({ questions, onRemoveQuestion }) => {
|
||||
return (
|
||||
<SideBar>
|
||||
<h1>Questões Selecionadas</h1>
|
||||
<hr className="h-1 mt-2"/>
|
||||
<div>
|
||||
{children ??
|
||||
{questions.length ?
|
||||
questions.map(q => <SelectedQuestionCard
|
||||
key={q.id} id={q.id} label={q.label}
|
||||
onRemoveQuestion={onRemoveQuestion}/>) :
|
||||
<h2 className="text-gray-700 mt-3">
|
||||
Nenhuma questão selecionada
|
||||
</h2>
|
||||
|
||||
Reference in New Issue
Block a user