trabajar por logos para checklists
This commit is contained in:
@@ -1458,9 +1458,11 @@ function ChecklistsTab({ checklists, user, onChecklistCreated, onStartInspection
|
||||
const [showCreateModal, setShowCreateModal] = useState(false)
|
||||
const [showQuestionsModal, setShowQuestionsModal] = useState(false)
|
||||
const [showEditPermissionsModal, setShowEditPermissionsModal] = useState(false)
|
||||
const [showLogoModal, setShowLogoModal] = useState(false)
|
||||
const [selectedChecklist, setSelectedChecklist] = useState(null)
|
||||
const [creating, setCreating] = useState(false)
|
||||
const [updating, setUpdating] = useState(false)
|
||||
const [uploadingLogo, setUploadingLogo] = useState(false)
|
||||
const [mechanics, setMechanics] = useState([])
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [aiModeFilter, setAiModeFilter] = useState('all') // all, off, optional, required
|
||||
@@ -1583,6 +1585,78 @@ function ChecklistsTab({ checklists, user, onChecklistCreated, onStartInspection
|
||||
}
|
||||
}
|
||||
|
||||
const handleUploadLogo = async (e) => {
|
||||
const file = e.target.files[0]
|
||||
if (!file) return
|
||||
|
||||
// Validar que sea imagen
|
||||
if (!file.type.startsWith('image/')) {
|
||||
alert('Por favor selecciona una imagen válida')
|
||||
return
|
||||
}
|
||||
|
||||
setUploadingLogo(true)
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token')
|
||||
const API_URL = import.meta.env.VITE_API_URL || ''
|
||||
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
|
||||
const response = await fetch(`${API_URL}/api/checklists/${selectedChecklist.id}/upload-logo`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: formData
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
setShowLogoModal(false)
|
||||
setSelectedChecklist(null)
|
||||
onChecklistCreated() // Reload checklists
|
||||
alert('Logo subido exitosamente')
|
||||
} else {
|
||||
const error = await response.json()
|
||||
alert(error.detail || 'Error al subir el logo')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error)
|
||||
alert('Error al subir el logo')
|
||||
} finally {
|
||||
setUploadingLogo(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteLogo = async () => {
|
||||
if (!confirm('¿Estás seguro de eliminar el logo?')) return
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token')
|
||||
const API_URL = import.meta.env.VITE_API_URL || ''
|
||||
|
||||
const response = await fetch(`${API_URL}/api/checklists/${selectedChecklist.id}/logo`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
setShowLogoModal(false)
|
||||
setSelectedChecklist(null)
|
||||
onChecklistCreated() // Reload checklists
|
||||
alert('Logo eliminado exitosamente')
|
||||
} else {
|
||||
alert('Error al eliminar el logo')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error)
|
||||
alert('Error al eliminar el logo')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{user.role === 'admin' && (
|
||||
@@ -1669,7 +1743,22 @@ function ChecklistsTab({ checklists, user, onChecklistCreated, onStartInspection
|
||||
) : (
|
||||
filteredChecklists.map((checklist) => (
|
||||
<div key={checklist.id} className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex justify-between items-start gap-4">
|
||||
{/* Logo del Checklist */}
|
||||
<div className="flex-shrink-0">
|
||||
{checklist.logo_url ? (
|
||||
<img
|
||||
src={checklist.logo_url}
|
||||
alt={`Logo ${checklist.name}`}
|
||||
className="w-16 h-16 object-contain rounded-lg border border-gray-200"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-lg flex items-center justify-center">
|
||||
<span className="text-2xl">📋</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-gray-900">{checklist.name}</h3>
|
||||
<p className="text-sm text-gray-600 mt-1">{checklist.description}</p>
|
||||
@@ -1701,6 +1790,16 @@ function ChecklistsTab({ checklists, user, onChecklistCreated, onStartInspection
|
||||
<div className="flex gap-2">
|
||||
{user.role === 'admin' && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedChecklist(checklist)
|
||||
setShowLogoModal(true)
|
||||
}}
|
||||
className="px-3 py-2 bg-gradient-to-r from-blue-500 to-cyan-500 text-white rounded-lg hover:from-blue-600 hover:to-cyan-600 transition-all transform hover:scale-105 shadow-lg text-sm"
|
||||
title="Gestionar logo"
|
||||
>
|
||||
🖼️ Logo
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedChecklist(checklist)
|
||||
@@ -2039,6 +2138,76 @@ function ChecklistsTab({ checklists, user, onChecklistCreated, onStartInspection
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modal Gestionar Logo */}
|
||||
{showLogoModal && selectedChecklist && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-lg max-w-md w-full">
|
||||
<div className="p-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-2">Gestionar Logo</h2>
|
||||
<p className="text-sm text-gray-600 mb-4">
|
||||
{selectedChecklist.name}
|
||||
</p>
|
||||
|
||||
{/* Logo actual */}
|
||||
<div className="mb-6 flex justify-center">
|
||||
{selectedChecklist.logo_url ? (
|
||||
<div className="relative">
|
||||
<img
|
||||
src={selectedChecklist.logo_url}
|
||||
alt="Logo actual"
|
||||
className="w-32 h-32 object-contain rounded-lg border-2 border-gray-200"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-32 h-32 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-lg flex items-center justify-center">
|
||||
<span className="text-4xl">📋</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Botones de acción */}
|
||||
<div className="space-y-3">
|
||||
<label className="block">
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleUploadLogo}
|
||||
className="hidden"
|
||||
disabled={uploadingLogo}
|
||||
/>
|
||||
<div className="px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-center cursor-pointer">
|
||||
{uploadingLogo ? 'Subiendo...' : selectedChecklist.logo_url ? '🔄 Cambiar Logo' : '📤 Subir Logo'}
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{selectedChecklist.logo_url && (
|
||||
<button
|
||||
onClick={handleDeleteLogo}
|
||||
className="w-full px-4 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
|
||||
>
|
||||
🗑️ Eliminar Logo
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowLogoModal(false)
|
||||
setSelectedChecklist(null)
|
||||
}}
|
||||
className="w-full px-4 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition"
|
||||
>
|
||||
Cerrar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="mt-4 text-xs text-gray-500 text-center">
|
||||
💡 Tamaño recomendado: 200x200px o similar. Formatos: JPG, PNG, SVG
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user