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

add selected question card

Browse Source
This commit is contained in:
WindowsCrashed
2023-08-07 22:06:14 -03:00
parent eb33921b20
commit decd05a156
4 changed files with 103 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,6 +7,9 @@ import { Axis, Query } from "../../__generated__/graphql-schema";
import { Button, Card, Input, Navigator } from '../../components'; import { Button, Card, Input, Navigator } from '../../components';
import { SideBar } from "./components/SideBar"; import { SideBar } from "./components/SideBar";
import { QuestionCard } from "./components/QuestionCard"; import { QuestionCard } from "./components/QuestionCard";
import { Link } from "react-router-dom";
import { SelectedQuestionCard } from "./components/SelectedQuestionCard";
import { SelectedQuestionsSideBar } from "./components/SelectedQuestionsSideBar";
type NewAssessementManualForm = { type NewAssessementManualForm = {
axisWeights: Record<string, any> axisWeights: Record<string, any>
@@ -65,9 +68,12 @@ export const NewAssessementManual = () => {
<QuestionCard title="Question 6"/> <QuestionCard title="Question 6"/>
<QuestionCard title="Question 7"/> <QuestionCard title="Question 7"/>
</div> </div>
<SideBar> {/*bgColor="bg-yellow-400"*/} <SelectedQuestionsSideBar>
Selected Questions <SelectedQuestionCard id="Question1" label="question 1"/>
</SideBar> <SelectedQuestionCard id="Question2" label="question 2"/>
<SelectedQuestionCard id="Question3" label="question 3"/>
<SelectedQuestionCard id="Question5" label="question 5"/>
</SelectedQuestionsSideBar>
</div> </div>
</> </>
// <> // <>

90
app/javascript/pages/assessment/components/QuestionCard.tsx
View File

@@ -7,53 +7,55 @@ interface Props {
export const QuestionCard: FC<Props> = ({ title }) => { export const QuestionCard: FC<Props> = ({ title }) => {
return ( return (
<Card title={title} className="mb-5"> <div id={title.replace(/\s+/g, '')}>
<div> <Card title={title} className="mb-5">
<div className="grid grid-cols-2 gap-2"> <div>
<div> <div className="grid grid-cols-2 gap-2">
<span className="text-gray-700">Grau de Dificuldade: </span>
<span>Media</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>Infra Sistemas</span>
</div>
<div>
<span className="text-gray-700">Assunto: </span>
<span>Fisica</span>
</div>
<div>
<span className="text-gray-700">Habilidade Cogn: </span>
<span>Compreender</span>
</div>
<div>
<span className="text-gray-700">Ano: </span>
<span>2023</span>
</div>
<div>
<span className="text-gray-700">Autoria: </span>
<span>UNIFESO</span>
</div>
<div className="col-span-2">
<span className="text-gray-700">Enunciado:</span>
<div> <div>
ijodsjidsoifidfsiojsdfiojdsfiodfs ijdf iodsf iosd iojdf sijodsf iojdsf ioj sdfiojdf sioj dfsiojsdf iojdfs ijodsfijoidfsijodfsijdfsijo dsiofd ijosdfjiofdsidsfio <span className="text-gray-700">Grau de Dificuldade: </span>
<span>Media</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>Infra Sistemas</span>
</div>
<div>
<span className="text-gray-700">Assunto: </span>
<span>Fisica</span>
</div>
<div>
<span className="text-gray-700">Habilidade Cogn: </span>
<span>Compreender</span>
</div>
<div>
<span className="text-gray-700">Ano: </span>
<span>2023</span>
</div>
<div>
<span className="text-gray-700">Autoria: </span>
<span>UNIFESO</span>
</div>
<div className="col-span-2">
<span className="text-gray-700">Enunciado:</span>
<div>
ijodsjidsoifidfsiojsdfiojdsfiodfs ijdf iodsf iosd iojdf sijodsf iojdsf ioj sdfiojdf sioj dfsiojsdf iojdfs ijodsfijoidfsijodfsijdfsijo dsiofd ijosdfjiofdsidsfio
</div>
</div>
</div>
<div className="mt-6">
<hr className="h-4"/>
<div className="flex justify-end">
<Button type="primary">
Adicionar
</Button>
</div> </div>
</div> </div>
</div> </div>
<div className="mt-6"> </Card>
<hr className="h-4"/> </div>
<div className="flex justify-end">
<Button type="primary">
Adicionar
</Button>
</div>
</div>
</div>
</Card>
) )
} }

26
app/javascript/pages/assessment/components/SelectedQuestionCard.tsx Normal file
View File

@@ -0,0 +1,26 @@
import React, { FC } from 'react';
import { FaTrash } from 'react-icons/fa';
import { Link } from 'react-router-dom';
type Props = {
label: string
id: string
}
export const SelectedQuestionCard: FC<Props> = ({ label, id }) => {
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' }}>
<FaTrash />
</button>
</div>
</div>
)
}

22
app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx Normal file
View File

@@ -0,0 +1,22 @@
import React, { FC, PropsWithChildren } from "react";
import { SideBar } from "./SideBar";
interface Props extends PropsWithChildren {
}
export const SelectedQuestionsSideBar: FC<Props> = ({ children }) => {
return (
<SideBar>
<h1>Questões Selecionadas</h1>
<hr className="h-1 mt-2"/>
<div>
{children ??
<h2 className="text-gray-700 mt-3">
Nenhuma questão selecionada
</h2>
}
</div>
</SideBar>
)
}