add filter side bar

app/javascript/pages/assessment/NewAssessmentManual.tsx

@@ -8,6 +8,7 @@ import { SideBar } from "./components/SideBar";
 import { QuestionCard } from "./components/QuestionCard";
 import { Link } from "react-router-dom";
 import { SelectedQuestionsSideBar } from "./components/SelectedQuestionsSideBar";
+import { FiltersSideBar } from "./components/FiltersSideBar";
 
 type NewAssessementManualForm = {
   axisWeights: Record<string, any>
@@ -66,34 +67,32 @@ export const NewAssessementManual = () => {
   return (
     <>
         <Navigator home />
-        <div className="grid grid-cols-5 gap-2 mt-4 mx-6">
-            <SideBar> {/*bgColor="bg-red-700"*/}
-                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"
-                  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}/>
+        <div className="grid grid-cols-5 gap-4 mt-4 mx-4">
+          <FiltersSideBar/>
+          <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"
+              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}/>
         </div>
     </>
   )

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

@@ -0,0 +1,69 @@
+import React, { FC, } from "react";
+import { SideBar } from "./SideBar";
+import { SelectedQuestionCard } from "./SelectedQuestionCard";
+import { Button } from "../../../components";
+import { SelectFilterField } from "./SelectFilterField";
+import { RangeFilterField } from "./RangeFilterField";
+
+type Props = {
+    questions?: {
+        id: string, label: string, removeHandler: Function
+    }[]
+}
+
+export const FiltersSideBar: FC<Props> = () => {
+    return (
+        <SideBar header="Filtros">
+            <div className="mt-3">
+                <form className="flex flex-col gap-4"
+                    // onSubmit={addAxisForm.handleSubmit(handleAddAxis)}
+                >
+                    <SelectFilterField label="Grau de Dificuldade:" options={[
+                        {id: 1, label: 'Fácil'},
+                        {id: 2, label: 'Média'},
+                        {id: 3, label: 'Difícil'}
+                    ]}/>
+                    <SelectFilterField label="Categoria:" options={[
+                        {id: 1, label: 'Conhecimentos Básicos'},
+                        {id: 2, label: 'Redes e Sistemas Computacionais'},
+                        {id: 3, label: 'Modelagem e Simulacao'}
+                    ]}/>
+                    <SelectFilterField label="Eixo de Formação:" options={[
+                        {id: 1, label: 'Infraestrutura de Sistemas Computacionais'},
+                        {id: 2, label: 'Sistemas de Software'},
+                        {id: 3, label: 'Algoritmos de Alto Desempenho'}
+                    ]}/>
+                    <SelectFilterField label="Assunto:" options={[
+                        {id: 1, label: 'Cálculo'},
+                        {id: 2, label: 'Pesquisa Operacional'},
+                        {id: 3, label: 'Sistemas Digitais'}
+                    ]}/>
+                    <SelectFilterField label="Habilidade Cognitiva:" options={[
+                        {id: 1, label: 'Recordar'},
+                        {id: 2, label: 'Compreender'},
+                        {id: 3, label: 'Criar'}
+                    ]}/>
+                    <SelectFilterField label="Tipo:" options={[
+                        {id: 1, label: 'Resposta Multipla'},
+                        {id: 2, label: 'Lacuna'},
+                        {id: 3, label: 'Foco Negativo'}
+                    ]}/>
+                    <SelectFilterField label="Autoria:" options={[
+                        {id: 1, label: 'Própria'},
+                        {id: 2, label: 'Outro'},
+                    ]}/>
+                    <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/QuestionCard.tsx

@@ -37,14 +37,14 @@ export const QuestionCard: FC<Props> = ({ title, onAddQuestion, onRemoveQuestion
                     {!collapsed && <div className="grid grid-cols-2 gap-2">
                         <div>
                             <span className="text-gray-700">Grau de Dificuldade: </span>
-                            <span>Media</span>
+                            <span>Média</span>
                         </div>
                         <div>
                             <span className="text-gray-700">Categoria: </span>
                             <span>Modelagem</span>
                         </div>
                         <div>
-                            <span className="text-gray-700">Eixo de Formacao: </span>
+                            <span className="text-gray-700">Eixo de Formação: </span>
                             <span>Infra Sistemas</span>
                         </div>
                         <div>
@@ -52,17 +52,21 @@ export const QuestionCard: FC<Props> = ({ title, onAddQuestion, onRemoveQuestion
                             <span>Fisica</span>
                         </div>
                         <div>
-                            <span className="text-gray-700">Habilidade Cogn: </span>
+                            <span className="text-gray-700">Habilidade Cognitiva: </span>
                             <span>Compreender</span>
                         </div>
                         <div>
-                            <span className="text-gray-700">Ano: </span>
-                            <span>2023</span>
+                            <span className="text-gray-700">Tipo: </span>
+                            <span>Resposta Multipla</span>
                         </div>
                         <div>
                             <span className="text-gray-700">Autoria: </span>
                             <span>UNIFESO</span>
                         </div>
+                        <div>
+                            <span className="text-gray-700">Ano: </span>
+                            <span>2023</span>
+                        </div>
                         <div className="col-span-2">
                             <span className="text-gray-700">Enunciado:</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, 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/SelectedQuestionsSideBar.tsx

@@ -10,9 +10,7 @@ type Props = {
 
 export const SelectedQuestionsSideBar: FC<Props> = ({ questions }) => {
     return (
-        <SideBar>
-            <h1>Questões Selecionadas</h1>
-            <hr className="h-1 mt-2"/>
+        <SideBar header="Questões Selecionadas">
             <div>
                 {questions.length ?
                     questions.map(q => <SelectedQuestionCard

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

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