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

feat: Miniaturas en visualización de inspección - frontend v1.0.23

Browse Source 
- Muestra miniaturas de fotos en cada pregunta usando media_files y photos
- Permite abrir imagen en grande al hacer click
- Actualización de docker-compose
This commit is contained in:
ronalds
2025-11-21 17:44:45 -03:00
parent 3100473eb6
commit 9c55f45c8a
2 changed files with 21 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/App.jsx
View File

@@ -1266,8 +1266,8 @@ function QuestionsManagerModal({ checklist, onClose }) {
>
<div className="flex-1">
<div className="flex items-start gap-3">
<span className="text-xs text-gray-400 mt-1">#{question.id}</span>
<div>
<div className="text-gray-400 text-sm mt-1">#{question.id}</div>
<div className="flex-1">
<div className="flex items-center gap-2">
{isSubQuestion && (
<span className="text-xs bg-blue-200 text-blue-800 px-2 py-1 rounded">
@@ -1777,9 +1777,23 @@ function InspectionDetailModal({ inspection, user, onClose, onUpdate }) {
</div>
)}
{/* Photos */}
{answer.photos && answer.photos.length > 0 && (
<div className="flex gap-2 flex-wrap">
{/* Photos - NUEVO: miniaturas de media_files */}
{(answer.media_files && answer.media_files.length > 0) && (
<div className="flex gap-2 flex-wrap mt-2">
{answer.media_files.map((media, idx) => (
<img
key={idx}
src={media.file_path}
alt={`Foto ${idx + 1}`}
className="w-20 h-20 object-cover rounded border border-gray-300 cursor-pointer hover:opacity-75"
onClick={() => window.open(media.file_path, '_blank')}
/>
))}
</div>
)}
{/* Photos - compatibilidad legacy */}
{(answer.photos && answer.photos.length > 0) && (
<div className="flex gap-2 flex-wrap mt-2">
{answer.photos.map((photo, idx) => (
<img
key={idx}
@@ -3108,7 +3122,7 @@ function UsersTab({ user }) {
<div key={u.id} className="bg-white rounded-lg shadow-md p-4">
<div className="flex justify-between items-start">
<div className="flex-1">
<div className="flex items-center gap-3">
<div className="flex items-center gap-3 mb-2">
<div className="w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-full flex items-center justify-center text-white font-bold">
{u.username.charAt(0).toUpperCase()}
</div>