gitea/checklist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Agregar paginacion al FrontEnd de preguntas con flechitas si hay mas de 8 v1.0.28

Browse Source
This commit is contained in:
ronalds
2025-11-24 22:03:00 -03:00
parent bfe542159d
commit 33b134e838
1 changed files with 37 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/App.jsx
View File

@@ -2490,13 +2490,32 @@ function InspectionModal({ checklist, user, onClose, onComplete }) {
const currentQuestion = visibleQuestions[currentQuestionIndex] const currentQuestion = visibleQuestions[currentQuestionIndex]
// Barra de navegación de preguntas // Barra de navegación de preguntas
// Paginación para la barra de preguntas
const QUESTIONS_PER_PAGE = 8;
const [questionPage, setQuestionPage] = useState(0);
const totalPages = Math.ceil(visibleQuestions.length / QUESTIONS_PER_PAGE);
const startIdx = questionPage * QUESTIONS_PER_PAGE;
const endIdx = startIdx + QUESTIONS_PER_PAGE;
const visibleBlock = visibleQuestions.slice(startIdx, endIdx);
const QuestionNavigator = () => ( const QuestionNavigator = () => (
<div className="flex flex-wrap gap-2 mb-6 justify-center"> <div className="flex items-center gap-2 mb-6 justify-center">
{visibleQuestions.map((q, idx) => { {/* Flecha izquierda */}
const answered = answers[q.id]?.value <button
onClick={() => setQuestionPage((p) => Math.max(0, p - 1))}
disabled={questionPage === 0}
className={`w-8 h-8 rounded-full border flex items-center justify-center text-xl font-bold transition-all select-none bg-gray-700 text-white border-gray-900 shadow-lg disabled:opacity-40 disabled:cursor-not-allowed`}
title="Anterior"
>
&#8592;
</button>
{/* Números de preguntas */}
{visibleBlock.map((q, idx) => {
const globalIdx = startIdx + idx;
const answered = answers[q.id]?.value;
let base = 'w-10 h-10 rounded-full border shadow-lg flex items-center justify-center text-lg font-bold transition-all select-none'; let base = 'w-10 h-10 rounded-full border shadow-lg flex items-center justify-center text-lg font-bold transition-all select-none';
let style = ''; let style = '';
if (idx === currentQuestionIndex) { if (globalIdx === currentQuestionIndex) {
style = 'bg-blue-900 text-white border-blue-900 scale-110'; style = 'bg-blue-900 text-white border-blue-900 scale-110';
} else if (answered) { } else if (answered) {
style = 'bg-green-700 text-white border-green-800'; style = 'bg-green-700 text-white border-green-800';
@@ -2506,16 +2525,25 @@ function InspectionModal({ checklist, user, onClose, onComplete }) {
return ( return (
<button <button
key={q.id} key={q.id}
onClick={() => goToQuestion(idx)} onClick={() => goToQuestion(globalIdx)}
className={`${base} ${style} hover:bg-blue-700 hover:border-blue-700`} className={`${base} ${style} hover:bg-blue-700 hover:border-blue-700`}
title={`Pregunta ${idx + 1}${answered ? ' (respondida)' : ''}`} title={`Pregunta ${globalIdx + 1}${answered ? ' (respondida)' : ''}`}
> >
{idx + 1} {globalIdx + 1}
</button> </button>
) );
})} })}
{/* Flecha derecha */}
<button
onClick={() => setQuestionPage((p) => Math.min(totalPages - 1, p + 1))}
disabled={questionPage >= totalPages - 1}
className={`w-8 h-8 rounded-full border flex items-center justify-center text-xl font-bold transition-all select-none bg-gray-700 text-white border-gray-900 shadow-lg disabled:opacity-40 disabled:cursor-not-allowed`}
title="Siguiente"
>
&#8594;
</button>
</div> </div>
) );
return ( return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"> <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">