Merge pull request #8 from teste-de-progresso/feat-new-assessment-manual-page

Feat new assessment manual page

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<string, any>
@@ -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 (
     <>
       <Navigator home />
@@ -179,9 +182,14 @@ export const NewAssessement = () => {
           </div>
         </Card>
       </div>
-      <Button type="primary" className="ml-auto mr-6 mt-6">
-        Gerar
+      <div className="flex justify-end mr-6 gap-4">
+        <Button type="primary" className="mt-6">
+          Gerar Automaticamente
         </Button>
+        <Button type="primary" className="mt-6" onClick={() => navigate.push('new-manual')}>
+          Gerar Manualmente
+        </Button>
+      </div>
     </>
   )
 }

app/javascript/pages/assessment/NewAssessmentManual.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+import { Navigator } from '../../components';
+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[]>([])
+  const [selectedQuestions, setSelectedQuestions] = useState<{id: string, label: string, removeHandler: Function}[]>([]) 
+
+  useQuery<Query>(QUESTIONS_QUERY, {
+    onCompleted: (response) => {
+      const { questions: questionConnection } = response
+      setQuestions(questionConnection.nodes as Question[])
+    },
+    fetchPolicy: "network-only"
+  })
+
+  const addQuestion = (label: string, removeHandler: Function) => {
+    const id: string = label.replace(/\s+/g, '_')
+    if (!selectedQuestions.find(q => q.id === id)) {
+      setSelectedQuestions(q => [...q, { id, label, removeHandler }])
+    }
+  }
+
+  const removeQuestion = (id: string) => {
+    setSelectedQuestions(q => q.filter(i => i.id !== id))
+  }
+
+  const clearSelectedQuestions = () => {
+    setSelectedQuestions([])
+  }
+
+  return (
+    <>
+        <Navigator home />
+        <BottomBar/>
+        <div className="grid grid-cols-5 gap-4 mt-4 mx-4 pb-20">
+          <FiltersSideBar/>
+          <QuestionArea questions={questions}
+            onAddQuestion={addQuestion} onRemoveQuestion={removeQuestion}/>
+          <SelectedQuestionsSideBar
+            questions={selectedQuestions}
+            onClearSelectedQuestions={clearSelectedQuestions}
+            />
+        </div>
+    </>
+  )
+}

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<Props> = () => {
+    return (
+        <div className="fixed bottom-0 bg-white w-full h-16 flex items-center justify-end shadow-lg">
+          <div className="flex gap-6 mx-16">
+            <Button className="w-32">
+              Cancelar
+            </Button>
+            <Button type="primary" className="w-32">
+              Salvar
+            </Button>
+          </div>
+        </div>
+    )
+}

app/javascript/pages/assessment/components/FiltersSideBar.tsx

@@ -0,0 +1,94 @@
+import React, { FC, useState, } from "react";
+import { SideBar } from "./SideBar";
+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 = {
+
+}
+
+export const FiltersSideBar: FC<Props> = () => {
+    const [categories, setCategories] = useState<Category[]>([])
+    const [axis, setAxis] = useState<Axis[]>([])
+    const [subjects, setSubjects] = useState<Subject[]>([])
+
+    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<Query>(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 (
+        <SideBar header="Filtros">
+            <div className="mt-3">
+                <form className="flex flex-col gap-4">
+                    <SelectFilterField label="Grau de Dificuldade:" options={difficulties}/>
+                    <SelectFilterField label="Categoria:" options={
+                            categories.map(item => ({id: item.id, label: item.name}))
+                        }/>
+                    <SelectFilterField label="Eixo de Formação:" options={
+                            axis.map(item => ({id: item.id, label: item.name}))   
+                        }/>
+                    <SelectFilterField label="Assunto:" options={
+                            subjects.map(item => ({id: item.id, label: item.name}))   
+                        }/>
+                    <SelectFilterField label="Habilidade Cognitiva:" options={bloomTaxonomyTypes}/>
+                    <SelectFilterField label="Tipo:" options={checkTypes}/>
+                    <SelectFilterField label="Autoria:" options={authorshipTypes}/>
+                    <RangeFilterField label="Ano:"/>  
+                    <div className="w-full flex flex-col mt-2 gap-3">
+                        <Button type="primary" htmlType="submit">
+                            Aplicar Filtro
+                        </Button>
+                        <Button htmlType="submit">
+                            Limpar Filtro
+                        </Button>
+                    </div>                                         
+                </form>
+            </div>
+        </SideBar>
+    )
+}

app/javascript/pages/assessment/components/QuestionArea.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from "react";
+import { QuestionCard } from "./QuestionCard";
+import { Question } from "../../../__generated__/graphql-schema";
+
+interface Props {
+    questions: Question[]
+    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 key={question.id} question={question}
+                    onAddQuestion={onAddQuestion}
+                    onRemoveQuestion={onRemoveQuestion}/>)}
+          </div>
+    )
+}

app/javascript/pages/assessment/components/QuestionCard.tsx

@@ -0,0 +1,75 @@
+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 {
+    question: Question
+    onAddQuestion: Function,
+    onRemoveQuestion: Function
+}
+
+export const QuestionCard: FC<Props> = ({ question, onAddQuestion, onRemoveQuestion }) => {
+    const [collapsed, setCollapsed] = useState(false)
+    
+    const title = `Questão ${NodeId.decode(question.id).id}`
+    const htmlId = title.replace(/\s+/g, '_')
+    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
+        })
+        onAddQuestion(title, handleRemoveQuestion)
+    }
+    
+    const handleRemoveQuestion = () => {
+        setButtonState({
+            bg: '', label: 'Adicionar', method: handleAddQuestion
+        })
+        onRemoveQuestion(htmlId)
+    }
+
+    const [buttonState, setButtonState] = useState({
+        bg: '', label: 'Adicionar', method: handleAddQuestion
+    })
+
+    return (
+        <div id={htmlId}>
+            <Card title={title} className="mb-5">
+                <div>
+                    {!collapsed && <div className="grid grid-cols-2 gap-2">
+                        <QuestionCardField label="Grau de Dificuldade" value={difficulty}/>
+                        <QuestionCardField label="Categoria" value={question.subject?.category.name}/>
+                        <QuestionCardField label="Eixo de Formação" value={question.subject?.axis.name}/>
+                        <QuestionCardField label="Assunto" value={question.subject?.name}/>
+                        <QuestionCardField label="Habilidade Cognitiva" value={bloomTaxonomy}/>
+                        <QuestionCardField label="Tipo" value={checkType}/>
+                        <QuestionCardField label="Autoria" value={question.authorship} />
+                        <QuestionCardField label="Ano" value={question.authorshipYear}/>
+                        <div className="col-span-2">
+                            <span className="text-gray-700">Enunciado:</span>
+                            <div dangerouslySetInnerHTML={{__html: question.body ?? ''}}></div>
+                        </div>
+                    </div>}
+                    <div className="mt-6">
+                        <hr className="h-4"/>
+                        <div className="flex justify-between w-full">
+                            <Button type="default" onClick={() => setCollapsed(!collapsed)}>
+                                {collapsed ? 'Mostrar Mais' : 'Mostrar Menos'}
+                            </Button>
+                            <Button type="primary" className={buttonState.bg}
+                                onClick={buttonState.method}>
+                                {buttonState.label}
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </Card>
+        </div>
+    )
+}

app/javascript/pages/assessment/components/QuestionCardField.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from "react";
+import { Maybe } from "../../../__generated__/graphql-schema";
+
+interface Props {
+    label: string,
+    value?: Maybe<string>
+}
+
+export const QuestionCardField: FC<Props> = ({ label, value }) => {
+    return (
+        <div>
+            <span className="text-gray-700">{`${label}: `}</span>
+            <span>{value ?? ''}</span>
+        </div>    
+    )
+}

app/javascript/pages/assessment/components/RangeFilterField.tsx

@@ -0,0 +1,23 @@
+import React, { FC, } from "react";
+
+type Props = {
+    label: string
+}
+
+export const RangeFilterField: FC<Props> = ({ label }) => {
+    return (
+        <div className="flex flex-col gap-1">
+            <span>{label}</span>
+            <div className="flex gap-3 w-full">
+                <div className="flex w-1/2 gap-1 justify-center items-center">
+                    <span>Início</span>
+                    <input type="number" className="block rounded p-1 w-16 border-gray-400 border shadow-sm"/>
+                </div>
+                <div className="flex w-1/2 gap-1 justify-center items-center">
+                    <span>Fim</span>
+                    <input type="number" className="block rounded p-1 w-16 border-gray-400 border shadow-sm"/>
+                </div>
+            </div>
+        </div>
+    )
+}

app/javascript/pages/assessment/components/SelectFilterField.tsx

@@ -0,0 +1,19 @@
+import React, { FC, } from "react";
+
+type Props = {
+    options: {id: number | string, label: string,}[]
+    label: string
+}
+
+export const SelectFilterField: FC<Props> = ({ options, label }) => {
+    return (
+        <div className="flex flex-col gap-1">
+            <span>{label}</span>
+            <select className="w-full rounded p-1 border-gray-400 border shadow-sm">
+                {
+                    options.map(o => <option value={o.id} key={o.id}>{o.label}</option>)
+                }
+            </select>
+        </div>
+    )
+}

app/javascript/pages/assessment/components/SelectedQuestionCard.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+import { FaTrash } from 'react-icons/fa';
+
+type Props = {
+    label: string
+    id: string
+    onRemoveQuestion: Function
+}
+
+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"
+                href={`#${id}`}>
+                <h2>{`# ${label ?? id}`}</h2>
+            </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' }}
+                    onClick={() => onRemoveQuestion()}>
+                    <FaTrash />
+                </button>
+            </div>
+      </div>   
+    )
+}
+

app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx

@@ -0,0 +1,37 @@
+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, onClearSelectedQuestions }) => {
+    return (
+        <SideBar header="Questões Selecionadas">
+            <div>
+                {questions.length ?
+                    <>
+                        <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>
+    )
+}

app/javascript/pages/assessment/components/SideBar.tsx

@@ -0,0 +1,20 @@
+import React, { FC, PropsWithChildren } from "react";
+
+interface Props extends PropsWithChildren {
+    header?: string;
+}
+
+export const SideBar: FC<Props> = ({ header, children }) => {
+    return (
+        <div className={`border-gray-500`}>
+            {header && 
+            <>
+                <h1>{header}</h1>
+                <hr className="h-1 mt-2"/>
+            </>}
+            <div className="mx-2">
+                {children} 
+            </div>
+        </div>
+    )
+}

app/javascript/routes/paths.ts

@@ -21,4 +21,5 @@ export const DashboardRoutePaths = {
 export const AssessmentRoutePaths = {
   index: "/assessments",
   new: "/assessments/new",
+  newManual: "/assessments/new-manual"
 }

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 = () => (
     <Route exact path={QuestionRoutePaths.review} component={Review} />
     <Route exact path={AssessmentRoutePaths.index} component={AssessmentList} />
     <Route exact path={AssessmentRoutePaths.new} component={NewAssessement} />
+    <Route exact path={AssessmentRoutePaths.newManual} component={NewAssessementManual} />
   </Switch>
 );