use axis instead os subjects on new assessement page
This commit is contained in:
@@ -1,23 +1,21 @@
|
||||
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 { Query } from "../../__generated__/graphql-schema";
|
||||
|
||||
import { Axis, Query } from "../../__generated__/graphql-schema";
|
||||
import { Button, Card, Input, Navigator } from '../../components';
|
||||
|
||||
type NewAssessementForm = {
|
||||
subjectWeights: Record<string, any>
|
||||
axisWeights: Record<string, any>
|
||||
}
|
||||
|
||||
const NEW_ASSESSEMENT_DATA_QUERY = gql`
|
||||
query NewAssessementDataQuery {
|
||||
categories {
|
||||
axes {
|
||||
nodes {
|
||||
id
|
||||
name
|
||||
subjects {
|
||||
id
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -25,24 +23,30 @@ const NEW_ASSESSEMENT_DATA_QUERY = gql`
|
||||
|
||||
export const NewAssessement = () => {
|
||||
const { data } = useQuery<Query>(NEW_ASSESSEMENT_DATA_QUERY)
|
||||
const axes = data?.axes.nodes
|
||||
|
||||
const [subjectsIds, setSubjectsIds] = useState<string[]>([])
|
||||
const subjectForm = useForm<{ subjectId: string }>()
|
||||
const { register, control, watch } = useForm<NewAssessementForm>({
|
||||
mode: 'onBlur'
|
||||
})
|
||||
|
||||
|
||||
const handleSubjectFormSubmit = (data: {
|
||||
subjectId: string
|
||||
}) => {
|
||||
setSubjectsIds(prev => [...prev, data.subjectId])
|
||||
subjectForm.reset();
|
||||
const addAxisForm = useForm<{ axisId: string }>()
|
||||
|
||||
const handleAddAxis = (formData: { axisId: string }) => {
|
||||
setSubjectsIds(prev => [...prev, formData.axisId])
|
||||
addAxisForm.reset();
|
||||
}
|
||||
|
||||
if (!data?.categories) {
|
||||
return null;
|
||||
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 (
|
||||
<>
|
||||
<Navigator home />
|
||||
@@ -61,117 +65,116 @@ export const NewAssessement = () => {
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card title="Assuntos e Pesos">
|
||||
<Card title="Exios e Pesos">
|
||||
<div className="mb-6">
|
||||
<form
|
||||
className="flex flex-row"
|
||||
onSubmit={subjectForm.handleSubmit(handleSubjectFormSubmit)}
|
||||
onSubmit={addAxisForm.handleSubmit(handleAddAxis)}
|
||||
>
|
||||
<select
|
||||
className="w-full rounded p-1 border-gray-400 border shadow-sm"
|
||||
{...subjectForm.register('subjectId')}
|
||||
disabled={!notSelectedAxis.length}
|
||||
{...addAxisForm.register('axisId')}
|
||||
>
|
||||
{data.categories.nodes.map(category => (
|
||||
<optgroup label={category.name} key={`category-${category.id}`}>
|
||||
{category.subjects.map(subject =>
|
||||
subjectsIds.includes(subject.id) ? null : <option value={subject.id} key={`subject-${subject.id}`}>{subject.name}</option>
|
||||
)}
|
||||
</optgroup>
|
||||
{notSelectedAxis.map(axes => (
|
||||
<option value={axes.id} key={`axes-${axes.id}`}>{axes.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<Button className="ml-4" htmlType="submit">Adicionar</Button>
|
||||
<Button
|
||||
className="ml-4"
|
||||
htmlType="submit"
|
||||
disabled={!notSelectedAxis.length}
|
||||
>
|
||||
Adicionar
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{data.categories.nodes.map(category => (
|
||||
category.subjects.find(subject => subjectsIds.includes(subject.id)) ?
|
||||
<div
|
||||
key={`list-category-${category.id}`}
|
||||
className="flex flex-col w-full border border-gray-300 rounded p-4 mt-4 shadow-sm"
|
||||
>
|
||||
<h5 className="text-xl">{category.name}</h5>
|
||||
{category.subjects.map(subject =>
|
||||
subjectsIds.includes(subject.id)
|
||||
? <div key={`list-subject-${subject.id}`} className="ml-4">
|
||||
<div className="text-lg">{subject.name}</div>
|
||||
<div className="ml-4 grid grid-cols-3">
|
||||
Fácil
|
||||
<span>
|
||||
{watch(`subjectWeights.easy.${subject.id}`) ?? 5}
|
||||
</span>
|
||||
<div>
|
||||
<Controller
|
||||
name={`subjectWeights.easy.${subject.id}`}
|
||||
control={control}
|
||||
defaultValue={5}
|
||||
render={({ field }) => (
|
||||
<input
|
||||
className="w-full"
|
||||
type="range"
|
||||
min={0}
|
||||
max={10}
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{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>
|
||||
<div className="ml-4 grid grid-cols-3">
|
||||
Médio
|
||||
<span>
|
||||
{watch(`subjectWeights.medium.${subject.id}`) ?? 5}
|
||||
</span>
|
||||
<div>
|
||||
<Controller
|
||||
name={`subjectWeights.medium.${subject.id}`}
|
||||
control={control}
|
||||
defaultValue={5}
|
||||
render={({ field }) => (
|
||||
<input
|
||||
className="w-full"
|
||||
type="range"
|
||||
min={0}
|
||||
max={10}
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</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>
|
||||
<div className="ml-4 grid grid-cols-3">
|
||||
Difícil
|
||||
<span>
|
||||
{watch(`subjectWeights.hard.${subject.id}`) ?? 5}
|
||||
</span>
|
||||
<div>
|
||||
<Controller
|
||||
name={`subjectWeights.hard.${subject.id}`}
|
||||
control={control}
|
||||
defaultValue={5}
|
||||
render={({ field }) => (
|
||||
<input
|
||||
className="w-full"
|
||||
type="range"
|
||||
min={0}
|
||||
max={10}
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</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>
|
||||
: null
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
: null
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user